/* app.css — AlphaStep unified stylesheet (v37.0, dynamic polish; no functional changes)
   Scope under .as-app (and #canvas for legacy)
*/

/* ========== Tokens ========== */
:root{
  --brand:#0ea5e9; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#fff;
  --chip:#f1f5f9; --chipText:#334155; --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444;
  --font-ui:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;
  --radius:14px; --radius-sm:10px; --radius-xs:8px;
  --shadow:0 6px 24px rgba(2,6,23,.08),0 2px 6px rgba(2,6,23,.05);

  /* unified selected pill/chip color */
  --blue:#021c40;

  /* dynamic extras */
  --glass: rgba(255,255,255,.68);
  --shadow-sm: 0 2px 10px rgba(15,23,42,.06);
  --shadow-md: 0 10px 30px rgba(2,12,27,.10);
  --shadow-lg: 0 18px 50px rgba(2,12,27,.18);
  --grad: conic-gradient(from 180deg at 50% 50%, #7c3aed 0deg, #06b6d4 120deg, #0ea5e9 240deg, #7c3aed 360deg);
  --brand-grad: linear-gradient(135deg, #0ea5e9, #06b6d4 40%, #7c3aed 100%);
}

/* ========== Base ========== */
.as-app,#canvas{
  --surface:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  background:#f8fafc;
}
.as-app *{box-sizing:border-box}
.as-app a{color:var(--brand);text-decoration:none}
.as-app a:hover{text-decoration:underline}
.as-app small{color:var(--muted)}

/* subtle neural field behind main content */
.as-app main{ position:relative; isolation:isolate; }
.as-app main::before{
  content:""; position:absolute; inset:-24px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1000px 520px at var(--mx,60%) -10%, rgba(14,165,233,.14), transparent 60%),
    radial-gradient(1000px 520px at 120% 20%, rgba(124,58,237,.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(2,8,23,.04) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(2,8,23,.04) 0 1px, transparent 1px 120px);
  mask: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.25));
}
.as-app main::after{
  content:""; position:absolute; inset:-48px; z-index:-3; pointer-events:none;
  background: var(--grad); opacity:.08; filter: blur(40px);
  animation: asSpin 30s linear infinite;
}
@keyframes asSpin { to { transform: rotate(360deg); } }

/* ========== Layout ========== */
.as-app .wrap{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.as-app aside#nav{
  background:linear-gradient(180deg,#0f172a 0%,#0b1221 100%);
  color:#e2e8f0;padding:22px 16px;display:flex;flex-direction:column;gap:8px;
  position:relative; isolation:isolate;
}
.as-app aside#nav::before{
  /* spotlight follows pointer (JS sets --mx) */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(400px 200px at var(--mx,50%) 0%, rgba(14,165,233,.18), transparent 60%);
}
.as-app aside#nav img{width:148px;height:auto;margin:4px 8px 18px;cursor:pointer; position:relative; z-index:1; }
/* (we intentionally do not alter any blue ring around the logo) */

.as-app .nav-btn{
  display:grid;grid-template-columns:24px auto;align-items:center;gap:10px;color:#cbd5e1;
  background:transparent;border:0;border-radius:var(--radius-xs);padding:10px 12px;cursor:pointer;text-align:left;font-weight:600; position:relative; z-index:1;
  transition: background .18s ease, transform .12s ease;
  overflow:hidden;
}
.as-app .nav-btn svg{width:20px;height:20px;color:#9ca3af}
.as-app .nav-btn:hover{background:rgba(255,255,255,.06)}
.as-app .nav-btn:active{transform:translateY(0)}
.as-app .nav-btn.active{background:rgba(255,255,255,.12);color:#fff}
.as-app .nav-btn.active svg{color:#fff}

/* sheen */
.as-app .nav-btn::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  opacity:0; transition:opacity .25s ease;
}
.as-app .nav-btn:hover::after{ opacity:1; }

.as-app main{padding:22px 24px 48px}
.as-app .screen{display:none}
.as-app .screen.active{display:block}

/* ========== Cards & Sections ========== */
.as-app .card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.as-app .card + .card{margin-top:16px}
.as-app .card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(14,165,233,.35), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.as-app .card:hover{ box-shadow: var(--shadow-lg); }
.as-app .card-header{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.as-app .card-body{padding:16px}
.as-app h1,.as-app h2,.as-app h3{margin:0 0 8px;line-height:1.2}
.as-app h1{font-size:22px}
.as-app h2{font-size:18px;color:var(--ink)}
.as-app h3{font-size:16px;color:var(--ink)}

/* ========== Tools row ========== */
.as-app .tools-row,.as-app .tbl-tools,.as-app .filters-wrap{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.as-app .tbl-tools{padding:10px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fbfdff}
.as-app .tools-left{display:flex;gap:12px;align-items:center}
.as-app .tools-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.as-app .tools-row .spacer{flex:1 1 auto}

/* ========== Inputs ========== */
.as-app .inp,.as-app select,.as-app .choices__inner,.as-app textarea{
  appearance:none;border:1px solid var(--line);border-radius:var(--radius-xs);background:#fff;
  padding:10px 12px;font:500 14px/1.2 var(--font-ui);color:var(--ink);min-width:0;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.as-app .inp:focus,.as-app select:focus,.as-app textarea:focus,.as-app .choices.is-focused .choices__inner{
  outline:2px solid color-mix(in srgb,var(--brand) 38%,transparent);
  border-color:color-mix(in srgb,var(--brand) 55%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* ========== Choices.js (unified chip look) ========== */
.as-app .choices__inner{padding:4px 6px;border-radius:var(--radius-xs)}
.as-app .choices__list--multiple{display:flex;flex-wrap:wrap;gap:8px}
.as-app .choices__list--multiple .choices__item{
  background:var(--blue) !important;
  color:#fff !important;
  border:0 !important; border-radius:9999px !important;
  font-weight:700 !important; font-size:12px !important; line-height:1 !important;
  padding:6px 10px !important; margin:0 !important;
}
.as-app .choices__list--multiple .choices__item .choices__button{
  margin-left:8px !important; border:0 !important; width:16px !important; height:16px !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:12px 12px !important; background-color:transparent !important;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' \
       stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'>\
       <path d='M2 2 L10 10 M10 2 L2 10'/></svg>") !important;
  text-indent:-9999px !important; color:transparent !important; box-shadow:none !important;
}
.as-app .choices__list--dropdown{border-radius:var(--radius-xs)}
.as-app .choices.has-items .choices__placeholder{display:none !important}
.as-app .choices.has-items .choices__input--cloned::placeholder,
.as-app .choices.has-items .choices__input::placeholder{color:transparent !important}
.as-app .choices:not(.has-items) .choices__placeholder{display:inline; color:#8999b2}

/* ========== Buttons (ripple + sheen) ========== */
.as-app .btn,.as-app .btn-ghost,.as-app .btn-outline,.as-app .chip{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;user-select:none;
  position:relative; overflow:hidden; transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.as-app .btn{background:var(--brand);color:#fff;border:1px solid color-mix(in srgb,var(--brand) 85%,#000);padding:10px 14px;border-radius:var(--radius);box-shadow:0 2px 0 rgba(2,6,23,.05) inset}
.as-app .btn:hover{filter:brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2,8,23,.12); }
.as-app .btn-outline{background:#fff;color:var(--brand);border:1px solid var(--brand);padding:8px 12px;border-radius:var(--radius)}
.as-app .btn-ghost{background:transparent;border:1px dashed var(--line);color:var(--ink);padding:8px 10px;border-radius:var(--radius-xs)}
.as-app .btn-ghost.good{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.as-app .btn-ghost.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.as-app .btn-ghost.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}

/* sheen for brand buttons */
.as-app .btn::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0 35%, rgba(255,255,255,.35) 50%, transparent 65%); opacity:0;
  transition:opacity .25s ease;
}
.as-app .btn:hover::after{ opacity:1; }

/* Ripple element (injected by JS) */
.as-app .btn .ripple,
.as-app .btn-outline .ripple,
.as-app .btn-ghost .ripple,
.as-app .nav-btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0); animation:asRipple 600ms ease-out forwards; pointer-events:none;
  background: currentColor; opacity:.18; mix-blend-mode:multiply;
}
@keyframes asRipple { to { transform:scale(8); opacity:0; } }

/* ========== Chips / Pills (generic) ========== */
.as-app .chip{background:var(--chip);color:var(--chipText);border:0;padding:6px 10px;border-radius:9999px;font-size:12px}
.as-app .pill{padding:4px 8px;border-radius:9999px;font-size:12px;font-weight:700}
.as-app .pill.ok{background:color-mix(in srgb,var(--ok) 15%,#fff);color:color-mix(in srgb,var(--ok) 80%,#000)}
.as-app .pill.warn{background:color-mix(in srgb,var(--warn) 15%,#fff);color:color-mix(in srgb,var(--warn) 80%,#000)}
.as-app .pill.bad{background:color-mix(in srgb,var(--bad) 15%,#fff);color:color-mix(in srgb,var(--bad) 80%,#000)}

/* ========== Tables ========== */
.as-app table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.as-app thead th{position:sticky;top:0;z-index:1;text-align:left;font-weight:700;color:var(--muted);background:#fff;border-bottom:1px solid var(--line);padding:10px 12px; transition: box-shadow .2s ease; }
.as-app tbody td{border-bottom:1px solid var(--line);padding:10px 12px}
.as-app tbody tr:hover td{background:#f9fbff}
.as-app .table-wrap{overflow:auto;max-height:60vh;border:1px solid var(--line);border-radius:var(--radius);background:#fff; box-shadow: var(--shadow-sm); }
.as-app .table-wrap.scrolled thead th{ box-shadow: 0 6px 18px rgba(2,8,23,.08); }
.as-app td.actions>*{display:inline-flex;gap:8px}
.as-app .empty{display:grid;place-items:center;padding:48px;text-align:center;color:var(--muted)}

/* ========== Pagination ========== */
.as-app .pager{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.as-app .pager .btn{padding:6px 10px}
.as-app .pager .count{margin-left:auto;color:var(--muted)}

/* ========== Charts ========== */
.as-app .chart-card canvas{width:100%!important;height:280px!important;display:block}
.as-app .chart-card{padding:8px 12px 12px; position:relative; overflow:hidden;}
.as-app .chart-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(14,165,233,.30), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.as-app .chart-spacer{height:8px}

/* ========== Toasts ========== */
.as-app .toast{
  position:fixed;bottom:22px;right:22px;z-index:2000;background:#0f172a;color:#fff;padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(8px);transition:.2s ease;box-shadow:var(--shadow);
  will-change: transform, opacity;
}
.as-app .toast.show{opacity:1;transform:translateY(0)}

/* ========== Modal (shared) ========== */
.as-app .modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:2100}
.as-app .modal-card{
  min-width:320px;max-width:720px;width:clamp(320px,72vw,720px);background:#fff;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);padding:16px;
  position:relative; overflow:hidden;
}
.as-app .modal-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(14,165,233,.35), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.as-app .modal-card h3{margin-bottom:10px}
.as-app .modal-card .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

/* ========== AI FAB ========== */
.as-app #ai-fab{
  position:fixed;right:22px;bottom:22px;z-index:1500;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;border:0;box-shadow:var(--shadow);cursor:pointer;
  transition: transform .12s ease;
}
.as-app #ai-fab:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.as-app #ai-fab.hidden{display:none}
/* gentle pulse ring */
.as-app #ai-fab::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit; border:2px solid color-mix(in srgb, var(--brand) 70%, transparent);
  animation: fabPulse 2.4s ease-out infinite; opacity:.6;
}
@keyframes fabPulse {
  0% { transform: scale(.92); opacity:.6; }
  70%{ transform: scale(1.1); opacity:.15; }
  100%{ transform: scale(.92); opacity:.0; }
}

/* ========== Meeting Note specifics (kept, with minor polish) ========== */
.as-app .tier-grid{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff; box-shadow: var(--shadow-sm); }
.as-app .tier-grid table{width:100%;border-collapse:collapse}
.as-app .tier-grid th,.as-app .tier-grid td{border-bottom:1px solid var(--line);padding:10px}
.as-app .tier-grid td[data-tier]{cursor:pointer;background:#fff}
.as-app .tier-grid td[data-tier].active{outline:2px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.as-app .tier-popover{position:fixed;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;max-width:260px;box-shadow:0 10px 24px rgba(2,6,23,.15);z-index:1500}

/* Pills row above the grid — unified look */
.as-app #contact-pills{
  position:relative; z-index:2; display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.as-app #contact-pills .pill{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:6px 10px; border-radius:9999px;
  font-size:12px; font-weight:700; line-height:1;
  background:var(--chip); color:var(--chipText); border:0;
  cursor:pointer; user-select:none;
  transition: transform .12s ease, box-shadow .2s ease;
}
.as-app #contact-pills .pill:hover{filter:brightness(1.03); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2,8,23,.10); }
.as-app #contact-pills .pill.active{background:var(--blue) !important;color:#fff !important;outline:0}

/* ========== Responsive ========== */
@media (max-width:1020px){
  .as-app .wrap{grid-template-columns:80px 1fr}
  .as-app aside#nav .nav-btn{grid-template-columns:1fr;gap:6px;font-size:12px;justify-items:center;text-align:center;padding:8px}
  .as-app aside#nav .nav-btn svg{margin:0 auto}
  .as-app aside#nav img{width:42px;height:42px;border-radius:8px;background:#0b1221;object-fit:contain}
  .as-app .tbl-tools{flex-wrap:wrap}
  .as-app .tools-right{width:100%;margin-left:0;justify-content:flex-end}
}

/* ========== Utilities ========== */
#pill-hint.hidden{display:none}
.as-app .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Hard ensure selected pills are #021c40 even if other CSS loads later */
.as-app #contact-pills .pill.active,
#canvas #contact-pills .pill.active,
#contact-pills .pill.active {
  background:#021c40 !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Reveal on scroll */
.as-app .reveal{ opacity:0; transform: translateY(12px) scale(.98); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.as-app .reveal.in{ opacity:1; transform:none }

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

/* --- FIX: allow dropdowns to overflow cards & modals --- */
.as-app .card,
.as-app .modal-card{
  overflow: visible; /* was hidden */
}

/* Make Choices dropdowns float above everything relevant */
.as-app .choices{ position:relative; } /* ensure a z-index context */
.as-app .choices.is-open .choices__list--dropdown,
.as-app .choices.is-open .choices__list[aria-expanded]{
  z-index: 2400;                /* higher than modals & toasts */
  box-shadow: 0 12px 30px rgba(2,12,27,.18);
}

/* --- FIX: restore AI modal styling (ID-based) --- */
.as-app #ai-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.45); z-index:2100; /* sits above app chrome */
}
.as-app #ai-overlay.hidden{ display:none; }

.as-app #ai-panel{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  width:min(860px,92vw); max-width:860px; padding:16px 18px 12px;
  box-shadow:0 18px 60px rgba(0,0,0,.28); position:relative; overflow:hidden;
}
.as-app #ai-panel::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(14,165,233,.35), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* AI header + close button */
.as-app #ai-panel h3{ margin:0 0 8px; font-size:18px; font-weight:800; color:var(--ink); }
.as-app #ai-close{
  position:absolute; top:10px; right:12px; width:32px; height:32px;
  border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-size:18px;
}

/* AI buttons row & input */
.as-app .ai-btn{ margin:0 6px 8px 0; }
.as-app #ai-free{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font:14px/1.4 var(--font-ui);
}

/* Chat bubbles inside the AI panel */
.as-app #ai-answers{ max-height:52vh; overflow:auto; padding-top:8px; border-top:1px solid var(--line); }
.as-app #ai-answers .chat{
  max-width:100%; margin:8px 0; padding:10px 12px; border-radius:12px; font:14px/1.45 var(--font-ui);
  background:#eef4ff; color:#102438; box-shadow:0 2px 10px rgba(15,23,42,.06);
}
.as-app #ai-answers .chat.me{
  background:#e7f6e7; border-bottom-left-radius:2px;
}

/* ===== FIX PACK: dropdown stacking, modal styling, nav stability ===== */

/* 1) Let dropdowns escape containers; raise their z-index above cards/modals */
.card, .modal-card, .tier-grid, .table-wrap, .scroll-wrap { overflow: visible; }

.choices { position: relative; }
.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded]{
  z-index: 6000; /* sits above everything in the app */
  box-shadow: 0 12px 30px rgba(2,12,27,.18);
}

/* 2) AI modal styling — unscoped fallback (works whether inside or outside .as-app) */
#ai-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.45); z-index:6100;
}
#ai-overlay.hidden{ display:none; }

#ai-panel{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  width:min(860px,92vw); max-width:860px; padding:16px 18px 12px;
  box-shadow:0 18px 60px rgba(0,0,0,.28); position:relative; overflow:hidden;
}
#ai-panel::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(14,165,233,.35), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
#ai-close{
  position:absolute; top:10px; right:12px; width:32px; height:32px;
  border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-size:18px;
}
#ai-answers{ max-height:52vh; overflow:auto; padding-top:8px; border-top:1px solid var(--line); }
#ai-answers .chat{
  max-width:100%; margin:8px 0; padding:10px 12px; border-radius:12px; font:14px/1.45 var(--font-ui,Inter,sans-serif);
  background:#eef4ff; color:#102438; box-shadow:0 2px 10px rgba(15,23,42,.06);
}
#ai-answers .chat.me{ background:#e7f6e7; border-bottom-left-radius:2px; }

/* 3) Nav ripple fallback (unscoped) — keeps items from growing if animation is disabled */
.nav-btn{ position:relative; overflow:hidden; }
.nav-btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  animation:asRipple 600ms ease-out forwards; pointer-events:none; background:currentColor; opacity:.18; mix-blend-mode:multiply;
}
@keyframes asRipple { to { transform:scale(8); opacity:0; } }


/* === AI modal button styles (unscoped so it works anywhere) === */
#ai-panel .ai-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:9999px;
  padding:6px 10px; font-weight:700; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .1s ease;
}
#ai-panel .ai-btn:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-1px); }

#ai-panel .btn-small{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand); color:#fff;
  border:1px solid var(--brand); border-radius:10px;
  padding:6px 10px; font-weight:700; cursor:pointer;
  transition:filter .12s ease, transform .1s ease;
}
#ai-panel .btn-small:hover{ filter:brightness(1.05); transform:translateY(-1px); }
#ai-panel .btn-small:disabled{ opacity:.6; cursor:default; transform:none; filter:none; }

/* === Disable tilt globally (and keep normal shadow) === */
.card, .chart-card{
  transform: none !important;
  box-shadow: var(--shadow) !important;
}
.card:hover, .chart-card:hover{
  transform: none !important;
  box-shadow: var(--shadow) !important;
}

/* === AI modal spacing tweaks === */

/* Top toolbar chips */
#ai-panel .ai-btn{
  margin: 0 10px 10px 0;         /* space between pills */
}

/* Follow-ups list: make each label a row */
#ai-panel .ai-fu{
  display: flex;                  /* keeps checkbox + text aligned */
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 6px 0;
  border-radius: 10px;
}
#ai-panel .ai-fu:hover{ background:#f6faff; }

/* Put "Add selected" on the next line with spacing */
#ai-panel .btn-small{
  display: inline-flex;           /* keep it button-like */
  margin-top: 10px;               /* new row spacing after the labels */
}


/* === AI modal: fix follow-up checkbox + text alignment === */
#ai-panel .ai-fu{
  display:grid;                   /* force a 2-col row */
  grid-template-columns: 22px 1fr;/* checkbox | text */
  align-items:center;
  column-gap:10px;
  justify-content:start;          /* override any inherited spacing */
  margin:6px 0;
  padding:6px 8px;
  border-radius:10px;
}
#ai-panel .ai-fu input{
  margin:0;                       /* keep the box tight */
  width:16px; height:16px;
}
#ai-panel .ai-fu:hover{ background:#f6faff; }

/* keep the action button on its own line with breathing room */
#ai-panel .btn-small{
  display:inline-flex;
  margin-top:12px;
}