/* ═══════════════════════════════════════════════
   CARNOT.AI — BASE
   Reset, typography, layout primitives, global animations.
   Re-themed to the design reference: text-colour helpers now use
   the "-ink" (contrast-safe) token variants; the scrollbar-thumb
   duplicate (one dark, one white — folded in from the legacy
   runtime-injected block) is resolved to one legible value for
   the light theme.
═══════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
/* Reference's 4-layer radial-gradient body background — this app
   defaults to LIGHT (opposite of the reference's dark-by-default), so
   the light gradient set is on bare `body`, and the dark set is
   under [data-theme="dark"] / prefers-color-scheme, not the other
   way around as in the reference file itself. */
body{
  font-family:var(--font);color:var(--tx-primary);font-size:var(--text-14);line-height:1.5;
  background:
    radial-gradient(720px 480px at 8% -6%, rgba(131,162,219,.30), transparent 60%),
    radial-gradient(680px 460px at 96% 8%, rgba(156,143,214,.26), transparent 60%),
    radial-gradient(760px 520px at 30% 105%, rgba(127,184,147,.22), transparent 60%),
    radial-gradient(640px 460px at 88% 100%, rgba(217,162,92,.18), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
:root[data-theme="dark"] body{
  background:
    radial-gradient(720px 480px at 8% -6%, rgba(212,162,77,.10), transparent 60%),
    radial-gradient(680px 460px at 96% 8%, rgba(131,162,219,.08), transparent 60%),
    radial-gradient(760px 520px at 30% 105%, rgba(212,162,77,.06), transparent 60%),
    radial-gradient(640px 460px at 88% 100%, rgba(131,162,219,.06), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body{
    background:
      radial-gradient(720px 480px at 8% -6%, rgba(212,162,77,.10), transparent 60%),
      radial-gradient(680px 460px at 96% 8%, rgba(131,162,219,.08), transparent 60%),
      radial-gradient(760px 520px at 30% 105%, rgba(212,162,77,.06), transparent 60%),
      radial-gradient(640px 460px at 88% 100%, rgba(131,162,219,.06), transparent 60%),
      var(--bg);
    background-attachment:fixed;
  }
}
/* Was a solid opaque var(--bg) layer painted in front of body's own
   background, which would have hidden the gradients above entirely —
   made transparent so they show through. */
body::before{content:'';position:fixed;inset:0;z-index:0;background:transparent;}
body::after{display:none;}
.shell,.toast,.modal-bg{position:relative;z-index:2;}
/* The document itself scrolls (html,body no longer have
   overflow:hidden). .sidebar is the one exception: it's
   position:sticky with its own overflow-y:auto, so a tall nav list
   scrolls independently while staying pinned under the topbar. Every
   other former inner-scroll container (#mainArea/.main, #sidebar's
   duplicate rule) has had overflow-y:auto removed — see features.css. */

/* ANIMATIONS */
@keyframes glassRise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes pageIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes popIn{from{transform:scale(0.92);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* SHELL — plain flex, not grid. Topbar stacked above .body-row
   (sidebar + content), matching the reference's actual DOM/layout
   approach rather than a CSS Grid re-implementation of it. */
.shell{display:flex;flex-direction:column;min-height:100vh;}
.shell.hidden{display:none;}
.body-row{display:flex;align-items:stretch;flex:1;min-width:0;}

/* HELPERS */
.mono{font-family:var(--mono);font-size:var(--text-12);}
.fw6{font-weight:600;}.fw7{font-weight:700;}.fw8{font-weight:800;}
.c-pu{color:var(--purple-ink);}.c-cy{color:var(--teal-ink);}.c-gn{color:var(--green-ink);}
.c-rd{color:var(--red-ink);}.c-or{color:var(--orange-ink);}.c-pk{color:var(--pink-ink);}.c-bl{color:var(--blue-ink);}
.c-sc{color:var(--tx-secondary);}.c-pr{color:var(--tx-primary);}

/* SCROLLBAR */
/* Consolidated: this used to be two conflicting rules (one dark, one
   white from the runtime-injected block) — the white one won by load
   order and was nearly invisible on this light theme. Resolved to a
   single dark, legible thumb matching the reference's ink family. */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--ink-a14);border-radius:var(--radius-10);}
::-webkit-scrollbar-thumb:hover{background:var(--ink-a24);}