:root {
  color-scheme: dark;
  --ink: #edf0f8; --dim: #9da8be; --faint: #6f7c95;
  --paper: #171b27; --line: #30394e; --accent: #a8d6ff; --mine: #344f82;
  --tool: #1d2432; --danger: #ff9c9c;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: #10131c; color: var(--ink); font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }

/* The app is one full-height column: only the message list scrolls, so the
   composer stays reachable however long the conversation gets. */
.app { display: flex; flex-direction: column; gap: 12px; max-width: 860px; height: 100dvh; margin: auto; padding: 16px; }
header { display: flex; justify-content: space-between; align-items: center; min-height: 44px; color: var(--dim); font-size: 14px; }
.brand { color: var(--ink); font-weight: 750; text-decoration: none; letter-spacing: -.04em; font-size: 22px; }
.brand span { color: var(--accent); }

.account { position: relative; }
.identity { border: 0; padding: 6px 0; background: transparent; color: var(--dim); font: inherit; cursor: pointer; }
.identity:hover, .identity[aria-expanded="true"] { color: var(--ink); }
.account-menu { position: absolute; z-index: 2; right: 0; top: calc(100% + 7px); display: none; min-width: 92px; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: #222a3a; box-shadow: 0 10px 24px #0007; }
.account-menu.open { display: block; }
.account-menu::before { content: ""; position: absolute; top: -5px; right: 16px; width: 8px; height: 8px; background: #222a3a; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.account-menu form { display: block; padding: 0; border: 0; }
.account-menu button { position: relative; width: 100%; padding: 7px 10px; border-radius: 6px; background: transparent; color: var(--ink); font-size: 13px; text-align: left; }
.account-menu button:hover { background: #303b52; }

.card { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); padding: clamp(18px, 4vw, 30px); box-shadow: 0 20px 60px #0004; }
.card.center { text-align: center; color: var(--dim); }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 11px; letter-spacing: .12em; font-weight: 700; }
h1 { margin: 0; letter-spacing: -.04em; font-size: clamp(30px, 7vw, 48px); line-height: 1.05; }
p { color: var(--dim); }
.button, button { display: inline-block; border: 0; border-radius: 10px; background: var(--accent); color: #101828; padding: 11px 16px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }

/* ---- permissions ---- */
/* What the agent is allowed to touch, stated before the conversation rather
   than discovered when a tool refuses. */
.permissions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 2px; }
.grant { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--tool); font-size: 13px; color: var(--dim); }
.grant .mark { width: 6px; height: 6px; border-radius: 50%; background: #6ee7a8; }
.grant.partial .mark, .grant.none .mark { background: var(--faint); }
.grant .caps { color: var(--faint); font-size: 12px; }
.connect { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; }
.connect:hover { background: var(--accent); color: #101828; }

/* ---- live view ---- */
.live { padding: 0; overflow: hidden; }
.live-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 0; color: var(--dim); }
.live-toggle { display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.live-toggle .caret { display: inline-block; color: var(--faint); transition: transform .12s; }
.live-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }
.live-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: 13px; }
.live-status.waiting { color: #ffd479; }
.control { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-size: 13px; font-weight: 600; }
.control:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.control.holding { border-color: #6ee7a8; color: #101828; background: #6ee7a8; }
.control:disabled { opacity: .4; }
/* The canvas must keep the frame's own aspect ratio: the viewer sends clicks
   as a fraction of the displayed box, and the server maps that fraction onto
   the frame. Forcing an aspect-ratio here stretches the image and every click
   lands somewhere else. width+height:auto lets the bitmap decide. */
.live-body { border-top: 1px solid var(--line); background: #0b0e15; }
/* Bounded by height, not width: the frame is nearly square, so a full-width
   canvas would push the conversation off the screen. Both dimensions stay
   auto so the bitmap keeps its own ratio -- clicks are sent as a fraction of
   this element's box, and stretching it would land them somewhere else. */
#live-canvas { display: block; margin: 0 auto; max-width: 100%; max-height: 46vh;
               width: auto; height: auto; cursor: default; }
#live-canvas.holding { cursor: crosshair; }
#live-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- chat ---- */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(14px, 2.5vw, 22px); }
.messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding-right: 6px; scrollbar-width: thin; }
.empty { margin: auto; max-width: 30ch; text-align: center; color: var(--faint); }

.message { max-width: 88%; padding: 10px 14px; border: 1px solid transparent; border-radius: 14px; background: #232b3c; }
.message .who { display: block; margin-bottom: 3px; color: var(--accent); font-size: 11px; letter-spacing: .12em; font-weight: 700; }
.message .body { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Rendered markdown. The body is pre-wrap for the plain-text case, so every
   block element has to reset that or parsed output inherits the source's
   newlines on top of its own spacing. */
.message .body > * { white-space: normal; }
.message .body > :first-child { margin-top: 0; }
.message .body > :last-child { margin-bottom: 0; }
.message .body p, .message .body ul, .message .body ol, .message .body blockquote { margin: 0 0 10px; }
.message .body ul, .message .body ol { padding-left: 22px; }
.message .body li { margin: 2px 0; }
.message .body h1, .message .body h2, .message .body h3 { margin: 14px 0 6px; font-size: 1.05em; line-height: 1.3; letter-spacing: 0; }
.message .body a { color: var(--accent); }
.message .body code { padding: 1px 5px; border-radius: 5px; background: #10131c; font: 0.88em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.message .body pre { margin: 0 0 10px; padding: 10px; overflow-x: auto; border-radius: 8px; background: #10131c; }
.message .body pre code { padding: 0; background: none; }
.message .body blockquote { padding-left: 10px; border-left: 2px solid var(--line); color: var(--dim); }
.message .body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 10px; }
.message .body th, .message .body td { padding: 5px 9px; border: 1px solid var(--line); text-align: left; }
.message .body hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.message .body img { max-width: 100%; border-radius: 8px; }

.message.user { align-self: flex-end; background: var(--mine); }
.message.user .who { color: #d9e8ff; }
.message.error { border-color: #d98686; }
.message.error .who { color: var(--danger); }

/* A tool call is a footnote to the answer, not a message: narrower, quieter,
   and collapsed until someone wants the detail. */
.tool { align-self: stretch; max-width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--tool); font-size: 14px; }
.tool[open] { background: #212a3b; }
.tool > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--dim); cursor: pointer; list-style: none; }
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary::before { content: "▸"; color: var(--faint); transition: transform .12s; }
.tool[open] > summary::before { transform: rotate(90deg); }
.tool .name { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.tool .arg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: 13px; }
.tool.failed { border-color: #7d4a4a; }
.tool.failed .name { color: var(--danger); }
.tool .detail { padding: 0 12px 12px; }
.tool pre { margin: 0 0 8px; padding: 10px; max-height: 320px; overflow: auto; border-radius: 8px; background: #10131c; color: var(--dim); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool .label { margin: 0 0 4px; color: var(--faint); font-size: 11px; letter-spacing: .1em; font-weight: 700; }

.files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.files a { display: block; text-decoration: none; }
.files img { display: block; max-width: 260px; max-height: 200px; border: 1px solid var(--line); border-radius: 8px; background: #0b0e15; }
.files .file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--accent); font-size: 13px; }

.working { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 13px; }
.working .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); animation: pulse 1.2s infinite; }
.working .dot:nth-child(2) { animation-delay: .2s; }
.working .dot:nth-child(3) { animation-delay: .4s; }
.working span:last-child { margin-left: 4px; }
@keyframes pulse { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

form { display: flex; align-items: end; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
textarea { flex: 1; min-width: 0; max-height: 30vh; resize: none; overflow-y: auto; background: #10131c; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; }
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

@media (max-width: 520px) {
  .app { padding: 10px; }
  .message { max-width: 95%; }
  form { flex-direction: column; align-items: stretch; }
  button { width: 100%; }
}