/* Gemini-inspired visual overrides. Load after styles.css and dark-mode.css */

/* Tokens */
:root {
  --font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Brand + palette (teal/green-cyan) */
  --brand-start: #35aeb1; /* teal start */
  --brand-end:   #7dd6d8; /* lighter cyan */
  --primary: #35aeb1;     /* main accent */
  --primary-light: #b5e8ea; /* pale teal tint */
  --secondary: #9120ab;   /* align with app secondary */

  /* Surfaces (light) */
  --surface-1: #ffffff;
  --surface-2: #f6f7fb;
  --border-light: #e5e7eb;
  --text-primary: #0f172a; /* slate-900 */
  --text-secondary: #64748b; /* slate-500 */

  /* Radii & elevation */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Motion */
  --anim-duration-xs: 120ms;
  --anim-duration-sm: 180ms;
  --anim-duration-md: 240ms;
  --anim-duration-lg: 320ms;
  --anim-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --anim-easing-bounce: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ensure legible default text color in light theme */
body:not(.dark-mode) {
  color: var(--text-primary);
}

/* Ensure readable text in composer + search for light mode */
body:not(.dark-mode) .search-bar input { color: var(--text-primary); }

/* Placeholder contrast in light mode */
body:not(.dark-mode) .input-textarea::placeholder,
body:not(.dark-mode) .search-bar input::placeholder { color: var(--text-secondary); opacity: 1; }

/* Dark tokens */
body.dark-mode {
  --brand-start: #2dc6c9; /* brighter teal */
  --brand-end:   #93e5e7; /* soft aqua */
  --primary: hsl(181, 53%, 52%);
  --primary-light: rgba(66, 194, 197, 0.2);
  --secondary: #b332cc; /* align with dark secondary */

  --surface-1: #2125294f;
  --surface-2: #101523;
  --border-light: #1f2021;
  --text-primary: #e5eaf3;
  --text-secondary: #94a3b8;
}

/* Header: subtle translucency, soft divider */
.header {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border-light);
}
body.dark-mode .header {
  background: linear-gradient(180deg, rgba(26, 26, 27, 0.9), rgba(28, 27, 27, 0.7));
}

.header .header-symbia {
  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

/* Swap logos in dark mode */
.dark-mode-logo { display: none; }
body.dark-mode .dark-mode-logo { display: inline-block !important; }
body.dark-mode .light-mode-logo { display: none !important; }

/* Buttons: gradient primary, tinted secondary */
.btn {
  border-radius: var(--radius-xl);
  transition: transform var(--anim-duration-xs) var(--anim-easing-bounce),
              box-shadow var(--anim-duration-sm) var(--anim-easing-standard),
              background-color var(--anim-duration-sm) var(--anim-easing-standard);
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color: #fff;
  box-shadow: 0 6px 16px rgba(53, 174, 177, 0.25);
}
.btn-primary:hover { box-shadow: 0 8px 20px rgba(125, 214, 216, 0.35); }
.btn-primary:disabled { opacity: 0.6; box-shadow: none; }

.btn-secondary {
  color: var(--text-primary);
}

.btn-icon {
  border-radius: 999px;
}
.btn-icon.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border-light));
}

/* Profile chip */
.profile-chip {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color: #fff; font-weight: 700; font-size: 12px;
  box-shadow: 0 4px 10px rgba(53,174,177,0.25);
}

/* About modal */
.about-header { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.about-logo { height: 28px; width: auto; }
.about-title { font-weight: 600; }
.about-legal { margin-top: 8px; font-size: 14px; line-height: 1.5; }

/* Tabs: rounded chips + underline */
.content-tabs {
  position: sticky;
  z-index: 15;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.tab-button {
  position: relative;
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--text-secondary);
  transition: background-color var(--anim-duration-sm) var(--anim-easing-standard),
              color var(--anim-duration-sm) var(--anim-easing-standard),
              transform var(--anim-duration-xs) var(--anim-easing-bounce);
}
.tab-button.active {
  background-color: color-mix(in srgb, var(--primary) 10%, var(--surface-1));
  color: var(--text-primary);
}
.tab-button.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -9px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
}

/* Input composer */
.input-container {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-1));
}
.input-main { border-radius: var(--radius-xl); }
.input-actions { background-color: var(--surface-2); }

/* Animated ring around input when loading */
.input-container {
  position: sticky;
  overflow: visible; /* allow glow to extend outside */
}

/* Register custom property for smoother angle animation */
@property --ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.input-container.loading::before,
.input-container.center-screen.loading::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-xl) + 4px);
  background: conic-gradient(from var(--ring-angle),
    var(--brand-start),
    color-mix(in srgb, var(--brand-start) 70%, var(--brand-end) 30%),
    var(--brand-end),
    color-mix(in srgb, var(--brand-end) 60%, var(--secondary) 40%),
    var(--secondary),
    color-mix(in srgb, var(--secondary) 55%, var(--brand-start) 45%),
    var(--brand-start)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px; /* thicker animated border */
  animation: ring-spin 3s linear infinite;
  opacity: 0.85;
  pointer-events: none;
}

/* Soft outer glow following the gradient ring */
.input-container.loading::after,
.input-container.center-screen.loading::after {
  content: '';
  position: absolute;
  inset: -12px; /* extend glow farther out */
  border-radius: calc(var(--radius-xl) + 12px);
  background: conic-gradient(from var(--ring-angle),
    var(--brand-start),
    color-mix(in srgb, var(--brand-start) 70%, var(--brand-end) 30%),
    var(--brand-end),
    color-mix(in srgb, var(--brand-end) 60%, var(--secondary) 40%),
    var(--secondary),
    color-mix(in srgb, var(--secondary) 55%, var(--brand-start) 45%),
    var(--brand-start)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 12px; /* wider band for stronger halo */
  filter: blur(16px) saturate(1.15);
  opacity: 0.5; /* more visible glow */
  /* keep animation aligned with inner ring */
  animation: ring-spin 6s linear infinite;
  pointer-events: none;
}

/* Animate the gradient angle rather than rotating the element */
@keyframes ring-spin {
  from { --ring-angle: 0deg; }
  to   { --ring-angle: 360deg; }
}

/* Mobile: keep ring and glow inside the container bounds to avoid clipping */
@media (max-width: 920px) {
  /* Replace ring with a top animated bar on mobile */
  .input-container.loading::before,
  .input-container.center-screen.loading::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px; /* thickness of the top bar */
    border-radius: 0; /* mobile input has no radius */
    background: linear-gradient(90deg,
      var(--brand-start),
      color-mix(in srgb, var(--brand-start) 60%, var(--brand-end) 40%),
      var(--brand-end),
      color-mix(in srgb, var(--brand-end) 60%, var(--secondary) 40%),
      var(--secondary),
      var(--brand-start)
    );
    background-size: 300% 100%;
    animation: input-topbar-scan 2.4s linear infinite;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-end) 40%, transparent);
    pointer-events: none;
    transform: translateY(-5px);
  }

  /* Disable glow ring on mobile */
  .input-container.loading::after,
  .input-container.center-screen.loading::after {
    content: none;
  }
}

@keyframes input-topbar-scan {
  0%   { background-position-x: 0%; }
  100% { background-position-x: 300%; }
}

#send-message {
  width: 42px;
  height: 42px;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color: #fff;
  box-shadow: 0 6px 16px rgba(53, 174, 177, 0.25);
}
#send-message:disabled { filter: grayscale(0.3) opacity(0.7); box-shadow: none; }

/* Links and selection */
a { color: var(--secondary); }
a:hover { text-decoration: underline; }
::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); }

/* Disclaimer bar */
.disclaimer-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 8px 0 12px;
  border: 1px dashed var(--border-light);
  border-radius: 12px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-1));
}
body.dark-mode .disclaimer-bar {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-1));
}

/* Subtle inline disclaimer under sidebar search */
.disclaimer-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-secondary);
  margin: -8px 2px 6px 2px; /* reduce gap impact and keep subtle spacing */
}

/* Conversation messages */
.message {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  animation: gem-pop var(--anim-duration-md) var(--anim-easing-bounce);
}
.message-user {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-1));
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border-light));
}
.message-assistant {
  background: var(--surface-1);
}

/* Thinking badge and loaders */
.thinking-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}

.searching-message .message-header {
  color: var(--text-secondary);
}
.searching-message .loading-dots span {
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
}
.loading-dots {
  color: var(--primary);
}

/* Code blocks inside assistant messages */
.message-assistant .code-block,
.code-snippet {
  background: var(--surface-1);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

/* Sidebar surfaces */
.sidebar,
.sidebar-right {
  background: var(--surface-1);
}

/* History hover and active accents */
.sidebar .history-item:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface-1)); }
.sidebar .history-item.active {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-1));
}

/* Gemini-style history item layout */
.sidebar .history-item {
  display: grid;
  grid-template-columns: 1fr auto; /* remove leading icon column */
  align-items: center;
  column-gap: 10px;
}
/* no icon column now; keep rule harmless if present elsewhere */
.history-icon { display: none; }
.history-text { display: flex; flex-direction: column; min-width: 0; }
.history-title { font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-meta { font-size: 12px; color: var(--text-secondary); }

/* Ensure full width for text block in grid (override old width calc) */
.sidebar .history-item .history-item-text { width: 100% !important; }

/* Ensure dark mode surfaces follow Gemini tokens, overriding older rules */
body.dark-mode .sidebar,
body.dark-mode .sidebar-right {
  border-color: var(--border-light) !important;
}

/* Dark mode message backgrounds */
body.dark-mode .message-assistant { background: var(--surface-1) !important; }
body.dark-mode .message-user {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-1));
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border-light));
}

/* In-chat reasoning steps */
.search-steps {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.search-step {
  position: relative;
  border-left: 3px solid color-mix(in srgb, var(--primary) 50%, var(--surface-1));
  padding: 6px 8px 6px 12px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-1));
  border-radius: 8px;
}
.search-step::before {
  content: '';
  position: absolute;
  left: -6px; top: 10px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.search-step-title {
  font-weight: 600;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.search-step-body {
  color: var(--text-secondary);
  margin-top: 4px;
  font-size: 14px;
}
.searching-message .message-header .btn.search-toggle {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 12px;
}
.search-analysis {
  margin-top: 8px;
  border: 1px dashed var(--border-light);
  border-radius: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-1));
}
.search-analysis.collapsed { display: none; }
.search-analysis-toggle { margin-left: 8px; }

/* Dropdowns & modals */
.dropdown-menu,
.dropdown-menu-up,
.modal .modal-content,
.toast {
  border: 1px solid var(--border-light);
  background-color: var(--surface-1);
  border-radius: var(--radius-lg);
}

/* Modernized toast visuals */
.toast {
  position: fixed;
  overflow: hidden;
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  transform: translateY(8px) scale(0.98);
  transition: transform var(--anim-duration-md) var(--anim-easing-decelerate),
              opacity var(--anim-duration-sm) var(--anim-easing-standard),
              box-shadow var(--anim-duration-sm) var(--anim-easing-standard);
}

.toast.visible { transform: translateY(0) scale(1); }

/* Accent stripe */
.toast { --toast-accent: var(--primary); }
.toast.success { --toast-accent: var(--primary); border-left: 0; }
.toast.error   { --toast-accent: #ef4444; border-left: 0; }
.toast.info    { --toast-accent: var(--secondary); border-left: 0; }

.toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--toast-accent), color-mix(in srgb, var(--toast-accent) 55%, transparent));
}

/* Header layout with subtle badge */
.toast-header { margin-bottom: 6px; }
.toast-header strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

/* Welcome hero for new conversations */
.welcome-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 16px 28px;
  margin-top: 10vh;
  text-align: center;
  color: var(--text-primary);
  position: relative;
}
.welcome-hero .welcome-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-1));
  box-shadow: 0 6px 18px rgba(53, 174, 177, 0.18);
}
.welcome-hero .welcome-title {
  font-size: 28px;
  line-height: 1.2;
  margin: 6px 0 0;
  font-weight: 700;
  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.welcome-hero .welcome-sub {
  color: var(--text-secondary);
  margin: 4px 0 0;
}

@media (max-width: 920px) {
  .welcome-hero { margin-top: 12vh; padding-top: 24px; }
  .welcome-hero .welcome-title { font-size: 22px; }
}
.toast-header strong::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--toast-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--toast-accent) 18%, transparent);
}

/* Compact close button */
#close-toast.btn.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 4px;
}
#close-toast.btn.btn-icon:hover { color: var(--text-primary); }

.toast.success { border-left: 2px solid var(--primary); }
.toast.error { border-left-color: #ef4444; }
.toast.info { border-left-color: var(--secondary); }

/* Source count chip */
.source-count {
  background-color: color-mix(in srgb, var(--primary) 18%, var(--surface-1));
  color: var(--primary);
}

/* Focus visible rings for accessibility */
:where(button, [role="button"], .btn, input, textarea, select, .tab-button):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Remove default focus border on history container; items keep custom ring */
#search-history:focus, #search-history:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Input composer: show focus as a bottom accent only */
.input-row:focus-within {
  outline: none;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--primary) 70%, transparent);
}

/* Suppress global focus ring on the message textarea so only bottom glow shows */
.input-row .input-textarea:focus,
.input-row .input-textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Tiny pop animation */
@keyframes gem-pop {
  0% { transform: translateY(4px) scale(0.98); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Subtle app background flourish */
.app {
  background-image:
    radial-gradient(800px 400px at 0% -10%, color-mix(in srgb, var(--brand-start) 12%, transparent), transparent 60%),
    radial-gradient(800px 400px at 110% 0%, color-mix(in srgb, var(--brand-end) 10%, transparent), transparent 60%);
}

/* Centered disclaimer under input in center-screen mode */
.disclaimer-under-input {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(50% + (var(--input-container-height, 200px)) / 2 + 12px);
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}
.input-container.center-screen ~ .disclaimer-under-input {
  display: block;
}

/* Tabs dark mode surface */
body.dark-mode .content-tabs {
  background: linear-gradient(180deg, rgba(26, 26, 27, 0.9), rgba(28, 27, 27, 0.7));
  border-bottom-color: var(--border-light) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* Title area: visually merge with header */
.main-content > #search-title {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  margin-top: 0;
}
body.dark-mode .main-content > #search-title {
  background: transparent;
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
}

/* Source previews */
.source-thumbnail-container {
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
.source-title { color: var(--text-primary); }
.source-url { color: var(--text-secondary); }

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Fine-tune hover effects when not reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .history-item:active { transform: scale(0.99); }
}