/* ---------------------------------------------------------------------------
   Theme tokens
   Shared tokens live in :root; the palette is swapped per [data-theme].
   Views inherit these variables, so they restyle along with the host.
--------------------------------------------------------------------------- */
:root {
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  --accent: #f7931a;
  --accent-strong: #ffa838;
  --accent-2: #7c5cff;
  --accent-2-strong: #9a80ff;
  --on-accent: #221603;

  font-synthesis: none;
}

/* ---- Dark (default) ---- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1014;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #1a1d27 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 110%, #161b29 0%, transparent 55%);
  --panel: #161922;
  --panel-2: #1d212c;
  --panel-3: #262b38;
  --border: #2a3040;
  --border-soft: #232936;
  --text: #e8eaf1;
  --muted: #aab2c8;
  --danger: #f0565b;
  --danger-bg: #2a1416;
  --danger-text: #ffb3b6;
  --ok: #46c08a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .25);
  --scrollbar: #353c4d;
}

/* ---- Light ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --accent: #c47215;
  --accent-strong: #d4820f;
  --on-accent: #ffffff;
  --bg: #f4f6fa;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #e9edf6 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 110%, #eef0fb 0%, transparent 55%);
  --panel: #ffffff;
  --panel-2: #f2f4f8;
  --panel-3: #e7eaf1;
  --border: #dfe3ec;
  --border-soft: #e9ecf3;
  --text: #1a1d26;
  --muted: #5d6577;
  --danger: #d92d3a;
  --danger-bg: #fdecec;
  --danger-text: #a3202a;
  --ok: #138a5e;
  --shadow: 0 1px 2px rgba(20, 24, 40, .06), 0 10px 30px rgba(20, 24, 40, .08);
  --shadow-soft: 0 1px 2px rgba(20, 24, 40, .06);
  --scrollbar: #c7cdda;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100vh;      /* fallback for browsers without dvh */
  height: 100dvh;     /* track the *visible* viewport so mobile browser chrome
                         (URL bar, tab strip) never leaves a gap at the bottom */
  /* This is a fixed-viewport app shell: the header plus each inner pane
     (#messages, .view-pane, #canvas-tabs) scroll on their own, so the document
     itself must never scroll. Locking overflow here keeps any sub-pixel spill
     from turning into a page-level scrollbar on mobile. */
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  background-image: var(--bg-grad);
  background-attachment: fixed;
}

/* Smooth, scoped transitions for the theme swap and interactions. */
button, .pill, .tab, input, textarea, dialog, .msg .bubble {
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }

/* ---------------------------------------------------------------------------
   Topbar
--------------------------------------------------------------------------- */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand .logo {
  font-size: 18px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
  color: var(--on-accent);
  box-shadow: var(--shadow-soft);
}
.brand strong { display: block; line-height: 1.15; font-size: 15px; letter-spacing: -.01em; }
.brand small { color: var(--muted); font-size: 12px; }

.top-actions { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------------------
   User menu (avatar button + dropdown)
--------------------------------------------------------------------------- */
.user-menu { position: relative; display: flex; }

.avatar-btn {
  padding: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: none;
}
.avatar-btn:hover { background: var(--panel-3); transform: none; filter: none; }
.avatar-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.avatar-btn.connected { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
/* Exactly one of the picture / silhouette is ever displayed, driven by the
   .has-img state the JS sets once the avatar image actually loads. Toggling
   `display` (not the `hidden` attribute) keeps the grid cell holding a single
   centered child, so the loaded picture never stacks on top of the icon. */
#user-avatar { width: 100%; height: 100%; object-fit: cover; display: none; }
.avatar-btn.has-img #user-avatar { display: block; }
.avatar-btn.has-img .avatar-fallback { display: none; }
.avatar-fallback { width: 20px; height: 20px; fill: currentColor; }

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
  animation: pop .14s ease;
}
.dropdown[hidden] { display: none; }

.menu-item {
  text-align: left;
  width: 100%;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-weight: 500;
  box-shadow: none;
}
.menu-item:hover { background: var(--panel-2); transform: none; filter: none; }
.menu-item:focus-visible { outline: none; box-shadow: var(--ring); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--panel-2)); }

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
  color: var(--on-accent);
  padding: 8px 14px;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
button:hover { filter: brightness(1.04); transform: translateY(-1px); }
button:active { transform: translateY(0); filter: brightness(.98); }
button:focus-visible { outline: none; box-shadow: var(--ring); }

button.ghost {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border);
  font-weight: 500;
  box-shadow: none;
}
button.ghost:hover { background: var(--panel-3); transform: none; filter: none; }
button.ghost.danger { color: var(--danger); }
button.ghost.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--panel-2)); border-color: var(--danger); }

button.icon {
  padding: 8px 10px;
  font-size: 15px;
  line-height: 1;
  min-width: 36px;
}

button:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

.pill {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 500;
}
.pill.ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
  background: color-mix(in srgb, var(--ok) 12%, var(--panel-2));
}

/* ---------------------------------------------------------------------------
   Layout
--------------------------------------------------------------------------- */
#layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 440px;
  min-height: 0;
}

#canvas {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

#canvas-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 12px 0;
  overflow-x: auto;
  flex: 0 0 auto;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--panel);
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  font-size: 13px;
}
.tab:hover { color: var(--text); background: var(--panel-2); }
.tab.active {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border);
  box-shadow: inset 0 2px 0 var(--accent);
}
.tab .x { color: var(--muted); font-weight: 700; border-radius: 6px; padding: 0 4px; line-height: 1.2; }
.tab .x:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* The body is a non-scrolling host; each view gets its own scrollable pane so
   tabs keep independent scroll positions. Only the active pane is shown. */
#canvas-body { flex: 1 1 auto; display: flex; min-height: 0; }
.view-pane,
#empty-canvas { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px; }

.empty { max-width: 580px; margin: 8vh auto; color: var(--muted); }
.empty h2 { color: var(--text); font-size: 22px; letter-spacing: -.02em; margin: 0 0 10px; }
.empty p { line-height: 1.6; }
.suggestions { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.suggestions li {
  margin: 0;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

/* View host */
.view-host { animation: fade .22s ease; }
.view-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger-text);
  padding: 12px 14px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Chat
--------------------------------------------------------------------------- */
#chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
#messages { flex: 1 1 auto; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.msg { max-width: 100%; display: flex; flex-direction: column; }
.msg .role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 5px;
  font-weight: 600;
}
.msg .bubble {
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 11px 14px;
  border-radius: var(--radius-lg);
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
  box-shadow: var(--shadow-soft);
}
.msg.user { align-items: flex-end; }
.msg.user .bubble {
  background: linear-gradient(145deg, var(--accent-2), var(--accent-2-strong));
  color: #fff;
  border-color: transparent;
  border-bottom-right-radius: 4px;
}
.msg.assistant .bubble { border-bottom-left-radius: 4px; }
.msg.tool .bubble {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  box-shadow: none;
}

#composer {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
  align-items: flex-end;
}
#composer textarea {
  flex: 1 1 auto;
  resize: none;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.45;
  max-height: 240px;
  overflow-y: auto;
}
#composer textarea::placeholder { color: var(--muted); }
#composer textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
#composer #send { align-self: stretch; padding-inline: 18px; }
#chat-status { padding: 0 14px 10px; color: var(--muted); font-size: 12px; min-height: 16px; }

/* ---------------------------------------------------------------------------
   Settings dialog
--------------------------------------------------------------------------- */
dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(520px, 92vw);
  padding: 0;
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(6, 8, 14, .55); backdrop-filter: blur(3px); }
dialog[open] { animation: pop .18s ease; }
#settings-form { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
#settings-form h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
#settings-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; }
#settings-form small { color: var(--muted); font-weight: 400; line-height: 1.4; }
#settings-form input, #settings-form textarea {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font: inherit;
}
#settings-form input:focus-visible, #settings-form textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
#settings-form menu {
  display: flex; justify-content: flex-end; gap: 8px;
  margin: 4px 0 0; padding: 0;
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-weight: 600; }
.field small { color: var(--muted); line-height: 1.4; }
.conn-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conn-row input { flex: 1 1 auto; min-width: 0; }
.conn-row .ghost { flex: 0 0 auto; white-space: nowrap; }
.muted { color: var(--muted); }
.muted.ok, .connect-status.ok { color: var(--ok); }

/* Log in with Claude dialog + Connect signer dialog (shared layout) */
#connect-form, #signer-form { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
#connect-form h3, #signer-form h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
#connect-form .muted, #signer-form .muted { font-size: 13px; line-height: 1.55; margin: 0; }
#signer-form .steps { margin-top: 4px; }
#connect-form code, #signer-form code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; }
.steps li { line-height: 1.55; }
.steps li > span { display: block; margin-bottom: 7px; }
.steps input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font: inherit;
}
.steps input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.btn-link {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.btn-link:hover { text-decoration: underline; }
.console-links { display: flex; flex-wrap: wrap; gap: 16px; }
.connect-status { min-height: 18px; font-size: 13px; color: var(--muted); }
.connect-status.error { color: var(--danger); }
#connect-form menu, #signer-form menu { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 0; }
#connect-form menu .spacer, #signer-form menu .spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------------------
   Confirm dialog (designed replacement for window.confirm)
--------------------------------------------------------------------------- */
dialog.confirm { width: min(680px, 92vw); }
#confirm-form {
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: start;
}
.confirm-icon {
  grid-row: 1 / 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.confirm-icon svg { width: 22px; height: 22px; }
.confirm-body { grid-column: 2; align-self: center; }
.confirm-body h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.confirm-body p { margin: 0; line-height: 1.5; font-size: 13px; white-space: pre-wrap; overflow-wrap: break-word; max-height: 360px; overflow-y: auto; }
#confirm-form menu {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end; gap: 8px;
  margin: 18px 0 0; padding: 0;
}

/* ---------------------------------------------------------------------------
   Markdown output (api.md())
--------------------------------------------------------------------------- */
.md { color: var(--text); line-height: 1.6; }
.md > * + * { margin-top: .75em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font-weight: 600; line-height: 1.25; margin-top: 1.25em; }
.md h1 { font-size: 1.5em; }
.md h2 { font-size: 1.25em; }
.md h3 { font-size: 1.1em; }
.md p { margin: 0; }
.md ul, .md ol { padding-left: 1.5em; }
.md li + li { margin-top: .25em; }
.md a { color: var(--accent); text-decoration: underline; }
.md a:hover { opacity: .8; }
.md code { font-family: monospace; font-size: .88em; background: var(--panel-3); padding: .1em .35em; border-radius: 3px; }
.md pre { background: var(--panel-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 1em; overflow-x: auto; }
.md pre code { background: none; padding: 0; font-size: .85em; }
.md blockquote { border-left: 3px solid var(--border); margin-left: 0; padding-left: 1em; color: var(--muted); }
.md hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
.md strong { font-weight: 600; }
.md em { font-style: italic; }

/* ---------------------------------------------------------------------------
   Animations & responsive
--------------------------------------------------------------------------- */
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 820px) {
  /* Stack canvas over chat. minmax(0, …) lets the canvas row shrink instead of
     growing to its content's height, which would otherwise shove the chat off
     the bottom of the screen on mobile. The chat track is a percentage of the
     (already viewport-bounded) #layout container rather than a dvh value, so the
     whole declaration can't be dropped on a browser that lacks dvh support —
     which would let both rows grow to content and overflow the page. */
  #layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(140px, 45%); }
  #chat { border-top: 1px solid var(--border); }
  /* Extra tap padding for text buttons only — not the fixed-size avatar
     circle, whose padding must stay 0 so its icon stays centered. */
  .top-actions button:not(.icon):not(.avatar-btn) { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}