/* Layouts for the four levels: chat and recap, sessions, the session
   inspector and the Library. Built on the surfaces in base.css. */

/* The sidebar: the user's threads and applications on every page, closed by
   default. The button sits left of the brand and is the first tab stop; the
   panel is a 260px --panel column under the header from 900px, and a raised
   sheet over a scrim below it. Only roles that already exist: --panel for the
   column, --raised and --shadow-md for the sheet that floats, --sunken for the
   thread the page is showing, --hover for a row. */
.sidebar-toggle { margin-right: -12px; }
.sidebar { position: fixed; z-index: 30; top: 56px; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 24px; width: 260px; padding: 20px 12px 24px; overflow-y: auto; background: var(--panel); border-radius: 0 var(--radius-2xl) 0 0; }
.sidebar-top { display: none; }
.sidebar-top-title { flex: 1; min-width: 0; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.sidebar-section { display: flex; flex-direction: column; gap: 2px; }
.sidebar-heading { margin: 0 0 2px; padding: 0 12px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.sidebar-list { margin: 0; padding: 0; list-style: none; }
.sidebar-row { display: flex; align-items: center; gap: 4px; border-radius: var(--radius-sm); }
.sidebar-row:hover { background: var(--hover); }
.sidebar-link { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 6px 4px 6px 12px; border-radius: var(--radius-sm); color: var(--foreground); font-size: 14px; font-weight: 400; text-decoration: none; }
.sidebar-link:focus-visible { outline: none; box-shadow: var(--focus); }
.sidebar-row.current { background: var(--sunken); }
.sidebar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-new { margin-top: 2px; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; text-decoration: none; }
.sidebar-new:hover { background: var(--hover); color: var(--foreground); }
/* The one place a thread can be deleted: its edit page, under the form, as a
   text button — a destructive action is not the page's primary. */
.thread-danger { max-width: 640px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.thread-danger h2 { margin: 0 0 6px; font-size: 15px; }
.thread-danger p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; }
.thread-danger form { margin: 0; }
.sidebar-empty { margin: 0; padding: 6px 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
/* The account menu at the panel's foot: who you are signed in as, and the
   accounts there are to switch to. It is pinned to the bottom rather than in
   the flow of threads, applications and the Library, and it opens upward over
   the content: a disclosure, floating on --raised with the menu shadow, that
   closes back to the row it came from. */
.sidebar-account { position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); background: inherit; }
.sidebar-account-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px 6px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--foreground); cursor: pointer; font: 400 14px var(--font); text-align: left; }
.sidebar-account-trigger:hover { background: var(--hover); }
.sidebar-account-trigger:focus-visible { outline: none; box-shadow: var(--focus); }
.sidebar-account-trigger .sidebar-name { flex: 1; }
.sidebar-account-chevron { flex: none; width: 16px; height: 16px; color: var(--faint); }
.sidebar-account-menu { position: absolute; right: 0; bottom: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; padding: 6px; overflow-y: auto; border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-md); }
.sidebar-account-menu form { display: contents; margin: 0; }
.sidebar-account-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--foreground); cursor: pointer; font: 400 14px var(--font); text-align: left; text-decoration: none; }
.sidebar-account-item:hover:not(.current) { background: var(--hover); }
.sidebar-account-item:focus-visible { outline: none; background: var(--hover); box-shadow: var(--focus); }
.sidebar-account-item.current { background: var(--sunken); color: var(--muted); cursor: default; font-weight: 500; }
.sidebar-account-item:disabled { cursor: default; opacity: .5; }
.sidebar-account-note { margin: 2px 4px 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.sidebar-scrim { position: fixed; z-index: 25; inset: 0; background: var(--scrim); }
html.sidebar-scroll-lock, html.sidebar-scroll-lock body { overflow: hidden; }

/* Open, the column takes its width out of the page frame and the content is
   centred in what is left; the header keeps its full width, so the toggle stays
   where the eye left it. */
/* The page gives up the panel's width, and what is left over once the column is
   at its max-width is split between the two sides. Both halves matter: an offset
   all on the left kept the column's left edge out of the panel and pushed its
   right edge past the viewport. Percentages, not 100vw, so a scrollbar is not
   counted twice. */
@media (min-width: 900px) {
  .sidebar-open .page-container {
    width: calc(100% - 260px);
    margin-left: calc(260px + max(0px, (100% - 260px - 1180px) / 2));
  }
  .sidebar-open .chat-container {
    width: calc(100% - 260px);
    margin-left: calc(260px + max(0px, (100% - 260px - 800px) / 2));
  }
}
/* Below the column's width the panel is a sheet over the page: it cannot push
   anything, so the page never gains a horizontal scroll from it. */
@media (max-width: 899px) {
  .sidebar { top: 0; z-index: 45; width: min(320px, 86vw); padding-top: 8px; background: var(--raised); box-shadow: var(--shadow-md); }
  .sidebar-top { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px 12px; }
  .sidebar-scrim { z-index: 44; }
}

/* Level 1 — chat */
.chat-page { display: flex; flex-direction: column; min-height: 100dvh; }
.chat-container { display: flex; flex: 1; flex-direction: column; max-width: 800px; padding-top: 24px; padding-bottom: 0; }
#chat { display: flex; flex: 1; flex-direction: column; min-width: 0; }
#chat-messages { flex: 1; min-width: 0; padding-bottom: 8px; }
.chat-empty { margin: 14vh 0 32px; text-align: center; }
.chat-empty .eyebrow { margin-bottom: 8px; }
.chat-empty h2 { margin: 0 0 10px; font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.chat-empty p { max-width: 30rem; margin: 0 auto; font-size: 15px; line-height: 1.65; }
.chat-message { min-width: 0; max-width: 100%; margin: 0 0 28px; overflow-wrap: anywhere; scroll-margin: 90px; transition: background-color .4s, box-shadow .4s; }
.chat-text { line-height: 1.7; white-space: pre-wrap; }
.chat-message--user { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.chat-message--user .chat-text { width: fit-content; max-width: min(85%, 600px); padding: 10px 16px; border-radius: 20px; background: var(--sunken); }
.chat-message--user .chat-meta { justify-content: flex-end; }
.chat-message--system { color: var(--muted); font-size: 13px; }
.chat-message--system .chat-text { white-space: normal; }
.chat-flash { border-radius: var(--radius-lg); background: var(--hover); box-shadow: 0 0 0 10px var(--hover); }
.chat-meta { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; opacity: 0; transition: opacity .15s; }
.chat-message:hover .chat-meta, .chat-message:focus-within .chat-meta { opacity: 1; }
.chat-timestamp { color: var(--faint); font-size: 12px; }
.copy-link { padding: 0; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 12px; font-weight: 500; text-decoration: none; }
a.copy-link, a.copy-link:visited { color: var(--faint); text-decoration: none; }
.copy-link:hover, a.copy-link:hover { color: var(--foreground); }
.chat-display { min-width: 0; }
.chat-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chat-message--user .chat-attachments { justify-content: flex-end; }
.chat-image { display: block; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--ring); cursor: zoom-in; }
.chat-image img { display: block; max-width: min(360px, 100%); max-height: 260px; object-fit: contain; }
.chat-file, .chat-link-card { display: inline-flex; flex-direction: column; gap: 2px; min-width: 200px; max-width: 100%; padding: 10px 14px; border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 500; text-decoration: none !important; overflow-wrap: anywhere; transition: box-shadow .15s; }
.chat-file:hover, .chat-link-card:hover { box-shadow: var(--shadow-md); }
button.chat-file { border: 0; color: var(--foreground); cursor: pointer; text-align: left; }
.chat-file .muted, .chat-link-host { color: var(--muted); font-size: 12px; font-weight: 400; }
.chat-link-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-library { margin-top: -12px; }
.chat-library-link { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: 99px; background: var(--sunken); color: var(--muted); font-size: 12.5px; text-decoration: none !important; }
a.chat-library-link:hover { background: var(--active); color: var(--foreground); }
.chat-library-label { color: var(--foreground); font-weight: 500; }
.chat-library-label::before { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--foreground); content: ''; vertical-align: 1px; }

/* Composer: a raised card holding the field and its actions. */
.composer-dock { position: sticky; bottom: 0; padding: 8px 0 max(16px, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, color-mix(in srgb, var(--canvas) 0%, transparent), var(--canvas) 22px); }
#chat-composer { display: flex; flex-direction: column; border-radius: var(--radius-xl); background: var(--raised); box-shadow: var(--shadow-md); transition: box-shadow .15s; }
#chat-composer:focus-within { box-shadow: var(--shadow-md), var(--focus); }
#chat-content { min-height: 56px; max-height: 40dvh; padding: 16px 18px 6px; border: 0; background: transparent; box-shadow: none; font-size: 15px; resize: none; }
#chat-content:focus { box-shadow: none; }
.composer-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 10px; }
.composer-spacer { flex: 1; }
.send-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); cursor: pointer; transition: background .15s, opacity .15s; }
.send-button:hover:not(:disabled) { background: var(--primary-hover); }
.send-button:disabled { cursor: default; opacity: .35; }
.send-button .icon { width: 17px; height: 17px; stroke-width: 2.25; }
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 14px 0; list-style: none; }
.chat-file-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 10px; border-radius: 8px; background: var(--sunken); font-size: 12.5px; }
.chat-file-chip button { display: inline-flex; padding: 2px; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.chat-file-chip button:hover { background: var(--active); color: var(--foreground); }
/* The footer keeps two rows: status and controls share the first, and the
   session list owns the second so it can wrap without moving them. */
.chat-activity { display: flex; flex-direction: column; gap: 4px; min-height: 22px; margin-top: 10px; padding: 0 6px; color: var(--muted); font-size: 12.5px; }
.chat-status-row { display: flex; align-items: center; gap: 12px; }
.chat-work:empty { display: none; }
#chat-status { display: inline-flex; align-items: center; gap: 7px; }
#chat-status::before { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); content: ''; }
#chat-status[data-state="queued"]::before, #chat-status[data-state="running"]::before, #chat-status[data-state="stopping"]::before { background: var(--foreground); animation: kyoi-pulse 1.4s infinite; }
#chat-status[data-state="error"]::before, #chat-status[data-state="blocked"]::before { background: #e5484d; }
.chat-work a { color: var(--foreground); font-weight: 500; text-decoration: none; }
.chat-work a:hover { text-decoration: underline; }
.chat-tools { display: inline-flex; gap: 2px; margin-left: auto; }
.chat-upload-link { padding: 3px 8px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font-size: 12.5px; font-weight: 500; }
.chat-upload-link:hover { background: var(--hover); color: var(--foreground); }
.chat-upload-link[aria-expanded="true"] { background: var(--active); color: var(--foreground); }
a.chat-upload-link { text-decoration: none; }
#chat-error:not([hidden]) { margin: 8px 6px; color: var(--muted); font-size: 13px; }

/* Markdown in messages and session views */
.chat-markdown { white-space: normal; }
.chat-markdown > :first-child { margin-top: 0; }
.chat-markdown > :last-child { margin-bottom: 0; }
.chat-markdown p, .chat-markdown ul, .chat-markdown ol, .chat-markdown blockquote, .chat-markdown pre, .chat-markdown table { margin: 0 0 12px; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4 { margin: 22px 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.chat-markdown h1 { font-size: 19px; }
.chat-markdown h2 { font-size: 17px; }
.chat-markdown ul, .chat-markdown ol { padding-left: 22px; }
.chat-markdown li + li { margin-top: 3px; }
.chat-markdown blockquote { padding-left: 14px; box-shadow: inset 2px 0 0 var(--line-strong); color: var(--muted); }
.chat-markdown code { padding: 2px 5px; border-radius: 5px; background: var(--sunken); font-size: .86em; }
.chat-markdown pre { overflow-x: auto; padding: 14px 16px; border-radius: var(--radius); background: var(--sunken); font-size: 13px; line-height: 1.6; white-space: pre; tab-size: 4; }
.chat-markdown pre code { padding: 0; background: none; font-size: inherit; }
.chat-markdown hr { margin: 24px 0; border: 0; border-top: 1px solid var(--line); }
.chat-markdown table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.chat-markdown th, .chat-markdown td { min-width: 90px; padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.chat-markdown th { color: var(--muted); font-weight: 500; }

/* Recap: a floating drawer, docked beside the chat on wide screens. */
.recap { position: fixed; z-index: 40; top: 64px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 14px; width: min(380px, calc(100vw - 16px)); padding: 18px; overflow-y: auto; border-radius: var(--radius-xl); background: var(--raised); box-shadow: var(--shadow-lg); }
.recap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.recap-head h2 { font-size: 16px; }
.recap-head p { margin: 2px 0 0; font-size: 12.5px; }
.recap-backdrop { position: fixed; z-index: 35; inset: 0; background: var(--scrim); }
#recap-filter { min-height: 36px; background: var(--panel); box-shadow: none; font-size: 14px; }
#recap-filter:focus { box-shadow: var(--focus); }
.recap-section h3 { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; padding: 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.recap-list { margin: 0; padding: 0; list-style: none; }
.recap-list > li { padding: 8px; border-radius: var(--radius); }
.recap-list > li:hover { background: var(--panel); }
.recap-link { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-decoration: none !important; }
button.recap-link { width: 100%; padding: 0; border: 0; background: none; color: var(--foreground); cursor: pointer; text-align: left; }
.recap-link-label { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.recap-link-host { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.recap-display { display: flex; flex-direction: column; gap: 1px; }
.recap-meta { padding: 0; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 11.5px; text-align: left; }
.recap-meta:hover { color: var(--foreground); }
.recap-actions { display: flex; gap: 4px; margin: 4px 0 0 -8px; }
.recap-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 8px; }
.recap-image { aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); background: var(--sunken); cursor: zoom-in; }
.recap-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.recap-image:hover img { transform: scale(1.04); }
.recap-empty { padding: 0 8px; font-size: 13.5px; line-height: 1.6; }
@media (min-width: 1300px) {
  .recap-open .chat-container { margin-left: max(24px, calc((100vw - 400px - 800px) / 2)); margin-right: 400px; }
}

/* Viewer: one dialog for images, displays and stored text files. */
html.lightbox-open, html.lightbox-open body { overflow: hidden; }
.lightbox { position: fixed; z-index: 60; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(9, 9, 11, .88); backdrop-filter: blur(6px); }
.lightbox-frame { display: flex; flex-direction: column; width: min(1100px, 100%); max-height: calc(100vh - 48px); min-height: 0; }
.lightbox-head { display: flex; flex: none; align-items: center; gap: 8px; padding-bottom: 10px; }
.lightbox-caption { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: #e4e4e7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-download { flex: none; padding: 6px 12px; border-radius: var(--radius); background: rgba(255, 255, 255, .12); color: #fafafa; font-size: 13px; font-weight: 500; text-decoration: none !important; }
.lightbox-download:hover { background: rgba(255, 255, 255, .2); }
.lightbox-download:focus-visible { outline: 2px solid #fafafa; outline-offset: 2px; }
.lightbox-close { color: #fafafa; }
.lightbox-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lightbox-body { display: flex; align-items: center; justify-content: center; min-height: 0; }
.lightbox-body img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: var(--radius); object-fit: contain; }
.lightbox-display { width: 100%; max-height: calc(100vh - 120px); padding: 24px; overflow: auto; border-radius: var(--radius-xl); background: var(--raised); box-shadow: var(--shadow-lg); }
.lightbox--file .lightbox-body { display: block; flex: 1; padding: 28px 32px; overflow: auto; border-radius: var(--radius-xl); background: var(--raised); box-shadow: var(--shadow-lg); }
.lightbox-text { min-height: 0; }
.lightbox-code { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.lightbox-note { margin: 0; color: var(--muted); font-size: 14px; }

/* Level 2 — sessions: one section per thread, its days underneath. The section
   head is the thread's name, what it is doing and where its own steps are; the
   rows inside are the rows the page always had. */
.thread-group { margin-bottom: 40px; }
.thread-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 12px 6px; }
.thread-group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; min-width: 0; }
.thread-group-title h2 { margin: 0; font-size: 17px; letter-spacing: -.012em; }
.thread-group-title h2 a { color: var(--foreground); text-decoration: none; }
.thread-group-title h2 a:hover { text-decoration: underline; }
.thread-group-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.thread-group-steps { flex: none; color: var(--muted); font-size: 13px; text-decoration: none; }
.thread-group-steps:hover { color: var(--foreground); }
.thread-group-purpose { max-width: 78ch; margin: 0 0 14px; padding: 0 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.session-day-label { margin: 0 0 6px; padding: 0 12px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.session-day { margin-bottom: 20px; }
.session-rows { margin: 0; padding: 0; list-style: none; }
.session-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 12px; border-radius: var(--radius); text-decoration: none !important; transition: background .12s; }
.session-row:hover { background: var(--panel); }
.session-row .status-dot { transform: translateY(-1px); }
.session-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.session-row-title { font-weight: 500; }
.session-row-brief { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 13.5px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.session-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.session-state { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.session-origin { color: var(--muted); font-size: 12.5px; }
.session-row.active .session-state { color: var(--foreground); }
.status-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.status-dot.idle { background: #a1a1aa; }
.status-dot.running, .status-dot.queued { background: #30a46c; box-shadow: 0 0 0 3px color-mix(in srgb, #30a46c 22%, transparent); animation: kyoi-pulse 1.6s infinite; }
.status-dot.error { background: #e5484d; }
@keyframes kyoi-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .status-dot.running, .status-dot.queued, #chat-status::before { animation: none !important; } }

/* Session page */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--foreground); }
.crumbs span[aria-hidden] { color: var(--faint); }
.session-header { margin-bottom: 24px; }
.session-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.session-title-row h1 { margin-bottom: 8px; }
.session-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 20px; color: var(--muted); font-size: 13.5px; }
.session-meta > span:nth-child(odd):not(:first-child) { color: var(--faint); }
/* What the session has cost, one line: the two meters and the tokens behind the
   model half of it. A live sandbox says so, because its number still moves. */
.session-bill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -10px 0 20px; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.session-bill > span:nth-child(even) { color: var(--faint); }
.session-bill a { color: inherit; }
.session-bill-live { padding: 1px 6px; border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* The ledger's money columns line up and never wrap mid-number. */
.amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabs { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; border-radius: 12px; background: var(--sunken); }
.tabs a { flex-shrink: 0; padding: 5px 12px; border-radius: 9px; color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background .12s, color .12s; }
.tabs a:hover { color: var(--foreground); }
.tabs a[aria-current] { background: var(--raised); box-shadow: var(--shadow-sm); color: var(--foreground); }
/* A narrow strip wraps instead of scrolling: a scrolling strip can put the
   current tab off-screen, and showing where you are is the strip's whole job. */
@media (max-width: 480px) {
  .tabs { flex-wrap: wrap; overflow: visible; }
}
.session-notice { font-size: 13px; }
.session-footnote { margin-top: 24px; font-size: 13.5px; }

.timeline { max-width: 860px; margin: 0; padding: 0; list-style: none; }
.timeline > li { margin: 0 0 20px; }
.timeline-label { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.timeline-label time { color: var(--faint); font-weight: 400; font-variant-numeric: tabular-nums; }
.timeline-label a { color: var(--foreground); text-decoration: none; }
.timeline-label a:hover { text-decoration: underline; }
.timeline-body { line-height: 1.7; }
.timeline-item.timeline-user .timeline-body, .timeline-visible .timeline-body { padding: 14px 18px; border-radius: var(--radius-lg); background: var(--panel); }
.timeline-you .timeline-body { background: var(--sunken); }
.timeline-visible .timeline-label { color: var(--foreground); }
.timeline-notice { margin: 0; color: var(--muted); font-size: 13.5px; }
.timeline-file { margin: 6px 0 0; font: 12.5px/1.6 var(--mono); }
.timeline-item:target .timeline-body { box-shadow: var(--focus); }
.timeline-tools > details > summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 100%; padding: 6px 12px 6px 10px; border-radius: 99px; background: var(--sunken); cursor: pointer; font-size: 13px; list-style: none; transition: background .12s; }
.timeline-tools > details > summary::-webkit-details-marker { display: none; }
.timeline-tools > details > summary::before { display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); content: ''; transform: rotate(-45deg); transition: transform .15s; }
.timeline-tools > details[open] > summary::before { transform: rotate(45deg) translate(-2px, -1px); }
.timeline-tools > details > summary:hover { background: var(--active); }
.timeline-tools-count { font-weight: 500; }
.timeline-tools-names, .timeline-tools-time { color: var(--muted); }
.timeline-tools .badge { height: 18px; background: color-mix(in srgb, #e5484d 14%, transparent); }
.tool-calls { margin: 8px 0 0; padding: 4px; border-radius: var(--radius-lg); background: var(--panel); list-style: none; }
.tool-call > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; list-style: none; }
.tool-call > summary::-webkit-details-marker { display: none; }
.tool-call > summary:hover, .tool-call[open] > summary { background: var(--panel-hover); }
.tool-name { font: 500 12.5px/1.7 var(--mono); }
.tool-summary { overflow: hidden; color: var(--muted); font: 12.5px/1.7 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.tool-status { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tool-call.failed .tool-status { color: #e5484d; }
.tool-detail { padding: 2px 10px 12px; }
.tool-detail h4, .trace-body h4 { margin: 12px 0 6px; color: var(--muted); font-size: 12px; font-weight: 500; }
.tool-detail .code-block, .trace-body .code-block { max-height: 420px; }
.timeline-working { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; }
.session-composer { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px; max-width: 860px; margin-top: 24px; padding: 6px 6px 6px 4px; border-radius: var(--radius-xl); background: var(--raised); box-shadow: var(--shadow-md); }
.session-composer textarea { flex: 1; min-height: 44px; max-height: 30dvh; padding: 10px 12px; border: 0; background: transparent; box-shadow: none !important; resize: none; }
.session-composer .button { border-radius: 14px; }
.session-error { color: var(--muted); font-size: 13px; }

/* Level 3 — trace, prompt, files, changes, terminal */
.trace { margin: 0; padding: 4px; border-radius: var(--radius-lg); background: var(--panel); list-style: none; }
.trace-row > details > summary { display: grid; grid-template-columns: 64px 60px 150px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; list-style: none; }
.trace-row > details > summary::-webkit-details-marker { display: none; }
.trace-row > details > summary:hover, .trace-row > details[open] > summary { background: var(--panel-hover); }
.trace-offset, .trace-stats { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trace-kind { justify-self: start; padding: 1px 7px; border-radius: 99px; background: var(--sunken); color: var(--muted); font-size: 11px; font-weight: 500; }
.trace-model .trace-kind { background: var(--foreground); color: var(--raised); }
.trace-name { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.trace-detail { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.trace-row.failed .trace-name { color: #e5484d; }
.trace-body { padding: 0 10px 14px; }
.prompt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0 0 32px; }
.prompt-stats div { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--panel); }
.prompt-stats dt { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.prompt-stats dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; }
.prompt-section { margin-bottom: 32px; }
.prompt-section h2 { margin-bottom: 4px; }
.prompt-section > p { margin: 0 0 12px; font-size: 13.5px; }
.prompt-list, .prompt-tools { margin: 0; padding: 4px; border-radius: var(--radius-lg); background: var(--panel); list-style: none; }
.prompt-list li, .prompt-tools li { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.6; }
.prompt-tools li:hover { background: var(--panel-hover); }
.prompt-tools summary { cursor: pointer; }
.prompt-tools .code-block { margin-top: 8px; }
.prompt-text { max-height: none; }
.file-crumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; color: var(--faint); }
.file-crumbs a { color: var(--foreground); text-decoration: none; }
.file-crumbs a:hover { text-decoration: underline; }
.file-table td { white-space: nowrap; }
.file-table td a { text-decoration: none; }
.file-actions { margin: 0 0 12px; font-size: 13.5px; }
.file-actions a { color: var(--muted); text-decoration: none; }
.file-view { max-height: none; white-space: pre; }
.changes-form { display: flex; gap: 8px; margin-bottom: 24px; }
.changes-form .input { flex: 1; max-width: 520px; }
.repo { margin-bottom: 32px; }
.repo h2 { margin-bottom: 10px; font: 500 13.5px/1.5 var(--mono); }
.repo .code-block + .code-block, .repo details { margin-top: 8px; }
.repo details summary { cursor: pointer; color: var(--muted); font-size: 13.5px; }
.diff { max-height: 70vh; white-space: pre; }
.diff-file { font-weight: 600; }
.diff-meta, .diff-hunk { color: var(--muted); }
.diff-add { background: color-mix(in srgb, #30a46c 14%, transparent); }
.diff-del { background: color-mix(in srgb, #e5484d 12%, transparent); }
.terminal-frame { height: 68vh; min-height: 320px; padding: 12px; overflow: hidden; border-radius: var(--radius-lg); background: var(--terminal-background); box-shadow: var(--shadow-sm); }

/* Level 4 — Library */
.library-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: start; gap: 40px; }
.library-nav { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 1px; }
.library-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 10px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.library-nav a:hover { background: var(--hover); color: var(--foreground); }
.library-nav a[aria-current] { background: var(--sunken); color: var(--foreground); }
.library-nav .count { background: transparent; color: var(--faint); }
.library-main { min-width: 0; max-width: 900px; }
.context-card { display: grid; gap: 16px; margin-bottom: 28px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--panel); }
.context-card h2 { margin-bottom: 4px; }
.context-card p { margin: 0; font-size: 14px; line-height: 1.6; }
.context-card a { font-size: 14px; font-weight: 500; text-decoration: none; }
.context-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.account-card .context-stats { margin-bottom: var(--space-4); }
/* .help tucks under a heading (-6px); after the tiles it starts at the gap. */
.account-card .context-stats + .help { margin-top: 0; }
.context-stats div { flex: 1; min-width: 140px; padding: 12px 14px; border-radius: var(--radius); background: var(--raised); box-shadow: var(--ring); }
.context-stats dt, .context-stats dt a { color: var(--muted); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.context-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.context-stats dd .muted { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 40px; }
.library-card { display: block; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--panel); text-decoration: none !important; transition: box-shadow .15s, transform .15s; }
.library-card:hover { background: var(--panel-hover); }
.library-card h3 { margin: 0 0 4px; font-size: 15px; }
.library-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.library-activity { margin-top: 36px; }
.library-activity h2 { margin-bottom: 12px; }
.library-activity .section-heading a { color: var(--muted); font-size: 13.5px; text-decoration: none; }
.event-list, .entity-list { margin: 0; padding: 4px; border-radius: var(--radius-lg); background: var(--panel); list-style: none; }
.event-list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.event-list > li:hover, .entity-list > li:hover { background: var(--panel-hover); }
.event-list .badge { height: 20px; }
.event-who, .event-who a { font-weight: 500; text-decoration: none; }
.event-action { color: var(--muted); }
.event-list .mono { text-decoration: none; }
.event-time { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.event-reason { flex-basis: 100%; margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.entity-list > li { padding: 12px 14px; border-radius: 8px; }
.entity-name { font-weight: 500; text-decoration: none; }
.entity-content { margin: 4px 0; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.entity-meta { margin: 0; color: var(--faint); font-size: 12.5px; }
.entity-meta a { color: var(--muted); }
.entry-title { overflow-wrap: anywhere; }
.memory-body { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--panel); font-size: 17px; line-height: 1.65; white-space: pre-wrap; }
.library-prose { max-width: 72ch; line-height: 1.75; }
.library-image img { max-width: 100%; max-height: 70vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.kv-value { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.wide-form { max-width: 800px; }
.application-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.application-list > .empty-card { grid-column: 1 / -1; }
.application-card h2 a { text-decoration: none; }
.application-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; font-size: 13.5px; }
.application-controls { min-width: 0; margin: 0; padding: 0; border: 0; }

/* Syntax colours stay quiet: weight and tone, not hue. */
.code-block .hljs-keyword, .code-block .hljs-literal, .code-block .hljs-built_in { font-weight: 600; }
.code-block .hljs-string, .code-block .hljs-regexp { color: color-mix(in srgb, var(--foreground) 72%, #30a46c); }
.code-block .hljs-number, .code-block .hljs-attr, .code-block .hljs-attribute { color: color-mix(in srgb, var(--foreground) 70%, #3e63dd); }
.code-block .hljs-title, .code-block .hljs-section { color: var(--foreground); font-weight: 600; }
.code-block .hljs-comment { color: var(--faint); font-style: italic; }

@media (max-width: 800px) {
  .library-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .library-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .library-nav a { flex-shrink: 0; }
  .session-row { grid-template-columns: 10px minmax(0, 1fr); }
  .session-row-meta { grid-column: 2; flex-direction: row; gap: 10px; align-items: baseline; }
  .trace-row > details > summary { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .trace-kind, .trace-detail { display: none; }
  .session-title-row { flex-direction: column; gap: 0; }
  .chat-meta { opacity: 1; }
  .recap { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 82dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}
.mcp-state { font-weight: 500; }
.mcp-state::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--faint); content: ''; vertical-align: 1px; }
.mcp-state.on::before { background: #30a46c; }
.mcp-state.off::before { background: #f5a524; }
.mcp-state.error::before { background: #e5484d; }
.mcp-description { margin: 8px 0 0; font-size: 13.5px; white-space: pre-wrap; }

.impersonation-banner { position: sticky; top: 56px; z-index: 19; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px clamp(16px, 3vw, 28px); background: color-mix(in srgb, #f5d90a 22%, var(--canvas)); font-size: 13.5px; box-shadow: 0 1px 0 var(--line); }
.impersonation-banner span { min-width: 0; }
.impersonation-banner form { margin: 0; }

/* Credit: a balance, two buttons, and the last few things that moved it. Every
   other control lives in one of the two dialogs (base.css has the dialog). */
.credit-hero { margin-bottom: var(--space-4); padding: 18px 20px; border-radius: var(--radius-lg); background: var(--panel); }
.credit-hero .eyebrow { margin: 0 0 2px; }
.credit-balance { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.credit-held, .credit-meta { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.credit-meta { margin-top: 10px; }
.credit-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.credit-auto-state { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.credit-recent-heading { margin: 28px 0 10px; }
.credit-recent-heading h1 { margin: 0; }
.credit-recent-heading a { color: var(--muted); font-size: 13.5px; text-decoration: none; }
.credit-recent-heading a:hover { color: var(--foreground); }
.credit-rows > li { display: flex; align-items: baseline; gap: 12px; }
.credit-row-note { flex: 1; min-width: 0; }
.credit-row-amount { font-variant-numeric: tabular-nums; }
.credit-row-when { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.pay-method { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--panel); }
.pay-method-text { display: flex; flex: 1; align-items: baseline; gap: 6px; min-width: 0; font-size: 14px; }
.pay-brand { font-weight: 500; text-transform: capitalize; }
.pay-method form { margin: 0; }
.amount-row { display: flex; align-items: stretch; }
.amount-sign { display: inline-flex; align-items: center; padding: 0 10px 0 12px; border-radius: var(--radius) 0 0 var(--radius); background: var(--sunken); color: var(--muted); font-variant-numeric: tabular-nums; }
.amount-input { flex: 1; border-radius: 0 var(--radius) var(--radius) 0; font-size: 17px; font-variant-numeric: tabular-nums; }
.amount-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.switch-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; cursor: pointer; }
.switch-row input { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--primary); }
.switch-text { display: block; font-weight: 500; }
.switch-row .muted { display: block; font-size: 13px; line-height: 1.5; }
.quote { display: grid; gap: 6px; margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.quote > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.quote dt { color: var(--muted); }
.quote dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.quote-total { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.quote-total dt, .quote-total dd { color: var(--foreground); font-weight: 600; }
.quote-note { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.5; }

/* Usage: the operator's page of tables and one chart. Every panel is a section
   with a heading and a description; the chart is the only thing that is not a
   table, and its numbers are in the sentence under it, so the bars are
   decoration and are hidden from assistive technology. */
.usage-section { margin: 0 0 32px; }
.usage-section h2 { margin: 0 0 6px; }
.usage-section > .help { margin: 0 0 12px; }
.usage-section > .help + .help, .usage-section .table-card + .help { margin-top: 10px; }
.usage-sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.usage-spark { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--panel); }
.usage-spark-label { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.usage-spark .help { margin: 10px 0 0; }
.usage-bars { display: flex; align-items: flex-end; gap: 2px; height: 48px; }
.usage-bars > span { flex: 1; min-width: 2px; min-height: 2px; border-radius: 2px; background: var(--line-strong); }