/* ══════════════════════════════════════════════════════════════════
   NUVEX DASHBOARD — authoritative design layer.

   Loads last, so it has the final say over the three inline style
   blocks in dashboard.html. Every rule is prefixed with `body` so it
   outranks the single-class rules that came before it, and every
   colour comes from a token below — nothing is hardcoded per
   component, so light/dark switch in one place.

   COLOUR LAW
     • Black and white carry the interface. Type, buttons, borders.
     • Lavender is a deep, quiet violet and appears ONLY where it
       carries meaning: focus rings, the current choice in a menu,
       the credits mark, the plan meter. Never as a nav fill, never
       as a shadow, never as a background wash on a whole card.
     • Semantic colour beats brand colour: red for money-off and
       destructive, green for confirmations.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --d-bg:#FAFAFA;
  --d-sf:#FFFFFF;
  --d-sf2:#F4F4F5;
  --d-sf3:#EAEAEC;

  /* ink */
  --d-tx:#0B0B0F;
  --d-tx2:#5B5B63;
  --d-tx3:#8E8E96;

  /* lines */
  --d-bd:rgba(11,11,15,.08);
  --d-bd2:rgba(11,11,15,.15);

  /* accent — deep, desaturated violet. Used sparingly. */
  --d-acc:#5B44E4;
  --d-acc-soft:rgba(91,68,228,.07);
  --d-acc-line:rgba(91,68,228,.30);

  /* semantic */
  --d-red:#DC2626;
  --d-red-soft:rgba(220,38,38,.08);
  --d-green:#12855F;

  /* geometry */
  --d-r:10px;
  --d-r-md:14px;
  --d-r-lg:24px;
  --d-pill:999px;

  /* elevation — neutral only, never tinted */
  --d-sh-1:0 0 0 1px var(--d-bd);
  --d-sh-2:0 0 0 1px var(--d-bd), 0 10px 24px -16px rgba(11,11,15,.20);
  --d-sh-3:0 0 0 1px var(--d-bd), 0 24px 56px -30px rgba(11,11,15,.28);

  --d-ez:cubic-bezier(.25,1,.35,1);
  --sidebar-w:250px;
  --topbar-h:60px;
}

[data-theme="dark"]{
  --d-bg:#0B0B0D;
  --d-sf:#141417;
  --d-sf2:#1D1D21;
  --d-sf3:#26262B;
  --d-tx:#F7F7F8;
  --d-tx2:#A3A3AC;
  --d-tx3:#75757E;
  --d-bd:rgba(255,255,255,.09);
  --d-bd2:rgba(255,255,255,.17);
  --d-acc:#A08CFF;
  --d-acc-soft:rgba(160,140,255,.12);
  --d-acc-line:rgba(160,140,255,.36);
  --d-red:#F87171;
  --d-red-soft:rgba(248,113,113,.12);
  --d-green:#34D399;
  --d-sh-1:0 0 0 1px var(--d-bd);
  --d-sh-2:0 0 0 1px var(--d-bd), 0 10px 24px -16px rgba(0,0,0,.6);
  --d-sh-3:0 0 0 1px var(--d-bd), 0 24px 56px -30px rgba(0,0,0,.75);
}

body{
  background:var(--d-bg);
  color:var(--d-tx);
  font-weight:450;
  letter-spacing:-.011em;
}
body ::selection{ background:var(--d-tx); color:var(--d-sf); }
body :focus-visible{ outline:2px solid var(--d-acc); outline-offset:2px; }
body ::-webkit-scrollbar{ width:9px; height:9px; }
body ::-webkit-scrollbar-thumb{
  background:var(--d-bd2); border-radius:9px;
  border:2px solid transparent; background-clip:padding-box;
}
body ::-webkit-scrollbar-thumb:hover{ background:var(--d-tx3); background-clip:padding-box; }

body .main{ background:transparent; min-width:0; }

/* `hidden` must keep winning — several blocks below set display on the
   same elements the app toggles with the attribute. */
body [hidden]{ display:none !important; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
   Quiet white panel, hairline edge, one hairline-separated block per
   role. Selection is a neutral fill — a coloured nav row would put
   the loudest colour on the page on something the user isn't looking
   at. Collapses to zero width; the topbar toggle brings it back.
   ══════════════════════════════════════════════════════════════════ */
body .app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
  transition:grid-template-columns .3s var(--d-ez);
}
body.sb-collapsed .app{ grid-template-columns:0 1fr; }
body.sb-collapsed .sidebar{ opacity:0; pointer-events:none; }

body .sidebar{
  position:sticky; top:0; z-index:90;
  height:100vh; overflow:hidden auto;
  display:flex; flex-direction:column;
  padding:14px 12px 12px;
  background:var(--d-sf);
  border:0;
  box-shadow:inset -1px 0 0 var(--d-bd);
  transition:opacity .22s var(--d-ez);
}

/* brand row — logo left, collapse control right */
body .sb-brand{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:4px 6px 14px;
}
body .sb-brand .logo{
  display:inline-flex; align-items:center;
  font-size:17px; font-weight:700; letter-spacing:-.035em;
  color:var(--d-tx);
}
body .sb-brand .logo span,
body .sb-brand .logo .brand-dot{ color:var(--d-acc); }

body .sb-fold{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border-radius:8px; color:var(--d-tx3);
  transition:background .16s var(--d-ez), color .16s var(--d-ez);
}
body .sb-fold svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; }
body .sb-fold:hover{ background:var(--d-sf2); color:var(--d-tx); }

/* primary action */
body .sb-new{
  display:flex; align-items:center; gap:8px;
  width:100%; margin:0 0 16px;
  padding:9px 12px; border:0; border-radius:var(--d-pill);
  background:var(--d-tx); color:var(--d-sf);
  font-size:13.5px; font-weight:600; letter-spacing:-.015em;
  box-shadow:none;
  transition:opacity .16s var(--d-ez), transform .16s var(--d-ez);
}
body .sb-new svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; }
body .sb-new:hover{ opacity:.87; transform:none; box-shadow:none; }
body .sb-new:active{ transform:scale(.985); }
body .sb-new .kbd{
  margin-left:auto; padding:1px 6px; border-radius:5px;
  background:rgba(255,255,255,.15);
  font-size:10.5px; font-weight:600; letter-spacing:.02em; opacity:.75;
}
[data-theme="dark"] body .sb-new .kbd{ background:rgba(0,0,0,.24); }

body .sb-group{
  display:flex; flex-direction:column; gap:1px;
  margin:0 0 4px; padding:0;
}
body .sb-group + .sb-group{
  margin-top:14px; padding-top:14px;
  box-shadow:inset 0 1px 0 var(--d-bd);
}
body .sb-label{
  padding:2px 8px 7px;
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--d-tx3);
}

body .sb-link{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:9px;
  font-size:13.5px; font-weight:500; letter-spacing:-.012em;
  color:var(--d-tx2);
  transition:background .15s var(--d-ez), color .15s var(--d-ez);
}
body .sb-link svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7; opacity:1;
}
body .sb-link:hover{ background:var(--d-sf2); color:var(--d-tx); }
body .sb-link.active{
  background:var(--d-sf2); color:var(--d-tx); font-weight:600;
}
body .sb-link.active svg{ color:var(--d-tx); }
body .sb-link.active::before,
body .sb-link::before{ content:none; }

body .sb-link .tail{
  margin-left:auto; padding:1px 7px; border-radius:var(--d-pill);
  background:transparent; border:0;
  font-size:11.5px; font-weight:600; color:var(--d-tx3);
  font-variant-numeric:tabular-nums;
}
body .sb-link.active .tail{ background:transparent; border:0; color:var(--d-tx2); }
body .sb-link .tail.soon{
  background:transparent; border:0; color:var(--d-tx3);
  font-size:10px; font-weight:600; letter-spacing:.08em;
}

/* recent list */
body .sb-recent-list{ display:flex; flex-direction:column; gap:1px; }
body .sb-recent-item{
  display:flex; align-items:center; gap:9px;
  padding:7px 10px; border-radius:9px;
  font-size:13px; font-weight:500; color:var(--d-tx2);
  letter-spacing:-.012em;
  transition:background .15s var(--d-ez), color .15s var(--d-ez);
}
body .sb-recent-item:hover{ background:var(--d-sf2); color:var(--d-tx); }
body .sb-recent-item .dot{
  width:5px; height:5px; flex:none; border-radius:50%;
  background:var(--d-tx3);
}
body .sb-recent-item[data-platform="ios"] .dot,
body .sb-recent-item[data-platform="android"] .dot,
body .sb-recent-item[data-platform="both"] .dot{ background:var(--d-tx3); }
body .sb-recent-item .name{
  min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body .sb-recent-item .when{
  margin-left:auto; flex:none;
  font-size:11px; font-weight:500; color:var(--d-tx3);
}

/* plan meter — monochrome; the upgrade button is the only emphasis */
body .sb-plan{
  margin-top:auto; padding:13px;
  border-radius:var(--d-r-md);
  background:transparent;
  border:0;
  box-shadow:inset 0 0 0 1px var(--d-bd);
}
body .sb-plan::before{ content:none; }
body .sb-plan-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:9px;
}
body .sb-plan-name{
  font-size:12.5px; font-weight:600; color:var(--d-tx); letter-spacing:-.012em;
}
body .sb-plan-name::before{ content:none; }
body .sb-plan-num{
  font-size:11.5px; font-weight:600; color:var(--d-tx3);
  font-variant-numeric:tabular-nums;
}
body .sb-plan-bar{
  height:4px; border:0; border-radius:var(--d-pill);
  background:var(--d-sf3); overflow:hidden; margin:0;
}
body .sb-plan-fill{
  height:100%; border-radius:var(--d-pill);
  background:var(--d-acc);
  transition:width .6s var(--d-ez);
}
body .sb-plan-upgrade{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; margin-top:11px;
  padding:8px 12px; border:0; border-radius:var(--d-pill);
  background:var(--d-tx); color:var(--d-sf);
  font-size:12px; font-weight:600; letter-spacing:-.01em;
  box-shadow:none;
  transition:opacity .16s var(--d-ez);
}
body .sb-plan-upgrade svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.1; }
body .sb-plan-upgrade:hover{ opacity:.87; box-shadow:none; background:var(--d-tx); }

body .sb-close{
  background:transparent; border:0; color:var(--d-tx3); border-radius:8px;
}
body .sb-close:hover{ background:var(--d-sf2); color:var(--d-tx); }

/* ══════════════════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════════════════ */
body .topbar{
  position:sticky; top:0; z-index:60;
  height:var(--topbar-h);
  display:flex; align-items:center; gap:12px;
  padding:0 clamp(16px,2.4vw,28px);
  border:0;
  background:color-mix(in srgb, var(--d-bg) 82%, transparent);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 -1px 0 var(--d-bd);
}

body .sb-toggle,
body .menu-btn,
body .icon-btn{
  width:32px; height:32px; flex:none;
  display:none; align-items:center; justify-content:center;
  border:0; border-radius:9px;
  background:transparent; color:var(--d-tx3);
  transition:background .16s var(--d-ez), color .16s var(--d-ez);
}
body .sb-toggle svg,
body .menu-btn svg,
body .icon-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
body .sb-toggle:hover,
body .menu-btn:hover,
body .icon-btn:hover{ background:var(--d-sf2); color:var(--d-tx); }
@media (min-width:1001px){ body .sb-toggle{ display:flex; } }
@media (max-width:1000px){ body .menu-btn{ display:flex; } }

/* single-mode surface: the theme switch stays out of the chrome */
body .tb-r .icon-btn{ display:none; }

body .breadcrumb{
  font-size:13.5px; font-weight:500; color:var(--d-tx3); letter-spacing:-.015em;
}
body .breadcrumb .curr{ color:var(--d-tx); font-weight:600; }
body .tb-nav{ display:none; }

body .tb-search{
  margin-left:auto;
  display:flex; align-items:center; gap:9px;
  min-width:min(320px,34vw); height:34px; padding:0 12px;
  border:0; border-radius:var(--d-pill);
  background:var(--d-sf); color:var(--d-tx3);
  box-shadow:inset 0 0 0 1px var(--d-bd);
  cursor:pointer;
  transition:box-shadow .16s var(--d-ez), color .16s var(--d-ez);
}
body .tb-search:hover{ box-shadow:inset 0 0 0 1px var(--d-bd2); color:var(--d-tx2); }
body .tb-search svg{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; opacity:1; }
body .tb-search .sp{
  font-size:13px; font-weight:450; letter-spacing:-.012em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body .tb-search .kbd{
  margin-left:auto; flex:none;
  padding:2px 6px; border:0; border-radius:5px;
  background:var(--d-sf2); color:var(--d-tx3);
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
}

body .tb-r{ display:flex; align-items:center; gap:8px; }

/* credits — quiet chip; the bolt is the one lavender mark */
body .tb-credits{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  border:0; border-radius:var(--d-pill);
  background:var(--d-sf); color:var(--d-tx);
  box-shadow:inset 0 0 0 1px var(--d-bd);
  font-size:12.5px; font-weight:600; letter-spacing:-.012em;
  white-space:nowrap;
  transition:box-shadow .16s var(--d-ez);
}
body .tb-credits:hover{ background:var(--d-sf); box-shadow:inset 0 0 0 1px var(--d-bd2); }
body .tb-credits svg{ width:13px; height:13px; flex:none; color:var(--d-acc); }
body .tb-credits .tn-credits-unit{ color:var(--d-tx3); font-weight:500; }

/* avatar — solid ink disc, no gradient, no glow */
body .avatar-btn{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--d-tx); color:var(--d-sf);
  font-size:12.5px; font-weight:600; letter-spacing:0;
  box-shadow:none;
  transition:opacity .16s var(--d-ez);
}
body .avatar-btn:hover{ opacity:.86; transform:none; box-shadow:none; background:var(--d-tx); }

/* account menu — rows read exactly like the sidebar rows */
body .avatar-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:70;
  min-width:232px; padding:6px;
  border:0; border-radius:var(--d-r-md);
  background:var(--d-sf);
  box-shadow:var(--d-sh-3);
}
body .am-head{
  padding:10px 10px 11px; margin-bottom:4px;
  border:0; box-shadow:inset 0 -1px 0 var(--d-bd);
}
body .am-name{
  font-size:12.5px; font-weight:600; color:var(--d-tx);
  letter-spacing:-.012em; word-break:break-all;
}
body .am-plan{
  margin-top:3px;
  font-size:11.5px; font-weight:500; color:var(--d-tx3); letter-spacing:-.005em;
}
body .avatar-menu a,
body .avatar-menu button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border-radius:9px;
  font-size:13.5px; font-weight:500; letter-spacing:-.012em;
  color:var(--d-tx2); text-align:left;
  transition:background .14s var(--d-ez), color .14s var(--d-ez);
}
body .avatar-menu a:hover,
body .avatar-menu button:hover{ background:var(--d-sf2); color:var(--d-tx); }
body .avatar-menu svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7; opacity:1;
}
body .avatar-menu .divider{ height:1px; margin:5px 8px; background:var(--d-bd); }
body .avatar-menu .danger{ color:var(--d-red); }
body .avatar-menu .danger:hover{ background:var(--d-red-soft); color:var(--d-red); }

/* ══════════════════════════════════════════════════════════════════
   COMPOSER — the centrepiece.
   Built on the landing-page prompt card: one white surface, one soft
   shadow, one row of quiet controls, one filled send. Everything in
   the control row shares a height, a radius and a type size, so the
   row reads as a set instead of five unrelated widgets.
   ══════════════════════════════════════════════════════════════════ */
body .content-composer{
  width:100%; max-width:716px;
  margin-inline:auto;
  padding:clamp(40px,11vh,116px) 24px 72px;
  display:flex; flex-direction:column; gap:0;
  min-height:0;
}

/* greeting */
body .cmp-head{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:0; margin:0 0 26px;
}
body .cmp-eyebrow{
  height:auto; padding:0; border:0; background:none;
  font-size:12.5px; font-weight:500; color:var(--d-tx3);
  letter-spacing:-.012em; text-transform:none;
}
body .cmp-greet{
  margin:10px 0 0; font-family:inherit;
  font-size:clamp(26px,3vw,34px); font-weight:700;
  line-height:1.12; letter-spacing:-.038em;
  color:var(--d-tx);
}
body .cmp-greet::before{ content:none; }
body .cmp-greet .accent{
  font-family:inherit; font-style:normal; font-weight:700; color:var(--d-tx);
}

/* the surface */
body .cmp-box{
  position:relative;
  display:flex; flex-direction:column;
  padding:4px;
  border:0; border-radius:var(--d-r-lg);
  background:var(--d-sf);
  box-shadow:
    0 0 0 1px var(--d-bd),
    0 1px 2px rgba(11,11,15,.03),
    0 18px 40px -26px rgba(11,11,15,.22);
  transition:box-shadow .26s var(--d-ez);
}
body .cmp-box:hover{
  box-shadow:
    0 0 0 1px var(--d-bd2),
    0 1px 2px rgba(11,11,15,.03),
    0 22px 48px -26px rgba(11,11,15,.26);
}
body .cmp-box:focus-within{
  box-shadow:
    0 0 0 1.5px var(--d-acc-line),
    0 0 0 5px var(--d-acc-soft),
    0 22px 48px -28px rgba(11,11,15,.26);
}
body .cmp-box.dragging{
  box-shadow:0 0 0 1.5px var(--d-acc), 0 0 0 5px var(--d-acc-soft);
  border:0;
}

/* writing zone — deliberately taller than a single-line input. The box
   should read as somewhere you write a brief, not a search field. */
body .cmp-writezone{
  padding:20px 20px 6px;
  min-height:0; background:none; border:0; border-radius:0;
  cursor:text;
}
body .cmp-writezone-label{ display:none; }
body .cmp-textarea{
  width:100%; padding:0; border:0; outline:0; background:none; resize:none;
  font-family:inherit;
  font-size:16.5px; font-weight:450; line-height:1.55;
  letter-spacing:-.014em; color:var(--d-tx);
  min-height:104px; max-height:300px;
}
body .cmp-textarea::placeholder{ color:var(--d-tx3); font-weight:450; }

/* attached thumbs */
body .cmp-thumbs{ gap:7px; padding:0 20px; margin:10px 0 2px; }
body .cmp-thumbs[data-empty="true"]{ display:none; }
body .cmp-thumb{
  width:44px; height:64px;
  border:0; border-radius:8px; overflow:hidden;
  background:var(--d-sf2);
  box-shadow:0 0 0 1px var(--d-bd);
}
body .cmp-thumb.is-ref{
  border:0;
  box-shadow:0 0 0 1.5px var(--d-acc-line);
}
body .cmp-thumb-refbadge{
  left:2px; bottom:2px; height:13px; padding:0 4px;
  border-radius:3px; background:var(--d-tx); color:var(--d-sf);
  font-size:8.5px; font-weight:700; letter-spacing:.04em;
}
body .cmp-thumb .x{
  top:3px; right:3px; width:16px; height:16px;
  background:rgba(11,11,15,.72); border:0; color:#fff; font-size:10px;
}
body .cmp-thumb-count{
  height:64px; padding:0 11px;
  border:0; border-radius:8px;
  background:var(--d-sf2); color:var(--d-tx2);
  box-shadow:0 0 0 1px var(--d-bd);
  font-size:11.5px; font-weight:600; letter-spacing:.02em; text-transform:none;
}

/* control row — no divider rule; spacing does the separating */
body .cmp-actions{
  display:flex; align-items:center; gap:6px;
  margin:0; padding:10px 10px 10px 14px;
  border:0; border-radius:0;
  background:transparent;
  box-shadow:none;
}
body .cmp-actions-l{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0;
}

/* every control in the row shares this shell */
body .cmp-attach-primary,
body .cmp-chip-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  border:0; border-radius:var(--d-pill);
  background:transparent; color:var(--d-tx2);
  box-shadow:inset 0 0 0 1px var(--d-bd);
  font-family:inherit;
  font-size:13px; font-weight:500; letter-spacing:-.014em;
  white-space:nowrap;
  transition:box-shadow .16s var(--d-ez), background .16s var(--d-ez), color .16s var(--d-ez);
  animation:none;
}
body .cmp-attach-primary[data-empty="true"],
body .cmp-attach-primary[data-empty="false"]{ animation:none; }
body .cmp-attach-primary svg,
body .cmp-chip-btn svg{
  width:14px; height:14px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9; opacity:1;
}
body .cmp-attach-primary:hover,
body .cmp-chip-btn:hover{
  background:var(--d-sf2); color:var(--d-tx);
  box-shadow:inset 0 0 0 1px var(--d-bd2);
  transform:none;
}
body .cmp-attach-primary:active,
body .cmp-chip-btn:active{ transform:scale(.985); }
body .cmp-chip-btn b{ color:var(--d-tx); font-weight:600; font-size:13px; }
body .cmp-chip-btn .cmp-chip-lbl{ color:var(--d-tx2); font-weight:450; }
body .cmp-chip-btn .cmp-caret{
  width:11px; height:11px; margin-left:1px; opacity:.5;
  transition:transform .2s var(--d-ez);
}
body .cmp-chip-btn.open{
  background:var(--d-sf2); color:var(--d-tx);
  box-shadow:inset 0 0 0 1px var(--d-bd2);
}
body .cmp-chip-btn.open .cmp-caret{ transform:rotate(180deg); }
body .cmp-chip-btn:focus-visible{
  box-shadow:inset 0 0 0 1px var(--d-acc-line);
  outline:2px solid var(--d-acc); outline-offset:2px;
}
body .cmp-attach-primary .count{
  margin-left:1px; min-width:17px; height:17px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--d-pill);
  background:var(--d-tx); color:var(--d-sf);
  font-size:10.5px; font-weight:600; letter-spacing:0;
}
body .cmp-attach-primary[data-empty="true"] .count{ display:none; }
body .cmp-attach-primary[data-empty="false"]{ color:var(--d-tx); box-shadow:inset 0 0 0 1px var(--d-bd2); }

/* references: a plain round icon button, no dashed box */
body .cmp-ref-info{
  width:32px; height:32px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:transparent; color:var(--d-tx3);
  box-shadow:none; opacity:1;
  transition:background .16s var(--d-ez), color .16s var(--d-ez);
}
body .cmp-ref-info svg{ width:16px; height:16px; stroke-width:1.8; }
body .cmp-ref-info:hover,
body .cmp-ref-info[aria-expanded="true"]{
  background:var(--d-sf2); color:var(--d-tx);
  border:0; box-shadow:none; opacity:1;
}
body .cmp-ref-info .dot{
  top:4px; right:4px; width:6px; height:6px;
  background:var(--d-acc); box-shadow:0 0 0 2px var(--d-sf);
}

/* send */
body .cmp-send{
  margin-left:auto; flex:none;
  width:34px; height:34px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--d-tx); color:var(--d-sf);
  box-shadow:none;
  transition:opacity .16s var(--d-ez), transform .16s var(--d-ez), background .16s var(--d-ez);
}
body .cmp-send svg{ width:15px; height:15px; stroke-width:2.2; }
body .cmp-send:not(:disabled):hover{
  background:var(--d-tx); opacity:.86; transform:none; box-shadow:none;
}
body .cmp-send:not(:disabled):active{ transform:scale(.94); box-shadow:none; }
body .cmp-send:disabled,
body .cmp-send.blocked{
  background:var(--d-sf2); color:var(--d-tx3);
  border:0; box-shadow:none; opacity:1;
}
body .cmp-send.blocked:hover{ background:var(--d-sf3); color:var(--d-tx2); transform:none; box-shadow:none; }
body .cmp-send.busy{ background:var(--d-tx); color:var(--d-sf); border:0; }

/* inline error banner */
body .cmp-form-error{
  margin:6px 6px 0; padding:10px 10px 10px 12px;
  border:0; border-radius:var(--d-r-md);
  background:var(--d-red-soft);
  box-shadow:inset 0 0 0 1px rgba(220,38,38,.18);
  font-size:13px;
}
body .cmp-form-error.is-info{
  background:var(--d-acc-soft);
  box-shadow:inset 0 0 0 1px var(--d-acc-line);
}
body .cmp-form-error-ico{
  width:20px; height:20px; border-radius:50%;
  background:var(--d-red); color:#fff; font-size:12px; font-weight:700;
}
body .cmp-form-error.is-info .cmp-form-error-ico{ background:var(--d-acc); color:#fff; }
body .cmp-form-error-txt b{ font-size:12.5px; font-weight:600; color:var(--d-tx); }
body .cmp-form-error-txt span{ font-size:12px; color:var(--d-tx2); }
body .cmp-form-error-actions a,
body .cmp-form-error-actions button{
  height:28px; padding:0 12px; border:0; border-radius:var(--d-pill);
  background:var(--d-tx); color:var(--d-sf);
  font-size:12px; font-weight:600;
}
body .cmp-form-error-actions a:hover,
body .cmp-form-error-actions button:hover{ background:var(--d-tx); opacity:.87; }
body .cmp-form-error-x{ color:var(--d-tx3); }
body .cmp-form-error-x:hover{ background:transparent; color:var(--d-tx); }

/* drop mask */
body .cmp-dropmask{
  border-radius:var(--d-r-lg);
  background:color-mix(in srgb, var(--d-sf) 88%, transparent);
  backdrop-filter:blur(3px);
}
body .cmp-dropmask-inner{
  font-size:13.5px; font-weight:600; letter-spacing:-.014em; color:var(--d-tx);
}
body .cmp-dropmask-inner svg{ width:26px; height:26px; stroke-width:1.7; color:var(--d-tx3); }

/* status line under the composer — empty at rest, so nothing sits
   under the box until there is something worth saying. */
body .cmp-foothint{
  display:flex; justify-content:center;
  margin-top:14px; padding:0 8px; min-height:18px;
  font-size:12.5px; font-weight:450; letter-spacing:-.012em;
  color:var(--d-tx3); text-align:center;
}
body .cmp-foothint-l{ flex:0 1 auto; }
body .cmp-foothint-l.ok{ color:var(--d-tx2); }
body .cmp-foothint-l.generating{ color:var(--d-acc); }
body .cmp-foothint-r,
body .cmp-suggest,
body .cmp-suggest-label,
body .cmp-sgx,
body .cmp-k{ display:none !important; }

/* ══════════════════════════════════════════════════════════════════
   POPOVERS
   ══════════════════════════════════════════════════════════════════ */
body .cmp-pop{
  padding:6px; border:0; border-radius:var(--d-r-md);
  background:var(--d-sf); box-shadow:var(--d-sh-3);
}
body .cmp-pop-head{
  padding:9px 10px 6px;
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--d-tx3);
}
body .cmp-pop .cmp-pop-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border:0; border-radius:9px;
  background:transparent; color:var(--d-tx2);
  font-size:13.5px; font-weight:500; letter-spacing:-.012em; text-align:left;
  transition:background .14s var(--d-ez), color .14s var(--d-ez);
}
body .cmp-pop .cmp-pop-opt:hover{ background:var(--d-sf2); color:var(--d-tx); }
body .cmp-pop .cmp-pop-opt .n{
  font-family:inherit; font-size:14px; font-weight:600;
  color:var(--d-tx); min-width:20px; text-align:center;
}
body .cmp-pop .cmp-pop-opt .lbl{ flex:1; font-size:13.5px; font-weight:450; color:var(--d-tx2); }
body .cmp-pop .cmp-pop-opt .cred{ font-size:11px; font-weight:500; color:var(--d-tx3); text-transform:none; letter-spacing:0; }
/* the current choice — the one place a lavender fill earns its keep */
body .cmp-pop .cmp-pop-opt.selected{
  background:var(--d-acc-soft); color:var(--d-acc);
}
body .cmp-pop .cmp-pop-opt.selected .n,
body .cmp-pop .cmp-pop-opt.selected .lbl,
body .cmp-pop .cmp-pop-opt.selected .q-name,
body .cmp-pop .cmp-pop-opt.selected .cred{ color:var(--d-acc); }
body .cmp-pop .cmp-pop-opt.locked{ opacity:.5; }
body .cmp-pop .cmp-pop-opt.q-opt{ display:block; }
body .cmp-pop .cmp-pop-opt .q-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; }
body .cmp-pop .cmp-pop-opt .q-name{ font-size:13.5px; font-weight:500; color:var(--d-tx); letter-spacing:-.012em; }
body .cmp-pop .cmp-pop-opt .q-meta{ font-size:11px; font-weight:500; color:var(--d-tx3); letter-spacing:0; }
body .cmp-pop .cmp-pop-opt.selected .q-meta{ color:var(--d-acc); }
body .cmp-pop-foot{
  margin-top:4px; padding:9px 10px 5px;
  border:0; box-shadow:inset 0 1px 0 var(--d-bd);
  font-size:11.5px; font-weight:450; color:var(--d-tx3); letter-spacing:-.008em;
}
body .cmp-pop-q-foot a{ color:var(--d-acc); font-weight:600; }

body .cmp-lang-opt{
  height:34px; padding:0 10px; border:0; border-radius:9px;
  background:transparent; color:var(--d-tx2);
  font-size:13.5px; font-weight:450; letter-spacing:-.012em;
}
body .cmp-lang-opt:hover{ background:var(--d-sf2); color:var(--d-tx); }
body .cmp-lang-opt.selected{ background:var(--d-acc-soft); color:var(--d-acc); }
body .cmp-lang-opt .lang-code{ font-size:10.5px; font-weight:600; color:var(--d-tx3); letter-spacing:.06em; }
body .cmp-lang-opt.selected .lang-code{ color:var(--d-acc); }
body .cmp-lang-opt .lang-check{ color:var(--d-acc); }

/* reference popover */
body .cmp-pop-ref{ width:290px; padding:13px 13px 11px; }
body .cmp-pop-ref .cmp-pop-ref-head{
  margin-bottom:5px;
  font-size:12.5px; font-weight:600; color:var(--d-tx); letter-spacing:-.012em;
}
body .cmp-pop-ref .cmp-pop-ref-head .opt{
  font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--d-tx3);
}
body .cmp-pop-ref .cmp-pop-ref-body{
  margin:0 0 11px;
  font-size:12px; font-weight:450; line-height:1.5; color:var(--d-tx2); letter-spacing:-.008em;
}
body .cmp-pop-ref-action{
  width:100%; height:34px; padding:0 12px;
  border:0; border-radius:var(--d-pill);
  background:transparent; color:var(--d-tx);
  box-shadow:inset 0 0 0 1px var(--d-bd2);
  font-size:12.5px; font-weight:600; letter-spacing:-.012em;
  transition:background .16s var(--d-ez);
}
body .cmp-pop-ref-action:hover{ background:var(--d-sf2); border:0; box-shadow:inset 0 0 0 1px var(--d-bd2); }
body .cmp-pop-ref-action svg{ width:14px; height:14px; stroke-width:2; }
body .cmp-pop-ref-action .count{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--d-pill); background:var(--d-tx); color:var(--d-sf);
  font-size:10px; font-weight:600;
}

/* ══════════════════════════════════════════════════════════════════
   RECENT PROJECTS RAIL
   ══════════════════════════════════════════════════════════════════ */
body .cmp-rail{
  margin-top:clamp(44px,8vh,80px); padding-top:24px;
  box-shadow:inset 0 1px 0 var(--d-bd);
  display:flex; flex-direction:column; gap:16px;
}
body .cmp-rail-head{ display:flex; align-items:center; justify-content:space-between; padding:0 2px; }
body .cmp-rail-title{
  font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--d-tx);
}
body .cmp-rail-count{
  padding:2px 8px; border:0; border-radius:var(--d-pill);
  background:var(--d-sf2); color:var(--d-tx3);
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
}
body .cmp-rail-track{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:12px; padding:2px;
}
body .cmp-rcard{
  border:0; border-radius:var(--d-r-md);
  background:var(--d-sf);
  box-shadow:var(--d-sh-1);
  overflow:hidden;
  transition:transform .26s var(--d-ez), box-shadow .26s var(--d-ez);
}
body .cmp-rcard:hover{ transform:translateY(-3px); box-shadow:var(--d-sh-2); border:0; }
body .cmp-rcard-thumb{ border:0; box-shadow:inset 0 -1px 0 var(--d-bd); background:var(--d-sf2); }
body .cmp-rcard-thumb .thumb-empty{ background:var(--d-sf2); }
body .cmp-rcard-thumb .thumb-empty svg{ color:var(--d-tx3); opacity:.6; }
body .cmp-rcard-body{ padding:12px 13px 13px; gap:5px; }
body .cmp-rcard-badge{
  padding:2px 7px; border-radius:5px;
  background:var(--d-sf2); color:var(--d-tx3);
  font-size:9.5px; font-weight:600; letter-spacing:.09em;
}
body .cmp-rcard-name{
  font-size:13.5px; font-weight:600; letter-spacing:-.018em; color:var(--d-tx); min-height:34px;
}
body .cmp-rcard-meta{ font-size:11.5px; font-weight:450; color:var(--d-tx3); }
body .cmp-rcard-meta .dot{ background:var(--d-tx3); opacity:.5; }
body .cmp-rcard-del,
body .cmp-rcard-rename{
  border:0; border-radius:7px;
  background:color-mix(in srgb, var(--d-sf) 88%, transparent);
  box-shadow:0 0 0 1px var(--d-bd);
  color:var(--d-tx3);
  backdrop-filter:blur(6px);
}
body .cmp-rcard-del:hover{ color:var(--d-red); background:var(--d-sf); border:0; }
body .cmp-rcard-rename:hover{ color:var(--d-tx); background:var(--d-sf); border:0; }

/* rail spinner */
body .cmp-rail-sentinel{ color:var(--d-tx3); font-size:12px; font-weight:500; }
body .cmp-rail-sentinel .rs-spin{ border-color:var(--d-bd); border-top-color:var(--d-tx3); }

/* ══════════════════════════════════════════════════════════════════
   COMMAND PALETTE · TOASTS · SKELETONS
   ══════════════════════════════════════════════════════════════════ */
body .cmd-backdrop{ background:rgba(11,11,15,.32); backdrop-filter:blur(3px); }
body .cmd{
  border:0; border-radius:var(--d-r-lg);
  background:var(--d-sf); box-shadow:var(--d-sh-3);
  overflow:hidden;
}
body .cmd-search{ padding:14px 16px; box-shadow:inset 0 -1px 0 var(--d-bd); }
body .cmd-search svg{ width:16px; height:16px; color:var(--d-tx3); stroke-width:1.9; }
body .cmd-search input{ font-size:15px; font-weight:450; color:var(--d-tx); letter-spacing:-.014em; }
body .cmd-search input::placeholder{ color:var(--d-tx3); }
body .cmd-list{ padding:6px; }
body .cmd-group-label{
  padding:10px 10px 6px;
  font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--d-tx3);
}
body .cmd-item{
  padding:9px 10px; border-radius:9px;
  font-size:13.5px; font-weight:450; color:var(--d-tx2); letter-spacing:-.012em;
}
body .cmd-item svg{ width:16px; height:16px; stroke-width:1.7; }
body .cmd-item:hover,
body .cmd-item.active{ background:var(--d-sf2); color:var(--d-tx); }
body .cmd-item .cmd-kbd{
  background:var(--d-sf2); color:var(--d-tx3);
  font-size:10.5px; font-weight:600; border-radius:5px; padding:2px 6px;
}

body .toast{
  border:0; border-radius:var(--d-pill);
  padding:11px 18px;
  background:var(--d-tx); color:var(--d-sf);
  box-shadow:0 18px 40px -20px rgba(11,11,15,.5);
  font-size:13px; font-weight:500; letter-spacing:-.012em;
}
body .toast svg{ width:15px; height:15px; stroke-width:2.2; }
body .toast.success svg{ color:var(--d-green); }
body .toast.error svg{ color:var(--d-red); }

body .nx-skel{
  background:linear-gradient(90deg,var(--d-sf2) 0%,var(--d-sf3) 50%,var(--d-sf2) 100%);
  background-size:800px 100%;
  border-radius:6px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1000px){
  body .app{ grid-template-columns:1fr; }
  body .sidebar{
    position:fixed; left:0; top:0; width:var(--sidebar-w);
    transform:translateX(-100%);
    transition:transform .3s var(--d-ez);
    box-shadow:var(--d-sh-3);
  }
  body .sidebar.open{ transform:none; }
  body .sb-close{ display:flex; }
  body .sb-fold{ display:none; }
  body .tb-search{ min-width:0; }
}
@media (max-width:640px){
  body .content-composer{ padding:28px 16px 56px; }
  body .cmp-greet{ font-size:24px; }
  body .tb-search .sp,
  body .tb-search .kbd{ display:none; }
  body .tb-search{ width:34px; min-width:34px; padding:0; justify-content:center; }
  body .tb-credits .tn-credits-unit{ display:none; }
  body .cmp-actions{ flex-wrap:wrap; padding:8px; }
  body .cmp-actions-l{ gap:5px; }
  body .cmp-attach-primary,
  body .cmp-chip-btn{ height:30px; padding:0 10px; font-size:12.5px; }
  body .cmp-rail-track{ grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; }
  body .toast-wrap{ left:16px; right:16px; bottom:16px; }
}
@media (prefers-reduced-motion:reduce){
  body *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}