/* Atlas Mesh on the shared flat Nozomi layer: shared tokens own shell,
   control, type, and status colour. */

:root {
  --ink: var(--nozomi-bg);
  --sidebar: var(--nozomi-sidebar);
  --water: var(--nozomi-panel);
  --water-2: var(--nozomi-surface);
  --sounding: var(--nozomi-border);
  --paper: var(--nozomi-text-strong);
  --print: var(--nozomi-text-muted);
  --amber: var(--nozomi-accent-soft);
  --action: var(--nozomi-accent);
  --action-hover: var(--nozomi-accent-hover);
  --amber-ink: var(--nozomi-bg);
  --signal-red: var(--nozomi-danger);

  --mono: var(--nozomi-font-mono);

  --radius: var(--nozomi-radius-control);
  --chat-width: 840px;    /* shared conversation/composer canvas */
  --scrim: rgba(5, 7, 9, .64);   /* one near-black scrim for drawers/dialogs */
}
/* Box-sizing, margins, and the body font come from the shared .nz-base
   preflight (the class sits on <body>); [hidden] and the full-height app
   frame are Atlas's own. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body.nz-base {
  height: 100dvh;
  background: var(--ink);
  color: var(--paper);
}
::selection { background: var(--amber); color: var(--amber-ink); }
:focus-visible { outline: 1.5px solid var(--amber); outline-offset: 1px; }

/* minmax(0, 1fr) row: the log scrolls inside #messages, never the page */
#app {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); height: 100%;
}

/* ---------------------------------------------------------------- sidebar */
#sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--sounding);
  display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 12px;
  min-width: 0;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 2px 12px; border-bottom: 1px solid var(--sounding);
}

.brand .word b { color: var(--print); font-weight: 400; }

#new-chat { width: 100%; background: var(--water-2); color: var(--paper); border-color: var(--sounding); }
#new-chat:hover { background: var(--nozomi-surface-raised); border-color: var(--nozomi-border-interactive); }

#chat-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
}
.chat-item {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 0;
  color: var(--print); width: 100%;
  border-left: 2px solid transparent;
}
.chat-item:hover { background: var(--water-2); color: var(--paper); }
.chat-item.active { border-left-color: var(--amber); color: var(--paper); background: var(--water-2); }
.chat-item .title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 8px 0 8px 12px; cursor: pointer;
  color: inherit; border: none; background: none; font: inherit; text-align: left;
}
.chat-item .x {
  opacity: 0; color: var(--print); padding: 0 2px;
  min-width: 24px; min-height: 24px; flex: 0 0 auto;
  border: none; background: none; font: inherit; cursor: pointer;
}
/* Inline key-name + create control in the API keys card. */
.key-create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.chat-item:hover .x, .chat-item:focus-within .x { opacity: 1; }
.chat-item .x:hover { color: var(--signal-red); }
.chat-item .x.confirm { opacity: 1; color: var(--signal-red); }

.sidebar-foot {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--sounding); padding-top: 10px;
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
}
/* Account row + secondary nav use the shared nz-account / nz-btn ghost-icon
   pattern, so Atlas's rail foot reads the same as Kura, Fuji, and Sakura:
   avatar, identity, and a ghost icon sign-out -- not a bespoke text button. */
#account-line { padding: 6px 8px; }
/* Settings / API docs: proper nav items, left-aligned with a leading glyph and
   a hover tint, rather than a flat stack of plain link buttons. */
.foot-nav { display: grid; gap: 2px; margin-bottom: 4px; }
.foot-link {
  display: flex; align-items: center; gap: 9px;
  min-height: 34px; padding: 0 8px; border: 0; border-radius: var(--radius);
  background: none; color: var(--print); font: inherit; text-align: left; cursor: pointer;
}
.foot-link svg { flex: none; color: var(--print); opacity: .85; }
.foot-link:hover { background: var(--water-2); color: var(--paper); }
.foot-link.active { background: var(--water-2); color: var(--paper); box-shadow: inset 2px 0 0 var(--action); }
.foot-link.active svg { color: var(--action); opacity: 1; }

/* ---------------------------------------------------------------- buttons */
button.primary {
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-control);
  min-height: 40px;
  background: var(--action); color: var(--amber-ink); border: 1px solid var(--nozomi-accent-border);
  padding: 8px 14px; border-radius: var(--radius); font-weight: 600; cursor: pointer;
}
button.primary:hover { background: var(--action-hover); }
button.primary:disabled { opacity: .45; cursor: default; }
button.link {
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
  background: none; border: none; color: var(--print);
  text-align: left; padding: 7px 10px; border-radius: var(--radius); cursor: pointer;
}
button.link:hover { background: var(--water-2); color: var(--paper); }
button.danger {
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
  background: none; border: none; color: var(--signal-red); cursor: pointer;
}

/* drawer toggle: visuals come from nz-shell-toggle; Atlas controls only when
   it shows, because the drawer breakpoint here is 720px, not the shared 768. */
.menu-btn { display: none; flex: 0 0 auto; cursor: pointer; }
.menu-btn svg { width: 16px; height: 16px; }
#scrim { display: none; }

/* ------------------------------------------------------------------- main */
main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.view.active { display: flex; }
body.overlay-open { overflow: hidden; }

/* Non-chat surfaces use the same centered, blurred dialog shape as Kernel. */
.view:not(#view-chat) {
  position: fixed; inset: 0; z-index: 40;
  align-items: center; justify-content: center; padding: 32px;
  background: var(--scrim);
  backdrop-filter: blur(8px);
}
/* Dialog visuals come from nz-dialog-box; only the sizing is local. */
.overlay-card {
  width: min(820px, calc(100vw - 64px)); max-height: 86vh;
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.overlay-card > .topbar {
  flex: 0 0 auto; min-height: 56px; padding: 11px 16px 11px 20px;
  background: color-mix(in srgb, var(--water) 94%, transparent);
}
.overlay-card > .topbar h1 { flex: 1; }
.overlay-card > .topbar h1:focus-visible { outline: none; }
.overlay-card > .topbar .menu-btn { display: none; }
/* nz-btn-ghost/-icon owns the box; only the × glyph voice is local. */
.overlay-close { flex: 0 0 auto; font: var(--nozomi-font-heading-medium)/1 var(--mono); }
.overlay-card > .panel {
  width: 100%; max-width: none; min-height: 0; overflow-y: auto;
}

.topbar {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 11px 22px; border-bottom: 1px solid var(--sounding);
  background: color-mix(in srgb, var(--nozomi-panel) 94%, transparent);
}
.topbar h1 {
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-section-title); margin: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-heading { flex: 1; min-width: 0; }
.chat-tools { display: flex; align-items: center; gap: 2px; }
.chat-icon {
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; color: var(--print); cursor: pointer;
}
.chat-icon svg { width: 15px; height: 15px; }
.chat-icon:hover { color: var(--paper); border-color: var(--sounding); background: var(--water-2); }
.chat-icon.pressed { color: var(--amber); border-color: var(--sounding); background: var(--water-2); }

.share-dialog {
  width: min(520px, calc(100vw - 32px)); color: var(--paper);
  background: var(--water); border: 1px solid var(--sounding); padding: 24px;
}
/* Atlas puts nz-dialog-box on the <dialog> itself rather than on an inner box,
   so the shared sheet's `display: flex` outranks the user-agent
   `dialog:not([open]) { display: none }` rule and a closed dialog kept
   painting -- minus its backdrop, with no way left to dismiss it. Restore the
   closed state locally; :not([open]) outranks the single shared class. */
.share-dialog:not([open]) { display: none; }
.share-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(5px); }
.share-dialog h2 { margin: 0 32px 8px 0; font: 600 var(--nozomi-font-section-title)/1.3 var(--nozomi-font-sans); }
.share-dialog p { color: var(--print); margin: 0 0 12px; }
.share-close {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px;
  padding: 0; border: 0; background: none; color: var(--print); cursor: pointer;
  font: var(--nozomi-font-heading-medium)/1 var(--mono);
}
.share-link-row { display: flex; gap: 8px; margin: 16px 0; }
.share-link-row input {
  min-width: 0; flex: 1; border: 1px solid var(--sounding); border-radius: var(--radius);
  background: var(--ink); color: var(--paper); padding: 9px; font: var(--nozomi-font-small) var(--mono);
}
.share-link-row button { font: var(--nozomi-font-small) var(--nozomi-font-sans); }

.share-page { height: auto; min-height: 100%; }
.share-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 64px; }
.share-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--sounding); padding-bottom: 14px; color: var(--print);
  font: var(--nozomi-font-small) var(--nozomi-font-sans); text-transform: uppercase; letter-spacing: .08em;
}
.share-header a { display: flex; align-items: center; gap: 8px; color: var(--paper); text-decoration: none; }
.share-header img { width: 28px; height: 28px; }
.share-shell h1 { margin: 28px 0 6px; font: 600 24px/1.3 var(--nozomi-font-sans); }
.share-note { color: var(--print); margin: 0 0 32px; }
.shared-message { border-left: 1px solid var(--sounding); padding: 0 0 28px 28px; }
.shared-role { color: var(--print); font: var(--nozomi-font-small) var(--nozomi-font-sans); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.shared-message.assistant .shared-role { color: var(--amber); }
.shared-content {
  margin: 0; max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--paper); background: none; border: 0; font: var(--nozomi-font-body)/1.65 var(--mono);
}
.shared-message.assistant .shared-content { font: 15px/1.65 var(--nozomi-font-sans); }
.shared-content.rendered { overflow: visible; white-space: normal; }
.shared-content.rendered p,
.shared-content.rendered ul,
.shared-content.rendered ol,
.shared-content.rendered blockquote,
.shared-content.rendered pre { margin: 0 0 10px; }
.shared-content.rendered ul, .shared-content.rendered ol { padding-left: 24px; }
.shared-content.rendered li { margin: 3px 0; }
.shared-content.rendered h3, .shared-content.rendered h4,
.shared-content.rendered h5, .shared-content.rendered h6 { margin: 18px 0 8px; line-height: 1.3; }
.shared-content.rendered blockquote {
  border-left: 2px solid var(--sounding); padding: 2px 0 2px 12px; color: var(--print);
}
.shared-content.rendered hr { border: 0; border-top: 1px solid var(--sounding); margin: 14px 0; }
.shared-content.rendered a { color: var(--amber); }
.shared-content.rendered pre {
  background: var(--water); border: 1px solid var(--sounding); border-radius: var(--radius);
  padding: 12px 14px; overflow-x: auto; font: var(--nozomi-font-small)/1.55 var(--mono);
}
.shared-content.rendered > :first-child { margin-top: 0; }
.shared-content.rendered > :last-child { margin-bottom: 0; }
.shared-file { color: var(--print); font: var(--nozomi-font-small) var(--mono); margin: 0 0 8px; }
.chat-icon:disabled { display: none; }
.rename-form {
  width: min(520px, 100%); display: flex; align-items: center; gap: 5px;
}
.rename-form input {
  min-width: 0; height: 34px; flex: 1;
  border: 1px solid var(--amber); border-radius: var(--radius);
  background: var(--water-2); color: var(--paper); caret-color: var(--amber);
  padding: 6px 10px; font: 600 var(--nozomi-font-body)/1.2 var(--nozomi-font-sans);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 10%, transparent);
}
.rename-form input:focus { outline: none; }
.rename-form button {
  width: 30px; height: 30px; flex: 0 0 auto; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--sounding); border-radius: var(--radius);
  background: var(--water-2); color: var(--print); cursor: pointer;
}
.rename-form button svg { width: 14px; height: 14px; }
.rename-form button:hover { color: var(--paper); border-color: var(--amber); }
#rename-save { color: var(--amber); }
.rename-form button:disabled { opacity: .45; cursor: default; }
/* --------------------------------------------------- the log (messages) */
/* Column flex so the empty and disconnected states can centre themselves in
   the pane with `margin: auto`; the log itself still starts at the top. */
.messages { flex: 1; overflow-y: auto; padding: 26px 22px 8px; display: flex; flex-direction: column; }
.log { flex: none; width: min(100%, var(--chat-width)); margin: 0 auto; }

.msg { position: relative; padding: 0 0 28px; }

.msg .meta {
  display: flex; align-items: baseline; flex-wrap: wrap;
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
  color: var(--print); margin-bottom: 6px;
}
.msg .meta .who { color: var(--paper); font-weight: 600; }
.msg .meta .time { color: var(--print); margin-left: 8px; }
.msg .meta .stats { color: var(--print); margin-left: 8px; }
.msg .meta .partial {
  color: var(--amber); border: 1px solid var(--sounding); border-radius: var(--nozomi-radius-pill);
  font-size: var(--nozomi-font-label); letter-spacing: .08em; margin-left: 8px; padding: 1px 5px;
}
.msg.assistant .meta .who { color: var(--amber); }
.msg .meta .stats:empty { display: none; }

.conversation-usage { flex: none; padding: 10px 22px; border-bottom: 1px solid var(--sounding); font: var(--nozomi-font-small)/1.5 var(--nozomi-font-sans); color: var(--print); }
.conversation-usage summary { cursor: pointer; }
#usage-summary { color: var(--paper); margin-left: 12px; }
.usage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 0 8px; }
.usage-grid span, .usage-grid strong { display: block; }
.usage-grid strong { color: var(--paper); font: 500 16px/1.6 var(--mono); }
.usage-cache { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.usage-cache meter { width: min(260px, 100%); height: 12px; accent-color: var(--action); }
.usage-cache meter::-webkit-meter-bar { background: var(--water-2); border: 0; }
.usage-cache meter::-webkit-meter-optimum-value { background: var(--action); }
.conversation-usage p { margin: 6px 0 0; }
@media (max-width: 600px) { .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #usage-summary { display: block; margin-left: 0; } }

.msg .body {
  min-width: 0; overflow-wrap: anywhere;
  max-width: 86ch;
}
.msg.assistant .body { font-size: 15px; line-height: 1.65; }
/* The operator's turn sits in a quiet outlined block and stays literal. */
.msg.user .body {
  width: fit-content; font-size: 15px; line-height: 1.6; color: var(--paper);
  white-space: pre-wrap; padding: 10px 14px;
  background: var(--water); border: 1px solid var(--sounding); border-radius: var(--nozomi-radius-panel);
}
.msg.user { display: flex; flex-direction: column; align-items: flex-end; }
.msg.user .body { max-width: min(100%, 72ch); }
.msg.user .meta, .msg.user .turn-actions { justify-content: flex-end; }

/* markdown blocks in the model's voice */
/* Flow text keeps a readable measure; code, tables and the reasoning channel
   keep the full column, because those are scanned in full lines. */
.msg.assistant .body > :is(p, ul, ol, blockquote, h3, h4, h5, h6) { max-width: 68ch; }
.msg.assistant .body p { margin: 0 0 10px; }
.msg.assistant .body ul, .msg.assistant .body ol { margin: 0 0 10px; padding-left: 24px; }
/* nz-base sets list-style: none on bare lists; markdown lists keep markers. */
.msg.assistant .body ul, .shared-content.rendered ul { list-style: disc; }
.msg.assistant .body ol, .shared-content.rendered ol { list-style: decimal; }
.msg.assistant .body li { margin: 3px 0; }
.msg.assistant .body h3, .msg.assistant .body h4,
.msg.assistant .body h5, .msg.assistant .body h6 {
  font-family: var(--nozomi-font-sans); font-weight: 600; line-height: 1.3; margin: 18px 0 8px;
}
.msg.assistant .body h3 { font-size: 18px; }
.msg.assistant .body h4 { font-size: 16.5px; }
.msg.assistant .body h5, .msg.assistant .body h6 { font-size: var(--nozomi-font-section-title); }
.msg.assistant .body blockquote {
  border-left: 2px solid var(--sounding); margin: 0 0 10px;
  padding: 2px 0 2px 12px; color: var(--print);
}
.msg.assistant .body hr { border: none; border-top: 1px solid var(--sounding); margin: 14px 0; }
.msg.assistant .body a { color: var(--amber); }
.msg.assistant .body pre { margin: 0 0 10px; }
.msg.assistant .body > :first-child { margin-top: 0; }
.msg.assistant .body > :last-child { margin-bottom: 0; }

:is(.msg.assistant .body, .shared-content.rendered) .table-wrap {
  max-width: 100%; margin: 0 0 10px; overflow-x: auto;
}
:is(.msg.assistant .body, .shared-content.rendered) table {
  width: 100%; border-collapse: collapse; font-size: var(--nozomi-font-message);
}
:is(.msg.assistant .body, .shared-content.rendered) th,
:is(.msg.assistant .body, .shared-content.rendered) td {
  padding: 6px 9px; border: 1px solid var(--sounding); text-align: left; vertical-align: top;
}
:is(.msg.assistant .body, .shared-content.rendered) th {
  background: var(--water-2); font-family: var(--mono); font-size: var(--nozomi-font-small);
}

.msg .body pre {
  position: relative;
  background: var(--water); border: 1px solid var(--sounding); border-radius: var(--radius);
  padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: var(--nozomi-font-small);
  line-height: 1.55;
}
/* One copy affordance for every code block, in the log and in the API docs. */
pre .copy {
  position: absolute; top: 6px; right: 6px;
  font-family: var(--mono); font-size: var(--nozomi-font-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--print); background: var(--water-2); border: 1px solid var(--sounding);
  border-radius: 4px; padding: 2px 7px; min-height: 24px; min-width: 24px;
  cursor: pointer; opacity: 0;
}
pre:hover .copy, pre .copy:focus-visible { opacity: 1; }
pre .copy:hover { color: var(--amber); border-color: var(--amber); }
@media (hover: none) {
  pre .copy { opacity: 1; }
}
.msg .body code { font-family: var(--mono); font-size: .88em; }
.msg .body :not(pre) > code {
  background: var(--water); border: 1px solid var(--sounding);
  border-radius: 4px; padding: 1px 5px;
}
.reply-error { margin-top: 12px !important; }
.turn-actions {
  display: flex; gap: 10px; min-height: 22px; margin-top: 7px;
  opacity: 0; transition: opacity .12s ease;
}
.msg:hover .turn-actions, .turn-actions:focus-within { opacity: 1; }
.turn-actions button {
  border: none; background: none; color: var(--print); cursor: pointer;
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-label); padding: 2px 0; min-height: 24px;
}
.turn-actions button:hover { color: var(--amber); }
.turn-actions button.pressed { color: var(--amber); }
.context-note {
  margin: -8px 0 18px; color: var(--print);
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
}

.msg { animation: plot .28s ease-out both; }
@keyframes plot { from { opacity: 0; transform: translateY(5px); } }
.cursor::after {
  content: '▏'; color: var(--amber);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* empty state: the unplotted chart */
.empty {
  position: relative; isolation: isolate;
  margin: auto; text-align: center; color: var(--print); max-width: 460px;
  padding: 48px 20px;
  /* The mark below is the only ground this state needs; a second grey aura
     behind it just muddies the star. */
}
/* The mark is the ground, not an icon stacked above the copy: one large,
   faint compass star drifting behind the invitation, and gone the moment
   there is a conversation to read. It bleeds past the text block on purpose. */
.empty .mark-watermark {
  /* Sat a little high: the star's mass is in its upper half and its tail runs
     long, so a box-centred mark puts the bright crossing right on the
     heading. */
  position: absolute; left: 50%; top: 42%; z-index: -1;
  /* Held well under the pane width: on a phone the star otherwise sits right
     on the invitation instead of behind it. */
  width: min(300px, 46vw); height: auto;
  translate: -50% -50%;
  opacity: .07;
  filter: none;   /* the shared glow smears into a stain at this size */
  pointer-events: none;
  animation: mark-drift 13s ease-in-out infinite;
}
/* One tone, not the mark's two: at this opacity the light half of the star
   stays visible while the accent half sinks into the page, and the shape
   reads as a smudge instead of a star. The face shading still comes from the
   level classes, so it keeps its depth. */
.empty .mark-watermark [class^="b"],
.empty .mark-watermark [class^="l"] { fill: var(--amber); }
@keyframes mark-drift {
  50% { transform: translateY(-12px) rotate(1.5deg); }
}
.empty h2 {
  font-family: var(--nozomi-font-sans);
  color: var(--paper); font-size: var(--nozomi-font-page-title); margin: 0 0 8px;
  font-weight: 600;
}
.empty p { margin: 0 0 14px; font-size: var(--nozomi-font-section-title); }
.empty button { margin-bottom: 16px; }
/* Keep the first action next to the invitation; replies use the bottom composer. */
.messages:has(.empty):not(:has(#retry-connect)) { flex: 0 1 auto; margin-top: auto; padding-bottom: 0; }
.messages:has(.empty):not(:has(#retry-connect)) .empty { margin: 0 auto; padding-block: 32px 24px; }
#view-chat:has(.empty):not(:has(#retry-connect)) #composer { margin-bottom: auto; }
.empty .fig {
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small); letter-spacing: .1em;
  text-transform: uppercase; color: var(--print); opacity: .8;
}

/* loading placeholders: shared nz-skeleton lines, shaped for each region */
.list-skeleton, .keys-skeleton {
  display: flex; flex-direction: column; gap: 12px;
}
.list-skeleton { padding: 8px 12px; }
.log-skeleton {
  flex: none; width: min(100%, var(--chat-width)); margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}

/* --------------------------------------------------------------- composer */
#composer {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 22px 20px;
  max-width: calc(var(--chat-width) + 44px); width: 100%; margin: 0 auto;
}
/* back-to-latest pill: floats just above the composer while scrolled up */
.jump {
  position: absolute; top: -44px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small); letter-spacing: .06em;
  color: var(--paper); background: var(--water-2); border: 1px solid var(--sounding);
  border-radius: var(--nozomi-radius-pill); padding: 5px 13px; cursor: pointer;
}
.jump:hover { border-color: var(--amber); color: var(--amber); }
#composer.drag { outline: 1px dashed var(--amber); outline-offset: 6px; border-radius: var(--radius); }
.editing {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; color: var(--amber); background: var(--water);
  border: 1px solid var(--sounding); border-radius: var(--radius);
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
}
.editing span { flex: 1; }
.editing .link { color: var(--amber); padding: 2px 4px; min-height: 24px; }
.composer-row {
  display: flex; gap: 8px; align-items: flex-end; padding: 8px;
  background: var(--water); border: 1px solid var(--sounding); border-radius: var(--radius);
}
.composer-row:focus-within { border-color: var(--amber); }
#input {
  flex: 1; min-width: 0; min-height: 40px; resize: none; max-height: 200px;
  font-family: inherit; font-size: 15px; line-height: 1.5;
  background: transparent; color: var(--paper); caret-color: var(--amber);
  border: 0; border-radius: var(--radius); padding: 8px 4px;
}
#input::placeholder { color: var(--print); opacity: .7; }
#input:focus { outline: none; border-color: var(--amber); }

/* attach button matches the mono/hairline system, not a loud icon */
.attach {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--print);
  border: 0; border-radius: var(--radius);
}
.attach svg { width: 17px; height: 17px; }
.attach:hover { border-color: var(--amber); color: var(--amber); }

/* attachment chips: nz-badge + tone owns the box; the survey-tag voice,
   trailing-button padding, and width cap stay local */
.attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  gap: 7px; font-family: var(--mono); font-size: var(--nozomi-font-small); color: var(--paper);
  padding: 4px 5px 4px 10px; max-width: 260px;
}
.chip .cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .csize { color: var(--print); }
.chip .cx {
  border: none; background: none; color: var(--print); cursor: pointer;
  font: inherit; padding: 0 2px; line-height: 1;
  min-width: 24px; min-height: 24px;
}
.chip .cx:hover { color: var(--signal-red); }
/* the same chips, read-only, inside a sent user turn */
.msg .files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.msg .files .chip { cursor: default; }

/* ----------------------------------------------------------------- panels */
.panel { padding: 24px 26px; max-width: 720px; overflow-y: auto; }
.panel h3 {
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small); letter-spacing: .16em;
  text-transform: uppercase; color: var(--print); font-weight: 500;
  margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--sounding);
}
.panel label { display: block; margin-bottom: 18px; }
.panel label > span {
  display: block; font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
  color: var(--paper); margin-bottom: 6px;
}
.panel label > span b { color: var(--amber); font-weight: 600; }
.panel small { display: block; color: var(--print); margin-top: 5px; font-size: var(--nozomi-font-control); }
.panel input, .panel select {
  width: 100%; font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-control);
  background: var(--water); color: var(--paper);
  border: 1px solid var(--sounding); border-radius: var(--radius); padding: 9px 10px;
}
.panel input:focus, .panel select:focus { outline: none; border-color: var(--amber); }
.panel input[type="range"] { accent-color: var(--amber); padding: 0; }

/* Settings cards ride nz-card; only rhythm is local. */
.card { padding: 14px 16px; margin-bottom: 18px; }
.card .muted { color: var(--print); margin: 0 0 10px; }
.key-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--sounding);
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
}
.key-row:last-child { border-bottom: none; }
.key-row code { color: var(--print); font-family: var(--mono); }
.key-row .name { font-weight: 600; color: var(--paper); }
.key-row .name { min-width: 0; overflow-wrap: anywhere; }
.key-row .spacer { flex: 1; }
.key-secret-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.secret {
  display: block; font-family: var(--mono); font-size: var(--nozomi-font-small); word-break: break-all;
  background: var(--water-2); border: 1px solid var(--amber); color: var(--paper);
  border-radius: var(--radius); padding: 10px 12px; margin-top: 10px;
}

/* docs read like the report the product produces */
.prose { font-size: var(--nozomi-font-section-title); line-height: 1.7; }
.prose p { max-width: 62ch; margin: 0 0 10px; }
.prose a { color: var(--amber); }
.prose h3 {
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small); letter-spacing: .16em;
  text-transform: uppercase; color: var(--print); font-weight: 500;
  margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--sounding);
}
/* Code sits at the chat log's tighter code leading, not the 1.7 reading
   leading of the surrounding prose, so a curl block stays a block. */
.prose pre {
  position: relative; margin: 0 0 12px; line-height: 1.55;
  background: var(--water); border: 1px solid var(--sounding);
  border-radius: var(--radius); padding: 13px 15px; overflow-x: auto;
}
.prose code { font-family: var(--mono); font-size: var(--nozomi-font-small); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--nozomi-font-body); }
.prose td { border-bottom: 1px solid var(--sounding); padding: 8px 4px; vertical-align: top; }
.prose td:first-child { width: 45%; font-family: var(--mono); font-size: var(--nozomi-font-small); }
.policy {
  width: 100%; max-width: none; margin: 0; padding: 30px 36px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.policy > p:first-of-type:not(.policy-meta) { margin-top: 0; }
.policy .policy-meta {
  margin: 0 0 14px; color: var(--print);
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-label); letter-spacing: .06em;
  text-transform: uppercase;
}
.policy h3 { margin-top: 22px; }
.policy a { color: var(--amber); }

/* -------------------------------------------------------------------- legal
   Policies are rendered from the shared Nozomi source by the root's
   scripts/vendor_legal.py; edit legal/atlas/*.html and re-vendor, never the
   embedded output. The one vendored document serves two ways: a standalone
   page at /terms (body.legal-page) for anyone without the app, and injected
   into the in-app policy overlay. */

/* Inside the overlay the topbar already carries the title, and the body
   scrolls within the card, so the injected heading is hidden and the wide
   standalone measure gives way to the card's own padding. */
#legal-body { padding: 0; overflow-y: auto; }
#legal-body #legal-main { width: 100%; padding: 1.4rem clamp(1.1rem, 4vw, 1.9rem) 2rem; }
#legal-body #legal-main h1 { display: none; }
@media (max-width: 560px) {
  .view:not(#view-chat) { align-items: stretch; justify-content: stretch; padding: 0; }
  .overlay-card {
    width: 100vw; height: 100dvh; max-height: none;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .overlay-card > .topbar { padding-inline: 14px; }
  .overlay-card > .panel { padding: 20px 18px; }
  .overlay-card > .policy { padding: 22px 18px; }
}

@media (max-width: 720px) {
  #app { grid-template-columns: 1fr; }
  /* the sidebar becomes a slide-over drawer behind the topbar menu button */
  #sidebar {
    position: fixed; z-index: 20; top: 0; bottom: 0; left: 0;
    width: min(300px, 84vw);
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 8px 0 30px var(--scrim);
  }
  #sidebar.open { transform: none; }
  #scrim {
    display: block; position: fixed; inset: 0; z-index: 19;
    border: 0; border-radius: 0; padding: 0;
    background: var(--scrim);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  #scrim.show { opacity: 1; pointer-events: auto; }
  .menu-btn { display: inline-flex; }
  .chat-icon, .attach { width: 44px; height: 44px; }
  .menu-btn, .foot-link, .chat-item .title, .chat-item .x, #send { min-height: 44px; }
  .chat-item .x { min-width: 44px; opacity: 1; }
  #input, .panel input:not([type="range"]), .panel select { font-size: 16px; }
  .turn-actions { opacity: 1; }
  .turn-actions button { min-height: 36px; }
  .messages { padding: 20px 14px 6px; }
  #composer { padding: 10px 14px 16px; }
  .msg .body { max-width: none; }
}
@media (max-width: 560px) {
  .topbar { padding-inline: 14px; gap: 8px; }
  .chat-heading { flex: 1; }
  .rename-form { width: 100%; }
  #view-chat .topbar.renaming .chat-tools { display: none; }
  .composer-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: end;
  }
  .attach { grid-column: 1; grid-row: 1; }
  #input { grid-column: 2 / 4; grid-row: 1; }
  .model-picker { grid-column: 2; grid-row: 2; justify-self: start; }
  #send { grid-column: 3; grid-row: 2; }
  .composer-row:has(.model-picker[hidden]) #input { grid-column: 2; }
  .composer-row:has(.model-picker[hidden]) #send { grid-row: 1; }
  #keys-box .key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #keys-box .key-row .name { grid-column: 1 / -1; }
  #keys-box .key-row .spacer { display: none; }
}
/* ------------------------------------------------------- model selector */
.model-picker {
  min-width: 0; flex: 0 1 auto; margin-left: auto;
  display: flex; align-items: center;
}
#model-select {
  appearance: none;
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
  color: var(--paper); background: var(--water);
  border: 1px solid var(--sounding); border-radius: var(--radius);
  /* Wide enough for a served model's own name plus the default marker; the
     names come from the backends now, so they are longer than a slug. */
  min-width: 130px; max-width: min(290px, 32vw); min-height: 40px;
  padding: 4px 28px 4px 12px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--print) 50%),
                    linear-gradient(135deg, var(--print) 50%, transparent 50%);
  background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
#model-select:hover { border-color: var(--amber); }
#model-select:focus { outline: none; border-color: var(--amber); }
#model-select option { background: var(--water); color: var(--paper); }

@media (max-width: 560px) {
  #model-select { min-width: 0; width: min(250px, 64vw); max-width: 100%; }
}

/* ------------------------------------------------------ reasoning channel */
.thinking {
  width: fit-content; max-width: 86ch; margin: 0 0 10px;
  color: var(--print);
}
.thinking[open] { width: min(100%, 86ch); }
.thinking summary {
  width: fit-content; display: flex; align-items: center; gap: 7px;
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
  color: var(--print);
  cursor: pointer; list-style: none; padding: 3px 0;
}
.thinking summary::-webkit-details-marker { display: none; }
.thinking summary::before {
  content: ''; width: 6px; height: 6px; flex: 0 0 auto;
  border: 1px solid currentColor; transform: rotate(45deg);
}
.thinking[open] summary::before { background: currentColor; }
.thinking summary:hover { color: var(--amber); opacity: 1; }
.think-state {
  font-size: var(--nozomi-font-label); letter-spacing: .08em; opacity: .72;
}
.think-body {
  font-family: var(--mono); font-size: var(--nozomi-font-small); line-height: 1.6;
  color: var(--print); white-space: pre-wrap; overflow-wrap: anywhere;
  margin-top: 5px; padding: 5px 0 7px 13px;
  border-left: 1px solid var(--sounding);
}
.thinking.is-streaming {
  width: min(100%, 86ch); padding: 8px 11px 10px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--water) 82%, transparent),
    color-mix(in srgb, var(--water) 42%, transparent));
  border: 1px solid color-mix(in srgb, var(--sounding) 82%, transparent);
  border-radius: var(--radius);
}
.thinking.is-streaming summary { padding: 0; color: var(--amber); opacity: .9; }
.thinking.is-streaming summary::before { background: currentColor; }
.thinking.is-streaming .think-body { margin-top: 7px; padding-bottom: 1px; }
.thinking.is-streaming summary::before { animation: reasoning-pulse 1.35s ease-in-out infinite; }
@keyframes reasoning-pulse { 50% { opacity: .28; transform: rotate(45deg) scale(.72); } }

/* ---------- Reduced motion (consolidated) ----------
   Every animation/transition in this sheet is disabled here, mirroring the
   shared sheet's single block; the nz-* classes bring their own coverage in
   nozomi-ui.css. New motion features add their reduce path to this block. */
@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
  .cursor::after { animation: none; }
  .thinking.is-streaming summary::before { animation: none; }
  .empty .mark-watermark { animation: none; }
  .turn-actions { transition: none; }
  #sidebar, #scrim { transition: none; }
}

/* ------------------------------------------------------------------- gate
   The signed-out face. Atlas, Sakura and Fuji are products of the same house
   and their public pages are composed the same way: masthead, two-column hero
   with the product's own standard stated beside the claim, three steps, one
   access card. Only the palette, the motif and the copy are Atlas's. Type here
   runs larger than the chat scale on purpose -- this page is read once, at
   arm's length, by someone who has not signed in yet. */
body.signed-out { height: auto; min-height: 100%; }
#gate { position: relative; }
/* The shared node graph is drawn in a 220x120 field. Stretched over this
   panel it scales ~7x, so its edges land as bars and its nodes sit on the step
   copy. Atlas keeps it to the panel's top strip and lets it fit rather than
   crop, which is the small constellation the motif is meant to be. Both rules
   are #gate-scoped, because the preflight's `.nz-base svg` outranks the bare
   class and would silently keep the graph on. */
#gate .nz-gate-graph { height: 52%; }
@media (max-width: 960px) {
  /* Below 960 the steps stack, so the panel is a tall column with no free
     band and the graph would draw straight through the step copy. */
  #gate .nz-gate-graph { display: none; }
}
/* Atlas's motif: depth contours on a survey chart, massed behind the hero and
   capped near the fold. Blurred as one field rather than per ring, and static
   -- the chart is drawn, not falling. */
.chart-field {
  position: fixed; inset: 0 0 auto; height: min(92vh, 1000px);
  z-index: 0; overflow: hidden; pointer-events: none; filter: blur(1px); opacity: .5;
}
.chart-field i {
  position: absolute; top: var(--sounding-y); left: 50%;
  width: var(--sounding-size); aspect-ratio: 1.6;
  translate: calc(-50% + var(--sounding-x)) -50%;
  border: 1px solid var(--nozomi-accent-border); border-radius: 50%;
  opacity: var(--sounding-opacity);
}
.chart-field i:nth-child(1) { --sounding-size: 22rem; --sounding-x: 18rem; --sounding-y: 12%; --sounding-opacity: .55; }
.chart-field i:nth-child(2) { --sounding-size: 34rem; --sounding-x: 21rem; --sounding-y: 13%; --sounding-opacity: .4; }
.chart-field i:nth-child(3) { --sounding-size: 48rem; --sounding-x: 25rem; --sounding-y: 15%; --sounding-opacity: .26; }
.chart-field i:nth-child(4) { --sounding-size: 64rem; --sounding-x: 30rem; --sounding-y: 17%; --sounding-opacity: .16; }

#backend-pool-options { border:0; padding:0; margin:0; min-width:0; }
#backend-pool-options legend { padding:0; margin-bottom:4px; color: var(--print); font-size: var(--nozomi-font-control); }
/* Override the generic .panel label/span/input rules: those stack a label
   above a full-width field, which left each checkbox detached from its name. */
#backend-pool-options label { display:flex; align-items:center; gap:10px; margin:0; cursor:pointer; }
#backend-pool-options label > span { display:inline; margin:0; color: var(--paper); font-size: var(--nozomi-font-control); }
#backend-pool-options input[type="checkbox"] { width:16px; height:16px; padding:0; flex:none; accent-color: var(--amber); }
#backend-pool-options .unavailable { color: var(--print); }
#admin-backends > h3:first-child { margin-top: 0; }
.admin-badge { margin-left: 8px; vertical-align: middle; letter-spacing: .04em; text-transform: none; }

.backend-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 8px; border-bottom: 1px solid var(--sounding); }
.backend-row:last-child { border-bottom: 0; }
.backend-row label { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.backend-row select { width: auto; max-width: 100%; }

/* --------------------------------------------------------- agent run blocks
   A round reads top to bottom: reasoning, the call, its result. The call and
   the result that follows it are drawn as one stacked block so the pair is read
   as a unit, and a long result starts folded behind its line count. */
.tool-call, .tool-output { max-width: 86ch; margin: 0 0 10px; }
.tool-kind {
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-label);
  letter-spacing: .08em; text-transform: uppercase; color: var(--print);
}
.tool-call > .tool-kind { display: block; color: var(--amber); opacity: .85; margin-bottom: 4px; }
.tool-call > pre, .tool-output > pre, .tool-output > summary + pre { margin: 0 !important; }
/* The result belongs to the call above it: join them into one block. */
.tool-call:has(+ .tool-output) { margin-bottom: 0; }
.tool-call:has(+ .tool-output) > pre { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tool-call + .tool-output > pre,
.tool-call + .tool-output > summary + pre {
  border-top: 1px dashed var(--sounding); border-top-left-radius: 0; border-top-right-radius: 0;
}
.tool-output > pre, .tool-output > summary + pre { max-height: 24em; overflow: auto; background: var(--water-2); }
.tool-output > summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none; padding: 5px 12px;
  background: var(--water-2); border: 1px solid var(--sounding); border-radius: var(--radius);
}
.tool-call + .tool-output > summary { border-top: 1px dashed var(--sounding); border-radius: 0 0 var(--radius) var(--radius); }
.tool-output[open] > summary { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tool-output > summary::-webkit-details-marker { display: none; }
.tool-output > summary:hover { color: var(--amber); }
.tool-output > summary:hover .tool-kind { color: var(--amber); }
.tool-size { font-family: var(--mono); font-size: var(--nozomi-font-small); color: var(--print); }
.tool-output > summary::after {
  content: 'show'; margin-left: auto;
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--print);
}
.tool-output[open] > summary::after { content: 'hide'; }
/* Waiting for the first token: the reply exists but has nothing in it yet. */
.waiting {
  font-family: var(--nozomi-font-sans); font-size: var(--nozomi-font-small);
  color: var(--print); animation: waiting-pulse 1.4s ease-in-out infinite;
}
@keyframes waiting-pulse { 50% { opacity: .4; } }