/*
 * ---- The chat's header is the agent, and the agent's space is a sheet from the top (the Founder, 17 October 2026, from Muse) ----
 * Back at the left, Call at the right, the face between them large, lit from above, a dot at its top right, the name under it
 * and one line saying what the agent is doing (chat-head.js). The face and the name open the agent's space, the Agent page
 * as a sheet that comes down from the top of the screen over the chat. Linked after the other chat styles.
 */
.chat-thread-head.chat-head-agent,.chat-panel-head.chat-head-agent{--face:104px;--dot-green:#16c784;--dot-orange:#ff931f;--dot-red:#f04458;position:relative;z-index:2;display:grid;grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);align-items:start;gap:0;padding:10px 12px 14px;border-bottom:0;background:var(--surface,#fff)}
[data-feed-thread] .chat-thread-head.chat-head-agent{padding-top:max(10px,env(safe-area-inset-top,0px))}

/* Back: round, a hairline, the page's own surface, as Muse's. Call keeps its own look and the agent's colour (call-sheet.css). */
.chat-head-agent>:is(.chat-back,.chat-panel-close){box-sizing:border-box;grid-column:1;grid-row:1;justify-self:start;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface,#fff);color:var(--ink,#24212d);display:inline-grid;place-items:center;-webkit-tap-highlight-color:transparent}
.chat-head-agent>:is(.chat-back,.chat-panel-close):focus{outline:none}
.chat-head-agent>:is(.chat-back,.chat-panel-close):focus-visible{outline:2px solid color-mix(in srgb,currentColor 55%,transparent);outline-offset:2px}
.chat-head-end{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:6px;min-width:0}
.chat-head-end .chat-call-tools{display:flex;align-items:center;gap:6px}
.chat-head-agent .chat-call-said{font-size:.8125rem;color:var(--muted)}
.chat-head-end .icon-button:focus{outline:none}
.chat-head-end .icon-button:focus-visible{outline:2px solid color-mix(in srgb,currentColor 55%,transparent);outline-offset:2px}

/* The agent: face, name, line, one column in the middle. */
.chat-head-who{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;min-width:0;max-width:min(62vw,280px);text-align:center}
.chat-head-facewrap{position:relative;display:block;width:var(--face);height:var(--face);margin:2px 0 0}
.chat-head-face-link{position:relative;z-index:1;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;perspective:520px}
.chat-head-face-link:focus{outline:none}
.chat-head-face-link:focus-visible{outline:2px solid color-mix(in srgb,var(--ink,#24212d) 55%,transparent);outline-offset:3px}
.chat-head-tilt{display:block;width:100%;height:100%;border-radius:50%;transform-style:preserve-3d;will-change:transform}
/* Flat, as Muse's: a hairline round the face and no shadow, glow or gloss under or on it (the Founder, 22 October 2026, 21:18:
   "You put a shadow under the emoji that isn't relevant"). */
.chat-head-disc{position:relative;box-sizing:border-box;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--soft,#f2ecfa);border:1px solid rgba(0,0,0,.06);box-shadow:none}
[data-theme=dark] .chat-head-disc{border-color:rgba(255,255,255,.1)}
.chat-head-agent .chat-head-disc :is(.chat-face,.chat-face-agent,.portrait-box,.portrait-box.tiny.chat-head-face,[data-portrait]){display:block;width:100%!important;height:100%!important;min-width:0!important;border-radius:50%!important;border:0}
.chat-head-agent .chat-head-disc img,.chat-head-agent .chat-head-disc svg{max-width:100%;max-height:100%}

/* The Chief's crown on the face's top left; the chat beside the page wears the same (agent-row.css gave it a corner of its own). */
.chat-head-facewrap>.primary-star.primary-solid,.chat-panel-head.chat-head-agent .chat-head-facewrap>.primary-star.primary-solid{position:absolute;z-index:2;top:0;inset-inline-start:0;inset-inline-end:auto;width:26px;height:26px;padding:4px;border-radius:50%;background:var(--surface,#fff);box-shadow:0 0 0 2px var(--surface,#fff),0 1px 3px rgba(28,18,48,.3)}

/* The state dot: green Online, orange Offline, red Unresponsive or Disconnected (terminal-ui.js linkOf). */
.chat-head-dot{position:absolute;z-index:2;top:3px;inset-inline-end:3px;width:20px;height:20px;box-sizing:border-box;padding:0;border-radius:50%;border:3px solid var(--surface,#fff);background:#9aa2b1!important;box-shadow:0 1px 3px rgba(28,18,48,.3);font-size:0;line-height:0;pointer-events:none}
.chat-head-dot::before{content:none!important}
.chat-head-dot[data-tone=green]{background:var(--dot-green)!important}
.chat-head-dot[data-tone=orange]{background:var(--dot-orange)!important}
.chat-head-dot[data-tone=red]{background:var(--dot-red)!important}

.chat-head-agent .chat-head-name{display:block;max-width:100%;margin:14px 0 0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chat-head-agent .chat-head-name:focus{outline:none}
.chat-head-agent .chat-head-name:focus-visible{outline:2px solid color-mix(in srgb,var(--ink,#24212d) 55%,transparent);outline-offset:3px;border-radius:8px}
.chat-head-agent .chat-head-name .agent-head-name{display:block;font-size:1.375rem;line-height:1.2;font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head-line{display:flex;align-items:center;justify-content:center;max-width:100%;min-height:1.3em;margin-top:2px;font-size:.9375rem;line-height:1.3;color:var(--muted);white-space:nowrap}
.chat-head-line>*{min-width:0;max-width:100%}
.chat-head-line .chat-head-working{display:inline-flex;align-items:center;gap:6px;color:inherit;font-weight:inherit;cursor:pointer}
.chat-head-line .chat-head-working .mark-word{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head-line .agent-needs{display:inline-flex;color:var(--red,#bd3551);font-weight:600;cursor:pointer}

/* ---- The agent's space: the page as a sheet from the top ---- */
@keyframes agent-sheet-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes agent-sheet-out{from{transform:translateY(0)}to{transform:translateY(-100%)}}
[data-agent-sheet-page]{position:fixed!important;inset:0!important;z-index:90;box-sizing:border-box;width:auto!important;max-width:none!important;height:auto!important;margin:0!important;padding:calc(env(safe-area-inset-top,0px) + 62px) 16px calc(28px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg,#f7f7fa);color:var(--ink,#24212d);box-shadow:0 18px 40px -14px rgba(28,18,48,.35)}
[data-theme=dark] [data-agent-sheet-page]{background:var(--bg,#14151a)}
[data-agent-sheet-page]>*:not(.agent-sheet-close){max-width:720px;margin-inline:auto}
[data-agent-sheet-enter]{animation:agent-sheet-in .34s cubic-bezier(.2,.8,.2,1) backwards}
.agent-sheet-leaving{animation:agent-sheet-out .3s cubic-bezier(.4,0,.8,.4) forwards}
.agent-sheet-ghost{pointer-events:none}
.agent-sheet-under{position:fixed;inset:0;z-index:80;overflow:hidden;background:var(--bg,#f7f7fa)}
body[data-agent-sheet]{overflow:hidden}
/* The bottom bar remains a way out of the sheet. Keep its hit area above the page and leave room to scroll the last row clear of it. */
@media(max-width:700px){
  body[data-agent-sheet] #terminal .bottom-nav{z-index:91}
  [data-agent-sheet-page]{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important}
}

.agent-sheet-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);inset-inline-start:16px;z-index:4;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface,#fff);color:var(--ink,#24212d);cursor:pointer;-webkit-tap-highlight-color:transparent}
.agent-sheet-close:focus{outline:none}
.agent-sheet-close:focus-visible{outline:2px solid color-mix(in srgb,currentColor 55%,transparent);outline-offset:2px}
.agent-sheet-close .icon,.agent-sheet-pencil .icon{width:20px;height:20px}
[data-agent-sheet-page] .page-back-line{display:none}
/* Muse's layout: the face large with its pencil, the name, the state, then the tabs. */
[data-agent-sheet-page] .agent-heading{margin:0 0 18px;padding:0}
[data-agent-sheet-page] .agent-title{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
[data-agent-sheet-page] .agent-head-end,[data-agent-sheet-page] .agent-calls{display:none!important}
[data-agent-sheet-page] .agent-title .portrait-box.large{position:relative;width:128px;height:128px;border-radius:50%!important;box-shadow:0 12px 20px -8px rgba(28,18,48,.35),0 3px 6px rgba(28,18,48,.16)}
[data-agent-sheet-page] .agent-title .portrait-box.large>[data-portrait]{border-radius:50%;overflow:hidden}
[data-agent-sheet-page] .agent-head-face{padding:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:visible}
[data-agent-sheet-page] .agent-head-face:focus{outline:none}
.agent-sheet-pencil{position:absolute;inset-inline-end:-2px;bottom:6px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--surface,#fff);color:var(--ink,#24212d);box-shadow:0 2px 6px rgba(28,18,48,.18)}
[data-agent-sheet-page] .agent-name{display:flex;flex-direction:column;align-items:center;min-width:0}
[data-agent-sheet-page] .agent-name .agent-head-copy,[data-agent-sheet-page] .agent-name .agent-head-line,[data-agent-sheet-page] .agent-name .agent-head-role-line{justify-content:center;align-items:center;text-align:center}
[data-agent-sheet-page] .agent-name .agent-head-name{font-size:1.75rem;line-height:1.2;font-weight:650;letter-spacing:-.01em}
[data-agent-sheet-page] .agent-name .agent-head-platform{display:none}

/* What the chat's header used to hold, as rows under the tabs. */
.agent-sheet-actions{display:block;margin:0 0 16px;padding:4px 0;overflow:hidden}
.agent-sheet-row{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;min-height:54px;margin:0;padding:0 16px;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-size:1rem;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent}
.agent-sheet-row+.agent-sheet-row{border-top:1px solid var(--line)}
.agent-sheet-row:focus{outline:none}
.agent-sheet-row:focus-visible{outline:2px solid color-mix(in srgb,currentColor 55%,transparent);outline-offset:-2px}
.agent-sheet-row-glyph{display:grid;place-items:center;flex:none;width:24px;height:24px}
.agent-sheet-row-glyph .icon{width:22px;height:22px}
.agent-sheet-row-label{flex:1 1 auto;min-width:0}
.agent-sheet-row-value{flex:none;color:var(--muted);font-size:.9375rem}

/* Search this chat (a dialog over the sheet). */
.chat-search-sheet{display:grid;gap:10px}
.chat-search-results{list-style:none;margin:0;padding:0;max-height:min(50dvh,360px);overflow-y:auto;overscroll-behavior:contain}
.chat-search-hit{display:grid;gap:2px;width:100%;padding:10px 4px;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chat-search-hit strong{font-size:.8125rem;color:var(--muted)}
.chat-search-hit span{overflow-wrap:anywhere}

/* The chat beside the page, and the whole screen on a phone (terminal-panel.js): the same header, over its older flex row. */
.chat-panel-head.chat-head-agent .chat-head-facewrap.chat-panel-face{display:block;flex:none}
.chat-panel-head.chat-head-agent>.chat-panel-close{align-self:start}
.chat-panel-head.chat-head-agent>.chat-panel-tools{order:0;align-self:start}
/* Call and the three dots share the right (Mute and End too while a call is on): the right takes what they need, the
   agent between gives way. */
.chat-panel-head.chat-head-agent{grid-template-columns:minmax(44px,1fr) minmax(0,auto) minmax(min-content,1fr)}
.chat-panel-head.chat-head-agent .chat-head-who{max-width:min(46vw,200px)}

@media (min-width:700px){
 .chat-thread-head.chat-head-agent{--face:112px}
}
@media (prefers-reduced-motion:reduce){[data-agent-sheet-enter],.agent-sheet-leaving{animation:none}}
body.reduced-motion [data-agent-sheet-enter],body.reduced-motion .agent-sheet-leaving{animation:none}

/* ---- As Muse's, closer (the Founder, 22 October 2026, 00:46, beside Muse's chat): no line under the header; the chat runs
   up behind it and fades out; a smaller face; the name and what the agent is doing on one pill under it; no job title;
   the state dot small at the face's top left and the crown at its top right. ---- */
.chat-thread-head.chat-head-agent,.chat-panel-head.chat-head-agent{--face:64px;padding:8px 12px 22px;border:0!important;background:linear-gradient(to bottom,var(--surface,#fff) 0,var(--surface,#fff) 62%,color-mix(in srgb,var(--surface,#fff) 70%,transparent) 82%,transparent 100%)}
.chat-thread:has(>.chat-thread-head.chat-head-agent){position:relative}
.chat-thread>.chat-thread-head.chat-head-agent{position:absolute;inset:0 0 auto 0}
/* The room above the first message is a spacer that scrolls with the chat, not padding: padding is a floor the log cannot
   shrink below, and on a short screen with the keyboard up it pushed Send off the screen. */
.chat-thread:has(>.chat-thread-head.chat-head-agent)>.chat-thread-log{padding-top:0;min-height:0}
.chat-thread:has(>.chat-thread-head.chat-head-agent)>.chat-thread-log::before{content:'';display:block;height:calc(var(--chat-head-h,148px) + 6px)}
.chat-head-pill{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;max-width:100%;margin-top:-10px;padding:4px 14px 5px;border-radius:16px;border:1px solid color-mix(in srgb,var(--line,#e6e2ee) 80%,transparent);background:color-mix(in srgb,var(--surface,#fff) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(28,18,48,.08)}
.chat-head-pill .chat-head-name{margin:0!important}
.chat-head-agent .chat-head-pill .chat-head-name .agent-head-name{font-size:1rem;line-height:1.25;font-weight:650}
.chat-head-pill .chat-head-line{margin-top:0;font-size:.8125rem;line-height:1.25}
.chat-head-agent .chat-head-facewrap>.chat-head-dot{top:2px;inset-inline-start:2px;inset-inline-end:auto;width:13px!important;height:13px!important;min-width:0!important;min-height:0!important;padding:0!important;border-width:2px}
.chat-head-facewrap>.primary-star.primary-solid,.chat-panel-head.chat-head-agent .chat-head-facewrap>.primary-star.primary-solid{top:-4px;inset-inline-end:-4px;inset-inline-start:auto;width:20px;height:20px;padding:3px}
/* The chat beside the page as the full chat: the messages run up behind the header and fade under it (the Founder, 22 October
   2026). Not while searching: the search row sits between them. */
.chat-panel-head.chat-head-agent:has(+.chat-panel-log){margin-bottom:calc(-1 * var(--panel-head-h,140px))}
.chat-panel-head.chat-head-agent+.chat-panel-log{padding-top:0;min-height:0}
.chat-panel-head.chat-head-agent+.chat-panel-log::before{content:'';display:block;height:calc(var(--panel-head-h,140px) + 6px)}
/* As Muse draws it (the Founder, 22 October 2026, 20:01): the face over the name's pill, never under it; the pill see-through
   and frosted; the name in the page's ink at a smaller size; what the agent is doing under it in grey, a description with
   no dots (the dots are the log's). */
.chat-head-agent .chat-head-facewrap{z-index:4}
.chat-head-pill{z-index:2;margin-top:-8px;padding:3px 12px 4px;border-color:color-mix(in srgb,var(--line,#e6e2ee) 60%,transparent);background:color-mix(in srgb,var(--surface,#fff) 78%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.chat-head-agent .chat-head-pill .chat-head-name .agent-head-name{font-size:.9375rem;font-weight:600;color:var(--ink,#24212d)}
[data-theme=dark] .chat-head-agent .chat-head-pill .chat-head-name .agent-head-name{color:var(--ink,#f0f1f5)}
.chat-head-pill .chat-head-line{font-size:.8125rem;color:var(--muted,#686577)}
.chat-head-pill .agent-typing-said{color:var(--muted,#686577);font-weight:500}
/* No white block over the chat (the Founder, 22 October 2026, 20:03, beside Muse's): the messages run up to the very top
   under a frosted blur that fades out, and everything the header carries floats on it: the back, call and dots as frosted
   circles, the face, the name's pill. */
.chat-thread-head.chat-head-agent,.chat-panel-head.chat-head-agent{background:none!important;isolation:isolate}
.chat-thread-head.chat-head-agent::before,.chat-panel-head.chat-head-agent::before{content:'';position:absolute;inset:0 0 -18px 0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--surface,#fff) 28%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%)}
.chat-head-agent :is(.chat-panel-close,.chat-thread-back,a.chat-back,button.chat-back),.chat-head-agent .chat-head-end :is(.icon-button,button){border:1px solid color-mix(in srgb,var(--line,#e6e2ee) 60%,transparent);border-radius:50%;background:color-mix(in srgb,var(--surface,#fff) 60%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 2px 8px rgba(28,18,48,.08)}
/* ---- Muse's header, measured from Aristo's on an iPhone at 390 CSS px (the Founder, 22 October 2026, 21:18: "The name Primy is
   behind and hidden. Use the same shape as Muse's"). The face 60px, its top level with Back's. The pill only as wide as its
   words, 12px each side: one line (32px tall) with the name alone, two (48px, the hairline included) with what the agent is doing; radius 16; light
   translucent grey with a hairline and no shadow. The face comes 5px down over the pill's top edge and never over the name:
   the pill's 8px top padding keeps the name clear. The name 16px semibold in black ink; the status 14px grey, a few words. */
.chat-thread-head.chat-head-agent,.chat-panel-head.chat-head-agent{--face:60px;padding-bottom:10px}
.chat-head-agent .chat-head-facewrap{margin:0}
.chat-head-agent .chat-head-pill{box-sizing:border-box;width:max-content;max-width:100%;margin-top:-5px;padding:7px 0 5px;gap:0;border-radius:16px;border:1px solid rgba(0,0,0,.07);background:rgba(242,242,244,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none}
[data-theme=dark] .chat-head-agent .chat-head-pill{border-color:rgba(255,255,255,.1);background:rgba(44,44,50,.86)}
.chat-head-agent .chat-head-pill .chat-head-name .agent-head-name{font-size:16px;line-height:18px;font-weight:600;letter-spacing:0;color:#000}
[data-theme=dark] .chat-head-agent .chat-head-pill .chat-head-name .agent-head-name{color:#fff}
.chat-head-agent .chat-head-pill .chat-head-name{box-sizing:border-box;padding:0 12px}
.chat-head-agent .chat-head-pill .chat-head-line{box-sizing:border-box;max-width:100%;min-height:0;margin:0;padding:0 12px;font-size:14px;line-height:17px;font-weight:400;color:var(--muted,#6e6e73)}
.chat-head-agent .chat-head-pill .chat-head-line .mark-word,.chat-head-agent .chat-head-pill .agent-typing-said{display:block;min-width:0;text-box:normal;line-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-weight:inherit}
/* The status unfolds what the agent is working on: a button the width of the pill with a small chevron after the words,
   turned up while open. Its press area runs to the pill's edges. */
.chat-head-agent .chat-head-pill>*{flex:none}
.chat-head-agent .chat-head-pill .chat-head-toggle{display:flex;align-items:center;justify-content:center;gap:3px;align-self:stretch;box-sizing:content-box;width:auto;height:17px;margin:0 0 -5px;padding:0 12px 5px;font-family:inherit;font-size:14px;line-height:17px;color:var(--muted,#6e6e73);border:0;border-radius:0 0 16px 16px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chat-head-agent .chat-head-toggle:focus{outline:none}
.chat-head-agent .chat-head-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--ink,#24212d) 55%,transparent);outline-offset:-2px}
.chat-head-chevron{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.chat-head-toggle[aria-expanded=true] .chat-head-chevron{transform:rotate(180deg)}
/* The blur is light and only at the very top: from the top edge it is gone by the middle of the face, so the messages read
   right up under it; a wash of the page's own surface, never a tint picked up from the bubbles. */
.chat-thread-head.chat-head-agent::before,.chat-panel-head.chat-head-agent::before{inset:0 0 auto 0;height:calc(env(safe-area-inset-top,0px) + var(--face) / 2 + 4px);background:linear-gradient(to bottom,color-mix(in srgb,var(--surface,#fff) 70%,transparent),color-mix(in srgb,var(--surface,#fff) 0%,transparent));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 100%)}
.chat-thread:has(>.chat-thread-head.chat-head-agent)>.chat-thread-log::before{height:calc(var(--chat-head-h,118px) + 6px)}
/* Call, Mute and End in the header are one clean circle at every scroll (the Founder, 24 October 2026, on his phone: a second
   small oval showed round the phone once the chat scrolled under it). The frosted shell above is a 40x44 box with radius
   50%, an oval, drawn round the call's own 40px circle (call-sheet.css ::before). The shell goes from these three; the
   circle carries the hairline and the float. */
.chat-head-agent .chat-head-end .chat-call-tools .icon-button{border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.chat-head-agent .chat-head-end .chat-call-tools .icon-button::before{box-shadow:0 0 0 1px color-mix(in srgb,var(--line,#e6e2ee) 60%,transparent),0 2px 8px rgba(28,18,48,.08)}