/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree {
  font-family: monospace;
  user-select: text;
  white-space: pre;
}

.xterm .xterm-accessibility-tree > div {
  transform-origin: left;
  width: fit-content;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}



/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */

/* xterm.js customization: Override xterm's cursor style */
.xterm .xterm-scrollable-element > .scrollbar {
    cursor: default;
}

/* Arrows */
.xterm .xterm-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.xterm .xterm-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.xterm .xterm-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.xterm .xterm-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.xterm .xterm-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.xterm .xterm-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.xterm .xterm-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
:root {
  color-scheme: dark;

  /* Compact workspace geometry. Graphite pigment matching the Capsule mark. */
  --workspace-topbar-height: 52px;
  --workspace-traffic-inset: 90px;
  --workspace-titlebar-control-size: 1.75rem;
  --workspace-titlebar-control-gap: 0.35rem;
  --workspace-titlebar-content-left: calc(
    var(--workspace-traffic-inset) + var(--workspace-titlebar-control-size) +
      var(--workspace-titlebar-control-gap)
  );
  --sidebar-width: 18rem;
  --sidebar-min-width: 15rem;
  --sidebar-max-width: 22rem;
  --inspector-width: 32rem;
  --inspector-min-width: 22rem;
  --inspector-max-width: 60rem;
  --chat-max: 48rem;
  --control-radius: 0.375rem;
  --composer-radius: 22px;
  --glass-blur: 16px;
  --glass-opacity: 80%;
  --glass-saturation: 1.08;
  --sidebar-content-inset: 0.5rem;
  --app-scrollbar-width: 6px;

  /* Graphite, matching the Capsule mark — not purple */
  --crust: #000000;
  /*
   * The sidebar sits on the same ground as the workspace, with its border
   * doing the separating. Pure black beside #0a0a0a read as two apps joined
   * down the middle, and on first launch — before the panes have painted
   * anything — that seam was the whole window.
   */
  --mantle: #0a0a0a;
  --base: #0a0a0a;
  --surface-0: #111111;
  --surface-1: #191919;
  --overlay-0: #5f5f5f;
  --overlay-1: #7d7d7d;
  --subtext-0: #949494;
  --subtext-1: #bdbdbd;
  --text: #f2f2f2;
  --accent: #f3f3ee;
  --accent-fg: #111111;
  --blue: #b0b0aa;
  --green: #8fbf88;
  --yellow: #d6c37a;
  --red: #d98989;

  --background: 0 0% 3.9%;
  --foreground: 60 14% 95%;
  --card: 0 0% 6.7%;
  --primary: 60 14% 95%;
  --primary-foreground: 0 0% 7%;
  --muted: 0 0% 9%;
  --muted-foreground: 0 0% 64%;
  --border: 0 0% 100% / 0.08;
  --sidebar-background: 0 0% 0%;
  --sidebar-foreground: 60 14% 95%;
  --good: 112 28% 64%;
  --warn: 44 52% 66%;
  --bad: 0 45% 69%;
  --radius: 0.5rem;
  --border-strong: rgb(255 255 255 / 14%);

  /* Keyboard focus. Offsetting the ring keeps it legible against the
     element's own background instead of blending into the border. */
  --ring: var(--accent, #f3f3ee);
  --ring-width: 2px;
  --ring-offset: 2px;

  /* Motion: feedback → state change → composed arrival. */
  --motion-instant: 100ms;
  --motion-fast: 140ms;
  --motion-standard: 180ms;
  --motion-arrival: 120ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-arrival: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-distance-arrival: 0.25rem;
  --motion-blur-arrival: 0px;

  /* Typography scale. --type-scale is the user font-size preference knob;
     Cmd+/- zoom scales the root font-size (every rem), while this nudges
     only the type tokens so text resizes without moving layout. */
  --type-scale: 1;
  --type-rem: calc(1rem * var(--type-scale));
  --text-xs: calc(var(--type-rem) * 0.75);
  --text-sm: calc(var(--type-rem) * 0.875);
  --text-base: var(--type-rem);
  --text-lg: calc(var(--type-rem) * 1.125);
  --text-xl: calc(var(--type-rem) * 1.25);
  --text-message: var(--transcript-size, calc(var(--type-rem) * 0.9375));

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --bg: var(--base);
  --text-muted: var(--subtext-0);
  --text-faint: var(--overlay-1);
  --bg-elevated: var(--surface-1);
  --bg-sidebar: var(--mantle);
  --bg-hover: rgb(255 255 255 / 6%);
  --bg-active: rgb(255 255 255 / 9%);
  --border-color: rgb(255 255 255 / 8%);
  --shadow-raised: 0 4px 16px -2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.35);
  --glass: color-mix(in srgb, var(--surface-0) var(--glass-opacity), transparent);

  /* Sidebar: optional gradient (graphite depth, not color) and active row
     treatment. Components read these semantically. */
  --sidebar-gradient-top: #0d0d0d;
  --sidebar-gradient-bottom: #050505;
  --sidebar-row-active-surface: rgb(255 255 255 / 16%);
  --sidebar-row-subtle-active-surface: rgb(255 255 255 / 9%);
}

html[data-theme="light"],
html[data-theme="system"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
  }
}

html[data-theme="light"] {
  --crust: #e8e8e4;
  --mantle: #ecece8;
  --base: #f4f4f1;
  --surface-0: #ffffff;
  --surface-1: #f0f0ec;
  --overlay-0: #6a6a66;
  --overlay-1: #7d7d78;
  --subtext-0: #5c5c58;
  --subtext-1: #3a3a36;
  --text: #161614;
  --accent: #1a1a18;
  --accent-fg: #f4f4f1;
  --blue: #4a5a66;
  --green: #3d6b3a;
  --yellow: #8a7018;
  --red: #a04848;
  --bg: var(--base);
  --text-muted: var(--subtext-0);
  --text-faint: var(--overlay-1);
  --bg-elevated: var(--surface-0);
  --bg-sidebar: #ecece8;
  --shadow-raised: 0 8px 24px -12px rgb(0 0 0 / 0.12);
  --bg-hover: rgb(0 0 0 / 5%);
  --bg-active: rgb(0 0 0 / 8%);
  --border-color: rgb(0 0 0 / 8%);
  --border-strong: rgb(0 0 0 / 14%);
  --shadow: 0 24px 64px -24px rgb(0 0 0 / 0.18);
  --glass: color-mix(in srgb, var(--surface-0) 86%, transparent);
  --sidebar-gradient-top: #f0f0ec;
  --sidebar-gradient-bottom: #e6e6e2;
  --sidebar-row-active-surface: rgb(0 0 0 / 12%);
  --sidebar-row-subtle-active-surface: rgb(0 0 0 / 7%);
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --crust: #e8e8e4;
    --mantle: #ecece8;
    --base: #f4f4f1;
    --surface-0: #ffffff;
    --surface-1: #f0f0ec;
    --overlay-0: #6a6a66;
    --overlay-1: #7d7d78;
    --subtext-0: #5c5c58;
    --subtext-1: #3a3a36;
    --text: #161614;
    --accent: #1a1a18;
    --accent-fg: #f4f4f1;
    --blue: #4a5a66;
    --green: #3d6b3a;
    --yellow: #8a7018;
    --red: #a04848;
    --bg: var(--base);
    --text-muted: var(--subtext-0);
    --text-faint: var(--overlay-1);
    --bg-elevated: var(--surface-0);
    --bg-sidebar: #ecece8;
    --bg-hover: rgb(0 0 0 / 5%);
    --bg-active: rgb(0 0 0 / 8%);
    --border-color: rgb(0 0 0 / 8%);
    --border-strong: rgb(0 0 0 / 14%);
    --shadow: 0 24px 64px -24px rgb(0 0 0 / 0.18);
    --glass: color-mix(in srgb, var(--surface-0) 86%, transparent);
    --sidebar-gradient-top: #f0f0ec;
    --sidebar-gradient-bottom: #e6e6e2;
    --sidebar-row-active-surface: rgb(0 0 0 / 12%);
    --sidebar-row-subtle-active-surface: rgb(0 0 0 / 7%);
  }
}

* { box-sizing: border-box; }
html, body, #root {
  height: 100%;
  min-height: 100%;
  width: 100%;
}
html, body {
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.45;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}
button, input, textarea, select { font: inherit; color: inherit; }
button:not(:disabled),
a[href],
summary,
[role="button"]:not([aria-disabled="true"]),
[role="menuitem"]:not([aria-disabled="true"]),
[role="option"]:not([aria-disabled="true"]),
[role="tab"]:not([aria-disabled="true"]) {
  cursor: pointer;
}
button:disabled, [aria-disabled="true"] { cursor: default; }

/* Baseline keyboard focus for everything that does not opt out. Pointer
   interaction never triggers this — :focus-visible only matches when the
   engine decides a focus ring is warranted. Capsule is palette-driven
   (Cmd+K, Tab through the sidebar), so this is load-bearing, not polish. */
:focus-visible {
  outline: var(--ring-width) solid var(--ring);
  outline-offset: var(--ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
::selection { background: rgb(255 255 255 / 0.16); }

/* Scrollbars: auto-fading thumbs — transparent at rest, visible on interaction. */
::-webkit-scrollbar { width: var(--app-scrollbar-width); height: var(--app-scrollbar-width); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0%);
  border-radius: 99px;
  transition: background 200ms ease;
}
*:hover > ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background: rgb(255 255 255 / 12%);
}
::-webkit-scrollbar-thumb:active {
  background: rgb(255 255 255 / 20%);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] *:hover > ::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / 10%);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:active {
  background: rgb(0 0 0 / 18%);
}

.turn-verification { margin: 0.75rem 0 1.5rem; border: 1px solid var(--border-color); border-radius: 0.625rem; font-size: 0.8125rem; min-width: 0; }
.turn-verification > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; cursor: pointer; list-style: none; }
.turn-verification > summary::-webkit-details-marker { display: none; }
.turn-verification > summary:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; border-radius: 0.625rem; }
.verification-chevron { flex-shrink: 0; color: var(--text-muted); }
.turn-verification[open] > summary .verification-chevron { transform: rotate(90deg); }
.verification-state { color: var(--text-muted); margin-left: auto; text-align: right; }
.verification-state.passed { color: var(--green); }
.verification-state.failed, .verification-state.stale { color: var(--red); }
.verification-body { display: grid; gap: 0.75rem; padding: 0.25rem 0.75rem 0.75rem; min-width: 0; }
.verification-body p { margin: 0; }
.verification-path, .verification-command { overflow-wrap: anywhere; }
.verification-command { padding: 0.625rem; background: var(--bg); border-radius: 0.375rem; }
.verification-body .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.verification-body .actions button { min-height: 2rem; gap: 0.375rem; }
.verification-body .ghost:disabled { opacity: 0.4; cursor: default; }
.verification-add { display: grid; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; }
.verification-details { border-top: 1px solid var(--border-color); padding-top: 0.625rem; min-width: 0; }
.verification-details > summary { color: var(--text-muted); cursor: pointer; }
.verification-details > :not(summary) { margin-top: 0.75rem; }
.verification-path { display: block; }
.verification-error { color: var(--red); overflow-wrap: anywhere; }
.turn-missing-reply { font-size: 0.8125rem; line-height: 1.5; margin: 1rem 0; }
.verification-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; }
.verification-check small { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.8125rem; }
.verification-action { display: grid; gap: 0.5rem; }
.verification-body pre { max-height: 18rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8125rem; }

.app {
  position: relative;
  display: flex;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  overscroll-behavior-x: none;
}

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  min-width: var(--sidebar-min-width);
  max-width: var(--sidebar-max-width);
  flex-shrink: 0;
  background: var(--sidebar-fill, var(--bg-sidebar));
  backdrop-filter: var(--sidebar-filter, none);
  -webkit-backdrop-filter: var(--sidebar-filter, none);
  border-right: 1px solid var(--border-color);
  min-height: 0;
  overflow: hidden;
  transition:
    width var(--motion-fast) var(--motion-ease),
    min-width var(--motion-fast) var(--motion-ease),
    max-width var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}
.app.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  max-width: 0;
  border-right-color: transparent;
  pointer-events: none;
}

/* Fullscreen hides the window controls, so the 90px reserved for them is dead
   space. Collapsing to the sidebar's own gutter lines the toggle up with the
   search field and the rows under it; the page header follows the same token. */
:root[data-fullscreen="true"], :root[data-platform="windows"] {
  --workspace-traffic-inset: var(--sidebar-content-inset);
}

.sidebar-header {
  position: relative;
  display: flex;
  align-items: center;
  /* The toggle and the wordmark sit together after the traffic-light inset.
     With space-between the wordmark started at the 4.5rem padding and drifted
     to the middle of the rail, which read as a centred dialog title rather
     than a sidebar header. */
  justify-content: flex-start;
  gap: 0.45rem;
  height: var(--workspace-topbar-height);
  /* The app already has one number for clearing the window controls, and the
     page header uses it. This hardcoded 4.5rem was 18px tighter, so the toggle
     sat against the green button and under the Move & Resize menu macOS shows
     on hover. */
  padding: 0 0.5rem 0 var(--workspace-traffic-inset);
  border-bottom: 1px solid var(--border-color);
  -webkit-app-region: drag;
  flex-shrink: 0;
}
.sidebar-header button,
.sidebar-header input,
.sidebar-toggle {
  -webkit-app-region: no-drag;
}

.sidebar-header .sidebar-toggle {
  position: static;
  /* No auto margin. It pushed the toggle to the right when it was the second
     child; with the toggle first it absorbed the free space and shoved the
     toggle and the wordmark together into the middle of the rail. */
}

.page-header .sidebar-toggle {
  position: absolute;
  left: var(--workspace-traffic-inset);
  top: calc((var(--workspace-topbar-height) - var(--workspace-titlebar-control-size)) / 2);
  z-index: 3;
}
.icon-btn.sidebar-toggle:hover,
.icon-btn.sidebar-toggle:active {
  transform: none;
}

.sidebar-swipe-edge {
  position: absolute;
  left: 0;
  top: var(--workspace-topbar-height);
  bottom: 0;
  width: 12px;
  z-index: 6;
  pointer-events: none;
}
.app.sidebar-collapsed .sidebar-swipe-edge {
  pointer-events: auto;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--workspace-titlebar-control-size);
  height: var(--workspace-titlebar-control-size);
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text-faint);
  flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.icon-btn.active {
  background: var(--bg-active);
  color: var(--text);
}

.sidebar-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem var(--sidebar-content-inset) 0.2rem;
}
.sidebar-new {
  color: var(--text);
}
.sidebar-text-btn {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 0.75rem;
  text-align: left;
  padding: 0.1rem var(--sidebar-content-inset) 0.45rem;
  width: 100%;
}
.sidebar-text-btn:hover {
  color: var(--text);
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  height: 1.875rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.4rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  color: var(--text-faint);
  background: transparent;
}
.sidebar-search:focus-within {
  border-color: transparent;
  background: var(--bg-hover);
}
.sidebar-search input,
.sidebar-search input[type="search"] {
  font-size: 0.8125rem;
}
.sidebar-search svg {
  display: block;
  flex-shrink: 0;
}
.search-clear {
  width: 1.25rem !important;
  height: 1.25rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sidebar-search input,
.sidebar-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
  font-size: var(--text-xs);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
}
.sidebar-search input::-webkit-search-decoration,
.sidebar-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.sidebar-search input::placeholder {
  color: var(--overlay-0);
}

.sidebar-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 0 var(--sidebar-content-inset) 0.5rem;
}

.nav-label {
  color: var(--overlay-0);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 0.5rem 0.25rem;
}
.sidebar-empty {
  color: var(--text-faint);
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem;
}
.sidebar-scroll {
  --sidebar-row-inset: 0.2rem;
  --sidebar-icon-column: 1rem;
  --sidebar-column-gap: 0.25rem;
  --sidebar-title-inset: calc(var(--sidebar-row-inset) + 2 * (var(--sidebar-icon-column) + var(--sidebar-column-gap)));
}
.project-block .sidebar-empty,
.session-list > .sidebar-empty,
.sidebar-scroll .session-label {
  padding-left: var(--sidebar-title-inset);
}

.nav-item,
.list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--subtext-1);
  border-radius: var(--control-radius);
  padding: 0.32rem 0.5rem;
  text-align: left;
  font-size: 0.8125rem;
  min-height: 1.875rem;
  min-width: 0;
  overflow: hidden;
}
.nav-item svg,
.list-item svg {
  color: var(--text-faint);
  flex-shrink: 0;
}
.nav-item:hover,
.list-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.nav-item.active,
.list-item.active {
  background: var(--bg-active);
  color: var(--text);
}
.list-item .meta {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--text-faint);
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.session-label {
  color: var(--overlay-0);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.5rem 0.1rem;
}
.session-list {
  padding: 0.05rem 0 0.25rem;
}
.project-block {
  margin-bottom: 0.05rem;
  min-width: 0;
}
.project-row,
.thread-row {
  display: grid;
  /* Chevron/indent, glyph, title, metadata. The overflow menu is positioned
     out of flow so an invisible action never shortens the title. */
  position: relative;
  grid-template-columns: var(--sidebar-icon-column, 1rem) var(--sidebar-icon-column, 1rem) minmax(0, 1fr) auto;
  column-gap: var(--sidebar-column-gap, 0.25rem);
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--subtext-1);
  border-radius: 0.35rem;
  text-align: left;
  overflow: visible;
}
.project-row {
  padding: 0.28rem var(--sidebar-row-inset, 0.2rem);
  min-height: 1.9rem;
  line-height: 1.25;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--text);
  cursor: pointer;
}
.project-row.active {
  background: transparent;
}
.project-row:hover,
.thread-row:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.project-toggle,
.row-slot,
.project-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.15rem;
  min-width: 0;
  overflow: hidden;
  color: var(--text-faint);
}
.project-toggle {
  border: 0;
  background: transparent;
  border-radius: 0.25rem;
  padding: 0;
}
.project-toggle:hover {
  background: var(--bg-active);
  color: var(--text);
}
.row-slot svg,
.project-toggle svg {
  flex-shrink: 0;
  display: block;
}
.project-icon img,
.project-settings-icon img {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  object-fit: contain;
}
.thread-row {
  /* The first column lines up with the project chevron above it, placing the
     conversation glyph cleanly under the project folder icon. */
  padding: 0.24rem var(--sidebar-row-inset, 0.2rem);
  font-size: 0.8125rem;
  min-height: 1.8rem;
  cursor: pointer;
}
.thread-row.active {
  background: transparent;
  color: var(--text);
  font-weight: 550;
}
.thread-row.recede .truncate {
  color: var(--text-faint);
  font-weight: 400;
}
.thread-row.recede:hover .truncate,
.thread-row.recede.active .truncate {
  color: inherit;
}
.project-row .truncate,
.thread-row .truncate {
  min-width: 0;
}
.thread-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  min-width: 0;
  max-width: 4.5rem;
  overflow: hidden;
}
.thread-status {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.thread-status.working {
  color: var(--blue, #5b9fd4);
}
.thread-status.approval {
  color: var(--yellow);
}
.thread-status.failed {
  color: var(--red);
}
.thread-duration {
  font-variant-numeric: tabular-nums;
  margin-left: 0.25rem;
  font-weight: 500;
}
.thread-time {
  font-size: 0.625rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.thread-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  /* Out of the grid: invisible controls should not reserve width. */
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--text-faint);
  border-radius: 0.3rem;
  padding: 0;
  opacity: 0;
  z-index: 1;
}
.project-row:hover .thread-meta,
.thread-row:hover .thread-meta,
.project-row:focus-within .thread-meta,
.thread-row:focus-within .thread-meta,
.project-row[data-menu-open] .thread-meta,
.thread-row[data-menu-open] .thread-meta,
.project-row:has(.thread-more[aria-expanded="true"]) .thread-meta,
.thread-row:has(.thread-more[aria-expanded="true"]) .thread-meta {
  opacity: 0;
}
.thread-meta {
  transition: opacity var(--motion-instant, 120ms) var(--motion-ease, ease);
}
.project-row:hover .thread-more,
.thread-row:hover .thread-more,
.project-row:focus-within .thread-more,
.thread-row:focus-within .thread-more,
.project-row[data-menu-open] .thread-more,
.thread-row[data-menu-open] .thread-more,
.thread-more:focus-visible,
.thread-more[aria-expanded="true"] {
  opacity: 1;
}
.thread-more:hover,
.thread-more[aria-expanded="true"] {
  background: var(--bg-active);
  color: var(--text);
}
.sidebar-scroll .project-block > input,
.sidebar-scroll .session-list > input {
  width: calc(100% - var(--sidebar-title-inset) - 0.2rem + 0.4rem + 1px);
  margin: 0.15rem 0.2rem 0.15rem calc(var(--sidebar-title-inset) - 0.4rem - 1px);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  border-radius: var(--control-radius);
  padding: 0.22rem 0.4rem;
  font-size: 0.75rem;
  outline: none;
}
.show-more {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 0.6875rem;
  text-align: left;
  padding: 0.2rem 0.5rem 0.3rem var(--sidebar-title-inset, 2.7rem);
}
.show-more:hover {
  color: var(--text);
}

.sidebar-footer {
  padding: 0.4rem var(--sidebar-content-inset) 0.55rem;
  border-top: 1px solid transparent;
}
.sidebar-utils {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.sidebar-utils .icon-btn {
  position: relative;
}
.sidebar-utils .dot {
  margin-left: 0.35rem;
  margin-right: 0.25rem;
}
.update-feedback-bubble {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  margin-bottom: 0.45rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--control-radius, 0.375rem);
  background: var(--bg-hover, #1e2024);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  color: var(--text, #ececec);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  animation: fadeIn 0.15s ease-out;
  cursor: pointer;
  user-select: none;
}
.update-feedback-bubble.has-update {
  border-color: var(--green, #22c55e);
  color: var(--green, #22c55e);
  background: color-mix(in srgb, var(--green) 12%, var(--bg-sidebar, #16171a));
}
.update-dot {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 99px;
  background: var(--green, #22c55e);
}
@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.icon-btn.is-spinning svg {
  animation: icon-spin 0.75s linear infinite;
}
.util-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 0.85rem;
  height: 0.85rem;
  padding: 0 0.15rem;
  border-radius: 99px;
  background: var(--yellow);
  color: #111;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 0.85rem;
  text-align: center;
}

.sidebar-rail {
  touch-action: none;
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 4;
}
.sidebar-rail:hover,
.sidebar-rail:active {
  background: rgb(255 255 255 / 8%);
}

.workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.page-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: var(--workspace-topbar-height);
  min-height: var(--workspace-topbar-height);
  padding: 0 0.75rem 0 1rem;
  border-bottom: 1px solid var(--border-color);
  -webkit-app-region: drag;
  flex-shrink: 0;
  container-type: inline-size;
  container-name: page-header;
}
/* Chips give up what they can spare before they start losing letters: first
   the branch, which the composer's footer also carries, then the labels. Left
   to shrink on their own they compressed into unreadable slivers of icon. */
@container page-header (max-width: 46rem) {
  .topbar-chip-btn.git-chip {
    display: none;
  }
}
@container page-header (max-width: 34rem) {
  .topbar-chip-btn > span {
    display: none;
  }
  .topbar-chip-btn {
    padding: 0 0.4rem;
  }
}
.page-header.with-traffic {
  padding-left: var(--workspace-titlebar-content-left);
}
.page-header button,
.page-header input {
  -webkit-app-region: no-drag;
}

.page-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.page-title b {
  color: var(--text);
  font-weight: 600;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
/* The action group gives way before the title does. It used to be the other
   way round: at a narrow window the chips held their full width and the
   breadcrumb was squeezed to nothing, so the header stopped saying which
   conversation you were in. */
.header-actions:not(.header-lead) {
  min-width: 0;
  flex-shrink: 1;
}
.header-lead {
  flex: 1 1 auto;
  min-width: 4rem;
  justify-content: flex-start;
}
.grow {
  flex: 1;
  min-width: 0;
}
.inline-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.status-dot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--workspace-titlebar-control-size);
  height: var(--workspace-titlebar-control-size);
  border: 0;
  background: transparent;
  border-radius: var(--control-radius);
}
.status-dot-btn:hover {
  background: var(--bg-hover);
}

.dot {
  /* Colour drives `background` through currentColor so the pulse ring below can
     pick up the same value without repeating every state. */
  color: var(--overlay-0);
  background: currentColor;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 99px;
  flex-shrink: 0;
}
.dot.on {
  color: var(--green);
}
.dot.warn {
  color: var(--yellow);
}
.dot.off {
  color: var(--red);
}

/*
 * Live indicator: a ring that expands out of the dot and fades.
 *
 * Only `transform` and `opacity` are animated — both run on the compositor, so
 * the pulse never forces a style resolve or repaint on the main thread. An
 * equivalent effect built from an animated box-shadow or width/height does,
 * and costs real CPU for something that runs forever behind a live session.
 */
/* Pulse means "work is happening", not "state is good" — a permanently
   pulsing healthy indicator is just noise. Applied to a live harness turn and
   to `connecting`, never to a settled `connected`. */
.dot.live {
  position: relative;
  overflow: visible;
}
.dot.live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  animation: dot-pulse 1.9s var(--motion-ease, cubic-bezier(0.25, 1, 0.5, 1)) infinite;
  pointer-events: none;
}
@keyframes dot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70% {
    transform: scale(2.8);
    opacity: 0;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.workspace-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.page-content,
.main,
.panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.main {
  background: var(--bg);
}

.conversation {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 1.25rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
}
.thread {
  width: min(var(--chat-max), 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /*
   * A short thread sits on the composer instead of pinned to the top with a
   * void beneath it. `auto` on the top margin does the work: the column grows
   * downward once it is taller than the scroller, and the reader's eye stays
   * where the next message will appear.
   */
  margin-top: auto;
  min-height: min-content;
}
.thread:has(.empty-thread) {
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}
.main.conversation-empty {
  justify-content: center;
}
.conversation-empty .conversation {
  flex: 0 0 auto;
  overflow: visible;
  padding: 0 1.5rem;
}
.conversation-empty .thread:has(.empty-thread) {
  flex: 0 0 auto;
  min-height: 0;
}
.conversation-empty .composer {
  padding-bottom: 0;
}
.conversation-empty .composer::before {
  display: none;
}
.conversation-empty .composer-glass {
  display: flex;
  flex-direction: column;
  min-height: 6rem;
}
.conversation-empty .composer-glass textarea {
  flex: 1;
}
.conversation-empty .composer-row {
  margin-top: auto;
}

.empty-thread {
  width: min(36rem, 100%);
  margin: 0 auto;
  text-align: center;
  padding: 0 1rem 1.65rem;
}
/*
 * The mark alone, with no tile behind it.
 *
 * The app icon is a dark square with the mark drawn on it, so dropping it on
 * this page put a slightly darker rectangle in the middle of the screen. This
 * is the glyph lifted out of that icon as an alpha mask, painted in the text
 * colour — which also means it follows the theme rather than being a white
 * PNG that vanishes on a light background.
 */
.empty-thread-mark {
  width: 3.5rem;
  height: 3.5rem;
  background: currentColor;
  color: var(--text-faint);
  -webkit-mask-image: url("./mark-DA5W5cnl.png");
  mask-image: url("./mark-DA5W5cnl.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /*
   * Room above the heading. Fourteen pixels between a 40px mark and a 32px
   * heading read as one crowded lump; the mark is its own thing and needs to
   * sit apart from the sentence.
   */
  margin: 0 auto 1.75rem;
  display: block;
}
.empty-thread h1 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  /* The heading and the line under it are one thought; the gap says so. */
  margin: 0 0 0.75rem;
  line-height: 1.15;
}
.empty-thread h1 span {
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.14em;
}
.empty-thread p {
  color: var(--text-muted);
  margin: 0 auto 1.35rem;
  font-size: .9375rem;
  line-height: 1.5;
  max-width: 28rem;
}
.empty-thread .actions {
  justify-content: center;
}
.empty-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 0.25rem;
}

.msg {
  width: 100%;
  margin: 0 0 1.1rem;
}
/*
 * Turn metadata (time, copy, a steer marker) is chrome: it earns its space
 * only while you are pointing at the turn. Reserving the row height keeps the
 * transcript from jumping as the pointer moves down it.
 */
.msg .who {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.1rem;
  font-size: 0.6875rem;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--motion-instant, 120ms) var(--motion-ease, ease);
}
.msg:hover .who,
.msg:focus-within .who {
  opacity: 1;
}
/* A steer marker is semantic, not chrome — it stays legible without hover. */
.msg .who:has(.tag) {
  opacity: 1;
}
.msg .who:has(.copy-action[data-feedback="true"]) { opacity: 1; }
.copy-action { display: inline-flex; align-items: center; gap: 0.35rem; }
.copy-action-feedback { font-size: 0.6875rem; color: var(--text-muted); font-weight: 400; }
.copy-action-feedback:empty { display: none; }
@media (hover: none) { .msg .who { opacity: 1; } }
/* Pagination control sits above the oldest loaded message. */
.load-older {
  display: flex;
  justify-content: center;
  padding: 0 0 0.75rem;
}
/* Marks a turn that steered an in-flight run rather than starting one. */
.msg .tag {
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  padding: 0 0.3rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.msg .when {
  font-weight: 400;
  color: rgb(255 255 255 / 28%);
}
.msg-actions {
  margin-left: auto;
  opacity: 0;
  transition: opacity 120ms ease;
}
.msg:hover .msg-actions {
  opacity: 1;
}
/*
 * MessageBody's own presentation, wherever it is mounted.
 *
 * It used to hang off `.msg .body` alone. The pull-request panel mounts the
 * same component, so a description arrived there with its line breaks
 * collapsed into one run-on paragraph and its inline code and links rendered
 * as plain prose — the markdown was parsed correctly and then thrown away by
 * the stylesheet.
 */
.body {
  line-height: 1.55;
  white-space: pre-wrap;
  /* Long paths and URLs must wrap rather than widen the panel they sit in. */
  overflow-wrap: anywhere;
}
.body code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgb(255 255 255 / 7%);
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
}
.body a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.msg .body {
  font-size: var(--text-message);
}
.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.message-attachment {
  display: grid;
  align-items: center;
  gap: 0.4rem;
  min-width: 9rem;
  max-width: 18rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--surface-0);
  color: var(--text-muted);
  padding: 0.4rem 0.55rem;
  text-align: left;
}
.message-attachment:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.message-attachment span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}
.message-attachment small {
  color: var(--text-faint);
  font-size: 0.625rem;
}
.message-attachment .message-attachment-caption {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.message-attachment-caption > span { flex: 1; }
.message-attachment-caption > svg, .message-attachment-caption > small { flex-shrink: 0; }
.message-attachment-image { width: min(20rem, 100%); max-width: 20rem; padding: 0; overflow: hidden; }
.message-attachment-image .message-attachment-caption { padding: 0.45rem 0.65rem; }
.message-image-preview { display: grid; place-items: center; min-height: 6rem; height: 11.25rem; background: var(--surface-1); }
.message-image-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.message-attachments { max-width: 100%; }
.app-update-control { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; min-width: 0; max-width: 100%; }
.app-update-control p { font-size: 0.8125rem; max-width: 28rem; overflow-wrap: anywhere; margin: 0; }
.app-update-control p:empty { display: none; }
.app-update-control progress { width: 100%; max-width: 18rem; }
.app-update-release-link { color: var(--text-muted); font-size: .8125rem; text-underline-offset: .2em; }
.about-modal-actions > button { min-height: 2.4rem; margin: 0; }
.sidebar-footer button.update-feedback-bubble { width: 100%; text-align: left; font-size: 0.75rem; line-height: 1.4; overflow-wrap: anywhere; }
.msg-code {
  margin: 0.55rem 0;
  padding: 0.7rem 0.8rem;
  background: rgb(255 255 255 / 4%);
  border-radius: 0.6rem;
  font-size: 0.867em;
  /* Wrap rather than scroll: a reply is read in a narrow column, and having to
     scroll right to see the end of a command is worse than a wrapped line.
     overflow-wrap catches tokens with no break opportunity (long paths, URLs). */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

/* Minimal syntax colours. Enough to separate strings, comments and keywords
   from the rest; not a full grammar. */
.tok-str { color: var(--green); }
.tok-com { color: var(--overlay-1); font-style: italic; }
.tok-num { color: var(--yellow); }
.tok-kw { color: var(--blue); font-weight: 600; }
.msg.user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.msg.user .who {
  width: 100%;
}
.msg.user .body {
  max-width: 75%;
  width: fit-content;
  background: rgb(255 255 255 / 6%);
  border-radius: 1.1rem 1.1rem 0.35rem 1.1rem;
  padding: 0.7rem 0.95rem;
  color: var(--text);
}

.progress {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.375rem;
  /* Grid tracks size to their content, so one long command stretched every
     row past the card and the card clipped it mid-word. */
  min-width: 0;
}
.progress > * {
  min-width: 0;
}
.step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.step > .glyph,
.step > svg {
  flex-shrink: 0;
}
.step.active {
  color: var(--text);
}
.step.error { color: var(--red); }
/* The label names the phase; the detail is the agent's most recent line for
   that phase and must not push the label out of the row. */
.step-label { flex-shrink: 0; }
.step-detail {
  /* Takes what is left of the row and ends in an ellipsis. Without the flex
     basis it kept its content width and there was nothing to truncate. */
  flex: 1 1 auto;
  color: var(--text-faint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step.complete {
  color: var(--green);
}
.glyph {
  width: 0.875rem;
  text-align: center;
  font-size: 0.75rem;
}

.advanced {
  margin-top: 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 3%);
  overflow: hidden;
}
.advanced summary {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.8125rem;
}
/* Execution rows: fixed-width time, a dim kind tag, then the text. */
.event-log > div {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.event-time { color: var(--overlay-0); flex-shrink: 0; }
.event-kind {
  color: var(--text-faint);
  flex-shrink: 0;
  min-width: 4.5rem;
}
.event-text { min-width: 0; overflow-wrap: anywhere; }
.run-event-log .event-text { white-space: pre-wrap; }
.run-log-pages { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.75rem; }
.event-log {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0 0.75rem 0.75rem;
  color: var(--text-muted);
  display: grid;
  gap: 0.25rem;
}

.jump-latest {
  align-self: center;
  z-index: 2;
  margin: 0 0 0.35rem;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--surface-0) 88%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  color: var(--subtext-1);
  font-size: 0.75rem;
}
.jump-latest:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.composer {
  position: relative;
  container-type: inline-size;
  container-name: composer;
  padding: 0 1.25rem 1.05rem;
  flex-shrink: 0;
}
.composer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2.75rem;
  height: 2.75rem;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}
.suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: var(--chat-max);
  margin: 0 auto 0.65rem;
  position: relative;
  z-index: 1;
}

.composer-glass {
  position: relative;
  z-index: 1;
  isolation: isolate;
  max-width: var(--chat-max);
  margin: 0 auto;
  border-radius: var(--composer-radius);
  padding: 0.85rem 0.9rem 0.6rem;
  box-shadow: 0 12px 28px -18px rgb(0 0 0 / 55%);
  overflow: visible;
}
.suggest-menu {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: calc(100% + 0.4rem);
  z-index: 5;
  padding: 0.3rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(255 255 255 / 10%);
  background: color-mix(in srgb, var(--surface-0) 92%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow);
  max-height: 14rem;
  overflow: auto;
}
.suggest-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-radius: 0.45rem;
  color: var(--text);
  font-size: 0.8125rem;
}
.suggest-menu button .meta {
  color: var(--text-faint);
  font-size: 0.6875rem;
}
.suggest-menu button:hover,
.suggest-menu button.active {
  background: var(--bg-hover);
}
.suggest-copy { display: flex; min-width: 0; flex: 1; gap: 0.65rem; align-items: baseline; }
.suggest-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; max-width: 60%; }
.suggest-copy .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-badge { font-size: 0.6875rem; border: 1px solid var(--border); border-radius: 0.3rem; padding: 0.1rem 0.3rem; max-width: 25%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-empty { color: var(--text-muted); font-size: 0.8125rem; padding: 0.75rem; }
.composer-context-picker { position: absolute; z-index: 8; left: 0; right: 0; bottom: calc(100% + 0.4rem); border: 1px solid var(--border); background: var(--surface-0); border-radius: 0.8rem; padding: 0.5rem; box-shadow: var(--shadow); }
.composer-context-picker .suggest-menu { position: static; border: 0; box-shadow: none; background: none; backdrop-filter: none; max-height: min(16rem, 30vh); }
.composer-context-picker input { width: 100%; box-sizing: border-box; margin: 0.3rem 0; font-size: 0.875rem; }
.composer-context-tabs { display: flex; align-items: center; gap: 0.35rem; }
.composer-context-tabs button { background: transparent; border: 0; border-radius: 0.35rem; padding: 0.35rem 0.5rem; font-size: 0.8125rem; }
.composer-context-tabs button[aria-pressed="true"] { background: var(--bg-hover); color: var(--text); }
.composer-context-tabs button:last-child { margin-left: auto; }
.composer-context-chips { display: flex; gap: 0.35rem; padding: 0.2rem 0 0.45rem; align-items: center; min-width: 0; }
.composer-skill-chip { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; border: 1px solid var(--border); border-radius: 0.4rem; background: var(--bg-hover); font-size: 0.8125rem; padding: 0.15rem 0.35rem; }
.composer-skill-chip > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer-skill-chip button { display: flex; padding: 0.2rem; background: transparent; border: 0; }
.thread-agents { display: flex; flex-direction: column; gap: 0.8rem; font-size: 0.875rem; }
.thread-agents header, .thread-agent-heading { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.thread-agents h3, .thread-agents h4 { margin: 0; }
.thread-agents header .meta { margin-left: auto; }
.thread-agent-heading > .agent-glyph { flex-shrink: 0; }
.thread-agent-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.thread-agent-card { padding: 0.85rem; border: 1px solid var(--border-color); border-radius: 0.65rem; min-width: 0; background: var(--surface-0); }
.thread-agent-card p { margin: 0.4rem 0; }
.thread-agents-empty { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 0.25rem; color: var(--text-muted); }
.thread-agents-empty > svg { flex-shrink: 0; margin-top: 0.15rem; }
.inspector .thread-agents .thread-agents-empty h4 { margin: 0; color: var(--text); font-size: 0.875rem; font-weight: 500; text-transform: none; letter-spacing: normal; }
.thread-agents-empty p { margin: 0.4rem 0 0; font-size: 0.8125rem; }
.thread-agents-header h3 { font-size: 0.875rem; font-weight: 500; }
.thread-agents-section-label { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.75rem; color: var(--text-muted); }
.thread-agent-heading strong { white-space: nowrap; font-size: 0.875rem; }
.thread-agent-heading > svg { flex-shrink: 0; }
.thread-agent-status { margin: 0.45rem 0; font-size: 0.75rem; color: var(--text-muted); overflow-wrap: anywhere; }
.thread-agent-status[data-active="true"] { color: var(--text); }
.thread-agents .meta { font-size: 0.75rem; color: var(--text-muted); overflow-wrap: anywhere; }
.thread-agents footer { border-top: 1px solid var(--border-color); padding-top: 0.7rem; }
.thread-agents footer button { font-size: 0.8125rem; }
.thread-agents-empty p, .thread-agents-details p { line-height: 1.55; }
.thread-agents-details { color: var(--text-muted); font-size: 0.8125rem; }
@media (max-width: 600px) {
  .suggest-copy { flex-direction: column; gap: 0.2rem; align-items: stretch; }
  .suggest-name { max-width: 100%; }
}
.composer-glass::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface-0) var(--glass-opacity), transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
.composer-glass::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--border-color);
  box-shadow: inset 0 1px var(--bg-hover);
}
.composer textarea {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 3.5rem;
  max-height: 11rem;
  resize: none;
  border: 0;
  background: transparent;
  outline: none;
  line-height: 1.45;
  font-size: var(--text-message);
}
.composer textarea::placeholder {
  color: var(--overlay-0);
}
.composer-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
  container-type: inline-size;
  container-name: composer-row;
}
/* Wrap controls rather than turning named features into anonymous chevrons. */
.composer-attachments {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 0.45rem;
}
.composer-attachment {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 16rem;
  gap: 0.35rem;
  border: 1px solid var(--border-color);
  border-radius: 0.45rem;
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 0.28rem 0.35rem 0.28rem 0.45rem;
  font-size: 0.6875rem;
}
.composer-attachment > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-attachment button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--text-faint);
}
.composer-attachment button:hover {
  background: var(--bg-active);
  color: var(--text);
}
.composer-stash {
  position: absolute;
  z-index: 8;
  left: 0.65rem;
  bottom: 3.2rem;
  width: min(24rem, calc(100% - 1.3rem));
  max-height: 16rem;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--surface-0) 96%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--shadow);
  padding: 0.3rem;
}
.composer-stash > p {
  margin: 0;
  padding: 0.65rem;
  color: var(--text-faint);
  font-size: 0.75rem;
}
.composer-stash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem 0.45rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
}
.composer-stash-head small { color: var(--text-faint); }
.composer-stash-entry {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-top: 1px solid var(--border-color);
  padding: 0.2rem;
}
.composer-stash-restore {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 0.12rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text);
  padding: 0.4rem 0.45rem;
  text-align: left;
}
.composer-stash-restore:hover { background: var(--bg-hover); }
.composer-stash-restore span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}
.composer-stash-restore small {
  color: var(--text-faint);
  font-size: 0.625rem;
}
.composer-stash-button { position: relative; }
.composer-stash-button > span {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  display: grid;
  place-items: center;
  min-width: 0.9rem;
  height: 0.9rem;
  padding: 0 0.18rem;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 0.5625rem;
  font-weight: 700;
}
/* Named controls remain reachable when the inspector narrows the composer. */
.composer-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  flex-wrap: nowrap;
}
.composer-options-inline { display: flex; align-items: center; gap: .25rem; }
.composer-options-overflow { display: none; }
.composer-controls > .menu-select:first-child { flex-shrink: 1; }
.menu-select {
  position: relative;
  flex-shrink: 0;
}
/* Ghost, not a pill. Five filled pills in a row read as five competing
   buttons; the controls are settings you glance at, so they carry no chrome
   until you point at them. */
.menu-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.75rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0 0.4rem;
  border-radius: var(--control-radius);
  max-width: 12rem;
  line-height: 1;
}
/* A label gives way before its control does, so a row that is a few pixels
   short ellipsises a word instead of cutting a chevron in half. */
.composer-controls .menu-select {
  min-width: 0;
}
.composer-controls .menu-select-trigger {
  min-width: 0;
  max-width: 100%;
}
.composer-controls .menu-select-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-select-trigger svg {
  flex-shrink: 0;
}
.menu-select-trigger--icon { width: 1.75rem; justify-content: center; padding: 0; font-size: 1.125rem; }
.menu-select-trigger > svg:last-child {
  color: var(--overlay-0);
  margin-left: -0.1rem;
}
.menu-select-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-select-trigger:hover,
.menu-select-trigger[aria-expanded="true"] {
  color: var(--text);
  background: var(--bg-hover);
}
.menu-select-trigger:hover > svg:last-child,
.menu-select-trigger[aria-expanded="true"] > svg:last-child {
  color: inherit;
}
.menu-select-pop {
  position: fixed;
  z-index: 10000;
  /* The detail lines are sentences. Without a cap the menu grew to the width
     of the longest one and covered the whole transcript. */
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.3rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--surface-0) 96%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--shadow);
  max-height: min(16rem, calc(100vh - 6rem));
  overflow: auto;
}
.menu-select-pop button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.42rem 0.6rem;
  border-radius: 0.45rem;
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.menu-select-pop button:hover,
.menu-select-pop button.active {
  background: var(--bg-hover);
}
.menu-option-group { padding: .5rem .6rem .3rem; color: var(--text-faint); font-size: .6875rem; font-weight: 500; }
.menu-select-pop button[aria-disabled="true"] { color: var(--text-muted); cursor: help; }
.menu-select-pop button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.steer-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.4rem;
  margin: 0.15rem 0 0.35rem;
}
.steer-row input {
  flex: 1;
  border: 0;
  background: rgb(255 255 255 / 4%);
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
  outline: none;
  font-size: 0.75rem;
}

.composer-preflight {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 0 0.45rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--yellow) 32%, var(--border-color));
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--yellow) 7%, transparent);
  color: var(--text-muted);
  font-size: 0.6875rem;
}
/* Two lines at most, and the whole sentence on hover: this sits above the
   thread, and a paragraph there pushes the conversation off screen. */
.composer-preflight > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.composer-preflight .ghost { flex-shrink: 0; font-size: 0.6875rem; }
.workspace-mode-label { color: var(--green); }

.composer-context {
  position: relative;
  width: calc(100% - 2rem);
  max-width: calc(var(--chat-max) - 2rem);
  margin: -.6rem auto 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem .8rem .5rem;
  font-size: .75rem;
  background: color-mix(in srgb, var(--surface-0) 65%, transparent);
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 .8rem .8rem;
  color: var(--text-faint);
  overflow: visible;
  flex-wrap: wrap;
}
.composer-context button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-context > button:first-child { min-width: 0; display: block; text-align: left; }
.composer-context > button:first-child svg { margin-right: .3rem; vertical-align: -.1rem; }
.composer-context button:hover {
  color: var(--text);
}
/*
 * The branch picker is the same control the composer uses above, where a
 * 1.75rem height and its own type are right. In this row they were not: it
 * rendered larger and bolder than the folder and terminal beside it, and its
 * height pushed the whole line off its baseline. Here it is one of the row.
 */
.composer-context .menu-select-trigger {
  height: auto;
  padding: 0;
  gap: 0.3rem;
  font-size: inherit;
  font-weight: inherit;
}
.composer-context button.missing {
  color: var(--yellow);
  font-weight: 600;
}
@container composer (max-width: 28rem) {
  .composer-context .menu-select-trigger > span { display: none; }
  .composer-context .menu-select-trigger { min-height: 1.5rem; }
}
.folder-chip-wrap {
  position: relative;
  display: inline-flex;
}
.folder-count {
  color: var(--text-faint);
}
.folder-panel-anchor {
  position: fixed;
  z-index: 80;
  width: min(22rem, calc(100vw - 1.5rem));
}
.folder-panel {
  background: var(--bg-elevated, var(--bg));
  border: 1px solid var(--border-color);
  border-radius: 0.7rem;
  box-shadow: 0 12px 40px rgb(0 0 0 / 28%);
  padding: 0.7rem;
  color: var(--text);
}
.folder-panel-head {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-bottom: 0.55rem;
}
.folder-panel-title {
  font-size: 0.8125rem;
  font-weight: 600;
}
.folder-panel-path,
.folder-panel-note {
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.folder-panel-note {
  margin-bottom: 0.5rem;
}
.folder-panel-list {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.folder-panel-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.folder-panel-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0.15rem 0;
  min-width: 0;
}
.folder-panel-item .meta {
  color: var(--text-faint);
  font-size: 0.625rem;
}
.folder-badge {
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: auto;
}
.folder-panel-item-actions {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.folder-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.files-roots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}
.files-roots button {
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.625rem;
}
.files-roots button.active {
  color: var(--text);
  background: var(--bg-hover);
}
.files-path {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.6875rem;
  color: var(--text-faint);
  font-family: var(--font-mono, ui-monospace, monospace);
  margin-bottom: 0.4rem;
}
.files-empty .actions {
  margin-top: 0.6rem;
}

.chip,
.send,
.ghost,
.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  height: 1.625rem;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  background: transparent;
  border-radius: var(--control-radius, 0.375rem);
  padding: 0 0.65rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--motion-instant, 100ms) var(--motion-ease),
    color var(--motion-instant, 100ms) var(--motion-ease),
    border-color var(--motion-instant, 100ms) var(--motion-ease);
}
.chip:hover,
.ghost:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-hover, var(--border-color));
}
select {
  /* min-height, not height: .field-select adds 0.45rem of vertical padding, and
     with a hard 28px box that left an 11.6px content box for a 13px font — the
     option label was clipped through its baseline. min-height can only grow a
     box that is too small, so it fixes that without shrinking any other select. */
  min-height: 1.75rem;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  background: var(--base);
  border-radius: var(--control-radius, 0.375rem);
  padding: 0 0.55rem;
  font-size: 0.75rem;
  color: var(--subtext-0);
}
.send {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  font-weight: 500;
}
.send:hover:not(:disabled) {
  opacity: 0.92;
}
.send:disabled {
  opacity: 0.38;
}
.danger {
  color: var(--red);
  border-color: rgb(217 137 137 / 0.28);
}
.danger:hover {
  background: rgb(217 137 137 / 0.12);
  color: var(--red);
}

.send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 90%, transparent);
  color: var(--accent-fg);
  flex-shrink: 0;
  transition: background var(--motion-instant, 100ms) ease, opacity var(--motion-instant, 100ms) ease;
}
.send-btn:hover:not(:disabled) {
  background: var(--accent);
}
.send-btn:disabled {
  opacity: 0.3;
}
.send-btn.stop {
  background: var(--bg-active);
  color: var(--text);
}
.send-btn.stop:hover:not(:disabled) {
  background: var(--border-strong);
}

.panel {
  overflow: auto;
  background: var(--bg);
  padding: 1.25rem 1.5rem 2.5rem;
}
.panel-inner {
  width: min(var(--chat-max), 100%);
  margin: 0 auto;
}
.panel-header {
  margin: 0 0 1.1rem;
}
.panel-header h2 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.panel-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.card {
  border: 1px solid var(--border-color);
  background: rgb(255 255 255 / 3%);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.65rem;
}
button.card {
  width: 100%;
  text-align: left;
}
button.card:hover {
  background: rgb(255 255 255 / 5%);
}
button.card.active {
  border-color: rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 6%);
}
.card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
}
.card pre.mono {
  max-height: 12rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}
.row > :first-child {
  min-width: 0;
}
.muted {
  color: var(--text-muted);
}
.faint {
  color: var(--text-faint);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
input[type="text"],
input[type="password"],
textarea.field,
.field-select {
  width: 100%;
  border: 1px solid var(--border-color);
  background: rgb(255 255 255 / 3%);
  border-radius: var(--control-radius);
  padding: 0.45rem 0.625rem;
  outline: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea.field:focus,
select:focus,
.field-select:focus {
  border-color: rgb(255 255 255 / 0.22);
}
.field-select {
  width: auto;
  min-width: 11rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text);
}
.setting-control .field-select {
  max-width: 14rem;
}
.setting-stacked {
  grid-template-columns: 1fr;
  align-items: start;
}
.setting-stacked .setting-control {
  justify-content: stretch;
  min-width: 0;
}
.setting-stacked .field-select {
  max-width: none;
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
}
.git-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.palette-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--background, #09090b) 64%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: start center;
  padding-top: 16vh;
  z-index: 1000;
}
.palette-backdrop.center {
  place-items: center;
  padding-top: 0;
}
.palette {
  width: min(34rem, calc(100vw - 2rem));
  background: color-mix(in srgb, #121215 96%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 72px -20px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  outline: none;
}
.palette-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  height: 3.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.palette-search-row svg {
  color: var(--text-muted, #71717a);
  flex-shrink: 0;
}
.palette-search-row input,
.palette input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  outline: none;
  font-size: 0.9375rem;
  color: var(--text, #f4f4f5);
}
.palette > input {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.palette input::placeholder {
  color: var(--text-faint, #71717a);
}
.palette button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--text-muted, #a1a1aa);
  font-size: 0.8125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 120ms ease, color 120ms ease;
}
.palette button:hover,
.palette button.active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.approval {
  border: 1px solid rgb(255 255 255 / 10%);
  background: rgb(255 255 255 / 4%);
  border-radius: 0.85rem;
  padding: 0.9rem;
  margin: 1rem auto;
  max-width: var(--chat-max);
}
.approval h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}
.actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.row > .actions {
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  margin-top: 0;
}
.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
}

.inspector {
  width: var(--inspector-width);
  flex-shrink: 0;
  border-left: 1px solid var(--border-color);
  background: var(--bg-sidebar);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  min-height: 0;
}
.inspector.maximized {
  width: min(68rem, 60vw) !important;
}

.inspector-rail {
  touch-action: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 12;
}
.inspector-rail:hover,
.inspector-rail:active {
  background: rgb(255 255 255 / 12%);
}

/* Heading navigation without changing transcript layout or copied text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  user-select: none;
}

/* Inspector tool tabs */
.codex-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.5rem;
  padding: 0.2rem 0.4rem 0.2rem 0.65rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-sidebar);
  flex-shrink: 0;
  gap: 0.35rem;
}
.codex-tabs-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  min-width: 0;
  flex: 1;
}
.codex-tabs-list::-webkit-scrollbar {
  display: none;
}
.codex-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem 0.25rem 0.15rem 0.45rem;
  border-radius: var(--control-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background var(--motion-instant) var(--motion-ease),
    color var(--motion-instant) var(--motion-ease),
    border-color var(--motion-instant) var(--motion-ease);
}
.codex-tab-main {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  font: inherit;
  min-width: 0;
}
.codex-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.codex-tab.active {
  background: var(--surface-0);
  color: var(--text);
  border-color: var(--border-color);
  font-weight: 550;
}
.codex-tab-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-faint);
  flex-shrink: 0;
}
.codex-tab.active .codex-tab-icon {
  color: var(--text-muted);
}
.codex-tab-title {
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 99px;
  color: var(--text-faint);
  opacity: 0;
  cursor: pointer;
  transition:
    opacity var(--motion-instant) var(--motion-ease),
    background var(--motion-instant) var(--motion-ease);
}
.codex-tab:hover .codex-tab-close,
.codex-tab.active .codex-tab-close {
  opacity: 0.7;
}
.codex-tab-close:hover {
  opacity: 1 !important;
  background: var(--bg-hover);
  color: var(--text);
}
.codex-tab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.codex-tab-add:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.codex-tab-add.active {
  background: var(--bg-active);
  color: var(--text);
}
.codex-chrome-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  margin-left: 0.4rem;
}

/* Subpath Breadcrumb Bar */
.codex-sub-bar {
  display: flex;
  align-items: center;
  height: 1.65rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--surface-0) 55%, transparent);
  font-size: 0.6875rem;
  color: var(--text-faint);
  flex-shrink: 0;
}
.codex-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}
.codex-breadcrumb-dir,
.codex-breadcrumb-file {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-breadcrumb-slash {
  color: var(--overlay-0);
  font-weight: 600;
}
.codex-breadcrumb-sep {
  color: var(--overlay-0);
  margin: 0 0.2rem;
}
.codex-breadcrumb-count {
  color: var(--yellow);
  font-weight: 500;
  margin-left: 0.3rem;
}

/* Main content wrapper */
.codex-inspector-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* State 1: Launcher Cards (matching Screenshot 1) */
.codex-launcher {
  flex: 1;
  display: flex;
  /* Column, not row: this centred a single child before the heading existed,
     and adding one turned it into a sibling sitting beside the cards. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  min-height: 0;
  overflow-y: auto;
  container-type: inline-size;
}
/* Two across where the panel allows it. A single column of full-width cards
   reads as a menu; a grid reads as a choice, and each card is short. */
.codex-launcher-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  max-width: 34rem;
}
@container (max-width: 30rem) {
  .codex-launcher-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 21.5rem;
  }
}
.codex-launcher-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.62rem 0.95rem;
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--border-color);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 450;
  cursor: pointer;
  text-align: left;
  transition:
    background var(--motion-instant) var(--motion-ease),
    border-color var(--motion-instant) var(--motion-ease),
    transform var(--motion-instant) var(--motion-ease);
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}
.codex-launcher-card:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-hover, rgb(255 255 255 / 14%));
}
.codex-launcher-card:active {
  background: var(--bg-active);
}
.codex-launcher-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.codex-launcher-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.codex-launcher-card:hover .codex-launcher-icon {
  color: var(--text);
}
.codex-launcher-label {
  font-weight: 500;
}
.codex-launcher-kbd {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
  background: rgb(255 255 255 / 5%);
  border: 1px solid var(--border-color);
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  letter-spacing: 0.02em;
}

/* State 2: Files Split Workspace (matching Screenshot 2) */
.codex-files-workspace {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.codex-file-preview-pane {
  flex: 1;
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.codex-file-preview-pane .file-preview {
  flex: 1;
  min-height: 0;
  padding: 0.7rem 0.85rem;
}
.codex-file-preview-pane .file-preview-code,
.codex-file-preview-pane .file-editor-area {
  flex: 1;
  max-height: none;
}
.codex-empty-file-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}
.codex-empty-file-icon {
  color: var(--text-faint);
  margin-bottom: 0.85rem;
  opacity: 0.5;
}
.codex-empty-file-state h3 {
  font-size: 1.05rem;
  font-weight: 550;
  color: var(--text);
  margin: 0 0 0.35rem;
}
.codex-empty-file-state p {
  font-size: 0.8125rem;
  color: var(--text-faint);
  margin: 0;
}
.send-btn-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.codex-file-tree-pane {
  width: min(14.5rem, 42%);
  min-width: 10.5rem;
  max-width: 18rem;
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface-0) 45%, transparent);
  flex-shrink: 0;
  overflow: hidden;
}
.codex-file-tree-pane.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14.5rem;
  max-width: none;
  min-width: 12rem;
  z-index: 3;
  box-shadow: -12px 0 24px rgb(0 0 0 / 28%);
}
.codex-tree-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.65rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  box-sizing: border-box;
}
.codex-tree-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-faint);
  pointer-events: none;
}
.codex-tree-search-icon svg {
  display: block;
}
.codex-tree-search {
  flex: 1;
  min-width: 0;
  height: 1.25rem;
  line-height: 1.25rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  outline: none;
  padding: 0;
}
.codex-tree-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
  border-radius: 99px;
}
.codex-tree-group {
  min-width: 0;
}
.codex-tree-empty {
  padding: 0.45rem 0.5rem;
  font-size: 0.6875rem;
}
.codex-tree-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem;
  min-height: 0;
}
.codex-tree-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.25rem 0.45rem;
  border-radius: var(--control-radius);
  font-size: 0.75rem;
  color: var(--subtext-0);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: background var(--motion-instant) var(--motion-ease);
}
.codex-tree-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.codex-tree-item.active {
  background: var(--bg-active);
  color: var(--text);
  font-weight: 550;
}
.codex-tree-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}
.codex-tree-chevron.open {
  color: var(--text-muted);
}
.codex-tree-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-faint);
  flex-shrink: 0;
}
.codex-tree-name {
  flex: 1;
  min-width: 0;
}
.codex-git-badge {
  font-size: 0.625rem;
  font-weight: 700;
  color: #8fbf88;
  margin-left: auto;
  padding: 0.05rem 0.25rem;
  border-radius: 0.2rem;
  background: rgb(143 191 136 / 16%);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

/* Tool Panes (Review, Terminal, Browser, Chat) */
.codex-tool-pane {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem;
  min-height: 0;
}
.codex-review-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.codex-review-header .kv { flex: 1 1 12rem; min-width: 0; }
.codex-review-header .kv .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codex-review-header .git-actions { flex-wrap: wrap; }
.codex-review-header .chip, .codex-pr-list-head .chip { min-height: 2rem; gap: .4rem; }
.codex-review-files h4,
.codex-diff-section h4 {
  margin: 0.75rem 0 0.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--overlay-0);
  font-weight: 600;
}
.codex-pr-list {
  margin: 0 0 0.8rem;
}
.pr-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.pr-search-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 13rem;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0 .65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  background: var(--surface-0);
  color: var(--text-faint);
}
.pr-search-field svg { flex-shrink: 0; }
.pr-search-field input[type="search"] {
  appearance: none;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: .45rem 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: .8125rem;
  line-height: 1.35;
}
.pr-search-field:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.pr-search-field input::placeholder { color: var(--text-faint); }
.pr-list-filters select { min-height: 2.25rem; }
.pr-list-filters select,
.pr-commit-select {
  max-width: 100%;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
}
.pr-commit-select {
  width: 15rem;
  text-overflow: ellipsis;
}
.pr-pending-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}
.pr-pending-note label,
.pr-pending-note textarea {
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
}
.codex-pr-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.codex-pr-list-head h4 {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--overlay-0);
  font-weight: 600;
}
.codex-pr-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border-color);
  background: transparent;
  color: var(--text);
  padding: 0.5rem 0.15rem;
  text-align: left;
}
.codex-pr-row:hover { background: var(--bg-hover); }
.codex-pr-number,
.codex-pr-checks {
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}
.codex-pr-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}
.codex-pr-copy b,
.codex-pr-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-pr-copy b { font-size: 0.75rem; font-weight: 550; }
.codex-pr-copy small { color: var(--text-faint); font-size: 0.625rem; }
.codex-pr-checks.success,
.codex-pr-checks.passing { color: var(--green); }
.codex-pr-checks.failure,
.codex-pr-checks.failing { color: var(--red); }
.codex-pr-checks.pending { color: var(--yellow); }
/* A draft is not ready, whatever its checks came back as. */
.codex-pr-checks.draft { color: var(--text-faint); }
.pr-detail {
  display: grid;
  gap: 0;
  min-width: 0;
}
/* Grid tracks size to their content unless told otherwise, so one wide child —
   a diff, a long branch name — stretched the whole panel and pushed the rest
   of the inspector off screen. */
.pr-detail > * {
  min-width: 0;
}
.pr-detail-actions,
.pr-detail-kicker,
.pr-branch-line,
.pr-tabs,
.pr-file-list > div {
  display: flex;
  align-items: center;
}
.pr-detail-actions {
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.pr-detail-actions > .ghost { border: 0; background: transparent; padding: 0.25rem 0; font-size: 0.75rem; }
.pr-detail-hero {
  padding: 0 0.2rem 0.85rem;
}
.pr-detail-kicker {
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
}
.pr-detail-hero h3 {
  margin: 0.35rem 0 0.3rem;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  /* Titles carry branch names and identifiers with no break opportunity. */
  overflow-wrap: anywhere;
}
.pr-detail-hero p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.6875rem;
}
.pr-branch-line {
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
  color: var(--text-faint);
  font-size: 0.625rem;
}
/* `feature/some-long-branch-name` is one unbreakable token. Truncate it
   rather than let it run out of the panel. */
.pr-branch-line > span:not(.pr-diff-stat) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-diff-stat {
  margin-left: auto;
  color: var(--text-faint);
  font-style: normal;
  white-space: nowrap;
}
.pr-diff-stat i { color: var(--green); font-style: normal; }
.pr-diff-stat b { color: var(--red); font-weight: 500; }
.pr-tabs {
  gap: 0.2rem;
  padding: 0.15rem;
  background: var(--surface-1);
  border-radius: 0.55rem;
  border: 0;
}
.pr-tabs button {
  min-height: 1.75rem;
  border: 0;
  border-radius: 0.4rem;
  padding: 0 0.7rem;
  background: transparent;
  color: var(--text-faint);
  font-size: 0.75rem;
}
.pr-tabs button:hover { color: var(--text); background: var(--bg-hover); }
.pr-tabs button.active { color: var(--text); background: var(--surface-2); }
.pr-loading { padding: 1rem 0.2rem; }
.pr-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-color);
}
.pr-meta-grid > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.7rem 0.4rem;
}
.pr-meta-grid span {
  color: var(--text-faint);
  font-size: 0.625rem;
}
.pr-meta-grid b {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-section { padding: 0.85rem 0.2rem; }
.pr-section h4 {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
}
.pr-section .body,
.pr-timeline .body {
  font-size: 0.75rem;
  line-height: 1.55;
}
.pr-timeline {
  padding: 0.5rem 0.2rem;
}
.pr-timeline-events { padding: 0.6rem 0 0.2rem 0.75rem; }
.pr-timeline-events > article {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--border-color);
  padding: 0 0 1.25rem 1.5rem;
}
.pr-timeline-events > article:last-child { border-left-color: transparent; }
.pr-timeline-marker {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0.25rem;
  left: -0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-faint);
  background: var(--base);
}
.pr-timeline-event { min-width: 0; padding: 0.3rem 0; font-size: 0.8125rem; }
.pr-timeline-event > b { font-weight: 550; }
.pr-commit-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: 0; background: none; color: var(--text); text-align: left; font-size: inherit; font-weight: 550; cursor: pointer; }
.pr-commit-link:hover { text-decoration: underline; }
.pr-event-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--text-faint); }
.pr-commit-message { margin-top: 0.5rem; }
.pr-commit-message > summary { font-size: 0.6875rem; color: var(--text-faint); cursor: pointer; }
.pr-code {
  min-width: 0;
  padding-top: 0.55rem;
}
.pr-file-list {
  margin-bottom: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  overflow: hidden;
}
.pr-file-list > div {
  gap: 0.5rem;
  min-height: 2rem;
  border-bottom: 1px solid var(--border-color);
  padding: 0.35rem 0.55rem;
  font-size: 0.625rem;
}
.pr-file-list > div:last-child { border-bottom: 0; }
/* The end of a path is the half that identifies the file. Truncating from the
   right left two rows reading `.../ProviderRuntimeIngesti…`, one the source and
   one its test, with nothing to tell them apart. */
.pr-file-path {
  display: flex;
  min-width: 0;
}
.pr-file-dir {
  overflow: hidden;
  color: var(--text-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-file-name {
  flex-shrink: 0;
  white-space: nowrap;
}
.codex-terminal-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  min-height: 0;
  overflow: hidden;
}
.codex-terminal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
}
.codex-term-output {
  flex: 1;
  margin: 0.4rem 0;
  min-height: 12rem;
  max-height: none;
}
.codex-browser-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
  background: var(--bg);
}

.browser-controls-trigger { display: flex; align-items: center; gap: .3rem; list-style: none; cursor: pointer; padding: .25rem .4rem; border-radius: .375rem; font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.browser-controls-trigger::-webkit-details-marker { display: none; }
.browser-controls[open] > summary, .browser-controls-trigger:hover { background: var(--bg-hover); color: var(--text); }
.browser-controls-popover { position: absolute; top: calc(100% + .25rem); right: .5rem; width: min(23rem, calc(100cqw - 1rem)); max-height: min(28rem, 60vh); overflow: auto; padding: .85rem; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--surface-0); box-shadow: 0 .5rem 2rem #0005; font-size: .8125rem; }
.browser-controls-heading { display: flex; justify-content: space-between; gap: .5rem; }
.browser-controls-popover p { font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }
.browser-controls-capability { margin-top: .8rem; color: var(--text-muted); }
.browser-controls-capability > summary { cursor: pointer; }
.browser-controls-popover .background-browser { margin-top: .8rem; padding: .8rem 0 0; border: 0; border-top: 1px solid var(--border-color); }
.preview-viewport { max-width: 7rem; min-height: 1.75rem; font-size: .75rem; border: 1px solid var(--border-color); border-radius: var(--control-radius); background: var(--surface-0); color: var(--text-muted); }
.embedded-browser-frame:not([data-viewport="fill"]) { overflow: auto; background: var(--surface-0); }
.embedded-browser-frame[data-viewport="phone"] .embedded-browser-webview { flex: 0 0 390px; width: 390px; margin-inline: auto; }
.embedded-browser-frame[data-viewport="tablet"] .embedded-browser-webview { flex: 0 0 768px; width: 768px; margin-inline: auto; }
@container (max-width: 540px) {
  .codex-browser-pane .preview-chrome-row { height: auto; flex-wrap: wrap; padding-block: .35rem; }
  .codex-browser-pane .preview-address-group { order: -1; flex: 1 0 100%; }
  .codex-browser-pane .preview-actions-cluster { margin-left: auto; }
  .browser-controls-trigger > span { display: none; }
  .browser-controls-trigger::after { content: ""; width: .3rem; height: .3rem; border: 1px solid currentColor; border-radius: 50%; }
  .browser-controls[data-allowed="true"] > summary::after { background: currentColor; }
}

.preview-chrome-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.5rem;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  z-index: 15;
  flex-shrink: 0;
}

.preview-nav-cluster,
.preview-actions-cluster {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.preview-chrome-btn {
  height: 1.75rem;
  width: 1.75rem;
  min-width: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.preview-chrome-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.preview-chrome-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.preview-chrome-btn.active {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
}

.preview-spin-icon {
  animation: previewSpin 1s linear infinite;
}

@keyframes previewSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.preview-address-group {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
  height: 1.85rem;
}

.preview-address-input {
  width: 100%;
  height: 100%;
  padding: 0 1.85rem 0 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font-size: 0.75rem;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.preview-address-input:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.preview-address-input:focus {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.38);
}

.preview-address-input::placeholder {
  color: var(--text-faint);
}

.preview-address-inline-btn {
  position: absolute;
  right: 0.3rem;
  height: 1.35rem;
  width: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.12s ease, background 0.12s ease;
}

.preview-address-inline-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.preview-menu-anchor {
  position: relative;
  display: flex;
  align-items: center;
}

.preview-more-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  min-width: 13rem;
  background: var(--bg-sidebar, #16171a);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 0.3rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  backdrop-filter: blur(16px);
  animation: previewMenuFadeIn 0.12s ease-out;
}

@keyframes previewMenuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.preview-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
  color: var(--text);
  text-align: left;
  border-radius: 0.35rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  display: flex;
  align-items: center;
}

.preview-menu-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.preview-menu-item:disabled {
  color: var(--text-faint);
  cursor: default;
}

.preview-menu-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.preview-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0.25rem 0.2rem;
}

.preview-zoom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  color: var(--text);
  user-select: none;
}

.preview-zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.preview-zoom-btn {
  height: 1.4rem;
  width: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: var(--surface-0);
  color: var(--text);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  padding: 0;
}

.preview-zoom-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.preview-zoom-btn:disabled {
  opacity: 0.32;
  cursor: default;
}

.preview-zoom-value {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  min-width: 2.75rem;
  text-align: center;
  color: var(--text-muted);
}

/*
 * Moved with a transform rather than a background position.
 *
 * `background-position` is not a compositor property: animating it repaints
 * the bar on every frame for as long as a page is loading, which on a 120Hz
 * display is work the GPU does not need to be given.
 */
.preview-loading-bar {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  z-index: 20;
}
.preview-loading-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #3b82f6 50%, transparent);
  will-change: transform;
  animation: previewProgressPulse 1.2s infinite ease-in-out;
}

@keyframes previewProgressPulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.preview-toast {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(24, 24, 27, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.38rem 0.85rem;
  font-size: 0.72rem;
  color: #f4f4f5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 200;
  pointer-events: none;
  animation: previewToastSlideUp 0.16s ease-out;
}

@keyframes previewToastSlideUp {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.embedded-browser-frame {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.embedded-browser-webview {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.browser-error {
  flex-shrink: 0;
  margin: 0.5rem 0.5rem 0;
  border: 1px solid color-mix(in srgb, var(--red) 30%, var(--border-color));
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  color: var(--red);
  padding: 0.45rem 0.55rem;
  font-size: 0.6875rem;
}
.local-server-list {
  min-height: 0;
  overflow: auto;
}
.codex-browser-links {
  width: min(46rem, 100%);
  margin: 1.75rem auto 0;
  padding: 0 0.35rem 2rem;
}
.browser-home-section + .browser-home-section {
  margin-top: 1.5rem;
}
.browser-home-section > h4,
.browser-home-section > .row h4 {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.recent-server-grid .local-server-card {
  border-bottom: 0;
}
.local-server-list h4 { margin: 0 0 0.15rem; font-size: 0.8125rem; }
.local-server-list p { margin: 0; font-size: 0.6875rem; }
.local-server-grid {
  display: grid;
  margin-top: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 0.65rem;
  overflow: hidden;
}
.local-server-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  padding: 0.7rem;
  color: var(--text);
  text-align: left;
}
.local-server-card:last-child { border-bottom: 0; }
.local-server-card:hover { background: var(--bg-hover); }
.local-server-icon {
  display: flex;
  gap: 0.18rem;
  align-items: flex-start;
  width: 2rem;
  height: 1.65rem;
  padding: 0.32rem;
  border: 1px solid var(--border-color);
  border-radius: 0.35rem;
  background: var(--surface-0);
}
.local-server-icon span { width: 0.22rem; height: 0.22rem; border-radius: 50%; background: var(--text-faint); }
.local-server-icon span:first-child { background: var(--red); }
.local-server-icon span:nth-child(2) { background: var(--yellow); }
.local-server-icon span:nth-child(3) { background: var(--green); }
.local-server-copy { display: grid; min-width: 0; gap: 0.15rem; }
.local-server-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; }
.local-server-copy small { color: var(--text-faint); font-size: 0.6875rem; }

.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.inspector-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
  padding: 0.12rem;
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 4%);
}
.change-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.change-row .list-item {
  flex: 1;
  min-width: 0;
}
.commit-form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.commit-form input[type="text"] {
  flex: 1;
  min-width: 0;
  min-height: 2.25rem;
  font-size: .8125rem;
  line-height: 1.35;
  background: var(--surface-0);
}
.review-commit-button {
  flex-shrink: 0;
  min-height: 2.25rem;
  padding: .45rem .8rem;
  border: 1px solid var(--accent);
  border-radius: var(--control-radius);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: .8125rem;
  font-weight: 550;
  cursor: pointer;
}
.review-commit-button:hover:not(:disabled) { filter: brightness(.92); }
.review-commit-button:disabled { background: var(--surface-1); border-color: var(--border-color); color: var(--text-faint); cursor: default; }
.review-commit-note { margin: .4rem 0 .65rem; font-size: .75rem; color: var(--text-muted); }
.review-commit-note[role="alert"] { color: var(--red); }
.commit-form input:focus-visible, .review-commit-button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.term-out {
  margin-top: 0.65rem;
  min-height: 9rem;
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.75rem;
  padding: 0.5rem 0.6rem;
  background: rgb(0 0 0 / 40%);
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
}
.term-form {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.5rem;
}
.term-form input {
  flex: 1;
  min-width: 0;
}
.inspector-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-weight: 550;
  padding: 0.28rem 0.2rem;
  border-radius: 0.4rem;
}
.inspector-tabs button.active {
  background: rgb(255 255 255 / 8%);
  color: var(--text);
}
.tab-count {
  margin-left: 0.2rem;
  color: var(--text-faint);
}
.diff-view {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  overflow: auto;
  max-height: 22rem;
}
.diff-line.add {
  color: #8fbf88;
  background: rgb(143 191 136 / 8%);
}
.diff-line.del {
  color: #d98989;
  background: rgb(217 137 137 / 8%);
}
.diff-line.hunk,
.diff-line.file {
  color: var(--text-faint);
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.3rem;
  background: rgb(255 255 255 / 8%);
  color: var(--text);
  font-size: 0.625rem;
  font-weight: 650;
  flex-shrink: 0;
}
.md-h {
  margin: 0.55rem 0 0.25rem;
  /* Relative to the message, not to the root. These were fixed in rem while
     the body scaled with the transcript-size setting, so raising that size
     grew the prose and left headings and code behind — and a message with
     markdown stopped matching one without. The ratios are today's. */
  font-size: 1.013em;
  font-weight: 600;
}
/* The inspector styles its own h4s as small-caps section labels. A markdown
   heading is an h4 too, so `## Verification` in a pull-request body came out
   looking like one of Capsule's own chrome labels. */
.inspector .md-h {
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
}
.md-li {
  padding-left: 0.85rem;
  position: relative;
}
.md-li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}
.composer-glass.dropping::before {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%);
}
.inspector h4,
.inspector-header h4 {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--overlay-0);
  font-weight: 600;
}
.inspector-block {
  margin-bottom: 1.1rem;
}
.file-preview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  flex: 1;
  padding: 0.75rem;
  overflow: auto;
}
.file-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.6875rem;
  flex-shrink: 0;
}
.file-preview-bar .mono {
  min-width: 0;
  flex: 1;
}
.file-preview-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.5rem;
  min-height: 8rem;
  flex: 1;
}
.file-preview-image {
  max-width: 100%;
  max-height: 22rem;
  object-fit: contain;
  background:
    linear-gradient(45deg, rgb(127 127 127 / 18%) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, transparent 75%, rgb(127 127 127 / 18%) 75%) 0 0 / 12px 12px,
    linear-gradient(45deg, transparent 75%, rgb(127 127 127 / 18%) 75%) 6px 6px / 12px 12px,
    linear-gradient(45deg, rgb(127 127 127 / 18%) 25%, transparent 25%) 6px 6px / 12px 12px;
}
.image-preview-open { cursor: zoom-in; width: 100%; }
.image-inspector {
  width: min(94vw, 90rem); height: 90vh; max-width: 96vw; max-height: 94vh;
  padding: 0; border: 1px solid var(--border-color); border-radius: 0.75rem;
  background: var(--bg); color: var(--text); overflow: hidden;
}
.image-inspector[open] { display: flex; flex-direction: column; }
.image-inspector::backdrop { background: rgb(0 0 0 / 72%); }
.image-inspector-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--border-color); }
.image-inspector-toolbar > span { min-width: 0; flex: 1 1 10rem; font-size: 0.8125rem; }
.image-inspector-toolbar button { flex: none; font-size: 0.8125rem; }
.image-inspector-viewport { min-height: 0; flex: 1; overflow: auto; padding: 0.75rem; touch-action: pan-x pan-y; }
.image-inspector-viewport img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; }
.image-inspector-viewport[data-fit="false"] { cursor: grab; touch-action: none; }
.agent-command-control { position: relative; font-size: 0.8125rem; }
.agent-command-control > summary { list-style: none; cursor: pointer; padding: 0.35rem 0.6rem; color: var(--text-muted); }
.agent-command-control > summary::-webkit-details-marker { display: none; }
.agent-command-popover { display: grid; gap: 0.65rem; }
.agent-command-popover p { margin: 0; }
.agent-command-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.agent-command-popover select, .agent-command-popover input { min-width: 0; width: 100%; font-size: 0.8125rem; }
.file-preview-code {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  flex: 1;
  min-height: 14rem;
  max-height: none;
  overflow: auto;
}
.inspector .kv {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding: 0.18rem 0;
  color: var(--subtext-0);
}
.inspector .icon-btn:hover,
.inspector .icon-btn:active {
  transform: none;
}
.inspector .kv span:last-child {
  color: var(--text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9.5rem;
}
.kv-list .kv {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  padding: 0.28rem 0;
  color: var(--subtext-0);
}
.kv-list .kv span:last-child {
  color: var(--text);
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--control-radius);
  border: 1px solid var(--border-color);
  background: var(--bg-hover);
  overflow: hidden;
  margin-top: 0.4rem;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-color);
  transition: background var(--motion-fast) var(--motion-ease);
}
.shortcut-row:last-child {
  border-bottom: none;
}
.shortcut-row:hover {
  background: rgb(255 255 255 / 3%);
}
.shortcut-label {
  color: var(--text);
  font-weight: 450;
}
.shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.shortcut-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 0.35rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  line-height: 1;
  user-select: none;
}

.check {
  display: grid;
  grid-template-columns: 0.9rem 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.8125rem;
  margin: 0.45rem 0;
}
.check .ok {
  color: var(--green);
}
.check .bad {
  color: var(--red);
}
.check .label {
  font-weight: 600;
}
.check .detail {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.notice {
  margin: 0.65rem auto 0;
  max-width: var(--chat-max);
  width: calc(100% - 2.5rem);
  padding: 0.5rem 0.7rem;
  border-radius: 0.6rem;
  background: rgb(217 137 137 / 0.12);
  color: var(--red);
  font-size: 0.8125rem;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 auto 0.75rem;
  max-width: var(--chat-max);
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 3%);
  font-size: 0.75rem;
  color: var(--subtext-1);
}
.banner.compact {
  padding: 0.35rem 0.55rem;
}
.banner.inline {
  margin: 0.75rem auto 0;
}
.banner p {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.artifact-preview {
  white-space: pre-wrap;
  margin-top: 0.5rem;
  max-height: 16rem;
  overflow: auto;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--bg-sidebar, #0a0a0a);
  transition: opacity 200ms ease;
}
.splash.fading {
  opacity: 0;
  pointer-events: none;
}
.splash-mark {
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 22%;
  object-fit: cover;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.5);
}
.splash p {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.readiness {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--overlay-1);
  white-space: nowrap;
}
.readiness.ready,
.readiness.dedicated {
  color: var(--subtext-1);
}
.readiness.running {
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.readiness.running::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 99px;
  background: currentColor;
  flex-shrink: 0;
  transform-origin: center;
  animation: harness-breathe 1.5s ease-in-out infinite;
}
@keyframes harness-breathe {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.62);
  }
}
.session-live {
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
}
.session-class {
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
}
.session-class.blocked {
  color: var(--yellow);
}
.session-class.done {
  color: var(--green);
}
.readiness.missing_cli,
.readiness.needs_login,
.readiness.missing_acpx,
.readiness.gateway_offline {
  color: var(--yellow);
}

.action-menu-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  isolation: isolate;
}
.action-menu-scrim {
  position: absolute;
  inset: 0;
}
.action-menu {
  position: absolute;
  z-index: 1;
  min-width: 13.5rem;
  max-width: min(20rem, calc(100vw - 1rem));
  max-height: min(24rem, calc(100vh - 1rem));
  overflow: auto;
  padding: 0.25rem;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 0.65rem;
  box-shadow: var(--shadow);
  outline: none;
}
.action-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 1.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.28rem 0.5rem;
  border-radius: 0.4rem;
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.2;
}
.action-menu button:hover,
.action-menu button[data-highlighted="true"] {
  background: var(--bg-hover);
}
.action-menu button:disabled {
  opacity: 0.42;
  pointer-events: none;
}
.action-menu button.danger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 1.75rem;
  padding: 0.28rem 0.5rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--red);
  font-size: 0.8125rem;
  font-weight: 400;
  text-align: left;
}
.action-menu button.danger:hover,
.action-menu button.danger[data-highlighted="true"] {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  border: 0;
}
.action-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--text-faint);
  flex-shrink: 0;
}
.action-menu button.danger .action-menu-icon {
  color: inherit;
}
.action-menu-sep {
  height: 1px;
  margin: 0.22rem 0.4rem;
  background: var(--border-color);
}
.action-menu-kbd {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  font-family: inherit;
}

.dialog {
  width: min(32rem, calc(100vw - 2rem));
  background: color-mix(in srgb, #121215 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 72px -20px rgba(0, 0, 0, 0.9);
  padding: 1.5rem;
  outline: none;
}
.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dialog-header h3,
.dialog h3 {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text, #f4f4f5);
  letter-spacing: -0.015em;
}
.dialog-header p,
.dialog p {
  margin: 0;
  color: var(--text-muted, #a1a1aa);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #71717a);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  flex-shrink: 0;
  margin-top: -0.15rem;
  margin-right: -0.15rem;
}
.dialog-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f4f4f5;
}
.clone-repository-dialog {
  display: grid;
  gap: 1rem;
  width: min(32rem, calc(100vw - 2rem));
}
.clone-repository-dialog h3,
.clone-repository-dialog > p { margin: 0; }
.clone-repository-dialog label {
  display: grid;
  gap: 0.35rem;
  color: var(--text, #e4e4e7);
  font-size: 0.8125rem;
  font-weight: 500;
}
.clone-repository-dialog label small {
  color: var(--text-faint, #71717a);
  font-weight: 400;
  font-size: 0.75rem;
}
.clone-repository-dialog input[type="text"] {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  font-size: 0.8125rem;
  color: var(--text, #f4f4f5);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.clone-repository-dialog input[type="text"]:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
  background: rgba(0, 0, 0, 0.45);
}
.clone-destination-field {
  display: grid;
  gap: 0.35rem;
  color: var(--text, #e4e4e7);
  font-size: 0.8125rem;
  font-weight: 500;
}
.clone-destination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem 0.4rem 0.75rem;
  min-width: 0;
  height: 2.25rem;
  box-sizing: border-box;
}
.clone-destination > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, #f4f4f5);
  font-size: 0.8125rem;
}
.clone-destination > span.placeholder {
  color: var(--text-faint, #71717a);
}
.clone-destination button.ghost {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0 0.65rem;
  height: 1.625rem;
  border-radius: 0.375rem;
  color: var(--text, #f4f4f5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}
.clone-destination button.ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.dialog .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.dialog .actions button.ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text, #f4f4f5);
  border-radius: 0.5rem;
  padding: 0 0.95rem;
  height: 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dialog .actions button.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.dialog .actions button.ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dialog .actions button.send {
  background: #2563eb;
  border: 1px solid #3b82f6;
  color: #ffffff;
  border-radius: 0.5rem;
  padding: 0 1.15rem;
  height: 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}
.dialog .actions button.send:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #2563eb;
}
.dialog .actions button.send:disabled {
  background: rgba(37, 99, 235, 0.35);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
  cursor: not-allowed;
}
.dialog .actions button.danger {
  background: #dc2626;
  border: 1px solid #ef4444;
  color: #ffffff;
  border-radius: 0.5rem;
  padding: 0 1.15rem;
  height: 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 120ms ease, border-color 120ms ease;
}
.dialog .actions button.danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #dc2626;
}

@media (max-width: 1100px) {
  .inspector {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    box-shadow: var(--shadow);
    width: min(32rem, 100%) !important;
  }
  .inspector.maximized {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .send-btn,
  .splash,
  .msg-actions,
  .switch span {
    transition: none;
  }
}

.panel-inner.settings-page {
  width: min(56rem, 100%);
}
.settings {
  display: block;
  /* So a wide child scrolls in its own box instead of widening the page. */
  min-width: 0;
}
.settings-body,
.settings-body .card {
  min-width: 0;
}
.settings-body .card h3 {
  margin-bottom: 0.55rem;
}
.setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-color);
}
.card > .setting:first-child,
.setting:first-of-type {
  border-top: 0;
  padding-top: 0.15rem;
}
.theme-picker + .setting {
  margin-top: 0.5rem;
}
.setting-copy {
  font-size: 0.8125rem;
}
.setting-copy p {
  margin: 0.2rem 0 0;
  color: var(--text-faint);
  font-size: 0.75rem;
}
.setting-control {
  min-width: 7.5rem;
  display: flex;
  justify-content: flex-end;
}
.setting-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.45rem;
}
.setting-stack {
  display: grid;
  gap: 0.4rem;
  justify-items: end;
  max-width: 22rem;
}
.setting-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}
.project-settings-row {
  align-items: center;
}
.project-settings-icon {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 1.65rem;
  border: 1px solid var(--border-color);
  border-radius: 0.45rem;
  background: var(--surface-0);
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-weight: 650;
}
.accent-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
  max-width: 16rem;
}
.accent-pick {
  border: 1px solid var(--border-color);
  background: var(--bg-hover);
  color: var(--text);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.75rem;
}
.accent-pick.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
}
.appearance-page {
  display: grid;
  gap: 0.9rem;
}
.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.7rem;
  margin-bottom: 0.5rem;
}
.theme-card {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  border: 1px solid var(--border-color);
  background: var(--bg-hover);
  color: var(--text-muted);
  border-radius: 0.7rem;
  padding: 0.55rem 0.4rem 0.5rem;
  font-size: 0.75rem;
}
.theme-card.active {
  border-color: var(--accent);
  color: var(--text);
  background: var(--bg-elevated);
}
.theme-card-stage {
  display: flex;
  width: 100%;
  height: 3.4rem;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg);
}
.theme-card-stage[data-kind="split"] .theme-mini {
  width: 50%;
}
.theme-mini {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.theme-mini-sidebar {
  width: 28%;
  flex-shrink: 0;
}
.theme-mini-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.35rem 0.3rem;
}
.theme-mini-line {
  height: 0.28rem;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.28;
}
.theme-mini-line.short {
  width: 62%;
}
.theme-mini-accent {
  width: 0.42rem;
  height: 0.42rem;
  margin-top: auto;
  border-radius: 99px;
  background: var(--preview-accent);
}
.appearance-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.appearance-aa {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.55rem;
  border: 2px solid;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 600;
  flex-shrink: 0;
}
.color-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.color-control input[type="color"] {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 0.35rem;
  background: transparent;
}
.color-hex {
  width: 6.4rem;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--control-radius);
  padding: 0.28rem 0.4rem;
  font-size: 0.75rem;
}
.contrast-control {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 9.5rem;
}
.contrast-control input[type="range"] {
  width: 7.5rem;
  accent-color: var(--accent);
}
label.field {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.7rem;
  font-size: 0.75rem;
  color: var(--text-faint);
}
label.field input {
  color: var(--text);
  font-size: 0.8125rem;
}
.card .notice {
  margin: 0.75rem 0 0;
  max-width: none;
  width: auto;
}
.switch {
  position: relative;
  display: inline-flex;
  width: 2.15rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.switch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
  border: 1px solid var(--border-color);
  transition: background 140ms ease;
}
.switch span::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  left: 0.12rem;
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 999px;
  background: var(--text);
  transition: transform 140ms ease;
}
.switch input:checked + span {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border-color: rgb(255 255 255 / 22%);
}
.switch input:checked + span::after {
  transform: translateX(0.88rem);
}
.switch input:focus-visible + span {
  outline: 1px solid rgb(255 255 255 / 0.35);
  outline-offset: 2px;
}


/* Changed-files card: the turn's outcome on disk, summarised. */
.changed-files {
  margin: 0.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.changed-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.75rem;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
}
button.changed-files-head:hover { background: var(--bg-hover); }
div.changed-files-head { cursor: default; }
.changed-files-list { list-style: none; margin: 0; padding: 0 0 0.25rem; }
.changed-files-list .changed-file-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.25rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: left;
}
.changed-files-list button:hover { background: var(--bg-hover); color: var(--text); }
.turn-saved-diff { min-width: 0; margin: 0.5rem 0 1rem; }
.turn-saved-diff-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.change-code {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.change-code.added { color: var(--green); }
.change-code.deleted { color: var(--red); }
.change-code.modified { color: var(--yellow); }
/* The filename carries the meaning; the directory is context. Only the
   directory truncates, so the basename is always readable. */
.change-path {
  display: flex;
  align-items: baseline;
  min-width: 0;
  flex: 1;
}
.change-dir {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  /* Truncate the *start* of the path so the deepest directories stay visible.
     `direction: rtl` does that, but on its own it also reorders the trailing
     separator to the front ("/apps/…" instead of "…/lib/"). `plaintext`
     resolves the run by its own content, keeping the characters in order. */
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: left;
}
.change-name {
  flex-shrink: 0;
  color: var(--text);
  font-weight: 500;
}
/* Destructive, so it stays out of the way until the row is hovered. */
.change-undo {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0 0.35rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
  opacity: 0;
  transition: opacity var(--motion-instant, 120ms) var(--motion-ease, ease);
}
.changed-files-list li { display: flex; align-items: center; }
.changed-files-list li:hover .change-undo,
.changed-files-list li:focus-within .change-undo {
  opacity: 1;
}
.change-undo:hover { color: var(--red); }
.diffstat {
  display: inline-flex;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}
.diffstat .added { color: var(--green); }
.diffstat .removed { color: var(--red); }
.changed-files-more {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border-color);
  background: transparent;
  padding: 0.4rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
}
.changed-files-more:hover { color: var(--text); background: var(--bg-hover); }

/* A folded turn: one row standing in for a whole exchange. */
.turn-fold {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  margin: 0 0 1.1rem;
  border: 1px dashed var(--border-color);
  border-radius: 0.5rem;
  background: transparent;
  padding: 0.4rem 0.65rem;
  color: var(--text-faint);
  font-size: 0.75rem;
  text-align: left;
}
.turn-fold:hover {
  background: var(--bg-hover);
  color: var(--text-muted);
  border-style: solid;
}
.turn-fold-count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* The prompt is the only flexible column; it truncates rather than wrapping,
   so a folded turn stays exactly one row tall. */
.turn-fold-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Editable file view. Plain textarea rather than a highlighted surface: the
   value here is being able to fix a line without leaving the app, and a
   contentEditable code view is its own build. */
.file-editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  overflow: hidden;
}
.file-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-0);
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.save-state { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.save-state.saved { color: var(--green); }
.save-state.error { color: var(--red); }
.file-editor-area {
  min-height: 16rem;
  resize: vertical;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  padding: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  tab-size: 2;
}
.file-editor-note { padding: 0 0 0.35rem; }

/* Shown when the file moved under an open editor. Both choices are explicit:
   nothing is auto-merged and nothing is silently dropped. */
.file-conflict {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  color: var(--text);
  font-size: 0.6875rem;
  line-height: 1.4;
}
.file-conflict .actions { display: flex; gap: 0.4rem; margin: 0; }
.save-state.conflict { color: var(--yellow); }

/* The agent's full reasoning, on demand. The activity row shows only the
   latest fragment; this is every chunk it streamed, in order. */
.thinking {
  margin: 0.15rem 0 0.35rem 1.4rem;
  font-size: 0.75rem;
}
.thinking > summary {
  cursor: pointer;
  color: var(--text-faint);
  font-size: 0.6875rem;
}
.thinking > summary:hover { color: var(--text-muted); }
.thinking-body {
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-left: 2px solid var(--border-color);
  color: var(--text-muted);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 22rem;
  overflow: auto;
}

/* Fenced code: labelled, with its own copy control. A reply's code is the part
   people most often lift out, so it should not require selecting by hand. */
.msg-code-wrap {
  margin: 0.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  overflow: hidden;
}
.msg-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0.3rem 0.2rem 0.6rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-0);
}
.msg-code-lang {
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.msg-code-bar .icon-btn { font-size: 0.625rem; }
.msg-code-wrap .msg-code {
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* =============================================================================
   Motion and overlay systems
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Motion: message entrance animation
   A newly-created conversational turn settling into the timeline. Runs once on
   mount — blur + translate from below, compositor-accelerated.
   --------------------------------------------------------------------------- */
.motion-enter-conversation {
  animation: motion-enter-conversation var(--motion-arrival, 120ms) var(--motion-ease-arrival) both;
}
@keyframes motion-enter-conversation {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance-arrival, 0.25rem));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------------
   2. Composer dock
   Animated rail that expands when an agent is actively working, plus radial
   corner masks for the smooth transition where composer meets chat area.
   --------------------------------------------------------------------------- */
.composer-dock {
  --composer-dock-active-rail: 2.125rem;
  --composer-dock-quiet-inset: 1.25rem;
  --composer-dock-release: calc(
    var(--composer-dock-active-rail) - var(--composer-dock-quiet-inset)
  );
  padding-bottom: var(--composer-dock-quiet-inset);
  transition: padding-bottom var(--motion-standard) var(--motion-ease);
}
.composer-dock--with-activity {
  padding-bottom: var(--composer-dock-active-rail);
}

/* Corner masks: smooth radius where the elevated composer meets the
   conversation background. Uses radial-gradient masks instead of overflow. */
.composer-overlay-corner-masks { position: relative; }
.composer-overlay-corner-masks::before,
.composer-overlay-corner-masks::after {
  position: absolute;
  bottom: var(--composer-dock-quiet-inset, 1.25rem);
  z-index: 0;
  width: 1rem;
  height: 1rem;
  background: var(--bg);
  content: "";
  transition: bottom var(--motion-standard) var(--motion-ease);
}
.composer-dock--with-activity .composer-overlay-corner-masks::before,
.composer-dock--with-activity .composer-overlay-corner-masks::after {
  bottom: var(--composer-dock-active-rail, 2.125rem);
}
.composer-overlay-corner-masks::before {
  left: 1.25rem;
  mask-image: radial-gradient(circle at top right, transparent 0 1rem, black calc(1rem + 0.5px));
  -webkit-mask-image: radial-gradient(circle at top right, transparent 0 1rem, black calc(1rem + 0.5px));
}
.composer-overlay-corner-masks::after {
  right: 1.25rem;
  mask-image: radial-gradient(circle at top left, transparent 0 1rem, black calc(1rem + 0.5px));
  -webkit-mask-image: radial-gradient(circle at top left, transparent 0 1rem, black calc(1rem + 0.5px));
}

/* Activity indicator rail — sits below the composer when agent is working. */
.composer-dock-activity {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  color: var(--text-faint);
  opacity: 0;
  transform: translateY(0.25rem);
  transition:
    opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}
.composer-dock--with-activity .composer-dock-activity {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .composer-dock,
  .composer-overlay-corner-masks::before,
  .composer-overlay-corner-masks::after,
  .composer-dock-activity {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   3. Sidebar: optional gradient background and prominent active rows
   Opt-in via `data-sidebar-gradient` attribute on the app container.
   --------------------------------------------------------------------------- */
[data-sidebar-gradient] .sidebar {
  --sidebar-fill: linear-gradient(
    180deg,
    var(--sidebar-gradient-top) 0%,
    var(--sidebar-gradient-bottom) 100%
  );
  background: var(--sidebar-fill);
}

/* Prominent active row when gradient is active */
[data-sidebar-gradient] .nav-item.active,
[data-sidebar-gradient] .list-item.active,
[data-sidebar-gradient] .thread-row.active {
  background: var(--sidebar-row-active-surface);
}
[data-sidebar-gradient] .project-row.active {
  background: var(--sidebar-row-subtle-active-surface);
}

/* ---------------------------------------------------------------------------
   4. Skeleton loading states
   Compositor-accelerated shimmer — animates opacity only, not
   background-position, to avoid main-thread style resolves.
   --------------------------------------------------------------------------- */
.skeleton {
  --skeleton-base: var(--bg-hover);
  --skeleton-shimmer: color-mix(in srgb, var(--surface-1) 60%, transparent);
  background: var(--skeleton-base);
  border-radius: var(--control-radius);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--skeleton-shimmer) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 2s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { transform: translateX(-100%); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.skeleton-line {
  height: 0.75rem;
  margin-bottom: 0.5rem;
}
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }

.skeleton-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-block {
  height: 4rem;
}

/* Inspector slide-in from the right. */
.inspector {
  animation: side-panel-enter var(--motion-standard, 180ms) var(--motion-ease-arrival) both;
  will-change: transform, opacity;
  /* Width changes that are not a drag — the refit after the window resizes —
     move rather than jump. A drag has to stay on the pointer, so the panel
     opts out of the transition while one is in progress. */
  transition: width var(--motion-standard, 180ms) var(--motion-ease-arrival);
}
.inspector[data-resizing="true"] {
  transition: none;
}
/*
 * The panel used to fade in at full width while the conversation reflowed in a
 * single frame. Animating the width itself opens the layout instead: with no
 * `to` block the animation ends at the width the panel was given.
 */
/* Opacity and transform only. `width` in here relayed out the panel — and
   everything beside it — on every frame of the entrance. */
@keyframes side-panel-enter {
  from {
    opacity: 0;
    transform: translateX(0.5rem);
  }
}

/* ---------------------------------------------------------------------------
   6. Micro-animations: clean, rigid interactive feedback (no bouncy scales)
   --------------------------------------------------------------------------- */
.squish-click:active {
  opacity: 0.8;
}

/* Subtle flat hover for icon buttons */
.icon-btn {
  transition:
    background var(--motion-instant, 100ms) var(--motion-ease),
    color var(--motion-instant, 100ms) var(--motion-ease);
}
.icon-btn:hover {
  background: var(--bg-hover);
}
.icon-btn:active {
  background: var(--bg-active);
}
.icon-btn.sidebar-toggle:hover,
.icon-btn.sidebar-toggle:active {
  transform: none;
}

/* Send button fast color transition */
.send-btn {
  transition:
    background var(--motion-instant, 100ms) var(--motion-ease),
    opacity var(--motion-instant, 100ms) var(--motion-ease);
}
.send-btn:hover:not(:disabled) {
  background: var(--accent);
}
.send-btn:active:not(:disabled) {
  opacity: 0.85;
}

/* Sidebar nav-item/thread-row hover transitions */
.nav-item,
.list-item,
.thread-row,
.project-row {
  transition:
    background var(--motion-instant) var(--motion-ease),
    color var(--motion-instant) var(--motion-ease);
}

/* Shimmer text for agent "thinking" / loading labels — compositor-accelerated
   opacity pulse, not background-position animation. */
.shimmer-text {
  color: var(--text-faint);
  display: inline-block;
  position: relative;
}
.shimmer-text > .shimmer-overlay {
  animation: shimmer-text-pulse 2.6s ease-in-out infinite;
  position: absolute;
  inset: 0;
  overflow: inherit;
  padding: inherit;
  white-space: inherit;
  color: var(--text-muted);
}
@keyframes shimmer-text-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after,
  .shimmer-text > .shimmer-overlay {
    animation: none;
    opacity: 0.5;
  }
  /*
   * Every animation that repeats forever. Someone who asks the system for less
   * motion is usually asking because repetition is the part that hurts, and
   * these ran regardless: the spinners, the live dot, the readiness pulse, the
   * loading bar.
   */
  .icon-btn.is-spinning svg,
  .dot.live::after,
  .readiness.running::before,
  .preview-loading-bar::before,
  .preview-spin-icon {
    animation: none;
  }
  .dot.live::after {
    opacity: 0;
  }
  .inspector {
    animation: none;
    transition: none;
  }
  .icon-btn:hover,
  .icon-btn:active,
  .send-btn:hover,
  .send-btn:active {
    transform: none;
  }
}

/* ==========================================================================
   About Modal & Card
   ========================================================================== */

.about-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--background, #09090b) 64%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.about-modal-card {
  position: relative;
  width: 26rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: color-mix(in srgb, #121215 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1rem;
  padding: 2.25rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 72px -20px rgba(0, 0, 0, 0.9);
}

.about-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted, #8e8e93);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.about-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #fff);
}

.about-embed-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.about-icon-squircle {
  width: 80px;
  height: 80px;
  border-radius: 1.25rem;
  background: linear-gradient(145deg, #2c2c30, #18181b);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.about-app-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.about-app-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text, #fff);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.about-app-version {
  font-size: 0.9375rem;
  color: var(--text-muted, #8e8e93);
  margin-bottom: 0.5rem;
}

.about-app-copyright {
  font-size: 0.8125rem;
  color: var(--text-faint, #636366);
  margin-bottom: 1.5rem;
}

.about-copy-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #fff);
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.about-copy-btn:active {
  transform: scale(0.97);
}

.about-modal-actions {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.about-update-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  color: var(--text);
  padding: 0.5rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.about-update-btn:hover:not(:disabled) {
  background: var(--bg-active);
  border-color: var(--border-hover, var(--border-color));
}

.about-update-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ==========================================================================
   Skills Directory & Packs
   ========================================================================== */

.skills-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.skills-directory {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.5rem 0 2rem;
}

.skills-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.skills-header-text h2 {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.skills-header-text p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.skills-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skills-link-button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.skills-search-bar {
  display: flex;
  align-items: center;
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color);
  width: min(26rem, 46%);
  border-radius: 0.5rem;
  min-height: 2.35rem;
  padding: 0.3rem 0.65rem;
  gap: 0.625rem;
}

.skills-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.skills-search-bar .skills-search-input {
  width: auto;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  color: var(--text);
  font-size: 0.875rem;
  flex: 1;
}

.skills-search-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skills-notice {
  background: rgba(46, 204, 113, 0.15);
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: #2ecc71;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.skills-tabs {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}

.skills-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  margin-bottom: -1px;
  padding: 0.55rem 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.15s ease;
}

.skills-tab:hover {
  color: var(--text);
  background: transparent;
}

.skills-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
  background: transparent;
}

.tab-count {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
}

.skills-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.skills-stats-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
}

.skills-spark-icon {
  color: var(--yellow, #f1c40f);
}

.skills-tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-bottom: 0.25rem;
}

.tag-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tag-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.tag-chip.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text);
  font-weight: 600;
}

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.65rem;
}

.pack-card {
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color);
  border-radius: 0.625rem;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.pack-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pack-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.pack-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
  color: var(--text);
}

.pack-author {
  color: var(--text-muted);
}

.pack-skill-count {
  margin-left: auto;
  color: var(--text-faint);
}

.pack-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.pack-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

.pack-skills-section {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pack-skills-heading {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.pack-skills-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pack-skill-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pack-skill-pill:hover {
  background: var(--bg-active);
  border-color: var(--border-hover, rgba(255, 255, 255, 0.25));
}

.pack-card-cli-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  gap: 0.5rem;
}

.pack-cmd-copy {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: all 0.15s ease;
}

.pack-cmd-copy:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.pack-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.875rem;
}

.pack-cmd {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.65rem;
}

.skill-card {
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color);
  border-radius: 0.625rem;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  transition: border-color 0.15s ease;
}

.skill-card.attached {
  border-color: rgba(255, 255, 255, 0.35);
}

.skill-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skill-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.skill-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.skill-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.skill-version {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.skill-pack-tag {
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  display: inline-block;
  margin-top: 0.25rem;
}

.skill-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.skill-installs {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.skill-status-badge {
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.skill-status-badge.installed {
  background: rgba(46, 204, 113, 0.12);
  color: #2ecc71;
}

.skill-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.skill-tag {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.skill-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.75rem;
}

.skill-card-actions .active-attached {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.skill-card-actions .installed {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

.skills-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 1rem;
  font-size: 0.875rem;
}

.skills-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-size: 0.875rem;
}

.installed-skills {
  display: grid;
  gap: 0.7rem;
}

.installed-skills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.25rem;
}

.installed-skills-toolbar p {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.6875rem;
}

.installed-skills-toolbar .ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.installed-skill-group {
  min-width: 0;
}

.installed-skill-group > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-color);
}

.installed-skill-group h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.installed-skill-group header p {
  max-width: 46rem;
  margin: 0.2rem 0 0;
  color: var(--text-faint);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.installed-skill-group header > span {
  min-width: 1.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: 0.6875rem;
  text-align: center;
}

.installed-skills-empty {
  margin: 0;
  padding: 1rem 0;
  color: var(--text-faint);
  font-size: 0.75rem;
}

.installed-skill-list {
  display: grid;
}

.installed-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.15rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent);
}

.installed-skill-row:last-child {
  border-bottom: 0;
}

.installed-skill-main {
  display: grid;
  grid-template-columns: minmax(8rem, 0.6fr) minmax(10rem, 1fr);
  align-items: center;
  gap: 0.3rem 0.8rem;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.installed-skill-row:hover {
  background: var(--bg-hover);
}

.installed-skill-name {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.installed-skill-name b,
.installed-skill-name i,
.installed-skill-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.installed-skill-name b {
  color: var(--text);
  font-size: 0.75rem;
}

.installed-skill-name i {
  color: var(--text-faint);
  font-size: 0.625rem;
  font-style: normal;
}

.installed-skill-description {
  color: var(--text-muted);
  font-size: 0.6875rem;
}

.installed-skill-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.45rem;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text-faint);
  font-size: 0.6875rem;
}

.installed-skill-attach:hover,
.installed-skill-attach.attached {
  background: var(--bg-hover);
  color: var(--text);
}

.installed-skills-more {
  width: 100%;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-faint);
  font-size: 0.6875rem;
  text-align: left;
}

.installed-skills-more:hover {
  color: var(--text);
}

.skills-compact-section {
  display: grid;
  gap: 0.25rem;
}

.skills-section-intro {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.skills-section-intro p {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.6875rem;
}

.skill-pack-list,
.skill-catalog-list {
  display: grid;
  min-width: 0;
}

.skill-pack-row,
.skill-catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.15rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent);
}

.skill-pack-row:hover,
.skill-catalog-row:hover {
  background: var(--bg-hover);
}

.skill-pack-main,
.skill-catalog-main {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.skill-pack-main {
  display: grid;
  grid-template-columns: minmax(10rem, 0.55fr) minmax(13rem, 1fr) minmax(9rem, 0.7fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0;
}

.skill-pack-name,
.skill-catalog-name {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.skill-pack-name b,
.skill-catalog-name b {
  overflow: hidden;
  color: var(--text);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-pack-name i,
.skill-catalog-name i {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.625rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-pack-description,
.skill-pack-summary,
.skill-catalog-description,
.skill-catalog-metric {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-pack-description,
.skill-catalog-description {
  color: var(--text-muted);
  font-size: 0.6875rem;
}

.skill-pack-summary,
.skill-catalog-metric {
  color: var(--text-faint);
  font-size: 0.625rem;
}

.skill-catalog-main {
  display: grid;
  grid-template-columns: minmax(10rem, 0.55fr) minmax(13rem, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0;
}

.skill-catalog-description.missing {
  color: var(--text-faint);
  font-style: italic;
}

.skills-empty.compact,
.skill-catalog-list > .skills-empty,
.skill-catalog-list > .skills-loading {
  padding: 1.5rem 0;
  text-align: left;
}

.skills-inline-warning {
  padding: 0.45rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--yellow) 24%, transparent);
  color: color-mix(in srgb, var(--yellow) 78%, var(--text));
  font-size: 0.6875rem;
}

.skills-inline-warning summary {
  cursor: pointer;
}

.skills-inline-warning p {
  margin: 0.4rem 0 0 1rem;
  color: var(--text-faint);
  line-height: 1.45;
}

.installed-skill-attach:disabled {
  cursor: default;
  opacity: 0.72;
}

@media (max-width: 720px) {
  .skills-header {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }
  .skills-search-bar {
    width: 100%;
  }
  .installed-skills-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
  .installed-skill-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .skill-pack-main,
  .skill-catalog-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

/* ==========================================================================
   Skill & Pack Inspector Modals
   ========================================================================== */

.skill-inspect-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.skill-inspect-modal {
  width: 720px;
  max-width: 92vw;
  max-height: 88vh;
  background: var(--bg-sidebar, #1c1c1f);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

.skill-inspect-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.skill-modal-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skill-modal-title-row h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.skill-modal-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.skill-modal-subnav {
  display: flex;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-color);
  padding: 0.25rem 1.5rem;
}

.skill-subnav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 0.15s ease;
}

.skill-subnav-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.skill-subnav-btn.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
}

.skill-inspect-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.skill-inspect-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skill-modal-desc {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.skill-markdown-pre {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.25);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  margin: 0;
}

.skill-markdown-rendered {
  padding: 0.25rem 0;
  color: var(--text);
}

.skill-markdown-rendered .body {
  font-size: 0.8125rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.skill-markdown-rendered .body > .md-h:first-child {
  margin-top: 0;
}

.skill-markdown-rendered .body code {
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--bg-hover);
  font-family: var(--mono);
  font-size: 0.85em;
}

.skill-markdown-rendered .body a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.skill-folder-explorer {
  display: grid;
  min-height: 24rem;
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  overflow: hidden;
}

.skill-folder-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-hover);
}

.skill-folder-heading > div {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.skill-folder-heading b {
  color: var(--text);
  font-size: 0.75rem;
}

.skill-folder-heading span {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-folder-readonly {
  flex-shrink: 0;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
}

.skill-folder-error {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--red) 34%, transparent);
  color: var(--red);
  font-size: 0.6875rem;
}

.skill-folder-workspace {
  display: grid;
  grid-template-columns: minmax(11rem, 0.38fr) minmax(0, 1fr);
  min-height: 21rem;
}

.skill-file-tree {
  min-width: 0;
  padding: 0.35rem 0;
  border-right: 1px solid var(--border-color);
  overflow: auto;
}

.skill-file-tree > p,
.skill-file-preview > p {
  margin: 0;
  padding: 0.75rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
}

.skill-file-tree-row {
  width: 100%;
  min-width: 0;
  min-height: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-right: 0.45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.6875rem;
  text-align: left;
}

.skill-file-tree-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-file-tree-row:hover,
.skill-file-tree-row.active {
  background: var(--bg-hover);
  color: var(--text);
}

.skill-file-tree-row.file > svg {
  flex-shrink: 0;
}

.skill-file-tree-loading {
  min-height: 1.6rem;
  display: flex;
  align-items: center;
  color: var(--text-faint);
  font-size: 0.625rem;
}

.skill-file-preview {
  min-width: 0;
  max-height: 30rem;
  overflow: auto;
  background: var(--base);
}

.skill-file-preview-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
  padding: 0 0.65rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--base);
  color: var(--text-faint);
  font-size: 0.625rem;
}

.skill-file-note {
  margin: 0;
  padding: 0.35rem 0.75rem;
  color: var(--text-faint);
  font-size: 0.625rem;
}

.skill-file-markdown {
  padding: 0.85rem 1rem;
}

.skill-file-code {
  margin: 0;
  padding: 0.85rem 1rem;
  color: var(--text);
  font-size: 0.6875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.skill-file-image-frame {
  display: grid;
  place-items: center;
  padding: 1rem;
}

.skill-file-image-frame img {
  max-width: 100%;
  max-height: 24rem;
  object-fit: contain;
}

@media (max-width: 640px) {
  .skill-folder-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .skill-file-tree {
    max-height: 11rem;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
  }
}

.skill-cli-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.danger-text {
  color: #ff6b6b !important;
}

.danger-text:hover {
  background: rgba(255, 107, 107, 0.15) !important;
}

.pack-detail-desc {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

.pack-included-skills h4,
.pack-cli-section h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text-muted);
}

.pack-modal-skills-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pack-modal-skill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  gap: 1rem;
}

.pack-modal-skill-main b {
  font-size: 0.875rem;
  color: var(--text);
}

.pack-modal-skill-main p {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.125rem 0 0;
}

.pack-modal-skill-name {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.skill-inspect-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
}

.skill-inspect-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================================================
   Topbar Breadcrumb & Workspace Quick Actions
   ========================================================================== */

.topbar-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.breadcrumb-segment {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-muted);
  font-weight: 500;
}

.breadcrumb-segment.project-segment {
  color: var(--text);
  font-weight: 600;
}

.breadcrumb-segment.session-segment {
  color: var(--text-muted);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb-icon {
  color: var(--text-muted);
  opacity: 0.8;
}

.breadcrumb-separator {
  color: var(--border-color, rgba(255, 255, 255, 0.15));
  font-weight: 300;
  user-select: none;
}

.topbar-project-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: 0.25rem;
  min-width: 0;
}
/*
 * Keep the words, and keep every control reachable.
 *
 * `overflow: hidden` alone deleted whatever fell off the end — Commit sat 72px
 * past the row at an ordinary window size, with no scroll and no menu. Letting
 * the buttons shrink instead only traded that for illegibility: they squeezed
 * uniformly until a branch called "main" read as "m…", which tells a reader
 * less than a clipped button does.
 *
 * So the labels are not squeezed at all, and the row scrolls when it genuinely
 * runs out of room. The scrollbar is hidden because this is a strip of four
 * controls, not a document. A priority-ordered overflow menu would be better
 * still — the low-priority actions folding into a "…" — but nothing here is
 * ever unreachable or unreadable.
 */
.topbar-project-actions {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.topbar-project-actions::-webkit-scrollbar {
  display: none;
}
.topbar-project-actions > * {
  flex-shrink: 0;
}

.topbar-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.625rem;
  padding: 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  transition: background var(--motion-instant, 120ms) ease, border-color var(--motion-instant, 120ms) ease;
}
.topbar-chip-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-chip-btn > svg {
  flex-shrink: 0;
}

.topbar-chip-btn:hover {
  background: var(--bg-active);
  border-color: var(--border-hover, var(--border-color));
}

.topbar-chip-btn.git-chip {
  color: var(--text-muted);
}

.topbar-chip-btn.git-chip:hover {
  color: var(--text);
}

.git-dirty-indicator {
  color: #ff9f0a;
  font-size: 0.875rem;
  line-height: 0;
  margin-left: -0.1rem;
}

.topbar-menu-anchor {
  position: relative;
}

.topbar-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-sidebar, #16171a);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 0.25rem;
  z-index: 1000;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.topbar-dropdown-menu button {
  background: transparent;
  border: none;
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
  text-align: left;
  color: var(--text);
  border-radius: 0.35rem;
  cursor: pointer;
  transition: background 0.12s ease;
}

.header-popover {
  position: fixed;
  right: auto;
  max-width: calc(100vw - 1rem);
  overflow: auto;
  -webkit-app-region: no-drag;
}

.topbar-dropdown-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Without this a disabled item looked exactly like one that works, and the
   only way to find out was to click it. */
.topbar-dropdown-menu button:disabled {
  color: var(--text-faint);
  cursor: default;
}
.topbar-dropdown-menu button:disabled:hover {
  background: transparent;
}

.commit-menu {
  min-width: 15rem;
  padding: 0.375rem;
}
.commit-menu-message {
  width: 100%;
  margin-bottom: 0.25rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.35rem;
  background: var(--bg);
  color: var(--text);
  font-size: 0.75rem;
}
.commit-menu-message:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border-color));
}
.commit-menu-note {
  padding: 0.4rem 0.65rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
}

.project-actions-menu {
  width: min(25rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 5rem));
  overflow: auto;
}
.project-action-form { display: grid; gap: 0.55rem; padding: 0.5rem; }
.project-action-form label { display: grid; gap: 0.25rem; color: var(--text-faint); font-size: 0.6875rem; }
.project-action-form input { width: 100%; }
.project-action-form .actions { justify-content: flex-end; margin: 0.2rem 0 0; }
.project-actions-empty { margin: 0; padding: 0.5rem 0.65rem; }
.project-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.15rem;
}
.project-action-row .project-action-run {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.project-action-run > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.project-action-run b,
.project-action-run small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-action-run small { color: var(--text-faint); font-size: 0.625rem; font-family: var(--mono); }
.project-action-state { color: var(--text-faint); font-size: 0.625rem; text-transform: capitalize; }
.project-action-state.running { color: var(--green); }
.project-action-state.failed { color: var(--red); }
.project-action-output {
  grid-column: 1 / -1;
  max-height: 8rem;
  margin: 0.1rem 0.4rem 0.45rem;
  padding: 0.45rem;
  overflow: auto;
  border-radius: 0.35rem;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.625rem;
  white-space: pre-wrap;
}

/* Settings use headings and separator rows as their hierarchy. Cards remain
   for the rest of the product, but stacked boxes made this page harder to scan. */
.settings-body .card {
  margin: 0;
  padding: 1.15rem 0;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
}
.settings-body .appearance-page { gap: 0; }
.settings-body .card:last-child { border-bottom: 0; }

/* ==========================================================================
   ContextWindowMeter (Ring + Popover Card)
   ========================================================================== */

.composer-actions-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}
.composer-tools { display: flex; align-items: center; }
.composer-tools .agent-command-control { position: static; }
.composer-tools .agent-command-control[hidden], .agent-command-control > summary[hidden] { display: none; }
.composer-tools-popover, .agent-command-popover {
  z-index: 160; overflow-y: auto; box-sizing: border-box;
  padding: 0.875rem; border: 1px solid var(--border-color); border-radius: 0.75rem;
  background: var(--surface-0); color: var(--text); box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 24%);
  font-size: 0.8125rem;
}
.composer-tools-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.composer-tools-popover .capability-details { margin: 0.5rem 0 0; }
@container composer-row (max-width: 36rem) {
  .composer-controls { flex: 1; }
  .composer-options-inline { display: none; }
  .composer-options-overflow { display: block; }
  .composer-secondary-action { display: none; }
  .composer-actions-right { gap: .15rem; }
}

.context-meter-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.context-meter-ring {
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: opacity 0.15s ease;
}

.context-meter-ring:hover {
  opacity: 0.85;
}

/* Popover card anchored above the ring */
.context-card {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 264px;
  background: var(--bg-sidebar, #16171a);
  border: 1px solid var(--border-color);
  border-radius: 0.625rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 0.75rem 0.875rem;
  z-index: 500;
  animation: contextCardIn 0.12s ease;
}

@keyframes contextCardIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.context-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.context-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.context-card-stat {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.context-card-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.context-card-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.context-card-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.context-card-action:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   RunSummary Accordion
   ========================================================================== */

.run-summary-card {
  margin: 0.5rem 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.run-summary-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.run-summary-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: inherit;
  transition: color 0.15s ease;
}

.run-summary-header:hover {
  color: var(--text);
}

.run-summary-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.run-summary-icon {
  color: var(--text-muted);
}

.run-summary-label {
  font-weight: 500;
  color: var(--text-muted);
}

.run-summary-duration {
  color: var(--text-muted);
  font-size: 0.6875rem;
}

.run-summary-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.run-summary-chevron.open {
  transform: rotate(180deg);
}

.run-summary-body {
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.run-summary-chips-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 .75rem .5rem;
  gap: 0.35rem;
}

.run-summary-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.6875rem;
  font-family: var(--mono);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 0;
  max-width: 100%;
}
.run-summary-file-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.run-summary-file-chip:disabled { cursor: default; }

.run-summary-file-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.file-chip-action {
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1;
}

.file-chip-action.created { color: var(--green, #30d158); }
.file-chip-action.modified { color: var(--yellow, #ffd60a); }
.file-chip-action.deleted { color: var(--red, #ff453a); }
.file-chip-action.read { color: var(--text-muted); }

.file-chip-name {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip-stat {
  color: var(--green, #30d158);
  font-size: 0.625rem;
  font-family: var(--mono);
}

.file-chip-stat-del {
  color: var(--red, #ff453a);
  font-size: 0.625rem;
  font-family: var(--mono);
}

.run-summary-more-chip {
  font-size: 0.6875rem;
  color: var(--text-muted);
  padding: 0.1rem 0.3rem;
}

/* TurnFilesCard */
.turn-files-card {
  margin: 0.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--surface-0);
  overflow: hidden;
}

.turn-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.75rem;
}

.turn-files-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
  color: var(--text-muted);
}

.turn-files-icon {
  color: var(--text-faint);
}

.turn-files-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.turn-files-diff-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
  padding: 0.1rem 0.4rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.turn-files-diff-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.turn-files-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.25rem 0;
}

.turn-file-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.3rem 0.75rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.turn-file-pill:hover {
  background: var(--bg-hover);
}

.turn-file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.2rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.turn-file-badge.created {
  background: rgba(48, 209, 88, 0.15);
  color: var(--green, #30d158);
}

.turn-file-badge.modified {
  background: rgba(255, 214, 10, 0.15);
  color: var(--yellow, #ffd60a);
}

.turn-file-badge.deleted {
  background: rgba(255, 69, 58, 0.15);
  color: var(--red, #ff453a);
}

.turn-file-badge.read {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.turn-file-path {
  display: flex;
  align-items: baseline;
  min-width: 0;
  flex: 1;
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.turn-file-dir {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: left;
}

.turn-file-name {
  color: var(--text);
  font-weight: 500;
  flex-shrink: 0;
}

.turn-file-numstat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.625rem;
}

.turn-file-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.turn-file-row:hover .turn-file-undo,
.turn-file-row:focus-within .turn-file-undo {
  opacity: 1;
}

.turn-file-undo {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0 0.5rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.turn-file-undo:hover {
  color: var(--red, #ff453a);
}

.turn-files-restore-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
  padding: 0.1rem 0.45rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.turn-files-restore-btn:hover {
  background: rgba(255, 69, 58, 0.15);
  color: var(--red, #ff453a);
  border-color: rgba(255, 69, 58, 0.3);
}


/* ==========================================================================
   File Mentions (Clickable Inline Code)
   Identical to regular inline code, with a pointer cursor on hover.
   ========================================================================== */

.file-mention {
  cursor: pointer;
  text-decoration: none;
}

.file-mention:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  text-underline-offset: 2px;
}

/* ==========================================================================
   Harness Provider Cards (Settings → Agents)
   ========================================================================== */


@media (min-width: 640px) {
}













/* Landing card pieces reused from the old full-page layout. */
/* Landing: the app mark, and the two plain paragraphs that replaced the
   feature-card grid. Colours come from tokens so the page follows the same
   theme as the app rather than carrying its own hardcoded palette. */


/* ── Web landing ───────────────────────────────────────────────────────────
   A teaser card over the running app, and a modal behind one click. The app
   itself is the pitch, so the persistent overlay stays as small as it can be
   and never covers the composer. */


/* Narrow viewports get the panel as the page: the desktop shell has no
   meaningful phone layout, and showing a broken one sells nothing. */

.skills-notice-warn {
  border-color: color-mix(in srgb, var(--yellow) 40%, transparent);
  color: var(--yellow);
}
.skill-source-link {
  text-decoration: none;
}
.skill-source-link:hover {
  text-decoration: underline;
}
.skill-desc-missing {
  color: var(--text-faint);
  font-style: italic;
}

.settings-snippet {
  margin: 0.4rem 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  background: var(--base);
  font-size: 0.75rem;
  color: var(--subtext-0);
  overflow-x: auto;
  white-space: pre;
}

.skills-source-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0 0.5rem;
  font-size: 0.75rem;
  color: var(--subtext-1);
}
.skills-source-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.skills-source-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.skills-source-dot.on {
  background: var(--green, #6aa84f);
}
.skills-source-dot.off {
  background: var(--text-faint);
}

/* Landing: the harnesses Capsule drives, with the CLI it spawns. A grid says
   the bring-your-own-subscription premise faster than a paragraph does. */
@media (max-width: 460px) {
}

/* Live typography samples in Appearance. */
.type-preview {
  margin: 0.15rem 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  background: var(--base);
}
.type-preview-prose {
  margin: 0 0 0.55rem;
  font-size: var(--text-message);
  line-height: 1.55;
  color: var(--text);
}
.type-preview-code {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-radius: var(--control-radius);
  background: var(--bg-hover);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--subtext-0);
  overflow-x: auto;
  white-space: pre;
}
.width-preview {
  margin: 0.15rem 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  background: var(--base);
}
.width-preview-column {
  /* Scaled, not literal. The three widths are 40/48/60rem and the settings
     column is narrower than two of them, so at full size Default and Wide both
     clip to 100% and look identical. One constant factor keeps the options
     distinct and in order; in a very narrow column the widest still clamps. */
  width: calc(var(--chat-max) * 0.6);
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 0.3rem;
}
.width-preview-column span {
  display: block;
  height: 0.4rem;
  border-radius: 0.2rem;
  background: var(--bg-hover);
}
.width-preview-column span:last-child {
  width: 62%;
}

/* File-type mark in the tree. A short label reads at this size where a
   detailed glyph does not; the colour carries the family. */
.codex-file-mark {
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.palette-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  padding: 0.5rem;
  gap: 0.15rem;
}
.palette-empty {
  margin: 0;
  padding: 0.85rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-faint, #71717a);
  text-align: center;
}
.palette-hints {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.75rem;
  color: var(--text-faint, #71717a);
}
.palette-hints span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.palette-hints kbd {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.6875rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  min-width: 1.15rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.06);
  color: #d4d4d8;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* Discovery uses one bounded surface, with secondary context below each name. */
.palette-backdrop:has(> .search-dialog) { background: color-mix(in srgb, var(--bg) 64%, transparent); }
.search-dialog { display: flex; flex-direction: column; max-height: calc(84dvh - 1rem); background: var(--bg-elevated, var(--bg)); color: var(--text); border-color: var(--border-color); box-shadow: 0 16px 48px rgb(0 0 0 / 24%); }
.search-dialog .palette-list { flex: 1; max-height: 25rem; overscroll-behavior: contain; scrollbar-gutter: stable; }
.search-dialog .palette-search-row { border-color: var(--border-color); }
.search-dialog .palette-search-row input { min-width: 0; font-size: .875rem; }
.search-dialog .search-dialog-close { width: 1.75rem; height: 1.75rem; padding: .35rem; flex-shrink: 0; }
.search-dialog-section { color: var(--text-faint); font-size: .6875rem; font-weight: 500; padding: .6rem .6rem .3rem; }
.search-dialog .search-dialog-item { min-height: 2.35rem; align-items: center; padding: .45rem .6rem; color: var(--text); transition: none; }
.search-dialog .search-dialog-item.active, .search-dialog button:hover { background: var(--bg-hover); color: var(--text); }
.search-dialog .search-dialog-item[aria-disabled="true"] { color: var(--text-muted); }
.search-dialog-icon { display: grid; place-items: center; flex: 0 0 1rem; color: var(--text-muted); }
.search-dialog-copy { display: grid; gap: .12rem; min-width: 0; flex: 1; }
.search-dialog-copy > span, .search-dialog-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-dialog-copy > span { font-size: .8125rem; font-weight: 450; }
.search-dialog-copy small { color: var(--text-muted); font-size: .75rem; }
.search-dialog-item > kbd { color: var(--text-faint); font: inherit; font-size: .6875rem; flex-shrink: 0; }
.search-dialog .palette-hints { flex-wrap: wrap; gap: .75rem; border-color: var(--border-color); background: var(--bg-hover); flex-shrink: 0; }
.search-dialog .palette-hints kbd { color: var(--text-muted); background: var(--bg); border-color: var(--border-color); box-shadow: none; }
.search-dialog-feedback { display: flex; align-items: flex-start; gap: .5rem; padding: .6rem 1rem; font-size: .8125rem; color: var(--red); }
.search-dialog-feedback > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.search-dialog .search-dialog-feedback button { width: auto; padding: .15rem .4rem; flex-shrink: 0; color: var(--text); }
.search-dialog-status { padding: .5rem 1rem 0; margin: 0; font-size: .75rem; color: var(--text-muted); }
@media (pointer: coarse) { .search-dialog .search-dialog-item { min-height: 2.75rem; } }

.changed-files-actions {
  display: flex;
  /* Expanding sits at the reading edge, restoring at the far one: the safe
     move and the destructive one should not be neighbours. */
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem 0.45rem;
  border-top: 1px solid var(--border-color);
}
.changed-files-actions .ghost {
  font-size: 0.6875rem;
}

/* Settings nav, hosted in the sidebar. */
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.15rem 0 0.5rem;
}
.settings-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  padding: 0.34rem 0.45rem;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--subtext-1);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
.settings-nav button:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.settings-nav button.active {
  background: var(--bg-active);
  color: var(--text);
  font-weight: 550;
}
.settings-result-section {
  flex-shrink: 0;
  font-size: 0.625rem;
  color: var(--text-faint);
}
.settings-breadcrumb {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  color: var(--text-faint);
}
.settings-breadcrumb span {
  padding: 0 0.3rem;
}
.rotate-180 {
  display: inline-flex;
  transform: rotate(180deg);
}

.settings-crumbbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.settings-crumbbar .settings-breadcrumb {
  margin: 0;
}
.shortcut-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
button.shortcut-keys {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--control-radius);
  padding: 0.15rem 0.3rem;
  cursor: pointer;
}
button.shortcut-keys:hover:not(:disabled) {
  border-color: var(--border-color);
}
button.shortcut-keys:disabled {
  cursor: default;
  opacity: 0.65;
}
button.shortcut-keys.capturing {
  border-color: var(--accent);
}
.shortcut-capturing {
  font-size: 0.6875rem;
  color: var(--accent);
}
.settings-keybind-error {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--red);
}

/* Context-window meter in the composer footer. The fill is animated with
   transform only: a width transition on a bar that updates every few seconds
   repaints continuously and shows up as GPU load on a high-refresh display. */
.context-meter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.context-meter-track {
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  background: var(--bg-active);
  overflow: hidden;
}
.context-meter-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transform-origin: left center;
  transition: transform 240ms ease;
}
.context-meter--warn {
  color: var(--yellow);
}
.context-meter--critical {
  color: var(--red);
}

/* How long a folded turn took, next to its message count. */
.turn-fold-duration {
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: 0.6875rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Usage view. */
.usage-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.usage-total {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.usage-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 5rem;
  margin-bottom: 1.25rem;
  padding: 0 0.1rem;
  border-bottom: 1px solid var(--border-color);
}
.usage-bar {
  flex: 1 1 0;
  min-width: 2px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.usage-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px 1px 0 0;
  background: var(--accent);
  transform-origin: bottom center;
}

/* A menu option that explains itself. */
/* The tile sits beside the text column, not above it, so the label and its
   detail line stay one block. */
.menu-select-pop button {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.menu-option-text {
  min-width: 0;
  flex: 1;
}
.agent-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.05rem;
  border-radius: 0.3rem;
  font-size: 0.5625rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  /* Neutral unless the provider has a colour people know it by. */
  color: var(--agent-accent, var(--text-muted));
  background: color-mix(in srgb, var(--agent-accent, var(--overlay-0)) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agent-accent, var(--overlay-0)) 28%, transparent);
}
.menu-select-trigger .agent-glyph {
  margin-top: 0;
}
/* The drawn marks. A brand colour only when it survives this surface;
   otherwise the mark takes the row's own colour. */
.agent-mark {
  flex-shrink: 0;
  color: var(--agent-accent, currentColor);
}
.menu-select-pop .agent-mark {
  margin-top: 0.1rem;
}

.menu-option-label {
  display: block;
  /* Only the label. Capitalising the whole row Title-Cased the detail
     sentences and the binary paths inside them. */
  text-transform: capitalize;
}
.menu-option-detail {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--text-faint);
  white-space: normal;
}

/* Scope row above the project tree. */
.sidebar-scope {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.1rem var(--sidebar-content-inset) 0.35rem;
}
/* The actions sit together at the end of the row they belong to. Dimmed
   rather than hidden until hover: with no projects yet, these two are the
   only way forward, and a control nobody can see is not a quiet one. */
.sidebar-scope-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  margin-left: auto;
  opacity: 0.55;
  transition: opacity var(--motion-instant, 120ms) var(--motion-ease, ease);
}
.sidebar-scope:hover .sidebar-scope-actions,
.sidebar-scope:focus-within .sidebar-scope-actions {
  opacity: 1;
}
.sidebar-scope-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--subtext-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-scope-label svg {
  flex-shrink: 0;
  color: var(--text-faint);
}

/* Usage dashboard. */
.usage-top {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin: 0.75rem 0 1.5rem;
}
@media (max-width: 900px) {
  .usage-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}
.usage-figure-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--text-faint);
}
.usage-providers {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.7rem;
}
.usage-provider-head {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--text);
}
.usage-provider-value {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.usage-provider-sub {
  display: block;
  margin-top: 0.1rem;
  padding-left: 0.95rem;
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.usage-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-faint);
}
/* One colour per provider, shared by the dot and its bars. */
.usage-dot--claude {
  background: var(--peach, #d4906a);
}
.usage-dot--codex {
  background: var(--subtext-1);
}
.usage-chart-block h4,
.usage-section {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--subtext-1);
}
.usage-section {
  margin-top: 1.5rem;
}
.usage-chart-frame {
  position: relative;
  padding-left: 2.75rem;
}
.usage-axis-max {
  position: absolute;
  left: 0;
  top: -0.35rem;
  font-size: 0.625rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.usage-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 7rem;
  border-bottom: 1px solid var(--border-color);
}
.usage-axis-x {
  display: flex;
  justify-content: space-between;
  margin: 0.3rem 0 0 2.75rem;
  font-size: 0.625rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.usage-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1rem 1.5rem;
}
.usage-figure-cell {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.usage-cell-label {
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.usage-cell-value {
  font-size: 1.0625rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/*
 * A table that is wider than its column scrolls inside itself.
 *
 * The process table has a first column reserved at 12rem plus five more, and
 * on a narrow window it was wider than the settings page — so instead of
 * scrolling, it pushed the whole page sideways and every card in it went off
 * screen. Wide content scrolls in its own box; the page never does.
 */
.usage-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.usage-table thead,
.usage-table tbody {
  display: table;
  width: 100%;
}
.usage-table th {
  padding: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-faint);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.usage-table td {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--subtext-0);
}
.usage-table tr:last-child td {
  border-bottom: 0;
}
.usage-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 1rem;
}

/* Usage is a dashboard, not a settings form: it reads across, so it gets the
   width rather than the 56rem reading column settings uses. */
.panel-inner.usage-page {
  width: min(72rem, 100%);
}

/* Skills tag filters. Ranked and capped, so this is one row rather than six. */
.skills-tag-filters .tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.tag-chip .tag-count {
  font-size: 0.625rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.tag-chip.active .tag-count {
  color: inherit;
  opacity: 0.7;
}
.tag-chip.tag-more {
  color: var(--text-faint);
}

/* Card actions. Two solid accent buttons per card, repeated down a grid, made
   the page read as a wall of blue; the destination is the skill, not the
   button. The primary action keeps the accent as a text colour and a hairline,
   and only the attached state fills. */
.skill-card-actions .chip.send {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  font-weight: 550;
}
.skill-card-actions .chip.send:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.skill-card-actions .chip.active-attached {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid transparent;
}
.skill-card-actions .chip.installed {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-faint);
}

/* The page header was a title, two lines of prose and a full-width field
   before any skill. */
.skills-header h2 {
  font-size: 1.125rem;
  margin: 0;
}
.skills-header p {
  font-size: 0.8125rem;
  max-width: 46rem;
}
.skills-search-bar {
  max-width: 26rem;
}

/* Surface chooser in the inspector. */
.codex-launcher-head {
  text-align: center;
  margin-bottom: 1rem;
}
.codex-launcher-head h3 {
  margin: 0 0 0.2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}
.codex-launcher-head p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-faint);
}
.codex-launcher-card {
  display: grid;
  gap: 0.25rem;
  align-items: start;
  justify-content: stretch;
  text-align: left;
  padding: 0.7rem 0.85rem;
}
.codex-launcher-lead {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.codex-launcher-card .codex-launcher-kbd {
  margin-left: auto;
}
.codex-launcher-detail {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--text-faint);
}
.codex-launcher-card:disabled {
  cursor: default;
  opacity: 0.55;
}
.codex-launcher-card:disabled:hover {
  background: inherit;
}

/* Running turn: elapsed time beside the label. */
.run-elapsed {
  margin-left: 0.4rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
/* Kind-of-work icon on an activity row. */
.step-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.3rem;
  color: var(--text-faint);
}
.step.error .step-icon {
  color: var(--red);
}

/* Hover preview on a folded turn. */
.turn-fold-preview {
  position: absolute;
  left: 0;
  top: calc(100% + 0.3rem);
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  width: min(24rem, 80vw);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  background: var(--base);
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
  text-align: left;
  white-space: normal;
  pointer-events: none;
}
.turn-fold:hover .turn-fold-preview,
.turn-fold:focus-visible .turn-fold-preview {
  display: flex;
}
.turn-fold-preview-prompt {
  font-size: 0.75rem;
  color: var(--text);
}
.turn-fold-preview-reply {
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--text-faint);
}

/* Markdown tables in a reply. Wide ones scroll inside the message rather than
   widening the transcript column. */
.md-table-wrap {
  overflow-x: auto;
  margin: 0.6rem 0;
}
.md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375em;
}
.md-table th {
  padding: 0.35rem 0.7rem 0.35rem 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--subtext-1);
  font-weight: 550;
  white-space: nowrap;
}
.md-table td {
  padding: 0.4rem 0.7rem 0.4rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
  vertical-align: top;
}
.md-table tr:last-child td {
  border-bottom: 0;
}
.md-table code {
  white-space: nowrap;
}

/* Enough for a process name, and the table scrolls when the window is not. */
.process-table td:first-child {
  min-width: 12rem;
}
.process-table {
  min-width: 0;
}
.process-sampled {
  margin-top: 0.6rem;
  font-size: 0.6875rem;
}

/* Host conditions above the process table: they explain it. */
.host-state {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0.75rem 0 1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  font-size: 0.75rem;
  color: var(--subtext-0);
}
.host-state .usage-cell-label {
  margin-right: 0.2rem;
}
.host-state--notice {
  border-color: color-mix(in srgb, var(--yellow) 35%, var(--border-color));
}
.host-state--warn {
  border-color: color-mix(in srgb, var(--red) 45%, var(--border-color));
  color: var(--red);
}

/* ---------------------------------------------------------------------------
   Public site. Scoped under .site so nothing leaks into the app, which renders
   inside it as the product shot.
   --------------------------------------------------------------------------- */
.site {
  /* height, not min-height. The app sets overflow:hidden on html and body —
     right for a desktop shell that must not scroll — so the document cannot
     scroll and .site has to be the scroll container itself. */
  height: 100vh;
  overflow-y: auto;
  background: var(--base);
  color: var(--text);
  --site-gutter: 1.5rem;
  --site-measure: 44rem;
}

.site-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem var(--site-gutter);
  background: color-mix(in srgb, var(--base) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
.site-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.site-mark img {
  border-radius: 0.35rem;
}
.site-bar-link {
  font-size: 0.8125rem;
  color: var(--text-faint);
  text-decoration: none;
}
.site-bar-link:hover {
  color: var(--text);
}

/* Hero. The depth comes from one soft wash behind the mark, not from a
   gradient on every surface. */
.site-hero {
  position: relative;
  max-width: var(--site-measure);
  margin: 0 auto;
  padding: 5rem var(--site-gutter) 3.5rem;
  text-align: center;
}
.site-hero-mark {
  border-radius: 1.1rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
}
.site-hero h1 {
  margin: 0 0 1.15rem;
  /* Keeps the last word off a line of its own without a hard break, which
     fought the wrap at this measure. */
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(2rem, 4.8vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.site-lede {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--subtext-1);
}
.site-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 2rem 0 0.9rem;
}
.site-btn-primary,
.site-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.3rem;
  border-radius: 0.6rem;
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
  transition: transform var(--motion-instant) var(--motion-ease);
}
.site-btn-primary {
  background: var(--text);
  color: var(--base);
}
.site-btn-primary:hover,
.site-btn-ghost:hover {
  transform: translateY(-1px);
}
.site-btn-ghost {
  border: 1px solid var(--border-color);
  color: var(--text);
}
.site-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* Product shot. Wider than the reading column, because it is the evidence. */
.site-shot {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--site-gutter);
}
.site-shot-wrapper {
  position: relative;
  margin-top: 1.5rem;
}
.site-shot-glow {
  position: absolute;
  inset: -1.5rem 5%;
  background: radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.site-shot-frame {
  position: relative;
  z-index: 1;
  isolation: isolate;
  height: 42rem;
  max-height: 85vh;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  box-shadow:
    0 24px 72px -16px rgba(0, 0, 0, 0.75),
    0 0 0 1px var(--border-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.site-shot-frame .app {
  height: 100%;
}
.site-preview {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.showcase-preview {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.site-shot-traffic-lights {
  position: absolute;
  top: 1.25rem;
  left: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  z-index: 10;
  pointer-events: none;
}
.traffic-dot {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 99px;
  display: inline-block;
}
.traffic-dot.close {
  background: #ff5f56;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.traffic-dot.minimize {
  background: #ffbd2e;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.traffic-dot.maximize {
  background: #27c93f;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.site-shot-note {
  margin-top: 1rem;
  text-align: center;
}

/* Sections. One alignment: the eyebrow, heading and lede are centred, and the
   content beneath them is left-aligned inside a column of the same width.
   The first pass mixed the two and read as a wireframe. */
.site-section {
  max-width: var(--site-measure);
  margin: 0 auto;
  padding: 6rem var(--site-gutter) 0;
  text-align: center;
}
/* The palette has no vivid hue by design, so the eyebrow earns its place
   through size, weight and tracking rather than a colour invented for it. */
.site-eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.site-section h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.site-harness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 2.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
  background: var(--border-color);
  border-radius: 0.7rem;
  overflow: hidden;
  text-align: left;
  box-shadow:
    0 0 0 1px var(--border-strong),
    var(--shadow-raised);
}
.site-harness-grid li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  background: var(--surface-0);
  font-size: 0.875rem;
}
.site-harness-grid code {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-faint);
}
.site-points {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.site-points li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  color: var(--subtext-1);
}
.site-points svg {
  flex-shrink: 0;
  color: var(--green);
}

.site-needs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.75rem 2rem;
  margin-top: 2.5rem;
  text-align: left;
}
.site-needs h3 {
  margin: 0 0 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.site-needs p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-faint);
}

.site-clone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem auto 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  background: var(--surface-0);
  box-shadow:
    0 0 0 1px var(--border-strong),
    var(--shadow-raised);
  text-align: left;
}
.site-clone code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--subtext-0);
}
.site-copy {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0.25rem;
}
.site-copy:hover {
  color: var(--text);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 72rem;
  margin: 6rem auto 0;
  padding: 1.5rem var(--site-gutter) 2.5rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
  color: var(--text-faint);
}
.site-footer a {
  color: var(--text-faint);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--text);
}

@media (max-width: 640px) {
  .site-harness-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-hero {
    padding-top: 3.5rem;
  }
  .site-section {
    padding-top: 4rem;
  }
}

/* Detected source-control tooling. */
.tool-row {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-color);
}
.tool-row:last-child {
  border-bottom: 0;
}
.tool-dot {
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.42rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-faint);
}
.tool-dot.on {
  background: var(--green);
}
.tool-body {
  min-width: 0;
}
.tool-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.tool-name {
  font-size: 0.875rem;
  color: var(--text);
}
.tool-version {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.tool-account {
  font-size: 0.75rem;
  color: var(--text-faint);
}
.tool-guidance {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-faint);
}
.tool-guidance code,
.tool-row code {
  font-family: var(--mono);
}

/* Harnesses screen: a stable catalog and one selected detail surface. */
.harness-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.75rem 0;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.harness-context-folder {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}
.harness-context-folder > span {
  color: var(--text-faint);
  font-size: 0.6875rem;
}
.harness-context-folder strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}
.harness-context-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.harness-workspace {
  display: grid;
  grid-template-columns: minmax(12.5rem, 0.75fr) minmax(0, 1.5fr);
  min-height: 24rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface-0) 48%, transparent);
}
.harness-catalog {
  min-width: 0;
  padding: 0.35rem;
  border-right: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--surface-0) 58%, transparent);
}
.harness-catalog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem 0.5rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.harness-catalog-row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 1.75rem;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--text-muted);
  padding: 0.6rem 0.55rem;
  margin-bottom: .2rem;
  text-align: left;
}
.harness-catalog-row:hover { background: var(--bg-hover); color: var(--text); }
.harness-catalog-row.active { background: var(--surface-1); border-color: var(--border-strong); color: var(--text); }
.harness-catalog-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.harness-catalog-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}
.harness-catalog-row b,
.harness-catalog-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.harness-catalog-row b { font-size: 0.8125rem; font-weight: 550; }
.harness-catalog-row small { color: var(--text-muted); font-size: 0.6875rem; }
.harness-catalog-indicators { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; }
.harness-catalog-row i { width: 0.375rem; height: 0.375rem; }
.harness-show-all {
  width: 100%;
  margin-top: 0.25rem;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  padding: 0.45rem 0.5rem;
  font-size: 0.6875rem;
  text-align: left;
}
.harness-show-all:hover { color: var(--text); }
.harness-detail {
  min-width: 0;
  padding: 1rem;
}
.harness-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.harness-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}
.harness-identity > div { min-width: 0; }
.harness-identity b { font-size: 0.875rem; }
.harness-identity .muted { margin-top: 0.2rem; font-size: 0.75rem; line-height: 1.45; }
.harness-identity .mono,
.harness-identity .faint {
  margin-top: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem;
}
.harness-dedication { margin-top: 1rem; }
.harness-doctor {
  margin-top: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.55rem;
  background: var(--surface-0);
}
.harness-doctor pre {
  max-height: 8rem;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.625rem;
}
.harness-primary-actions { margin-top: 0.85rem; }
.harness-live-sessions {
  margin-top: 1rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.5rem;
}
.harness-live-sessions .nav-label { padding-left: 0; }
.harness-session-diagnostics {
  margin-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.65rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.harness-session-diagnostics summary { cursor: pointer; }
.harness-session-diagnostics pre {
  max-height: 20rem;
  margin: 0.65rem 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.6875rem;
}
.harness-session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.harness-session-row .actions { margin-top: 0; }
.harness-session-row .ghost,
.harness-session-row .danger { min-width: auto; padding: 0 0.5rem; }
.harness-empty {
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-size: 0.75rem;
}
.harness-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.harness-options label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.harness-options label > span {
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.harness-options input,
.harness-options select {
  min-width: 0;
  width: 100%;
}
.harness-options label > small {
  min-height: 2.1em;
  font-size: 0.625rem;
  line-height: 1.35;
}
.harness-workspace + details.card { margin-top: 0; }
@media (max-width: 820px) {
  .harness-context-bar,
  .harness-context-actions { align-items: stretch; }
  .harness-context-bar { flex-direction: column; }
  .harness-workspace { grid-template-columns: minmax(0, 1fr); }
  .harness-catalog { border-right: 0; border-bottom: 1px solid var(--border-color); }
  .harness-session-row { grid-template-columns: minmax(0, 1fr); }
}
details.card > summary {
  cursor: default;
  font-weight: 600;
  font-size: 0.8125rem;
}

/* Terminal panel. Docked under the composer so the shell and the conversation
   share the same folder and the same column. */
.terminal-dock {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex-shrink: 0;
  border-top: 1px solid var(--border-color);
  background: var(--base);
}
.terminal-dock-rail {
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 7px;
  cursor: ns-resize;
  z-index: 2;
}
.terminal-tabs {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-sidebar);
  flex-shrink: 0;
}
.terminal-tab {
  display: inline-flex;
  align-items: center;
  border-radius: var(--control-radius);
  color: var(--text-muted);
  font-size: 0.75rem;
}
.terminal-tab:hover {
  background: var(--bg-hover);
}
.terminal-tab.active {
  background: var(--bg-active);
  color: var(--text);
}
.terminal-tab.exited {
  color: var(--text-faint);
}
.terminal-tab > button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  padding: 0.3rem 0.15rem 0.3rem 0.5rem;
  max-width: 12rem;
}
.terminal-tab > button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.terminal-tab small {
  color: var(--text-faint);
  font-size: 0.625rem;
}
.terminal-tab-close {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--overlay-0);
  padding: 0.3rem 0.4rem 0.3rem 0.25rem;
  opacity: 0;
}
.terminal-tab:hover .terminal-tab-close,
.terminal-tab.active .terminal-tab-close {
  opacity: 1;
}
.terminal-tab-close:hover {
  color: var(--text);
}
.terminal-panes {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0.35rem 0.5rem 0.5rem;
  background: var(--base);
}
.terminal-pane {
  position: absolute;
  inset: 0.35rem 0.5rem 0.5rem;
  /* Hidden rather than unmounted: disposing an xterm loses the scrollback and
     kills whatever is running in it. */
  visibility: hidden;
  background: transparent;
}
.terminal-pane.active {
  visibility: visible;
}
.terminal-pane .xterm,
.terminal-pane .xterm-screen,
.terminal-pane .xterm-viewport {
  background: transparent !important;
  scrollbar-width: thin;
}

/* The action editor. Wider than the app's other dialogs because a command and
   a URL both want a full line to themselves. */
.project-action-dialog {
  width: min(32rem, calc(100vw - 2.5rem));
  display: grid;
  gap: 1rem;
}

.project-action-fields {
  display: grid;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.project-action-error {
  margin: 0;
  color: var(--red);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.project-action-dialog label {
  display: grid;
  gap: 0.35rem;
  color: var(--text, #e4e4e7);
  font-size: 0.8125rem;
  font-weight: 500;
}
.project-action-dialog label small {
  color: var(--text-faint, #71717a);
  font-weight: 400;
  font-size: 0.75rem;
}
.project-action-dialog .field-hint {
  color: var(--text-faint, #71717a);
  font-size: 0.75rem;
  margin-top: 0.1rem;
}
.project-action-dialog input[type="text"] {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  height: 2.25rem;
  box-sizing: border-box;
  font-size: 0.8125rem;
  color: var(--text, #f4f4f5);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.project-action-dialog input[type="text"]:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
  background: rgba(0, 0, 0, 0.45);
}
.project-action-dialog textarea {
  resize: vertical;
  min-height: 4rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  box-sizing: border-box;
  color: var(--text, #f4f4f5);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.project-action-dialog textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
  background: rgba(0, 0, 0, 0.45);
}
.project-action-dialog .setting {
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.project-action-dialog .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* What sending will do when the thread is live on another agent. A footnote
   under the control it is about — bordered and stacked over the prompt, it
   read as an error the thread had already hit. */
.composer-switch-note {
  position: relative;
  z-index: 1;
  margin: 0.35rem 0 0;
  padding-left: 0.4rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--text-faint);
}

/* A failure the reader can put away. The banner used to sit there until the
   next one replaced it, over whatever they did next. */
.notice-dismissable {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.notice-dismissable > span {
  flex: 1;
  min-width: 0;
}
.notice-dismissable > .icon-btn {
  flex-shrink: 0;
  color: inherit;
  opacity: 0.65;
}
.notice-dismissable > .icon-btn:hover {
  opacity: 1;
}

/* Resource history. Two lines, no axes: the shape is the point — whether the
   agents or the app were busy, and when. */
.resource-history {
  margin: 0.75rem 0 0.25rem;
}
.resource-history svg {
  width: 100%;
  height: 44px;
  display: block;
}
.resource-history path {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.resource-history-agent {
  stroke: var(--green);
}
.resource-history-app {
  stroke: var(--overlay-0);
}
.resource-history figcaption {
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.resource-key-agent {
  color: var(--green);
}
.resource-key-app {
  color: var(--text-muted);
}
.process-section {
  margin-top: 1rem;
}

/* Project screen. The rows are settings, so they read like the ones in
   Settings rather than like a file listing. */
.project-folder-row,
.project-action-listing {
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-color);
}
.project-folder-row:last-of-type,
.project-action-listing:last-of-type {
  border-bottom: 0;
}
.project-folder-row .inline-icon,
.project-action-listing .inline-icon {
  min-width: 0;
  gap: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-action-listing code {
  color: var(--text-faint);
  font-size: 0.75rem;
}
/* A state, not a control: it says how a row is used, and clicking it does
   nothing. */
.chip-static {
  flex-shrink: 0;
  border-radius: 0.3rem;
  border: 1px solid var(--border-color);
  padding: 0.05rem 0.3rem;
  font-size: 0.6875rem;
  color: var(--text-faint);
}

/* Holds the thread's place while the first load lands, so the composer does
   not start centred and then jump to the bottom. */
.thread-hydrating {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem 0;
}
.history-skeleton { display: block; width: 86%; height: 0.65rem; border-radius: 0.3rem; background: var(--bg-hover); }
.history-skeleton-prompt { align-self: flex-end; width: 38%; height: 2.75rem; margin-bottom: 2.5rem; border-radius: 0.8rem; }
.history-skeleton-short { width: 62%; }
.history-loading-label { margin-top: 0.4rem; font-size: 0.75rem; color: var(--text-faint); }
.thread-history-error { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; margin-bottom: 1rem; border: 1px solid var(--border-color); border-radius: 0.65rem; font-size: 0.8125rem; }
.thread-history-error p { margin: 0.3rem 0 0; color: var(--text-muted); overflow-wrap: anywhere; }
.thread-history-error .chip { flex: none; }

/* An empty sidebar asks for the one thing it needs, in the middle of the space
   it would otherwise leave blank. */
.sidebar-onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  text-align: center;
}
.sidebar-onboarding p {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.8125rem;
}
.sidebar-loading {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem var(--sidebar-content-inset);
}
.sidebar-loading .skeleton-line {
  height: 0.9rem;
}

/* Source picker. A row is an icon, a name and what it does — the same shape
   the command palette uses, so the two read as one surface. */
.palette-section {
  margin: 0;
  padding: 0.45rem 0.65rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint, #71717a);
}
.palette-source {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text, #f4f4f5);
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.palette-source-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--text-muted, #a1a1aa);
  flex-shrink: 0;
  transition: all 120ms ease;
}
.palette-source-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.palette-source b {
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--text, #f4f4f5);
  line-height: 1.25;
}
.palette-source small {
  color: var(--text-muted, #a1a1aa);
  font-size: 0.75rem;
  line-height: 1.35;
}
.palette-source.active {
  background: rgba(255, 255, 255, 0.08);
}
.palette-source.active .palette-source-icon {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.palette-source.active b {
  color: #ffffff;
}
.palette-source.active small {
  color: #e4e4e7;
}

/* A finished turn's work log. No "Working" line above it and no shimmer —
   just the card, collapsed, saying what the turn did. */
.active-run-msg.settled .run-summary-card {
  margin-top: 0;
}
.active-run-msg.settled {
  padding-top: 0;
}

/* Why the last turn failed. Sized to its text and capped at three lines, with
   the whole message on hover: a wall of red the width of the thread reads as
   the app breaking rather than one turn going wrong. */
/* Aligned with the messages and cards it sits under, not floated in the
   middle of them: it is one more block in the thread's single column. */
.thread-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin: 0.5rem 0 0;
  padding: 0.4375rem 0.4375rem 0.4375rem 0.625rem;
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  color: var(--fg);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.thread-error > svg:first-child {
  flex-shrink: 0;
  margin-top: 0.1875rem;
  color: var(--red);
}
.thread-error-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.thread-error .icon-btn {
  flex-shrink: 0;
  margin: -0.125rem -0.125rem 0 0;
  color: var(--muted);
}
.thread-error .icon-btn:hover {
  color: var(--fg);
}

/* Runtime route picker: one row per option, the whole row is the target. */
.runtime-modes {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.runtime-mode {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--control-radius);
  cursor: pointer;
}
.runtime-mode:hover {
  background: var(--bg-hover);
}
.runtime-mode.selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.runtime-mode input {
  margin-top: 0.15rem;
}
.runtime-mode-body {
  display: grid;
  gap: 0.15rem;
  font-size: 0.8125rem;
}
.runtime-mode-body .muted {
  font-size: 0.75rem;
  line-height: 1.45;
}
.runtime-mode-note {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* A turn in flight, said in one line: how long, how much, what it is doing. */
.turn-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding-bottom: 0.75rem;
  margin: 0.75rem 0 0.75rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-faint);
  font-size: 0.8125rem;
}
.turn-status > svg,
.turn-status .agent-glyph {
  flex-shrink: 0;
}
.turn-status .run-elapsed {
  margin-left: 0;
}
.turn-status-dot {
  flex-shrink: 0;
  opacity: 0.6;
}
.turn-status-tokens {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* The state is the part that changes; it gives way first when the column is
   narrow, because the clock and the count are fixed width and it is not. */
.turn-status-state {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Work belongs between updates; diagnostic text is mounted only on request. */
.inline-activity { margin: 0.25rem 0 1rem; min-width: 0; }
.inline-activity-toggle {
  display: flex; align-items: center; gap: 0.625rem; max-width: 100%;
  border: 0; background: transparent; padding: 0.375rem 0;
  color: var(--text-muted); font-size: 0.8125rem; text-align: left;
}
.inline-activity-toggle:hover { color: var(--text); }
.inline-activity-toggle > svg { flex: none; }
.inline-activity-toggle > svg.open { transform: rotate(90deg); }
.inline-activity-state { color: var(--text-faint); font-size: 0.75rem; }
.inline-activity[data-state="Failed"] > button > .inline-activity-state { color: var(--danger, #e08a8a); }
.inline-activity-tools { list-style: none; padding: 0 0 0 1.5rem; margin: 0.5rem 0; max-height: 16rem; overflow: auto; }
.inline-activity-tools > li { display: flex; gap: 0.75rem; padding: 0.35rem 0; font-size: 0.8125rem; }
.inline-activity-tools > li > :first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.inline-activity-tools .inline-activity-state { flex: 0 0 auto; }
.run-summary-card.expanded { border-color: var(--border-color); }
.turn-work { margin: 1rem 0; }
.turn-work-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0; border: 0; background: none; color: var(--text-muted); font-size: 0.8125rem; cursor: pointer; }
.turn-work-toggle:hover { color: var(--text); }
.turn-work-toggle .open { transform: rotate(90deg); }
.turn-work-failure { color: var(--red); font-size: 0.75rem; }
.turn-work-body { padding-top: 0.75rem; border-top: 1px solid var(--border-color); }

/* Public policy pages: one readable column, the site's own type. */
.policy-page {
  min-height: 100vh;
  padding: 2rem 1.5rem 4rem;
}
.policy-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 46rem;
  margin: 0 auto 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.policy-home {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.policy-nav {
  display: flex;
  gap: 1rem;
  margin-left: auto;
  font-size: 0.875rem;
}
.policy-nav a {
  color: var(--text-muted);
  text-decoration: none;
}
.policy-nav a:hover,
.policy-nav a.current {
  color: var(--text);
}
.policy-body {
  max-width: 46rem;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.policy-body h2 {
  margin: 0 0 0.5rem;
  color: var(--text);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}
.policy-body h3 {
  margin: 2.25rem 0 0.5rem;
  color: var(--text);
  font-size: 1.125rem;
}
.policy-body h4 {
  margin: 1.5rem 0 0.4rem;
  color: var(--text);
  font-size: 1rem;
}
.policy-body p {
  margin: 0 0 1rem;
}
.policy-body strong {
  color: var(--text);
}
.policy-body a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.policy-body ul,
.policy-body ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.policy-body li {
  margin-bottom: 0.35rem;
}
.policy-body code {
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--bg-hover);
  font-family: var(--mono);
  font-size: 0.85em;
}
.policy-body pre {
  overflow-x: auto;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-hover);
}
.policy-body pre code {
  padding: 0;
  background: none;
}
.policy-body table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.policy-body th,
.policy-body td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  vertical-align: top;
}
.policy-body th {
  color: var(--text);
  font-weight: 600;
}
.policy-body hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}
.policy-body em {
  color: var(--text-faint);
}

/* ── Pull request: files, checks and the controls above them ─────────────
 *
 * The patch used to be one <pre> coloured by first character. These style a
 * real diff: a section per file that can be closed, a gutter of line numbers
 * on each side, and a split view that puts the two sides next to each other.
 */
.pr-tabrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0.4rem 0;
}
.pr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.2rem 0.75rem;
}
.pr-toolbar .pr-add { color: var(--green); font-style: normal; }
.pr-toolbar .pr-del { color: var(--red); font-weight: 500; }

.pr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-weight: 400;
}
.pr-pill {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.78rem;
  /* A long label shortens rather than widening the row it sits in. */
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checks-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
}
.checks-badge--success { color: var(--text-muted); }
.checks-badge--success svg { color: var(--green); }
.checks-badge--failure { color: var(--red); }
.checks-badge--pending { color: var(--text-faint); }

.pr-collapsible-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.pr-collapsible-head h4 { margin: 0; }
.pr-collapsible-caret { color: var(--text-faint); font-size: 0.7rem; }
.pr-collapsible-count {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 0.82rem;
}

.pr-checks { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.pr-checks li { min-width: 0; }
.pr-check {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.8125rem;
}
a.pr-check:hover { background: var(--bg-hover); }
.pr-check-name { min-width: 0; overflow-wrap: anywhere; }
.pr-check-copy { display: grid; min-width: 0; gap: 0.15rem; }
.pr-check-glyph { display: flex; align-items: center; }
.pr-check-workflow {
  color: var(--text-faint);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-check-state { color: var(--text-faint); font-size: 0.75rem; text-transform: capitalize; }
.pr-check-glyph--success { color: var(--green); }
.pr-check-glyph--failure, .pr-check-state--failure { color: var(--red); }
.pr-check-glyph--pending, .pr-check-state--pending { color: var(--text-faint); }
.pr-check-glyph--skipped, .pr-check-glyph--neutral, .pr-check-glyph--cancelled { color: var(--text-faint); }

.pr-file-diffs { display: flex; flex-direction: column; gap: 0; }
.file-diff {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}
.file-diff-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 0.75rem;
}
.file-diff-head:hover { background: var(--bg-hover); }
.file-diff-caret { color: var(--text-faint); font-size: 0.7rem; }
.file-diff-path {
  display: flex;
  min-width: 0;
  /* The directory gives way first; the file name is what identifies the row. */
  flex: 1 1 auto;
}
.file-diff-dir {
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}
.file-diff-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-diff-from { max-width: 25%; overflow: hidden; text-overflow: ellipsis; color: var(--text-faint); font-size: 0.75rem; white-space: nowrap; }
.file-diff-status {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;
}
.file-diff-status--added { color: var(--green); }
.file-diff-status--deleted { color: var(--red); }
.file-diff-binary { padding: 0.7rem; margin: 0; }

/*
 * One grid for the whole file, not one per line.
 *
 * With a grid per row every row sized its own columns, so the two sides of a
 * split view never lined up and each half clipped its own text instead of the
 * file scrolling as one piece. The rows are `display: contents` so their cells
 * join the file's grid, which is what makes a column the same width from the
 * first line to the last.
 *
 * `minmax(max-content, 1fr)` on the text columns is what allows scrolling: the
 * column never shrinks below its longest line, so a long line widens the grid
 * and the body scrolls, rather than the line being cut off in place.
 */
.file-diff-body {
  min-width: 0;
  overflow-x: auto;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.75rem;
  line-height: 1.65;
  display: grid;
  padding-bottom: 0.75rem;
  tab-size: 2;
}
.file-diff-body.is-unified {
  grid-template-columns: min-content min-content minmax(max-content, 1fr);
}
.file-diff-body.is-split {
  grid-template-columns:
    min-content minmax(max-content, 1fr)
    min-content minmax(max-content, 1fr);
}
/* Wrapped mode uses equal text tracks across the whole file. Each pair shares
   one grid row, so a wrap on either side stretches its counterpart too. */
.file-diff-body.is-wrapped.is-unified {
  grid-template-columns: min-content min-content minmax(0, 1fr);
}
.file-diff-body.is-wrapped.is-split {
  grid-template-columns: min-content minmax(0, 1fr) min-content minmax(0, 1fr);
}
.file-diff-body.is-wrapped .diff-text {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diff-row,
.diff-split-row {
  display: contents;
}
.diff-gutter {
  padding: 0 0.45rem;
  text-align: right;
  color: var(--text-faint);
  background: transparent;
  user-select: none;
  white-space: nowrap;
}
.diff-text { white-space: pre; padding: 0 0.6rem; font: inherit; }
.diff-marker { display: inline-block; width: 1ch; color: var(--text-faint); }

/* The tint goes on the cells, since the row itself no longer draws a box. */
.diff-row--add > *,
.diff-half--add { background: color-mix(in srgb, var(--green) 12%, transparent); }
.diff-row--del > *,
.diff-half--del { background: color-mix(in srgb, var(--red) 12%, transparent); }
.diff-half--empty { background: var(--surface-2); }
.diff-cell--edge { border-right: 1px solid var(--border-color); }

/* A hunk heading is one line across every column. */
.diff-row--hunk > .diff-text,
.diff-split-row--hunk > .diff-text {
  grid-column: 1 / -1;
  background: var(--surface-1);
  color: var(--text-faint);
  padding: 0.35rem 0.6rem;
  font-size: 0.6875rem;
}
.diff-row--hunk > .diff-gutter,
.diff-split-row--hunk > .diff-gutter { display: none; }


.pr-nodiff { display: flex; flex-direction: column; gap: 0.6rem; }

/* --- Modern Diff & Review Inspector Enhancements --- */

/* Diagonal hatched background for empty split counterpart */
.diff-half--empty {
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.025),
    rgba(255, 255, 255, 0.025) 8px,
    rgba(0, 0, 0, 0.25) 8px,
    rgba(0, 0, 0, 0.25) 16px
  );
}

/* File badge icon */
.file-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.25rem;
}

/* Diff chips on file headers */
.file-diff-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.15rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
}
.file-diff-chip--add {
  color: var(--green);
}
.file-diff-chip--del {
  color: var(--red);
}

/* Gutter comment trigger */
.diff-gutter {
  position: relative;
}
.diff-gutter-add-btn {
  display: inline-flex;
  opacity: 0;
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #38bdf8;
  color: #030712;
  border: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.diff-row:hover .diff-gutter-add-btn,
.diff-split-row:hover .diff-gutter-add-btn,
.diff-gutter-add-btn:focus-visible {
  opacity: 1;
}

/* Toast notification */
.pr-toast-notification {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  color: var(--text);
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  animation: fadeIn 0.2s ease-out;
}

/* Header & action button group */
.pr-action-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.pr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border-radius: 0.35rem;
  color: var(--text-faint);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pr-icon-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.pr-menu-wrapper {
  position: relative;
}
.pr-action-menu {
  position: fixed;
  min-width: min(15rem, calc(100vw - 1rem));
  background: var(--base);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pr-action-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.pr-action-item svg { flex: 0 0 1rem; width: 1rem; height: 1rem; color: var(--text-muted); }
.pr-action-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.pr-action-item:hover {
  background: var(--bg-hover);
}
.pr-menu-divider {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 0.25rem 0;
}

/* Header pill & checks count */
.pr-kicker-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pr-checks-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

/* Code toolbar */
.pr-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.pr-code-toolbar-left,
.pr-code-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}
.pr-view-toggle { display: flex; padding: 0.15rem; border-radius: 0.4rem; background: var(--surface-1); }
.pr-view-toggle button, .pr-wrap-toggle {
  border: 0;
  border-radius: 0.3rem;
  padding: 0.35rem 0.5rem;
  background: transparent;
  color: var(--text-faint);
  font-size: 0.6875rem;
  cursor: pointer;
}
.pr-view-toggle button[aria-pressed="true"], .pr-wrap-toggle[aria-pressed="true"] { color: var(--text); background: var(--surface-2); }
.pr-view-toggle button:hover, .pr-wrap-toggle:hover { color: var(--text); }

/* Accordions in Summary Tab */
.pr-accordion-section {
  border-bottom: 1px solid var(--border-color);
}
.pr-accordion-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0.4rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
}
.pr-accordion-header:hover {
  background: var(--bg-hover);
}
.pr-accordion-header h4 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
}
.pr-accordion-badge {
  margin-left: auto;
  font-size: 0.6875rem;
}
.pr-accordion-content {
  padding: 0 0.4rem 0.85rem;
}
.pr-detail .body {
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
}
.pr-detail .body .md-h {
  color: var(--text);
  margin: 0.75rem 0 0.35rem;
  font-size: 0.875rem;
}
.pr-detail .body > .md-h:first-child { margin-top: 0; }
.pr-detail .body .md-li { margin: 0.2rem 0; }
.pr-detail .md-table { white-space: normal; }
.pr-detail .md-table th, .pr-detail .md-table td { padding: 0.5rem 0.7rem; }
.pr-detail .md-table th:first-child, .pr-detail .md-table td:first-child { padding-left: 0; }
.md-details { margin: 0.65rem 0; border-top: 1px solid var(--border-color); white-space: normal; }
.md-details > summary { padding: 0.6rem 0; font-weight: 500; cursor: pointer; color: var(--text); }
.md-details-body { min-width: 0; padding: 0.1rem 0 0.4rem 0.75rem; white-space: pre-wrap; }
.pr-section-heading { display: flex; align-items: center; gap: 0.5rem; }
.pr-section-heading .pr-accordion-header { width: auto; flex: 1; }
.pr-sort-button { border: 0; background: none; padding: 0.35rem; color: var(--text-faint); font-size: 0.6875rem; white-space: nowrap; cursor: pointer; }
.pr-sort-button:hover { color: var(--text); }
.pr-comments-list { display: grid; gap: 0.65rem; min-width: 0; }
.pr-comment-card { min-width: 0; border: 1px solid var(--border-color); border-radius: 0.6rem; }
.pr-comment-card > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; list-style: none; padding: 0.6rem 0.7rem; cursor: pointer; font-size: 0.6875rem; }
.pr-comment-card > summary:hover { background: var(--bg-hover); border-radius: 0.6rem; }
.pr-comment-card > summary::-webkit-details-marker, .pr-conversation-group > summary::-webkit-details-marker { display: none; }
.pr-comment-card > summary > b { overflow-wrap: anywhere; font-weight: 550; }
.pr-comment-card time, .pr-activity-state { color: var(--text-faint); }
.pr-disclosure-caret { margin-left: auto; flex-shrink: 0; color: var(--text-faint); transform: rotate(-90deg); }
details[open] > summary > .pr-disclosure-caret { transform: none; }
.pr-comment-content { min-width: 0; padding: 0.15rem 0.7rem 0.85rem; }
.pr-conversation-group > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; list-style: none; cursor: pointer; color: var(--text-muted); font-size: 0.8125rem; }
.pr-conversation-group > summary b { font-weight: 500; }
.pr-conversation-group > summary small { display: block; margin-top: 0.2rem; font-size: 0.6875rem; color: var(--text-faint); }
.pr-conversation-group .pr-comments-list { margin-top: 0.6rem; }

/* Quick comment in Summary Tab */
.pr-quick-comment-box {
  padding: 0.85rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pr-quick-comment-box textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background: var(--surface-1);
  color: var(--text);
  padding: 0.5rem;
  font-family: inherit;
  font-size: 0.75rem;
  resize: vertical;
}
.pr-quick-comment-actions {
  display: flex;
  justify-content: flex-end;
}

/* Floating Review Button */
.pr-floating-review-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 9999px;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pr-floating-review-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-faint);
  transform: translateY(-1px);
}
.pr-staged-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* Floating Review Drawer */
.pr-review-drawer {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 440px;
  max-width: calc(100vw - 2.5rem);
  background: var(--base);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(24px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pr-review-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8125rem;
}
.pr-review-drawer-body {
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pr-review-empty {
  margin: 0;
  font-size: 0.75rem;
}
.pr-staged-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 120px;
  overflow-y: auto;
}
.pr-staged-comment-item {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.35rem;
  background: var(--surface-1);
  font-size: 0.6875rem;
}
.pr-staged-comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-faint);
  margin-bottom: 0.15rem;
}
.pr-review-textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background: var(--surface-1);
  color: var(--text);
  padding: 0.5rem;
  font-family: inherit;
  font-size: 0.75rem;
  resize: vertical;
  min-height: 4rem;
}
.pr-review-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-1);
}
.pr-btn-approve {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.4rem;
  border: 0;
  background: #2563eb;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.pr-btn-approve:hover {
  background: #1d4ed8;
}
.pr-btn-request-changes {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.pr-btn-request-changes:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* ── Pull request: people and labels ─────────────────────────────────────
 *
 * Avatars arrive from the main process as data URIs, because the renderer's
 * CSP allows images only from itself and `data:`. When one is missing the
 * initials stand in, so a row is never a blank circle.
 */
.pr-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}
.pr-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}
.pr-actor {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.pr-actor-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-byline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pr-pill--actor { padding-left: 0.25rem; }

/* The dot carries the repository's colour; the pill stays legible in either
   theme, whatever colour that turns out to be. */
.pr-label { display: inline-flex; align-items: center; gap: 0.35rem; }
.pr-label-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  /* A pale label on a pale ground still reads as a dot with this. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
}

/* ── Markdown: quotes, alerts and rules ──────────────────────────────────
 *
 * A GitHub body leans on all three. Without them a quoted paragraph arrived
 * with a literal ">" on every line and "[!NOTE]" read as prose.
 */
.md-quote {
  margin: 0.4rem 0;
  padding: 0.1rem 0 0.1rem 0.75rem;
  border-left: 3px solid var(--border-color);
  color: var(--text-faint);
}
.md-alert {
  margin: 0.5rem 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-color);
  border-left-width: 3px;
  border-radius: var(--control-radius, 6px);
  background: var(--surface-2);
}
.md-alert-title {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
}
/* GitHub's own five, in its own order of severity. */
.md-alert--note { border-left-color: #4493f8; }
.md-alert--note .md-alert-title { color: #4493f8; }
.md-alert--tip { border-left-color: #3fb950; }
.md-alert--tip .md-alert-title { color: #3fb950; }
.md-alert--important { border-left-color: #ab7df8; }
.md-alert--important .md-alert-title { color: #ab7df8; }
.md-alert--warning { border-left-color: #d29922; }
.md-alert--warning .md-alert-title { color: #d29922; }
.md-alert--caution { border-left-color: #f85149; }
.md-alert--caution .md-alert-title { color: #f85149; }
.md-hr {
  margin: 0.7rem 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}

/* An image attachment previews itself; the remove button sits over it, as it
   does in the file chips beside it. */
.composer-attachment--image {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.composer-attachment-thumb {
  display: block;
  height: 4.5rem;
  width: auto;
  max-width: 9rem;
  object-fit: cover;
}
.composer-attachment--image > button {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 0;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  cursor: pointer;
}
.composer-attachment--image > button:hover { background: rgb(0 0 0 / 0.75); }

/* The qualifier is secondary to the count it corrects. */
.changed-files-scope { color: var(--text-faint); font-weight: 400; }
.conversation-host { display: flex; flex: 1; min-width: 0; min-height: 0; }
.conversation-host[hidden] { display: none; }
.diff-pager, .diff-list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 0.8125rem;
}
.diff-list-controls { justify-content: space-between; }
.diff-pager input { width: 4rem; padding: 0.25rem; font: inherit; }

/* Secondary detail stays one disclosure away from the task. */
.capability-details { color: var(--text-muted); font-size: .75rem; margin: .55rem 0; min-width: 0; }
.capability-details summary { cursor: pointer; padding: .35rem .25rem; }
.capability-details dl { margin: .4rem 0; padding: .5rem .75rem; border: 1px solid var(--border-color); border-radius: .6rem; }
.capability-details dl > div + div { border-top: 1px solid var(--border-color); margin-top: .5rem; padding-top: .5rem; }
.capability-details dt { display: flex; justify-content: space-between; gap: .75rem; color: var(--text); font-weight: 500; }
.capability-details dt span { font-weight: 400; color: var(--text-muted); }
.capability-details dd { margin: .3rem 0 0; line-height: 1.5; }
.capability-hint { font-size: .75rem; color: var(--text-muted); margin: .25rem .5rem .6rem; }
.menu-select-trigger[aria-disabled="true"] { color: var(--text-faint); cursor: help; }
fieldset.harness-options { padding: 0; margin: 0; border: 0; min-width: 0; }
fieldset.harness-options:disabled { opacity: .7; }
.run-activity-state { font-size: .75rem; color: var(--text-muted); padding: .15rem .5rem; border: 1px solid var(--border-color); border-radius: 1rem; white-space: nowrap; }
.run-activity-state[data-state="failed"], .run-activity-state[data-state="blocked"] { color: var(--danger, #e08a8a); }
.run-summary-lead { flex-wrap: wrap; }
.performance-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.performance-diagnostics { overflow-x: auto; }
.performance-diagnostics table { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.performance-diagnostics th, .performance-diagnostics td { text-align: right; padding: .5rem; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.performance-diagnostics th:first-child, .performance-diagnostics td:first-child { text-align: left; }
.performance-diagnostics details { margin-top: .75rem; font-size: .8125rem; color: var(--text-muted); }
.pet-setting-control .actions { margin: 0; }
.composer-control-divider { width: 1px; height: 1rem; background: var(--border-color); margin: 0 .3rem; }
.composer-branch { margin-left: auto; }
.composer-controls .menu-select-trigger[aria-label="Agent and model"] { color: var(--text); }
.composer-controls .menu-select-trigger[aria-label="Agent and model"] .agent-glyph { opacity: 1; }
.composer-glass::after { box-shadow: none; }
.composer-glass:focus-within::after { border-color: var(--border-strong); }
.capability-details--compact { position: relative; margin: 0; flex-shrink: 0; }
.capability-details--compact > summary { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; font-size: .9375rem; list-style: none; border-radius: .4rem; }
.capability-details--compact > summary::-webkit-details-marker { display: none; }
.capability-details--compact > summary:hover, .capability-details--compact[open] > summary { color: var(--text); background: var(--bg-hover); }
.capability-details--compact > .capability-details-body { position: absolute; z-index: 20; bottom: calc(100% + .5rem); right: 0; width: min(25rem, calc(100vw - 4rem)); max-height: min(26rem, 60vh); overflow-y: auto; background: var(--surface-0); box-shadow: var(--shadow); border: 1px solid var(--border-color); border-radius: .6rem; padding: .5rem .75rem; }
.capability-details--compact > .capability-details-body > dl { border: 0; padding: 0; }
.browser-capability { margin: 0; padding: .15rem .5rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.browser-capability p { margin: .25rem; line-height: 1.5; }

/* Saved-file previews float above the thread without resizing it. */
.saved-diff-preview { position: fixed; z-index: 160; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: .75rem; background: var(--surface-0); color: var(--text); box-shadow: 0 .75rem 2.5rem rgb(0 0 0 / 28%); font-size: .8125rem; }
.saved-diff-preview-head, .saved-diff-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem .875rem; flex-shrink: 0; }
.saved-diff-preview-head { border-bottom: 1px solid var(--border-color); background: var(--surface-1); }
.saved-diff-preview-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-diff-preview-code { min-height: 0; overflow: auto; overscroll-behavior: contain; font-family: var(--mono); font-size: .75rem; line-height: 1.65; tab-size: 2; }
.saved-diff-preview-code > p { padding: .75rem; margin: 0; font-family: system-ui, sans-serif; color: var(--text-muted); }
.saved-diff-preview-hunk { width: max-content; min-width: 100%; box-sizing: border-box; padding: .25rem .75rem; color: var(--text-faint); background: var(--surface-1); white-space: pre; font-size: .6875rem; }
.saved-diff-preview-line { display: flex; width: max-content; min-width: 100%; }
.saved-diff-preview-line.add { background: color-mix(in srgb, var(--green) 12%, transparent); }
.saved-diff-preview-line.del { background: color-mix(in srgb, var(--red) 12%, transparent); }
.saved-diff-preview-line code { font: inherit; white-space: pre; padding: 0 .75rem 0 .25rem; background: none; border: 0; border-radius: 0; }
.preview-line-number { flex: 0 0 7ch; width: 7ch; text-align: right; padding: 0 .35rem; color: var(--text-faint); user-select: none; }
.preview-line-sign { flex: 0 0 1ch; user-select: none; color: var(--text-faint); }
.saved-diff-preview-line.add .preview-line-sign { color: var(--green); }
.saved-diff-preview-line.del .preview-line-sign { color: var(--red); }
.saved-diff-preview-footer { border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: .6875rem; }
.saved-diff-preview-footer .ghost { padding: .25rem .5rem; font-size: .75rem; white-space: nowrap; }
.saved-diff-preview :focus-visible, .changed-file-row:focus-visible { outline: 2px solid var(--text-muted); outline-offset: -2px; }
.changed-file-row[aria-expanded="true"] { background: var(--bg-hover); }
.run-summary-body[hidden] { display: none; }
.run-summary-body > .turn-verification, .run-summary-body > .run-event-log { border: 0; border-top: 1px solid var(--border-color); border-radius: 0; margin: .5rem 0 0; background: transparent; }
.run-summary-body > .turn-verification > summary, .run-summary-body > .run-event-log > summary { padding: .625rem 0; }
.composer-glass .gateway-recovery { padding: .375rem .5rem; margin: .25rem 0 .5rem; border: 0; border-radius: .375rem; font-size: .75rem; background: var(--surface-1); }
.gateway-recovery > span { min-width: 0; }
.gateway-recovery-error { display: block; color: var(--red); overflow-wrap: anywhere; }
.gateway-recovery button { flex-shrink: 0; }
.agent-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-color);
}
.agent-config-row > span { min-width: 0; overflow-wrap: anywhere; }
.agent-config-row small { display: block; color: var(--text-muted); font-size: 0.75rem; }
.agent-config-row select { min-width: 0; max-width: 52%; font-size: 0.8125rem; }
.background-browser { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-color); font-size: 0.8125rem; flex-shrink: 0; max-height: 65%; overflow-y: auto; }
.background-browser > summary { cursor: pointer; color: var(--text-muted); }
.background-browser p { margin: 0.65rem 0; line-height: 1.5; }
.background-browser-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.background-browser-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.background-browser-image { display: block; width: 100%; max-height: 22rem; object-fit: contain; background: #111; border-radius: 0.4rem; }