:root { --ring: 0 0 0 1px rgba(99,102,241,.35), 0 8px 20px -6px rgba(99,102,241,.35); }
/* Core brand (purple) variables only */
[data-theme-root] {
  --accent-1: rgba(99,102,241,.6);
  --accent-2: rgba(236,72,153,.6);
  --accent-3: rgba(16,185,129,.6);
  --aurora-1: rgba(99,102,241,.30);
  --aurora-2: rgba(236,72,153,.25);
  --aurora-3: rgba(16,185,129,.22);
  --link-light: #4f46e5;
  --link-dark: #818cf8;
}

/* Simple bright theme (light, flatter surfaces) */
[data-theme-root][data-style="bright"] { 
  --accent-1: rgba(99,102,241,.55);
  --accent-2: rgba(236,72,153,.50);
  --accent-3: rgba(16,185,129,.50);
  --aurora-1: rgba(99,102,241,.18);
  --aurora-2: rgba(236,72,153,.15);
  --aurora-3: rgba(16,185,129,.14);
  --link-light: #4338ca;
  --link-dark: #6366f1;
}
/* (dark class is removed in JS for bright mode; no override selectors needed) */
[data-theme-root][data-style="bright"] .ai-bubble a { color: var(--link-light); }
[data-theme-root][data-style="bright"] .user-bubble { background: #ffffff; border:1px solid #e2e8f0; color:#0f172a; }
[data-theme-root][data-style="bright"] .ai-bubble { background:#f8fafc; border:1px solid #e2e8f0; }
[data-theme-root][data-style="bright"] .send-btn { background: linear-gradient(180deg,#ffffff,#f1f5f9); border-color:#e2e8f0; color:#1e293b; }
[data-theme-root][data-style="bright"] .send-btn:hover { background: linear-gradient(180deg,#ffffff,#e2e8f0); }

/* 1) Theme & selection polish */
[data-theme-root] .ai-bubble,
[data-theme-root] .user-bubble,
[data-theme-root] header,
[data-theme-root] aside,
[data-theme-root] .rounded-2xl,
[data-theme-root] .border {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
::selection { background: rgba(79,70,229,.25); color: inherit; }
::-moz-selection { background: rgba(79,70,229,.25); color: inherit; }

/* 1.1) Aurora mask */
.aurora-mask{
  position:absolute; inset:0; pointer-events:none; opacity:.25;
  background: conic-gradient(from 180deg at 70% 40%, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-1));
  filter: blur(60px) saturate(120%);
}
.dark .aurora-mask{ opacity:.45; }

/* 2) Scrollbars (chat + drawers) */
#chat-messages,
#mobile-sidebar,
#drawerShortcuts,
#drawerSettings { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.6) transparent; }
#chat-messages::-webkit-scrollbar,
#mobile-sidebar::-webkit-scrollbar,
#drawerShortcuts::-webkit-scrollbar,
#drawerSettings::-webkit-scrollbar { width: 8px; height: 8px; }
#chat-messages::-webkit-scrollbar-thumb,
#mobile-sidebar::-webkit-scrollbar-thumb,
#drawerShortcuts::-webkit-scrollbar-thumb,
#drawerSettings::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 6px; }

/* 3) Glassy elevation used by cards */
.shadow-glass { box-shadow: 0 12px 38px -18px rgba(2, 6, 23, 0.35), 0 3px 12px -2px rgba(2, 6, 23, .08); }
.shadow-ring { box-shadow: var(--ring); }

/* 4) AI content formatting */
.ai-bubble :where(h1,h2,h3){ margin:.25rem 0; font-weight:700; }
.ai-bubble h1{ font-size:1.125rem; }
.ai-bubble h2{ font-size:1rem; }
.ai-bubble h3{ font-size:.95rem; }
.ai-bubble p{ margin:.35rem 0; }
.ai-bubble ul,.ai-bubble ol{ padding-left:1.25rem; margin:.35rem 0; }
.ai-bubble li+li{ margin-top:.15rem; }
.ai-bubble a{ text-decoration: underline; text-underline-offset: 2px; color: var(--link-light); }
.dark .ai-bubble a { color: var(--link-dark); }

.ai-bubble code{ font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; background: rgba(0,0,0,.05); padding:.15rem .35rem; border-radius:.375rem; font-size:.875em; }
.dark .ai-bubble code{ background: rgba(255,255,255,.06); }
.ai-bubble pre{ background:#f1f5f9; color:#1e293b; border:1px solid #e2e8f0; border-radius:.75rem; padding:.75rem 1rem; overflow:auto; margin:.5rem 0; }
.dark .ai-bubble pre{ background:#0b1220; color:#e5edff; border:1px solid rgba(255,255,255,.06); }
.ai-bubble pre code{ background:transparent; padding:0; color:inherit; }
.ai-bubble table{ width:100%; border-collapse:collapse; margin:.5rem 0; font-size:.9em; }
.ai-bubble th,.ai-bubble td{ border:1px solid #cbd5e1; padding:.4rem .5rem; }
.dark .ai-bubble th,.dark .ai-bubble td { border-color: rgba(148,163,184,.25); }
.ai-bubble th{ background: #eef2ff; font-weight:600; }
.dark .ai-bubble th{ background: rgba(99,102,241,.14); }
.ai-bubble blockquote{ border-left:3px solid #a5b4fc; padding-left:.75rem; margin:.5rem 0; color: #475569; }
.dark .ai-bubble blockquote{ border-left-color: rgba(79,70,229,.5); color: rgb(203 213 225); }

/* 5) User bubble links */
.user-bubble a{ text-decoration: underline; text-underline-offset: 2px; }

/* 6) Toast stack behavior */
#toast-stack{ pointer-events:none; } #toast-stack > *{ pointer-events:auto; }

/* 7) KBD fallback styling */
kbd {
  border: 1px solid #d1d5db; /* gray-300 */
  border-bottom-width: 2px;
  border-radius: .375rem;
  padding: .05rem .35rem;
  background: #f3f4f6; /* gray-100 */
  font-size: .8em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #374151; /* gray-700 */
}
.dark kbd {
  border: 1px solid rgba(148,163,184,.35);
  border-bottom-width: 2px;
  background: #0f172a;
  color: inherit;
}

/* 8) Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* 9) Print cleanup */
@media print{
  aside, header, #toast-stack, #mobile-sidebar, #drawerShortcuts, #drawerSettings{ display:none !important; }
  #chat-messages{ height:auto !important; overflow:visible !important; }
}

/* 10) Button glow */
.btn-glow{ position:relative; overflow:hidden; }
.btn-glow::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient(120deg, rgba(99,102,241,.6), rgba(236,72,153,.6), rgba(16,185,129,.6));
  /* Add standard mask for compatibility in addition to webkit */
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.6; pointer-events:none;
}
.btn-glow::after{
  content:""; position:absolute; inset:-60%; background: conic-gradient(from 0deg, rgba(255,255,255,.15), transparent 60%);
  animation: sweep 3.2s linear infinite; pointer-events:none;
}
@keyframes sweep{ to{ transform: rotate(1turn); } }

/* 11) Usage bar gradient states */
.usage-bar{ background: linear-gradient(90deg, #22c55e, #16a34a); transition: width .35s ease, filter .2s ease; filter: drop-shadow(0 0 0 rgba(34,197,94,.0)); }
.usage-bar.warn{ background: linear-gradient(90deg, #f59e0b, #d97706); filter: drop-shadow(0 0 12px rgba(245,158,11,.25)); }
.usage-bar.bad{ background: linear-gradient(90deg, #f43f5e, #e11d48); filter: drop-shadow(0 0 14px rgba(244,63,94,.25)); }

/* 11.1) Standard insight/forecast idea icon size */
.idea-icon{ width:1.25rem; height:1.25rem; flex-shrink:0; }

/* 12) Typing indicator dots */
.dot{ width:.4rem; height:.4rem; border-radius:999px; background: rgba(148,163,184,.8); display:inline-block; animation: blink 1.15s infinite ease-in-out; }
.dot.delay-1{ animation-delay:.15s; } .dot.delay-2{ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{ opacity:.3 } 40%{ opacity:1 } }

/* Dark mode: readable form controls & select menus */
.dark input[type="text"],
.dark input[type="email"],
.dark textarea,
.dark select {
  background-color: rgba(255,255,255,.06);
  color: #e5e7eb;              /* slate-200 */
  border-color: rgba(255,255,255,.10);
}

/* Try to style the dropdown list itself (supported in most modern browsers) */
.dark select option {
  background-color: #0b1220;   /* matches your dark surface */
  color: #e5e7eb;
}

/* Focus ring polish */
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(129,140,248,.4); /* brand-ish ring */
}
.apexcharts-canvas, .apexcharts-svg { max-width: 100% !important; }

/* 13) Collapsible sidebar */
body.sidebar-collapsed aside.hidden.lg\:flex, /* standard sidebar */
body.sidebar-collapsed aside.lg\:flex { display: none !important; }
body.sidebar-collapsed .flex.min-h-dvh > .flex.w-full.flex-col { width: 100%; }
body.sidebar-collapsed .sidebar-toggle[data-state="expanded"] .icon-collapse { display:none; }
body.sidebar-collapsed .sidebar-toggle[data-state="collapsed"] .icon-expand { display:none; }
/* When expanded */
body:not(.sidebar-collapsed) .sidebar-toggle[data-state="collapsed"] { display:none; }
body.sidebar-collapsed .sidebar-toggle[data-state="expanded"] { display:none; }

/* New single-button sidebar toggle (icon only) */
body.sidebar-collapsed .sidebar-toggle-btn { left: .65rem !important; }
.sidebar-toggle-btn { transition: left .25s ease, background-color .2s ease, border-color .2s ease, transform .25s ease; }


/* Improved selection (highlight) colors for readability - defaults */
::selection { background: rgba(250,204,21,0.95); color: #071422; }
::-moz-selection { background: rgba(250,204,21,0.95); color: #071422; }
.dark ::selection { background: rgba(99,102,241,0.85); color: #ffffff; }
.dark ::-moz-selection { background: rgba(99,102,241,0.85); color: #ffffff; }
.ai-bubble ::selection { background: rgba(99,102,241,0.9); color: #fff; }
.ai-bubble ::-moz-selection { background: rgba(99,102,241,0.9); color: #fff; }
.user-bubble ::selection { background: rgba(6,182,212,0.9); color: #022028; }
.user-bubble ::-moz-selection { background: rgba(6,182,212,0.9); color: #022028; }

/* Removed variant/experimental theme overrides; single brand palette remains */

/* Per-message action buttons (hidden until hover) */
.user-bubble.group { position: relative; }
.user-bubble .action-buttons { position: absolute; left: -48px; top: 50%; transform: translateY(-50%); display:flex; flex-direction:column; gap:8px; }
.user-bubble .action-buttons button { width:32px; height:32px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
.user-bubble .action-buttons { opacity:0; pointer-events:none; transition:opacity .12s ease; }
.user-bubble.group:hover .action-buttons { opacity:1; pointer-events:auto; }

/* Override user bubble background (light mode): solid translucent white for clarity */
.user-bubble{
  background: rgba(255,255,255,0.85);
  color: #0f172a; /* slate-900-ish */
  border: 1px solid rgba(2,6,23,0.08);
  box-shadow: 0 6px 18px -6px rgba(2,6,23,0.08);
}

.dark .user-bubble{
  /* Solid translucent black for a modern glassy look */
  background: rgba(0,0,0,0.20);
  color: #e5e7eb; /* slate-200 for readable text */
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 28px -12px rgba(0,0,0,0.45);
}

/* Make sure links inside user bubbles remain readable */
.user-bubble a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* AI bubble surfaces: balanced for light and dark */
.ai-bubble{
  /* Light mode: subtle slate surface */
  background: rgba(2,6,23,0.04);
  border: 1px solid rgba(2,6,23,0.08);
  box-shadow: 0 6px 16px -8px rgba(2,6,23,0.08);
}
.dark .ai-bubble{
  /* Dark mode: faint glass surface */
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35);
}

/* Per-message action buttons: ensure visibility in light mode */
.user-bubble .action-buttons button{ 
  background: rgba(2,6,23,0.08); 
  color: #334155; 
}
.user-bubble .action-buttons button:hover{ background: rgba(2,6,23,0.12); }
.dark .user-bubble .action-buttons button{ background: rgba(255,255,255,0.10); color: #e5e7eb; }
.dark .user-bubble .action-buttons button:hover{ background: rgba(255,255,255,0.18); }

/* Select AI mode visuals */
.selectable-ai { position: relative; cursor: pointer; }
.selectable-ai .selection-overlay { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.selectable-ai:hover { box-shadow: 0 8px 30px -8px rgba(99,102,241,.12); }
.selected-ai { outline: 3px solid rgba(6,182,212,0.18); box-shadow: 0 10px 30px -8px rgba(6,182,212,.12); }
.selected-ai .selection-overlay { background: linear-gradient(90deg, rgba(6,182,212,0.06), rgba(99,102,241,0.04)); }
.selected-ai::after {
  content: '\2713'; position: absolute; top: 8px; right: 8px; background: #06b6d4; color: #002226; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; font-weight: 700; font-size: 12px;
}

/* Make AI bubbles keyboard-focusable look when selectable */
.selectable-ai:focus { box-shadow: 0 0 0 4px rgba(99,102,241,0.12); }

/* 13) Chat send button: clean, theme-aware */
.send-btn{
  position: relative;
  border-radius: 0.75rem; /* match rounded-xl */
  padding-inline: 1rem; /* px-4 */
  padding-block: 0.75rem; /* py-3 */
  font-weight: 600;
  color: #0f172a; /* slate-900 */
  background: linear-gradient(180deg, rgba(2,6,23,0.04), rgba(2,6,23,0.08));
  border: 1px solid rgba(2,6,23,0.12);
  box-shadow: 0 8px 22px -12px rgba(2,6,23,0.25);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .08s ease;
}
.send-btn:hover{
  background: linear-gradient(180deg, rgba(2,6,23,0.06), rgba(2,6,23,0.12));
  border-color: rgba(2,6,23,0.18);
  transform: translateY(-1px);
}
.send-btn:active{
  transform: translateY(0);
}
.send-btn[disabled]{
  opacity: .6; cursor: not-allowed; filter: grayscale(.1);
}
.dark .send-btn{
  color: #e5e7eb; /* slate-200 */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.10));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 22px -12px rgba(0,0,0,0.45);
}
.dark .send-btn:hover{ background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.14)); border-color: rgba(255,255,255,0.18); }

/* Small pulse sheen on icon when enabled */
.send-btn i[data-lucide="send"]{ transition: transform .12s ease; }
.send-btn:hover i[data-lucide="send"]{ transform: translateX(1px); }