/* =========================================================================
   Ingestics — design system (white + light blue health vibes)
   ========================================================================= */

:root {
  --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-200:#bae6fd; --sky-300:#7dd3fc;
  --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1;
  --cyan-400:#22d3ee; --cyan-500:#06b6d4;
  --ink-700:#334155; --ink-900:#0f172a;
}

html, body { font-family: 'Inter', system-ui, sans-serif; }

/* ---------- backgrounds / blobs ---------- */
.blob {
  position:absolute; filter:blur(80px); opacity:.55; border-radius:9999px;
  animation: float 18s ease-in-out infinite;
}
.blob-1 { width:520px; height:520px; background:#bae6fd; top:-180px; left:-160px; }
.blob-2 { width:420px; height:420px; background:#a5f3fc; top:30%; right:-150px; animation-delay:-6s; }
.blob-3 { width:480px; height:480px; background:#dbeafe; bottom:-220px; left:30%; animation-delay:-12s; }

@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px,-30px) scale(1.05); }
  66%     { transform: translate(-30px,40px) scale(0.97); }
}

.grid-overlay {
  position:absolute; inset:0; opacity:.35;
  background-image:
    linear-gradient(to right, rgba(14,165,233,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,165,233,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
}

/* ---------- logo / generic buttons ---------- */
.logo-mark {
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, #38bdf8, #06b6d4);
  color:white; font-size:14px;
  box-shadow: 0 8px 22px -6px rgba(14,165,233,.55);
  transition: transform .25s ease;
}
a:hover .logo-mark, .logo-mark:hover { transform: rotate(-8deg) scale(1.06); }

.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  color:white; font-weight:600; padding:.7rem 1.2rem; border-radius:14px;
  box-shadow: 0 12px 28px -10px rgba(14,165,233,.6);
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(14,165,233,.7); filter:brightness(1.05); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center;
  background:white; color:#0f172a; font-weight:600;
  padding:.7rem 1.2rem; border-radius:14px;
  border:1px solid #bae6fd;
  transition: transform .15s ease, background .25s ease;
}
.btn-ghost:hover { background:#f0f9ff; transform: translateY(-2px); }

/* ---------- entry animations ---------- */
@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform: translateY(0);} }
.animate-fade-up   { animation: fadeUp .7s ease both; }
.animate-fade-up-1 { animation: fadeUp .7s ease both .1s; }
.animate-fade-up-2 { animation: fadeUp .7s ease both .2s; }
.animate-fade-up-3 { animation: fadeUp .7s ease both .3s; }
.animate-fade-up-4 { animation: fadeUp .9s ease both .45s; }

@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(14,165,233,.55);}
  70%     { box-shadow: 0 0 0 9px rgba(14,165,233,0);}
}
.pulse-dot {
  display:inline-block; width:8px; height:8px; border-radius:9999px; background:#0ea5e9;
  animation: pulseDot 1.6s infinite;
}

/* ---------- preview bubbles ---------- */
.bubble-user {
  background:#0ea5e9; color:white; padding:10px 14px; border-radius:18px 18px 4px 18px;
  display:inline-block; max-width:90%; font-size:14px;
}
.bubble-assistant {
  background:#f0f9ff; color:#0f172a; padding:12px 14px; border-radius:18px 18px 18px 4px;
  border:1px solid #e0f2fe; max-width:100%; font-size:14px;
}

.bar-anim { animation: barFill 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
.bar-emerald { background: linear-gradient(90deg, #10b981, #34d399); }
.bar-rose    { background: linear-gradient(90deg, #f43f5e, #fb7185); }
.bar-amber   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bar-sky     { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
@keyframes barFill { from { width:0 !important;} }

/* ---------- feature cards ---------- */
.feature-card {
  position:relative; background:white; padding:1.5rem; border-radius:1.25rem;
  border:1px solid #e0f2fe; box-shadow:0 1px 0 #f1f5f9;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -22px rgba(2,132,199,.25); border-color:#bae6fd; }
.feature-icon {
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background: linear-gradient(135deg, #e0f2fe, #cffafe); color:#0284c7; font-size:18px; margin-bottom:.85rem;
  transition: transform .3s ease;
}
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-6deg); }

.step-card {
  background:white; border:1px solid #e0f2fe; border-radius:1.25rem; padding:1.5rem;
  transition: transform .25s ease, border-color .25s ease;
}
.step-card:hover { transform: translateY(-3px); border-color:#7dd3fc; }
.step-num {
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:14px;
  color:#0ea5e9; letter-spacing:.1em;
}

/* ---------- providers ---------- */
.provider-card {
  border:1px solid rgba(14,165,233,.15); border-radius:1.25rem; padding:1.25rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.provider-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(2,132,199,.3); }
.provider-icon {
  width:40px; height:40px; border-radius:12px; background:white; display:grid; place-items:center;
  color:#0284c7; box-shadow: 0 4px 12px rgba(2,132,199,.12);
}
.lane-pip { width:14px; height:6px; border-radius:9999px; }
.lane-on  { background:#0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,.25); }
.lane-off { background:#cbd5e1; }

/* ---------- FAQ ---------- */
.faq-item {
  background:white; border:1px solid #e0f2fe; border-radius:1rem; padding:1rem 1.25rem;
  transition: border-color .25s ease;
}
.faq-item[open] { border-color:#7dd3fc; }
.faq-item summary::-webkit-details-marker { display:none; }

/* ---------- CTA ---------- */
.cta-banner {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #0891b2 100%);
  border-radius:1.5rem; padding:2.5rem; color:white;
  display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start;
  position:relative; overflow:hidden;
  box-shadow: 0 30px 60px -30px rgba(2,132,199,.5);
}
.cta-banner::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 80% -20%, rgba(255,255,255,.25), transparent 50%);
}
@media (min-width:768px) { .cta-banner { flex-direction:row; align-items:center; justify-content:space-between; padding:3rem; } }
.cta-btn {
  background:white; color:#0369a1; font-weight:700; padding:.95rem 1.6rem; border-radius:1rem;
  display:inline-flex; align-items:center; box-shadow: 0 14px 30px -8px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.cta-btn:hover { transform: translateY(-2px); }

/* =========================================================================
   AUTH page
   ========================================================================= */
.auth-input {
  width:100%; padding:.75rem 1rem; border-radius:.85rem; background:white;
  border:1px solid #e0f2fe; outline:none; transition: border-color .2s, box-shadow .2s;
  font-size:.95rem;
}
.auth-input:focus { border-color:#38bdf8; box-shadow: 0 0 0 4px rgba(14,165,233,.12); }
.spin-ring {
  display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.3);
  border-top-color:white; border-radius:9999px; animation: spin 0.8s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg);} }

/* =========================================================================
   CHAT app
   ========================================================================= */
.thin-scroll::-webkit-scrollbar { width:8px; height:8px; }
.thin-scroll::-webkit-scrollbar-thumb { background:#e0f2fe; border-radius:9999px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background:#bae6fd; }

.status-dot {
  display:inline-block; width:9px; height:9px; border-radius:9999px; margin-right:6px;
  vertical-align: middle;
}
.status-idle    { background:#94a3b8; }
.status-thinking{ background:#0ea5e9; animation: pulseDot 1.4s infinite; }
.status-error   { background:#f43f5e; }

#agent-status-text { vertical-align: middle; }

.suggestion-card {
  display:flex; align-items:center; gap:.85rem; padding:1rem;
  background:white; border:1px solid #e0f2fe; border-radius:1rem; text-align:left;
  transition: all .2s ease; cursor:pointer;
}
.suggestion-card:hover {
  border-color:#7dd3fc; transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(2,132,199,.3);
}
.suggestion-icon {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background: linear-gradient(135deg, #e0f2fe, #cffafe); color:#0284c7;
  display:grid; place-items:center;
}

/* composer */
.composer {
  display:flex; align-items:flex-end; gap:.5rem;
  background:white; border:1px solid #bae6fd; border-radius:1.5rem;
  padding:.5rem .5rem .5rem 1rem;
  box-shadow: 0 10px 30px -16px rgba(2,132,199,.18);
  transition: border-color .2s, box-shadow .2s;
}
.composer:focus-within { border-color:#38bdf8; box-shadow: 0 0 0 4px rgba(14,165,233,.12); }
.composer-input {
  flex:1; resize:none; outline:none; border:none; background:transparent;
  max-height:200px; padding:.6rem 0; font-size:.95rem; line-height:1.45;
}
.composer-btn {
  height:40px; width:40px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center; color:#0284c7;
  transition: background .2s;
}
.composer-btn:hover { background:#e0f2fe; }
.composer-send {
  height:40px; width:40px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center; color:white;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  transition: transform .15s, opacity .2s;
  box-shadow: 0 8px 20px -8px rgba(14,165,233,.6);
}
.composer-send:hover:not(:disabled) { transform: translateY(-1px) scale(1.04); }
.composer-send:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }

/* chat bubbles */
.msg-row { display:flex; gap:.75rem; align-items:flex-start; animation: fadeUp .35s ease both; }
.msg-row.user { justify-content:flex-end; }
.msg-avatar {
  width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; color:white; font-weight:bold;
}
.msg-avatar.assistant { background: linear-gradient(135deg,#0ea5e9,#06b6d4); box-shadow:0 6px 14px -6px rgba(14,165,233,.5); }
.msg-avatar.user      { background: linear-gradient(135deg,#64748b,#475569); }

.msg-bubble {
  max-width:min(680px, calc(100% - 60px));
  padding:.95rem 1.1rem; border-radius:1.1rem; font-size:.95rem; line-height:1.6;
}
.msg-bubble.user {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4); color:white;
  border-radius:1.1rem 1.1rem .35rem 1.1rem;
}
.msg-bubble.user img { border-radius:.75rem; margin-bottom:.5rem; max-height:280px; }
.msg-bubble.assistant {
  background:white; border:1px solid #e0f2fe; color:#0f172a;
  border-radius:1.1rem 1.1rem 1.1rem .35rem;
  box-shadow: 0 4px 14px -8px rgba(2,132,199,.18);
}

/* markdown styling inside bubble */
.msg-bubble.assistant h1,
.msg-bubble.assistant h2,
.msg-bubble.assistant h3 { font-family:'Space Grotesk',sans-serif; font-weight:700; margin: .8rem 0 .4rem; }
.msg-bubble.assistant h1 { font-size:1.25rem; }
.msg-bubble.assistant h2 { font-size:1.1rem; }
.msg-bubble.assistant h3 { font-size:1rem; }
.msg-bubble.assistant p  { margin: .35rem 0; }
.msg-bubble.assistant ul, .msg-bubble.assistant ol { margin:.4rem 0 .4rem 1.25rem; }
.msg-bubble.assistant li { margin:.15rem 0; }
.msg-bubble.assistant strong { color:#0369a1; }
.msg-bubble.assistant code  { background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:.85em; }

/* thinking dots animation */
.thinking-dots, .thinking-dots-static { display:inline-flex; gap:3px; align-items:center; }
.thinking-dots i, .thinking-dots-static i {
  width:6px; height:6px; border-radius:9999px; background:#38bdf8; display:block;
  animation: bounceDot 1.2s infinite ease-in-out both;
}
.thinking-dots i:nth-child(2), .thinking-dots-static i:nth-child(2) { animation-delay:.16s; }
.thinking-dots i:nth-child(3), .thinking-dots-static i:nth-child(3) { animation-delay:.32s; }
@keyframes bounceDot { 0%,80%,100% { transform: scale(.6); opacity:.5;} 40% { transform: scale(1); opacity:1;} }

/* progress steps shown while agent runs */
.run-step {
  display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:#64748b;
  padding:.45rem 0; opacity:0; animation: fadeUp .35s ease both;
}
.run-step .dot {
  width:8px; height:8px; border-radius:9999px; background:#cbd5e1;
}
.run-step.active .dot   { background:#0ea5e9; box-shadow: 0 0 0 4px rgba(14,165,233,.2); animation: pulseDot 1.2s infinite; }
.run-step.done   .dot   { background:#10b981; }
.run-step.done   { color:#0f172a; }

/* analysis cards */
.analysis-card {
  background:white; border:1px solid #e0f2fe; border-radius:1.25rem;
  overflow:hidden; box-shadow: 0 6px 22px -16px rgba(2,132,199,.25);
  animation: fadeUp .5s ease both;
}
.analysis-header {
  padding:1rem 1.25rem; display:flex; align-items:center; gap:.75rem;
  background: linear-gradient(135deg, #f0f9ff, #ecfeff); border-bottom:1px solid #e0f2fe;
}
.analysis-header .pill {
  padding:.2rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform: uppercase;
}
.pill-medicine  { background:#fef3c7; color:#b45309; }
.pill-food      { background:#dcfce7; color:#15803d; }
.pill-healthy   { background:#dcfce7; color:#15803d; }
.pill-moderate  { background:#fef3c7; color:#b45309; }
.pill-unhealthy { background:#fee2e2; color:#b91c1c; }

.analysis-body { padding:1.25rem; }
.analysis-section-title {
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:#0284c7; margin-bottom:.5rem;
}

.score-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .85rem; border-radius:9999px; font-size:.8rem; font-weight:600;
  background:#f0f9ff; color:#0369a1;
}

.charts-grid { display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1rem; }
@media (min-width:640px) { .charts-grid { grid-template-columns:1fr 1fr; } }
.chart-card {
  background:#fafdff; border:1px solid #e0f2fe; border-radius:1rem; padding:1rem;
}
.chart-card h4 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.85rem; margin-bottom:.5rem; color:#0f172a; }
.chart-canvas-wrap { position:relative; height:220px; }

.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.75rem; }
@media (max-width:540px) { .pros-cons { grid-template-columns:1fr; } }
.pros-cons .col { padding:.85rem; border-radius:.85rem; border:1px solid; }
.pros-cons .pros { background:#f0fdf4; border-color:#bbf7d0; }
.pros-cons .cons { background:#fef2f2; border-color:#fecaca; }
.pros-cons .col h5 { font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem; }
.pros-cons .pros h5 { color:#15803d; }
.pros-cons .cons h5 { color:#b91c1c; }
.pros-cons li { font-size:.85rem; padding:.15rem 0; padding-left:1rem; position:relative; }
.pros-cons .pros li::before { content:"✓"; position:absolute; left:0; color:#10b981; font-weight:700; }
.pros-cons .cons li::before { content:"✕"; position:absolute; left:0; color:#ef4444; font-weight:700; }

.warning-box {
  margin-top:.85rem; background:#fef9c3; border:1px solid #fde68a; padding:.75rem 1rem;
  border-radius:.85rem; font-size:.85rem; color:#854d0e;
}
.warning-box strong { color:#713f12; }

.score-row { display:flex; flex-wrap:wrap; gap:.5rem; }

/* conversation list item */
.conv-item {
  display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-radius:.65rem;
  font-size:.85rem; color:#334155; cursor:pointer;
  transition: background .15s ease;
}
.conv-item:hover { background:#f0f9ff; }
.conv-item.active { background:#e0f2fe; color:#0369a1; font-weight:600; }
.conv-item .title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* floating animation */
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-6px);} }
.floaty { animation: floaty 3.5s ease-in-out infinite; }

/* =========================================================================
   PREMIUM UI UPGRADES — glow, shadows, animations
   ========================================================================= */

/* Avatar with subtle pulsing glow */
.msg-avatar.assistant.glow {
  position: relative;
  box-shadow: 0 6px 14px -6px rgba(14,165,233,.5),
              0 0 0 0 rgba(14,165,233,.45);
  animation: avatarGlow 3.2s ease-in-out infinite;
}
@keyframes avatarGlow {
  0%,100% { box-shadow: 0 6px 14px -6px rgba(14,165,233,.5), 0 0 0 0 rgba(14,165,233,.0); }
  50%     { box-shadow: 0 8px 22px -6px rgba(14,165,233,.65), 0 0 0 6px rgba(14,165,233,.08); }
}

/* Streaming caret */
.msg-bubble.streaming { position: relative; }
.caret {
  display:inline-block; width:8px; height:16px; vertical-align:-3px; margin-left:2px;
  background: linear-gradient(180deg, #0ea5e9, #06b6d4);
  border-radius: 2px;
  animation: caretBlink 1s steps(1, end) infinite;
  box-shadow: 0 0 8px rgba(14,165,233,.45);
}
@keyframes caretBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* Markdown wrapper */
.markdown { font-size:.95rem; line-height:1.6; }
.markdown table { width:100%; border-collapse: collapse; margin:.6rem 0; font-size:.85rem; }
.markdown th, .markdown td { border:1px solid #e0f2fe; padding:.4rem .6rem; text-align:left; }
.markdown th { background:#f0f9ff; font-weight:600; }
.markdown blockquote {
  border-left:3px solid #38bdf8; padding:.25rem .75rem; margin:.5rem 0;
  background:#f0f9ff; color:#0369a1; border-radius:0 .5rem .5rem 0;
}
.markdown pre { background:#0f172a; color:#e0f2fe; padding:.75rem 1rem; border-radius:.75rem; overflow-x:auto; font-size:.82rem; }
.markdown a { color:#0284c7; text-decoration: underline; text-underline-offset: 2px; }

/* Tags */
.tag {
  display:inline-block; padding:.18rem .55rem; border-radius:.55rem;
  font-size:.72rem; font-weight:500; line-height:1.4;
}
.tag-sky { background:#f0f9ff; border:1px solid #e0f2fe; color:#0369a1; }
.tag-rose { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }

/* User bubble images grid */
.msg-images {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:.5rem;
}
.msg-images img {
  max-height:160px; max-width:160px; border-radius:.65rem; object-fit:cover;
}

/* Image tray (composer) */
.tray-thumb {
  position:relative; height:64px; width:64px; border-radius:.7rem; overflow:hidden;
  border:1px solid #bae6fd; box-shadow: 0 4px 10px -6px rgba(2,132,199,.25);
  animation: fadeUp .35s ease both;
}
.tray-thumb img { width:100%; height:100%; object-fit:cover; }
.thumb-x {
  position:absolute; top:-6px; right:-6px; height:22px; width:22px; border-radius:9999px;
  background:#f43f5e; color:white; font-size:.7rem; display:grid; place-items:center;
  box-shadow: 0 4px 10px -2px rgba(244,63,94,.5);
}
.thumb-x:hover { background:#e11d48; }
.tray-hint {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; background:#f0f9ff; border:1px dashed #7dd3fc; color:#0369a1;
  border-radius:9999px; font-size:.72rem; font-weight:600; align-self:center;
}

/* Composer tools cluster */
.composer-tools { display:flex; gap:.15rem; flex-shrink:0; }

/* Recall search results */
.recall-item {
  display:flex; align-items:flex-start; gap:.5rem;
  width:100%; padding:.5rem .6rem; text-align:left;
  border-radius:.55rem; transition: background .15s;
}
.recall-item:hover { background:#f0f9ff; }

/* Charts collapsible — fixes "blocks the view" issue (b3) */
.charts-section { margin-top:.5rem; }
.charts-section > summary {
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; padding:.4rem 0; list-style:none;
  user-select:none;
}
.charts-section > summary::-webkit-details-marker { display:none; }
.charts-section > summary .chev {
  color:#0284c7; transition: transform .25s ease;
}
.charts-section[open] > summary .chev { transform: rotate(180deg); }

/* Wider charts grid + horizontal scroll fallback on small screens */
.charts-grid {
  display:grid; gap:.85rem;
  grid-template-columns: 1fr;
  margin-top:.6rem;
}
@media (min-width:640px) {
  .charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.chart-card { min-width: 0; overflow: hidden; }
.chart-canvas-wrap { width:100%; max-width:100%; }

/* Compare grid */
.compare-grid {
  display:grid; gap:.75rem; margin-top:.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.compare-item {
  position:relative; padding:.85rem; border:1px solid #e0f2fe; border-radius:.85rem;
  background:#fafdff; transition: border-color .25s, transform .25s;
}
.compare-item:hover { transform: translateY(-2px); border-color:#7dd3fc; }
.compare-item.winner {
  border-color:#10b981; background: linear-gradient(180deg, #f0fdf4, #ffffff);
  box-shadow: 0 12px 28px -16px rgba(16,185,129,.45);
}
.winner-badge {
  position:absolute; top:-10px; left:.65rem;
  padding:.2rem .55rem; border-radius:9999px; font-size:.65rem; font-weight:700;
  background: linear-gradient(135deg,#10b981,#34d399); color:white;
  box-shadow: 0 6px 14px -4px rgba(16,185,129,.55);
}

/* Modal pop animation */
@keyframes pop {
  from { opacity:0; transform: translateY(8px) scale(.97); }
  to   { opacity:1; transform: translateY(0)    scale(1); }
}
.animate-pop { animation: pop .25s ease both; }

/* Barcode scan-line */
@keyframes scanLine {
  0%   { transform: translateY(-60%); opacity:.2; }
  50%  { transform: translateY(60%);  opacity:1; }
  100% { transform: translateY(-60%); opacity:.2; }
}
.animate-scan-line { animation: scanLine 2.2s ease-in-out infinite; }

/* Mobile sidebar drawer override */
@media (max-width: 767px) {
  #sidebar:not(.hidden) {
    display:flex !important;
    box-shadow: 24px 0 60px -30px rgba(2,132,199,.4);
  }
}

/* Subtle highlight ring on focused form elements */
input:focus, textarea:focus, select:focus { outline: none; }

/* Prevent body scroll when modal open */
body.no-scroll { overflow: hidden; }

/* Smooth chart card entrance */
.chart-card { animation: fadeUp .5s ease both; }
.chart-card:nth-child(2) { animation-delay: .08s; }
.chart-card:nth-child(3) { animation-delay: .16s; }

/* =========================================================================
   LOGO MARK — image-driven (transparent PNG), with hover glow + thinking spin
   ========================================================================= */
.logo-mark-img {
  position: relative;
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  overflow: visible;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.logo-mark-img > img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 4px 12px rgba(14,165,233,.35))
    drop-shadow(0 1px 3px rgba(2,132,199,.18));
  transition: filter .35s ease, transform .35s ease;
}
.logo-mark-img::before {
  /* soft halo behind the logo */
  content: ""; position: absolute; inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(56,189,248,.35), rgba(34,211,238,.15) 45%, transparent 70%);
  opacity: .6;
  filter: blur(6px);
  transition: opacity .4s ease, transform .4s ease;
  z-index: -1;
}
a:hover .logo-mark-img,
.logo-mark-img:hover {
  transform: rotate(-6deg) scale(1.06);
}
a:hover .logo-mark-img::before { opacity: .9; transform: scale(1.15); }

/* assistant avatar uses the logo mark */
.msg-avatar.assistant.logo-mark-img {
  width: 34px; height: 34px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
}
.msg-avatar.assistant.logo-mark-img > img {
  width: 100%; height: 100%; object-fit: contain;
}

/* THINKING animation — applied via .is-thinking class added by chat.js */
@keyframes logoSpin {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes logoHaloPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
@keyframes logoGlowPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(56,189,248,.55))
      drop-shadow(0 0 18px rgba(34,211,238,.45));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(56,189,248,.85))
      drop-shadow(0 0 28px rgba(34,211,238,.7))
      drop-shadow(0 0 44px rgba(14,165,233,.5));
  }
}
.logo-mark-img.is-thinking > img {
  animation: logoSpin 2.4s linear infinite, logoGlowPulse 1.6s ease-in-out infinite;
}
.logo-mark-img.is-thinking::before {
  animation: logoHaloPulse 1.6s ease-in-out infinite;
  background: radial-gradient(circle at 50% 50%,
    rgba(56,189,248,.65),
    rgba(34,211,238,.35) 45%,
    transparent 70%);
}

/* Subtle tilt when thinking-mode toggle is on (but agent idle) */
body.thinking-mode-on .logo-mark-img:not(.is-thinking) > img {
  filter:
    drop-shadow(0 4px 14px rgba(14,165,233,.45))
    drop-shadow(0 0 6px rgba(34,211,238,.35));
}

/* =========================================================================
   HERO LOGO — big welcome-screen logo with animated aura
   ========================================================================= */
.logo-hero {
  position: relative;
  display: inline-block;
  width: 96px; height: 96px;
  margin: 0 auto;
}
.logo-hero > img {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 26px rgba(14,165,233,.35))
    drop-shadow(0 2px 6px rgba(2,132,199,.18));
  animation: heroFloat 5s ease-in-out infinite;
  transition: filter .4s ease;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.logo-hero-glow {
  position: absolute; inset: -20%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(56,189,248,.55),
      rgba(34,211,238,.25) 40%,
      transparent 70%);
  filter: blur(14px);
  z-index: 1;
  animation: heroGlow 4s ease-in-out infinite;
}
@keyframes heroGlow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.12); }
}
/* hero logo while agent is thinking */
.logo-hero.is-thinking > img {
  animation: logoSpin 2.4s linear infinite, logoGlowPulse 1.6s ease-in-out infinite;
}
.logo-hero.is-thinking .logo-hero-glow {
  animation: heroGlow 1.4s ease-in-out infinite;
  opacity: 1;
}

/* =========================================================================
   COMPOSER — "+" plus button + drawer
   ========================================================================= */
.composer-plus {
  position: relative;
  height: 40px; width: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  color: #0284c7;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #bae6fd;
  box-shadow: 0 2px 8px -3px rgba(2,132,199,.18);
  transition: transform .2s ease, background .2s ease,
              box-shadow .25s ease, color .2s ease;
}
.composer-plus i { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.composer-plus:hover {
  background: linear-gradient(135deg, #e0f2fe, #cffafe);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(2,132,199,.5);
}
.composer-plus.is-open {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  color: white;
  box-shadow: 0 8px 22px -8px rgba(14,165,233,.6);
}
.composer-plus.is-open i { transform: rotate(45deg); }

/* Drawer container (anchored above the composer) */
.plus-drawer {
  position: relative;
  margin-bottom: .65rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(186,230,253,.7);
  border-radius: 1.25rem;
  padding: .55rem;
  box-shadow:
    0 22px 48px -22px rgba(2,132,199,.35),
    0 1px 0 rgba(255,255,255,.8) inset,
    0 0 0 1px rgba(255,255,255,.4) inset;
  display: flex; flex-direction: column; gap: .15rem;
  transform-origin: bottom left;
  transform: translateY(8px) scale(.97);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .22s ease,
    transform .26s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.plus-drawer::before {
  /* subtle moving glow on the drawer edge */
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(56,189,248,0) 0deg,
    rgba(56,189,248,.35) 90deg,
    rgba(34,211,238,0) 180deg,
    rgba(56,189,248,.35) 270deg,
    rgba(56,189,248,0) 360deg);
  filter: blur(10px); opacity: 0;
  animation: drawerGlow 4s linear infinite;
  z-index: -1;
}
.plus-drawer.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.plus-drawer.open::before { opacity: .6; }
@keyframes drawerGlow { to { transform: rotate(360deg); } }

.plus-item {
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  padding: .65rem .85rem;
  border-radius: .9rem;
  text-align: left; color: #0f172a;
  background: transparent;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
  cursor: pointer;
}
.plus-item:hover {
  background: linear-gradient(135deg, rgba(240,249,255,.9), rgba(207,250,254,.7));
  border-color: rgba(125,211,252,.5);
}
.plus-item:active { transform: scale(.99); }
.plus-item-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: .7rem;
  display: grid; place-items: center;
  color: #0284c7; font-size: .95rem;
  background: linear-gradient(135deg, #e0f2fe, #cffafe);
  box-shadow: 0 4px 12px -6px rgba(2,132,199,.35);
}

/* Thinking-mode toggle row inside drawer */
.plus-toggle { user-select: none; }
.thinking-switch {
  position: relative;
  flex-shrink: 0;
  width: 42px; height: 24px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  transition: background .25s ease, box-shadow .25s ease;
  display: inline-block;
}
.thinking-switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.thinking-switch.on {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18), 0 4px 14px -6px rgba(14,165,233,.55);
}
.thinking-switch.on .thinking-switch-knob {
  transform: translateX(18px);
  background: white;
}

/* =========================================================================
   ANIMATED SEND BUTTON — glow halo + lift
   ========================================================================= */
.composer-send {
  position: relative;
  overflow: visible;
}
.send-glow {
  position: absolute; inset: -4px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(14,165,233,.55), rgba(6,182,212,.55));
  filter: blur(10px); opacity: 0;
  z-index: -1;
  transition: opacity .35s ease, transform .35s ease;
}
.composer-send:not(:disabled):hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 28px -10px rgba(14,165,233,.7);
}
.composer-send:not(:disabled):hover .send-glow {
  opacity: .8;
  transform: scale(1.15);
}
.composer-send:not(:disabled) i {
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.composer-send:not(:disabled):hover i { transform: translateY(-2px); }

/* "is-sending" — pulsing halo + spinning gradient ring while message is in flight */
@keyframes sendingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,.55), 0 8px 22px -8px rgba(14,165,233,.6); }
  50%      { box-shadow: 0 0 0 8px rgba(14,165,233,0),  0 8px 26px -6px rgba(14,165,233,.8); }
}
@keyframes sendingHalo {
  0%   { transform: rotate(0deg)   scale(1.05); opacity: .9; }
  50%  { transform: rotate(180deg) scale(1.2);  opacity: 1; }
  100% { transform: rotate(360deg) scale(1.05); opacity: .9; }
}
.composer-send.is-sending {
  animation: sendingPulse 1.4s ease-in-out infinite;
}
.composer-send.is-sending .send-glow {
  opacity: 1;
  background: conic-gradient(from 0deg, #0ea5e9, #06b6d4, #38bdf8, #22d3ee, #0ea5e9);
  animation: sendingHalo 2s linear infinite;
}

/* =========================================================================
   Auth Turnstile widget container (centered)
   ========================================================================= */
.turnstile-wrap {
  display: flex; justify-content: center; margin-top: .25rem;
  min-height: 65px;
}

/* =========================================================================
   Mobile tweaks for plus drawer
   ========================================================================= */
@media (max-width: 480px) {
  .plus-drawer { padding: .4rem; }
  .plus-item { padding: .55rem .65rem; gap: .65rem; }
  .plus-item-icon { width: 32px; height: 32px; }
}