/**
 * Console Input Context Component Styles
 *
 * Extracted from console-input-context.ts to enable external CSS loading
 * and improve Claude discoverability via ACE files.
 * Source: /konnectvol/konui/src/console-input-context.ts
 *
 * Mobile-first, dark theme, smooth animations
 * Phases 1-6: Foundation, Attach, History, File, Browse, Gestures
 */

/* ========================================================================
 * INPUT CONTEXT COMPONENT - Phase 1 Foundation
 * ======================================================================== */

.input-context-component {
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  border-top: 1px solid #333;
  position: relative;
  --tray-mobile-top-offset: calc(var(--nav-height, 44px) + 8px);
  --tray-mobile-bottom-offset: 112px;
}

/* Mobile long-holds on composer controls are actions, not text-selection
   gestures. Keep editable inputs/textareas selectable through this button-only
   rule while suppressing iOS callouts on every composer button. */
.input-context-component button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Context Chips - horizontal scrollable row */
.context-chips {
  display: none;
  flex-direction: row;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.context-chips::-webkit-scrollbar {
  display: none;
}
.context-chips.visible {
  display: flex;
}

.context-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #2d2d2d;
  border-radius: 16px;
  font-size: 12px;
  color: #e0e0e0;
  white-space: nowrap;
  flex-shrink: 0;
}
.context-chip--thumb {
  appearance: none;
  border: 1px solid #3d3d3d;
  border-radius: 12px;
  padding: 4px;
  min-width: 74px;
  height: 58px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.context-chip--thumb img,
.context-chip--thumb > span:first-child {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #242424;
  font-size: 24px;
}
.context-chip--thumb .context-chip-name {
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.context-chip--thumb .chip-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  cursor: pointer;
}
.context-chip--image {
  background: #3d3d3d;
}
.context-chip--image:not(.context-chip--thumb) img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}
.context-chip--mention {
  background: #2d4a3d;
  color: #98c379;
}
.context-chip--gv-item {
  background: #2d2d4a;
  color: #cc785c;
  min-height: 44px;
  cursor: pointer;
}
.context-chip--gv-item .chip-node {
  color: #7f848e;
  font-size: 10px;
}
.context-chip .chip-remove {
  cursor: pointer;
  opacity: 0.6;
  padding: 2px;
}
.context-chip .chip-remove:hover {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine), (min-width: 1025px) {
  .context-chip {
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
  }
  .context-chip--thumb {
    min-width: 104px;
    height: 74px;
  }
  .context-chip--thumb img,
  .context-chip--thumb > span:first-child {
    width: 62px;
    height: 62px;
    font-size: 30px;
  }
  .context-chip--thumb .context-chip-name {
    max-width: 150px;
  }
}

/* Context Tray - expandable container */
.context-tray {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease-out;
  background: #1e1e1e;
  border-top: 1px solid #333;
}
@keyframes tray-responsive-slide-up {
  from {
    transform: translateY(18px);
    opacity: 0.98;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
[data-tray-state="expanded"] .context-tray {
  max-height: min(600px, 60vh);
  overflow-y: auto; /* Scrollable when expanded — tabs stay sticky */
}
[data-tray-state="actions"] .context-tray {
  max-height: min(104px, 24vh);
  overflow: hidden;
}
[data-tray-state="actions"] .tray-content {
  display: none;
}
[data-tray-hold-menu="attach"][data-tray-state="expanded"] .context-tray {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: min(760px, 72vh);
  max-height: min(760px, 72vh);
  overflow: hidden;
  box-sizing: border-box;
}
[data-tray-hold-menu="attach"][data-tray-state="expanded"] .tray-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
[data-tray-hold-menu="attach"][data-tray-state="expanded"] .tray-panel[data-panel="attach"] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
[data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-preview {
  order: 1;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
[data-attach-empty="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"]:not([data-secret-vault="open"])
  .context-tray {
  height: auto;
  max-height: min(360px, 48vh);
}
[data-attach-empty="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"]:not([data-secret-vault="open"])
  .tray-content,
[data-attach-empty="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"]:not([data-secret-vault="open"])
  .tray-panel[data-panel="attach"] {
  flex: 0 0 auto;
  height: auto;
}
[data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-grid {
  order: 2;
  flex-shrink: 0;
}

/* Tray Tabs — 2026-05-13: moved to BOTTOM of tray so they stay reachable
   when long panels (gv result, browse tree) scroll past the viewport top.
   Sticky to bottom of the scroll container; border flipped from
   `border-bottom` to `border-top` so the seam visually divides tabs from
   the content scrolling above them. */
.tray-tabs {
  display: flex;
  gap: 8px;
  border-top: 1px solid #333;
  background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
  position: sticky;
  bottom: 0;
  z-index: 5; /* Stay above scrolling panel content */
  padding: 8px;
}
.tray-tab {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  min-height: 64px;
  padding: 9px 8px 8px;
  background: #242424;
  border: 1px solid #353535;
  border-radius: 8px;
  color: var(--tray-action-color, #7f848e);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  border-bottom: 2px solid #353535;
}
.tray-tab:hover {
  background: #2d2d2d;
  border-color: var(--tray-action-border, #4a4a4a);
  transform: translateY(-1px);
}
.tray-tab.active {
  color: var(--tray-action-color, #61afef);
  border-bottom-color: var(--tray-action-color, #61afef);
  border-color: var(--tray-action-border, #34556f);
  background: var(--tray-action-bg, #20303d);
}
.tray-action-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 2026-08-19i: uniform card height whether the label is one or two lines */
  min-height: 84px;
}
.tray-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}
.tray-action-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tray-action-icon svg circle:not([fill]) {
  fill: currentColor;
}
.tray-action-label {
  /* 2026-08-19i: every label reserves the same two-line block so cards no
     longer jump between one- and two-line heights. */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4em;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  color: #fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tray-hold-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--tray-action-color, #61afef);
  border-radius: 0 0 8px 8px;
  pointer-events: none;
}
.tray-tab.is-holding {
  transform: scale(0.97);
  filter: brightness(0.86);
}
.tray-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 72px;
  padding: 10px 10px;
  background: #242424;
  border: none;
  border-left: 1px solid #333;
  border-bottom: 2px solid transparent;
  color: #e5c07b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  white-space: nowrap;
}
.tray-fullscreen-btn:hover {
  background: #2d2d2d;
  color: #ffd27a;
}
.tray-fullscreen-btn--hidden {
  display: none;
}
/* Keyboard dismiss (2026-08-11c): hidden everywhere except mobile surfaces
   while the OS keyboard is open (dashboard-console.ts toggles
   body.keyboard-open from visualViewport). Clicking blurs the prompt so the
   keyboard closes without collapsing the reveal drawer. */
.tray-keyboard-dismiss {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 56px;
  padding: 6px 8px;
  background: rgba(240, 193, 75, 0.12);
  border: 1px solid rgba(240, 193, 75, 0.5);
  border-radius: 10px;
  color: #f0c14b;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.tray-keyboard-dismiss:active {
  background: rgba(240, 193, 75, 0.24);
}
.tray-keyboard-dismiss-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.tray-keyboard-dismiss-label {
  line-height: 1;
  white-space: nowrap;
}
body.keyboard-open [data-tray-mobile-surface="true"] .tray-keyboard-dismiss {
  display: inline-flex;
}
.tray-fullscreen-icon {
  font-size: 15px;
  line-height: 1;
}
.tray-fullscreen-label {
  line-height: 1;
}
[data-tray-fullscreen="true"] .context-tray {
  position: fixed;
  top: var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px));
  bottom: calc(var(--tray-mobile-bottom-offset, 0px) + env(safe-area-inset-bottom, 0px));
  left: var(--tray-console-left, 0px);
  right: auto;
  transform: none;
  width: var(--tray-console-width, min(100vw, var(--gv-console-max-width, 1400px)));
  z-index: 10020;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 0;
  background: #1e1e1e;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="viewport"] .context-tray {
  left: 0;
  right: 0;
  transform: none;
  width: 100vw;
  top: 0;
  bottom: 0;
  height: 100dvh;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gvapi"] .context-tray {
  left: 0;
  right: 0;
  transform: none;
  width: 100vw;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gvapi"] .tray-tabs {
  display: none;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gvapi"] .tray-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 16px;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gvapi"] .tray-panel:not([data-panel="gvapi"]) {
  display: none !important;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="ide"] .context-tray {
  left: 0;
  right: 0;
  transform: none;
  width: 100vw;
  top: 0;
  /* The composer is a sibling of .context-tray. Keep its command surface
     visible while the IDE owns the rest of the viewport. A fixed 82px
     reservation left a gap (or clipped the composer) whenever the real
     composer height differed from that guess — notably with the keyboard
     closed, where the composer's safe-area-inset-bottom padding is not
     82px on every device. --tray-mobile-bottom-offset already tracks the
     composer's live rendered height (including its own safe-area padding),
     so reuse it instead of guessing. */
  bottom: var(--tray-mobile-bottom-offset, 82px);
  height: calc(100dvh - var(--tray-mobile-bottom-offset, 82px));
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="ide"] .tray-tabs {
  display: none !important;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="ide"] .tray-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="ide"] .tray-panel:not([data-panel="ide"]) {
  display: none !important;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .tray-tabs {
  display: none;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .context-tray {
  left: 0;
  right: 0;
  transform: none;
  width: 100vw;
  top: 0;
  bottom: 0;
  height: 100dvh;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .tray-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .tray-panel:not([data-panel="gv"]) {
  display: none !important;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .tray-panel[data-panel="gv"] {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .tray-panel[data-panel="gv"] .gv-node-bar,
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .tray-panel[data-panel="gv"] .gv-macro-grid,
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .tray-panel[data-panel="gv"] .gv-empty {
  display: none !important;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .gv-result-panel {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  border-radius: 8px;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gv-result"] .gv-result-body {
  max-height: none !important;
}
[data-tray-fullscreen="true"] .tray-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
}
[data-tray-fullscreen="true"] .tray-tabs {
  position: static;
  flex-shrink: 0;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
}
[data-tray-fullscreen="true"] .tray-panel {
  min-height: 100%;
}
[data-tray-fullscreen="true"] .history-list,
[data-tray-fullscreen="true"] .file-results,
[data-tray-fullscreen="true"] .browse-tree,
[data-tray-fullscreen="true"] #inbox-list,
[data-tray-fullscreen="true"] .gv-result-body,
[data-tray-fullscreen="true"] .gv-routes-list {
  max-height: none !important;
}
body.context-tray-fullscreen-open {
  overflow: hidden;
}
body.context-tray-fullscreen-open .main-content-area {
  position: relative;
  z-index: 10030;
}

/* Tray Content */
.tray-content {
  padding: 8px 12px;
}
.tray-panel {
  display: block;
  flex-direction: column;
  min-height: 0;
}
.tray-panel[data-panel="gv"] {
  flex-direction: column;
  min-height: 0;
}
.tray-placeholder {
  color: #7f848e;
  font-size: 14px;
  text-align: center;
  padding: 40px 20px;
}

/* Compact question/reply attention; no collapsed drawer row. The badge is a
   sibling of +/Attach, preserving their own action and attachment counter. */
.composer-attention-anchor {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  vertical-align: middle;
  overflow: visible;
}
.composer-attention-badge {
  /* 2026-09-12: The floating red unread counter over the composer was removed at
     the user's request — the renamed status-bar "Turn Live Interactions" button
     is now the single, clearer entry point. The gvComposerAttention JS API is
     retained (no-visible-effect) so its callers keep working; this hides the
     badge chrome. */
  display: none !important;
  position: absolute;
  z-index: 3;
  top: -8px;
  left: -7px;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  border: 2px solid #2d2524;
  border-radius: 15px;
  background: linear-gradient(145deg, #ed6070, #b8213c);
  box-shadow: 0 2px 8px rgba(206, 49, 75, 0.35);
  color: #fff;
  font: 700 11px/1 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms ease, background 160ms ease;
}
.composer-attention-badge[data-unread="false"] {
  color: #f0c14b;
  border-color: #75633f;
  background: #302b24;
  box-shadow: none;
  font-size: 16px;
}
.composer-attention-anchor--main .composer-attention-badge {
  top: -34px;
  left: 0;
}
.composer-attention-badge:hover { transform: translateY(-1px); }
.composer-attention-badge:focus-visible { outline: 2px solid #f0c14b; outline-offset: 3px; }
.composer-attention-badge:disabled { opacity: 0.65; cursor: wait; }
@media (prefers-reduced-motion: reduce) {
  .composer-attention-badge { transition: none; }
}

/* Input Row */
.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  /* The status bar below owns the device edge; no inset between the two rows. */
  padding-bottom: 8px;
  background: #1a1a1a;
  /* 2026-09-23 (owner sophia): the composer footer is a HARD click barrier.
     A tap anywhere in the composer must never reach the gvturn card / power-
     footer choice buttons behind it — that was running turns unintentionally,
     with bad consequences. This opaque row and the wrap below both keep
     pointer-events:auto, so any child overlay set to pointer-events:none falls
     through only onto the composer (the textarea/this row), never a sibling. */
  pointer-events: auto;
}

/* Live peer-draft preview (console-websocket-client/draft_preview.ts):
   a read-only view of another user's in-progress prompt on this node. It now
   lives INSIDE the composer pill (.console-input-wrap), on its own full-width
   row below the caret line — no card border/background of its own, so it reads
   as a continuation of the input. Two columns on desktop (identity | draft) to
   use wide screens; stacked on phones. Your own editable prompt stays separate. */
.gv-draft-preview {
  flex: 0 0 auto;
  width: calc(100% - 28px);
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 8px 14px 4px;
  padding: 8px 2px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
  line-height: 1.5;
  color: #aab2bd;
}
.gv-draft-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.gv-draft-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.gv-draft-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gv-draft-username {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gv-draft-status {
  font-size: 11px;
  color: #7f848e;
}
.gv-draft-body {
  min-width: 0;
  max-height: 7.5em;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: #62666e transparent;
}
.gv-draft-body::-webkit-scrollbar { width: 7px; height: 7px; }
.gv-draft-body::-webkit-scrollbar-track { background: transparent; }
.gv-draft-body::-webkit-scrollbar-thumb { background: #62666e; border-radius: 999px; }
.gv-draft-body::-webkit-scrollbar-thumb:hover { background: #7b8089; }
.gv-draft-body::-webkit-scrollbar-corner { background: transparent; }
.gv-draft-text {
  max-width: 80ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #cdd6e0;
}
.gv-draft-chip {
  display: inline-block;
  color: #bac6d0;
  border: 1px solid #45535f;
  border-radius: 9px;
  padding: 1px 6px;
  margin: 4px 4px 0 0;
  font-size: 12px;
}
.gv-draft-more {
  color: #7f848e;
  font-size: 12px;
}
.gv-draft-tt-btn {
  margin-left: 8px;
  border: 1px solid rgba(97, 175, 239, 0.55);
  background: rgba(97, 175, 239, 0.14);
  color: #b9dcf6;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 12px;
}
.gv-draft-tt-btn:hover {
  background: rgba(97, 175, 239, 0.24);
}
@media (max-width: 600px) {
  .gv-draft-preview {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Toggle Button */
.toggle-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid rgba(240, 193, 75, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 68% 70%,
      rgba(245, 158, 11, 0.22),
      transparent 23px
    ),
    linear-gradient(135deg, #2a271d, #171717);
  color: #fff;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.22);
}
.toggle-btn .toggle-icon,
.toggle-btn .toggle-icon svg {
  display: block;
  width: 30px;
  height: 30px;
}
.toggle-btn:hover {
  border-color: #f0c14b;
  background:
    radial-gradient(
      circle at 68% 70%,
      rgba(245, 158, 11, 0.3),
      transparent 23px
    ),
    linear-gradient(135deg, #332f20, #1d1d1d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 8px 18px rgba(0, 0, 0, 0.28);
}
.toggle-btn:active {
  transform: scale(0.95);
}
[data-tray-state="expanded"] .toggle-btn {
  transform: rotate(45deg);
  background:
    radial-gradient(
      circle at 68% 70%,
      rgba(245, 158, 11, 0.34),
      transparent 23px
    ),
    linear-gradient(135deg, rgba(240, 193, 75, 0.2), #1a1a1a);
  border-color: #f0c14b;
}

/* Textarea wrapper — owns the relative anchor for the chitchat toggle
   button now that the toggle lives INSIDE the input border. flex:1 takes
   the role the textarea used to play in the input row. */
.input-row .console-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  /* Barrier partner of .input-row: this positioned box catches every click in
     the composer footprint (a transparent auto box still hit-tests), so the
     .composer-prefix / #gv-prompt-render-overlay overlays (pointer-events:none)
     fall through onto the textarea here — never onto the layer beneath. */
  pointer-events: auto;
}
/* Run settings are ordinary controls at the native draft's beginning. */
.composer-prefix {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 96px;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.composer-prefix .status-badge-group,
.composer-prefix .agent-picker {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
/* The mandatory selectors retain one top row beside the fixed action rail. */
.composer-prefix #composer-node-badge,
.composer-prefix #conn-agent-picker {
  max-width: calc((100% - 4px) / 2);
}
.composer-prefix #composer-node-badge > [data-node-badge],
.composer-prefix #conn-active-agent {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#composer-prefix .model-picker {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  transform-origin: left center;
  transition: max-width 250ms ease-out, opacity 250ms ease-out,
    transform 250ms ease-out, margin-left 250ms ease-out;
}
#composer-prefix[data-model-collapsed] .model-picker {
  max-width: 0;
  flex-wrap: nowrap;
  opacity: 0;
  transform: scaleX(0);
  margin-left: -4px;
  overflow: hidden;
  pointer-events: none;
}
#composer-prefix[data-compact-controls] {
  right: 12px;
}
#composer-prefix[data-compact-controls] #composer-node-badge,
#composer-prefix[data-compact-controls] #conn-agent-picker {
  max-width: calc((100% - 88px) / 2);
}
#composer-prefix[data-compact-controls] #conn-agent-picker {
  margin-right: 84px;
}
#composer-prefix[data-compact-controls]:not([data-model-collapsed]) .model-picker {
  flex: 0 0 100%;
  max-width: 100%;
}
.console-input-wrap:has(> .composer-prefix[data-compact-controls]) > .console-input {
  padding-right: 12px;
}
/* Phone one-row tier (2026-09-22): coarse pointer + narrow composer. The
   profile and model/effort/tone pill groups hide (their controls live in the
   TT composer's run panel on phones), leaving node badge + :> marker inline
   before the text — the measured prefix then fits one line and the textarea
   collapses back to a single row. */
#composer-prefix[data-phone-composer] {
  flex-wrap: nowrap;
  right: 96px;
}
/* 2026-10-05: only model/effort/tone hide on phones (they live in the profile
   sheet). !important beats the group's inline display:inline-flex — the old
   non-important rule never applied. The profile pill stays visible. */
#composer-prefix[data-phone-composer] #conn-model-picker {
  display: none !important;
}
#composer-prefix[data-phone-composer] #composer-node-badge {
  max-width: 118px;
  overflow: hidden;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  #composer-prefix .model-picker { transition: none; }
}
.composer-prefix button,
.composer-prefix [data-node-badge] {
  pointer-events: auto;
  min-height: 24px;
  max-width: 100%;
  white-space: nowrap;
}
.composer-prefix button:focus-visible,
.composer-prefix [data-node-badge]:focus-visible {
  outline: 2px solid #61afef;
  outline-offset: 2px;
}
.composer-prefix #conn-active-agent-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-prompt-lead {
  display: inline-flex;
  align-items: center;
  height: 24px;
  flex: 0 1 auto;
  max-width: 100%;
  padding-right: var(--composer-lead-space, 144px);
  box-sizing: border-box;
}
#composer-prompt-marker {
  flex: 0 0 auto;
  color: var(--prompt-color, #c9956a);
  font: 600 16px/24px "JetBrains Mono", Monaco, Consolas, monospace;
}
.input-row .console-input-wrap[data-composer-prefix] > .console-input {
  padding-top: var(--composer-text-top, 15px);
  text-indent: var(--composer-first-indent, 26px);
  min-height: var(--composer-min-height, 54px);
  max-height: min(calc(148px + max(0px, var(--composer-text-top, 15px) - 15px)), calc(100dvh - var(--nav-height, 44px) - 72px));
}
.console-input-wrap[data-composer-prefix] > .attach-open-btn,
.console-input-wrap[data-composer-prefix] > .tt-open-btn {
  top: var(--composer-actions-top, 8px);
  bottom: auto;
  transform: none;
}
.console-input-wrap[data-composer-prefix] > #gv-prompt-render-overlay {
  top: var(--composer-preview-top, 96px);
  padding-top: 0;
  border: 0;
  background: transparent;
  /* 2026-09-23 (owner sophia): confine the transparent preview's click-through
     to the textarea ONLY. A tap passes to the textarea beneath, whose focus
     handler (dashboard-console.ts) hides the preview — so a click on the
     preview can never escape the composer to a layer below. */
  pointer-events: none;
}
.console-input-wrap[data-composer-prefix]:has(> #gv-prompt-render-overlay[style*="display: block"]) > .console-input {
  color: transparent;
}
.console-input-wrap[data-composer-prefix] > .console-source-gvturns {
  z-index: 8;
}
.composer-prefix[data-busy="true"] [data-node-badge] {
  transform-origin: center;
  animation: status-pill-breathe 3.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce), (hover: none) and (pointer: coarse) {
  .composer-prefix[data-busy="true"] [data-node-badge] { animation: none; }
}
.input-row .console-input-wrap[data-file-drop-active="true"] {
  border-radius: var(--prompt-radius, 22px);
  box-shadow: 0 0 0 2px #f59e0b, 0 0 20px rgba(245, 158, 11, 0.28);
}
.input-row .console-input-wrap[data-file-drop-active="true"]::after {
  content: "Drop files to attach";
  position: absolute;
  inset: 2px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(20, 20, 20, 0.9);
  color: #f59e0b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.input-row .console-input-wrap > .console-input {
  flex: 1;
  /* Right padding leaves room for the chitchat toggle pinned inside the
     border (8px offset + 44px button = 52px occupied, +16px clearance). */
  padding-right: 68px;
}

/* Input Textarea — the draft is the first state of the signed-in user's
   prompt card. Keep its surface, accent, radius and typography continuous as
   it moves through Live Turn Interactions into console history. */
.input-row .console-input {
  flex: 1;
  min-height: 54px;
  /* 2026-08-20: inline box caps at 5 rows (148px) — taller drafts open the
     prompt composer. JS (dashboard-console INLINE_MAX_HEIGHT) enforces the
     same ceiling while growing. */
  max-height: min(148px, calc(100dvh - var(--nav-height, 44px) - 72px));
  /* 2026-09-12: top padding lifted 11px→15px so the single-line placeholder /
     first draft line sits at the 54px box centre (15 + 24/2 = 27px), aligning it
     with the vertical centre of the 44px send/toggle buttons in the same row. */
  padding: 15px 12px 13px;
  scroll-padding-bottom: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 15%, var(--prompt-background, #1a1f2e)),
    color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 6%, var(--prompt-background, #1e1e1e)));
  border: 2px solid color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 40%, transparent);
  border-radius: var(--prompt-radius, 22px);
  box-sizing: border-box;
  color: var(--prompt-text, #e0e0e0);
  /* iOS Safari zooms focused text controls below 16px, hiding tray actions. */
  font-size: max(16px, var(--prompt-font-size, 16px));
  line-height: 24px;
  font-family: var(--prompt-font, Inter, -apple-system, sans-serif);
  resize: none;
  outline: none;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 15%, transparent), inset 0 1px 0 color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 12%, transparent);
  /* Height must track the native caret in the same frame. Animating it lets
     multiline typing outrun the border on mobile/Fold browsers. */
  transition: border-color 200ms ease, box-shadow 200ms ease;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox: hide scrollbar */
  -ms-overflow-style: none; /* IE/Edge: hide scrollbar */
}
.input-row .console-input::-webkit-scrollbar {
  display: none; /* Chrome/Safari: hide scrollbar */
}
.input-row .console-input:focus,
.input-row .console-input:not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 55%, transparent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 15%, transparent);
}
.input-row .console-input::placeholder {
  color: var(--prompt-placeholder, #7f848e);
  line-height: 24px; /* Match line-height for vertical centering */
}

.console-source-gvturns,
.prompt-source-gvturns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.console-source-gvturns {
  position: absolute;
  z-index: 3;
  left: 14px;
  top: 8px;
  max-width: calc(100% - 180px);
}
.console-input-wrap[data-has-source-gvturns="true"] .console-input {
  padding-top: 38px;
}
.console-source-gvturn-link,
.prompt-source-gvturn-link {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--prompt-color, var(--accent, #c9956a)) 11%, #141414);
  color: var(--prompt-color, var(--accent, #c9956a));
  font: 600 10px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
}
.prompt-source-gvturns { margin-top: 7px; }

/* Send Button - circular to match toggle button */
.input-row .console-submit {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  background:
    radial-gradient(
      circle at 70% 52%,
      rgba(245, 158, 11, 0.2),
      transparent 22px
    ),
    linear-gradient(135deg, #2a271d, #171717);
  border: 1px solid rgba(240, 193, 75, 0.58);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.22);
}
.input-row .console-submit svg {
  display: block;
  width: 24px;
  height: 24px;
}
.input-row .console-submit:hover {
  border-color: #f0c14b;
  background:
    radial-gradient(
      circle at 70% 52%,
      rgba(245, 158, 11, 0.3),
      transparent 22px
    ),
    linear-gradient(135deg, #332f20, #1d1d1d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 8px 18px rgba(0, 0, 0, 0.28);
}
.input-row .console-submit:active {
  transform: scale(0.97);
}
.input-row .console-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Standby Mode Overrides */
.input-row .console-submit.standby-turn-mode {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.input-row .console-input.standby-turn-mode {
  border-color: #8b5cf6;
}

/* Locked state (during active session) - visual disable without blocking long-press */
.input-row .console-submit.send-locked {
  opacity: 0.5;
  background: #2d2d2d;
  border-color: #555;
  cursor: default;
}
.input-row .console-submit.send-locked.standby-turn-mode {
  opacity: 0.7;
  background: linear-gradient(135deg, #7b1fa2, #6a1b9a);
  cursor: wait;
  animation: st-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes st-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.98);
  }
}

/* ========================================================================
 * PHASE 2: ATTACH TAB
 * ======================================================================== */

/* Attach Grid - single row layout (4 actions: Camera, Gallery, File, Paste;
   Sealed Secret lives on the main tray-tabs row since 2026-08-19) */
.attach-grid {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
[data-tray-hold-menu="attach"] .attach-grid {
  display: grid;
}
.attach-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: #2d2d2d;
  border: 1px solid #444;
  border-radius: 10px;
  color: #e0e0e0;
  cursor: pointer;
  transition: all 200ms ease;
  min-height: 60px;
}
.attach-btn:hover {
  background: #3d3d3d;
  border-color: #f0c14b;
}
.attach-btn[data-main-default="true"] {
  background: rgba(240, 193, 75, 0.14);
  border-color: #f0c14b;
  box-shadow: inset 0 0 0 1px rgba(240, 193, 75, 0.2);
}
.attach-btn[data-main-default="true"] .attach-label::after {
  content: "Default";
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(240, 193, 75, 0.18);
  border: 1px solid rgba(240, 193, 75, 0.55);
  color: #f0c14b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}
.attach-btn[data-default-hold-active="true"] {
  border-color: #f0c14b;
  box-shadow: 0 0 0 2px rgba(240, 193, 75, 0.2);
}
.attach-btn:active {
  transform: scale(0.97);
  background: #4d4d4d;
}
.attach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  line-height: 1;
}
.attach-icon svg {
  width: 34px;
  height: 34px;
}
.attach-label {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

/* Attach Preview - grid of attached items */
.attach-preview {
  display: none;
}
.attach-preview.visible {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-content: stretch;
  align-items: stretch;
  grid-auto-rows: minmax(160px, 1fr);
  gap: 14px;
  min-height: 220px;
  margin: 0 0 14px;
  padding: 38px 12px 12px;
  border: 1px solid rgba(240, 193, 75, 0.34);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(75, 81, 82, 0.88), rgba(48, 52, 54, 0.92)),
    rgba(63, 68, 70, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 34px rgba(0, 0, 0, 0.26);
  position: relative;
}
.attach-preview.visible[data-attachment-count="0"] {
  min-height: 0;
  grid-auto-rows: auto;
  padding: 18px 14px 16px;
}
.attach-preview.visible[data-attachment-count="1"] {
  grid-template-columns: minmax(0, min(100%, 720px));
  justify-content: center;
}
.attach-preview.visible[data-attachment-count="2"],
.attach-preview.visible[data-attachment-count="3"],
.attach-preview.visible[data-attachment-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.attach-preview.visible[data-attachment-count="3"],
.attach-preview.visible[data-attachment-count="4"] {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
@media (hover: hover) and (pointer: fine), (min-width: 1025px) {
  [data-tray-state="expanded"]:not([data-tray-hold-menu="attach"]) .tray-panel[data-panel="attach"] .attach-preview.visible {
    min-height: min(420px, 44vh);
    max-height: min(540px, 50vh);
    grid-auto-rows: minmax(220px, 1fr);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 14px;
  }
  [data-tray-state="expanded"]:not([data-tray-hold-menu="attach"]) .tray-panel[data-panel="attach"] .attach-preview.visible[data-attachment-count="1"] {
    min-height: min(380px, 42vh);
  }
  [data-tray-state="expanded"]:not([data-tray-hold-menu="attach"]) .tray-panel[data-panel="attach"] .attach-preview-item {
    min-height: 180px;
  }
  [data-tray-state="expanded"]:not([data-tray-hold-menu="attach"]) .tray-panel[data-panel="attach"] .attach-preview.visible[data-attachment-count="0"] {
    min-height: 0;
    max-height: none;
    grid-auto-rows: auto;
  }
}
.attach-empty-state {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: #7f848e;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.attach-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: #e0e0e0;
}
.attach-empty-sub {
  font-size: 12px;
  color: #7f848e;
}
.attach-empty-hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 580px;
}
.attach-empty-hint {
  padding: 4px 11px;
  border: 1px solid #3d3d3d;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  color: #9aa0ab;
  white-space: nowrap;
}
.attach-empty-hint--secret {
  border-color: rgba(224, 108, 117, 0.5);
  color: #d8949b;
}

/* ========================================================================
 * SECRETS VAULT — sealed-secret attach form (2026-08-11)
 * Bank-vault chrome: layered steel + gold frame, riveted inner ring,
 * combination-dial badge, breathing red glow. Whatever goes in here is
 * readable and usable by the AI agents on the selected node.
 * JS toggles display:grid. Layout is a fixed frame — head row, scrollable
 * body, actions footer — capped below the viewport so the form fits
 * height-constrained screens (Galaxy Z Fold main screen, landscape phones).
 * ======================================================================== */
.quick-secret-vault {
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  margin: 12px 0;
  padding: 0;
  max-height: min(70dvh, 620px);
  overflow: hidden;
  border: 1px solid rgba(240, 193, 75, 0.5);
  border-radius: 18px;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.016) 0 2px,
      rgba(0, 0, 0, 0) 2px 7px
    ),
    linear-gradient(180deg, rgba(224, 108, 117, 0.11),
    rgba(26, 26, 29, 0.98) 44%
  ),
    linear-gradient(180deg, #232326, #19191c);
  box-shadow: 0 0 0 3px #2b2b30, 0 0 0 4px rgba(240, 193, 75, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(224, 108, 117, 0.2);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  animation: secret-vault-glow 3.6s ease-in-out infinite;
}
.quick-secret-body {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 12px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.quick-secret-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 14px 18px 11px;
  border-bottom: 1px solid rgba(240, 193, 75, 0.22);
  background: linear-gradient(
    180deg,
    rgba(240, 193, 75, 0.07),
    rgba(240, 193, 75, 0.015)
  );
}
.quick-secret-title {
  font-size: 15px;
}
.quick-secret-chip {
  margin-left: auto;
}
.quick-secret-field {
  display: grid;
  gap: 6px;
  color: #d8dbe2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.quick-secret-field textarea,
.quick-secret-field select {
  width: 100%;
  min-height: 52px;
  max-height: min(260px, 36dvh);
  padding: 13px 14px;
  box-sizing: border-box;
  resize: none;
  overflow-y: hidden;
  border: 1px solid #4a4a50;
  border-radius: 10px;
  outline: none;
  background: #171719;
  color: #f2f2f2;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 16px;
  line-height: 1.45;
}
.quick-secret-field select {
  min-height: 48px;
  max-height: none;
  resize: none;
  overflow: visible;
}
.quick-secret-field textarea:focus {
  border-color: #f0c14b;
  box-shadow: 0 0 0 2px rgba(240, 193, 75, 0.16);
}
.quick-secret-field textarea[data-sealed="true"] {
  color: transparent;
  text-shadow: 0 0 9px rgba(240, 193, 75, 0.85);
  filter: blur(3px);
  user-select: none;
}
.quick-secret-keep-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 12.5px;
  color: #c6cad2;
}
.quick-secret-keep-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: #f0c14b;
}
.quick-secret-keep-field input[type="checkbox"]:disabled + span {
  opacity: 0.5;
}
.quick-secret-status {
  min-height: 18px;
  color: #9aa0ab;
  font-size: 12px;
}
.quick-secret-status[data-tone="error"] {
  color: #e06c75;
}
.quick-secret-status[data-tone="working"] {
  color: #e5c07b;
}
.quick-secret-status[data-tone="success"] {
  color: #98c379;
}
.secret-chain {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 193, 75, 0.28);
  border-radius: 10px;
  background: rgba(23, 23, 25, 0.85);
}
.secret-chain-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.secret-chain-title {
  color: #f0c14b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.secret-chain-sub {
  color: #7f848e;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.secret-chain-diagram {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.secret-chain-node {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 62px;
  padding: 6px 6px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.secret-chain-node:hover {
  border-color: rgba(240, 193, 75, 0.35);
  background: rgba(240, 193, 75, 0.05);
}
.secret-chain-node[aria-expanded="true"] {
  border-color: rgba(240, 193, 75, 0.55);
  background: rgba(240, 193, 75, 0.08);
}
.secret-chain-lock {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1.5px solid #4a4a50;
  border-radius: 50%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.secret-chain-lock svg {
  width: 17px;
  height: 17px;
}
.secret-chain-lock .lock-shackle,
.secret-chain-lock .lock-stem {
  fill: none;
  stroke: #7f848e;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 0.25s ease;
}
.secret-chain-lock .lock-body {
  fill: #26262a;
  stroke: #7f848e;
  stroke-width: 1.6;
  transition: stroke 0.25s ease, fill 0.25s ease;
}
.secret-chain-lock .lock-dot {
  fill: #7f848e;
  transition: fill 0.25s ease;
}
.secret-chain-node[data-state="ok"] .secret-chain-lock {
  border-color: #98c379;
  box-shadow: 0 0 9px rgba(152, 195, 121, 0.35);
}
.secret-chain-node[data-state="ok"] .lock-shackle,
.secret-chain-node[data-state="ok"] .lock-stem {
  stroke: #98c379;
}
.secret-chain-node[data-state="ok"] .lock-body {
  stroke: #98c379;
  fill: rgba(152, 195, 121, 0.14);
}
.secret-chain-node[data-state="ok"] .lock-dot {
  fill: #98c379;
}
.secret-chain-node[data-state="warn"] .secret-chain-lock {
  border-color: #e5c07b;
}
.secret-chain-node[data-state="warn"] .lock-shackle,
.secret-chain-node[data-state="warn"] .lock-stem {
  stroke: #e5c07b;
}
.secret-chain-node[data-state="warn"] .lock-body {
  stroke: #e5c07b;
}
.secret-chain-node[data-state="warn"] .lock-dot {
  fill: #e5c07b;
}
.secret-chain-node[data-state="fail"] .secret-chain-lock {
  border-color: #e06c75;
  box-shadow: 0 0 9px rgba(224, 108, 117, 0.35);
}
.secret-chain-node[data-state="fail"] .lock-shackle,
.secret-chain-node[data-state="fail"] .lock-stem {
  stroke: #e06c75;
}
.secret-chain-node[data-state="fail"] .lock-body {
  stroke: #e06c75;
  fill: rgba(224, 108, 117, 0.14);
}
.secret-chain-node[data-state="fail"] .lock-dot {
  fill: #e06c75;
}
.secret-chain-link {
  flex: 1 1 12px;
  height: 2px;
  min-width: 8px;
  border-radius: 1px;
  background: #4a4a50;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.secret-chain-link[data-state="ok"] {
  background: linear-gradient(90deg, #98c379, rgba(152, 195, 121, 0.55));
  box-shadow: 0 0 6px rgba(152, 195, 121, 0.3);
}
.secret-chain-link[data-state="warn"] {
  background: rgba(229, 192, 123, 0.6);
}
.secret-chain-link[data-state="fail"] {
  background: rgba(224, 108, 117, 0.7);
}
.secret-chain-node-label {
  color: #d8dbe2;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.secret-chain-node-stat {
  color: #8a8f9a;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.secret-chain-node[data-state="ok"] .secret-chain-node-stat {
  color: #98c379;
}
.secret-chain-node[data-state="fail"] .secret-chain-node-stat {
  color: #e06c75;
}
.secret-chain-panel {
  border-top: 1px solid rgba(240, 193, 75, 0.18);
  padding-top: 8px;
}
.secret-chain-detail {
  display: grid;
  gap: 3px;
}
/* 2026-08-12d: authored display beats the UA's [hidden]{display:none}, so
   without these rules every station's telemetry rendered at once as one
   blob. Only the tapped station's panel may show. */
.secret-chain-panel[hidden],
.secret-chain-detail[hidden] {
  display: none;
}
.secret-chain-detail::before {
  content: attr(data-chain-detail-title);
  color: #f0c14b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.secret-chain-detail-line {
  color: #a7abb4;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.secret-chain-detail-line:first-child {
  color: #d8dbe2;
  font-weight: 600;
}
/* 2026-08-12c: sealing animation — while [data-chain-sealing] is stamped a
   gold ciphertext dot travels each connector in sequence (relay → route →
   key thirds of one 1.8s loop); on success [data-chain-sealed] plays a
   one-shot lock-close flash on the node padlock. */
.secret-chain-link {
  position: relative;
  overflow: visible;
}
[data-chain-sealing="true"] .secret-chain-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #f0c14b;
  box-shadow: 0 0 8px rgba(240, 193, 75, 0.9), 0 0 14px rgba(152, 195, 121, 0.5);
  opacity: 0;
  animation: secret-chain-cipher-pulse 1.8s linear infinite;
}
[data-chain-sealing="true"] .secret-chain-link[data-chain-link="route"]::after {
  animation-delay: 0.6s;
}
[data-chain-sealing="true"] .secret-chain-link[data-chain-link="key"]::after {
  animation-delay: 1.2s;
}
[data-chain-sealing="true"] [data-chain-step="key"] .secret-chain-lock {
  animation: secret-chain-key-await 1.8s ease-in-out infinite;
}
@keyframes secret-chain-cipher-pulse {
  0% {
    left: 0;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  29% {
    opacity: 1;
  }
  33% {
    left: calc(100% - 8px);
    opacity: 0;
  }
  100% {
    left: calc(100% - 8px);
    opacity: 0;
  }
}
@keyframes secret-chain-key-await {
  0%, 100% {
    box-shadow: 0 0 0 rgba(240, 193, 75, 0);
  }
  70% {
    box-shadow: 0 0 12px rgba(240, 193, 75, 0.65);
  }
}
[data-chain-sealed="true"] [data-chain-step="key"] .secret-chain-lock {
  border-color: #98c379;
  animation: secret-chain-lock-close 0.9s ease;
  box-shadow: 0 0 14px rgba(152, 195, 121, 0.75);
}
[data-chain-sealed="true"] [data-chain-step="key"] .lock-shackle {
  animation: secret-chain-shackle-drop 0.45s ease;
}
@keyframes secret-chain-lock-close {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes secret-chain-shackle-drop {
  0% {
    transform: translateY(-2.5px);
  }
  100% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-chain-sealing="true"] .secret-chain-link::after,
  [data-chain-sealing="true"] [data-chain-step="key"] .secret-chain-lock,
  [data-chain-sealed="true"] [data-chain-step="key"] .secret-chain-lock,
  [data-chain-sealed="true"] [data-chain-step="key"] .lock-shackle {
    animation: none;
  }
}
.secret-chain-fp {
  color: #f0c14b;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
}
.secret-chain-trust {
  justify-self: start;
  padding: 6px 10px;
  border: 1px solid #e5c07b;
  border-radius: 8px;
  background: rgba(229, 192, 123, 0.12);
  color: #e5c07b;
  font: 700 11px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
.quick-secret-actions {
  display: grid;
  grid-template-columns: minmax(100px, 0.55fr) minmax(160px, 1fr);
  gap: 10px;
  padding: 11px 18px 14px;
  border-top: 1px solid rgba(240, 193, 75, 0.22);
  background: linear-gradient(
    0deg,
    rgba(240, 193, 75, 0.06),
    rgba(240, 193, 75, 0.01)
  );
}
.quick-secret-btn {
  padding: 11px 14px;
  border-radius: 9px;
  font: 700 13px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
.quick-secret-btn--cancel {
  border: 1px solid #444;
  background: #2d2d2d;
  color: #e0e0e0;
}
.quick-secret-btn--seal {
  border: 1px solid rgba(255, 214, 140, 0.58);
  background: linear-gradient(135deg, #e06c75, #be5046);
  color: #fff;
}
.quick-secret-btn:disabled {
  cursor: wait;
  opacity: 0.58;
}

.sealed-secret-attachment-icon {
  display: block;
  width: 100%;
  height: 100%;
}
.attach-preview-icon--secret {
  width: clamp(64px, 18vw, 112px);
  height: clamp(64px, 18vw, 112px);
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid rgba(240, 193, 75, 0.42);
  border-radius: 16px;
  background: rgba(240, 193, 75, 0.06);
}
.context-chip-secret-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.attachment-preview-full-icon .sealed-secret-attachment-icon {
  width: clamp(88px, 18vw, 144px);
  height: clamp(88px, 18vw, 144px);
  margin: 0 auto;
}

.secret-vault {
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  margin: 12px 0;
  padding: 0;
  max-height: min(70vh, 660px);
  max-height: min(70dvh, 660px);
  overflow: hidden;
  border: 1px solid rgba(240, 193, 75, 0.5);
  border-radius: 18px;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.016) 0 2px,
      rgba(0, 0, 0, 0) 2px 7px
    ),
    linear-gradient(180deg, rgba(224, 108, 117, 0.11),
    rgba(26, 26, 29, 0.98) 44%
  ),
    linear-gradient(180deg, #232326, #19191c);
  box-shadow: 0 0 0 3px #2b2b30, 0 0 0 4px rgba(240, 193, 75, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(224, 108, 117, 0.2);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  animation: secret-vault-glow 3.6s ease-in-out infinite;
}
/* Inner riveted frame: hairline gold ring + 8 stud rivets (4 corners +
   4 edge midpoints), drawn as no-repeat radial gradients on an inset
   overlay so they never affect layout or capture taps. */
.quick-secret-vault::before,
.secret-vault::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(240, 193, 75, 0.22);
  border-radius: 12px;
  pointer-events: none;
  z-index: 5;
  background-image:
    radial-gradient(
      circle,
      #ffe9a8 0%,
      #d4a94e 40%,
      #6b5a23 75%,
      rgba(0, 0, 0, 0) 78%
    ),
    radial-gradient(
    circle,
    #ffe9a8 0%,
    #d4a94e 40%,
    #6b5a23 75%,
    rgba(0, 0, 0, 0) 78%
  ),
    radial-gradient(
    circle,
    #ffe9a8 0%,
    #d4a94e 40%,
    #6b5a23 75%,
    rgba(0, 0, 0, 0) 78%
  ),
    radial-gradient(
    circle,
    #ffe9a8 0%,
    #d4a94e 40%,
    #6b5a23 75%,
    rgba(0, 0, 0, 0) 78%
  ),
    radial-gradient(
    circle,
    #ffe9a8 0%,
    #d4a94e 40%,
    #6b5a23 75%,
    rgba(0, 0, 0, 0) 78%
  ),
    radial-gradient(
    circle,
    #ffe9a8 0%,
    #d4a94e 40%,
    #6b5a23 75%,
    rgba(0, 0, 0, 0) 78%
  ),
    radial-gradient(
    circle,
    #ffe9a8 0%,
    #d4a94e 40%,
    #6b5a23 75%,
    rgba(0, 0, 0, 0) 78%
  ),
    radial-gradient(
    circle,
    #ffe9a8 0%,
    #d4a94e 40%,
    #6b5a23 75%,
    rgba(0, 0, 0, 0) 78%
  );
  background-size: 7px 7px;
  background-repeat: no-repeat;
  background-position: left 2px top 2px, right 2px top 2px, left 2px bottom 2px, right 2px bottom 2px, center top 2px, center bottom 2px, left 2px center, right 2px center;
}
@keyframes secret-vault-glow {
  0%, 100% {
    box-shadow: 0 0 0 3px #2b2b30, 0 0 0 4px rgba(240, 193, 75, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 22px rgba(224, 108, 117, 0.18);
  }
  50% {
    box-shadow: 0 0 0 3px #2b2b30, 0 0 0 4px rgba(240, 193, 75, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 38px rgba(224, 108, 117, 0.38);
  }
}
.secret-vault-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  padding: 14px 18px 11px;
  border-bottom: 1px solid rgba(240, 193, 75, 0.22);
  background: linear-gradient(
    180deg,
    rgba(240, 193, 75, 0.07),
    rgba(240, 193, 75, 0.015)
  );
}
.secret-vault-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
/* Rotating dashed ring = combination dial around the lock. */
.secret-vault-badge::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px dashed rgba(240, 193, 75, 0.55);
  border-radius: 50%;
  animation: secret-vault-dial 16s linear infinite;
}
@keyframes secret-vault-dial {
  to {
    transform: rotate(360deg);
  }
}
.secret-vault-badge svg {
  width: 26px;
  height: 26px;
}
.secret-vault-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: linear-gradient(
    120deg,
    #f6d789,
    #f0c14b 35%,
    #fff3cf 50%,
    #d8a63c 65%,
    #f6d789
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Scrollable middle region — the vault frame, title, and actions stay put. */
.secret-vault-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 0;
  padding: 12px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 193, 75, 0.35) transparent;
}
.secret-vault-actions {
  display: flex;
  gap: 10px;
  padding: 11px 18px 14px;
  border-top: 1px solid rgba(240, 193, 75, 0.22);
  background: linear-gradient(
    0deg,
    rgba(240, 193, 75, 0.06),
    rgba(240, 193, 75, 0.01)
  );
}
.secret-vault-actions .secret-vault-btn {
  flex: 1 1 0;
}
.secret-vault-chip {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(240, 193, 75, 0.55);
  background: rgba(240, 193, 75, 0.14);
  color: #f0c14b;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.secret-vault-warning {
  grid-column: 1 / -1;
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(224, 108, 117, 0.6);
  border-left: 4px solid #e06c75;
  border-radius: 8px;
  background: rgba(224, 108, 117, 0.12);
  color: #f3c1c6;
  font-size: 12px;
  line-height: 1.55;
}
.secret-vault-warning strong {
  color: #ff9aa5;
}
.secret-vault-warning-icon {
  flex-shrink: 0;
  color: #e06c75;
  font-size: 14px;
  line-height: 1.4;
}
.secret-vault-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.secret-vault-field--full {
  grid-column: 1 / -1;
}
.secret-vault-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #7f848e;
}
.secret-vault input,
.secret-vault select,
.secret-vault textarea {
  padding: 9px 11px;
  background: #242424;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 13px;
  font-family: inherit;
  min-width: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.secret-vault textarea {
  resize: vertical;
  min-height: 72px;
  max-height: 180px;
  line-height: 1.45;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 11px;
}
.secret-vault input::placeholder,
.secret-vault textarea::placeholder {
  color: #5c6370;
}
.secret-vault input:focus,
.secret-vault select:focus,
.secret-vault textarea:focus {
  outline: none;
  border-color: #e06c75;
  box-shadow: 0 0 0 2px rgba(224, 108, 117, 0.2);
}
.secret-vault select {
  color-scheme: dark;
}
.secret-vault input[readonly] {
  color: #98c379;
  background: #202820;
  border-color: rgba(152, 195, 121, 0.35);
  cursor: default;
}
.secret-vault-preset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}
.secret-vault-detect-btn {
  padding: 8px 11px;
  border: 1px solid rgba(97, 175, 239, 0.55);
  border-radius: 8px;
  background: rgba(97, 175, 239, 0.1);
  color: #9dceff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.secret-vault-detect-btn:hover {
  background: rgba(97, 175, 239, 0.18);
  border-color: #61afef;
}
.secret-vault-help {
  color: #8b919d;
  font-size: 11px;
  line-height: 1.45;
}
.secret-vault-status {
  grid-column: 1 / -1;
  min-height: 15px;
  color: #e5c07b;
  font-size: 12px;
}
.secret-vault-status[data-tone="error"] {
  color: #ff9aa5;
}
.secret-vault-status[data-tone="success"] {
  color: #98c379;
}
.secret-vault-status[data-tone="working"],
.secret-vault-status[data-tone="warning"] {
  color: #e5c07b;
}
.secret-vault-btn {
  padding: 10px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}
.secret-vault-btn--cancel {
  background: #2d2d2d;
  border: 1px solid #444;
  color: #e0e0e0;
}
.secret-vault-btn--cancel:hover {
  background: #3d3d3d;
}
.secret-vault-btn--seal {
  background: linear-gradient(135deg, #e06c75, #be5046);
  border: 1px solid rgba(255, 214, 140, 0.55);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.secret-vault-btn--seal:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 12px rgba(224, 108, 117, 0.5);
}
.secret-vault-btn:active {
  transform: scale(0.98);
}
.secret-vault-btn:disabled {
  cursor: wait;
  opacity: 0.58;
  filter: saturate(0.65);
}
/* While the vault is open (script/secrets.ts stamps data-secret-vault on the
   component root) the attach grid yields its space and the expanded tray cap
   rises so the vault scrolls internally instead of double-scrolling. */
[data-secret-vault="open"] .tray-panel[data-panel="attach"] .attach-grid {
  display: none;
}
/* 2026-08-11c: the pasteboard also yields while the vault is open — on
   mobile the empty/populated preview was squashing the vault into the top
   sliver of the panel. */
[data-secret-vault="open"] .tray-panel[data-panel="attach"] .attach-preview {
  display: none;
}
[data-secret-vault="open"][data-tray-state="expanded"] .context-tray {
  max-height: min(86vh, 760px);
  max-height: min(86dvh, 760px);
}
/* 2026-08-12c: while the vault is open the tray hugs its content instead of
   holding the fixed min(760px, 72vh) attach height — this removes the dead
   space below the vault on desktop. Mobile-surface + keyboard-open rules
   later in this file still override on those surfaces. */
[data-secret-vault="open"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .context-tray {
  height: auto;
}
[data-secret-vault="open"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .tray-content,
[data-secret-vault="open"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .tray-panel[data-panel="attach"] {
  flex: 0 0 auto;
  height: auto;
}
@media (max-width: 640px) {
  .quick-secret-head {
    gap: 6px;
  }
  .quick-secret-actions {
    grid-template-columns: 1fr;
  }
  .secret-vault-body {
    grid-template-columns: 1fr;
  }
  .secret-vault-preset-row {
    grid-template-columns: 1fr;
  }
}
/* Height-constrained viewports: fold main screens (~660px tall) and
   landscape phones. Tighten chrome so fields keep the room. */
@media (max-height: 760px) {
  .secret-vault-head {
    padding: 10px 14px 8px;
  }
  .secret-vault-body {
    padding: 10px 14px;
    gap: 8px;
  }
  .secret-vault-actions {
    padding: 8px 14px 10px;
  }
  .secret-vault-warning {
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.45;
  }
  .secret-vault textarea {
    min-height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quick-secret-vault,
  .secret-vault {
    animation: none;
  }
  .secret-vault-badge::before {
    animation: none;
  }
}
.attach-preview-item {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  background: #242424;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  padding: 0;
  color: inherit;
  min-height: 120px;
}
[data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-preview-item {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}
.attach-token-total,
.attach-token-pill {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid rgba(127, 132, 142, 0.45);
  background: rgba(20, 20, 20, 0.78);
  color: #c7cbd3;
  pointer-events: none;
  white-space: nowrap;
}
.attach-token-total {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  text-transform: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}
.attach-token-total-label {
  color: inherit;
  opacity: 0.78;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.attach-token-total-count {
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.attach-token-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 7px;
}
.attach-token-total--green,
.attach-token-pill--green {
  border-color: rgba(152, 195, 121, 0.65);
  background: rgba(42, 71, 36, 0.84);
  color: #98c379;
}
.attach-token-total--amber,
.attach-token-pill--amber {
  border-color: rgba(245, 158, 11, 0.65);
  background: rgba(80, 58, 24, 0.82);
  color: #e5c07b;
}
.attach-token-total--red,
.attach-token-pill--red {
  border-color: rgba(224, 108, 117, 0.7);
  background: rgba(82, 32, 38, 0.82);
  color: #e06c75;
}
.attach-preview-item img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  background: #111;
}
.attach-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  font-size: 58px;
  color: #e5c07b;
}
.attach-preview-icon--error {
  color: #e06c75;
}
.attach-preview-item .item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  font-size: 10px;
  color: #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attach-preview-item .item-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255, 255, 255, 0.2),
      transparent 13px
    ),
    linear-gradient(
    135deg,
    rgba(240, 193, 75, 0.24),
    rgba(224, 108, 117, 0.82)
  );
  border: 1px solid rgba(240, 193, 75, 0.7);
  border-radius: 50%;
  color: #fff7df;
  cursor: pointer;
  opacity: 0.94;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.attach-preview-item .item-remove-icon,
.attach-preview-item .item-remove svg {
  width: 22px;
  height: 22px;
  display: block;
}
.attach-preview-item .item-remove svg circle {
  fill: rgba(26, 26, 26, 0.42);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.1;
}
.attach-preview-item .item-remove svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.attach-preview-item:hover .item-remove,
.attach-preview-item .item-remove:focus-visible {
  opacity: 1;
  transform: scale(1.06);
  border-color: #f0c14b;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42), 0 0 0 2px rgba(240, 193, 75, 0.28);
}
.attach-preview-item .item-remove:hover {
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255, 255, 255, 0.24),
      transparent 13px
    ),
    linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.35),
    rgba(224, 108, 117, 0.96)
  );
}
.attachment-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.attachment-preview-window {
  max-width: min(96vw, 1280px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.attachment-preview-full-image {
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}
.attachment-preview-full-file {
  min-width: min(680px, 92vw);
  min-height: 360px;
  border: 1px solid #3d3d3d;
  border-radius: 12px;
  background: #1e1e1e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #e0e0e0;
}
.attachment-preview-full-icon {
  font-size: 72px;
}
.attachment-preview-full-name {
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
}
.attachment-preview-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(240, 193, 75, 0.5);
  background: rgba(30, 30, 30, 0.9);
  color: #f0c14b;
  font-size: 22px;
  cursor: pointer;
  z-index: 10081;
}
.attachment-preview-remove {
  border: 1px solid rgba(224, 108, 117, 0.7);
  border-radius: 999px;
  background: rgba(224, 108, 117, 0.16);
  color: #ff9aa4;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  cursor: pointer;
}

/* Attachment badge on toggle button */
.toggle-btn .attach-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}
.toggle-btn.has-attachments .attach-badge {
  display: flex;
}
.toggle-btn {
  position: relative;
}

/* ========================================================================
 * PHASE 3: HISTORY TAB
 * ======================================================================== */

/* History Header */
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #333;
}
.history-count {
  font-size: 12px;
  color: #7f848e;
}
.history-clear-btn,
.history-popular-btn,
.history-reset-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid #444;
  border-radius: 4px;
  color: #7f848e;
  font-size: 12px;
  cursor: pointer;
  transition: all 150ms ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.history-clear-btn:hover,
.history-popular-btn:hover,
.history-reset-btn:hover {
  background: #2d2d2d;
  color: #e0e0e0;
  border-color: #555;
}
.history-popular-btn:hover {
  border-color: #e5c07b55;
  color: #e5c07b;
}
.history-reset-btn:hover {
  border-color: #61afef55;
  color: #61afef;
}
.history-clear-btn:active,
.history-popular-btn:active,
.history-reset-btn:active {
  transform: scale(0.97);
}

/* History search row */
.history-search-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.history-search-input {
  width: 100%;
  padding: 6px 10px;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  outline: none;
  transition: border-color 150ms ease;
}
.history-search-input:focus {
  border-color: #61afef55;
}
.history-search-input::placeholder {
  color: #7f848e;
}

/* Usage count badge in popular mode */
.history-item-usecount {
  font-size: 11px;
  color: #e5c07b;
  background: #e5c07b18;
  padding: 1px 5px;
  border-radius: 3px;
}

/* History List */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(40vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
.history-list::-webkit-scrollbar {
  width: 6px;
}
.history-list::-webkit-scrollbar-track {
  background: transparent;
}
.history-list::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

/* History Item */
.history-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
}
.history-item:hover {
  background: #3d3d3d;
  border-color: #f0c14b;
}
.history-item:active {
  transform: scale(0.99);
}
.history-item.selected {
  background: #3a3320;
  border-color: #f0c14b;
}
.history-item--pinned {
  border-color: #f0c14b88;
  background: linear-gradient(135deg, #2d2d2d, #332d1d);
}
.history-item-content {
  flex: 1;
  min-width: 0;
}
.history-item-text {
  font-size: 14px;
  color: #e0e0e0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.history-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: #7f848e;
}
.history-item-time {
  white-space: nowrap;
}
.history-item-length {
  opacity: 0.7;
}
.history-item-pin-badge,
.history-item-script,
.history-item-status {
  font-size: 11px;
  color: #f0c14b;
  background: rgba(240, 193, 75, 0.12);
  border: 1px solid rgba(240, 193, 75, 0.24);
  padding: 1px 5px;
  border-radius: 3px;
}
.history-item-script {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}
.history-item-status {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-item-actions {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding-left: 12px;
  opacity: 1;
}
.history-item--actions-open {
  border-color: #f0c14b;
  background: #332d1d;
}
.history-item--actions-open .history-item-actions {
  display: flex;
}
.history-item-action {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at 72% 20%,
      var(--history-action-glow, rgba(240, 193, 75, 0.26)),
      transparent 24px
    ),
    linear-gradient(
    135deg,
    var(--history-action-bg-start, rgba(56, 43, 20, 0.98)),
    var(--history-action-bg-end, rgba(18, 18, 18, 0.98))
  );
  border: 1px solid var(--history-action-border, rgba(240, 193, 75, 0.58));
  border-radius: 14px;
  color: var(--history-action-color, #f0c14b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 8px 18px rgba(0, 0, 0, 0.26);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
.history-item-action[data-history-action="insert"] {
  --history-action-color: #98c379;
  --history-action-border: rgba(152, 195, 121, 0.62);
  --history-action-glow: rgba(152, 195, 121, 0.24);
  --history-action-bg-start: rgba(35, 61, 36, 0.98);
}
.history-item-action[data-history-action="edit"] {
  --history-action-color: #61afef;
  --history-action-border: rgba(97, 175, 239, 0.6);
  --history-action-glow: rgba(97, 175, 239, 0.24);
  --history-action-bg-start: rgba(27, 50, 72, 0.98);
}
.history-item-action[data-history-action="pin"] {
  --history-action-color: #f0c14b;
  --history-action-border: rgba(240, 193, 75, 0.68);
  --history-action-glow: rgba(240, 193, 75, 0.3);
  --history-action-bg-start: rgba(67, 50, 16, 0.98);
}
.history-item-action[data-history-action="promote"] {
  --history-action-color: #56b6c2;
  --history-action-border: rgba(86, 182, 194, 0.6);
  --history-action-glow: rgba(86, 182, 194, 0.24);
  --history-action-bg-start: rgba(20, 55, 60, 0.98);
}
.history-item-action[data-history-action="delete"] {
  --history-action-color: #e06c75;
  --history-action-border: rgba(224, 108, 117, 0.62);
  --history-action-glow: rgba(224, 108, 117, 0.25);
  --history-action-bg-start: rgba(72, 28, 34, 0.98);
}
.history-item-action:hover {
  transform: translateY(-1px);
  border-color: currentColor;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 22px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(240, 193, 75, 0.14);
  color: #fff;
}
.history-item-delete:hover {
  border-color: #e06c75;
  color: #fff;
}
@media (max-width: 600px) {
  #gv-prompt-composer-input {
    min-width: 0 !important;
    resize: none !important;
  }
  .history-item--actions-open {
    align-items: flex-start;
    flex-direction: column;
  }
  .history-item--actions-open .history-item-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 0;
    padding-top: 10px;
  }
}

/* History Empty State */
.history-empty {
  display: none;
}
.history-list:empty + .history-empty {
  display: block;
}

/* Keyboard navigation hint */
.history-keyboard-hint {
  display: none;
  font-size: 11px;
  color: #7f848e;
  text-align: center;
  padding: 8px;
  margin-top: 8px;
  border-top: 1px solid #333;
}
[data-panel="history"]:focus-within .history-keyboard-hint {
  display: block;
}

/* ========================================================================
 * PHASE 4: FILE TAB
 * ======================================================================== */

/* File Search Input */
.file-search-wrapper {
  position: relative;
  margin-bottom: 12px;
}
.file-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: #2d2d2d;
  border: 1px solid #444;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 200ms ease;
  box-sizing: border-box;
}
.file-search-input:focus {
  border-color: #61afef;
}
.file-search-input::placeholder {
  color: #7f848e;
}
.file-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}

/* File Results List */
.file-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(40vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
.file-results::-webkit-scrollbar {
  width: 6px;
}
.file-results::-webkit-scrollbar-track {
  background: transparent;
}
.file-results::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

/* File Result Item */
.file-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms ease;
}
.file-result-item:hover {
  background: #3d3d3d;
  border-color: #61afef;
}
.file-result-item:active {
  transform: scale(0.99);
}
.file-result-item.selected {
  background: #2d4a6d;
  border-color: #61afef;
}
.file-result-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.file-result-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.file-result-name {
  font-size: 13px;
  font-weight: 500;
  color: #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-result-path {
  font-size: 11px;
  color: #7f848e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.file-result-add {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #444;
  border-radius: 50%;
  color: #7f848e;
  font-size: 14px;
  cursor: pointer;
  transition: all 150ms ease;
  opacity: 0;
}
.file-result-item:hover .file-result-add {
  opacity: 1;
}
.file-result-add:hover {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

/* File Empty/Loading States */
.file-empty, .file-loading {
  padding: 30px 20px;
}
.file-loading {
  color: #61afef;
}

/* File Mention Chip (in context chips) */
.context-chip--file {
  background: #2d3d4a;
  color: #61afef;
}
.context-chip--file .chip-icon {
  font-size: 12px;
}

/* ========================================================================
 * PHASE 5: BROWSE TAB
 * ======================================================================== */

/* Browse Header - path display and navigation */
/* 2026-05-14AV — Slice AV: single .browse-toolbar replaces the prior 4
   chrome rows (.browse-header, .browse-breadcrumbs as own row,
   .browse-explorer-toolbar, .browse-sort-row). One smart row in the
   style of Files-for-Windows / Finder address-bar + actions. Selection
   actions render inline; sort opens a popup; status is a thin strip
   below. 2026-05-14BB.1 brought the right pane to the same toolbar
   style; BB.2 retired the legacy .browse-nav-btn / .browse-btn-icon /
   .browse-btn-label rules. 2026-05-14AX retired the .browse-path rule
   (#browse-right-path element was also retired in BB.2). */
/* 2026-05-14AV.1.1 — flex-wrap dropped (was a strong candidate for layout
   thrash when the textarea below auto-resized). The toolbar now stays a
   single row; on narrow viewports the breadcrumbs absorb pressure via
   their existing overflow-x: auto. transition narrowed from `all` to
   the 3 properties that actually change on hover/active — `all` would
   animate every property delta including layout. */
.browse-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: linear-gradient(
    180deg,
    rgba(45, 49, 60, 0.92) 0%,
    rgba(30, 32, 40, 0.85) 100%
  );
  border: 1px solid #2f3340;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 6px rgba(0, 0, 0, 0.25);
}
.browse-toolbar-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 5px;
  color: #e0e0e0;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.browse-toolbar-icon:hover:not(:disabled),
.browse-toolbar-icon[aria-pressed="true"],
.browse-toolbar-icon[aria-expanded="true"] {
  background: #253545;
  border-color: #61afef;
  color: #61afef;
}
.browse-toolbar-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.browse-selection-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 0 4px;
  border-left: 1px solid #3d3d3d;
  border-right: 1px solid #3d3d3d;
}
.browse-toolbar:not([data-has-selection="true"]) .browse-selection-inline {
  display: none;
}
/* 2026-05-14AV.1 — sort popup floats absolute below the toolbar's right
   edge so it doesn't push the file list down when opened. z-index sits
   above the file tree (and any preview pane) but below kebab menus. The
   parent .browse-toolbar carries position:relative for the anchor. */
.browse-popup-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 8px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  width: max-content;
  max-width: 240px;
}
.browse-popup-menu .browse-sort-btn {
  text-align: left;
  width: 100%;
}
/* 2026-05-14AX — Volumes popup. Slightly wider than the sort popup to
   fit emoji prefix + path. .browse-volume-btn shares the .browse-sort-btn
   base styling but allows the leading emoji + path to wrap if needed. */
.browse-volumes-menu {
  max-width: 220px;
}
.browse-volume-btn {
  text-align: left;
  width: 100%;
  min-height: 28px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid #3d3d3d;
  border-radius: 5px;
  color: #e0e0e0;
  font-size: 12px;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  cursor: pointer;
}
.browse-volume-btn:hover {
  color: #61afef;
  border-color: #61afef;
  background: #253545;
}
/* 2026-05-14BB.2 — orphan rules retired. Pre-BB.1 .browse-nav-btn /
   .browse-btn-icon / .browse-btn-label styled the right-pane Up/Home/
   Single buttons. BB.1 replaced those with .browse-toolbar-icon. No
   remaining HTML emits these classes (verified by grep across html.ts
   + main.ts), so the rules deleted entirely. */
/* 2026-05-14AX — .browse-path rule retired alongside the AX work. BB.2
   dropped the only HTML element using this class (#browse-right-path);
   my BB.2 commit message inaccurately said it was "retained for the
   hidden legacy element" — the audit caught the inconsistency. Removing
   the orphan now folds cleanly into the AX CSS pass. */
/* 2026-05-14AV — breadcrumbs now live inline inside .browse-toolbar.
   flex:1 so they consume the address-bar space between nav buttons and
   the right-cluster icons. Horizontal scroll preserved for deep paths.
   The pre-AV standalone-row padding/margin are zeroed when inside
   .browse-toolbar; the bare rule below keeps a fallback for non-toolbar
   contexts (right-pane / search-results).
   Slice 6b.1 lineage: padding 8/8 → 4/4 compaction. */
.browse-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.browse-toolbar .browse-breadcrumbs {
  flex: 1;
  min-width: 0;
}
.browse-breadcrumbs::-webkit-scrollbar {
  display: none;
}
.browse-crumb {
  flex-shrink: 0;
  min-height: 28px;
  padding: 4px 8px;
  background: #252525;
  border: 1px solid #3d3d3d;
  border-radius: 5px;
  color: #e0e0e0;
  font-size: 12px;
  cursor: pointer;
}
.browse-crumb:hover {
  border-color: #61afef;
  color: #61afef;
}
.browse-crumb-sep {
  color: #7f848e;
  font-size: 12px;
}

/* 2026-05-14AV — .browse-explorer-toolbar retired (merged into
   .browse-toolbar). View-toggle group + .browse-view-btn rules retained
   because the buttons still render inside .browse-toolbar. .browse-status
   demoted to a thin strip below the toolbar (was flex:1 sharing the
   toolbar row pre-AV). */
.browse-view-toggle {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
.browse-view-btn {
  min-height: 28px;
  min-width: 30px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #3d3d3d;
  border-radius: 5px;
  color: #7f848e;
  font-size: 13px;
  cursor: pointer;
}
.browse-view-btn:hover,
.browse-view-btn.active {
  color: #61afef;
  border-color: #61afef;
  background: #253545;
}
.browse-status {
  font-size: 11px;
  color: #7f848e;
  padding: 0 4px 4px;
  margin: -2px 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
/* 2026-05-14AV.1.1 — auto-hide handled by explicit JS toggle now (see
   setBrowseStatus + IIFE init in browse/main.ts). The pre-AV.1.1 `:empty`
   pseudo-class was a perf suspect: browsers re-evaluate the matcher on
   every DOM mutation under the element, and combined with the new
   document-level listeners + emoji-heavy toolbar it MAY have contributed
   to the AV.1 hang. JS toggle is cheaper + more predictable. */
.browse-status[data-tone="ok"] {
  color: #98c379;
}
.browse-status[data-tone="working"] {
  color: #e5c07b;
}
.browse-status[data-tone="error"] {
  color: #e06c75;
}
/* Slice 6b.2 — right-pane node picker. Compact <select> wedged into the
   right pane header next to the Home button. Inherits the dark theme. */
.browse-right-node {
  flex-shrink: 0;
  height: 26px;
  max-width: 160px;
  padding: 2px 6px;
  background: #1f1f1f;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 11px;
  cursor: pointer;
}
.browse-right-node:hover,
.browse-right-node:focus {
  border-color: #61afef;
  outline: none;
}

/* 2026-05-16D — Finder-style tree view. Rows nest inside one compact
   surface, with disclosure buttons, guide lines, and branch elbows
   driven by the --tree-depth CSS custom variable emitted per row. */
.browse-tree[data-view="tree"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px;
  background: linear-gradient(180deg, #202226 0%, #1c1d21 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.browse-tree[data-view="tree"] .browse-item {
  position: relative;
  min-height: 38px;
  padding: 5px 10px 5px calc(12px + var(--tree-depth, 0) * 22px);
  background: transparent;
  border-color: transparent;
  border-radius: 7px;
  gap: 8px;
}
.browse-tree[data-view="tree"] .browse-item:hover {
  background: rgba(97, 175, 239, 0.1);
  border-color: rgba(97, 175, 239, 0.22);
  box-shadow: none;
}
.browse-tree[data-view="tree"] .browse-item--dir:hover {
  background: rgba(152, 195, 121, 0.1);
  border-color: rgba(152, 195, 121, 0.22);
}
.browse-tree[data-view="tree"] .browse-item--selected {
  background: rgba(152, 195, 121, 0.14);
  border-color: rgba(152, 195, 121, 0.42);
  box-shadow: 0 0 0 1px rgba(152, 195, 121, 0.16) inset;
}
.browse-tree-guide,
.browse-tree-branch {
  position: absolute;
  pointer-events: none;
  opacity: 0.65;
}
.browse-tree-guide {
  left: calc(20px + (var(--tree-depth, 0) - 1) * 22px);
  top: -7px;
  bottom: -7px;
  border-left: 1px solid rgba(127, 132, 142, 0.22);
}
.browse-tree-branch {
  left: calc(20px + (var(--tree-depth, 0) - 1) * 22px);
  top: 50%;
  width: 12px;
  border-top: 1px solid rgba(127, 132, 142, 0.24);
}
.browse-tree[data-view="tree"] .browse-item[data-tree-depth="0"] .browse-tree-guide,
.browse-tree[data-view="tree"] .browse-item[data-tree-depth="0"] .browse-tree-branch {
  display: none;
}
.browse-item-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-right: -4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.browse-item-chevron:hover,
.browse-item-chevron:focus {
  color: #61afef;
  background: rgba(97, 175, 239, 0.14);
  border-color: rgba(97, 175, 239, 0.32);
  outline: none;
}
.browse-item-chevron[aria-expanded="true"] {
  color: #98c379;
  background: rgba(152, 195, 121, 0.12);
  border-color: rgba(152, 195, 121, 0.28);
}
/* Outside tree view the chevron never renders (renderBrowseTree only
   emits it under data-view="tree"). Belt-and-braces hide just in case
   stale DOM survives a re-render race. */
.browse-tree:not([data-view="tree"]) .browse-item-chevron {
  display: none;
}

/* 2026-05-16E — Futurist graphical tree. This intentionally overrides
   the earlier row-card feel: tree mode becomes a compact Finder-style
   browser with columns, depth rails, and whole-folder click targets. */
.browse-item-kind,
.browse-item-permissions,
.browse-item-modified,
.browse-item-created,
.browse-item-owner,
.browse-item-git,
.browse-item-col {
  display: none;
}
.browse-tree[data-view="tree"] {
  gap: 4px;
  padding: 10px;
  overflow-x: auto;
  background:
    radial-gradient(
      circle at 16% 0%,
      rgba(97, 175, 239, 0.18),
      transparent 34%
    ),
    radial-gradient(
    circle at 92% 10%,
    rgba(198, 120, 221, 0.12),
    transparent 28%
  ),
    linear-gradient(
    180deg,
    rgba(26, 30, 39, 0.98) 0%,
    rgba(18, 20, 27, 0.98) 100%
  );
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 34px rgba(0, 0, 0, 0.28);
}
.browse-tree-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: var(--browse-tree-cols, 220px 72px 88px 132px 72px 112px 112px);
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 12px 0 18px;
  margin-bottom: 4px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 18, 26, 0.86);
  color: #8ea0b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
.browse-tree-header-name {
  color: #cbd5e1;
}
.browse-tree-header--list {
  grid-template-columns: var(--browse-list-cols, 220px 72px 88px 132px 72px 112px 112px 44px);
}
.browse-tree-header-cell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-col-resizer {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: calc(100% + 16px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  z-index: 4;
}
.browse-col-resizer::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 7px;
  width: 2px;
  border-radius: 999px;
  background: rgba(97, 175, 239, 0.28);
}
.browse-col-resizer:hover::after,
.browse-col-resizer[data-dragging="true"]::after {
  background: #61afef;
  box-shadow: 0 0 10px rgba(97, 175, 239, 0.5);
}
.browse-tree[data-view="tree"] .browse-item {
  display: grid;
  grid-template-columns: var(--browse-tree-cols, 220px 72px 88px 132px 72px 112px 112px);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 12px 6px 18px;
  background:
    linear-gradient(90deg, rgba(97, 175, 239, 0.08), transparent 36%),
    rgba(28, 32, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 7px 18px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.browse-tree[data-view="tree"] .browse-item::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #61afef, #c678dd);
  opacity: 0.5;
}
.browse-tree[data-view="tree"] .browse-item:hover {
  background:
    linear-gradient(
      90deg,
      rgba(97, 175, 239, 0.18),
      rgba(198, 120, 221, 0.08) 52%,
      transparent
    ),
    rgba(36, 43, 58, 0.9);
  border-color: rgba(97, 175, 239, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 28px rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
}
.browse-tree[data-view="tree"] .browse-item--dir {
  background:
    linear-gradient(
      90deg,
      rgba(97, 175, 239, 0.12),
      rgba(86, 182, 194, 0.06) 42%,
      transparent
    ),
    rgba(28, 35, 48, 0.78);
  border-color: rgba(97, 175, 239, 0.16);
}
.browse-tree[data-view="tree"] .browse-item--dir:hover {
  background:
    linear-gradient(
      90deg,
      rgba(97, 175, 239, 0.22),
      rgba(198, 120, 221, 0.1) 54%,
      transparent
    ),
    rgba(34, 43, 60, 0.95);
  border-color: rgba(97, 175, 239, 0.48);
}
.browse-tree[data-view="tree"] .browse-item--selected {
  background:
    linear-gradient(
      90deg,
      rgba(97, 175, 239, 0.2),
      rgba(198, 120, 221, 0.13) 58%,
      rgba(152, 195, 121, 0.06)
    ),
    rgba(34, 43, 60, 0.96);
  border-color: rgba(97, 175, 239, 0.56);
  box-shadow: inset 0 0 0 1px rgba(97, 175, 239, 0.18), 0 0 0 1px rgba(198, 120, 221, 0.1), 0 14px 30px rgba(0, 0, 0, 0.26);
}
.browse-tree-namecell {
  position: relative;
  display: grid;
  grid-template-columns: 28px 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: calc(var(--tree-depth, 0) * 24px);
}
.browse-tree-depth-rail {
  position: absolute;
  left: calc(14px + var(--tree-depth, 0) * 24px);
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(97, 175, 239, 0.42),
    rgba(198, 120, 221, 0.2)
  );
  opacity: calc(0.24 + var(--tree-depth, 0) * 0.12);
  pointer-events: none;
}
.browse-tree[data-view="tree"] .browse-item[data-tree-depth="0"] .browse-tree-depth-rail {
  opacity: 0;
}
.browse-tree[data-view="tree"] .browse-tree-guide {
  left: calc(31px + (var(--tree-depth, 0) - 1) * 24px);
  top: -8px;
  bottom: -8px;
  border-left: 1px solid rgba(97, 175, 239, 0.24);
}
.browse-tree[data-view="tree"] .browse-tree-branch {
  left: calc(31px + (var(--tree-depth, 0) - 1) * 24px);
  width: 24px;
  border-top: 1px solid rgba(97, 175, 239, 0.28);
}
.browse-tree[data-view="tree"] .browse-item[data-tree-depth="0"] .browse-tree-guide,
.browse-tree[data-view="tree"] .browse-item[data-tree-depth="0"] .browse-tree-branch {
  display: none;
}
.browse-tree[data-view="tree"] .browse-item-chevron {
  width: 26px;
  height: 26px;
  margin: 0;
  background: rgba(15, 18, 26, 0.72);
  border-color: rgba(148, 163, 184, 0.16);
  color: #61afef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.browse-tree[data-view="tree"] .browse-item-chevron[aria-expanded="true"] {
  color: #c678dd;
  background: rgba(198, 120, 221, 0.12);
  border-color: rgba(198, 120, 221, 0.34);
}
.browse-tree[data-view="tree"] .browse-item:not(.browse-item--dir) .browse-tree-namecell {
  grid-template-columns: 28px minmax(0, 1fr);
}
.browse-tree[data-view="tree"] .browse-item:not(.browse-item--dir) .browse-tree-namecell .browse-item-icon-wrap {
  grid-column: 1;
}
.browse-tree[data-view="tree"] .browse-item:not(.browse-item--dir) .browse-tree-namecell .browse-item-main {
  grid-column: 2;
}
.browse-tree[data-view="tree"] .browse-item:not(.browse-item--dir) .browse-item-chevron {
  display: none;
}
.browse-tree[data-view="tree"] .browse-item-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.browse-item-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}
.browse-tree[data-view="tree"] .browse-item--dir .browse-item-icon {
  background: linear-gradient(
    135deg,
    rgba(97, 175, 239, 0.18),
    rgba(198, 120, 221, 0.14)
  );
}
.browse-tree[data-view="tree"] .browse-item-main {
  min-width: 0;
}
.browse-tree[data-view="tree"] .browse-item-name {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
}
.browse-tree[data-view="tree"] .browse-item--dir .browse-item-name {
  color: #f8fafc;
}
.browse-tree[data-view="tree"] .browse-item-meta {
  color: #8290a5;
}
.browse-tree[data-view="tree"] .browse-item-kind,
.browse-tree[data-view="tree"] .browse-item-size,
.browse-tree[data-view="tree"] .browse-item-permissions,
.browse-tree[data-view="tree"] .browse-item-modified,
.browse-tree[data-view="tree"] .browse-item-created,
.browse-tree[data-view="tree"] .browse-item-owner,
.browse-tree[data-view="tree"] .browse-item-git,
.browse-tree[data-view="tree"] .browse-item-col {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #a8b3c7;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.browse-tree[data-view="tree"] .browse-item-permissions,
.browse-tree[data-view="tree"] .browse-item-owner {
  color: #56b6c2;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 10px;
}
.browse-tree[data-view="tree"] .browse-item-size,
.browse-tree[data-view="tree"] .browse-item-modified,
.browse-tree[data-view="tree"] .browse-item-created {
  color: #8ea0b8;
}
.browse-tree[data-view="tree"] .browse-item-actions {
  display: none;
}

/* 2026-05-14AV — .browse-sort-row + .browse-sort-group +
   .browse-selection-actions retired (merged into .browse-toolbar with
   selection inline + sort opened via .browse-popup-menu). The
   data-has-selection gate moved to .browse-toolbar (see .browse-toolbar
   block above). .browse-sort-btn rule retained because the buttons now
   render inside .browse-popup-menu. .browse-bulk-btn rule compacted to
   icon-style (28x28 single-glyph) because they render inline on the
   toolbar via .browse-selection-inline. */
.browse-sort-btn {
  min-height: 28px;
  padding: 5px 9px;
  background: transparent;
  border: 1px solid #3d3d3d;
  border-radius: 5px;
  color: #7f848e;
  font-size: 12px;
  cursor: pointer;
}
.browse-sort-btn:hover,
.browse-sort-btn.active {
  color: #61afef;
  border-color: #61afef;
  background: #253545;
}
.browse-bulk-btn {
  min-height: 26px;
  min-width: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #3d3d3d;
  border-radius: 5px;
  color: #7f848e;
  font-size: 13px;
  cursor: pointer;
}
.browse-bulk-btn:hover:not(:disabled) {
  color: #61afef;
  border-color: #61afef;
  background: #253545;
}
.browse-bulk-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.browse-selected-count {
  color: #7f848e;
  font-size: 11px;
  white-space: nowrap;
  min-width: 18px;
  text-align: right;
}
.browse-explorer-shell {
  display: grid;
  grid-template-columns: var(--browse-cols, minmax(35%, 58%) 8px minmax(300px, 42%));
  gap: 0;
  align-items: stretch;
}
/* Browse split shell: tree | resizer | preview-or-right-pane.
   The single --browse-cols custom property holds the whole template so JS
   can write one value when the user drags. Normal mode now shares the same
   right-preview model as fullscreen so large foldable screens keep the
   preview beside the file list. */
[data-tray-fullscreen="true"] .browse-explorer-shell {
  grid-template-columns: var(--browse-cols, minmax(35%, 58%) 8px minmax(320px, 42%));
}

/* Slice 6 — right pane is hidden by default. It only appears in fullscreen
   when data-browse-mode="dual". In dual mode the preview slot is replaced
   by the right pane; preview becomes a click-to-overlay. */
.browse-right-pane {
  display: none;
  flex-direction: column;
  min-height: 0;
  background: #1a1a1a;
  border-left: 1px solid #2a2a2a;
}
[data-tray-fullscreen="true"][data-browse-mode="dual"] .browse-right-pane {
  display: flex;
}
[data-tray-fullscreen="true"][data-browse-mode="dual"] .browse-preview {
  display: none;
}
/* 2026-05-14W — extend the independent-pane-scroll fix to ALL
   fullscreen modes (single + preview, single + tree-view, dual, and
   single + show-preview=false). Pre-2026-05-14W the rule was scoped
   to dual only, so the screenshot at 93220af9 showed file list +
   preview yoked together in single fullscreen because both panes had
   `max-height: none` from line-188 / line-1567 and the tray itself
   was the scroll container.
   The viewport-relative shell height (100dvh - 260px, with 100vh
   fallback) gives each grid cell a bounded height; `max-height: 100%
   !important` + `overflow-y: auto` on every visible pane defeats
   those line-188 / line-1567 `max-height: none !important` rules
   and gives each pane its own scroll region. */
[data-tray-fullscreen="true"] .browse-explorer-shell {
  /* 2026-05-14AF — Responsive chrome. The 260px magic number is a
     default fallback; browse.ts's `measureBrowseChrome` runs on
     fullscreen-open and on window resize and writes the actual chrome
     height (shell top chrome + everything below .tray-content, such
     as tray-tabs + safe-area) to `--browse-chrome`. CSS calc uses the
     var with 260px as the initial-paint fallback so the layout
     doesn't flash empty before JS measures. */
  height: calc(100dvh - var(--browse-chrome, 260px));
  min-height: 0;
}
@supports not (height: 100dvh) {
  [data-tray-fullscreen="true"] .browse-explorer-shell {
    height: calc(100vh - var(--browse-chrome, 260px));
  }
}
[data-tray-fullscreen="true"] .browse-tree,
[data-tray-fullscreen="true"] .browse-preview {
  max-height: 100% !important;
  min-height: 0;
  overflow-y: auto;
}
[data-tray-fullscreen="true"][data-browse-mode="dual"] .browse-right-pane {
  max-height: 100%;
  min-height: 0;
  overflow: hidden; /* inner .browse-right-tree scrolls; this clips overflow */
}

/* 2026-05-16F — show-preview=false now applies in normal mode too. The
   Preview toolbar button is the layout selector for Browse everywhere,
   not just fullscreen. */
[data-show-preview="false"]:not([data-browse-mode="dual"]) .tray-panel[data-panel="browse"] .browse-explorer-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}
[data-show-preview="false"]:not([data-browse-mode="dual"]) .tray-panel[data-panel="browse"] .browse-preview,
[data-show-preview="false"]:not([data-browse-mode="dual"]) .tray-panel[data-panel="browse"] .browse-pane-resizer {
  display: none !important;
}

/* Preview toggle button: same visual baseline as the other browse-view-btn
   buttons, with a green-tinted "pressed" state to match the Dual button. */
.browse-preview-toggle-btn[aria-pressed="true"] {
  background: #2d4a6d;
  border-color: #61afef;
  color: #ffffff;
}
/* 2026-05-14BB.1 — Slice BB.1: .browse-right-header + .browse-right-actions
   retired. Right pane now uses the same .browse-toolbar as the left pane
   (see #browse-right-toolbar). The previous two-row layout (gradient
   header + grey-bg actions strip) collapsed into one icon-only row. */
/* 2026-05-14BB.1 — make .browse-right-node compact inside the toolbar
   so it doesn't dominate the row. */
#browse-right-toolbar .browse-right-node {
  height: 26px;
  max-width: 110px;
  font-size: 11px;
}
.browse-right-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}
.browse-right-status {
  padding: 4px 10px;
  color: #7f848e;
  font-size: 11px;
  background: #1f1f1f;
  border-top: 1px solid #2a2a2a;
  min-height: 18px;
}
/* Dual-mode toggle button visual when active. */
.browse-mode-dual-btn[aria-pressed="true"] {
  background: #2d4a6d;
  border-color: #61afef;
  color: #ffffff;
}
@media (max-width: 600px) {
  /* 2026-05-14Z — mobile dual-mode override. The 14W broaden at line 1167
     gives `.browse-tree { max-height: 100% !important }` in every FS mode,
     which beat this un-!important 50vh cap (audit of a2695971 — caught a
     mobile-dual regression: tree filled the whole shell, pushed the right
     pane offscreen). Two changes to restore the original intent:
       1. Shell height: auto so the (stacked) panes can both layout
          naturally instead of being trapped inside the 100dvh-260px box.
       2. Tree max-height 50vh !important so it actually wins over 14W's
          !important. */
  [data-tray-fullscreen="true"][data-browse-mode="dual"] .browse-explorer-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    height: auto;
  }
  [data-tray-fullscreen="true"][data-browse-mode="dual"] .browse-pane-resizer {
    display: none;
  }
  [data-tray-fullscreen="true"][data-browse-mode="dual"] .browse-tree {
    /* In dual mode on mobile, prioritize the left tree (selection source).
       !important to defeat the 14W broaden at line 1167-1171. */
    max-height: 50vh !important;
  }
}
/* Resizer: visible whenever the split shell is two-column, including
   normal Browse mode on larger foldable/tablet/desktop viewports. */
.browse-pane-resizer {
  display: block;
  background:
    linear-gradient(180deg, rgba(97, 175, 239, 0.12), rgba(198, 120, 221, 0.1)),
    rgba(15, 18, 26, 0.78);
  border-left: 1px solid rgba(97, 175, 239, 0.14);
  border-right: 1px solid rgba(198, 120, 221, 0.12);
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: background 150ms ease, box-shadow 150ms ease;
  position: relative;
  min-width: 8px;
}
.browse-pane-resizer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 34px;
  background: linear-gradient(180deg, #61afef, #c678dd);
  border-radius: 999px;
  opacity: 0.62;
  transition: opacity 150ms ease;
}
.browse-pane-resizer:hover,
.browse-pane-resizer:focus,
.browse-pane-resizer[data-dragging="true"] {
  background:
    linear-gradient(180deg, rgba(97, 175, 239, 0.26), rgba(198, 120, 221, 0.2)),
    rgba(22, 26, 36, 0.96);
  outline: none;
  box-shadow: 0 0 0 1px rgba(97, 175, 239, 0.42), 0 0 22px rgba(97, 175, 239, 0.12);
}
.browse-pane-resizer:hover::before,
.browse-pane-resizer:focus::before,
.browse-pane-resizer[data-dragging="true"]::before {
  opacity: 1;
}
@media (max-width: 600px) {
  .browse-explorer-shell,
  [data-tray-fullscreen="true"] .browse-explorer-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .browse-pane-resizer,
  [data-tray-fullscreen="true"] .browse-pane-resizer {
    display: none;
  }
}

/* 2026-05-14AA — Slice 6.4 grid view multi-column fix. Reported on
   Galaxy Z Fold 7. Bug window: 601-633px in single fullscreen with
   grid/gallery view. At that range the @media (max-width: 600px)
   collapse doesn't fire, so the 3-column shell template
   (`var(--browse-cols, minmax(0,1fr) 6px minmax(280px,36%))` at line
   1124) reserves >280px for the preview pane, leaving the file-list
   column at < 348px — which is less than two 170px grid items + 8px
   gap, so `repeat(auto-fill, minmax(170px, 1fr))` drops to 1 column.
   Math: file-list = viewport - 6 (resizer) - max(280, 0.36*viewport).
   At 601px → 315px → 1 col. At 634px → 348px → 2 cols.
   Fix: collapse the shell to 1-col in single-mode fullscreen below
   720px (generous buffer above the 634 threshold so the preview pane
   doesn't get awkwardly cramped even with two grid columns). Scoped
   with :not([data-browse-mode="dual"]) because dual mode has its own
   @media (max-width: 600px) override at line 1244 — leaving the
   resizer visible at 600-720px in dual mode is intentional (the
   600px @media there is the dual breakpoint). */
@media (max-width: 720px) {
  .input-context-component:not([data-browse-mode="dual"]) .browse-explorer-shell,
  [data-tray-fullscreen="true"]:not([data-browse-mode="dual"]) .browse-explorer-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .input-context-component:not([data-browse-mode="dual"]) .browse-pane-resizer,
  [data-tray-fullscreen="true"]:not([data-browse-mode="dual"]) .browse-pane-resizer {
    display: none;
  }
  .gvapi-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Browse Tree - directory listing */
.browse-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(40vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
[data-tray-fullscreen="true"] .browse-tree {
  min-height: 0;
}
.browse-tree[data-view="grid"],
.browse-tree[data-view="gallery"] {
  display: grid;
  align-content: start;
}
.browse-tree[data-view="grid"] {
  /* Finder/Desktop-style icon view: symbol first, centered name underneath. */
  grid-template-columns: repeat(auto-fill, minmax(98px, 116px));
  justify-content: start;
  gap: 22px 18px;
  padding: 18px;
  background: linear-gradient(180deg, #202226 0%, #1c1d21 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.browse-tree[data-view="gallery"] {
  grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
  justify-content: start;
  gap: 14px;
}
.browse-tree::-webkit-scrollbar {
  width: 6px;
}
.browse-tree::-webkit-scrollbar-track {
  background: transparent;
}
.browse-tree::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

/* 2026-05-16F — shared Browse glass language. Tree set the new standard;
   list, icon, and gallery now use the same deep surface, glow accents,
   and quiet chrome instead of older flat grey cards. */
.browse-tree[data-view="list"],
.browse-tree[data-view="grid"],
.browse-tree[data-view="gallery"] {
  padding: 10px;
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(97, 175, 239, 0.16),
      transparent 34%
    ),
    radial-gradient(
    circle at 92% 12%,
    rgba(198, 120, 221, 0.1),
    transparent 28%
  ),
    linear-gradient(
    180deg,
    rgba(26, 30, 39, 0.96) 0%,
    rgba(18, 20, 27, 0.96) 100%
  );
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 30px rgba(0, 0, 0, 0.22);
}
.browse-tree[data-view="list"] {
  gap: 6px;
  overflow-x: auto;
}
.browse-tree:not([data-view="tree"]) .browse-item-kind,
.browse-tree:not([data-view="tree"]) .browse-item-permissions,
.browse-tree:not([data-view="tree"]) .browse-item-modified,
.browse-tree:not([data-view="tree"]) .browse-item-created,
.browse-tree:not([data-view="tree"]) .browse-item-owner,
.browse-tree:not([data-view="tree"]) .browse-item-git {
  display: none;
}
.browse-tree[data-view="list"] .browse-tree-namecell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.browse-tree[data-view="list"] .browse-item {
  display: grid;
  grid-template-columns: var(--browse-list-cols, 220px 72px 88px 132px 72px 112px 112px 44px);
  align-items: center;
  gap: 10px;
}
.browse-tree[data-view="list"] .browse-item-col,
.browse-tree[data-view="list"] .browse-item-size,
.browse-tree[data-view="list"] .browse-item-modified,
.browse-tree[data-view="list"] .browse-item-created,
.browse-tree[data-view="list"] .browse-item-owner,
.browse-tree[data-view="list"] .browse-item-git,
.browse-tree[data-view="list"] .browse-item-kind,
.browse-tree[data-view="list"] .browse-item-permissions,
.browse-tree[data-view="list"] .browse-item-actions {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #8ea0b8;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.browse-tree[data-view="list"] .browse-item-owner,
.browse-tree[data-view="list"] .browse-item-permissions {
  color: #56b6c2;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 10px;
}
.browse-git-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  overflow: hidden;
}
button.browse-git-chip {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}
button.browse-git-chip:hover,
button.browse-git-chip:focus {
  border-color: #61afef;
  color: #ffffff;
  outline: none;
}
button.browse-git-chip[aria-expanded="true"] {
  border-color: #61afef;
  box-shadow: 0 0 0 1px rgba(97, 175, 239, 0.28);
}
.browse-git-chip--modified,
.browse-git-chip--changed {
  border-color: rgba(229, 192, 123, 0.35);
  background: rgba(229, 192, 123, 0.12);
  color: #e5c07b;
}
.browse-git-chip--untracked {
  border-color: rgba(97, 175, 239, 0.36);
  background: rgba(97, 175, 239, 0.13);
  color: #61afef;
}
.browse-git-chip--added,
.browse-git-chip--repo,
.browse-git-chip--clean {
  border-color: rgba(152, 195, 121, 0.36);
  background: rgba(152, 195, 121, 0.12);
  color: #98c379;
}
.browse-git-chip--parent {
  border-color: rgba(86, 182, 194, 0.36);
  background: rgba(86, 182, 194, 0.13);
  color: #56b6c2;
}
.browse-git-chip--deleted {
  border-color: rgba(224, 108, 117, 0.36);
  background: rgba(224, 108, 117, 0.12);
  color: #e06c75;
}
.browse-git-chip--empty {
  color: #64748b;
}
.browse-git-icon-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 16px;
  padding: 0 3px;
  border: 1px solid rgba(15, 18, 26, 0.86);
  border-radius: 999px;
  background: #1f2937;
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}
.browse-git-icon-badge svg {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  opacity: 0.22;
}
.browse-git-icon-badge span {
  position: relative;
  z-index: 1;
}
.browse-git-icon-badge--modified,
.browse-git-icon-badge--changed {
  background: #3d321b;
  color: #e5c07b;
}
.browse-git-icon-badge--untracked {
  background: #183343;
  color: #61afef;
}
.browse-git-icon-badge--added,
.browse-git-icon-badge--repo {
  background: #20351f;
  color: #98c379;
}
.browse-git-icon-badge--parent {
  background: #173640;
  color: #56b6c2;
}
.browse-git-icon-badge--deleted {
  background: #3f2025;
  color: #e06c75;
}
.browse-git-icon-badge--renamed {
  background: #302544;
  color: #c678dd;
}
.browse-columns-menu {
  min-width: 230px;
  gap: 4px;
}
.browse-columns-menu-title {
  padding: 4px 8px 6px;
  color: #8ea0b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.browse-columns-menu-hint {
  padding: 0 8px 6px;
  color: #64748b;
  font-size: 10px;
}
.browse-column-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.browse-column-option[draggable="true"] {
  cursor: grab;
}
.browse-column-option[data-dragging="true"] {
  opacity: 0.56;
}
.browse-column-option[data-drop-target="true"] {
  border-radius: 8px;
  background: rgba(97, 175, 239, 0.11);
  box-shadow: inset 0 0 0 1px rgba(97, 175, 239, 0.28);
}
.browse-column-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 26px;
  color: #64748b;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: -1px;
  user-select: none;
}
.browse-column-check,
.browse-column-order button,
.browse-column-reset {
  min-height: 26px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  background: rgba(15, 18, 26, 0.72);
  color: #d6deeb;
  font-size: 11px;
  cursor: pointer;
}
.browse-column-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  text-align: left;
}
.browse-column-check span {
  width: 12px;
  color: #98c379;
}
.browse-column-order {
  display: flex;
  gap: 4px;
}
.browse-column-order button {
  width: 26px;
  padding: 0;
}
.browse-column-reset {
  margin-top: 4px;
  padding: 5px 8px;
  color: #e5c07b;
}
.browse-tree[data-view="list"] .browse-item,
.browse-tree[data-view="grid"] .browse-item--icon,
.browse-tree[data-view="gallery"] .browse-item {
  position: relative;
  background:
    linear-gradient(90deg, rgba(97, 175, 239, 0.08), transparent 42%),
    rgba(28, 32, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 7px 18px rgba(0, 0, 0, 0.14);
}
.browse-tree[data-view="list"] .browse-item::before,
.browse-tree[data-view="grid"] .browse-item--icon::before,
.browse-tree[data-view="gallery"] .browse-item::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #61afef, #c678dd);
  opacity: 0.46;
}
.browse-tree[data-view="list"] .browse-item:hover,
.browse-tree[data-view="grid"] .browse-item--icon:hover,
.browse-tree[data-view="gallery"] .browse-item:hover {
  background:
    linear-gradient(
      90deg,
      rgba(97, 175, 239, 0.18),
      rgba(198, 120, 221, 0.08) 52%,
      transparent
    ),
    rgba(36, 43, 58, 0.9);
  border-color: rgba(97, 175, 239, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 28px rgba(0, 0, 0, 0.24);
}
.browse-tree[data-view="list"] .browse-item--selected,
.browse-tree[data-view="grid"] .browse-item--icon.browse-item--selected,
.browse-tree[data-view="gallery"] .browse-item--selected {
  background:
    linear-gradient(
      90deg,
      rgba(97, 175, 239, 0.2),
      rgba(198, 120, 221, 0.13) 58%,
      rgba(152, 195, 121, 0.06)
    ),
    rgba(34, 43, 60, 0.96);
  border-color: rgba(97, 175, 239, 0.56);
}

/* Browse Item - file or directory row */
.browse-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #2a2a2a;
  border: 1px solid #353535;
  border-radius: 6px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}
/* Subtle zebra stripe in list view only — keeps grid/gallery flat.
   Negation pseudoclasses make the stripe bow out whenever the row carries
   a state (hover / focused / selected), so the lower-specificity state
   rules below win on even rows just like they do on odd rows. */
.browse-tree[data-view="list"]
  .browse-item:nth-child(even):not(:hover):not(.browse-item--selected):not(.browse-item--focused) {
  background: #262626;
}
.browse-tree[data-view="grid"] .browse-item,
.browse-tree[data-view="gallery"] .browse-item {
  min-height: 112px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.browse-tree[data-view="grid"] .browse-item--icon {
  position: relative;
  min-height: 126px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 10px 8px 12px;
  border-radius: 12px;
  text-align: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.browse-tree[data-view="grid"] .browse-item--icon::before {
  display: none;
}
.browse-tree[data-view="grid"] .browse-item--icon[draggable="true"] {
  cursor: grab;
}
.browse-tree[data-view="grid"] .browse-item--icon[draggable="true"]:active {
  cursor: grabbing;
}
.browse-item:hover {
  background: linear-gradient(180deg, #353a47 0%, #2d3140 100%);
  border-color: #61afef;
  box-shadow: 0 1px 0 rgba(97, 175, 239, 0.18) inset, 0 4px 10px rgba(0, 0, 0, 0.18);
}
.browse-item:active {
  transform: scale(0.995);
}
.browse-item.selected {
  background: #2d4a6d;
  border-color: #61afef;
}
.browse-item--focused {
  outline: 2px solid #61afef;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(97, 175, 239, 0.35);
}
.browse-item--selected {
  background: linear-gradient(180deg, #2a4736 0%, #233d2f 100%);
  border-color: #98c379;
  box-shadow: 0 0 0 1px rgba(152, 195, 121, 0.18) inset;
}
.browse-item--selected .browse-item-name {
  color: #98c379;
}
.browse-item--dir {
  background: #2d3530;
  border-color: #2f3a32;
}
.browse-tree[data-view="list"]
  .browse-item--dir:nth-child(even):not(:hover):not(.browse-item--selected):not(.browse-item--focused) {
  background: #283028;
}
.browse-item--dir:hover {
  background: linear-gradient(180deg, #3b4d3b 0%, #324132 100%);
  border-color: #98c379;
}
/* 2026-05-14AG — Slice 6.3b drag-drop. When a file row is dragged
   over a dir row, the dir gets `data-drop-target="true"` from the
   dragover handler in browse.ts. Strong green outline + tinted bg so
   the drop target is unmistakable. Cleared on dragleave / drop /
   dragend. */
.browse-item--dir[data-drop-target="true"] {
  background: linear-gradient(180deg, #4a6b4a 0%, #3d5a3d 100%);
  border-color: #98c379;
  outline: 2px solid #98c379;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(152, 195, 121, 0.4) inset, 0 4px 12px rgba(152, 195, 121, 0.25);
}
/* Dragged-row hint: while a file is being dragged, slightly dim it so
   the user has a clear "this is the thing being moved" cue. Browsers
   add their own ghost preview but the original row stays visible. */
.browse-item[draggable="true"]:active {
  opacity: 0.85;
}
.browse-item-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.browse-tree[data-view="grid"] .browse-item-icon,
.browse-tree[data-view="gallery"] .browse-item-icon {
  width: auto;
  font-size: 26px;
}
.browse-tree[data-view="grid"] .browse-item--icon .browse-item-icon {
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(97, 175, 239, 0.16),
    rgba(198, 120, 221, 0.12)
  );
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));
  overflow: hidden;
}
.browse-tree[data-view="grid"] .browse-item--icon .browse-tree-namecell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-width: 0;
}
.browse-tree[data-view="grid"] .browse-item--icon .browse-item-main {
  align-items: center;
  width: 100%;
  min-width: 0;
}
.browse-tree[data-view="grid"] .browse-item--icon .browse-item-name {
  max-width: 100%;
  display: -webkit-box;
  white-space: normal;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  color: #f8fafc;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  overflow-wrap: anywhere;
}
.browse-tree[data-view="grid"] .browse-item--icon .browse-item-meta,
.browse-tree[data-view="grid"] .browse-item--icon .browse-item-size {
  display: none;
}
.browse-tree[data-view="grid"] .browse-item--icon .browse-item-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  transition: opacity 140ms ease;
}
.browse-tree[data-view="grid"] .browse-item--icon:hover .browse-item-actions,
.browse-tree[data-view="grid"] .browse-item--icon:focus-within .browse-item-actions,
.browse-tree[data-view="grid"] .browse-item--icon.browse-item--selected .browse-item-actions {
  opacity: 1;
}
.browse-tree[data-view="grid"] .browse-item--icon .browse-item-open {
  display: none;
}
/* 2026-05-13T (revised 2026-05-14U) — gallery view: image files render
   as large thumbnails instead of a generic document icon. The <img>
   sits inside .browse-item-icon. Audit-fix 2026-05-14U: the icon
   container now flexes to fill the cell (`flex: 1 1 120px` +
   `align-self: stretch`) instead of locking at a fixed 140px. The
   parent .browse-item gains `min-height: 240px` so the thumb + select
   chip + name + meta + kebab all fit without clipping (pre-fix only
   the top half of each thumb was visible in non-fullscreen because
   the row was 112px tall but the thumb was 140px). checkered
   transparent background helps PNGs with alpha read at a glance.
   Hover lightens the border. */
.browse-tree[data-view="gallery"] .browse-item {
  min-height: 236px;
  display: grid;
  grid-template-rows: 148px auto auto;
  gap: 9px;
  padding: 12px;
  border-radius: 12px;
}
.browse-tree[data-view="gallery"] .browse-item::before {
  display: none;
}
/* 2026-05-14AD — Gallery folder cells: directories rendered a tiny 26px
   folder emoji floating inside the 240px-tall cell sized for image
   thumbnails. The cell shape was wrong and the emoji looked lost. Two
   changes scoped to dir-items in gallery view: (a) shorter cells
   (160px instead of inherited 240px) so dirs cluster tighter, and
   (b) larger folder icon (font-size 64px, fills the icon flex area)
   so the dir is glanceable next to image thumbs. The cell remains
   the same width as image cells in the grid so the auto-fill column
   layout doesn't shift between file and folder rows. */
.browse-tree[data-view="gallery"] .browse-item--dir {
  min-height: 160px;
}
.browse-tree[data-view="gallery"] .browse-item--dir .browse-item-icon {
  font-size: 64px;
  flex: 1 1 80px;
  min-height: 80px;
}
.browse-tree[data-view="gallery"] .browse-item-icon {
  width: 100%;
  flex: none;
  height: 148px;
  min-height: 148px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(45deg, #1f1f1f 25%, transparent 25%),
    linear-gradient(-45deg, #1f1f1f 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1f1f1f 75%),
    linear-gradient(-45deg, transparent 75%, #1f1f1f 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.browse-image-thumb {
  display: block;
  background-color: rgb(60, 60, 60);
}
.browse-icon-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.browse-gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 2026-05-14AR — render with a 1x1 transparent GIF placeholder
     (set in browse.ts) so the cookie URL never hits the network.
     The background-color fills the cell during the brief window
     before the upgrade pass sets src to a signed URL.
     2026-05-14AS — bumped from rgb(45,45,45) (which matched the
     section bg exactly and made the placeholder invisible) to
     rgb(60,60,60) so the cell has visual distinction "this cell
     exists and is loading." Still subtle within the dark theme. */
  background-color: rgb(60, 60, 60);
  min-width: 32px;
  min-height: 32px;
}
.browse-tree[data-view="gallery"] .browse-item:hover .browse-item-icon {
  outline: 1px solid #61afef;
}
.browse-tree[data-view="gallery"] .browse-item-main {
  width: 100%;
  gap: 3px;
}
.browse-tree[data-view="gallery"] .browse-item-name {
  white-space: normal;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #f8fafc;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.browse-tree[data-view="gallery"] .browse-item-meta,
.browse-tree[data-view="gallery"] .browse-item-size {
  color: #a8b3c7;
}
.browse-tree[data-view="gallery"] .browse-item-actions {
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 140ms ease;
}
.browse-tree[data-view="gallery"] .browse-item:hover .browse-item-actions,
.browse-tree[data-view="gallery"] .browse-item:focus-within .browse-item-actions,
.browse-tree[data-view="gallery"] .browse-item--selected .browse-item-actions {
  opacity: 1;
}
/* 2026-05-14AU — Slice AU: per-row selection button removed.
   Selection is now Files/Finder-style: plain click replaces, Ctrl/Cmd
   toggles, Shift extends from anchor, blank-area click clears,
   double-click opens. Logic lives in browse/selection.ts; rows no
   longer emit a select button or carry that class. */
.browse-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.browse-item-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 13px;
  color: #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browse-item--dir .browse-item-name {
  color: #98c379;
  font-weight: 500;
}
.browse-item-meta {
  font-size: 11px;
  color: #7f848e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browse-item-size {
  flex: 0 0 78px;
  color: #7f848e;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
.browse-item-actions {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.browse-item-action {
  flex-shrink: 0;
  min-height: 26px;
  padding: 2px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #444;
  border-radius: 4px;
  color: #7f848e;
  font-size: 11px;
  cursor: pointer;
  transition: all 150ms ease;
  opacity: 1;
}
.browse-item-action:hover {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}
.browse-item-menu {
  min-width: 32px;
  min-height: 30px;
  padding: 2px 8px;
  font-size: 18px;
  line-height: 1;
  color: #c0c4cc;
  border-color: #3d3d3d;
  background: linear-gradient(180deg, #2d2d2d 0%, #262626 100%);
}
.browse-item-menu[aria-expanded="true"] {
  background: linear-gradient(180deg, #353d4d 0%, #2c344a 100%);
  border-color: #61afef;
  color: #ffffff;
}
.browse-item-menu:hover {
  background: linear-gradient(180deg, #3d3d3d 0%, #2f2f2f 100%);
  border-color: #61afef;
  color: #ffffff;
}
.browse-row-menu {
  position: fixed;
  min-width: 184px;
  background: linear-gradient(180deg, #2a2a2a 0%, #232323 100%);
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
  padding: 6px;
  z-index: 10040;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.browse-row-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #e0e0e0;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.browse-row-menu-item:hover,
.browse-row-menu-item:focus {
  background: #2d3a4f;
  border-color: #61afef;
  color: #ffffff;
  outline: none;
}
.browse-row-menu-icon {
  width: 18px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: #98c379;
}
.browse-row-menu-label {
  flex: 1;
}
.browse-preview {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 140px;
  max-height: calc(40vh - 100px);
  overflow: auto;
  background: linear-gradient(180deg, #242832 0%, #202020 100%);
  border: 1px solid #3a4250;
  border-radius: 10px;
  padding: 10px;
  color: #e0e0e0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}
.gvapi-panel {
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.gvapi-toolbar {
  flex-shrink: 0;
}
.gvapi-toolbar-action {
  flex: 0 0 auto;
}
.gvapi-exit-fullscreen-btn {
  display: none;
  color: #e06c75;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gvapi"] .gvapi-exit-fullscreen-btn {
  display: inline-flex;
}
.gvapi-perspectives {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  flex: 1 1 auto;
}
.gvapi-branch-legend-label {
  align-self: center;
  color: #7f848e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gvapi-branch-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 3px 7px;
  background: #242424;
  border: 1px solid #3d3d3d;
  border-radius: 999px;
  color: #9aa3b3;
  font-size: 11px;
  font-weight: 700;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
.gvapi-branch-chip:hover {
  border-color: rgba(97, 175, 239, 0.5);
  color: #d9e7f7;
}
.gvapi-branch-chip.active {
  background: #20303d;
  border-color: #61afef;
  color: #61afef;
}
.gvapi-perspective {
  min-height: 28px;
  padding: 4px 8px;
  background: #242424;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  color: #7f848e;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.gvapi-perspective:hover,
.gvapi-perspective.active {
  background: #20303d;
  border-color: #61afef;
  color: #61afef;
}
.gvapi-status {
  flex-shrink: 0;
}
.gvapi-status[data-tone="ok"] {
  color: #98c379;
}
.gvapi-status[data-tone="error"] {
  color: #e06c75;
}
.gvapi-status[data-tone="loading"] {
  color: #e5c07b;
}
.gvapi-panel {
  min-height: 0;
}
.gvapi-shell {
  grid-template-columns: minmax(260px, 42%) minmax(320px, 1fr);
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.gvapi-tree,
.gvapi-preview {
  max-height: none;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gvapi-tree {
  padding: 6px;
  background: linear-gradient(180deg, #202226 0%, #1c1d21 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.gvapi-preview {
  width: auto;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gvapi"] .gvapi-panel {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gvapi"] .gvapi-shell {
  flex: 1 1 auto;
  grid-template-columns: minmax(360px, 42vw) minmax(0, 1fr);
  height: auto;
  min-height: 0;
  width: 100%;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="gvapi"] .gvapi-preview {
  min-width: 0;
  width: auto;
}
.gvapi-tree.browse-tree[data-view="tree"] .browse-tree-guide,
.gvapi-tree.browse-tree[data-view="tree"] .browse-tree-branch,
.gvapi-tree.browse-tree[data-view="tree"] .browse-tree-depth-rail {
  opacity: 0.65;
}
.gvapi-active-parent {
  background: rgba(97, 175, 239, 0.065);
  border-color: rgba(97, 175, 239, 0.18);
}
.gvapi-active-parent .browse-item-name {
  color: #d9e7f7;
}
.gvapi-category-row .browse-item-icon {
  color: #e5c07b;
}
.gvapi-api-row .browse-item-icon {
  background: rgba(240, 193, 75, 0.12);
}
.gvapi-dimension-row .browse-item-icon {
  background: rgba(97, 175, 239, 0.12);
  color: #61afef;
}
.gvapi-dimension-row .browse-item-name {
  color: #d9e7f7;
}
.gvapi-detail-row {
  background: rgba(255, 255, 255, 0.035);
}
.gvapi-detail-row .browse-item-icon {
  background: rgba(152, 195, 121, 0.1);
  color: #98c379;
}
.gvapi-detail-row .browse-item-name {
  color: #cfe8d0;
}
.gvapi-preview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gvapi-preview-kicker {
  color: #61afef;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
}
.gvapi-preview-title {
  color: #fff;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
}
.gvapi-preview-desc,
.gvapi-copy {
  color: #b8beca;
  font-size: 12px;
  line-height: 1.55;
}
.gvapi-action-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px;
  background: rgba(18, 22, 28, 0.78);
  border: 1px solid rgba(97, 175, 239, 0.2);
  border-radius: 8px;
}
.gvapi-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.gvapi-action-btn {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(127, 132, 142, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: #d9e7f7;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.gvapi-action-btn:hover:not(:disabled) {
  border-color: rgba(97, 175, 239, 0.6);
  background: rgba(97, 175, 239, 0.13);
}
.gvapi-action-btn--primary {
  border-color: rgba(152, 195, 121, 0.58);
  color: #98c379;
  background: rgba(152, 195, 121, 0.1);
}
.gvapi-action-btn--danger {
  border-color: rgba(224, 108, 117, 0.52);
  color: #e06c75;
}
.gvapi-action-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  color: #7f848e;
  background: rgba(255, 255, 255, 0.025);
}
.gvapi-action-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #7f848e;
  font-size: 11px;
}
#gvapi-action-status {
  color: #7f848e;
}
#gvapi-action-status[data-tone="ok"] {
  color: #98c379;
}
#gvapi-action-status[data-tone="error"] {
  color: #e06c75;
}
#gvapi-action-status[data-tone="loading"] {
  color: #e5c07b;
}
.gvapi-action-reasons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #e5c07b;
  font-size: 11px;
  line-height: 1.45;
}
.gvapi-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.gvapi-doc-grid > div,
.gvapi-render-note,
.gvapi-config-note,
.gvapi-state-meta,
.gvapi-config-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.gvapi-doc-grid strong {
  color: #7f848e;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gvapi-doc-grid span {
  color: #e0e0e0;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.gvapi-state-toolbar,
.gvapi-config-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.gvapi-state-meta {
  color: #b8beca;
  font-size: 11px;
  line-height: 1.45;
}
.gvapi-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.gvapi-config-card {
  border-color: rgba(152, 195, 121, 0.22);
}
.gvapi-config-card strong {
  color: #98c379;
  font-size: 12px;
}
.gvapi-config-card span {
  color: #b8beca;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.gvapi-mcp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gvapi-mcp-server,
.gvapi-mcp-tool {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(97, 175, 239, 0.08);
  border: 1px solid rgba(97, 175, 239, 0.16);
  border-radius: 8px;
}
.gvapi-mcp-server {
  justify-content: space-between;
}
.gvapi-mcp-server strong,
.gvapi-mcp-tool-name {
  color: #61afef;
  font-size: 12px;
  font-weight: 800;
}
.gvapi-mcp-server span,
.gvapi-mcp-tool-meta {
  color: #7f848e;
  font-size: 11px;
}
.gvapi-mcp-tool {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  background: rgba(255, 255, 255, 0.04);
}
.gvapi-mcp-tool-desc {
  color: #d7dce5;
  font-size: 12px;
  line-height: 1.4;
}
.gvapi-mcp-schema {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gvapi-mcp-schema-row,
.gvapi-mcp-result,
.gvapi-config-result,
.gvapi-doc-result,
.gvapi-state-result,
.gvapi-history-result,
.gvapi-endpoint-result,
.gvapi-example-result,
.gvapi-render-result,
.gvapi-manifest-result,
.gvapi-ref-result {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(80px, 0.45fr) minmax(180px, 1.4fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  background: rgba(97, 175, 239, 0.07);
  border: 1px solid rgba(97, 175, 239, 0.16);
  border-radius: 8px;
}
.gvapi-mcp-schema-name,
.gvapi-mcp-result strong,
.gvapi-config-result strong,
.gvapi-doc-result strong,
.gvapi-state-result strong,
.gvapi-history-result strong,
.gvapi-endpoint-result strong,
.gvapi-example-result strong,
.gvapi-render-result strong,
.gvapi-manifest-result strong,
.gvapi-ref-result strong {
  color: #61afef;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.gvapi-mcp-schema-name em {
  color: #e5c07b;
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
}
.gvapi-mcp-schema-type {
  color: #98c379;
  font-size: 11px;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
}
.gvapi-mcp-schema-desc,
.gvapi-mcp-result span,
.gvapi-config-result span,
.gvapi-doc-result span,
.gvapi-state-result span,
.gvapi-history-result span,
.gvapi-endpoint-result span,
.gvapi-example-result span,
.gvapi-render-result span,
.gvapi-manifest-result span,
.gvapi-ref-result span {
  color: #b8beca;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.gvapi-mcp-result,
.gvapi-config-result,
.gvapi-doc-result,
.gvapi-state-result,
.gvapi-history-result,
.gvapi-endpoint-result,
.gvapi-example-result,
.gvapi-render-result,
.gvapi-manifest-result,
.gvapi-ref-result {
  grid-template-columns: minmax(120px, 0.4fr) minmax(220px, 1fr);
  background: rgba(152, 195, 121, 0.08);
  border-color: rgba(152, 195, 121, 0.2);
}
.gvapi-mcp-result[data-gvapi-mcp-result-status="idle"],
.gvapi-config-result[data-gvapi-config-result-status="idle"],
.gvapi-doc-result[data-gvapi-doc-result-status="idle"],
.gvapi-state-result[data-gvapi-state-result-status="idle"],
.gvapi-history-result[data-gvapi-history-result-status="idle"],
.gvapi-endpoint-result[data-gvapi-endpoint-result-status="idle"],
.gvapi-example-result[data-gvapi-example-result-status="idle"],
.gvapi-render-result[data-gvapi-render-result-status="idle"],
.gvapi-manifest-result[data-gvapi-manifest-result-status="idle"],
.gvapi-ref-result[data-gvapi-ref-result-status="idle"] {
  background: rgba(127, 132, 142, 0.08);
  border-color: rgba(127, 132, 142, 0.18);
}
.gvapi-code {
  margin: 0;
  padding: 10px;
  background: #141414;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  color: #e0e0e0;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  overflow: auto;
}
.gvapi-primary-action {
  align-self: flex-start;
  min-height: 32px;
  padding: 6px 12px;
  background: rgba(152, 195, 121, 0.12);
  border: 1px solid rgba(152, 195, 121, 0.42);
  border-radius: 999px;
  color: #98c379;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.gvapi-primary-action:hover {
  border-color: rgba(152, 195, 121, 0.76);
}
.gvapi-secondary-action {
  align-self: flex-start;
  min-height: 32px;
  padding: 6px 12px;
  background: rgba(97, 175, 239, 0.12);
  border: 1px solid rgba(97, 175, 239, 0.38);
  border-radius: 999px;
  color: #61afef;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.gvapi-secondary-action:hover {
  border-color: rgba(97, 175, 239, 0.72);
}
[data-tray-fullscreen="true"] .browse-preview {
  max-height: none;
  min-height: 0;
}
.browse-preview-header {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.browse-preview-heading {
  min-width: min(100%, 200px);
  flex: 1;
}
.browse-preview-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  word-break: break-word;
}
.browse-preview-meta,
.browse-preview-path {
  color: #7f848e;
  font-size: 11px;
  margin-bottom: 6px;
  word-break: break-all;
}
.browse-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin-top: 10px;
}
.browse-image-preview-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 12px;
  align-items: stretch;
}
.browse-image-stage {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(45deg, #202020 25%, transparent 25%),
    linear-gradient(-45deg, #202020 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #202020 75%),
    linear-gradient(-45deg, transparent 75%, #202020 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  background-color: #2a2a2a;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  overflow: hidden;
}
.browse-image-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.browse-image-tool-heading {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.browse-image-tool-meta,
.browse-image-tool-status {
  color: #a8b3c7;
  font-size: 11px;
  line-height: 1.4;
}
.browse-image-tool-status[data-tone="ok"] {
  color: #98c379;
}
.browse-image-tool-status[data-tone="error"] {
  color: #e06c75;
}
.browse-image-tool-row,
.browse-image-tool-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.browse-image-tool-row label {
  flex: 1 1 86px;
  color: #7f848e;
  font-size: 11px;
}
.browse-image-tool-row input {
  width: 100%;
  min-height: 30px;
  margin-top: 4px;
  padding: 4px 7px;
  color: #e0e0e0;
  background: #1e1e1e;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
}
.browse-image-url-row {
  flex-wrap: nowrap;
}
.browse-image-url-row input {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
.browse-image-tool-actions button,
.browse-image-url-row button {
  min-height: 30px;
  padding: 0 9px;
  color: #e5e7eb;
  background: rgba(97, 175, 239, 0.14);
  border: 1px solid rgba(97, 175, 239, 0.32);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.browse-preview-actionbar {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
  position: relative;
}
.browse-preview-tool {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.browse-preview-tool:hover,
.browse-preview-tool:focus,
.browse-preview-tool[aria-pressed="true"] {
  color: #ffffff;
  border-color: #61afef;
  background: rgba(97, 175, 239, 0.18);
  outline: none;
}
.browse-preview-tool-icon {
  min-width: 14px;
  text-align: center;
  color: #98c379;
}
.browse-preview-tool-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.browse-preview-ai-wrap {
  flex: 0 0 auto;
}
.browse-preview-ai-menu-btn {
  margin-left: 4px;
  padding: 0 7px;
}
.browse-ai-prompt-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 34;
  width: min(320px, calc(100vw - 48px));
  padding: 9px;
  display: grid;
  gap: 6px;
  color: #e5e7eb;
  background: rgba(24, 27, 35, 0.98);
  border: 1px solid rgba(152, 195, 121, 0.36);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.browse-ai-prompt-menu[hidden] {
  display: none;
}
.browse-ai-prompt-menu-title {
  color: #98c379;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.browse-ai-prompt-menu button {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 7px 8px;
  color: #dcecff;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.browse-ai-prompt-menu button:hover,
.browse-ai-prompt-menu button:focus {
  border-color: rgba(152, 195, 121, 0.72);
  background: rgba(152, 195, 121, 0.14);
  outline: none;
}
.browse-ai-prompt-menu button strong {
  color: #f8fafc;
  font-size: 11px;
}
.browse-ai-prompt-menu button span {
  min-width: 0;
  overflow: hidden;
  color: #b8c0cc;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-ai-prompt-menu-hint {
  color: #7f848e;
  font-size: 11px;
  line-height: 1.35;
}
.browse-git-preview-body {
  min-height: 0;
  padding: 0;
  background: #10141b;
}
.browse-git-panel {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.browse-git-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.browse-git-toolbar button,
.browse-git-commit-actions button,
.browse-git-blame-card-actions button,
.browse-git-compare-form button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(97, 175, 239, 0.32);
  border-radius: 8px;
  background: rgba(97, 175, 239, 0.1);
  color: #dcecff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.browse-git-toolbar button:hover,
.browse-git-toolbar button:focus,
.browse-git-commit-actions button:hover,
.browse-git-commit-actions button:focus,
.browse-git-blame-card-actions button:hover,
.browse-git-blame-card-actions button:focus,
.browse-git-compare-form button:hover,
.browse-git-compare-form button:focus {
  border-color: #61afef;
  background: rgba(97, 175, 239, 0.2);
  color: #ffffff;
  outline: none;
}
.browse-git-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.browse-git-summary-cell {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
}
.browse-git-summary-cell span {
  display: block;
  margin-bottom: 4px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.browse-git-summary-cell strong {
  display: block;
  color: #f9fafb;
  font-size: 18px;
}
.browse-git-history-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}
.browse-git-commit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}
.browse-git-commit-main {
  min-width: 0;
}
.browse-git-commit-main strong,
.browse-git-commit-main span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-git-commit-main strong {
  color: #f9fafb;
  font-size: 13px;
}
.browse-git-commit-main span {
  margin-top: 4px;
  color: #9ca3af;
  font-size: 12px;
}
.browse-git-commit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}
.browse-git-compare-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(97, 175, 239, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(97, 175, 239, 0.1), transparent 58%),
    rgba(255, 255, 255, 0.045);
}
.browse-git-compare-form label {
  display: grid;
  min-width: 0;
  gap: 5px;
}
.browse-git-compare-form label span {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.browse-git-compare-form input {
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  color: #f9fafb;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 12px;
  outline: none;
}
.browse-git-compare-form input:focus {
  border-color: rgba(97, 175, 239, 0.7);
  box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.16);
}
.browse-git-compare-form p {
  grid-column: 1 / -1;
  margin: 0;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.45;
}
.browse-git-diff-title,
.browse-git-diff-file-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}
.browse-git-diff-title strong,
.browse-git-diff-file-head strong {
  min-width: 0;
  overflow: hidden;
  color: #f9fafb;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-git-diff-title span,
.browse-git-diff-file-head span {
  flex: 0 0 auto;
  color: #9ca3af;
  font-size: 12px;
}
.browse-git-diff-stats,
.browse-git-version-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.browse-git-diff-stats span,
.browse-git-version-meta span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #b8c0cc;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.browse-git-diff-stats strong {
  margin-right: 4px;
  color: #f9fafb;
}
.browse-git-stat-add {
  border-color: rgba(34, 197, 94, 0.34) !important;
  background: rgba(34, 197, 94, 0.11) !important;
  color: #bbf7d0 !important;
}
.browse-git-stat-del {
  border-color: rgba(239, 68, 68, 0.34) !important;
  background: rgba(239, 68, 68, 0.11) !important;
  color: #fecaca !important;
}
.browse-git-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 18px;
  border: 1px dashed rgba(152, 195, 121, 0.35);
  border-radius: 14px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(152, 195, 121, 0.18),
      transparent 42%
    ),
    rgba(15, 23, 20, 0.72);
  color: #c8d1dc;
  text-align: center;
}
.browse-git-empty-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(152, 195, 121, 0.5);
  border-radius: 50%;
  background: rgba(152, 195, 121, 0.12);
  color: #98c379;
  font-size: 22px;
  font-weight: 900;
}
.browse-git-empty-state strong {
  color: #f9fafb;
  font-size: 14px;
}
.browse-git-empty-state span {
  max-width: 58ch;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.45;
}
.browse-git-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.browse-git-empty-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(97, 175, 239, 0.32);
  border-radius: 8px;
  background: rgba(97, 175, 239, 0.1);
  color: #dcecff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.browse-git-diff-file {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.browse-git-diff-file-head {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.browse-git-diff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0;
  overflow: auto;
}
.browse-git-diff-colhead {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #171c24;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.browse-git-diff-hunk {
  padding: 7px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(97, 175, 239, 0.11);
  color: #b9d8f2;
  font-family: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
}
.browse-git-diff-line {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.28;
}
.browse-git-diff-line--old {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.browse-git-diff-line span {
  padding: 1px 8px;
  color: #6b7280;
  text-align: right;
  user-select: none;
}
.browse-git-diff-line code {
  min-width: 0;
  padding: 1px 8px;
  overflow: visible;
  color: #d1d5db;
  white-space: pre;
}
.browse-git-diff-line[data-diff-kind="addition"] {
  background: rgba(34, 197, 94, 0.12);
}
.browse-git-diff-line[data-diff-kind="addition"] code {
  color: #bbf7d0;
}
.browse-git-diff-line[data-diff-kind="deletion"] {
  background: rgba(239, 68, 68, 0.12);
}
.browse-git-diff-line[data-diff-kind="deletion"] code {
  color: #fecaca;
}
.browse-git-show-content {
  display: block;
  min-height: 0;
  margin: 0;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  color: #d1d5db;
  font-family: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.28;
}
.browse-git-show-line {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  min-width: max-content;
  min-height: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
}
.browse-git-line-no {
  position: sticky;
  left: 0;
  padding: 1px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: #10141b;
  color: #657080;
  text-align: right;
  user-select: none;
}
.browse-git-show-line code {
  min-width: 0;
  padding: 1px 10px;
  overflow: visible;
  color: #d1d5db;
  white-space: pre;
}
.browse-git-blame-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 12px;
  min-height: 0;
}
.browse-git-blame-lines {
  min-width: 0;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(97, 175, 239, 0.08), transparent 28%),
    rgba(0, 0, 0, 0.24);
}
.browse-git-blame-row {
  display: grid;
  grid-template-columns: 82px minmax(82px, 130px) 48px minmax(0, 1fr);
  min-width: max-content;
  min-height: 19px;
  border-left: 3px solid var(--blame-color, #61afef);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.28;
}
.browse-git-blame-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.browse-git-blame-sha,
.browse-git-blame-author,
.browse-git-blame-line-no {
  min-width: 0;
  padding: 1px 8px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(16, 20, 27, 0.92);
  color: #9ca3af;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}
.browse-git-blame-sha {
  color: var(--blame-color, #61afef);
  font-weight: 800;
}
.browse-git-blame-line-no {
  color: #657080;
  text-align: right;
}
.browse-git-blame-code {
  min-width: 0;
  padding: 1px 10px;
  overflow: visible;
  color: #d1d5db;
  white-space: pre;
}
.browse-git-blame-groups {
  display: flex;
  min-width: 0;
  max-height: 100%;
  flex-direction: column;
  gap: 9px;
  overflow: auto;
}
.browse-git-blame-card {
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 4px solid var(--blame-color, #61afef);
  border-radius: 10px;
  background:
    radial-gradient(
      circle at 0 0,
      color-mix(in srgb, var(--blame-color, #61afef) 18%, transparent),
      transparent 58%
    ),
    rgba(255, 255, 255, 0.045);
}
.browse-git-blame-card-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}
.browse-git-blame-card-head strong {
  color: var(--blame-color, #61afef);
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 12px;
}
.browse-git-blame-card-head span,
.browse-git-blame-card-meta {
  color: #9ca3af;
  font-size: 11px;
}
.browse-git-blame-card-meta {
  margin-top: 5px;
  line-height: 1.45;
}
.browse-git-blame-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
@media (max-width: 760px) {
  .browse-git-panel {
    padding: 10px;
  }
  .browse-git-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .browse-git-commit {
    grid-template-columns: minmax(0, 1fr);
  }
  .browse-git-commit-actions {
    justify-content: flex-start;
  }
  .browse-git-diff-title,
  .browse-git-diff-file-head {
    display: block;
  }
  .browse-git-diff-title span,
  .browse-git-diff-file-head span {
    display: block;
    margin-top: 4px;
  }
  .browse-git-diff-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .browse-git-diff-colhead {
    position: static;
  }
  .browse-git-diff-line--old {
    border-right: none;
  }
  .browse-git-diff-stats,
  .browse-git-version-meta {
    gap: 6px;
  }
  .browse-git-compare-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .browse-git-show-line {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .browse-git-blame-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .browse-git-blame-groups {
    order: -1;
    max-height: none;
  }
  .browse-git-blame-row {
    grid-template-columns: 76px 42px minmax(0, 1fr);
  }
  .browse-git-blame-author {
    display: none;
  }
}
.browse-adhoc-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 32;
  width: min(360px, calc(100vw - 48px));
  max-height: min(310px, 52vh);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px;
  color: #e5e7eb;
  background: rgba(24, 27, 35, 0.98);
  border: 1px solid rgba(97, 175, 239, 0.35);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.browse-adhoc-popover[hidden] {
  display: none;
}
.browse-adhoc-popover-arrow {
  position: absolute;
  top: -7px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: rgba(24, 27, 35, 0.98);
  border-left: 1px solid rgba(97, 175, 239, 0.35);
  border-top: 1px solid rgba(97, 175, 239, 0.35);
  transform: rotate(45deg);
}
.browse-adhoc-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.browse-adhoc-popover-kicker {
  color: #98c379;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
}
.browse-adhoc-popover-title {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  margin-top: 2px;
}
.browse-adhoc-popover-close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
}
.browse-adhoc-popover-close:hover,
.browse-adhoc-popover-close:focus {
  color: #fff;
  border-color: rgba(97, 175, 239, 0.62);
  outline: none;
}
.browse-adhoc-popover-body {
  min-height: 0;
  overflow: auto;
  color: #d7dde8;
  font-size: 12px;
  line-height: 1.45;
}
.browse-adhoc-popover-body p {
  margin: 0 0 8px;
}
.browse-adhoc-popover-body ul {
  margin: 0 0 8px 16px;
  padding: 0;
}
.browse-adhoc-popover-body li {
  margin: 0 0 4px;
}
.browse-adhoc-annotation-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(127, 132, 142, 0.24);
}
.browse-adhoc-annotation-heading {
  color: #98c379;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.browse-adhoc-annotation-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  color: #f8fafc;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.58);
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.96), 0 0 18px rgba(56, 189, 248, 0.10);
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
}
.browse-adhoc-annotation-list button:hover,
.browse-adhoc-annotation-list button:focus {
  border-color: rgba(125, 211, 252, 0.92);
  box-shadow: inset 3px 0 0 rgba(125, 211, 252, 1), 0 0 22px rgba(56, 189, 248, 0.22);
  outline: none;
}
.browse-adhoc-annotation-list small {
  flex: 0 0 auto;
  color: #cbd5e1;
  font-size: 10px;
}
.browse-adhoc-popover-muted,
.browse-adhoc-popover-foot {
  color: #7f848e;
  font-size: 11px;
}
.browse-adhoc-popover[data-state="queued"] {
  border-color: rgba(245, 158, 11, 0.52);
}
.browse-adhoc-popover[data-state="running"] {
  border-color: rgba(97, 175, 239, 0.52);
}
.browse-adhoc-popover[data-state="complete"] {
  border-color: rgba(152, 195, 121, 0.58);
}
.browse-adhoc-popover[data-state="error"] {
  border-color: rgba(224, 108, 117, 0.62);
}
.browse-preview-empty {
  color: #7f848e;
  font-size: 13px;
  line-height: 1.5;
}
.browse-preview-image {
  display: block;
  max-width: 100%;
  max-height: 55vh;
  object-fit: contain;
  border-radius: 6px;
  margin: 0 auto;
}
.browse-preview-image[data-fit="cover"] {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
@media (max-width: 760px) {
  .browse-image-preview-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}
.browse-preview-text {
  box-sizing: border-box;
  min-height: 100%;
  margin: 0;
  padding: 8px 10px;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 6px;
  color: #e0e0e0;
  font-family: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.28;
  white-space: pre-wrap;
  word-break: break-word;
}
.browse-preview-line {
  display: block;
  min-height: 1.28em;
  margin: 0 -3px;
  padding: 0 4px;
  border-left: 2px solid transparent;
  border-radius: 3px;
  cursor: text;
}
.browse-preview-line[data-browse-ai-selected] {
  background: rgba(152, 195, 121, 0.16);
  border-left-color: #98c379;
  box-shadow: inset 0 0 0 1px rgba(152, 195, 121, 0.28);
}
.browse-preview-body[data-browse-overlay-host="true"] {
  position: relative;
}
.browse-preview-line[data-browse-ai-mark],
.browse-preview-markdown [data-browse-ai-mark] {
  background: rgba(34, 211, 238, 0.24);
  border-left-color: #22d3ee;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.46), 0 0 20px rgba(34, 211, 238, 0.12);
}
.browse-preview-line[data-browse-ai-category="improvement"],
.browse-preview-markdown [data-browse-ai-category="improvement"] {
  background: rgba(245, 158, 11, 0.22);
  border-left-color: #f59e0b;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.46), 0 0 20px rgba(245, 158, 11, 0.12);
}
.browse-preview-line[data-browse-ai-category="link"],
.browse-preview-markdown [data-browse-ai-category="link"] {
  background: rgba(97, 175, 239, 0.20);
  border-left-color: #61afef;
  box-shadow: inset 0 0 0 1px rgba(97, 175, 239, 0.44), 0 0 20px rgba(97, 175, 239, 0.12);
}
.browse-preview-line[data-browse-ai-mark="warning"],
.browse-preview-markdown [data-browse-ai-mark="warning"] {
  background: rgba(250, 204, 21, 0.26);
  border-left-color: #facc15;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.50), 0 0 20px rgba(250, 204, 21, 0.14);
}
.browse-preview-line[data-browse-ai-mark="risk"],
.browse-preview-line[data-browse-ai-mark="error"],
.browse-preview-markdown [data-browse-ai-mark="risk"],
.browse-preview-markdown [data-browse-ai-mark="error"] {
  background: rgba(244, 63, 94, 0.28);
  border-left-color: #fb7185;
  box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.54), 0 0 22px rgba(244, 63, 94, 0.16);
}
.browse-preview-line[data-browse-ai-focus],
.browse-preview-markdown [data-browse-ai-focus] {
  outline: 2px solid rgba(34, 211, 238, 0.98);
  outline-offset: 2px;
}
.browse-annotation-rail {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  max-height: 96px;
  margin: 0 0 10px;
  padding: 8px 10px;
  overflow: auto;
  background: rgba(30, 30, 30, 0.76);
  border: 1px solid rgba(97, 175, 239, 0.28);
  border-left: 3px solid #61afef;
  border-radius: 6px;
  box-shadow: none;
}
.browse-annotation-rail-title {
  color: #61afef;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.browse-annotation-rail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.browse-annotation-chip-group {
  display: inline-grid;
  gap: 4px;
  align-items: start;
  max-width: min(100%, 260px);
}
.browse-annotation-rail-actions button,
.browse-adhoc-annotation-list .browse-annotation-action {
  max-width: 240px;
  padding: 4px 8px;
  overflow: hidden;
  color: #f8fafc;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(34, 211, 238, 0.14);
  border: 1px solid rgba(34, 211, 238, 0.64);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.14);
  cursor: pointer;
}
.browse-annotation-rail-actions button span {
  margin-right: 6px;
  color: #67e8f9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.browse-annotation-rail-actions button:hover,
.browse-annotation-rail-actions button:focus,
.browse-adhoc-annotation-list .browse-annotation-action:hover,
.browse-adhoc-annotation-list .browse-annotation-action:focus {
  border-color: rgba(103, 232, 249, 0.96);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.20);
  outline: none;
}
.browse-annotation-rail-actions button[data-severity="warning"] {
  background: rgba(250, 204, 21, 0.16);
  border-color: rgba(250, 204, 21, 0.78);
}
.browse-annotation-rail-actions button[data-category="improvement"] {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.72);
}
.browse-annotation-rail-actions button[data-category="improvement"] span {
  color: #f59e0b;
}
.browse-annotation-rail-actions button[data-category="link"] {
  background: rgba(97, 175, 239, 0.15);
  border-color: rgba(97, 175, 239, 0.72);
}
.browse-annotation-rail-actions button[data-category="link"] span {
  color: #61afef;
}
.browse-annotation-rail-actions button[data-severity="risk"],
.browse-annotation-rail-actions button[data-severity="error"] {
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(251, 113, 133, 0.82);
}
.browse-inline-annotation {
  position: absolute;
  right: 10px;
  z-index: 9;
  display: grid;
  gap: 5px;
  width: 34px;
  min-height: 30px;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 0;
  color: #dbeafe;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(34, 211, 238, 0.34);
  border-left: 1px solid rgba(34, 211, 238, 0.58);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}
.browse-inline-annotation::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 34px;
  border-top: 1px solid currentColor;
  opacity: 0.7;
}
.browse-inline-annotation::after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  right: calc(100% + 32px);
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(30, 30, 30, 0.92);
}
.browse-inline-annotation[data-expanded="true"] {
  width: min(340px, 46%);
  min-height: 0;
  padding: 9px 10px;
  border-left: 3px solid #22d3ee;
  border-radius: 7px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.browse-inline-annotation:hover,
.browse-inline-annotation:focus-within {
  z-index: 18;
}
.browse-inline-annotation[data-category="improvement"] {
  color: #fde68a;
  background: rgba(32, 24, 14, 0.94);
  border-color: rgba(245, 158, 11, 0.38);
  border-left-color: #f59e0b;
}
.browse-inline-annotation[data-category="link"] {
  color: #bfdbfe;
  background: rgba(14, 22, 38, 0.94);
  border-color: rgba(97, 175, 239, 0.40);
  border-left-color: #61afef;
}
.browse-inline-annotation[data-expanded="false"] strong,
.browse-inline-annotation[data-expanded="false"] p,
.browse-inline-annotation[data-expanded="false"] .browse-inline-annotation-target,
.browse-inline-annotation[data-expanded="false"] .browse-annotation-action-row,
.browse-inline-annotation[data-expanded="false"] .browse-inline-annotation-head span,
.browse-inline-annotation[data-expanded="false"] .browse-inline-annotation-head button[data-browse-annotation-jump] {
  display: none;
}
.browse-inline-annotation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.browse-inline-annotation-head span {
  color: #67e8f9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
.browse-inline-annotation[data-category="improvement"] .browse-inline-annotation-head span {
  color: #f59e0b;
}
.browse-inline-annotation[data-category="link"] .browse-inline-annotation-head span {
  color: #61afef;
}
.browse-inline-annotation-head button {
  width: 24px;
  height: 24px;
  color: #e0e0e0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(127, 132, 142, 0.34);
  border-radius: 50%;
  cursor: pointer;
}
.browse-inline-annotation-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.browse-inline-annotation[data-expanded="false"] .browse-inline-annotation-head {
  justify-content: center;
}
.browse-inline-annotation[data-expanded="false"] .browse-inline-annotation-toggle {
  width: 32px;
  height: 28px;
  color: inherit;
  background: transparent;
  border: 0;
}
.browse-inline-annotation strong {
  color: #f8fafc;
  font-size: 13px;
}
.browse-inline-annotation p {
  margin: 0;
  color: #d1d5db;
}
.browse-inline-annotation-target {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  color: #bfdbfe;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 10px;
  background: rgba(97, 175, 239, 0.12);
  border: 1px solid rgba(97, 175, 239, 0.32);
  border-radius: 999px;
  cursor: pointer;
}
.browse-inline-annotation-target:hover,
.browse-inline-annotation-target:focus {
  color: #f8fafc;
  border-color: rgba(97, 175, 239, 0.74);
  outline: none;
}
.browse-preview-missing-target {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
  text-align: left;
}
.browse-preview-missing-target strong {
  color: #f8fafc;
}
.browse-preview-missing-target p {
  max-width: 640px;
  margin: 0;
  color: #cbd5e1;
}
.browse-preview-missing-target code {
  padding: 4px 7px;
  color: #fca5a5;
  background: rgba(224, 108, 117, 0.12);
  border: 1px solid rgba(224, 108, 117, 0.28);
  border-radius: 5px;
}
.browse-annotation-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 3px;
}
.browse-annotation-action-row .browse-annotation-action,
.browse-adhoc-annotation-list .browse-annotation-action {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  max-width: none;
  padding: 3px 6px;
  color: #cbd5e1;
  font-size: 10px;
  background: rgba(152, 195, 121, 0.10);
  border-color: rgba(152, 195, 121, 0.46);
  border-radius: 999px;
}
.browse-annotation-action-row .browse-annotation-action:hover,
.browse-annotation-action-row .browse-annotation-action:focus,
.browse-adhoc-annotation-list .browse-annotation-action:hover,
.browse-adhoc-annotation-list .browse-annotation-action:focus {
  color: #f8fafc;
  border-color: rgba(152, 195, 121, 0.86);
  box-shadow: 0 0 14px rgba(152, 195, 121, 0.18);
}
.browse-file-reference-link {
  display: inline;
  margin: 0;
  padding: 0 2px;
  color: #93c5fd;
  font: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  background: rgba(97, 175, 239, 0.10);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.browse-file-reference-link:hover,
.browse-file-reference-link:focus {
  color: #dbeafe;
  background: rgba(97, 175, 239, 0.20);
  outline: 1px solid rgba(97, 175, 239, 0.50);
}
@media (max-width: 720px) {
  .browse-inline-annotation {
    right: 8px;
  }
  .browse-inline-annotation[data-expanded="true"] {
    width: min(300px, 64%);
  }
}
.browse-adhoc-proposal {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  background: rgba(30, 30, 30, 0.72);
  border: 1px solid rgba(152, 195, 121, 0.36);
  border-left: 3px solid #98c379;
  border-radius: 8px;
}
.browse-adhoc-proposal-heading {
  color: #98c379;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.browse-adhoc-proposal-label {
  color: #7f848e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.browse-adhoc-proposal pre {
  max-height: 150px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  color: #e0e0e0;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  background: #1e1e1e;
  border: 1px solid rgba(127, 132, 142, 0.28);
  border-radius: 6px;
}
.browse-adhoc-proposal p,
.browse-adhoc-proposal-empty {
  margin: 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.45;
}
.browse-adhoc-proposal-risk {
  width: fit-content;
  padding: 3px 7px;
  color: #e5c07b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.42);
  border-radius: 999px;
}
.browse-adhoc-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.browse-adhoc-proposal-actions button {
  padding: 5px 9px;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  background: rgba(97, 175, 239, 0.14);
  border: 1px solid rgba(97, 175, 239, 0.50);
  border-radius: 999px;
  cursor: pointer;
}
.browse-adhoc-proposal-actions button:hover,
.browse-adhoc-proposal-actions button:focus {
  border-color: rgba(97, 175, 239, 0.92);
  box-shadow: 0 0 14px rgba(97, 175, 239, 0.18);
  outline: none;
}
.browse-adhoc-followup-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.browse-adhoc-followup-note {
  display: grid;
  gap: 3px;
  padding: 8px;
  background: rgba(97, 175, 239, 0.10);
  border: 1px solid rgba(97, 175, 239, 0.28);
  border-radius: 7px;
}
.browse-adhoc-followup-note strong {
  color: #f8fafc;
  font-size: 12px;
}
.browse-adhoc-followup-note span {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.45;
}
.browse-annotation-rail-meta {
  color: #7f848e;
  font-size: 11px;
}
.browse-markdown-preview-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.browse-markdown-frontmatter {
  margin: 0;
  padding: 10px 12px;
  background: #1e1e1e;
  border: 1px solid #3d3d3d;
  border-left: 3px solid #e5c07b;
  border-radius: 7px;
  color: #abb2bf;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.browse-preview-markdown {
  padding: 16px 18px;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.65;
}
.browse-preview-markdown h1,
.browse-preview-markdown h2,
.browse-preview-markdown h3 {
  color: #fff;
  margin: 14px 0 8px;
  line-height: 1.25;
}
.browse-preview-markdown h1:first-child,
.browse-preview-markdown h2:first-child,
.browse-preview-markdown h3:first-child {
  margin-top: 0;
}
.browse-preview-markdown p {
  margin: 8px 0;
}
.browse-preview-markdown a {
  color: #61afef;
  text-decoration: none;
}
.browse-preview-markdown a:hover {
  text-decoration: underline;
}
.browse-preview-markdown ul,
.browse-preview-markdown ol {
  margin: 8px 0;
  padding-left: 22px;
}
.browse-preview-markdown blockquote {
  margin: 10px 0;
  padding: 6px 12px;
  border-left: 3px solid #61afef;
  background: rgba(97, 175, 239, 0.08);
  color: #abb2bf;
}
.browse-preview-markdown code {
  padding: 1px 4px;
  background: #2d2d2d;
  border-radius: 4px;
  color: #98c379;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 12px;
}
.browse-preview-markdown pre {
  margin: 10px 0;
  padding: 10px;
  overflow-x: auto;
  background: #111;
  border: 1px solid #333;
  border-radius: 7px;
}
.browse-preview-markdown pre code {
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #e0e0e0;
}
.browse-preview-markdown table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  font-size: 12px;
}
.browse-preview-markdown th,
.browse-preview-markdown td {
  padding: 6px 8px;
  border: 1px solid #3d3d3d;
  text-align: left;
  vertical-align: top;
}
.browse-preview-markdown th {
  color: #fff;
  background: #2d2d2d;
}
.browse-document-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px;
}
.browse-preview-doc-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #1e1e1e;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
}
.browse-preview-doc-heading strong {
  min-width: 0;
  color: #fff;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-preview-doc-heading span {
  flex: 0 0 auto;
  color: #98c379;
  font-size: 11px;
  letter-spacing: 1.4px;
}
.browse-preview-doc-resource {
  background: #1e1e1e;
  border: 1px solid #333;
  border-left: 3px solid #61afef;
  border-radius: 8px;
  overflow: hidden;
}
.browse-preview-doc-resource-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #333;
}
.browse-preview-doc-resource-title span {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.browse-preview-doc-resource-title em {
  color: #7f848e;
  font-size: 11px;
  font-style: normal;
}
.browse-preview-doc-text {
  margin: 0;
  padding: 8px 16px 12px 32px;
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.6;
}
.browse-preview-doc-text li {
  margin: 5px 0;
}
.browse-preview-doc-table {
  overflow: auto;
}
.browse-preview-doc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.browse-preview-doc-table th,
.browse-preview-doc-table td {
  padding: 7px 9px;
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  text-align: left;
  vertical-align: top;
}
.browse-preview-doc-table th {
  width: 42px;
  color: #7f848e;
  background: #252525;
  font-weight: 500;
}
.browse-preview-doc-table td {
  color: #e0e0e0;
}
.browse-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.browse-preview-primary,
.browse-preview-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #3d3d3d;
  background: #2d2d2d;
  color: #e0e0e0;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
}
.browse-preview-primary:hover,
.browse-preview-link:hover {
  border-color: #61afef;
  color: #61afef;
}
[data-preview-maximized="true"] .browse-explorer-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}
[data-preview-maximized="true"] .tray-panel[data-panel="browse"] .browse-toolbar,
[data-preview-maximized="true"] .tray-panel[data-panel="browse"] .browse-status,
[data-preview-maximized="true"] .tray-panel[data-panel="browse"] #browse-search-bar {
  display: none !important;
}
[data-preview-maximized="true"] .tray-tabs {
  display: none !important;
}
[data-tray-state="expanded"] .tray-panel[data-panel="browse"] .browse-preview,
[data-preview-maximized="true"] .tray-panel[data-panel="browse"] .browse-preview {
  height: 100%;
  max-height: none;
  min-height: 0;
}
[data-preview-maximized="true"] .browse-tree,
[data-preview-maximized="true"] .browse-pane-resizer,
[data-preview-maximized="true"] .browse-right-pane {
  display: none !important;
}
[data-preview-maximized="true"] .browse-preview {
  display: flex !important;
  flex-direction: column;
}
[data-preview-maximized="true"] .browse-preview-header {
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 8px;
}
[data-preview-maximized="true"] .browse-preview-heading {
  display: grid;
  grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}
[data-preview-maximized="true"] .browse-preview-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-preview-maximized="true"] .browse-preview-meta,
[data-preview-maximized="true"] .browse-preview-path {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-preview-maximized="true"] .browse-preview-actionbar {
  flex-wrap: nowrap;
}
[data-preview-maximized="true"] .browse-preview-body {
  margin-top: 0;
}
[data-preview-maximized="true"] .browse-preview-markdown {
  min-height: 100%;
}
@media (max-width: 760px) {
  .browse-preview-header {
    flex-direction: column;
  }
  [data-preview-maximized="true"] .browse-preview-header {
    flex-direction: row;
  }
  [data-preview-maximized="true"] .browse-preview-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .browse-preview-actionbar {
    width: 100%;
    justify-content: flex-start;
  }
  [data-preview-maximized="true"] .browse-preview-actionbar {
    width: auto;
    justify-content: flex-end;
  }
  .browse-adhoc-popover {
    left: 0;
    right: auto;
    width: min(360px, calc(100vw - 32px));
  }
  [data-preview-maximized="true"] .browse-adhoc-popover {
    left: auto;
    right: 0;
  }
  .browse-preview-tool-label {
    display: none;
  }
}

/* Browse Empty/Loading States */
.browse-empty, .browse-loading {
  padding: 30px 20px;
}
.browse-loading {
  color: #61afef;
}

/* Mobile optimizations */
/* A timeline can leave a phone-sized console on an unfolded/wide screen. */
.input-context-component[data-tray-narrow-column] .tray-tab {
  flex: 1 0 56px;
  min-width: 56px;
  font-size: 11px;
  min-height: 58px;
  padding: 8px 5px 7px;
}
.input-context-component[data-tray-narrow-column] .tray-tabs {
  gap: 5px;
  padding: 6px;
  min-width: 0;
  overflow-x: auto;
}
.input-context-component[data-tray-narrow-column] .tray-action-icon,
.input-context-component[data-tray-narrow-column] .tray-action-icon svg {
  width: 28px;
  height: 28px;
}
@media (max-width: 480px) {
  .input-row .console-input-wrap:not([data-composer-prefix]) > .console-input {
    height: 52px !important;
    min-height: 52px;
    max-height: 52px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .input-row .console-input::placeholder {
    white-space: nowrap;
  }
  .tray-tab {
    font-size: 11px;
    min-height: 58px;
    padding: 8px 5px 7px;
  }
  .tray-tabs {
    gap: 5px;
    padding: 6px;
  }
  .tray-action-icon,
  .tray-action-icon svg {
    width: 28px;
    height: 28px;
  }
  .tray-fullscreen-btn {
    min-width: 64px;
    padding: 8px 6px;
    font-size: 12px;
  }
  [data-tray-fullscreen="true"] .tray-content {
    padding: 12px 10px;
  }
  .input-row {
    padding: 6px 8px;
    gap: 6px;
  }
  .toggle-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  .toggle-btn .toggle-icon,
  .toggle-btn .toggle-icon svg {
    width: 27px;
    height: 27px;
  }
  .input-row .console-input {
    min-height: 52px;
    padding: 8px 12px;
    font-size: 16px; /* Prevent iOS zoom */
    line-height: 24px;
  }
  .input-row .console-submit {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  .input-row .console-submit svg {
    width: 22px;
    height: 22px;
  }
  /* 2026-05-14AV.1.1 — narrow-viewport now relies on the toolbar's
     overflow-x:auto fallback (no flex-wrap). Breadcrumbs scroll
     horizontally inside their column. Icons + toggle stay full-size. */
  .browse-toolbar {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .browse-toolbar::-webkit-scrollbar {
    display: none;
  }
  .browse-status {
    text-align: left;
  }
  /* 2026-05-14BB.2 — narrow-viewport .browse-nav-btn rule dropped
     (class no longer emitted by any HTML). */
  .browse-view-toggle {
    flex-shrink: 0;
  }
  .browse-sort-btn,
  .browse-bulk-btn {
    flex: 1 1 auto;
    min-height: 30px;
  }
  .browse-selected-count {
    flex: 0 0 auto;
  }
  .browse-item {
    flex-wrap: wrap;
  }
  .browse-item-size {
    flex: 1 0 auto;
    text-align: left;
  }
  .browse-item-actions {
    width: 100%;
    justify-content: flex-start;
  }
  [data-tray-fullscreen="true"] .browse-explorer-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  [data-tray-state="expanded"] .context-tray {
    position: fixed;
    top: auto;
    /* 2026-09-18: --tray-mobile-bottom-offset is measured (tray_tabs.ts) as
       viewportHeight - input-row top, which already spans down to the layout
       viewport bottom (past the home indicator). Adding env(safe-area-inset-
       bottom) on top double-counted it and floated the tray ~34px high,
       leaving the mobile gap between the main-row buttons and the prompt
       input. The offset alone anchors the main-row flush above the input. */
    bottom: var(--tray-mobile-bottom-offset, 112px);
    left: var(--tray-console-left, 0px);
    right: auto;
    transform: none;
    width: var(--tray-console-width, 100vw);
    height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
    max-height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10020;
    animation: tray-responsive-slide-up 180ms ease-out;
  }
  [data-tray-fullscreen="true"] .context-tray {
    position: fixed;
    top: var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px));
    bottom: calc(var(--tray-mobile-bottom-offset, 112px) + env(safe-area-inset-bottom, 0px));
    left: var(--tray-console-left, 0px);
    right: auto;
    transform: none;
    width: var(--tray-console-width, 100vw);
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10020;
  }
  [data-tray-state="expanded"] .tray-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  [data-tray-state="expanded"] .tray-panel {
    flex: 1;
    height: 100%;
    min-height: 0;
  }
  [data-tray-state="expanded"] .tray-panel[data-panel="gv"] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  [data-tray-state="expanded"] .tray-panel[data-panel="gv"] .gv-macro-grid--settings {
    flex: 0 0 auto;
    overflow: visible;
  }
  [data-tray-state="expanded"] .tray-panel[data-panel="gv"] .gv-settings-grid {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
  [data-tray-state="expanded"] .tray-panel[data-panel="gv"] .gv-result-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  [data-tray-state="expanded"] .tray-panel[data-panel="gv"] .gv-result-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  [data-tray-state="expanded"] .history-list,
  [data-tray-state="expanded"] .file-results,
  [data-tray-state="expanded"] .browse-explorer-shell,
  [data-tray-state="expanded"] .browse-tree,
  [data-tray-state="expanded"] .gvapi-shell,
  [data-tray-state="expanded"] .gvapi-tree,
  [data-tray-state="expanded"] .gvapi-preview {
    flex: 1 1 auto;
    height: 100%;
    max-height: none;
    min-height: 0;
  }
  [data-tray-state="expanded"] .tray-panel[data-panel="browse"],
  [data-tray-state="expanded"] .tray-panel[data-panel="gvapi"] {
    flex: 1 1 auto;
    min-height: 0;
  }
  [data-tray-state="expanded"] .browse-explorer-shell {
    overflow: hidden;
  }
  [data-tray-state="expanded"] .tray-tabs {
    position: static;
    flex-shrink: 0;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
  }
}

/* The dynamic keyboard-aware height above is gated on max-width:1024px, a
   pure viewport-width check. Foldables (Z Fold 7 main/unfolded screen) can
   report a touch, coarse-pointer, no-hover surface — exactly what
   isResponsiveAttachMobile() already treats as mobile — while still
   exceeding 1024px logical width. When only the width condition is false,
   the tray silently falls back to the desktop `max-height: min(600px, 60vh)`
   rule far above, capping any expanded panel (IDE workbench, attachment
   preview) at roughly half the screen even with the keyboard closed. Match
   the same pointer/hover condition here so wide touch surfaces get the real
   viewport-derived height instead of the fixed desktop cap. */
@media (hover: none) and (pointer: coarse) {
  [data-tray-state="expanded"] .context-tray {
    height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
    max-height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
  }
}

/* The IDE is a viewport workbench even when it is opened as an ordinary tray
   tab. Pin both live edges instead of bottom-anchoring a cached height: the
   first open can occur after the last visualViewport event, and a stale
   --tray-mobile-height otherwise collapses Terminal/Applications/Logs into a
   short strip immediately above the software keyboard. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .input-context-component[data-tray-state="expanded"][data-tray-active-tab="ide"]:not([data-tray-fullscreen="true"]) .context-tray {
    position: fixed;
    top: var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px));
    /* bottomOffset is measured from viewport bottom to input-row top, so it
       already includes the device safe-area inset. Adding env() again leaves
       an exposed, scroll-through dashboard strip above the composer/status. */
    bottom: var(--tray-mobile-bottom-offset, 112px);
    height: auto;
    max-height: none;
  }
}

/* 2026-08-19 settings-rail refactor: the open-result state no longer squeezes
   the card grid above the result (the legacy max-height clamp caused the
   result to overlap the Settings header/cards). The grid hides and the
   .gv-settings-rail chips own category navigation. */
[data-tray-state="expanded"] .tray-panel[data-panel="gv"]:has(#gv-result-panel[style*="display: flex"]) {
  overflow: hidden;
}
[data-tray-state="expanded"] .tray-panel[data-panel="gv"]:has(#gv-result-panel[style*="display: flex"]) .gv-macro-grid--settings {
  display: none;
}
[data-tray-state="expanded"] .tray-panel[data-panel="gv"]:has(#gv-result-panel[style*="display: flex"]) .gv-result-panel {
  flex: 1 1 auto;
  min-height: 220px;
}

@media (hover: none) and (pointer: coarse) {
  [data-tray-hold-menu="attach"][data-tray-state="expanded"] .context-tray {
    position: fixed;
    top: auto;
    bottom: calc(var(--tray-mobile-bottom-offset, 112px) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    transform: none;
    width: 100vw;
    height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
    max-height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
    overflow: hidden;
    z-index: 10020;
    animation: tray-responsive-slide-up 180ms ease-out;
  }

  [data-tray-hold-menu="attach"][data-tray-state="expanded"] .tray-tabs {
    position: static;
    flex-shrink: 0;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
  }
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .context-tray {
  --attach-pasteboard-buffer: 18px;
  position: fixed;
  top: auto;
  /* 2026-09-23: --tray-mobile-bottom-offset already measures down to the top
     of the prompt .input-row (tray_tabs.ts: viewportHeight - inputRow.top),
     so adding env(safe-area-inset-bottom) on top of it double-counted the
     home-indicator inset and floated the attach surface ~34px above the
     prompt bar — detaching it (the ACTIVITY CENTRE/TURN CARDS/CONSOLE strip
     showed in the gap). The general tray rule dropped this addend on
     2026-09-18; the attach surface kept it. Anchor flush like the general
     rule so the attach panel sits directly on top of the prompt bar. */
  bottom: var(--tray-mobile-bottom-offset, 112px);
  left: 0;
  right: 0;
  transform: none;
  width: 100vw;
  height: max(
    160px,
    calc(var(--tray-mobile-height,
        calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
      )
        - var(--attach-pasteboard-buffer, 18px)
    )
  );
  max-height: max(
    160px,
    calc(var(--tray-mobile-height,
        calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
      )
        - var(--attach-pasteboard-buffer, 18px)
    )
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10020;
  animation: tray-responsive-slide-up 180ms ease-out;
}

[data-tray-mobile-surface="true"][data-attach-empty="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"]:not([data-secret-vault="open"])
  .context-tray {
  height: auto;
  max-height: min(
    360px,
    calc(100dvh - var(--tray-mobile-top-offset, 52px) - 24px)
  );
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .tray-tabs {
  position: static;
  flex-shrink: 0;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"] .attach-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"] .attach-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  min-height: 76px;
  padding: 8px 4px;
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"] .attach-btn .attach-label {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 2026-08-19i: chitchat mode toggling moved to send-button long-press; the
   in-wrap toggle stays in the DOM as the state owner but is hidden. Scoped
   to the wrap so the popout's standalone toggle is unaffected. */
.console-input-wrap .chitchat-toggle {
  display: none !important;
}
/* 2026-09-18: the solo .composer-open-btn was removed with the standalone
   composer (html.ts 2026-09-17), vacating the right:8px slot. The two live
   in-wrap buttons below shift right into it so the typed text no longer
   leaves a gap before the send button (owner report). */
/* Follow-me is the right-most in-wrap button, in the vacated composer slot. */
.attach-open-btn {
  position: absolute;
  right: 8px;
  bottom: 50%;
  transform: translateY(50%);
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 36, 36, 0.92);
  border: 1px solid rgba(240, 193, 75, 0.5);
  border-radius: 50%;
  cursor: pointer;
  z-index: 6;
  transition: border-color 150ms ease, transform 150ms ease;
}
.attach-open-btn:hover {
  border-color: rgba(240, 193, 75, 0.9);
}
.attach-open-btn svg {
  width: 24px;
  height: 24px;
}
/* Keep typed text clear of the two stacked buttons (progressive: :has). */
.console-input-wrap:has(.attach-open-btn) .console-input {
  padding-right: 52px;
}

@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  body.keyboard-open [data-tray-state="expanded"] .context-tray {
    height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
    max-height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
  }

  body.keyboard-open [data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .context-tray {
    height: max(
      160px,
      calc(var(--tray-mobile-height,
          calc(
            100dvh
              - var(--tray-mobile-top-offset,
              calc(var(--nav-height, 44px) + 8px)
            )
              - var(--tray-mobile-bottom-offset, 112px)
              - env(safe-area-inset-bottom, 0px)
          )
        )
          - var(--attach-pasteboard-buffer, 18px)
      )
    );
    max-height: max(
      160px,
      calc(var(--tray-mobile-height,
          calc(
            100dvh
              - var(--tray-mobile-top-offset,
              calc(var(--nav-height, 44px) + 8px)
            )
              - var(--tray-mobile-bottom-offset, 112px)
              - env(safe-area-inset-bottom, 0px)
          )
        )
          - var(--attach-pasteboard-buffer, 18px)
      )
    );
  }

  body.keyboard-open [data-tray-mobile-surface="true"][data-secret-vault-mode="quick"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .context-tray {
    bottom: env(safe-area-inset-bottom, 0px);
    height: max(
      160px,
      calc(var(--tray-mobile-height,
          calc(100dvh - var(--tray-mobile-top-offset, 52px) - var(--tray-mobile-bottom-offset, 112px))
        )
          + var(--tray-mobile-bottom-offset, 112px)
          - var(--attach-pasteboard-buffer, 18px)
      )
    );
    max-height: max(
      160px,
      calc(var(--tray-mobile-height,
          calc(100dvh - var(--tray-mobile-top-offset, 52px) - var(--tray-mobile-bottom-offset, 112px))
        )
          + var(--tray-mobile-bottom-offset, 112px)
          - var(--attach-pasteboard-buffer, 18px)
      )
    );
  }

  body.keyboard-open [data-secret-vault-mode="quick"] .tray-panel[data-panel="attach"] {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  body.keyboard-open [data-secret-vault-mode="quick"] .quick-secret-vault {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    margin: 4px 0;
    padding: 0;
    gap: 7px;
    box-sizing: border-box;
    border-radius: 12px;
  }

  body.keyboard-open [data-secret-vault-mode="quick"] .quick-secret-head {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 6px;
  }

  body.keyboard-open [data-secret-vault-mode="quick"] .quick-secret-body {
    gap: 7px;
    padding: 7px 10px;
  }

  body.keyboard-open [data-secret-vault-mode="quick"] .secret-vault-warning {
    padding: 7px 9px;
    font-size: 11px;
    line-height: 1.4;
  }

  body.keyboard-open [data-secret-vault-mode="quick"] .quick-secret-field textarea {
    min-height: 52px;
    max-height: min(180px, 28dvh);
    resize: none;
  }

  body.keyboard-open [data-secret-vault-mode="quick"] .secret-chain {
    padding: 7px 10px;
    gap: 4px;
  }
  body.keyboard-open [data-secret-vault-mode="quick"] .secret-chain-node-stat {
    display: none;
  }
  body.keyboard-open [data-secret-vault-mode="quick"] .secret-chain-node[data-state="fail"] .secret-chain-node-stat {
    display: block;
  }
  body.keyboard-open [data-secret-vault-mode="quick"] .secret-chain-node {
    min-width: 52px;
    padding: 4px 5px 3px;
  }

  body.keyboard-open [data-secret-vault-mode="quick"] .quick-secret-actions {
    grid-template-columns: minmax(88px, 0.55fr) minmax(140px, 1fr);
    gap: 7px;
    padding: 6px 10px 8px;
  }

  body.keyboard-open .input-row {
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }

  body.keyboard-open .input-row .console-input {
    max-height: var(--console-input-keyboard-max-height,
      calc(100dvh - var(--nav-height, 44px) - 72px)
    );
    min-height: 52px;
  }

  body.keyboard-open [data-tray-state="actions"] .context-tray {
    height: auto;
    max-height: none;
  }

  body.keyboard-open
    [data-tray-mobile-surface="true"][data-attach-empty="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"]:not([data-secret-vault="open"])
    .context-tray {
    height: auto;
    max-height: min(
      360px,
      calc(100dvh - var(--tray-mobile-top-offset, 52px) - 24px)
    );
  }

  /* Bug 3 fix (2026-09-21): when keyboard is open with photos attached,
     the attach-preview min-height (min(52dvh,520px)) undercut the tray's
     keyboard-open height budget, leaving zero visible height for the textarea.
     Removing the floor lets the tray clip to its keyboard-open height rule. */
  body.keyboard-open [data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-preview.visible {
    min-height: 0;
  }

  /* Compact the context-chips strip (attachment thumbnails in the input area)
     when keyboard is open — recovers ~28px of bottom-chrome height. */
  body.keyboard-open .context-chips {
    padding: 4px 8px;
  }

  body.keyboard-open .context-chips .context-chip--thumb {
    height: 44px;
    min-width: 58px;
  }

  body.keyboard-open .context-chips .context-chip--thumb img,
  body.keyboard-open .context-chips .context-chip--thumb > span:first-child {
    width: 34px;
    height: 34px;
  }
}

/* Sealed-secret vault as a full-height sheet on mobile (owner 2026-09-23:
   "make it a modal that consumes all screen space when opened so we can
   maximise"). Whenever the vault is open on a coarse ≤1024px surface the tray
   grows to the keyboard-aware full height and the vault fills it, so the whole
   form (Use-with, keep-credential, the secret field and the Seal action) has
   room instead of being crammed into the compact tray — with OR without the
   keyboard. Reuses the same proven tray-height mechanism as the keyboard
   rescue above (no position:fixed, so no transformed-ancestor surprises). */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  [data-secret-vault="open"][data-tray-state="expanded"] .context-tray {
    height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
    max-height: var(--tray-mobile-height,
      calc(100dvh - var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px)) - var(--tray-mobile-bottom-offset, 112px) - env(safe-area-inset-bottom, 0px))
    );
  }
  [data-secret-vault="open"] .tray-panel[data-panel="attach"] {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  [data-secret-vault="open"] .quick-secret-vault,
  [data-secret-vault="open"] .secret-vault {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    margin: 4px 0;
  }
}

@media (max-width: 760px) {
  .attach-preview.visible {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    grid-auto-rows: minmax(128px, 1fr);
    gap: 10px;
    padding: 40px 10px 10px;
  }

  .attach-preview.visible[data-attachment-count="3"],
  .attach-preview.visible[data-attachment-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  [data-tray-hold-menu="attach"] .attach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  [data-tray-hold-menu="attach"] .attach-btn {
    min-height: 68px;
    padding: 10px 8px;
  }
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-preview.visible {
  flex: 1 1 auto;
  min-height: min(52dvh, 520px);
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-preview.visible + .attach-grid {
  justify-content: flex-start;
  gap: 6px;
  padding-bottom: 10px;
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-preview.visible + .attach-grid .attach-btn {
  flex: 0 1 124px;
  max-width: 148px;
  min-height: 54px;
  padding: 6px 4px;
  gap: 2px;
  border-radius: 8px;
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-preview.visible + .attach-grid .attach-icon svg {
  width: 24px;
  height: 24px;
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-preview.visible + .attach-grid .attach-label {
  font-size: 11px;
}

[data-tray-mobile-surface="true"][data-tray-hold-menu="attach"][data-tray-state="expanded"] .attach-preview.visible + .attach-grid .attach-label::after {
  display: none;
}

@media (max-width: 360px) {
  .attach-preview.visible[data-attachment-count="2"],
  .attach-preview.visible[data-attachment-count="3"],
  .attach-preview.visible[data-attachment-count="4"] {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

/* ========================================================================
 * GV TAB - Phase 8: Direct gvmesh API Commands
 * ======================================================================== */

/* Node selector bar */
.gv-node-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  margin-bottom: 8px;
}
.gv-node-label {
  color: #7f848e;
  font-size: 12px;
  flex-shrink: 0;
}
.gv-node-dropdown {
  flex: 1;
  min-width: 0;
  max-width: 55%;
  padding: 4px 8px;
  background: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  font-size: 13px;
  font-family: monospace;
  outline: none;
  cursor: pointer;
}
.gv-node-dropdown:focus {
  border-color: #61afef;
}
.gv-model-label {
  color: #7f848e;
  font-size: 12px;
  flex-shrink: 0;
}
.gv-model-dropdown {
  flex: 0 1 auto;
  min-width: 80px;
  padding: 4px 8px;
  background: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  font-size: 13px;
  font-family: monospace;
  outline: none;
  cursor: pointer;
}
.gv-model-dropdown:focus {
  border-color: #61afef;
}

/* Macro button grid */
.gv-macro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.gv-macro-grid.gv-macro-grid--settings {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.gv-macro-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
}
.gv-macro-btn:hover {
  background: #3d3d3d;
  border-color: #61afef;
}
.gv-macro-btn:active {
  transform: scale(0.97);
}
.gv-macro-btn.gv-macro-running {
  opacity: 0.6;
  pointer-events: none;
}
.gv-macro-btn.gv-macro-running .gv-macro-icon {
  animation: gv-spin 1s linear infinite;
}
@keyframes gv-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.gv-macro-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(97, 175, 239, 0.12);
  border-radius: 6px;
  flex-shrink: 0;
}
.gv-macro-info {
  flex: 1;
  min-width: 0;
}
.gv-macro-name {
  font-size: 13px;
  font-weight: 500;
  color: #e0e0e0;
  font-family: monospace;
}
.gv-macro-desc {
  font-size: 11px;
  color: #7f848e;
}
.gv-settings-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 9px 10px;
  margin-bottom: 8px;
  background: #242424;
  border: 1px solid #353535;
  border-radius: 8px;
}
.gv-settings-copy {
  flex: 1;
  min-width: 0;
}
.gv-settings-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.gv-settings-subtitle {
  color: #7f848e;
  font-size: 11px;
  line-height: 1.35;
}
/* Node-branded pill beside the Settings title — settings are node-level. */
.gv-settings-node-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--gv-settings-node-color, rgba(240, 193, 75, 0.55));
  color: var(--gv-settings-node-color, #f0c14b);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  vertical-align: middle;
}
.gv-settings-node-pill .gv-settings-node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gv-settings-node-color, #f0c14b);
}
/* Full-width hairline between the favorites group and the A-Z remainder. */
.gv-settings-divider {
  grid-column: 1 / -1;
  height: 1px;
  margin: 8px 2px;
  background: linear-gradient(
    90deg,
    rgba(240, 193, 75, 0.45),
    rgba(240, 193, 75, 0.05)
  );
}
.gv-settings-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gv-settings-control {
  min-height: 26px;
  padding: 4px 8px;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  color: #7f848e;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.gv-settings-control:hover,
.gv-settings-control.active {
  background: #20303d;
  border-color: #61afef;
  color: #61afef;
}
.gv-settings-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  color: #e5c07b;
  border-color: rgba(229, 192, 123, 0.5);
}
.gv-settings-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.gv-settings-close:hover {
  background: rgba(229, 192, 123, 0.12);
  border-color: #e5c07b;
  color: #ffd27a;
}
/* Keep the header copy readable when the controls consume a phone-width row. */
@media (max-width: 640px) {
  .gv-settings-head {
    flex-direction: column;
    align-items: stretch;
  }
  .gv-settings-copy,
  .gv-settings-controls {
    width: 100%;
  }
  .gv-settings-copy {
    flex: 0 0 auto;
  }
  .gv-settings-title,
  .gv-settings-subtitle {
    word-break: normal;
    overflow-wrap: break-word;
  }
}
.gv-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.gv-settings-grid.gv-settings-tree {
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 20vw, 320px), 1fr));
  align-content: start;
  gap: 8px;
  max-height: min(32vh, 300px);
  padding-right: 2px;
}
.gv-settings-card {
  position: relative;
  min-height: 62px;
  padding: 9px 34px 9px 10px;
  border-radius: 7px;
}
.gv-settings-tree .gv-settings-card {
  min-height: 74px;
  padding: 8px 34px 8px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  border-left: 3px solid #3d3d3d;
}
.gv-settings-tree .gv-settings-card.is-favorite {
  border-left-color: #98c379;
}
.gv-settings-tree .gv-macro-icon {
  width: 30px;
  height: 30px;
  font-size: 16px;
  border-radius: 7px;
}
.gv-settings-tree .gv-macro-name {
  font-size: 12px;
}
.gv-settings-tree .gv-macro-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Settings category rail (2026-08-19) — sticky horizontal quick-jump chips
   shown while a gv result is open. The card grid hides entirely (see the
   open-result rules further down) so the result never overlaps the Settings
   header or cards on desktop or mobile. */
.gv-settings-rail {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #62666e transparent;
  padding: 6px 4px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #1e1e1e;
  border-bottom: 1px solid #2c2c2c;
}
.context-tray,
.tray-content,
#dash-console-tools-menu,
.history-list,
.file-results,
.browse-tree,
.browse-preview,
.browse-right-tree {
  scrollbar-width: thin;
  scrollbar-color: #62666e transparent;
}
.gv-settings-rail::-webkit-scrollbar,
.gv-result-body::-webkit-scrollbar,
.context-tray::-webkit-scrollbar,
.tray-content::-webkit-scrollbar,
#dash-console-tools-menu::-webkit-scrollbar,
.history-list::-webkit-scrollbar,
.file-results::-webkit-scrollbar,
.browse-tree::-webkit-scrollbar,
.browse-preview::-webkit-scrollbar,
.browse-right-tree::-webkit-scrollbar { width: 7px; height: 7px; }
.gv-settings-rail::-webkit-scrollbar-track,
.gv-result-body::-webkit-scrollbar-track,
.context-tray::-webkit-scrollbar-track,
.tray-content::-webkit-scrollbar-track,
#dash-console-tools-menu::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track,
.file-results::-webkit-scrollbar-track,
.browse-tree::-webkit-scrollbar-track,
.browse-preview::-webkit-scrollbar-track,
.browse-right-tree::-webkit-scrollbar-track { background: transparent; }
.gv-settings-rail::-webkit-scrollbar-thumb,
.gv-result-body::-webkit-scrollbar-thumb,
.context-tray::-webkit-scrollbar-thumb,
.tray-content::-webkit-scrollbar-thumb,
#dash-console-tools-menu::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb,
.file-results::-webkit-scrollbar-thumb,
.browse-tree::-webkit-scrollbar-thumb,
.browse-preview::-webkit-scrollbar-thumb,
.browse-right-tree::-webkit-scrollbar-thumb { background: #62666e; border-radius: 999px; }
.gv-settings-rail::-webkit-scrollbar-thumb:hover,
.gv-result-body::-webkit-scrollbar-thumb:hover,
.context-tray::-webkit-scrollbar-thumb:hover,
.tray-content::-webkit-scrollbar-thumb:hover,
#dash-console-tools-menu::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover,
.file-results::-webkit-scrollbar-thumb:hover,
.browse-tree::-webkit-scrollbar-thumb:hover,
.browse-preview::-webkit-scrollbar-thumb:hover,
.browse-right-tree::-webkit-scrollbar-thumb:hover { background: #7b8089; }
.gv-settings-rail::-webkit-scrollbar-corner,
.gv-result-body::-webkit-scrollbar-corner,
.context-tray::-webkit-scrollbar-corner,
.tray-content::-webkit-scrollbar-corner,
#dash-console-tools-menu::-webkit-scrollbar-corner,
.history-list::-webkit-scrollbar-corner,
.file-results::-webkit-scrollbar-corner,
.browse-tree::-webkit-scrollbar-corner,
.browse-preview::-webkit-scrollbar-corner,
.browse-right-tree::-webkit-scrollbar-corner { background: transparent; }
.gv-rail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 10px;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 15px;
  color: #b6bcc8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.gv-rail-chip:hover {
  background: #3d3d3d;
  border-color: #61afef;
  color: #e0e0e0;
}
.gv-rail-chip.active {
  background: #20303d;
  border-color: #61afef;
  color: #61afef;
}
.gv-rail-chip.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.gv-rail-chip--all {
  color: #e5c07b;
  border-color: rgba(229, 192, 123, 0.5);
}
.gv-rail-chip--all:hover {
  background: rgba(229, 192, 123, 0.12);
  border-color: #e5c07b;
  color: #ffd27a;
}
.gv-rail-chip-icon {
  font-size: 13px;
  line-height: 1;
}
/* CSS fallback for the JS grid swap: whenever the result panel is open the
   settings card grid is hidden in every tray state. */
.tray-panel[data-panel="gv"]:has(#gv-result-panel[style*="display: flex"]) .gv-macro-grid--settings {
  display: none;
}
[data-tray-fullscreen="true"] .tray-panel[data-panel="gv"] .gv-macro-grid--settings {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
[data-tray-fullscreen="true"] .tray-panel[data-panel="gv"] .gv-settings-grid.gv-settings-tree {
  flex: 1 1 auto;
  max-height: none;
  overflow-y: auto;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="settings"] .tray-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="settings"] .tray-panel:not([data-panel="gv"]) {
  display: none !important;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="settings"] .tray-panel[data-panel="gv"] {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="settings"] .tray-panel[data-panel="gv"] .gv-macro-grid--settings,
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="settings"] .tray-panel[data-panel="gv"] .gv-settings-grid {
  flex: 1 1 auto;
  min-height: 0;
}
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="settings"] .tray-panel[data-panel="gv"] .gv-settings-grid {
  max-height: none;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
/* 2026-08-19: in fullscreen Settings the open result panel owns the height
   (the grid is hidden by the settings-rail swap while a result is open). */
[data-tray-fullscreen="true"][data-tray-fullscreen-mode="settings"] .tray-panel[data-panel="gv"] .gv-result-panel {
  flex: 1 1 auto;
  min-height: 0;
}
.gv-settings-card.is-favorite {
  border-color: #98c379;
}
.gv-settings-card.is-disabled {
  opacity: 0.58;
}
.gv-settings-card.is-hidden {
  border-style: dashed;
  opacity: 0.42;
}
.gv-settings-star {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #1e1e1e;
  color: #e5c07b;
  cursor: pointer;
  font-size: 13px;
  line-height: 22px;
}
.gv-settings-permission {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  background: #1e1e1e;
  border: 1px solid #3d3d3d;
  border-radius: 999px;
  color: #7f848e;
  font-size: 10px;
  cursor: pointer;
}
.gv-script-browser {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gv-script-section-header {
  margin-bottom: 8px;
}
.gv-card.gv-script-row {
  padding: 10px;
  border-left: 3px solid #e5c07b;
}
.gv-script-mainline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.gv-script-file-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3a2a16, #25312b);
  border: 1px solid rgba(229, 192, 123, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #e5c07b;
}
.gv-script-info {
  min-width: 0;
}
.gv-script-path {
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.gv-script-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.gv-script-action {
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(229, 192, 123, 0.34);
  background: rgba(229, 192, 123, 0.12);
  color: #e5c07b;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.gv-script-action:hover {
  transform: translateY(-1px);
  border-color: rgba(229, 192, 123, 0.72);
}
.gv-script-action--preview {
  color: #61afef;
  background: rgba(97, 175, 239, 0.12);
  border-color: rgba(97, 175, 239, 0.36);
}
.gv-script-action--run,
.gv-script-action--save {
  color: #98c379;
  background: rgba(152, 195, 121, 0.12);
  border-color: rgba(152, 195, 121, 0.38);
}
.gv-script-action--edit {
  color: #c678dd;
  background: rgba(198, 120, 221, 0.12);
  border-color: rgba(198, 120, 221, 0.36);
}
.gv-script-action--schedule {
  color: #e5c07b;
  background: rgba(229, 192, 123, 0.12);
  border-color: rgba(229, 192, 123, 0.38);
}
.gv-script-action--delete {
  color: #e06c75;
  background: rgba(224, 108, 117, 0.12);
  border-color: rgba(224, 108, 117, 0.38);
}
.gv-script-status {
  min-height: 14px;
  margin-top: 6px;
  color: #7f848e;
  font-size: 11px;
}
.gv-script-preview {
  margin-top: 8px;
}
.gv-script-preview-code,
.gv-script-editor {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-radius: 7px;
  border: 1px solid #3d3d3d;
  background: #141414;
  color: #e0e0e0;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
}
.gv-script-preview-code {
  max-height: 240px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
}
.gv-script-run-shell {
  display: grid;
  gap: 7px;
}
.gv-script-run-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(127, 132, 142, 0.24);
  background: rgba(20, 20, 20, 0.72);
  color: #d7dae0;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.gv-script-run-line span {
  color: #e5c07b;
  font-weight: 800;
  text-transform: uppercase;
}
.gv-script-run-cmd {
  border-color: rgba(152, 195, 121, 0.28);
  color: #98c379;
}
.gv-script-run-live {
  border-color: rgba(97, 175, 239, 0.32);
  color: #61afef;
}
.gv-script-run-label {
  color: #98c379;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.gv-script-run-label.is-stderr {
  color: #e06c75;
}
.gv-script-run-stderr {
  border-color: rgba(224, 108, 117, 0.34);
}
.gv-script-editor {
  min-height: 220px;
  resize: vertical;
  padding: 10px;
}
.gv-script-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 7px;
}
.gv-script-token-comment {
  color: #7f848e;
}
.gv-script-token-string {
  color: #98c379;
}
.gv-script-token-keyword {
  color: #61afef;
  font-weight: 700;
}

/* Result panel */
.gv-result-panel {
  margin-top: 8px;
  background: #2d2d2d;
  border-radius: 8px;
  border: 1px solid #3d3d3d;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gv-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 10px;
  padding: 8px 12px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
}
.gv-result-back {
  background: none;
  border: none;
  color: #61afef;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.gv-result-back:active {
  opacity: 0.6;
}
.gv-result-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.gv-result-icon {
  font-size: 14px;
}
.gv-result-title {
  font-size: 13px;
  color: #e0e0e0;
  font-weight: 500;
  font-family: monospace;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gv-result-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.gv-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.gv-badge-dot.gv-badge-ok {
  background: #22c55e;
}
.gv-badge-dot.gv-badge-error {
  background: #ef4444;
}
.gv-badge-dot.gv-badge-loading {
  background: #e5c07b;
  animation: gv-pulse 1s ease infinite;
}
@keyframes gv-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.gv-badge-text {
  font-size: 11px;
}
.gv-badge-text.gv-badge-ok {
  color: #22c55e;
}
.gv-badge-text.gv-badge-error {
  color: #ef4444;
}
.gv-badge-text.gv-badge-loading {
  color: #e5c07b;
}
.gv-badge-timing {
  font-size: 11px;
  color: #7f848e;
  margin-left: 4px;
}
.gv-result-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.gv-result-attach {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 150ms;
}
.gv-result-attach:hover {
  background: #cc785c22;
}
.gv-result-attach:active {
  background: #cc785c44;
}
.gv-result-maximize {
  background: transparent;
  border: none;
  color: #e5c07b;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  transition: background 150ms, color 150ms;
}
.gv-result-maximize:hover,
.gv-result-maximize[aria-pressed="true"] {
  background: rgba(229, 192, 123, 0.16);
  color: #f0c14b;
}
.gv-result-close {
  background: transparent;
  border: none;
  color: #7f848e;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  transition: color 150ms;
}
.gv-result-close:hover {
  color: #e0e0e0;
}
.gv-result-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px;
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
  font-size: 13px;
}
.gv-result-json {
  margin: 0;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 12px;
  color: #e0e0e0;
  white-space: pre-wrap;
  word-break: break-all;
}
.gv-result-error {
  color: #e06c75;
}
.gv-result-empty {
  color: #7f848e;
  text-align: center;
  padding: 12px;
}
.gv-result-loading {
  color: #e5c07b;
  text-align: center;
  padding: 12px;
}

/* ── Shared Card System ── */
.gv-card {
  background: #1e1e1e;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  transition: border-color 150ms ease;
}
.gv-card:last-child {
  margin-bottom: 0;
}
.gv-card:hover {
  border-color: #3d3d3d;
}
.gv-card-clickable {
  cursor: pointer;
}
.gv-card-clickable:hover {
  border-color: #61afef;
  background: #61afef0a;
}
.gv-card-clickable:active {
  background: #61afef14;
}
.gv-replay-btn {
  background: none;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  color: #61afef;
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.gv-replay-btn:hover {
  background: #61afef1a;
  border-color: #61afef;
}
.gv-replay-btn:active {
  background: #61afef33;
}
.gv-card-highlight {
  border-color: #22c55e44;
  background: #22c55e08;
}
.gv-selectable {
  cursor: pointer;
}
.gv-selectable:hover {
  border-color: #cc785c66;
  background: #cc785c0a;
}
.gv-selectable:active {
  transform: scale(0.98);
  background: #cc785c14;
}
.gv-route-item.gv-selectable:hover {
  background: #cc785c0a;
}
.gv-route-item.gv-selectable:active {
  background: #cc785c14;
}
.gv-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gv-card-main {
  flex: 1;
  min-width: 0;
}
.gv-card-title {
  font-size: 13px;
  color: #e0e0e0;
  font-weight: 600;
}
.gv-card-subtitle {
  font-size: 12px;
  color: #7f848e;
  margin-top: 1px;
}
.gv-card-meta {
  font-size: 11px;
  color: #7f848e;
  margin-top: 6px;
}
.gv-section-header {
  font-size: 12px;
  color: #7f848e;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #2d2d2d;
}
.gv-hint {
  color: #555;
  font-weight: normal;
}

/* ── Badge / Chip System ── */
.gv-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.gv-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* ── gvSettings design language v1.0 ──────────────────────────────────
   Tokens + primitives per gv-docs-library/design/console/settings-style-guide.md.
   Scoped under .gv-result-panel so unmigrated legacy tabs are untouched.
   Components NEVER hardcode hexes; dynamic per-card accents inject
   style="--gvs-accent: var(--gvs-ok)" from the renderer. */
.gv-result-panel {
  --gvs-bg-canvas: #1e1e1e;
  --gvs-bg-raised: #26282e;
  --gvs-bg-inset: #1a1c20;
  --gvs-bg-hover: #2e3138;
  --gvs-border: #34373f;
  --gvs-border-strong: #4b5263;
  --gvs-text: #e0e0e0;
  --gvs-text-soft: #a8adb8;
  --gvs-text-muted: #7f848e;
  --gvs-text-title: #ffffff;
  --gvs-ok: #98c379;
  --gvs-info: #61afef;
  --gvs-warn: #e5c07b;
  --gvs-error: #e06c75;
  --gvs-data: #56b6c2;
  --gvs-special: #c678dd;
  --gvs-attn: #f97316;
  --gvs-brand: #f0c14b;
  --gvs-radius: 8px;
  --gvs-radius-sm: 6px;
  --gvs-gap: 10px;
  --gvs-pad: 12px;
}

.gvs-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: var(--gvs-gap);
  border-bottom: 1px solid var(--gvs-border);
}
.gvs-head-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gvs-brand);
  font-weight: 600;
}
.gvs-head-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--gvs-text-muted);
  background: var(--gvs-bg-raised);
  border: 1px solid var(--gvs-border);
  border-radius: 10px;
  padding: 2px 8px;
}

.gvs-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--gvs-gap);
}
.gvs-input {
  flex: 1 1 140px;
  min-width: 0;
  min-height: 32px;
  background: var(--gvs-bg-inset);
  border: 1px solid var(--gvs-border);
  border-radius: var(--gvs-radius-sm);
  color: var(--gvs-text);
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
}
.gvs-input:focus-visible {
  border-color: var(--gvs-info);
}
.gvs-input::placeholder {
  color: var(--gvs-text-muted);
}
.gvs-select {
  min-height: 32px;
  background: var(--gvs-bg-inset);
  border: 1px solid var(--gvs-border);
  border-radius: var(--gvs-radius-sm);
  color: var(--gvs-text);
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
  cursor: pointer;
}
.gvs-select:focus-visible {
  border-color: var(--gvs-info);
}
/* Quiet in-place text edit (e.g. credential labels): invisible at rest,
   input-like on focus — replaces inline onfocus/onblur style mutation. */
.gvs-inline-edit {
  background: transparent;
  border: 1px solid transparent;
  color: var(--gvs-text-muted);
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  outline: none;
  width: 100%;
  max-width: 320px;
  font-family: inherit;
}
.gvs-inline-edit:hover {
  border-color: var(--gvs-border);
}
.gvs-inline-edit:focus {
  border-color: var(--gvs-border);
  background: var(--gvs-bg-inset);
  color: var(--gvs-text);
}

.gvs-chip {
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--gvs-border);
  background: transparent;
  color: var(--gvs-text-soft);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.gvs-chip:hover {
  border-color: var(--gvs-border-strong);
  color: var(--gvs-text);
}
.gvs-chip.is-active {
  background: color-mix(in srgb, var(--gvs-brand) 16%, transparent);
  border-color: color-mix(in srgb, var(--gvs-brand) 45%, transparent);
  color: var(--gvs-brand);
}

.gvs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gvs-card {
  --gvs-accent: var(--gvs-border-strong);
  background: var(--gvs-bg-raised);
  border: 1px solid var(--gvs-border);
  border-left: 3px solid var(--gvs-accent);
  border-radius: var(--gvs-radius);
  padding: 10px var(--gvs-pad);
  transition: background 120ms ease, border-color 120ms ease;
}
.gvs-card.gv-selectable:hover {
  background: var(--gvs-bg-hover);
  border-color: var(--gvs-border-strong);
  border-left-color: var(--gvs-accent);
}
.gvs-card.gv-view-card-btn {
  cursor: pointer;
}
.gvs-card.gv-view-card-btn:hover,
.gvs-card.gv-view-card-btn:focus-visible {
  background: var(--gvs-bg-hover);
  border-color: var(--gvs-border-strong);
  border-left-color: var(--gvs-accent);
  outline: none;
}
.gv-turn-attach-btn {
  color: var(--gvs-brand);
  background: color-mix(in srgb, var(--gvs-brand) 9%, transparent);
  border-color: color-mix(in srgb, var(--gvs-brand) 34%, var(--gvs-border));
  flex: 0 0 auto;
}
.gv-turn-attach-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gv-turn-attach-btn:hover,
.gv-turn-attach-btn:focus-visible {
  color: var(--gvs-brand);
  border-color: color-mix(in srgb, var(--gvs-brand) 55%, var(--gvs-border));
}
.gvs-latest-showcase {
  position: relative;
  overflow: hidden;
  margin: 4px 0 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--gvs-brand) 42%, var(--gvs-border));
  border-radius: 12px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--gvs-brand) 9%, var(--gvs-bg-inset)),
    var(--gvs-bg-inset) 48%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 32px rgba(0, 0, 0, 0.18);
}
.gvs-latest-showcase::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--gvs-brand),
    color-mix(in srgb, var(--gvs-info) 65%, transparent),
    transparent 82%
  );
}
.gvs-latest-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 12px;
}
.gvs-latest-mark {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 2px solid var(--gvs-text-title);
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.94;
}
.gvs-latest-mark::before,
.gvs-latest-mark::after {
  content: "";
  position: absolute;
  right: -1px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--gvs-text-title);
}
.gvs-latest-mark::before {
  top: 6px;
  transform: rotate(-24deg);
}
.gvs-latest-mark::after {
  bottom: 6px;
  transform: rotate(24deg);
}
.gvs-latest-mark span {
  position: absolute;
  left: -4px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gvs-brand);
  box-shadow: 0 0 12px color-mix(in srgb, var(--gvs-brand) 70%, transparent);
}
.gvs-latest-brand {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.gvs-latest-brand span {
  color: var(--gvs-brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.gvs-latest-brand strong {
  color: var(--gvs-text-title);
  font-size: 22px;
  font-weight: 680;
  line-height: 1.08;
  letter-spacing: -0.35px;
}
.gvs-latest-published {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--gvs-ok) 34%, var(--gvs-border));
  border-radius: 999px;
  color: var(--gvs-ok);
  background: color-mix(in srgb, var(--gvs-ok) 8%, transparent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gvs-card.is-latest {
  padding: 16px;
  border-left-width: 4px;
  background: color-mix(
    in srgb,
    var(--gvs-bg-raised) 94%,
    var(--gvs-text-title)
  );
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}
.gvs-card.is-latest .gvs-card-title {
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.18px;
}
.gvs-card.is-latest .gvs-card-sub {
  margin-top: 3px;
  font-size: 12px;
}
.gvs-latest-age {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  color: var(--gvs-text-muted);
}
.gvs-latest-age span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.gvs-latest-age strong {
  color: var(--gvs-text-title);
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 750;
  letter-spacing: -0.7px;
  line-height: 1;
}
@media (max-width: 520px) {
  .gvs-latest-showcase {
    padding: 11px;
  }
  .gvs-latest-hero {
    margin-bottom: 10px;
  }
  .gvs-latest-published {
    display: none;
  }
  .gvs-card.is-latest {
    padding: 13px;
  }
  .gvs-card.is-latest .gvs-card-title {
    font-size: 16px;
  }
}
.gvs-turn-tools,
.gvs-earlier-turns {
  margin: 0 0 10px;
  border: 1px solid var(--gvs-border);
  border-radius: var(--gvs-radius);
  background: var(--gvs-bg-inset);
}
.gvs-turn-tools > summary,
.gvs-earlier-turns > summary {
  padding: 9px 11px;
  color: var(--gvs-text-soft);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  list-style-position: inside;
  -webkit-user-select: none;
  user-select: none;
}
.gvs-turn-tools[open] > summary,
.gvs-earlier-turns[open] > summary {
  border-bottom: 1px solid var(--gvs-border);
  color: var(--gvs-text-title);
}
.gvs-turn-tools-body {
  padding: 10px;
}
.gvs-earlier-turns .gv-turns-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}
/* gv.creds click-to-expand cards (is-expandable, not gv-selectable): the head
   is the expand target, so it shows a pointer; the card raises on hover. */
.gvs-card.is-expandable [data-cred-head] {
  cursor: pointer;
}
.gvs-card.is-expandable:hover {
  background: var(--gvs-bg-hover);
  border-color: var(--gvs-border-strong);
  border-left-color: var(--gvs-accent);
}
.gvs-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gvs-card-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gvs-text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gvs-card-sub {
  font-size: 12px;
  color: var(--gvs-text-soft);
  margin-top: 2px;
}
.gvs-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--gvs-text-muted);
  margin-top: 6px;
}
.gvs-card-meta span {
  white-space: nowrap;
}

.gvs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--gvs-text-soft);
  background: color-mix(in srgb, var(--gvs-text-muted) 14%, transparent);
}
.gvs-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.gvs-badge.tone-ok {
  color: var(--gvs-ok);
  background: color-mix(in srgb, var(--gvs-ok) 14%, transparent);
}
.gvs-badge.tone-info {
  color: var(--gvs-info);
  background: color-mix(in srgb, var(--gvs-info) 14%, transparent);
}
.gvs-badge.tone-warn {
  color: var(--gvs-warn);
  background: color-mix(in srgb, var(--gvs-warn) 14%, transparent);
}
.gvs-badge.tone-error {
  color: var(--gvs-error);
  background: color-mix(in srgb, var(--gvs-error) 14%, transparent);
}
.gvs-badge.tone-data {
  color: var(--gvs-data);
  background: color-mix(in srgb, var(--gvs-data) 14%, transparent);
}
.gvs-badge.tone-special {
  color: var(--gvs-special);
  background: color-mix(in srgb, var(--gvs-special) 14%, transparent);
}
.gvs-badge.tone-neutral {
  color: var(--gvs-text-soft);
}
.gvs-badge.tone-attn {
  color: var(--gvs-attn);
  background: color-mix(in srgb, var(--gvs-attn) 14%, transparent);
}
.gvs-badge.no-dot::before {
  display: none;
}

/* Text-tone utilities — wiring swaps these instead of mutating style.color */
.gvs-tone-ok {
  color: var(--gvs-ok);
}
.gvs-tone-info {
  color: var(--gvs-info);
}
.gvs-tone-warn {
  color: var(--gvs-warn);
}
.gvs-tone-error {
  color: var(--gvs-error);
}
.gvs-tone-data {
  color: var(--gvs-data);
}
.gvs-tone-special {
  color: var(--gvs-special);
}
.gvs-tone-attn {
  color: var(--gvs-attn);
}
.gvs-tone-neutral {
  color: var(--gvs-text-muted);
}

.gvs-btn {
  min-height: 32px;
  padding: 5px 12px;
  border-radius: var(--gvs-radius-sm);
  border: 1px solid var(--gvs-border-strong);
  background: var(--gvs-bg-raised);
  color: var(--gvs-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.gvs-btn:hover {
  border-color: var(--gvs-info);
  color: var(--gvs-text-title);
}
.gvs-btn.is-primary {
  background: var(--gvs-ok);
  border-color: var(--gvs-ok);
  color: #1e1e1e;
}
.gvs-btn.is-primary:hover {
  filter: brightness(1.08);
  color: #1e1e1e;
}
.gvs-btn.is-danger {
  background: color-mix(in srgb, var(--gvs-error) 14%, transparent);
  border-color: color-mix(in srgb, var(--gvs-error) 45%, transparent);
  color: var(--gvs-error);
}
.gvs-btn.is-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--gvs-text-muted);
}
.gvs-btn.is-ghost:hover {
  color: var(--gvs-text);
  border-color: var(--gvs-border);
}
.gvs-btn.is-sm {
  min-height: 26px;
  padding: 3px 9px;
  font-size: 11px;
}

/* Anchored dropdown menu (Change State etc.) */
.gvs-menu {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  background: var(--gvs-bg-raised);
  border: 1px solid var(--gvs-border-strong);
  border-radius: var(--gvs-radius-sm);
  padding: 4px;
  min-width: 130px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
.gvs-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}
.gvs-menu button:hover {
  background: var(--gvs-bg-hover);
}

.gvs-empty {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--gvs-border-strong);
  border-radius: var(--gvs-radius);
  color: var(--gvs-text-muted);
}
.gvs-empty-icon {
  font-size: 22px;
  margin-bottom: 6px;
}
.gvs-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gvs-text);
  margin-bottom: 4px;
}
.gvs-empty-hint {
  font-size: 12px;
  margin-bottom: 10px;
}
.gvs-head-hint {
  font-size: 11px;
  font-style: italic;
  color: var(--gvs-text-muted);
}
.gvs-label {
  display: block;
  color: var(--gvs-text-muted);
  font-size: 11px;
  margin-bottom: 4px;
}
.gvs-hint {
  color: var(--gvs-text-muted);
  font-size: 10px;
  margin-top: 2px;
}
.gvs-btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--gvs-info);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.gvs-btn-link:hover {
  text-decoration: underline;
}

/* ── gvSettings modal (gv.creds stage 2) ──
   Backdrop hidden by default; panel wiring toggles style.display
   flex/none and owns backdrop-click + Escape dismissal. */
.gvs-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gvs-modal {
  background: var(--gvs-bg-canvas);
  border: 1px solid var(--gvs-border-strong);
  border-radius: var(--gvs-radius);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
}
.gvs-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.gvs-modal-title {
  color: var(--gvs-text-title);
  font-weight: 600;
  font-size: 16px;
}
.gvs-modal-x {
  background: none;
  border: none;
  color: var(--gvs-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.gvs-modal-x:hover {
  color: var(--gvs-text);
}
.gvs-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.gvs-modal-status {
  color: var(--gvs-text-muted);
  font-style: italic;
  font-size: 11px;
  margin-right: auto;
}

/* ── gvSettings option card (wizard pickers) ── */
.gvs-option {
  --gvs-accent: var(--gvs-border-strong);
  display: block;
  width: 100%;
  text-align: left;
  background: var(--gvs-bg-raised);
  border: 1px solid var(--gvs-border);
  border-left: 3px solid var(--gvs-accent);
  border-radius: var(--gvs-radius-sm);
  color: var(--gvs-text);
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
}
.gvs-option:hover {
  background: var(--gvs-bg-hover);
  border-color: var(--gvs-border-strong);
  border-left-color: var(--gvs-accent);
}
.gvs-option-title {
  display: block;
  color: var(--gvs-text-title);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}
.gvs-option-hint {
  display: block;
  color: var(--gvs-text-muted);
  font-size: 11px;
  line-height: 1.5;
}

/* ── gvSettings well (deep card-body info boxes) ── */
.gvs-well {
  --gvs-accent: var(--gvs-border-strong);
  margin-top: 8px;
  background: var(--gvs-bg-inset);
  border: 1px solid var(--gvs-border);
  border-left: 3px solid var(--gvs-accent);
  border-radius: var(--gvs-radius-sm);
  padding: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--gvs-text);
}
.gvs-well-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.gvs-well-label {
  color: var(--gvs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}
.gvs-well-sub {
  color: var(--gvs-text-muted);
  font-size: 10px;
}
.gvs-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.gvs-cell {
  background: var(--gvs-bg-raised);
  border-radius: 5px;
  padding: 6px 8px;
}
.gvs-cell-label {
  color: var(--gvs-text-muted);
  font-size: 10px;
  text-transform: uppercase;
}

/* ── gvSettings card-body controls (gv.creds stage 3) ── */
.gvs-controls {
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.gvs-controls.has-rule {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gvs-border);
}
.gvs-status-pip {
  margin-left: auto;
  color: var(--gvs-text-muted);
  font-style: italic;
  font-size: 10px;
}
.gvs-btn-tint {
  --gvs-accent: var(--gvs-info);
  background: color-mix(in srgb, var(--gvs-accent) 13%, transparent);
  color: var(--gvs-accent);
  border: 1px solid var(--gvs-accent);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}
.gvs-btn-tint[disabled] {
  background: var(--gvs-bg-raised);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.85;
}
.gvs-chip.is-on {
  color: var(--gvs-accent);
  border-color: color-mix(in srgb, var(--gvs-accent) 45%, transparent);
  background: color-mix(in srgb, var(--gvs-accent) 14%, transparent);
  font-weight: 600;
}
.gvs-chip.is-error {
  color: var(--gvs-error);
  border-color: color-mix(in srgb, var(--gvs-error) 45%, transparent);
  background: color-mix(in srgb, var(--gvs-error) 14%, transparent);
}
/* OS-style switch. The knob's left offset is INLINE state — the creds
   wiring probes knob.style.left at click time; never move it to a class. */
.gvs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--gvs-text-muted);
  font-size: 11px;
}
.gvs-toggle.is-on {
  color: var(--gvs-accent);
}
.gvs-toggle.is-disabled {
  cursor: not-allowed;
  opacity: 0.85;
}
.gvs-toggle-track {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 14px;
  background: var(--gvs-border-strong);
  border-radius: 7px;
  transition: background 0.15s;
}
.gvs-toggle.is-on .gvs-toggle-track {
  background: color-mix(in srgb, var(--gvs-accent) 27%, transparent);
}
.gvs-toggle-knob {
  position: absolute;
  top: 2px;
  width: 10px;
  height: 10px;
  background: var(--gvs-text-muted);
  border-radius: 50%;
  transition: left 0.15s;
}
.gvs-toggle.is-on .gvs-toggle-knob {
  background: var(--gvs-accent);
}
.gvs-pre {
  background: var(--gvs-bg-raised);
  padding: 8px;
  border-radius: 4px;
  margin: 4px 0;
  color: var(--gvs-ok);
  font-family: monospace;
  font-size: 11px;
  overflow-x: auto;
  white-space: pre-wrap;
}
/* 36px square icon-button modifier — composes with .gvs-btn-tint. */
.gvs-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
}
/* Accent-tinted pill select (inline tier editor on card heads). */
.gvs-select.is-pill {
  --gvs-accent: var(--gvs-warn);
  background: color-mix(in srgb, var(--gvs-accent) 13%, transparent);
  color: var(--gvs-accent);
  border: 1px solid var(--gvs-accent);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  width: auto;
  outline: none;
}
/* Labeled metadata chip grid on card heads. */
.gvs-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
}
.gvs-meta-chip {
  background: var(--gvs-bg-inset);
  border: 1px solid var(--gvs-border);
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.gvs-meta-chip > div:last-child {
  color: var(--gvs-text);
  font-size: 12px;
  line-height: 1.2;
}

/* ── gv.creds stage 5: collapsible cards + filter disclosure ── */
.gvs-card-body {
  display: none;
  margin-top: 8px;
}
.gvs-card.is-expanded .gvs-card-body {
  display: block;
}
.gvs-card-expand {
  background: none;
  border: none;
  color: var(--gvs-text-muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
  flex-shrink: 0;
}
.gvs-card-expand:hover {
  color: var(--gvs-text);
  background: var(--gvs-bg-hover);
}
.gvs-card-expand [data-cred-expand-chevron] {
  display: inline-block;
  transition: transform 0.15s;
}
.gvs-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gvs-text-muted);
}
.gvs-health-dot.tone-ok {
  background: var(--gvs-ok);
}
.gvs-health-dot.tone-info {
  background: var(--gvs-info);
}
.gvs-health-dot.tone-warn {
  background: var(--gvs-warn);
}
.gvs-health-dot.tone-error {
  background: var(--gvs-error);
}
.gvs-health-dot.tone-data {
  background: var(--gvs-data);
}
.gvs-health-dot.tone-special {
  background: var(--gvs-special);
}
.gvs-health-dot.tone-neutral {
  background: var(--gvs-text-muted);
}
.gvs-filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gvs-gap);
  margin-bottom: var(--gvs-gap);
}
/* Collapsed-head trailing controls: one non-shrinking cluster so the title
   truncates instead of the controls wrapping on narrow phones. The head keeps
   a single row even under the global 480px .gv-card-row{flex-wrap:wrap}
   (more specific selector wins). */
.gvs-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.gvs-card.is-expandable .gv-card-row {
  flex-wrap: nowrap;
}
.gvs-card.is-expandable .gv-card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Provider Icon ── */
.gv-provider-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  font-family: -apple-system, sans-serif;
}

/* ── Health Hero ── */
.gv-health-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #1e1e1e;
  border-radius: 8px;
  border-left: 3px solid #22c55e;
  margin-bottom: 8px;
}
.gv-health-hero-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.gv-health-hero-info {
  flex: 1;
}
.gv-health-hero-status {
  font-size: 18px;
  font-weight: 700;
}
.gv-health-hero-meta {
  font-size: 12px;
  color: #7f848e;
  margin-top: 2px;
}

/* ── Resource Gauges ── */
.gv-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.gv-gauge {
  background: #1e1e1e;
  border-radius: 6px;
  padding: 8px 10px;
}
.gv-gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.gv-gauge-label {
  font-size: 11px;
  color: #7f848e;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.gv-gauge-pct {
  font-size: 14px;
  font-weight: 600;
}
.gv-gauge-track {
  height: 6px;
  background: #3d3d3d;
  border-radius: 3px;
  overflow: hidden;
}
.gv-gauge-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 300ms ease;
}

/* ── Subsystem Checks ── */
.gv-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.gv-check-icon {
  font-weight: 700;
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.gv-check-name {
  color: #e0e0e0;
  font-weight: 500;
}
.gv-check-msg {
  color: #7f848e;
  font-size: 11px;
  margin-left: auto;
}

/* ── Import Summary ── */
.gv-import-summary {}
.gv-import-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #1e1e1e;
  border-radius: 8px;
  border-left: 3px solid #22c55e;
  margin-bottom: 8px;
}
.gv-import-hero-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.gv-import-hero-info {
  flex: 1;
}
.gv-import-hero-title {
  font-size: 15px;
  font-weight: 600;
  color: #e0e0e0;
}
.gv-import-hero-sub {
  font-size: 12px;
  color: #7f848e;
}
.gv-import-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  margin-bottom: 2px;
  font-size: 13px;
}
.gv-import-row.gv-import-ok {
  background: #22c55e0a;
}
.gv-import-row.gv-import-err {
  background: #ef44440a;
}
.gv-import-icon {
  font-weight: 700;
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.gv-import-row.gv-import-ok .gv-import-icon {
  color: #22c55e;
}
.gv-import-row.gv-import-err .gv-import-icon {
  color: #e06c75;
}
.gv-import-name {
  color: #e0e0e0;
  font-weight: 500;
}

/* ── Session Dot ── */
.gv-sess-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Quota Section ── */
.gv-quota-section {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #2d2d2d;
}
.gv-quota-section:first-of-type {
  border-top: none;
  margin-top: 6px;
}
.gv-quota-section-label {
  font-size: 10px;
  color: #7f848e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.gv-recommend-bar {
  font-size: 12px;
  color: #7f848e;
  background: #22c55e0a;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid #22c55e;
  margin-bottom: 8px;
}

/* ── Agent Icon ── */
.gv-agent-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Turn Icon ── */
.gv-turn-icon {
  width: 20px;
  font-size: 14px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Module Grouped Routes ── */
.gv-module-group {
  margin-bottom: 8px;
  background: #1e1e1e;
  border-radius: 6px;
  overflow: hidden;
}
.gv-module-group:last-child {
  margin-bottom: 0;
}
.gv-module-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #252525;
  border-bottom: 1px solid #2d2d2d;
}
.gv-module-name {
  font-size: 13px;
  font-weight: 600;
  color: #e5c07b;
  font-family: "Monaco", "Menlo", monospace;
}
.gv-module-count {
  font-size: 11px;
  color: #7f848e;
}
.gv-module-methods {
  font-size: 10px;
  color: #555;
  margin-left: auto;
}

/* ── Routes List (shared) ── */
.gv-routes-list {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
.gv-route-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 12px;
  transition: background 100ms ease;
}
.gv-route-item:hover {
  background: #2d2d2d;
}
.gv-route-method {
  font-family: "Monaco", "Menlo", monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 38px;
  text-align: center;
}
.gv-method-get {
  background: #22c55e22;
  color: #22c55e;
}
.gv-method-post {
  background: #3b82f622;
  color: #61afef;
}
.gv-method-put {
  background: #e5c07b22;
  color: #e5c07b;
}
.gv-method-delete {
  background: #ef444422;
  color: #e06c75;
}
.gv-method-patch {
  background: #cc785c22;
  color: #cc785c;
}
.gv-route-path {
  font-family: "Monaco", "Menlo", monospace;
  color: #56b6c2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gv-route-desc {
  color: #7f848e;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
  flex-shrink: 1;
}

/* JSON card (styled replacement for raw JSON) */
.gv-json-card {
  background: #1e1e1e;
  border-radius: 6px;
  padding: 8px 0;
  overflow: hidden;
}
.gv-json-card-header {
  font-size: 11px;
  color: #7f848e;
  padding: 0 12px 6px;
  border-bottom: 1px solid #2d2d2d;
  margin-bottom: 4px;
}
.gv-json-card-section {
  padding: 4px 0;
  border-bottom: 1px solid #2d2d2d;
}
.gv-json-card-section:last-child {
  border-bottom: none;
}
.gv-json-card-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #e0e0e0;
  padding: 2px 12px 4px;
}
.gv-json-card-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 12px;
  font-size: 12px;
}
.gv-json-card-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.gv-json-card-key {
  color: #7f848e;
  flex-shrink: 0;
  min-width: 80px;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 11px;
}
.gv-json-card-val {
  color: #e0e0e0;
  word-break: break-word;
}
.gv-json-card-nested {
  color: #56b6c2;
  font-style: italic;
}
.gv-json-val-true {
  color: #22c55e;
}
.gv-json-val-false {
  color: #e06c75;
}
.gv-json-val-num {
  color: #e5c07b;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .gv-macro-grid {
    grid-template-columns: 1fr;
  }
  .gv-gauges {
    grid-template-columns: 1fr;
  }
  .gv-route-desc {
    display: none;
  }
  .gv-module-methods {
    display: none;
  }
  .gv-json-card-key {
    min-width: 60px;
  }
  .gv-card-row {
    flex-wrap: wrap;
  }
  /* gv.creds collapsed head stays one row on phones: shrink the icon buttons
     and tighten the cluster gap so five controls fit without wrapping. */
  .gvs-card.is-expandable .gvs-head-actions {
    gap: 4px;
  }
  .gvs-card.is-expandable .gvs-btn-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
/* Very narrow: drop the role badge from the head (still shown in the expanded
   chip row) to reclaim width for the name. */
@media (max-width: 380px) {
  .gvs-card.is-expandable .gvs-head-actions > .gvs-badge {
    display: none;
  }
}

/* Phase 10c: Inbox markdown rendering */
.inbox-markdown h1, .inbox-markdown h2, .inbox-markdown h3 {
  color: #fff;
  margin: 8px 0 4px;
}
.inbox-markdown p {
  margin: 4px 0;
}
.inbox-markdown code {
  background: #2d2d2d;
  padding: 1px 4px;
  border-radius: 3px;
  color: #98c379;
  font-family: monospace;
  font-size: 12px;
}
.inbox-markdown pre code {
  display: block;
  padding: 8px;
  overflow-x: auto;
}
.inbox-markdown a {
  color: #61afef;
}
.inbox-markdown ul, .inbox-markdown ol {
  padding-left: 20px;
  margin: 4px 0;
}
.inbox-markdown blockquote {
  border-left: 3px solid #3d3d3d;
  padding-left: 8px;
  color: #7f848e;
  margin: 4px 0;
}

/* Fold/mobile workspace fit: keep the composer useful without allowing a
   long draft to consume the drawer. Two text rows (2 × 24px) plus the
   textarea's vertical padding/border = 72px. The inline auto-grow height is
   preserved and becomes visible again as soon as the workspace closes. */
[data-tray-state="expanded"][data-tray-active-tab="attach"] .input-row .console-input,
[data-tray-state="expanded"][data-tray-active-tab="browse"] .input-row .console-input,
[data-tray-state="expanded"][data-tray-active-tab="ide"] .input-row .console-input {
  max-height: 72px;
}

/* 2026-08-19j: Add Credential wizard provider tiles (.gvs-tile kit).
   Logo-over-name cards in an auto-fill grid, plus the full-width
   "All providers" folder-box variant. */
.gvs-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.gvs-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px 12px;
  background: var(--gvs-bg-raised, #2d2d2d);
  border: 1px solid var(--gvs-line, #3d3d3d);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.gvs-tile:hover {
  border-color: rgba(240, 193, 75, 0.75);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.gvs-tile-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.gvs-tile-logo svg {
  width: 36px;
  height: 36px;
}
.gvs-tile-name {
  color: var(--gvs-text-title, #fff);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.gvs-tile-sub {
  color: var(--gvs-text-muted, #7f848e);
  font-size: 10px;
  line-height: 1.35;
}
.gvs-tile-folder {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
}
.gvs-tile-folder .gvs-tile-name {
  font-size: 13px;
}
.gvs-tile-folder .gvs-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 2026-08-20: provider tile logos are <img> brand marks from
   /static/img/providers/ (downloaded Simple Icons, brand-colored fills). */
.gvs-tile-logo img {
  width: 34px;
  height: 34px;
  display: block;
}

/* 2026-08-20: inline formatted overlay — rendered markdown shown over the
   raw prompt textarea while it is unfocused (dashboard-console.ts builds it,
   #gv-prompt-render-overlay). Click-through returns to raw editing. */
#gv-prompt-render-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  overflow-y: auto;
  padding: 10px 68px 10px 16px;
  border-radius: var(--prompt-radius, 22px);
  background: #1f1f1f;
  border: 1px solid rgba(240, 193, 75, 0.3);
  color: #e0e0e0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  cursor: text;
  box-sizing: border-box;
}
#gv-prompt-render-overlay p {
  margin: 0 0 6px;
}
#gv-prompt-render-overlay p:last-child {
  margin-bottom: 0;
}
#gv-prompt-render-overlay h3,
#gv-prompt-render-overlay h4,
#gv-prompt-render-overlay h5,
#gv-prompt-render-overlay h6 {
  margin: 4px 0 6px;
  color: #fff;
}
#gv-prompt-render-overlay ul, #gv-prompt-render-overlay blockquote {
  margin: 0 0 6px;
  padding-left: 20px;
}
#gv-prompt-render-overlay blockquote {
  border-left: 3px solid #61afef;
  padding-left: 10px;
  color: #b8bec8;
}
#gv-prompt-render-overlay pre {
  margin: 0 0 6px;
  padding: 8px 10px;
  background: #151515;
  border-radius: 6px;
  overflow-x: auto;
}
#gv-prompt-render-overlay code {
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 12px;
  color: #56b6c2;
}

/* Composer preview typography (element is inline-styled; these cover the
   rendered markdown children). */
#gv-prompt-composer-preview p {
  margin: 0 0 8px;
}
#gv-prompt-composer-preview h3,
#gv-prompt-composer-preview h4,
#gv-prompt-composer-preview h5,
#gv-prompt-composer-preview h6 {
  margin: 6px 0 8px;
  color: #fff;
}
#gv-prompt-composer-preview ul {
  margin: 0 0 8px;
  padding-left: 22px;
}
#gv-prompt-composer-preview blockquote {
  margin: 0 0 8px;
  border-left: 3px solid #61afef;
  padding-left: 10px;
  color: #b8bec8;
}
#gv-prompt-composer-preview pre {
  margin: 0 0 8px;
  padding: 10px 12px;
  background: #151515;
  border-radius: 6px;
  overflow-x: auto;
}
#gv-prompt-composer-preview code {
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 12px;
  color: #56b6c2;
}

/* 2026-08-20b: searchable all-providers list rows (Add Credential wizard). */
.gvs-provider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: var(--gvs-bg-raised, #2d2d2d);
  border: 1px solid var(--gvs-line, #3d3d3d);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 130ms ease;
}
.gvs-provider-row:hover {
  border-color: rgba(240, 193, 75, 0.7);
}
.gvs-provider-row-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
img.gvs-provider-row-icon {
  object-fit: contain;
}
.gvs-provider-row-name {
  color: var(--gvs-text-title, #fff);
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gvs-provider-row-key {
  color: var(--gvs-text-muted, #7f848e);
  font-family: "JetBrains Mono", Monaco, Consolas, monospace;
  font-size: 10px;
}

/* ========================================================================
 * 2026-08-20b: DESKTOP FULL-AREA PANELS
 * On fine-pointer/wide surfaces every expanded tray panel fills the whole
 * console area (nav to input row) — same geometry contract as tray
 * fullscreen — instead of shrink-to-content heights that made placement
 * erratic. Explicit fullscreen modes keep their own rules (z 10020);
 * popped-out panels leave the tray entirely.
 * ======================================================================== */
@media (hover: hover) and (pointer: fine), (min-width: 1025px) {
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"]) .context-tray {
    position: fixed;
    top: var(--tray-mobile-top-offset, calc(var(--nav-height, 44px) + 8px));
    bottom: calc(var(--tray-mobile-bottom-offset, 112px) + env(safe-area-inset-bottom, 0px));
    left: var(--tray-console-left, 0px);
    right: auto;
    transform: none;
    width: var(--tray-console-width, min(100vw, var(--gv-console-max-width, 1400px)));
    z-index: 9000;
    /* !important defeats the attach 72vh / attach-empty 48vh / vault 86dvh
       variant caps — anchored top+bottom supplies the real height. */
    height: auto !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: none;
    border-top: 0;
    background: #1e1e1e;
  }
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"]) .context-tray
    .tray-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"]) .context-tray
    .tray-panel {
    flex: 1 1 auto;
    min-height: 0;
  }
  /* Per-panel inner caps lift so content uses the full height. */
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"])
    .history-list,
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"])
    .file-results,
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"])
    .browse-tree,
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"])
    .browse-preview,
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"])
    #inbox-list,
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"])
    .gv-result-body,
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"])
    .gv-settings-grid.gv-settings-tree {
    max-height: none;
  }
  /* ChitChat sizes its workspace from this var (default 340px). */
  .input-context-component[data-tray-state="expanded"]:not([data-tray-fullscreen="true"]) {
    --gv-chitchat-workspace-height: calc(100dvh - var(--tray-mobile-top-offset, 52px) - var(--tray-mobile-bottom-offset, 112px) - 150px);
  }
  /* 2026-10-08j (owner): an EMPTY Attach panel has nothing to preview, so it
     docks on the input instead of filling the console — the Camera/Gallery/
     File/Paste tiles stay directly above the Attach/Sealed Secret tab row.
     Full-area geometry returns once something is attached or the vault opens. */
  .input-context-component[data-tray-state="expanded"][data-tray-active-tab="attach"][data-attach-empty="true"]:not([data-tray-fullscreen="true"]):not([data-secret-vault="open"]) .context-tray {
    top: auto;
    height: auto !important;
    max-height: calc(100dvh - var(--tray-mobile-top-offset, 52px) - var(--tray-mobile-bottom-offset, 112px)) !important;
  }
  .input-context-component[data-tray-state="expanded"][data-tray-active-tab="attach"][data-attach-empty="true"]:not([data-tray-fullscreen="true"]):not([data-secret-vault="open"]) .context-tray
    .tray-content,
  .input-context-component[data-tray-state="expanded"][data-tray-active-tab="attach"][data-attach-empty="true"]:not([data-tray-fullscreen="true"]):not([data-secret-vault="open"]) .context-tray
    .tray-panel[data-panel="attach"] {
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   2026-08-31 Phase 1 — Tandem Turns composer mode (ws_tandem fragment).
   TT entry button (stacked left of attach + composer buttons), avatar
   strip above the input row, controller join popup, send confirmation
   overlay, and the shared-draft input tint.
   ========================================================================== */
.tt-open-btn {
  position: absolute;
  right: 52px;
  bottom: 50%;
  transform: translateY(50%);
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 36, 36, 0.92);
  border: 1px solid rgba(240, 193, 75, 0.5);
  border-radius: 50%;
  cursor: pointer;
  z-index: 6;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.tt-open-btn:hover {
  border-color: rgba(240, 193, 75, 0.9);
}
.tt-open-btn svg {
  width: 24px;
  height: 24px;
}
.tt-open-btn--active {
  border-color: rgba(240, 193, 75, 1);
  box-shadow: 0 0 8px rgba(240, 193, 75, 0.55);
}
/* Two in-wrap buttons now: TT (52) + follow-me (8); composer slot removed. */
.console-input-wrap:has(.tt-open-btn) .console-input {
  padding-right: 96px;
}
/* Shared-draft tint while a TT session is live. */
.console-input--tt {
  border-color: rgba(240, 193, 75, 0.85) !important;
  box-shadow: 0 0 10px rgba(240, 193, 75, 0.25);
}

/* Avatar strip — sits directly above the input row. */
.tt-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 0 4px 6px 4px;
  background: rgba(36, 36, 36, 0.92);
  border: 1px solid rgba(240, 193, 75, 0.4);
  border-radius: 18px;
  font-size: 12px;
  color: #e0e0e0;
  flex-wrap: wrap;
}
.tt-strip[hidden] {
  display: none;
}
.tt-strip-label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #f0c14b;
  border: 1px solid rgba(240, 193, 75, 0.6);
  border-radius: 6px;
  padding: 1px 6px;
}
.tt-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 2px solid var(--tt-color, #61afef);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.tt-avatar--offline {
  opacity: 0.45;
  border-style: dashed;
}
.tt-avatar--away {
  opacity: 0.58;
  box-shadow: 0 0 0 2px #2d2d2d, 0 0 0 3px var(--tt-color, #61afef);
}
.tt-avatar-star {
  position: absolute;
  top: -7px;
  right: -5px;
  font-size: 9px;
  color: #f0c14b;
}
.tt-strip-attach {
  color: #e5c07b;
  font-size: 11px;
}
.tt-strip-status {
  color: #98c379;
  font-size: 11px;
  flex: 1 1 auto;
}
.tt-strip-leave {
  background: none;
  border: 1px solid #3d3d3d;
  color: #7f848e;
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 11px;
  cursor: pointer;
}
.tt-strip-leave:hover {
  color: #e06c75;
  border-color: #e06c75;
}

/* Controller join accept/reject popup — anchored above the input row. */
.tt-join-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 12px;
  z-index: 60;
}
.tt-join-popup[hidden] {
  display: none;
}
.tt-join-card {
  background: #242424;
  border: 1px solid rgba(240, 193, 75, 0.6);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 240px;
  max-width: 320px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  color: #e0e0e0;
}
.tt-join-title {
  color: #f0c14b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tt-join-body {
  line-height: 1.45;
}
.tt-join-more {
  color: #7f848e;
  font-size: 11px;
  margin-top: 4px;
}
.tt-join-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.tt-join-accept,
.tt-join-reject {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tt-join-accept {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
}
.tt-join-reject {
  background: #2d2d2d;
  color: #e06c75;
  border: 1px solid #3d3d3d;
}

/* Send confirmation overlay — confirm, then frozen "sending" state. */
.tt-send-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(2px);
}
.tt-send-overlay[hidden] {
  display: none;
}
.tt-overlay-card {
  background: #242424;
  border: 1px solid rgba(240, 193, 75, 0.6);
  border-radius: 12px;
  padding: 20px;
  width: min(480px, calc(100vw - 48px));
  max-height: 70vh;
  overflow: auto;
  color: #e0e0e0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.tt-overlay-title {
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}
.tt-overlay-meta {
  color: #7f848e;
  font-size: 12px;
  margin-bottom: 8px;
}
.tt-overlay-preview {
  background: #1a1a1a;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
  color: #e0e0e0;
  margin: 8px 0;
}
.tt-overlay-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.tt-overlay-send {
  flex: 1;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
  cursor: pointer;
}
.tt-overlay-cancel {
  flex: 1;
  background: #2d2d2d;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 14px;
  padding: 10px 0;
  cursor: pointer;
}
.tt-overlay-spinner {
  width: 28px;
  height: 28px;
  margin: 12px auto 2px auto;
  border: 3px solid #3d3d3d;
  border-top-color: #f0c14b;
  border-radius: 50%;
  animation: tt-spin 0.9s linear infinite;
}
@keyframes tt-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 480px) {
  .tt-open-btn {
    right: 48px;
  }
  .console-input-wrap:has(.tt-open-btn) .console-input {
    padding-right: 88px;
  }
}

/* 2026-08-31h — TT shared attachment chips in the avatar strip. */
.tt-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(229, 192, 123, 0.12);
  border: 1px solid rgba(229, 192, 123, 0.45);
  border-radius: 10px;
  padding: 2px 4px 2px 8px;
  color: #e5c07b;
  font-size: 11px;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
}
.tt-attach-remove {
  background: rgba(224,108,117,.10);
  border: 1px solid rgba(224,108,117,.42);
  border-radius: 6px;
  color: #e06c75;
  font: 600 11px Inter, -apple-system, sans-serif;
  min-height: 32px;
  padding: 6px 9px;
  cursor: pointer;
}
.tt-attach-remove:hover {
  color: #e06c75;
}
.tt-attach-edit {
  background: linear-gradient(180deg,#303a47,#252c35);
  border: 1px solid rgba(86,182,194,.42);
  border-radius: 6px;
  color: #9bd8df;
  cursor: pointer;
  font: 600 11px Inter, -apple-system, sans-serif;
  min-height: 32px;
  padding: 6px 9px;
}
.tt-attach-edit:disabled { cursor:not-allowed; opacity:.45; }
.tt-attach-actions { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; }
.tt-strip-invite,
.tt-strip-follow {
  border: 1px solid rgba(97,175,239,.45);
  border-radius: 7px;
  background: rgba(97,175,239,.12);
  color: #61afef;
  cursor: pointer;
  font: 600 10px Inter,-apple-system,sans-serif;
  padding: 4px 7px;
}
.tt-strip-follow { border-color: rgba(152,195,121,.55); color: #98c379; background: rgba(152,195,121,.12); }
.tt-follow-status {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--tray-mobile-bottom-offset, 92px) + 14px);
  z-index: 1090;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--selected-node-color, #98c379) 72%, #98c379);
  border-radius: 999px;
  background: rgba(30, 30, 30, .96);
  color: #e0e0e0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .48), 0 0 0 2px rgba(152, 195, 121, .1);
  cursor: pointer;
  font: 600 12px Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 7px 9px 7px 12px;
}
.tt-follow-status[hidden] { display: none; }
.tt-follow-status:hover { border-color: #98c379; transform: translateY(-1px); }
.tt-follow-status:focus-visible { outline: 2px solid #e5c07b; outline-offset: 3px; }
.tt-follow-status-exit {
  border-radius: 999px;
  background: rgba(224, 108, 117, .16);
  color: #e06c75;
  padding: 3px 7px;
}
@media (max-width: 600px) {
  .tt-follow-status {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(var(--tray-mobile-bottom-offset, 82px) + 8px);
    max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}
.tt-invite-dialog {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.72);
}
.tt-invite-card {
  width: min(440px,100%);
  padding: 18px;
  border: 1px solid #4a4a4a;
  border-radius: 10px;
  background: #2d2d2d;
  color: #e0e0e0;
  box-shadow: 0 18px 60px rgba(0,0,0,.62);
  font-family: Inter,-apple-system,sans-serif;
}
.tt-invite-card h3 { color: #fff; margin: 0 0 6px; font-size: 18px; }
.tt-invite-org { color: #e5c07b; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.tt-invite-org[hidden] { display: none; }
.tt-invite-card p { color: #aeb5bf; margin: 0 0 14px; font-size: 12px; line-height: 1.5; }
.tt-invite-card label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tt-invite-search-label { flex-direction:column; align-items:stretch !important; color:#aeb5bf; margin:10px 0 8px; }
.tt-invite-search-label input { min-height:40px; border:1px solid #4b5563; border-radius:8px; background:#181818; color:#fff; padding:8px 11px; font:500 13px Inter,-apple-system,sans-serif; }
.tt-invite-user-list { display:grid; gap:7px; max-height:min(44vh,340px); overflow:auto; padding:2px; }
.tt-invite-loading,.tt-invite-empty { padding:24px 12px; border:1px dashed #4b5563; border-radius:9px; color:#7f848e; text-align:center; font-size:12px; }
.tt-invite-loading { display:flex; flex-direction:column; gap:6px; }
.tt-invite-loading strong { color:#9ecbff; font-size:13px; }
.tt-directory-meta { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border:1px solid rgba(152,195,121,.35); border-radius:8px; background:rgba(32,42,35,.96); color:#b8e59e; font-size:10px; backdrop-filter:blur(8px); }
.tt-directory-meta button { min-height:26px; padding:3px 8px; border-color:rgba(152,195,121,.45); background:transparent; color:#b8e59e; }
.tt-invite-empty span { display:block; margin-bottom:10px; }
.tt-invite-empty [data-tt-invite-retry] { border:1px solid #61afef; border-radius:8px; background:#61afef1f; color:#9ecbff; padding:7px 12px; cursor:pointer; font:inherit; }
.tt-invite-empty [data-tt-invite-retry]:hover,.tt-invite-empty [data-tt-invite-retry]:focus-visible { background:#61afef38; outline:2px solid #61afef55; outline-offset:2px; }
.tt-invite-user-card { display:grid !important; grid-template-columns:auto 38px minmax(0,1fr) 24px; align-items:center !important; gap:10px !important; margin:0 !important; padding:8px 10px; border:1px solid #3d4652; border-radius:9px; background:linear-gradient(135deg,#292d34,#22252a); cursor:pointer; }
.tt-invite-user-card:hover { border-color:#61afef; }
.tt-invite-user-card:has(input:checked) { border-color:#98c379; background:linear-gradient(135deg,rgba(152,195,121,.16),#242a25); }
.tt-invite-user-card input { width:16px; height:16px; accent-color:#98c379; }
.tt-invite-avatar { width:36px; height:36px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:50%; border:2px solid rgba(97,175,239,.65); background:#1e1e1e; color:#fff; font-weight:700; }
.tt-invite-avatar img { width:100%; height:100%; object-fit:cover; }
.tt-invite-identity { min-width:0; display:flex; flex-direction:column; }
.tt-invite-identity strong { color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-invite-identity small { color:#7f848e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-invite-check { color:#98c379; opacity:0; font-size:18px; }
.tt-invite-user-card:has(input:checked) .tt-invite-check { opacity:1; }
.tt-invite-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:14px; }
.tt-invite-actions [data-tt-invite-count] { margin-right:auto; color:#7f848e; font-size:11px; }
.tt-invite-card button { min-height: 38px; border: 1px solid #555; border-radius: 7px; background: #333; color: #e0e0e0; padding: 7px 12px; cursor: pointer; }
.tt-invite-card .tt-invite-send { border-color: #98c379; background: #2f4a2d; color: #b8e59e; }

/* ==========================================================================
   2026-08-31i — Fullscreen Tandem Turns Composer + remote cursor carets.
   ========================================================================== */
.tt-strip-expand {
  background: none;
  border: 1px solid rgba(240, 193, 75, 0.5);
  color: #f0c14b;
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
}
.tt-strip-expand:hover {
  border-color: rgba(240, 193, 75, 0.95);
}

.tt-caret-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.tt-caret {
  position: absolute;
  width: 0.62em;
  height: 1.2em;
  background: var(--tt-color, #61afef);
  border-radius: 2px;
  opacity: 0.48;
}
.tt-remote-selection {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tt-color, #61afef) 28%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tt-color, #61afef) 78%, transparent);
}
.tt-caret-flag {
  position: absolute;
  top: -14px;
  left: -2px;
  background: var(--tt-color, #61afef);
  color: #111111;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px 3px 3px 0;
  white-space: nowrap;
  opacity: 0.92;
}
.tt-caret-edge {
  position: absolute;
  right: 10px;
  z-index: 7;
  color: var(--tt-color, #61afef);
  background: #171717e8;
  border: 1px solid var(--tt-color, #61afef);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
}
.tt-caret-edge--top { top: 8px; }
.tt-caret-edge--bottom { bottom: 8px; }

.tt-composer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(2px);
}
.tt-composer[hidden] {
  display: none;
}
.tt-composer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #1e1e1e;
  border: 1px solid rgba(240, 193, 75, 0.65);
  border-radius: 10px;
  /* 2026-09-17: the TT Composer fills the whole desktop console area (full
     viewport minus a slim gutter) — it is the workspace, not a dialog.
     gvTandemSizeComposer writes matching inline sizes on every viewport
     change; phones keep their compact-card contract via the 600px override. */
  width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  resize: none;
  min-width: 320px;
  min-height: 360px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 16px);
}
.tt-composer-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 14px 0;
  padding: 9px 10px;
  background: linear-gradient(135deg, rgba(45,45,45,.96), rgba(36,40,48,.96));
  border: 1px solid rgba(97,175,239,.2);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 16px rgba(0,0,0,.16);
}
.tt-tool,
.tt-composer-utility {
  min-height: 30px;
  padding: 5px 10px;
  background: linear-gradient(180deg,#363b45,#292d35);
  border: 1px solid rgba(97,175,239,.3);
  border-radius: 7px;
  color: #e8edf5;
  font: 600 11px Inter,-apple-system,sans-serif;
  cursor: pointer;
}
.tt-tool:hover,
.tt-composer-utility:hover,
.tt-tool--active {
  border-color: rgba(240,193,75,.8);
  color: #f0c14b;
}
.tt-tool--image { color: #61afef; }
.tt-tool-hint { margin-left: auto; color: #7f848e; font-size: 10px; font-style: italic; }
.tt-composer-hero {
  position: relative;
  padding: 18px 22px 14px 22px;
  border-bottom: 1px solid #3d3d3d;
  background: #242424;
}
.tt-composer-eyebrow {
  color: #f59e0b;
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.tt-composer-title {
  color: #ffffff;
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 600;
}
.tt-composer-sub {
  color: #7f848e;
  margin: 0;
  font-size: 13px;
}
.tt-run-config-menu {
  position: relative;
  flex: 0 1 auto;
}
.tt-run-config-menu > summary {
  list-style: none;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 30px;
  box-sizing: border-box;
  padding: 6px 24px 5px 10px;
  border: 1px solid rgba(152,195,121,.42);
  border-radius: 7px;
  background: linear-gradient(180deg,#303a34,#252d29);
  color: #b8e59e;
  cursor: pointer;
  font: 600 11px Inter,-apple-system,sans-serif;
}
.tt-run-config-menu > summary::-webkit-details-marker { display:none; }
.tt-run-config-menu > summary::after { content:'\25BE'; position:absolute; right:9px; top:7px; color:#98c379; }
.tt-run-config-menu[open] > summary { border-color:#98c379; }
.tt-run-config {
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  padding: 12px;
  background: #20242a;
  border: 1px solid #4b5563;
  border-radius: 9px;
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
}
.tt-run-config label { color:#7f848e; font-size:10px; letter-spacing:.5px; text-transform:uppercase; }
.tt-run-config select { display:block; width:100%; margin-top:3px; color:#e0e0e0; background:#1e1e1e; border:1px solid #4b5563; border-radius:6px; padding:7px 8px; font:600 11px Inter,-apple-system,sans-serif; }
.tt-run-config-note { color:#98c379; font-size:10px; white-space:nowrap; }
.tt-composer-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid #3d3d3d;
  border-radius: 50%;
  color: #7f848e;
  font-size: 16px;
  cursor: pointer;
}
.tt-composer-x:hover {
  color: #e06c75;
  border-color: #e06c75;
}
.tt-composer-editorwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.tt-composer-media {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
  background: #20242a;
  border-bottom: 1px solid rgba(86, 182, 194, 0.22);
  flex: 0 0 auto;
}
.tt-composer-media[hidden] { display: none; }
.tt-media-item {
  display: grid;
  grid-template-columns: 54px minmax(100px, 180px) auto;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 5px;
  background: #2d2d2d;
  border: 1px solid rgba(86, 182, 194, 0.35);
  border-radius: 8px;
  color: #d7e8eb;
  cursor: default;
  text-align: left;
  font: 500 11px Inter, -apple-system, sans-serif;
}
.tt-media-item[data-tt-media-state="pending"] { border-style: dashed; opacity: .78; }
.tt-media-item[data-tt-media-state="error"] { border-color: rgba(224,108,117,.65); }
.tt-media-placeholder { width: 54px; text-align: center; font-size: 24px; }
.tt-media-item img { width: 54px; height: 42px; object-fit: cover; border-radius: 5px; background: #111; }
.tt-media-item:hover,
.tt-media-item:focus-visible { border-color: #56b6c2; outline: 2px solid rgba(86,182,194,.28); }
.composer-attachment-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 14px;
  flex: 0 0 auto;
  background: #20242a;
  border-top: 1px solid rgba(86,182,194,.2);
}
.composer-attachment-rail[hidden] { display: none; }
.composer-attachment-row {
  display: grid;
  grid-template-columns: 48px minmax(120px, 190px) auto;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px;
  border: 1px solid rgba(86,182,194,.34);
  border-radius: 8px;
  background: #2d2d2d;
  color: #d7e8eb;
  font: 500 11px Inter,-apple-system,sans-serif;
}
.composer-attachment-row[data-attachment-state="pending"] { border-style: dashed; opacity: .78; }
.composer-attachment-row[data-attachment-state="error"] { border-color: rgba(224,108,117,.65); }
.composer-attachment-row img { width: 48px; height: 38px; object-fit: cover; border-radius: 5px; background: #111; }
.tt-composer-input {
  flex: 1 1 auto;
  width: 100%;
  min-height: 160px;
  resize: none;
  overflow: auto;
  background: #1e1e1e;
  border: none;
  outline: none;
  color: #e0e0e0;
  font-family: 'JetBrains Mono', Monaco, Consolas, monospace;
  font-size: calc(15px + 2pt);
  line-height: 1.6;
  padding: 16px 22px;
  box-sizing: border-box;
}
.tt-composer-preview {
  flex: 1 1 auto;
  min-height: 160px;
  overflow: auto;
  padding: 16px 22px;
  color: #e0e0e0;
  font-size: calc(14px + 2pt);
  line-height: 1.6;
}
.tt-composer-preview .tt-attributed-block {
  position: relative;
  border-radius: 4px;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.tt-composer-preview .tt-attributed-block--active {
  background: color-mix(in srgb, var(--tt-author-color, #7f848e) 9%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tt-author-color, #7f848e) 44%, transparent);
  animation: tt-author-active 1.8s ease forwards;
}
@keyframes tt-author-active { to { background:transparent; box-shadow:none; } }
.tt-composer-preview .tt-attributed-block::before,
.tt-composer-preview .tt-attributed-image::after {
  content: attr(data-tt-author-label);
  position: absolute;
  z-index: 2;
  max-width: min(220px, 70%);
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--tt-author-color, #7f848e) 55%, #242424);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tt-author-color, #7f848e) 14%, #242424);
  color: color-mix(in srgb, var(--tt-author-color, #e0e0e0) 72%, #ffffff);
  font: 600 9px Inter, -apple-system, sans-serif;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.tt-composer-preview .tt-attributed-block::before {
  top: -9px;
  left: 8px;
}
.tt-composer-preview .tt-attributed-block:hover::before,
.tt-composer-preview .tt-attributed-block:focus-within::before,
.tt-composer-preview .tt-attributed-image:hover::after,
.tt-composer-preview .tt-attributed-image:focus-within::after {
  opacity: 1;
  transform: none;
}
.tt-composer-preview .tt-attributed-image {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 8px 0;
  padding: 0;
}
.tt-composer-preview .tt-attributed-image::after {
  right: 8px;
  bottom: 8px;
  opacity: .94;
  transform: none;
}
.tt-composer-preview .tt-attributed-image img { margin: 0 !important; }
.tt-composer-preview[contenteditable="true"] { outline: none; cursor: text; }
.tt-composer-preview[contenteditable="true"]:focus,
.tt-tool:focus-visible,
.tt-composer-utility:focus-visible,
.tt-composer-send:focus-visible,
.tt-composer-leave:focus-visible,
.tt-composer-close:focus-visible,
.tt-composer-x:focus-visible { outline: 2px solid #61afef; outline-offset: 2px; }
.tt-composer--drop .tt-composer-editorwrap {
  outline: 2px dashed #61afef;
  outline-offset: -8px;
  background: rgba(97,175,239,.08);
}
.tt-composer-input[readonly] {
  color: #7f848e;
}
.tt-composer-footer {
  border-top: 1px solid #3d3d3d;
  background: #242424;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.tt-composer-users {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
}
.tt-composer-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.tt-avatar-image { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.tt-composer-send {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
}
.tt-composer-leave,
.tt-composer-close,
.tt-composer-utility {
  background: linear-gradient(180deg,#303a47,#252c35);
  border: 1px solid rgba(86,182,194,.38);
  border-radius: 7px;
  color: #9bd8df;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 13px;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(0,0,0,.18);
}
.tt-composer-utility[data-tt-composer="clear"] {
  border-color: rgba(224,108,117,.38);
  color: #e5a3a9;
}
.tt-composer-utility[data-tt-composer="clear"][data-tt-undo] {
  border-color: rgba(245,158,11,.75);
  color: #f5b34d;
}
.tt-composer-send[data-empty="true"] { opacity: .55; }
.tt-composer-leave:hover {
  color: #e06c75;
  border-color: #e06c75;
}
.tt-image-editor {
  position: absolute;
  inset: 10px;
  z-index: 12;
  display: flex;
  min-height: 0;
  padding: 0;
  background: rgba(21,21,21,.98);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.68);
}
.tt-image-editor--standalone {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(10, 10, 10, 0.92);
}
.tt-image-editor[hidden] { display: none; }
.tt-composer--image-editing .tt-composer-input,
.tt-composer--image-editing .tt-composer-preview { opacity:.24; filter:blur(1px); pointer-events:none; }
.tt-composer--image-editing .tt-caret-layer { display:none; }
.tt-composer--image-editing .tt-image-editor { display: flex; }
.tt-composer--image-editing .tt-composer-card {
  width: min(100vw, 1600px) !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  border-radius: 0 !important;
  resize: none !important;
}
.tt-composer--image-editing .tt-composer-hero,
.tt-composer--image-editing .tt-composer-toolbar,
.tt-composer--image-editing .tt-composer-media,
.tt-composer--image-editing .tt-composer-footer { display:none !important; }
.tt-composer--image-editing .tt-composer-editorwrap { flex:1 1 100%; }
.tt-composer--image-editing .tt-image-editor { inset:0; border-radius:0; }
.tt-image-studio {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1e1e1e;
  border: 1px solid rgba(86, 182, 194, 0.75);
  border-radius: 12px;
  box-shadow: 0 18px 54px rgba(0,0,0,.7);
}
.tt-image-studio-head,
.tt-image-studio-foot {
  position:absolute;
  left:12px;
  right:12px;
  z-index:5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(36,39,44,.9);
  border:1px solid rgba(97,175,239,.24);
  border-radius:10px;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.tt-image-studio-head { top:12px; justify-content: space-between; }
.tt-image-studio-head h3 { margin: 2px 0; color: #fff; font: 600 18px Inter,-apple-system,sans-serif; }
.tt-image-studio-head p { margin: 0; color: #7f848e; font-size: 12px; }
.tt-image-view-controls { display:flex; align-items:center; gap:5px; flex:0 0 auto; }
.tt-image-view-controls button { min-height:30px; min-width:30px; padding:4px 8px; border:1px solid #4b5563; border-radius:7px; background:rgba(24,24,24,.88); color:#e0e0e0; cursor:pointer; font:600 11px Inter,-apple-system,sans-serif; }
.tt-image-view-controls button[aria-pressed="true"] { color:#f0c14b; border-color:#f0c14b; }
.tt-image-view-controls [data-tt-image-action="close"] { border-radius:50%; color:#e06c75; font-size:16px; }
.tt-image-studio-kicker { color: #56b6c2; font-size: 10px; letter-spacing: 1.6px; }
.tt-image-tools {
  position:absolute;
  top:88px;
  left:12px;
  z-index:5;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px;
  width:min(760px,calc(100% - 24px));
  max-height:min(32vh,240px);
  overflow:auto;
  background: rgba(45,45,45,.9);
  border:1px solid rgba(97,175,239,.24);
  border-radius:10px;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.tt-image-tools--collapsed { display:none; }
.tt-image-tools button,
.tt-image-studio-foot button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(97,175,239,.35);
  border-radius: 7px;
  background: #292d35;
  color: #e0e0e0;
  cursor: pointer;
  font: 600 11px Inter,-apple-system,sans-serif;
}
.tt-image-tools button[aria-pressed="true"] { color: #f0c14b; border-color: #f0c14b; }
.tt-image-tools button:disabled { opacity: .42; cursor: default; }
.tt-image-tools label { display: inline-flex; align-items: center; gap: 5px; color: #aeb5bf; font-size: 11px; }
.tt-image-tools input[type="range"] { width: 88px; }
.tt-image-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 8px;
  background-color: #151515;
  background-image: linear-gradient(45deg,#202020 25%,transparent 25%),linear-gradient(-45deg,#202020 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#202020 75%),linear-gradient(-45deg,transparent 75%,#202020 75%);
  background-size: 20px 20px;
  background-position: 0 0,0 10px,10px -10px,-10px 0;
}
.tt-image-stage canvas { display: block; max-width: 100%; max-height: 100%; touch-action: none; box-shadow: 0 6px 24px rgba(0,0,0,.55); cursor: crosshair; transition:width .16s ease,height .16s ease,filter .16s ease; }
.tt-image-stage canvas.tt-image-canvas--before { filter:saturate(.72); cursor:default; }
.tt-image-crop-guide {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed #ffffff;
  outline: 9999px solid rgba(0,0,0,.42);
  box-shadow: 0 0 0 1px rgba(86,182,194,.9), 0 0 18px rgba(86,182,194,.45);
  pointer-events: auto;
  touch-action: none;
  cursor: move;
  z-index: 2;
}
.tt-image-crop-guide[hidden] { display: none; }
.tt-image-stage canvas:focus-visible { outline: 3px solid #61afef; outline-offset: 3px; }
.tt-image-stage [data-tt-image-loading] { position: absolute; color: #7f848e; font-size: 13px; }
.tt-image-stage [data-tt-image-loading][hidden] { display: none; }
.tt-image-studio-foot { bottom:12px; justify-content: flex-end; }
.tt-image-studio-foot [role="status"] { margin-right: auto; color: #7f848e; font-size: 12px; }
.tt-image-studio-foot .tt-image-apply { background: linear-gradient(135deg,#22c55e,#16a34a); border-color: #22c55e; color: #fff; }
/* Join popup must stay reachable above the fullscreen composer. */
.tt-join-popup {
  z-index: 10100;
}
/* 2026-09-17: while a request is showing, ws_tandem re-parents the popup to
   document.body — its old .input-context-component stacking context trapped
   it UNDER body-level blurred overlays (TT composer, prompt composer, image
   studio, hold-expanded Activity), rendering Accept/Reject dimmed and dead.
   At body level it is fixed above every overlay surface. */
body > .tt-join-popup {
  position: fixed;
  right: 16px;
  bottom: 96px;
  left: auto;
  top: auto;
  z-index: 12100;
}
@media (max-width: 600px) {
  .tt-composer-card {
    width: calc(100vw - 12px);
    height: calc(100dvh - 16px);
    min-width: 0;
    min-height: 0;
    resize: none;
  }
  .tt-composer-hero { padding: 10px 14px 8px; }
  .tt-composer-title { font-size: 18px; }
  .tt-composer-sub { font-size: 11px; }
  .tt-composer-input,
  .tt-composer-preview { min-width: 0; min-height: 112px; resize: none; padding: 10px 14px; }
  .tt-composer-toolbar { max-height: 82px; overflow-y: auto; padding: 6px 8px; gap: 5px; }
  .tt-composer-media { padding: 5px 8px; }
  .tt-media-item { grid-template-columns: 42px minmax(90px, 140px) auto; }
  .tt-media-item img { width: 42px; height: 34px; }
  .tt-composer-footer { padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .tt-composer-users { flex:0 0 auto; max-width:34vw; max-height:36px; overflow-x:auto; flex-wrap:nowrap; }
  .tt-composer-actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .tt-composer-send {
    flex: 1;
  }
  .tt-image-editor { min-height: 240px; padding: 0; }
  .tt-image-editor--standalone { padding: 4px; }
  .tt-image-studio { height: 100%; border-radius: 8px; }
  .tt-image-studio-head { padding: 8px 10px; }
  .tt-image-studio-head p { display: none; }
  .tt-image-studio-head { left:6px; right:6px; top:6px; }
  .tt-image-studio-head h3 { max-width:38vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
  .tt-image-studio-kicker { display:none; }
  .tt-image-view-controls { gap:3px; }
  .tt-image-view-controls button { min-width:28px; min-height:28px; padding:3px 6px; }
  .tt-image-tools { top:58px; left:6px; width:calc(100% - 12px); max-height:36vh; overflow-y:auto; padding:5px 7px; }
  .tt-image-studio-foot { padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)); }
  .tt-image-studio-foot { left:6px; right:6px; bottom:calc(6px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .tt-composer-card { height: calc(100dvh - 8px); }
  .tt-composer-hero { padding: 6px 12px; }
  .tt-composer-eyebrow,
  .tt-composer-sub { display: none; }
  .tt-composer-toolbar { max-height: 58px; overflow-y: auto; }
  .tt-composer-input,
  .tt-composer-preview { min-height: 96px; }
  .tt-composer-users { display: none; }
}

/* Turn activity workbench: scoped to gv.eventlog, including narrow trays. */
.gve-workbench { font-family: Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#e0e0e0; min-width:0; padding:14px; border:1px solid #ffffff0b; border-radius:16px; background:radial-gradient(circle at 8% 0%,rgba(245,158,11,.16),transparent 34%),radial-gradient(circle at 92% 8%,rgba(97,175,239,.12),transparent 31%),linear-gradient(180deg,#24272d,#1b1e23); box-shadow:inset 0 1px #ffffff08; }
.gve-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px; border:1px solid #765a31; border-radius:14px; background:linear-gradient(125deg,#44331f,#28303b 68%,#29293a); box-shadow:0 14px 34px #00000038,inset 0 1px #ffffff10; }
.gve-eyebrow { color:#e5b36a; font-size:10px; font-weight:600; letter-spacing:1.8px; }
.gve-hero h3 { margin:7px 0 5px; color:#fff; font-size:22px; font-weight:600; letter-spacing:-.4px; }
.gve-hero p,.gve-empty p { margin:0; color:#a1a7b1; font-size:12px; line-height:1.6; }
.gve-live-count { flex-shrink:0; border:1px solid #668458; background:#98c37918; color:#c2e4aa; padding:7px 10px; border-radius:20px; font-size:11px; box-shadow:0 0 18px #98c37912; }
.gve-toolbar,.gve-actions { display:flex; flex-wrap:wrap; gap:8px; }
.gve-toolbar { margin:14px 0 18px; }
.gve-button { appearance:none; font:inherit; font-size:12px; font-weight:500; line-height:1.3; min-height:38px; padding:9px 13px; border:1px solid #474c56; border-radius:8px; background:#2d3139; color:#dbe1ea; cursor:pointer; transition:background .15s,border-color .15s; }
.gve-button:hover { background:#363d48; border-color:#687589; }
.gve-button:focus-visible,.gve-field :is(input,select,textarea):focus-visible { outline:2px solid #8cbcec; outline-offset:3px; }
.gve-button:disabled { opacity:.45; cursor:wait; }
.gve-button--primary { background:#d9ab6c; color:#211b13; border-color:#d9ab6c; }
.gve-button--primary:hover { background:#efc38a; border-color:#efc38a; }
.gve-button--quiet { background:transparent; }
.gve-button--danger { color:#e6a4a9; background:transparent; border-color:#654248; margin-left:auto; }
.gve-button--danger:hover { background:#482d33; border-color:#a1656f; }
.gve-card.gv-card { position:relative; margin:0 0 14px; padding:18px; overflow:hidden; background:radial-gradient(circle at 100% 0%,#c678dd12,transparent 32%),linear-gradient(145deg,#2d3440,#22262d); border:1px solid #4c5969; border-left:3px solid #61afef; border-radius:12px; box-shadow:0 10px 25px #00000032; }
.gve-card.gv-card::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,#61afef88,#c678dd55,transparent 72%); pointer-events:none; }
.gve-card-top { display:flex; align-items:center; gap:9px; margin-bottom:14px; min-width:0; }
.gve-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#3c4d64; color:#cbdff5; font-size:12px; flex-shrink:0; }
.gve-user { font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gve-state-pill { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid #e5c07b55; border-radius:999px; background:#e5c07b12; color:#edcf8d; font-size:10px; white-space:nowrap; }
.gve-state-pill i { width:6px; height:6px; border-radius:50%; background:#e5c07b; box-shadow:0 0 9px #e5c07b88; }
.gve-running { margin-left:auto; display:flex; align-items:center; gap:6px; color:#a6c894; font-size:11px; flex-shrink:0; }
.gve-running span { width:6px; height:6px; border-radius:50%; background:#98c379; }
.gve-turn-title { margin:0 0 6px; font-size:15px; line-height:1.5; font-weight:550; color:#f0f2f5; overflow-wrap:anywhere; }
.gve-turn-id { color:#9099a7; font:10px 'JetBrains Mono',Monaco,Consolas,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gve-metrics { display:grid; grid-template-columns:1fr 1fr minmax(0,1.5fr); margin:16px 0; padding:0; gap:8px; }
.gve-metrics>div { min-width:0; padding:11px 12px; border:1px solid #435161; border-radius:9px; background:linear-gradient(145deg,#1c222a,#181d23); box-shadow:inset 0 1px #ffffff08; }
.gve-metrics dt { color:#9ba4b1; font-size:10px; margin-bottom:5px; }
.gve-metrics dd { margin:0; color:#e2e7ed; font-size:12px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.gve-panel { margin:12px 0; padding:16px; background:#202329; border:1px solid #414750; border-radius:10px; font-size:12px; line-height:1.65; }
.gve-panel[hidden] { display:none; }
.gve-panel h4 { margin:0; font-size:14px; color:#eef0f4; }
.gve-panel p { margin:8px 0; overflow-wrap:anywhere; }
.gve-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:16px 0; }
.gve-field { display:flex; flex-direction:column; gap:6px; min-width:0; margin-bottom:10px; color:#bac2cd; font-size:11px; }
.gve-field :is(input,select,textarea) { width:100%; min-width:0; min-height:38px; box-sizing:border-box; border:1px solid #4b5360; border-radius:7px; background:#292e36; color:#e0e0e0; padding:8px 10px; font:12px Inter,-apple-system,sans-serif; }
.gve-field textarea { min-height:96px; resize:vertical; line-height:1.6; }
.gve-note { color:#a4adba; font-size:11px; line-height:1.55; }
.gve-effective { list-style:none; margin:10px 0; padding:0; display:grid; gap:6px; }
.gve-effective li { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding:8px 10px; border:1px solid #3a414b; border-radius:7px; background:#1c2026; }
.gve-effective strong { color:#e2e7ed; font-variant-numeric:tabular-nums; }
.gve-source { padding:1px 8px; border-radius:999px; background:#61afef1a; color:#8cbcec; font-size:10px; }
.gve-source--override { background:#e5c07b1f; color:#e5c07b; }
.gve-inherit-note { margin:-4px 0 0; }
.gve-actions { align-items:stretch; margin:0 0 12px; }
.gve-reconnect-note { display:block; box-sizing:border-box; margin:0 0 13px; padding:9px 11px; border-left:2px solid #61afef; border-radius:0 7px 7px 0; background:#61afef0b; overflow-wrap:anywhere; }
.gve-recovery-row { display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid #ffffff12; color:#929ba7; font-size:10px; line-height:1.45; }
.gve-recovery-row .gve-button { flex:0 0 auto; }
.gve-events { max-height:320px; overflow:auto; margin-top:14px; padding:10px; background:#1e2126; border-radius:8px; }
.gve-empty { text-align:center; padding:34px 20px; border:1px dashed #414852; border-radius:12px; }
.gve-empty>span { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#98c37915; color:#b0ce9d; }
.gve-empty h4 { color:#e0e5ec; margin:12px 0 6px; font-size:14px; }
@media(max-width:480px) { .gve-workbench { padding:9px; } .gve-hero { padding:16px; gap:8px; align-items:flex-start; } .gve-hero h3 { font-size:20px; } .gve-live-count { white-space:normal; text-align:center; } .gve-card.gv-card { padding:14px; } .gve-button { min-height:42px; } .gve-actions { display:grid; grid-template-columns:1fr 1fr; } .gve-recovery-row { align-items:flex-start; flex-direction:column; } .gve-button--danger { margin-left:0; } .gve-fields { grid-template-columns:1fr; } }

.interaction-image-preview { position:fixed; inset:0; z-index:10070; display:grid; place-items:center; padding:24px; background:rgba(5,7,10,.86); backdrop-filter:blur(7px); }
.interaction-image-preview-panel { position:relative; display:flex; flex-direction:column; max-width:min(920px,94vw); max-height:92dvh; padding:12px; border:1px solid #52677c; border-radius:12px; background:#171a1f; box-shadow:0 24px 72px #000c; }
.interaction-image-preview-panel>img { display:block; max-width:100%; max-height:calc(92dvh - 64px); object-fit:contain; border-radius:7px; background:#101216; }
.interaction-image-preview-close { position:absolute; top:18px; right:18px; z-index:1; width:34px; height:34px; border:1px solid #ffffff35; border-radius:50%; background:#111c; color:#fff; font:22px/1 Inter,-apple-system,sans-serif; cursor:pointer; }
.interaction-image-preview-close:focus-visible { outline:2px solid #61afef; outline-offset:2px; }
.interaction-image-preview-label { padding:9px 4px 1px; color:#cbd2dc; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Active-turn questions share the in-flow attachment drawer region. */
.native-questions { flex:0 1 auto; min-height:0; height:auto; max-height:max(0px,min(680px,calc(100dvh - var(--nav-height,44px) - 112px))); overflow-y:auto; overscroll-behavior:contain; margin:8px 12px; padding:0 16px 14px; border:1px solid #655338; border-radius:14px; background:linear-gradient(135deg,#302c24,#232426 65%); color:#e0e0e0; font:13px/1.5 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; animation:native-question-reveal 180ms ease-out; scrollbar-width:thin;scrollbar-color:#4b5563 transparent; }
.native-questions[hidden], .native-questions-reopen[hidden] { display:none; }
.native-questions-header { display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:1; padding:12px 0; background:#2b2924; }
.native-questions-title { color:#f0c14b; font-weight:600; font-size:14px; }
.native-questions-subtitle { display:block; color:#aaa69e; font-size:12px; font-weight:400; }
.native-questions button, .native-questions-reopen { font-family:inherit; cursor:pointer; min-height:44px; border-radius:10px; padding:8px 12px; }
.native-questions-collapse { flex-shrink:0; color:#c6bfae; background:#ffffff08; border:1px solid #ffffff20; }
.native-question-fields { max-height:none; overflow:visible; margin-bottom:10px; }
.native-question-form + .native-question-form { margin-top:16px; border-top:1px solid #ffffff18; padding-top:12px; }
.native-question-form > span { display:none; }
.native-question-label { display:block; color:#f4f1eb; font-size:14px; margin:0 0 10px; overflow-wrap:anywhere; }
.native-question-input { box-sizing:border-box; display:block; width:100%; min-height:44px; margin-top:10px; padding:10px 12px; background:#191b1d; color:#fff; border:1px solid #5c5b56; border-radius:10px; font:inherit; font-size:16px; }
.native-question-options { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.native-question-choice { flex:1 1 180px; min-width:0; text-align:left; white-space:normal; overflow-wrap:anywhere; color:#e0e0e0; background:#ffffff06; border:1px solid #ffffff24; line-height:1.4; }
.native-question-choice-detail { display:block; margin-top:3px; font-size:12px; color:#aaa69e; }
.native-question-choice:hover, .native-questions-collapse:hover { background:#ffffff10; }
.native-question-choice[aria-pressed="true"] { border-color:#f0c14b; background:#f0c14b16; color:#ffe19a; }
.native-question-send { background:#f0c14b; border:1px solid #f0c14b; color:#211d13; font-weight:600; }
.native-question-send:disabled { opacity:.55; cursor:default; }
/* Skip: explicit decline for tool-asked (Claude) questions; same family as Collapse. */
.native-question-skip { margin-left:8px; color:#c6bfae; background:#ffffff08; border:1px solid #ffffff20; }
.native-question-skip:hover { background:#ffffff10; }
.native-question-skip:disabled { opacity:.55; cursor:default; }
.native-question-input[readonly] { cursor:default; }
.native-questions [data-receipt] { color:#aaa69e; font-size:12px; margin-top:8px; overflow-wrap:anywhere; }
.native-questions button:focus-visible, .native-question-input:focus-visible, .native-questions-reopen:focus-visible { outline:2px solid #f0c14b; outline-offset:2px; }
.native-questions-reopen { align-self:flex-start; margin:8px 12px; border:1px solid #655338; background:#302c24; color:#f0c14b; font:13px Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
@keyframes native-question-reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:600px) {
 .native-questions { margin:6px 8px; padding:0 12px 12px; max-height:max(0px,min(620px,calc(100dvh - var(--nav-height,44px) - 88px))); }
 .native-question-choice { flex-basis:100%; }
 .native-question-send { width:100%; }
 .native-question-skip { width:100%; margin:8px 0 0; }
}
@media (prefers-reduced-motion:reduce) { .native-questions { animation:none; } }

/* The latest response remains close to steering input; full history owns all receipts. */
.steering-reply { --prompt-color:#7f848e; flex:0 1 auto; position:relative; min-width:0; min-height:0; margin:8px 12px; padding:0 8px 10px; overflow:hidden; border:0; border-radius:14px; background:#232426; box-shadow:0 4px 16px #0002; color:#e0e0e0; font:13px/1.5 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; animation:steering-reply-reveal .32s cubic-bezier(.2,.8,.2,1) both; }
.steering-reply[hidden] { display:none; }
.steering-reply-handle { display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; min-height:52px; box-sizing:border-box; padding:4px 10px; cursor:grab; touch-action:none; user-select:none; }
.steering-reply-title { display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:0; color:rgb(245,158,11); font:600 14px/1.2 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:1.8px; text-transform:uppercase; min-width:0; }
.steering-reply-counter { color:#aaa69e; font-size:11px; font-weight:400; letter-spacing:normal; text-transform:none; white-space:nowrap; }
/* 2026-09-12: the multi-colour gradient top hairline was removed (user request) —
   the drawer is now one consistent colour and the top edge carries a
   drag-to-resize grip (.steering-reply-resize) instead. */
.steering-reply-resize { position:absolute; top:0; left:0; right:0; height:12px; z-index:5; display:flex; align-items:center; justify-content:center; cursor:ns-resize; touch-action:none; }
.steering-reply-resize::before { content:""; width:44px; height:4px; border-radius:3px; background:#ffffff26; transition:background-color .15s ease; }
.steering-reply-resize:hover::before,.steering-reply-resize:focus-visible::before { background:#ffffff4d; }
.steering-reply-resize:focus-visible { outline:2px solid var(--prompt-color); outline-offset:-2px; border-radius:8px; }
@media (prefers-reduced-motion:reduce) { .steering-reply-resize::before { transition:none; } }
/* User-resized drawer height: lift the shell + body caps so the persisted
   pixel value drives the scrollable list in both the composer-scoped mount and
   any standalone mount. !important beats the #tt-composer/#gv-prompt-composer
   id-scoped caps below without depending on selector order. */
.steering-reply[data-user-height] { display:flex!important; flex-direction:column!important; max-height:none!important; contain:layout paint; }
.steering-reply[data-user-height][hidden] { display:none!important; }
.steering-reply[data-user-height] .steering-reply-body { flex:0 0 auto!important; box-sizing:border-box; height:var(--gv-reply-user-height)!important; max-height:var(--gv-reply-user-height)!important; overflow-anchor:none; scrollbar-gutter:stable; }
/* Phone relaxed<->reading breathe (2026-09-22): grip taps trade drawer and
   Activity height — animate the settle so the swap feels natural. Drags stay
   immediate (data-resizing suppresses the transition). */
@media (hover: none) and (pointer: coarse) {
  .steering-reply:not([data-resizing]) .steering-reply-body { transition: height .28s ease, max-height .28s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .steering-reply .steering-reply-body { transition: none !important; }
}
.steering-reply[data-auto-height] { display:flex; flex-direction:column; contain:layout paint; }
.steering-reply[data-auto-height][hidden] { display:none; }
.steering-reply[data-auto-height] .steering-reply-body { flex:0 0 auto; box-sizing:border-box; height:var(--gv-reply-auto-height); max-height:var(--gv-reply-auto-height); overflow-anchor:none; scrollbar-gutter:stable; transition:height .24s cubic-bezier(.2,.8,.2,1),max-height .24s cubic-bezier(.2,.8,.2,1); }
.steering-reply[data-resizing="true"] { animation:none!important; user-select:none; }
.steering-reply[data-resizing="true"] .steering-reply-body { scroll-behavior:auto!important; scroll-snap-type:none!important; overflow-anchor:none; pointer-events:none; will-change:height; }
.steering-reply[data-resizing="true"] .steering-reply-message { animation:none!important; transition:none!important; }
.steering-reply-live { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#98c379; box-shadow:0 0 6px #98c37988; animation:steering-reply-live-pulse 1.6s ease-in-out infinite; }
.steering-reply-live[hidden] { display:none; }
@keyframes steering-reply-live-pulse { 0%,100% { opacity:.45; transform:scale(.85); } 50% { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .steering-reply-live,.steering-reply-working-core::before,.steering-reply-working-core i { animation:none; } }
.steering-reply-badges { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; margin-left:auto; letter-spacing:normal; text-transform:none; }
.steering-reply-working { display:flex; align-items:center; gap:9px; flex:0 0 auto; min-width:0; max-width:100%; min-height:38px; box-sizing:border-box; padding:2px 0; border:0; background:transparent; box-shadow:none; overflow:visible; }
.steering-reply-working[hidden] { display:none; }
.steering-reply-working-logo { display:block; width:28px; height:28px; flex:0 0 28px; object-fit:contain; border-radius:50%; clip-path:circle(50%); }
.steering-reply-working-logo[hidden] { display:none; }
.steering-reply-working-core { position:relative; display:flex; align-items:center; justify-content:center; gap:3px; width:66px; height:28px; flex:0 0 66px; overflow:hidden; }
.steering-reply-working-core::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--prompt-color) 42%,transparent),transparent); animation:steering-reply-scan 1.8s ease-in-out infinite; }
.steering-reply-working-core i { position:relative; width:3px; height:18px; border-radius:999px; background:var(--prompt-color); box-shadow:0 0 6px color-mix(in srgb,var(--prompt-color) 75%,transparent); opacity:.65; transform-origin:center; animation:steering-reply-signal 1.15s ease-in-out infinite alternate; animation-delay:calc(var(--signal-index) * -110ms); }
.steering-reply-working-core i:nth-of-type(1),.steering-reply-working-core i:nth-of-type(7) { height:6px; }
.steering-reply-working-core i:nth-of-type(2),.steering-reply-working-core i:nth-of-type(6) { height:12px; }
.steering-reply-working-core i:nth-of-type(3),.steering-reply-working-core i:nth-of-type(5) { height:20px; }
.steering-reply-working-core i:nth-of-type(4) { height:26px; }
.steering-reply-working-copy { display:flex; flex-direction:column; min-width:0; line-height:1.15; text-transform:uppercase; }
.steering-reply-working-copy strong { overflow:hidden; text-overflow:ellipsis; color:color-mix(in srgb,var(--prompt-color) 78%,#fff); font-size:11px; letter-spacing:1.1px; white-space:nowrap; }
.steering-reply-working-copy span { overflow:hidden; text-overflow:ellipsis; color:#a5adb5; font-size:9px; letter-spacing:1px; white-space:nowrap; }
@keyframes steering-reply-scan { 0%,100% { opacity:.25; transform:scaleX(.35); } 50% { opacity:.9; transform:scaleX(1); } }
@keyframes steering-reply-signal { from { opacity:.3; transform:scaleY(.34); } to { opacity:1; transform:scaleY(1); } }
.steering-reply-controls { display:flex; gap:5px; flex:0 0 auto; position:relative; }
.steering-reply-control-menu { display:flex; gap:5px; position:absolute; z-index:4; top:calc(100% + 4px); right:0; padding:5px; border-radius:12px; background:#202224f2; box-shadow:0 8px 24px #0008; }
.steering-reply-control-menu[hidden] { display:none; }
.steering-reply-control { width:44px; min-height:44px; padding:0; border:1px solid #ffffff20; border-radius:10px; background:#ffffff08; color:#e4d3ab; font:20px Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer; touch-action:manipulation; }
/* The header More-actions toggle stays compact and quiet; the popover controls keep 44px touch targets. */
.steering-reply-control-toggle { width:30px; min-height:30px; border-color:#ffffff12; background:transparent; color:#9b9484; letter-spacing:1px; font-size:13px; line-height:1; border-radius:8px; }
.steering-reply-control-toggle:hover { background:#ffffff0c; color:#cfc6ae; }
.steering-reply-control:hover { background:#ffffff14; }
.steering-reply-control:disabled { opacity:.35; cursor:default; }
.steering-reply-control:focus-visible { outline:2px solid #f0c14b; outline-offset:2px; }
.steering-reply-status[hidden] { display:none; }
.steering-reply-status { flex:0 0 auto; margin:0 0 8px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; color:#aaa69e; pointer-events:none; }
.steering-reply::after { content:attr(data-carousel-intent); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; color:color-mix(in srgb,var(--prompt-color) 65%,#e0e0e0); font-size:12px; letter-spacing:1px; text-transform:capitalize; pointer-events:none; }
.steering-reply[data-carousel-intent="remove"]::after { color:#e5b079; }
.steering-reply-handle:focus-visible,.steering-reply-body:focus-visible { outline:2px solid var(--prompt-color); outline-offset:-2px; border-radius:12px; }
/* 2026-09-17: CSS scroll-snap is OFF on every pointer type — the JS magnetic
   snap (scheduleReplySnap/centerReplySelected) owns centring. Desktop's old
   `y mandatory` + smooth combo re-snapped and animated away the programmatic
   tail-reveal writes, so new live cards never scrolled into view there. */
.steering-reply .steering-reply-body { position:relative; z-index:1; min-width:0; max-height:min(340px,36dvh); overflow-y:auto; overscroll-behavior:contain; scroll-behavior:auto; scroll-snap-type:none; scroll-padding-block:10px; touch-action:pan-y; margin:0; padding:10px; border:0; background:color-mix(in srgb,var(--prompt-color) 5%,#1c1e1f); border-radius:16px; overflow-wrap:anywhere; scrollbar-width:thin; scrollbar-color:#62666e transparent; }
@supports selector(::-webkit-scrollbar) {
  .steering-reply .steering-reply-body { scrollbar-width:auto; scrollbar-color:auto; }
  .steering-reply-body::-webkit-scrollbar { width:6px; height:6px; }
  .steering-reply-body::-webkit-scrollbar-track,
  .steering-reply-body::-webkit-scrollbar-corner { background:transparent; }
  .steering-reply-body::-webkit-scrollbar-thumb { background:#62666e; border-radius:8px; }
  .steering-reply-body::-webkit-scrollbar-thumb:hover { background:#9298a3; }
  .steering-reply-body::-webkit-scrollbar-button { display:none; width:0; height:0; }
}
@media (forced-colors:active) {
  .steering-reply .steering-reply-body { scrollbar-width:auto; scrollbar-color:auto; forced-color-adjust:auto; }
  .steering-reply-body::-webkit-scrollbar-thumb { background:ButtonText; }
}
.steering-reply-body[data-carousel-moving="true"] { user-select:none; will-change:transform,opacity; }
/* Live Turn Interactions list rows: chronological, hoverable, selection-accented.
   Rows share the console stream card language — same corner radius, a faint
   per-author accent border/tint — so a message looks identical while it travels
   drawer → console history. */
.steering-reply .steering-reply-message { position:relative; min-width:0; overflow-wrap:anywhere; padding:14px 16px; border:1px solid color-mix(in srgb,var(--prompt-color) 24%,transparent); border-radius:var(--stream-prompt-radius,24px); background:color-mix(in srgb,var(--prompt-color) 4%,#212325); cursor:pointer; opacity:.9; transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease; }
.steering-reply .steering-reply-message + .steering-reply-message { margin-top:14px; }
.steering-reply .steering-reply-message:hover { opacity:.85; background:color-mix(in srgb,var(--prompt-color) 8%,#232527); border-color:color-mix(in srgb,var(--prompt-color) 38%,transparent); }
/* Active card: unmistakable in any lighting. Full-opacity while the rest dim,
   a solid accent border, a thick accent ring, a heavy accent left rail and a
   strong tint + drop shadow — none of it relies on a subtle low-alpha wash. */
/* 2026-09-12: Active card highlight trimmed — the accent ring is 20% thinner
   (3px→2.4px) so it reads as a clean outline rather than a chunky band, and the
   redundant heavy left rail (::before) is dropped. Full opacity + solid accent
   border + ring + tint + drop shadow still make the active card unmistakable. */
.steering-reply .steering-reply-message[data-selected="true"] { opacity:1; border-color:var(--prompt-color); background:color-mix(in srgb,var(--prompt-color) 24%,#1b1d1f); box-shadow:0 0 0 2.4px color-mix(in srgb,var(--prompt-color) 90%,transparent),0 6px 22px rgba(0,0,0,.55); }
.steering-reply .steering-reply-message[data-reply-collapsible="true"] .prompt-body { position:relative; }
.steering-reply .steering-reply-message[data-reply-collapsible="true"][data-reply-expanded="false"] .prompt-body { position:relative;display:block;contain:paint;max-height:var(--gv-reply-line-clamp,112px)!important;height:auto!important;min-height:0!important;overflow:hidden!important;-webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);mask-image:linear-gradient(to bottom,#000 68%,transparent 100%); }
.steering-reply-more { display:inline-flex; align-items:center; justify-content:flex-end; min-height:28px; margin:0 2px 0 auto; padding:3px 2px; border:0; border-radius:4px; background:transparent; color:color-mix(in srgb,var(--prompt-color) 68%,#d8d8d8); font:600 11px/1 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer; opacity:.82; }
.steering-reply-more::after { content:' ·'; color:color-mix(in srgb,var(--prompt-color) 42%,transparent); }
.steering-reply-more:hover { background:transparent; color:color-mix(in srgb,var(--prompt-color) 86%,#fff); opacity:1; text-decoration:underline; text-underline-offset:3px; }
.steering-reply-more:focus-visible { outline:2px solid var(--prompt-color); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .steering-reply .steering-reply-message { transition:none; } }
/* New rows rise gracefully from the bottom of the drawer viewport. */
.steering-reply .steering-reply-message[data-reply-enter="true"] { animation:steering-reply-row-enter .46s cubic-bezier(.2,.8,.2,1) both; }
@keyframes steering-reply-row-enter { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
/* 2026-10-08 (owner): wide desktop split. native_questions sets
   data-reply-split="true" (fine pointer, drawer >= 960px, 2+ rows, not Reading)
   with --gv-reply-split-top/height = the list's offsetTop/clientHeight. The
   SELECTED card is pinned large on the left at the full list height (absolute
   to the drawer, so scrolling the list never moves it); the other cards sit
   compact in a scrollable right column. Clicking one selects it into the left. */
.steering-reply[data-reply-split="true"] { --gv-reply-split-left: 64%; }
.steering-reply[data-reply-split="true"] .steering-reply-body { position:static; padding-left:calc(var(--gv-reply-split-left) + 16px); }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"] {
  position:absolute; z-index:2; left:18px; top:calc(var(--gv-reply-split-top, 52px) + 10px);
  transform:none;
  width:calc((100% - 16px) * 0.64 - 18px); height:auto; max-height:calc(var(--gv-reply-split-height, 240px) - 20px);
  box-sizing:border-box; margin:0!important; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:#4b5563 transparent;
  animation:steering-reply-split-in .24s ease both;
}
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"] .prompt-body { max-height:none!important; }
/* 2026-10-08f: a COLLAPSED pinned card keeps its measured clamp (native_questions
   fits it to the card cap) and never squeezes its header or Show more pill;
   only the body may shrink, as a last resort. */
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-collapsible="true"][data-reply-expanded="false"] { display:flex; flex-direction:column; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-collapsible="true"][data-reply-expanded="false"] > :not(.prompt-body) { flex-shrink:0; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-collapsible="true"][data-reply-expanded="false"] .prompt-body { flex:0 1 auto; min-height:0!important; max-height:var(--gv-reply-line-clamp,112px)!important; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) {
  margin:0!important; padding:6px 9px; border-radius:10px; font-size:11px; line-height:1.4; cursor:pointer; opacity:.78;
}
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) ~ .steering-reply-message:not([data-selected="true"]) { margin-top:6px!important; }
/* Compact list cards scale their header too (author, age, avatar). Owner
   2026-10-08b: list text is 1pt under the 12px original (11/12/10px), and the
   avatar sets flex-basis too: the base rule's flex:0 0 38px made it a 38x22 oval. */
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) .prompt-body,
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) .prompt-body * { font-size:11px!important; line-height:1.4!important; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) .prompt-username { font-size:12px!important; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) :is(.prompt-time,.prompt-model-chip) { font-size:10px!important; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) .prompt-avatar { width:22px!important; height:22px!important; min-width:22px!important; flex:0 0 22px!important; aspect-ratio:1; font-size:10px!important; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]):hover { opacity:1; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) .prompt-body {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; max-height:4.4em!important;
}
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) .steering-reply-message-actions,
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) .steering-reply-attachments { display:none; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) img { max-height:28px; width:auto; }
/* 2026-10-08e: Show more on a compact list card shows the whole card; the
   right column scrolls. The 3-line clamp above applies only while collapsed. */
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"])[data-reply-expanded="true"] .prompt-body {
  display:block; -webkit-line-clamp:none; line-clamp:none; max-height:none!important; height:auto!important; overflow:visible!important; -webkit-mask-image:none; mask-image:none;
}
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"])[data-reply-expanded="true"] img { max-height:280px; }
/* 2026-10-08g: attached image thumbnails sit in a row after the card body
   (outside every clamp). Keep these after the compact img caps above. */
.steering-reply .steering-reply-gallery { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px; margin-top:8px; }
.steering-reply .steering-reply-gallery-item { display:block; flex:0 0 auto; padding:0; border:1px solid rgba(97,175,239,.4); border-radius:6px; background:#141414; overflow:hidden; cursor:zoom-in; }
.steering-reply .steering-reply-gallery-item:focus-visible { outline:2px solid var(--prompt-color,#61afef); outline-offset:2px; }
.steering-reply .steering-reply-gallery-item img { display:block; width:auto; height:72px; max-width:144px; object-fit:cover; }
.steering-reply .steering-reply-message[data-reply-expanded="true"] .steering-reply-gallery-item img,
.steering-reply[data-reading-full="true"] .steering-reply-gallery-item img { height:200px; max-width:min(360px,100%); object-fit:contain; }
/* The pinned split card is capped at the list height (160px on a 900px
   window), so its thumbnails sit in a column BESIDE the text, not under it. */
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-gallery="true"]:not([data-reply-expanded="true"]) { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-gallery="true"]:not([data-reply-expanded="true"]) > * { grid-column:1; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-gallery="true"]:not([data-reply-expanded="true"]) > .prompt-header { grid-column:1 / -1; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-gallery="true"]:not([data-reply-expanded="true"]) > .steering-reply-gallery { grid-column:2; grid-row:2 / span 2; margin:0 0 0 12px; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"] .steering-reply-gallery { gap:4px; flex-wrap:nowrap; overflow:hidden; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"] .steering-reply-gallery img { height:44px; max-width:88px; }
/* 2026-10-08h: an EXPANDED pinned card expands in place: nothing shrinks, it
   scrolls inside its own list-height cap, thumbnails wrap at 120px. */
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-expanded="true"] > * { flex-shrink:0; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-expanded="true"] .steering-reply-gallery { flex-wrap:wrap; margin-top:8px; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"][data-reply-expanded="true"] .steering-reply-gallery img { height:120px; max-width:min(240px,100%); object-fit:contain; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) .steering-reply-gallery { margin-top:5px; gap:4px; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"]) .steering-reply-gallery img { height:48px; max-height:48px; max-width:96px; }
.steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message:not([data-selected="true"])[data-reply-expanded="true"] .steering-reply-gallery img { height:120px; max-height:120px; max-width:100%; object-fit:contain; }
@keyframes steering-reply-split-in { from { opacity:.6; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .steering-reply[data-reply-split="true"] .steering-reply-body > .steering-reply-message[data-selected="true"] { animation:none; } }
@keyframes steering-reply-reveal { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
/* Console pointer flash when a row is clicked in the drawer. */
.gv-reply-locate-flash { animation:gv-reply-locate-flash 1.2s ease-out; }
@keyframes gv-reply-locate-flash { 0% { box-shadow:0 0 0 3px #61afef88; background-color:#61afef22; } 100% { box-shadow:0 0 0 0 transparent; background-color:transparent; } }
@media (prefers-reduced-motion:reduce) { .gv-reply-locate-flash { animation:none; outline:2px solid #61afef; } }
@media(prefers-reduced-motion:reduce) { .steering-reply,.steering-reply-body,.steering-reply-message { transition:none!important; animation:none!important; scroll-behavior:auto; } }
/* Header mirrors the console card: avatar | name-block, with the age/time
   stacked UNDER the name so the header no longer overpowers the message text. */
.steering-reply .steering-reply-body .prompt-header { display:flex; align-items:center; gap:12px; min-width:0; margin-bottom:6px; }
.steering-reply .prompt-header .prompt-name-block { flex:1 1 auto; min-width:0; }
.steering-reply .prompt-header .prompt-name-row { display:flex; align-items:center; gap:8px; min-width:0; }
.steering-reply .prompt-header .prompt-username { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.steering-reply .prompt-header .steering-reply-update { display:block; flex:none; margin:1px 0 0; font-size:11px; white-space:nowrap; }
.steering-reply-message-actions { display:flex; flex:0 0 auto; align-items:center; gap:5px; margin-left:auto; }
.steering-reply-message-action { display:inline-flex; align-items:center; justify-content:center; gap:5px; box-sizing:border-box; width:30px; min-width:30px; height:30px; padding:0; border:1px solid color-mix(in srgb,var(--prompt-color) 38%,transparent); border-radius:999px; background:color-mix(in srgb,var(--prompt-color) 10%,#17191a); color:color-mix(in srgb,var(--prompt-color) 76%,#fff); font:650 11px/1 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer; }
.steering-reply-message-action:hover { border-color:color-mix(in srgb,var(--prompt-color) 70%,transparent); background:color-mix(in srgb,var(--prompt-color) 20%,#17191a); }
.steering-reply-message-action[data-ack-state="sending"] { opacity:.6; cursor:wait; }
.steering-reply-message-action[data-ack-state="sent"] { border-color:#98c379;color:#98c379;background:#98c37918; }
.steering-reply-message-action[data-ack-state="failed"] { border-color:#e06c75;color:#e06c75; }
.steering-reply-message-action:focus-visible { outline:2px solid var(--prompt-color); outline-offset:2px; }
.steering-reply-message-action-label { display:none; }
/* Round, cover-filled avatar matched to the console card size (38px). The high
   specificity (with .steering-reply-message) beats the leaked console.css
   assistant-avatar img rule so photos fill the circle instead of letterboxing
   into an oval. */
.steering-reply .prompt-avatar { width:38px; height:38px; flex:0 0 38px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:13px; background:#141414; box-shadow:0 2px 8px rgba(0,0,0,0.3); }
.steering-reply .steering-reply-message .prompt-avatar img { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; object-position:center; border-radius:50%; }
.steering-reply .prompt-username { font-weight:600; }
.steering-reply .prompt-body { font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14px; }
.steering-reply .steering-reply-message[data-selected="true"] .prompt-body { font-size:calc(14px + 2pt); }
.steering-reply .user-prompt.steering-reply-body, .steering-reply .user-prompt.steering-reply-message, .steering-reply .user-prompt.steering-reply-message[data-selected="true"] { background:var(--gv-reply-user-background,#212325); color:var(--gv-reply-user-text,#e0e0e0); border-radius:var(--stream-prompt-radius,24px); }
.steering-reply .user-prompt .prompt-body { font-family:var(--stream-prompt-font,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); font-size:var(--stream-prompt-font-size,15px); }
/* The later dashboard inline .console-line.user-prompt rules must not restore
   the original low-contrast foreground over this drawer's checked palette. */
.steering-reply .console-line.user-prompt .prompt-body { color:var(--gv-reply-user-text,#e0e0e0); }
.steering-reply .user-prompt .prompt-username { color:var(--prompt-color); }
.steering-reply .user-prompt .prompt-avatar { background:color-mix(in srgb,var(--prompt-color) 22%,#141414); border:1px solid color-mix(in srgb,var(--prompt-color) 55%,transparent); box-sizing:border-box; }
.steering-reply .console-line.user-prompt .steering-reply-update { color:var(--gv-reply-user-muted,#a8aaa6); }
.steering-reply-markdown { white-space:pre-wrap; line-height:1.6; }
.steering-reply-markdown p,.steering-reply-markdown ul,.steering-reply-markdown ol,.steering-reply-markdown blockquote { margin:0 0 10px; }
.steering-reply-markdown pre { max-width:100%; overflow-x:auto; padding:10px; border-radius:6px; background:#191f1c; white-space:pre; }
.steering-reply-markdown code { font-family:'JetBrains Mono',Monaco,Consolas,monospace; font-size:12px; }
.steering-reply-markdown blockquote { padding-left:10px; border-left:3px solid #618571; color:#b9c6bf; }
.steering-reply-markdown a { color:#82b7ed; }
.steering-reply-markdown h3,.steering-reply-markdown h4,.steering-reply-markdown h5,.steering-reply-markdown h6 { margin:12px 0 8px; font-size:14px; color:#fff; }
.steering-reply-update { margin:0 0 8px; color:#a8aaa6; font-size:12px; }
.steering-reply-update:empty { display:none; }
.steering-receipt { margin:10px 0; }
.steering-receipt .steering-delivery-status,.steering-receipt .steering-image-summary { color:#7f848e; font:11px/1.5 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; padding:3px 14px; }
.steering-receipt .steering-update { cursor:auto; }
.steering-receipt .steering-response .prompt-body { font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
@media(max-width:600px) { .steering-reply { margin:6px 8px; } }
@media (hover:none) and (pointer:coarse) {
  .steering-reply,
  .steering-reply-live,
  .steering-reply-working-core::before,
  .steering-reply-working-core i,
  .steering-reply .steering-reply-message {
    animation:none!important;
    transition:none!important;
  }
  .steering-reply .steering-reply-body {
    scroll-behavior:auto;
    scroll-snap-type:none;
  }
  .steering-reply .steering-reply-message[data-selected="true"] {
    box-shadow:0 0 0 1px var(--prompt-color);
  }
}
/* Wide viewports use the dashboard allocation instead of leaving a large dead
   gutter. The cap still keeps lines readable on true 4K displays. */
@media (min-width:1600px) {
  .steering-reply { width:calc(100% - 24px); max-width:1600px; margin-inline:auto; box-sizing:border-box; }
  .steering-reply .steering-reply-body { max-height:min(520px,48dvh); }
}
@media (min-width:1900px) {
  /* 2026-10-08: the console now scales with ultra-wide windows; the drawer
     follows it and the wide split keeps cards readable. */
  .steering-reply { max-width:calc(var(--gv-console-max-width, 1648px) - 48px); }
}

/* Rich, in-flow workstreams: expands the Tasks bar without a modal. */
.work-plan-bar{display:flex;align-items:center;gap:8px;flex:0 1 240px;min-width:0;min-height:32px;padding:5px 10px;border:1px solid #e5c07b40;border-radius:22px;background:linear-gradient(110deg,#e5ad3d19,#ffffff04);color:#f0d18c;font:12px Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer}
.work-plan-bar{position:relative}.work-plan-bar::before{content:"";position:absolute;inset:-6px 0;border-radius:22px}
.work-plan-bar .work-plan-meter{flex:1;min-width:24px}.work-plan-eyebrow{font-size:10px;letter-spacing:1.4px;color:#efc65d}.work-plan-count{color:#a0a9b3;font-size:11px}.work-plan-chevron{color:#a0a9b3}
.work-plan-panel{flex:1 0 100%;order:100;box-sizing:border-box;max-width:100%;max-height:min(380px,34dvh);overflow:auto;overscroll-behavior:contain;padding:14px;background:radial-gradient(ellipse at top left,#e5ad3d12,transparent 70%),#202224f5;border:1px solid #e5c07b40;box-shadow:inset 0 1px #ffe8b408,0 4px 18px #0002;border-radius:12px;margin-top:8px;font:13px/1.5 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#e0e0e0;scrollbar-width:thin;scrollbar-color:#4b5563 transparent}
.work-plan-panel[hidden]{display:none}.work-plan-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-weight:600;color:#f1cd69}.work-plan-caption{font-size:11px;line-height:1.5;color:#a1ada8;font-weight:400}.work-plan-grid{display:grid;align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:10px}
.work-plan-card{background:linear-gradient(145deg,#e5b94d0c,#ffffff03);border:1px solid #e5c07b24;border-radius:9px;overflow:hidden}.work-plan-card[data-status="in_progress"]{border-color:#e5c07b45;border-left:3px solid #e9bd57;background:linear-gradient(145deg,#e5b94d13,#ffffff03)}.work-plan-card[data-status="completed"]{border-left:3px solid #98c379}.work-plan-card[data-status="pending"]{border-left:3px solid #ab91dd}.work-plan-card[data-status="blocked"]{border-color:#aa7550}.work-plan-card summary{padding:12px;cursor:pointer;min-height:44px;box-sizing:border-box;list-style:none}.work-plan-card-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;overflow-wrap:anywhere}.work-plan-percent{color:#f4d58a;white-space:nowrap}.work-plan-meter{height:6px;background:#ffffff0c;box-shadow:inset 0 1px 3px #0005;border-radius:10px;overflow:hidden;margin:6px 0}.work-plan-meter>span{display:block;height:100%;background:linear-gradient(90deg,#e8a52b,#f2cc65,#b5de8b);box-shadow:0 0 10px #edbd4d40;border-radius:inherit}
.work-plan-steps{list-style:none;margin:0;padding:0 12px 12px}.work-plan-step{display:flex;gap:9px;padding:7px 0;border-top:1px solid #ffffff08;overflow-wrap:anywhere}.work-plan-step-state{color:#81928c;flex:0 0 12px}.work-plan-step[data-status="completed"] .work-plan-step-state{color:#98c379}.work-plan-step[data-status="in_progress"] .work-plan-step-state{color:#e5c07b}.work-plan-step[data-status="blocked"] .work-plan-step-state{color:#e09a75}.work-plan-step small{display:block;color:#9da9a4;font-size:11px;margin-top:3px}.work-plan-workers{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.work-plan-worker{display:block;font-size:11px;padding:5px 10px;background:#ffffff04;color:#a9b5c1;border-radius:6px;margin:4px 10px 8px;overflow-wrap:anywhere}.work-plan-panel footer{margin-top:12px}.work-plan-bar:focus-visible,.work-plan-card summary:focus-visible{outline:2px solid #e5c07b;outline-offset:2px}
@media(max-width:600px){.work-plan-panel{padding:10px;max-height:32dvh}.work-plan-bar{gap:6px;padding:6px 8px}.work-plan-eyebrow{display:none}}


/* Composer viewport allocation. Keep editable space and actions visible when
   the carousel is open, including a keyboard-shrunken visual viewport. */
#gv-prompt-composer .gv-prompt-composer-card,
#tt-composer .tt-composer-card {
  box-sizing: border-box;
  min-width: 0;
  min-height: min(360px, var(--composer-viewport-height, 100dvh));
}
#gv-prompt-composer #gv-prompt-composer-input,
#gv-prompt-composer #gv-prompt-composer-preview {
  min-width: 0 !important;
  min-height: 56px !important;
}
#tt-composer .tt-composer-editorwrap { min-height: 56px; overflow: hidden; }
#tt-composer .tt-composer-input,
#tt-composer .tt-composer-preview { min-width: 0; min-height: 0; }
#tt-composer .tt-composer-hero,
#tt-composer .tt-composer-footer { flex: 0 0 auto; }
#gv-prompt-composer[data-composer-compact] .gv-prompt-composer-card,
#tt-composer[data-composer-compact] .tt-composer-card { min-height: 0; }
#gv-prompt-composer[data-composer-compact] .gv-prompt-composer-head {
  padding: 6px 12px !important;
  font-size: 11px;
}
#gv-prompt-composer[data-composer-compact] .gv-prompt-composer-head > div > span:first-child { display: none; }
#tt-composer[data-composer-compact] .tt-composer-hero { padding: 6px 12px; }
#tt-composer[data-composer-compact] .tt-composer-title { font-size: 16px; margin: 0; }
#tt-composer[data-composer-compact] .tt-composer-eyebrow,
#tt-composer[data-composer-compact] .tt-composer-sub { display: none; }
#gv-prompt-composer[data-composer-compact] #gv-prompt-composer-toolbar,
#tt-composer[data-composer-compact] .tt-composer-toolbar {
  flex: 0 0 auto;
  max-height: 42px;
  margin: 6px 12px 0 !important;
  padding: 5px 7px !important;
  overflow-y: auto;
  gap: 5px !important;
}
#gv-prompt-composer[data-composer-compact] #gv-prompt-composer-input,
#gv-prompt-composer[data-composer-compact] #gv-prompt-composer-preview {
  margin: 6px 12px !important;
  padding: 6px 10px !important;
  resize: none !important;
}
#gv-prompt-composer[data-composer-compact] .gv-prompt-composer-footer {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  padding: 8px 12px !important;
}
#gv-prompt-composer[data-composer-compact] .gv-prompt-composer-footer > *,
#tt-composer[data-composer-compact] .tt-composer-actions > * { flex-shrink: 0; white-space: nowrap; }
#tt-composer[data-composer-compact] .tt-composer-footer { padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
#tt-composer[data-composer-compact] .tt-composer-actions { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
#tt-composer .tt-composer-actions:has(.composer-attention-anchor) { box-sizing: border-box; padding: 8px 0 0 8px; }
@media (max-width: 600px) {
  #tt-composer .tt-composer-actions { justify-content: flex-start; }
}

@media(max-width:760px) { .steering-reply-handle { flex-wrap:wrap; padding-top:8px; } .steering-reply-title { flex:1 1 180px; } .steering-reply-working { order:3; flex:0 1 auto; max-width:100%; } .steering-reply-working-core { width:54px; flex-basis:54px; } .steering-reply-badges { display:none; } }
#gv-prompt-composer[data-composer-compact] #gv-prompt-composer-send,
#tt-composer[data-composer-compact] .tt-composer-send { position: sticky; right: 0; order: 1; flex: 0 0 auto; z-index: 2; box-shadow: -8px 0 12px #242424; }
@media (max-width: 600px) {
  #tt-composer .tt-composer-send { position: sticky; right: 0; order: 1; flex: 0 0 auto; white-space: nowrap; z-index: 2; box-shadow: -8px 0 12px #242424; }
}

/* 2026-09-22: installed-app safe area — both fullscreen composers keep their
   cards below the iOS/Android status bar instead of colliding with the clock
   (PWA standalone extends the webview under it). */
#gv-prompt-composer,
.tt-composer {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
}

/* 2026-09-22: the Tandem footer <details class="tt-composer-more"> stays
   flattened (display:contents) and HELD OPEN on every surface — the phone
   popover is retired. All secondary actions ride the footer ribbon; one
   design for every TT composer platform. */
.tt-composer-more { display: contents; }
.tt-composer-more-summary { display: none; }
.tt-composer-more-menu { display: contents; }
.tt-composer-more-summary::-webkit-details-marker { display: none; }
.tt-composer-more-summary::marker { content: ""; }

/* Explicit local full-height reading stays inside the dashboard console. */
.steering-reply-reading-toggle,
.steering-reply-reading-bar button {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--prompt-color, #61afef) 40%, transparent);
  border-radius: 9px;
  background: #232426;
  color: #e0e0e0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.steering-reply-reading-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.steering-reply-reading-toggle:focus-visible,
.steering-reply-reading-bar button:focus-visible { outline: 2px solid #61afef; outline-offset: 2px; }
.steering-reply-reading-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; grid-column: 1 / -1; }
.steering-reply-reading-bar[hidden],
.steering-reply-reading-bar button[hidden] { display: none !important; }
.steering-reply-reading-notice { color: #aeb4be; font-size: 12px; }
.steering-reply-reading-bar button:disabled { opacity: .45; cursor: default; }
.steering-reply[data-reading-full="true"] {
  position: fixed !important;
  z-index: 9100;
  top: var(--gv-reply-reading-top) !important;
  left: var(--gv-reply-reading-left) !important;
  width: var(--gv-reply-reading-width) !important;
  height: var(--gv-reply-reading-height) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.steering-reply[data-reading-full="true"][hidden] { display: none !important; }
/* 2026-09-17: fullscreen is one stacked scrollable list — every row at full
   opacity (the dimmed neighbours read as disabled/paged content). */
.steering-reply[data-reading-full="true"] .steering-reply-message { opacity: 1; }
.steering-reply[data-reading-full="true"] .steering-reply-handle { flex:0 0 auto; display:grid; grid-template-columns:minmax(180px,auto) minmax(0,1fr) auto; align-items:center; min-height:52px; max-height:45%; overflow:auto; }
.steering-reply[data-reading-full="true"] .steering-reply-title { min-width:0; }
.steering-reply[data-reading-full="true"] .steering-reply-badges { justify-self:start; margin-left:0; }
.steering-reply[data-reading-full="true"] .steering-reply-controls { justify-self:end; }
.steering-reply[data-reading-full="true"] .steering-reply-reading-bar { grid-column:1 / -1; }
.steering-reply[data-reading-full="true"] .steering-reply-status { flex: 0 0 auto; }
.steering-reply[data-reading-full="true"] .steering-reply-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  scroll-snap-type: none !important;
  overflow-anchor: none !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.steering-reply[data-reading-full="true"] .steering-reply-resize,
.steering-reply[data-reading-full="true"] .steering-reply-more { display: none !important; }
.steering-reply[data-reading-full="true"] .steering-reply-message {
  align-self:start;
  width:100%;
  box-sizing:border-box;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  scroll-snap-align: none !important;
  max-height: none !important;
  overflow: visible !important;
}
@media (max-width:900px) {
  .steering-reply[data-reading-full="true"] .steering-reply-handle { grid-template-columns:minmax(0,1fr) auto; }
  .steering-reply[data-reading-full="true"] .steering-reply-badges { grid-column:1 / -1; grid-row:2; }
}
.steering-reply[data-reading-full="true"] .steering-reply-message-action { width:auto; min-width:44px; height:38px; padding:0 12px; }
.steering-reply[data-reading-full="true"] .steering-reply-message-action-label { display:inline; }
.steering-reply[data-reading-full="true"] .steering-reply-markdown {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  line-clamp: unset !important;
  -webkit-line-clamp: unset !important;
}

@media (max-width: 600px), (pointer: coarse) {
  .steering-reply-reading-toggle,
  .steering-reply-reading-bar button {
    min-height: 44px;
  }
  .steering-reply-reading-toggle { width:44px; min-width:44px; }
  .steering-reply-message-action { width:44px; min-width:44px; height:44px; }
  .steering-reply[data-reading-full="true"] .steering-reply-message-action { min-width:44px; height:44px; }
}

/* 2026-09-15 — condensed Live Turn Interactions.
   Tapping the title bar hides the drawer chrome (title, badges, working
   signal, status line) so the Activity Centre above gains the space; tapping
   message whitespace or the active card restores it. Idle coarse-pointer
   browsers escalate to data-condensed="idle": the body clamps to roughly the
   agent header plus four text lines and fades out toward the composer, so the
   rest of the message reads as tucked behind the prompt input.

   Motion is deliberately non-linear so shrink/expand feel physical, not
   mechanical. The chrome collapse eases in-then-out (cubic-bezier .65,0,.35,1);
   the body shrink is a quick-release ease (easeInExpo-ish .55,0,.9,.35) that
   starts slow and accelerates as it tucks away; the restore is a settle ease
   (easeOutBack-lite .22,1.05,.36,1) that opens fast and eases home with the
   faintest overshoot. --gv-reply-shell colour keeps the shell continuous. */

/* Chrome (handle + status line) animates to zero height instead of a hard
   display:none, so the Activity Centre space is handed over smoothly. */
.steering-reply-handle,
.steering-reply-status {
  transition:
    max-height .34s cubic-bezier(.65,0,.35,1),
    opacity .22s cubic-bezier(.65,0,.35,1),
    padding .34s cubic-bezier(.65,0,.35,1),
    margin .34s cubic-bezier(.65,0,.35,1),
    transform .34s cubic-bezier(.65,0,.35,1);
  max-height:220px;
}
.steering-reply[data-chrome-hidden="true"] .steering-reply-handle,
.steering-reply[data-chrome-hidden="true"] .steering-reply-status {
  max-height:0 !important;
  min-height:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin:0 !important;
  opacity:0 !important;
  transform:translateY(-6px);
  overflow:hidden !important;
  pointer-events:none !important;
}
.steering-reply[data-chrome-hidden="true"] { padding-top:16px; transition:padding .34s cubic-bezier(.65,0,.35,1); }
.steering-reply[data-chrome-hidden="true"] .steering-reply-resize { height:16px; }

/* Mobile replies keep one options/fullscreen pair over the message header;
   the title takes no separate row and Collapse stays inside the options. */
@media (hover:none) and (pointer:coarse) {
  .steering-reply:not([data-reading-full="true"]) { padding-top:14px; }
  .steering-reply:not([data-reading-full="true"]) > .steering-reply-handle { display:contents; opacity:1!important; transform:none; overflow:visible!important; }
  .steering-reply:not([data-reading-full="true"]) > .steering-reply-handle > :not(.steering-reply-controls) { display:none; }
  .steering-reply:not([data-reading-full="true"]) .steering-reply-message .prompt-header { padding-right:100px; }
  .steering-reply:not([data-reading-full="true"]) .steering-reply-controls { position:absolute; top:14px; left:10px; right:10px; z-index:6; justify-content:flex-end; pointer-events:none; }
  .steering-reply:not([data-reading-full="true"]) .steering-reply-controls > button,
  .steering-reply:not([data-reading-full="true"]) .steering-reply-control-menu { pointer-events:auto; }
  .steering-reply:not([data-reading-full="true"]) .steering-reply-control-toggle { width:44px; min-height:44px; }
  .steering-reply:not([data-reading-full="true"]) .steering-reply-control-menu { right:0; max-width:100%; flex-wrap:wrap; justify-content:flex-end; }
}

/* Restore curve: open fast, settle with a faint overshoot. Scoped to the
   transient data-condense-restoring gate set only by the condensed->open
   restore path — grip drags stay instant and streaming auto-height refits
   keep their .24s ease (368162b6 audit: the broad selector rubber-banded
   resize drags and bounced every mid-stream refit). */
.steering-reply[data-condense-restoring="true"] .steering-reply-body {
  transition:
    height .40s cubic-bezier(.22,1.05,.36,1),
    max-height .40s cubic-bezier(.22,1.05,.36,1) !important;
}
/* Grip drags track the pointer 1:1 — no body height transition, ever. */
.steering-reply[data-resizing="true"] .steering-reply-body { transition:none !important; }
.steering-reply[data-condensed="idle"] { margin-bottom:2px; padding-bottom:0; contain:layout paint; }
/* Shrink curve: slow start, quick release as it tucks behind the composer. */
.steering-reply[data-condensed="idle"] .steering-reply-body {
  height:var(--gv-reply-condensed-height,140px) !important;
  max-height:var(--gv-reply-condensed-height,140px) !important;
  overflow:hidden !important;
  scroll-snap-type:none !important;
  transition:
    height .46s cubic-bezier(.55,0,.9,.35),
    max-height .46s cubic-bezier(.55,0,.9,.35) !important;
  -webkit-mask-image:linear-gradient(to bottom,#000 54%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 54%,transparent 96%);
}
/* Idle-condensed card interior: only the selected card, three text lines, no
   secondary chrome, agent branding reduced to a corner watermark. */
.steering-reply[data-condensed="idle"] .steering-reply-message:not([data-selected="true"]) { display:none !important; }
.steering-reply[data-condensed="idle"] .steering-reply-message[data-selected="true"] { padding:11px 14px 12px; }
.steering-reply[data-condensed="idle"] .steering-reply-message .steering-reply-message-actions,
.steering-reply[data-condensed="idle"] .steering-reply-message .steering-reply-attachments,
.steering-reply[data-condensed="idle"] .steering-reply-message .steering-reply-gallery,
.steering-reply[data-condensed="idle"] .steering-reply-message .prompt-source-gvturns,
.steering-reply[data-condensed="idle"] .steering-reply-message .steering-reply-more,
.steering-reply[data-condensed="idle"] .steering-reply-message .steering-reply-update { display:none !important; }
/* 2026-09-15c: watermark logo + label sit top-LEFT in normal flow and the text
   starts immediately BELOW them (was an absolute top-right corner mark that
   looked squashed/unbalanced). Body uses the same font size as a normal
   highlighted selected card. */
.steering-reply[data-condensed="idle"] .steering-reply-message .prompt-header {
  position:static; margin:0 0 6px; gap:8px; align-items:center; opacity:.78;
}
.steering-reply[data-condensed="idle"] .steering-reply-message .prompt-avatar { width:22px; height:22px; flex:0 0 22px; font-size:9px; box-shadow:none; }
.steering-reply[data-condensed="idle"] .steering-reply-message .prompt-username { font-size:11px; font-weight:600; letter-spacing:.3px; }
.steering-reply[data-condensed="idle"] .steering-reply-message[data-selected="true"] .prompt-body {
  max-height:calc(3 * 1.7em) !important;
  overflow:hidden !important;
  font-size:calc(14px + 2pt) !important;
  transition:max-height .46s cubic-bezier(.55,0,.9,.35) !important;
}
/* Coarse pointers get shorter, cheaper motion — same curves, less time on the
   main thread while height reflows run on a phone. */
@media (hover:none) and (pointer:coarse) {
  .steering-reply-handle,
  .steering-reply-status { transition-duration:.22s, .14s, .22s, .22s, .22s; }
  .steering-reply[data-auto-height] .steering-reply-body { transition-duration:.18s; }
  .steering-reply[data-condense-restoring="true"] .steering-reply-body { transition-duration:.28s !important; }
  .steering-reply[data-condensed="idle"] .steering-reply-body { transition-duration:.30s; }
  .steering-reply[data-condensed="idle"] .steering-reply-message[data-selected="true"] .prompt-body { transition-duration:.30s; }
}
@media (prefers-reduced-motion:reduce) {
  .steering-reply-handle,
  .steering-reply-status,
  .steering-reply[data-auto-height] .steering-reply-body,
  .steering-reply[data-user-height] .steering-reply-body,
  .steering-reply[data-condense-restoring="true"] .steering-reply-body,
  .steering-reply[data-condensed="idle"] .steering-reply-body,
  .steering-reply[data-condensed="idle"] .steering-reply-message[data-selected="true"] .prompt-body {
    transition:none !important;
  }
  .steering-reply[data-chrome-hidden="true"] .steering-reply-handle,
  .steering-reply[data-chrome-hidden="true"] .steering-reply-status { transform:none; }
}

/* 2026-09-15: working indicator retired. While the agent is working, the LATEST
   assistant card's provider logo rotates clockwise around its centre. Gated on
   the drawer's data-agent-working + the row's data-reply-agent-latest, so it
   never spins a user prompt or an older card. */
@keyframes gv-agent-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Spin the provider LOGO image, not the whole badge — the text-fallback 'AI'
   avatar (no img) has nothing meaningful to rotate. */
.steering-reply[data-agent-working="true"] .steering-reply-message[data-reply-agent-latest="true"] .prompt-avatar img {
  animation: gv-agent-logo-spin 1.5s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion:reduce) {
  .steering-reply[data-agent-working="true"] .steering-reply-message[data-reply-agent-latest="true"] .prompt-avatar img { animation: none !important; }
}

/* Normal-card space savers (2026-09-15b):
   1. The attachment rail is inline-flex (set inline in JS) so the source-turn
      pills share its row instead of stacking a third band under the message.
   2. The collapsed-state Show more control renders as a centred pill pulled up
      over the body's gradient fade, reclaiming its former full row. */
.steering-reply .steering-reply-message .prompt-source-gvturns { display:inline-flex; align-items:center; vertical-align:middle; gap:6px; margin-top:7px; max-width:100%; }
.steering-reply .steering-reply-message[data-reply-collapsible="true"][data-reply-expanded="false"] .steering-reply-more {
  position:relative; z-index:2; display:block; width:max-content; max-width:80%;
  margin:-15px auto 2px; padding:3px 14px; min-height:0;
  border:1px solid color-mix(in srgb,var(--prompt-color) 42%,transparent);
  border-radius:999px; background:#1d1f21f0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.steering-reply .steering-reply-message[data-reply-collapsible="true"][data-reply-expanded="false"] .steering-reply-more::after { content:''; }

/* 2026-09-13 — phone/Fold composer reflow. Formatting controls wrap into a
   bounded touch grid instead of disappearing beyond a horizontal ribbon. */
.gvsys-shell { display:grid; gap:12px; color:#e0e0e0; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.gvsys-shell .gvsys-hero { position:relative; overflow:hidden; margin:0; border-left-width:4px; border-radius:12px; background:radial-gradient(circle at 94% 10%,rgba(97,175,239,.22),transparent 36%),linear-gradient(135deg,#202d3a,#24252d); box-shadow:0 10px 26px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04); }
.gvsys-shell .gvsys-hero::after { content:""; position:absolute; right:-26px; top:-44px; width:150px; height:150px; border:1px solid rgba(97,175,239,.14); border-radius:50%; box-shadow:0 0 0 22px rgba(97,175,239,.035),0 0 0 45px rgba(198,120,221,.025); pointer-events:none; }
.gvsys-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gvsys-actions { display:flex; gap:7px; }
.gvsys-actions button { min-height:34px; padding:6px 11px; border:1px solid rgba(97,175,239,.45); border-radius:8px; background:linear-gradient(180deg,#303b48,#252c35); color:#8fcaff; font:650 11px Inter,-apple-system,sans-serif; cursor:pointer; }
.gvsys-actions button:last-child { border-color:rgba(229,192,123,.5); color:#e5c07b; background:linear-gradient(180deg,#3b372c,#2d2b25); }
.gvsys-actions button:disabled { opacity:.7; cursor:wait; }
.gvsys-release { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:9px; padding:9px 11px; border:1px solid rgba(152,195,121,.25); border-radius:9px; background:linear-gradient(90deg,rgba(152,195,121,.09),rgba(86,182,194,.05)); }
.gvsys-release > span { color:#92a29a; font-size:9px; letter-spacing:1.3px; }
.gvsys-release > strong { color:#98c379; font:700 16px 'JetBrains Mono',monospace; }
.gvsys-release > b,[data-gvsys-state] { justify-self:end; padding:4px 8px; border-radius:999px; background:rgba(127,132,142,.12); color:#9ba0aa; font-size:9px; font-weight:650; }
[data-gvsys-state][data-state="ok"] { color:#98c379; background:rgba(152,195,121,.12); }
[data-gvsys-state][data-state="restart"],[data-gvsys-state][data-state="update"] { color:#e5c07b; background:rgba(229,192,123,.13); }
[data-gvsys-state][data-state="idle"] { color:#7f848e; background:rgba(127,132,142,.1); }
.gvsys-version-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.gvsys-version-card { min-width:0; padding:12px; border:1px solid rgba(97,175,239,.26); border-left:3px solid #61afef; border-radius:10px; background:linear-gradient(145deg,rgba(97,175,239,.08),rgba(22,25,31,.5)); }
.gvsys-version-card--mcp { border-color:rgba(198,120,221,.26); border-left-color:#c678dd; background:linear-gradient(145deg,rgba(198,120,221,.08),rgba(22,25,31,.5)); }
.gvsys-version-card header { display:flex; justify-content:space-between; align-items:center; gap:7px; }
.gvsys-version-card header > strong { color:#fff; font-size:14px; }
.gvsys-version-card > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.gvsys-version-card > div > span { min-width:0; padding:8px; border-radius:7px; background:rgba(0,0,0,.18); }
.gvsys-version-card small { display:block; margin-bottom:5px; color:#7f848e; font-size:8px; letter-spacing:1px; }
.gvsys-version-card code { color:#b7dcff; font:650 12px 'JetBrains Mono',monospace; overflow-wrap:anywhere; }
.gvsys-version-card--mcp code { color:#d7afe2; }
.gvsys-version-card footer { margin-top:9px; color:#7f848e; font-size:9px; }
.gvsys-version-card footer code { color:#e5c07b; font-size:10px; }
.gvsys-shell > .gv-section-header { color:#aeb7c2; letter-spacing:.7px; }
.gvsys-shell .gv-check-item { border:1px solid rgba(255,255,255,.06); border-radius:8px; background:rgba(255,255,255,.025); margin:5px 0; padding:8px 10px; }
.gvsys-shell [data-gvsys-field="relay-url"] { overflow-wrap:anywhere; }

@media (max-width: 600px) {
  .gvsys-version-grid { grid-template-columns:minmax(0,1fr); }
  .gvsys-release { grid-template-columns:1fr auto; }
  .gvsys-release > span { grid-column:1 / -1; }
  .gvsys-section-head { align-items:flex-start; }
  .gvsys-actions { flex-direction:column; }
  #gv-prompt-composer #gv-prompt-composer-toolbar,
  #tt-composer .tt-composer-toolbar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    max-height: 116px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    gap: 5px !important;
    padding: 6px !important;
  }
  #gv-prompt-composer #gv-prompt-composer-toolbar > *,
  #tt-composer .tt-composer-toolbar > * {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #gv-prompt-composer #gv-prompt-composer-toolbar > div:first-child,
  #tt-composer .tt-run-config-menu { grid-column: span 2; }
  #gv-prompt-composer #gv-prompt-composer-toolbar > span:last-child,
  #tt-composer .tt-tool-hint { display: none; }

  #gv-prompt-composer .gv-prompt-composer-head {
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  #gv-prompt-composer #gv-prompt-composer-input,
  #gv-prompt-composer #gv-prompt-composer-preview {
    margin: 8px 10px !important;
    padding: 12px !important;
    resize: none !important;
  }
  #tt-composer .tt-composer-input,
  #tt-composer .tt-composer-preview { padding: 12px 14px; }

  #gv-prompt-composer .gv-prompt-composer-footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
    overflow: visible !important;
  }
  #gv-prompt-composer .gv-prompt-composer-footer > * {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 4px !important;
  }
  #gv-prompt-composer #gv-prompt-composer-clear,
  #gv-prompt-composer #gv-prompt-composer-cancel,
  #gv-prompt-composer #gv-prompt-composer-collapse,
  #gv-prompt-composer #gv-prompt-composer-send { grid-column: span 2; }
  #gv-prompt-composer #gv-prompt-composer-send { position: static; box-shadow: 0 2px 10px rgba(34,197,94,.25); }

  #tt-composer .tt-composer-footer { display: block; }
  #tt-composer .tt-composer-actions,
  #tt-composer[data-composer-compact] .tt-composer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }
  #tt-composer .tt-composer-users { grid-column: 1 / -1; min-height: 28px; }
  #tt-composer .tt-composer-actions > * { width: 100%; min-width: 0; min-height: 42px; padding: 8px 4px; }
  #tt-composer .tt-composer-send,
  #tt-composer .tt-composer-leave,
  #tt-composer .tt-composer-close { position: static; grid-column: span 2; box-shadow: none; }

  #gv-prompt-composer .gv-prompt-composer-card {
    max-height: calc(100dvh - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #tt-composer .tt-composer-card {
    max-height: none;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  #gv-prompt-composer .composer-attachment-row,
  #tt-composer .tt-media-item {
    grid-template-columns: 48px minmax(120px, 1fr);
    min-width: min(290px, calc(100vw - 38px));
  }
  #gv-prompt-composer .composer-attachment-row .tt-attach-actions,
  #tt-composer .tt-media-item .tt-attach-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin: 0;
  }
  .tt-attach-edit,
  .tt-attach-remove { min-height: 38px; padding: 7px 12px; }
}

/* Final phone contract: these modal editors are compact centered cards, not
   full-screen pages. Chrome never scrolls; only the editable canvas does. */
@media (max-width: 600px) and (pointer: coarse) {
  #gv-prompt-composer,
  #tt-composer {
    align-items: center !important;
    justify-content: center !important;
  }
  #gv-prompt-composer .gv-prompt-composer-card,
  #tt-composer .tt-composer-card {
    width: calc(100% - 24px) !important;
    max-width: 760px !important;
    height: min(760px, calc(100% - 32px)) !important;
    max-height: calc(100% - 32px) !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  #gv-prompt-composer .gv-prompt-composer-head,
  #tt-composer .tt-composer-hero {
    padding: 8px 10px !important;
  }
  #tt-composer .tt-composer-eyebrow,
  #tt-composer .tt-composer-sub,
  #gv-prompt-composer .gv-prompt-composer-head > span:last-child {
    display: none;
  }
  #tt-composer .tt-composer-title { font-size: 17px; }
  /* 2026-09-22: smart ribbon — one scrollable row instead of the button
     grid. Children size to their labels; the row scrolls left-right. */
  #gv-prompt-composer #gv-prompt-composer-toolbar,
  #tt-composer .tt-composer-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto;
    align-items: stretch;
    max-height: 48px !important;
    margin: 6px 8px 0 !important;
    padding: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 4px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  #gv-prompt-composer #gv-prompt-composer-toolbar::-webkit-scrollbar,
  #tt-composer .tt-composer-toolbar::-webkit-scrollbar { display: none; }
  #gv-prompt-composer #gv-prompt-composer-toolbar > *,
  #tt-composer .tt-composer-toolbar > * {
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    padding: 5px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  #gv-prompt-composer #gv-prompt-composer-input,
  #gv-prompt-composer #gv-prompt-composer-preview,
  #tt-composer .tt-composer-editorwrap {
    flex: 1 1 0 !important;
    min-height: 72px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  #gv-prompt-composer #gv-prompt-composer-input,
  #gv-prompt-composer #gv-prompt-composer-preview {
    margin: 6px 8px !important;
    padding: 10px !important;
  }
  #tt-composer .tt-composer-input,
  #tt-composer .tt-composer-preview {
    min-height: 100% !important;
    padding: 10px 12px !important;
  }
  /* The retired solo composer keeps its legacy scroll ribbon. */
  #gv-prompt-composer .gv-prompt-composer-footer {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  #gv-prompt-composer .gv-prompt-composer-footer::-webkit-scrollbar { display: none; }
  #gv-prompt-composer .gv-prompt-composer-footer,
  #tt-composer .tt-composer-footer {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #gv-prompt-composer .gv-prompt-composer-footer > * {
    box-sizing: border-box;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 11px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
    scroll-snap-align: start;
    grid-column: auto !important;
  }
  #gv-prompt-composer #gv-prompt-composer-send {
    position: sticky;
    right: 0;
    order: 1;
    z-index: 2;
    box-shadow: -10px 0 14px #1c1c1c, 0 2px 10px rgba(34,197,94,.25);
  }

  /* Tandem uses one stable row on phones: identity, Attach, More, Send.
     Secondary controls live in the native details menu above the footer. */
  #tt-composer .tt-composer-actions,
  #tt-composer[data-composer-compact] .tt-composer-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  #tt-composer .tt-composer-actions > * {
    box-sizing: border-box;
    min-height: 42px;
    margin: 0 !important;
    grid-column: auto !important;
  }
  #tt-composer .tt-composer-users {
    order: 0;
    flex: 0 0 44px !important;
    min-height: 0 !important;
    padding-inline: 0 !important;
    width: 44px;
    max-width: 44px;
  }
  #tt-composer [data-tt-composer="attach"] {
    order: 1;
    flex: 0 0 auto !important;
    padding: 8px 11px !important;
  }
  #tt-composer .tt-composer-more {
    order: 2;
    display: block;
    position: relative;
    flex: 0 0 auto !important;
  }
  #tt-composer .tt-composer-more-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 11px !important;
    list-style: none;
    cursor: pointer;
  }
  #tt-composer .tt-composer-more-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 6px;
    width: min(250px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid rgba(97,175,239,.45);
    border-radius: 10px;
    background: #242424;
    box-shadow: 0 -12px 28px rgba(0,0,0,.48);
  }
  #tt-composer .tt-composer-more-menu > * {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 10px !important;
  }
  #tt-composer .tt-composer-send {
    order: 3;
    position: static;
    flex: 1 1 auto !important;
    min-width: 126px;
    min-height: 42px;
    margin-left: auto !important;
    padding: 8px 12px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(34,197,94,.25);
  }
}

/* 2026-09-18 (idea #1): when the on-screen keyboard is open on a phone, the
   Tandem composer's 3-column formatting grid collapses into a single
   horizontally-scrollable strip so the editor reclaims the vertical space.
   The full grid returns when the keyboard closes (body.keyboard-open drops).
   Scoped to #tt-composer; the solo composer is unaffected. */
@media (max-width: 600px) and (pointer: coarse) {
  body.keyboard-open #tt-composer .tt-composer-toolbar {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    max-height: 46px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  body.keyboard-open #tt-composer .tt-composer-toolbar > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 34px;
  }
  /* Drop the verbose chrome from the strip; keep the format controls. */
  body.keyboard-open #tt-composer .tt-tool-hint,
  body.keyboard-open #tt-composer .tt-run-config-note {
    display: none !important;
  }
  /* The editor (already flex:1 in the phone contract) takes the space back. */
  body.keyboard-open #tt-composer .tt-composer-editorwrap {
    min-height: 128px !important;
  }
}

/* 2026-10-02: narrow-phone composer geometry — the LAST word for the unified
   composer on phones (Z Fold 7 cover 360px through iPhone Pro Max 440px).
   Earlier ≤600px layers left `.tt-composer-actions > * { width:100% }` live
   inside the flex footer row, so Attach claimed the whole row and pushed Send
   and More off the card. This block resets that, gives every footer and
   toolbar control one 44px border-box height, centres the header close
   control, and keeps the run-config chip's arrow inside its border.
   Fold main (~884px) and desktop never match this query. */
@media (max-width: 600px) and (pointer: coarse) {
  #tt-composer .tt-composer-hero {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 56px;
    padding: 6px 60px 6px 12px !important;
  }
  #tt-composer .tt-composer-title {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
  }
  #tt-composer .tt-composer-x {
    top: 50%;
    right: 8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 20px;
    transform: translateY(-50%);
  }

  #tt-composer .tt-composer-toolbar,
  body.keyboard-open #tt-composer .tt-composer-toolbar {
    align-items: center !important;
    max-height: 56px !important;
    padding: 5px !important;
  }
  #tt-composer .tt-composer-toolbar > .tt-tool,
  body.keyboard-open #tt-composer .tt-composer-toolbar > .tt-tool,
  #tt-composer .tt-run-config-menu > summary {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    line-height: 1;
  }
  #tt-composer .tt-composer-toolbar > button.tt-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #tt-composer .tt-run-config-menu,
  body.keyboard-open #tt-composer .tt-run-config-menu {
    flex: 0 0 auto !important;
    min-width: 0;
    max-width: min(220px, 58vw);
    overflow: visible;
  }
  #tt-composer .tt-run-config-menu > summary {
    position: relative;
    display: block;
    max-width: 100%;
    padding: 0 26px 0 10px !important;
    line-height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #tt-composer .tt-run-config-menu > summary::after {
    top: 50%;
    right: 9px;
    line-height: 1;
    transform: translateY(-50%);
  }
  /* An open run-config panel must not be clipped by the scroll ribbon. */
  #tt-composer .tt-composer-toolbar:has(> .tt-run-config-menu[open]) {
    overflow: visible !important;
    z-index: 5;
  }
  #tt-composer .tt-run-config-menu[open] > .tt-run-config {
    width: min(320px, calc(100vw - 48px));
  }

  #tt-composer .tt-composer-actions:has(.composer-attention-anchor) { padding: 0; }
  #tt-composer .tt-composer-actions,
  #tt-composer[data-composer-compact] .tt-composer-actions {
    position: relative;
    align-items: center !important;
    width: 100%;
    min-width: 0;
  }
  #tt-composer .tt-composer-actions > *,
  #tt-composer .composer-attention-anchor > [data-tt-composer="attach"] {
    width: auto;
    min-width: 0;
  }
  #tt-composer .tt-composer-users:empty { display: none; }
  #tt-composer .tt-composer-users { height: 44px; }
  #tt-composer .composer-attention-anchor {
    order: 1;
    flex: 0 0 auto;
    height: 44px;
    min-height: 0;
    padding: 0 !important;
  }
  #tt-composer [data-tt-composer="attach"],
  #tt-composer .tt-composer-more-summary,
  #tt-composer .tt-composer-send {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }
  /* More anchors its menu to the whole action row, not its own narrow box. */
  #tt-composer .tt-composer-more {
    position: static;
    display: flex;
    align-items: center;
    height: 44px;
  }
  #tt-composer .tt-composer-more-menu {
    left: 0;
    right: 0;
    width: auto;
  }
  /* Keyboard-up (data-composer-compact) keeps the same order: the compact
     sticky-Send rule otherwise jumps Send ahead of More. */
  #tt-composer .tt-composer-send,
  #tt-composer[data-composer-compact] .tt-composer-send {
    order: 3;
    position: static;
    box-shadow: 0 2px 10px rgba(34,197,94,.25);
    flex: 1 1 auto !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 2026-10-02b: tablets and landscape phones (coarse, 601-1100px) keep the
   desktop footer layout, where Send (33px) and Attach (34px) differed by a
   pixel and sat 1px apart. Share one row height there too. */
@media (min-width: 601px) and (max-width: 1100px) and (pointer: coarse) {
  #tt-composer .tt-composer-actions { align-items: center; }
  #tt-composer .tt-composer-actions > .tt-composer-utility,
  #tt-composer .tt-composer-more-summary,
  #tt-composer .tt-composer-send {
    box-sizing: border-box;
    min-height: 44px;
  }
}

/* 2026-10-02c: the flattened footer <details> group (Select/Copy/Paste/
   Clear/Leave/Close) is a real flex row on every non-phone surface, so its
   buttons get the same 8px gap instead of butting together inside the
   ::details-content box. */
@media (min-width: 601px) {
  #tt-composer .tt-composer-more::details-content { display: contents; }
  #tt-composer .tt-composer-more-menu { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
}

/* 2026-10-02c: Z Fold 7 main screen and tablets (coarse, 601-1100px). One
   footer order whether the keyboard is up (data-composer-compact) or down:
   Attach · Select Copy Paste Clear · Close ... Send. With the keyboard up the
   toolbar is one horizontal swipe ribbon; the old 42px wrapping box only
   scrolled vertically and hid the second row of tools. */
@media (min-width: 601px) and (max-width: 1100px) and (pointer: coarse) {
  #tt-composer .tt-composer-actions,
  #tt-composer[data-composer-compact] .tt-composer-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #tt-composer .tt-composer-actions::-webkit-scrollbar { display: none; }
  #tt-composer .tt-composer-actions > *,
  #tt-composer .tt-composer-more-menu > * { flex: 0 0 auto; white-space: nowrap; }
  #tt-composer .tt-composer-users:empty { display: none; }
  #tt-composer .tt-composer-more-menu > * { box-sizing: border-box; min-height: 44px; }
  #tt-composer .tt-composer-send,
  #tt-composer[data-composer-compact] .tt-composer-send {
    order: 1;
    margin-left: auto;
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 132px;
    box-sizing: border-box;
    min-height: 44px;
    box-shadow: -8px 0 12px #242424;
  }
  #tt-composer[data-composer-compact] .tt-composer-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  #tt-composer[data-composer-compact] .tt-composer-toolbar::-webkit-scrollbar { display: none; }
  #tt-composer[data-composer-compact] .tt-composer-toolbar > * { flex: 0 0 auto; scroll-snap-align: start; }
  #tt-composer[data-composer-compact] .tt-tool-hint { display: none; }
  #tt-composer[data-composer-compact] .tt-composer-toolbar:has(> .tt-run-config-menu[open]) { overflow: visible; }
}

/* 2026-10-02c: a scrollable formatting ribbon fades only the edge(s) that
   hide more tools (ws_tandem gvTandemSyncRibbonEdges stamps the attributes). */
#tt-composer .tt-composer-toolbar[data-ribbon-end] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
#tt-composer .tt-composer-toolbar[data-ribbon-start] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
  mask-image: linear-gradient(90deg, transparent, #000 32px);
}
#tt-composer .tt-composer-toolbar[data-ribbon-start][data-ribbon-end] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
#tt-composer .tt-composer-toolbar:has(> .tt-run-config-menu[open]) {
  -webkit-mask-image: none;
  mask-image: none;
}

/* 2026-09-17: themed thin scrollbars for every composer / interactions /
   plan surface outside .console-output — the native white scrollbar
   (Windows / light-scheme browsers) never ships on these windows. */
.tt-composer *,
#gv-prompt-composer *,
.native-questions,
.native-questions *,
.work-plan-panel,
.tt-overlay-card,
.tt-invite-user-list {
  scrollbar-width: thin;
  scrollbar-color: #62666e transparent;
}
.tt-composer *::-webkit-scrollbar,
#gv-prompt-composer *::-webkit-scrollbar,
.native-questions::-webkit-scrollbar,
.native-questions *::-webkit-scrollbar,
.work-plan-panel::-webkit-scrollbar,
.tt-overlay-card::-webkit-scrollbar,
.tt-invite-user-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.tt-composer *::-webkit-scrollbar-track,
#gv-prompt-composer *::-webkit-scrollbar-track,
.native-questions::-webkit-scrollbar-track,
.native-questions *::-webkit-scrollbar-track,
.work-plan-panel::-webkit-scrollbar-track,
.tt-overlay-card::-webkit-scrollbar-track,
.tt-invite-user-list::-webkit-scrollbar-track {
  background: transparent;
}
.tt-composer *::-webkit-scrollbar-thumb,
#gv-prompt-composer *::-webkit-scrollbar-thumb,
.native-questions::-webkit-scrollbar-thumb,
.native-questions *::-webkit-scrollbar-thumb,
.work-plan-panel::-webkit-scrollbar-thumb,
.tt-overlay-card::-webkit-scrollbar-thumb,
.tt-invite-user-list::-webkit-scrollbar-thumb {
  background: #62666e;
  border-radius: 4px;
}

/* 2026-10-02: prompt attachments uploading before the turn starts — dim the
   Send icon and spin an amber ring until send_prompt clears data-uploading. */
#dash-console-submit[data-uploading="true"] { position: relative; }
#dash-console-submit[data-uploading="true"] > svg { opacity: .35; }
#dash-console-submit[data-uploading="true"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid rgba(245, 158, 11, .25);
  border-top-color: #f59e0b;
  border-radius: 50%;
  box-sizing: border-box;
  animation: gv-send-upload-spin .9s linear infinite;
  pointer-events: none;
}
@keyframes gv-send-upload-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #dash-console-submit[data-uploading="true"]::after { animation: none; border-color: #f59e0b; }
}

/* 2026-10-05: a mid-turn steer is sending — dim the avatar/arrow and float an
   amber up-arrow until send_prompt clears data-steer-sending (receipt,
   Interactions landing or the 20 s not-confirmed timeout). No box change:
   the button must not move under the pointer. Colour is forced transparent
   because the working avatar writes an inline colour for its initials. */
#dash-console-submit[data-steer-sending="true"] { position: relative; color: transparent !important; }
#dash-console-submit[data-steer-sending="true"] > * { opacity: .25; }
#dash-console-submit[data-steer-sending="true"]::after {
  content: "\2191";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  font: 700 20px/1 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  animation: gv-steer-send-rise 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gv-steer-send-rise {
  0% { transform: translateY(6px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(-7px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #dash-console-submit[data-steer-sending="true"]::after { animation: none; transform: none; opacity: 1; }
}

/* 2026-10-02b: the fullscreen composer header is one slim row on Fold main,
   tablets and desktop: title · eyebrow pill · subtitle … ×. Phones keep
   their own compact header (≤600px block above). */
@media (min-width: 601px) {
  #tt-composer .tt-composer-hero {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 12px 8px 18px;
  }
  #tt-composer .tt-composer-title { order: 1; flex: 0 0 auto; margin: 0; font-size: 16px; line-height: 1.2; }
  #tt-composer .tt-composer-eyebrow {
    order: 2; flex: 0 0 auto; margin: 0; padding: 3px 8px;
    border: 1px solid rgba(245, 158, 11, .45); border-radius: 999px;
    font-size: 10px; letter-spacing: 1px; white-space: nowrap;
  }
  #tt-composer .tt-composer-sub {
    order: 3; flex: 1 1 auto; min-width: 0; margin: 0;
    font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #tt-composer .tt-composer-x {
    order: 4; position: static; flex: 0 0 auto; width: 36px; height: 36px; margin-left: auto;
  }
}

/* 2026-10-02b: tap an inline image → Edit · Move up · Move down · Remove. */
#tt-composer-preview img[data-attachment-id] { cursor: pointer; border-radius: 6px; }
#tt-composer-preview img[data-attachment-id]:hover,
#tt-composer-preview img[data-attachment-id]:focus { outline: 2px solid rgba(86, 182, 194, .7); outline-offset: 2px; }
.tt-inline-image-actions {
  position: absolute;
  z-index: 14;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 12px);
  padding: 6px;
  background: rgba(24, 28, 34, .97);
  border: 1px solid rgba(86, 182, 194, .5);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
.tt-inline-image-actions button {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(97, 175, 239, .35);
  border-radius: 7px;
  background: #252c35;
  color: #dbe7f3;
  font: 600 12px Inter, -apple-system, sans-serif;
  cursor: pointer;
}
.tt-inline-image-actions button[data-tt-inline-image-action="remove"] { border-color: rgba(224, 108, 117, .55); color: #f0a2aa; }
.tt-inline-image-actions button:hover { border-color: #61afef; color: #fff; }

/* 2026-10-02c: pre-upload state on image chips and tray tiles. */
.context-chip--image,
.attach-preview-item { position: relative; }
.attach-store-mark {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font: 700 11px/1 Inter, -apple-system, sans-serif;
  color: #111;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, .85);
  pointer-events: none;
}
.attach-store-mark.is-uploading { background: #f59e0b; }
.attach-store-mark.is-stored { background: #98c379; }
.attach-store-mark.is-error { background: #e5c07b; }

/* 2026-10-02d: running-turn indicator in the composer header. */
#tt-composer .tt-composer-running {
  position: absolute;
  top: 50%;
  right: 60px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 46vw;
  padding: 3px 10px 3px 3px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.08);
  color: #f5b34d;
  font-size: 12px;
  white-space: nowrap;
}
#tt-composer .tt-composer-running[hidden] { display: none; }
#tt-composer .tt-composer-running-logo {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#tt-composer .tt-composer-running-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(245, 158, 11, 0) 0deg, #f59e0b 300deg, rgba(245, 158, 11, 0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 10px, #000 11px);
  mask: radial-gradient(circle, transparent 10px, #000 11px);
  animation: tt-composer-running-spin 1.1s linear infinite;
}
#tt-composer .tt-composer-running-logo img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
#tt-composer .tt-composer-running-text { overflow: hidden; text-overflow: ellipsis; }
@keyframes tt-composer-running-spin { to { transform: rotate(360deg); } }
@media (min-width: 601px) {
  #tt-composer .tt-composer-running {
    order: 4;
    position: static;
    transform: none;
    flex: 0 0 auto;
    margin-left: auto;
  }
  #tt-composer .tt-composer-running:not([hidden]) ~ .tt-composer-x { margin-left: 0; order: 5; }
}
@media (prefers-reduced-motion: reduce) {
  #tt-composer .tt-composer-running-logo::before { animation: none; }
}

/* 2026-10-02d: copy/paste feedback toast and long-press state. */
#tt-composer .tt-composer-toast {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(420px, 86%);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(152, 195, 121, 0.6);
  background: rgba(30, 30, 30, 0.96);
  color: #98c379;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: tt-composer-toast-in 160ms ease-out;
}
#tt-composer .tt-composer-toast[data-tone="warn"] { border-color: rgba(229, 192, 123, 0.6); color: #e5c07b; }
@keyframes tt-composer-toast-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
#tt-composer .tt-composer-utility[data-holding="true"] {
  border-color: #f59e0b !important;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.6), 0 0 10px rgba(245, 158, 11, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  #tt-composer .tt-composer-toast { animation: none; }
}

/* ==========================================================================
   2026-10-05: profile sheet + phone/touch prompt-bar pills
   (src/console-input-context/profile-sheet.ts). Owner report: on phones the
   node and profile pills were tiny and model/effort/tone were fiddly.
   ========================================================================== */
/* Owner (2026-10-05c): the 44px/13px pills clipped text on iPhone and were
   oversized on the Z Fold 7 main screen. Keep the original inline fonts
   (10px label, 12px logo, 5px dot) and grow only the box by 10% of the
   original 24px pill: height, padding, radius and gap x1.1. */
@media (max-width: 883.98px), (hover: none) and (pointer: coarse) {
  .composer-prefix #composer-node-badge > [data-node-badge],
  .composer-prefix #conn-active-agent {
    min-height: 26.4px !important;
    padding: 2.2px 7.7px !important;
    border-radius: 11px !important;
    gap: 4.4px !important;
    justify-content: center;
    box-sizing: border-box;
  }
  .composer-prefix #conn-active-agent {
    padding: 2.2px 7.7px 2.2px 3.3px !important;
  }
  .composer-prefix [data-node-badge] [data-badge-label],
  .composer-prefix #conn-active-agent-label {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .composer-prefix #conn-active-agent-logo {
    flex: 0 0 auto;
  }
  .composer-prefix .composer-prompt-lead {
    height: 26.4px;
  }
}
/* Phone tier: icon + short profile name (data-short-label from
   profile-sheet.ts); the full label returns when no short name is known. */
#composer-prefix[data-phone-composer] #composer-node-badge {
  max-width: 40%;
}
/* The pill shape already reads as a control; the caret's width goes to the
   label (!important beats the caret's inline display). */
#composer-prefix[data-phone-composer] [data-node-badge] [data-badge-caret] {
  display: none !important;
}
#composer-prefix[data-phone-composer] #conn-agent-picker {
  max-width: 42%;
}
#composer-prefix[data-phone-composer] #conn-active-agent[data-short-label]:not([data-short-label=""]) #conn-active-agent-label {
  display: none;
}
#composer-prefix[data-phone-composer] #conn-active-agent[data-short-label]:not([data-short-label=""])::after {
  content: attr(data-short-label);
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-input-wrap[data-phone-composer][data-composer-tight] > .console-input::placeholder {
  color: transparent;
}

/* The sheet: popover anchored to its trigger (>= 884px) or full screen. */
#gv-profile-sheet {
  position: fixed;
  inset: 0;
  z-index: 12100;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e0e0e0;
}
#gv-profile-sheet[hidden] {
  display: none;
}
#gv-profile-sheet .gv-profile-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}
#gv-profile-sheet[data-mode="fullscreen"] .gv-profile-sheet-backdrop {
  background: rgba(0, 0, 0, 0.6);
}
#gv-profile-sheet .gv-profile-sheet-card {
  position: fixed;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: #151515;
  border: 1px solid rgba(229, 192, 123, 0.28);
  border-radius: 12px;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.48), 0 0 24px rgba(97, 175, 239, 0.1);
}
#gv-profile-sheet[data-mode="fullscreen"] .gv-profile-sheet-card {
  left: 0;
  right: 0;
  top: var(--gv-profile-sheet-top, 0px);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--gv-profile-sheet-height, 100dvh);
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
#gv-profile-sheet .gv-profile-sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 0 0 auto;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.24);
  background: linear-gradient(180deg, #24211b 0%, #151515 100%);
}
#gv-profile-sheet .gv-profile-sheet-titles {
  flex: 1 1 auto;
  min-width: 0;
}
#gv-profile-sheet .gv-profile-sheet-eyebrow {
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}
#gv-profile-sheet .gv-profile-sheet-title {
  margin: 4px 0 2px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
#gv-profile-sheet .gv-profile-sheet-summary {
  margin: 0;
  color: #9da3ad;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gv-profile-sheet .gv-profile-sheet-x {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #1e1e1e;
  color: #e0e0e0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
#gv-profile-sheet .gv-profile-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 16px;
}
#gv-profile-sheet .gv-profile-sheet-foot {
  display: none;
  flex: 0 0 auto;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#gv-profile-sheet[data-mode="fullscreen"] .gv-profile-sheet-foot {
  display: block;
}
#gv-profile-sheet .gv-profile-sheet-done {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(152, 195, 121, 0.6);
  background: rgba(152, 195, 121, 0.16);
  color: #c7e3b2;
  font: 600 15px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
#gv-profile-sheet button:focus-visible {
  outline: 2px solid #61afef;
  outline-offset: 2px;
}
/* Hosted existing panels: static, visible, chrome-free (ID-scoped !important
   beats views/layout.ts' narrow-screen #conn-agent-panel rules and the
   positioning code's inline styles). */
#gv-profile-sheet #conn-agent-panel {
  position: static !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: auto !important;
}
#gv-profile-sheet #conn-agent-panel [data-ai-profiles-heading] {
  position: static !important;
  margin: 0 0 8px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
#gv-profile-sheet[data-mode="fullscreen"] #conn-agent-panel .agent-profile-card {
  min-height: 44px !important;
}
#gv-profile-sheet .gv-run-settings {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#gv-profile-sheet .gv-run-settings-title {
  margin: 0;
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
#gv-profile-sheet .gv-run-settings-lock {
  margin: 8px 0 0;
  color: #e5c07b;
  font-size: 13px;
}
#gv-profile-sheet .gv-run-setting {
  margin-top: 12px;
}
#gv-profile-sheet .gv-run-setting[hidden] {
  display: none;
}
#gv-profile-sheet .gv-run-setting-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
#gv-profile-sheet .gv-run-setting-label {
  color: #9da3ad;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
#gv-profile-sheet .gv-run-setting-current {
  color: #e0e0e0;
  font-size: 13px;
  font-weight: 600;
}
#gv-profile-sheet .gv-run-settings[data-locked] .gv-run-setting-slot {
  opacity: 0.45;
}
#gv-profile-sheet [data-gv-run-slot] > .picker-panel {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: auto !important;
}
#gv-profile-sheet [data-gv-run-slot] > .picker-panel > button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 96px;
  width: auto !important;
  min-height: 36px;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}
#gv-profile-sheet [data-gv-run-slot] > .picker-panel > button[aria-pressed="false"] {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
#gv-profile-sheet[data-mode="fullscreen"] [data-gv-run-slot] > .picker-panel > button {
  min-height: 44px;
  font-size: 13px !important;
}
@media (prefers-reduced-motion: no-preference) {
  #gv-profile-sheet[data-open] .gv-profile-sheet-card {
    animation: gv-profile-sheet-in 160ms ease-out;
  }
}
@keyframes gv-profile-sheet-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #gv-profile-sheet,
  #gv-profile-sheet * {
    animation: none !important;
    transition: none !important;
  }
}
/* Composer chrome trigger (Prompt Composer + dedicated composer). */
.gv-run-settings-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 22px;
  border: 1px solid rgba(97, 175, 239, 0.5);
  background: #141414;
  color: #e0e0e0;
  font: 600 13px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  overflow: hidden;
}
/* Hidden while the selected node's turn runs (profile-sheet.ts syncTriggers);
   the inline-flex rule above would otherwise beat the hidden attribute. */
.gv-run-settings-button[hidden] {
  display: none !important;
}
/* Provider tint, matching the prompt-bar profile pill (data-gv-agent). */
.gv-run-settings-button[data-gv-agent="claude"] {
  border-color: rgba(204, 120, 92, 0.55);
  background: linear-gradient(180deg, rgba(204, 120, 92, 0.2), rgba(204, 120, 92, 0.1));
  color: #e59a7d;
}
.gv-run-settings-button[data-gv-agent="codex"] {
  border-color: rgba(16, 163, 127, 0.55);
  background: linear-gradient(180deg, rgba(16, 163, 127, 0.2), rgba(16, 163, 127, 0.1));
  color: #3fcf9f;
}
.gv-run-settings-button[data-gv-agent="direct"] {
  border-color: rgba(156, 163, 175, 0.5);
  background: rgba(156, 163, 175, 0.12);
  color: #c4c9d1;
}
.gv-run-settings-button [data-gv-run-settings-summary] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gv-run-settings-button:focus-visible {
  outline: 2px solid #61afef;
  outline-offset: 2px;
}
/* Prompt Composer hero: the run-settings button sits after the title and
   leaves the title readable on phones. */
#tt-composer .tt-composer-run-settings {
  order: 3;
  flex: 0 1 auto;
  margin-left: auto;
  max-width: min(360px, 55%);
}
#tt-composer .tt-composer-title {
  flex: 1 1 auto;
}

/* 2026-10-05e: a teammate's draft preview grows the composer pill; keep Attach
   (+) and Send on the typing line instead of re-centring on the tall pill.
   6px = (pill 53-55px - button 40-44px) / 2, their spot without a preview.
   2026-10-06: keyed on data-gv-draft-preview (draft_preview.ts), never :has():
   the :has() form restyled the whole console on every streamed insertion. */

/* ==========================================================================
 * Sealed Secret full-screen modal (2026-10-05, script/secret_vault_modal.ts)
 * Compact / touch / keyboard-open surfaces reparent the quick (tap) or
 * advanced (long-press) vault form into body > .secret-vault-modal. The
 * overlay tracks the visual viewport (JS writes the CSS vars) so the
 * on-screen keyboard never covers the textarea or the Seal/Cancel footer.
 * Prompt-bar pills are untouched; only controls inside the modal grow.
 * ========================================================================== */
.secret-vault-close {
  display: none;
}
.secret-vault-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  top: var(--secret-vault-modal-top, 0px);
  height: 100vh;
  height: 100dvh;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: rgba(10, 10, 12, 0.97);
  overscroll-behavior: contain;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.secret-vault-modal[data-secret-vault-viewport="sized"] {
  height: var(--secret-vault-modal-height, 100vh);
}
.secret-vault-modal[data-secret-vault-keyboard="open"] {
  padding-bottom: 0;
}
.secret-vault-modal > form[data-secret-vault-modal="true"] {
  flex: 1 1 auto;
  width: 100%;
  max-width: 760px;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 0;
}
@media (min-width: 761px) {
  .secret-vault-modal > form[data-secret-vault-modal="true"] {
    border-radius: 16px;
  }
}
form[data-secret-vault-modal="true"] .quick-secret-head,
form[data-secret-vault-modal="true"] .secret-vault-head {
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px 12px 10px 16px;
}
form[data-secret-vault-modal="true"] .secret-vault-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
form[data-secret-vault-modal="true"] .secret-vault-chip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
form[data-secret-vault-modal="true"] .secret-vault-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid rgba(240, 193, 75, 0.5);
  border-radius: 12px;
  background: rgba(23, 23, 25, 0.92);
  color: #f0c14b;
  font: 600 26px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
form[data-secret-vault-modal="true"] .secret-vault-close:focus-visible,
form[data-secret-vault-modal="true"] .quick-secret-btn:focus-visible,
form[data-secret-vault-modal="true"] .secret-vault-btn:focus-visible {
  outline: 2px solid #f0c14b;
  outline-offset: 2px;
}
form[data-secret-vault-modal="true"] .quick-secret-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
}
form[data-secret-vault-modal="true"] .quick-secret-body > * {
  flex: 0 0 auto;
}
form[data-secret-vault-modal="true"] .quick-secret-body > .quick-secret-value-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 124px;
}
form[data-secret-vault-modal="true"] .quick-secret-value-field textarea {
  flex: 1 1 auto;
  height: auto;
  min-height: 96px;
  max-height: none;
  overflow-y: auto;
}
form[data-secret-vault-modal="true"] .secret-vault-body {
  padding: 12px 16px;
}
form[data-secret-vault-modal="true"] input,
form[data-secret-vault-modal="true"] select,
form[data-secret-vault-modal="true"] textarea {
  font-size: 16px;
}
form[data-secret-vault-modal="true"] #secret-value {
  min-height: 120px;
  max-height: none;
}
form[data-secret-vault-modal="true"] .quick-secret-actions,
form[data-secret-vault-modal="true"] .secret-vault-actions {
  grid-template-columns: minmax(96px, 0.6fr) minmax(150px, 1fr);
  gap: 10px;
  padding: 10px 16px 12px;
}
form[data-secret-vault-modal="true"] .quick-secret-btn,
form[data-secret-vault-modal="true"] .secret-vault-btn {
  min-height: 48px;
  font-size: 15px;
}
.secret-vault-modal[data-secret-vault-keyboard="open"] .secret-vault-warning {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.4;
}
.secret-vault-modal[data-secret-vault-keyboard="open"] .secret-chain {
  padding: 7px 10px;
  gap: 4px;
}
.secret-vault-modal[data-secret-vault-keyboard="open"] .secret-chain-sub,
.secret-vault-modal[data-secret-vault-keyboard="open"] .secret-chain-node-stat {
  display: none;
}
.secret-vault-modal[data-secret-vault-keyboard="open"] .secret-chain-node[data-state="fail"] .secret-chain-node-stat {
  display: block;
}

/* ==========================================================================
   2026-10-08: PASTE BLOCKS (src/console-events.ts window.gvPasteBlocks).
   One collapsible card per large paste: inline in the formatted prompt
   overlay, inside both formatted composers, and in the #gv-paste-tray shelf
   above the input row while the prompt is being edited. These are cards, not
   prompt-bar pills (the 24px pill rule does not apply to them).
   ========================================================================== */
.gv-paste-tray {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 2px;
  background: transparent;
  pointer-events: auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gv-paste-tray[hidden] {
  display: none;
}
.gv-paste-blocks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-height: min(38vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gv-paste-blocks > .gv-paste-block {
  margin: 0;
  flex: 0 0 auto;
}
.gv-paste-tandem-hint {
  color: #f59e0b;
  font-size: 11px;
  line-height: 1.3;
}
.gv-paste-block {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 6px 0;
  border: 1px solid rgba(86, 182, 194, 0.32);
  border-radius: 10px;
  background: linear-gradient(180deg, #282b2f 0%, #212327 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 3px 12px rgba(0, 0, 0, 0.28);
  color: #e0e0e0;
  font: 400 13px/1.35 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: normal;
  text-align: left;
  white-space: normal;
  overflow: hidden;
  pointer-events: auto;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.gv-paste-block[data-expanded="true"] {
  border-color: rgba(86, 182, 194, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.34);
}
.gv-paste-block-head {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding-right: 4px;
}
.gv-paste-block-toggle {
  appearance: none;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 6px 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.gv-paste-block-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(86, 182, 194, 0.14);
  border: 1px solid rgba(86, 182, 194, 0.28);
  color: #56b6c2;
}
.gv-paste-block-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gv-paste-block-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.gv-paste-block-title {
  flex: 0 0 auto;
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
}
.gv-paste-block-stats {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e5c07b;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.gv-paste-block-preview {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7f848e;
  font: 400 11.5px/1.35 'JetBrains Mono', Monaco, Consolas, monospace;
}
.gv-paste-block-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #7f848e;
  transition: transform 160ms ease, color 160ms ease;
}
.gv-paste-block[data-expanded="true"] .gv-paste-block-chevron {
  transform: rotate(180deg);
  color: #56b6c2;
}
.gv-paste-block-action {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9aa0a9;
  cursor: pointer;
  touch-action: manipulation;
}
.gv-paste-block-action--remove:active {
  background: rgba(224, 108, 117, 0.16);
  color: #e06c75;
}
.gv-paste-block-toggle:focus-visible,
.gv-paste-block-action:focus-visible,
.gv-paste-block-code:focus-visible {
  outline: 2px solid #56b6c2;
  outline-offset: -2px;
}
.gv-paste-block-body {
  padding: 2px 10px 10px;
  border-top: 1px solid rgba(86, 182, 194, 0.18);
  background: rgba(0, 0, 0, 0.14);
}
.gv-paste-block-body[hidden] {
  display: none;
}
.gv-paste-block-code {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  max-height: min(40vh, 320px);
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid #34383d;
  border-radius: 6px;
  background: #16181a;
  color: #d7dae0;
  font: 12px/1.5 'JetBrains Mono', Monaco, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  tab-size: 2;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
textarea.gv-paste-block-code {
  resize: vertical;
}
textarea.gv-paste-block-code:focus {
  outline: none;
  border-color: #56b6c2;
}
.gv-paste-block-note {
  margin-top: 6px;
  color: #7f848e;
  font-size: 11px;
  line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
  .gv-paste-block:hover { border-color: rgba(86, 182, 194, 0.55); }
  .gv-paste-block-toggle:hover .gv-paste-block-chevron { color: #56b6c2; }
  .gv-paste-block-action:hover { background: rgba(255, 255, 255, 0.07); color: #ffffff; }
  .gv-paste-block-action--remove:hover { background: rgba(224, 108, 117, 0.14); color: #e06c75; }
}
/* Formatted overlay: the prefix-mode overlay is pointer-events:none so taps
   reach the textarea; blocks take their own taps back. */
#gv-prompt-render-overlay .gv-paste-block {
  pointer-events: auto;
  margin: 8px 0;
}
/* Prefix mode: the overlay's 68px right padding only protects the action
   buttons on the prefix row above it, so a block may use most of it. */
.console-input-wrap[data-composer-prefix] > #gv-prompt-render-overlay > .gv-paste-block {
  width: calc(100% + 52px);
  max-width: calc(100% + 52px);
}
#gv-prompt-render-overlay .gv-paste-block-code {
  font-size: 12px;
}
#tt-composer-preview .gv-paste-block,
#gv-prompt-composer-preview .gv-paste-block {
  margin: 10px 0;
}
/* 2026-10-08d: INLINE PASTE PILLS (src/console-paste-mirror.ts). While the
   prompt is edited, a mirror with the textarea's exact metrics (copied inline
   by JS) paints the draft; each token becomes a pill at its own text box. The
   textarea keeps its text, caret and selection; only its glyphs are hidden. */
#gv-paste-inline-mirror {
  position: absolute;
  z-index: 4;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;
}
#gv-paste-inline-mirror::-webkit-scrollbar {
  display: none;
}
.console-input.gv-paste-mirror-on,
.console-input.gv-paste-mirror-on::selection {
  -webkit-text-fill-color: transparent;
}
#gv-paste-inline-mirror .gv-paste-pill {
  position: relative;
  padding: 1px 0;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(86, 182, 194, 0.26), rgba(86, 182, 194, 0.14));
  box-shadow: inset 0 0 0 1px rgba(86, 182, 194, 0.55);
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#gv-paste-inline-mirror .gv-paste-pill[data-hover="true"],
#gv-paste-inline-mirror .gv-paste-pill[data-expanded="true"] {
  background: linear-gradient(180deg, rgba(86, 182, 194, 0.38), rgba(86, 182, 194, 0.22));
  box-shadow: inset 0 0 0 1px rgba(86, 182, 194, 0.85);
}
#gv-paste-inline-mirror .gv-paste-pill-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 5px;
  overflow: hidden;
  box-sizing: border-box;
  color: #dff5f8;
  -webkit-text-fill-color: #dff5f8;
  font: 600 12px/1 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.01em;
  text-indent: 0;
  text-transform: none;
  white-space: nowrap;
}
#gv-paste-inline-mirror .gv-paste-pill-label svg {
  flex: 0 0 auto;
  color: #56b6c2;
}
#gv-paste-inline-mirror .gv-paste-pill-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}
/* Token wrapped across lines: no single box for a label, so each fragment
   is tinted and the token text itself shows. */
#gv-paste-inline-mirror .gv-paste-pill[data-split="true"] {
  color: #bfe9ef;
  -webkit-text-fill-color: #bfe9ef;
}
#gv-paste-inline-mirror .gv-paste-pill[data-split="true"] > .gv-paste-pill-label {
  display: none;
}
/* The shelf would repeat the pills: visually hidden (still in the tab order,
   shown again while it has focus) until a card is opened from a pill. */
.gv-paste-tray[data-inline-pills]:not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap;
}
/* Touch / phones: 44px targets. */
@media (max-width: 600px), (pointer: coarse) {
  .gv-paste-block-toggle { min-height: 48px; }
  .gv-paste-block-action { width: 44px; height: 44px; }
  .gv-paste-tray { padding: 6px 8px 2px; }
  .gv-paste-block-code { max-height: min(34vh, 260px); }
}
/* Narrow phones: three 44px targets leave little room, so the icon yields
   and title, counts and first line stack. */
@media (max-width: 480px) {
  .gv-paste-block-icon { display: none; }
  .gv-paste-block-toggle { gap: 4px; padding-left: 12px; }
  .gv-paste-block-heading { flex-direction: column; align-items: flex-start; gap: 1px; }
  .gv-paste-block-stats { max-width: 100%; }
}
body.keyboard-open .gv-paste-block-code {
  max-height: min(28dvh, 200px);
}
/* iOS Safari zooms into any focused field under 16px. */
@media (max-width: 1024px), (pointer: coarse) {
  textarea.gv-paste-block-code { font-size: 16px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-paste-block,
  .gv-paste-block-chevron { transition: none; }
}

/* 2026-10-08 (owner, 4169x1920): on very wide windows the prompt bar spanned
   the whole window. From 1921px the composer rows are centred and capped:
   full width at 1920px, falling continuously to exactly half the window at
   2400px and tracking 50vw above it. The + toggle, run pills and Send live
   inside .input-row, so they stay attached. <=1920px is unchanged. */
@media (min-width: 1921px) {
  .input-context-component {
    --gv-prompt-max-width: max(960px, 50vw, calc(100vw - (100vw - 1920px) * 2.5));
  }
  .input-context-component > .input-row,
  .input-context-component > .gv-paste-tray,
  .input-context-component > .context-chips,
  .input-context-component > .tt-strip,
  .input-context-component:not([data-tray-fullscreen="true"]) > .context-tray {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--gv-prompt-max-width);
    margin-left: auto;
    margin-right: auto;
  }
}

/* gv.servers: web services and full-screen terminal app Settings collection. */
.gv-servers-settings > .gvs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: start;
}
.gv-servers-settings > .gvs-head .gvs-head-label {
  grid-column: 1;
}
.gv-servers-settings > .gvs-head .gvs-card-title {
  grid-column: 1;
  grid-row: 2;
  font-size: 16px;
}
.gv-servers-settings > .gvs-head .gvs-head-count {
  grid-column: 2;
  grid-row: 1 / 3;
}
.gv-servers-settings > .gvs-head .gvs-head-hint {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.gv-servers-settings .gv-servers-register-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin: 12px 0;
}
.gv-servers-settings .gv-servers-register-grid .gvs-label {
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.gv-servers-settings .gv-servers-register-grid [hidden] {
  display: none;
}
.gv-servers-settings .gv-servers-register-grid input,
.gv-servers-settings .gv-servers-register-grid select {
  width: 100%;
  box-sizing: border-box;
}
.gv-servers-settings summary {
  cursor: pointer;
  color: var(--gvs-info);
  font-weight: 600;
  padding: 4px 0;
}
.gv-servers-settings summary:focus-visible {
  outline: 2px solid var(--gvs-info);
  outline-offset: 4px;
  border-radius: 4px;
}
.gv-servers-settings .gvs-card-head {
  flex-wrap: wrap;
}
.gv-servers-settings .gvs-card-title {
  min-width: min(140px, 100%);
}
.gv-servers-settings .gvs-card-sub,
.gv-servers-settings .gvs-card-meta span {
  white-space: normal;
  overflow-wrap: anywhere;
}
.gv-servers-settings .gvs-controls .gvs-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.gv-servers-settings .gvs-modal-status:not(:empty) {
  margin: 8px 0;
}
.gv-servers-settings .gvs-modal-status[role="alert"] {
  color: var(--gvs-error);
}
.gv-servers-settings .gvs-head-hint {
  display: block;
  margin-top: 8px;
  line-height: 1.45;
}
@media (max-width: 600px), (pointer: coarse) {
  .gv-servers-settings .gvs-input,
  .gv-servers-settings .gvs-select {
    min-height: 44px;
    font-size: 16px;
  }
  .gv-servers-settings .gvs-btn,
  .gv-servers-settings summary {
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  .gv-servers-settings .gvs-controls .gvs-label {
    width: 100%;
  }
}

/* Compact utility collection: primary actions visible, session options disclosed. */
.gv-servers-settings .gvs-server-section {
  margin-top: 14px;
  padding: 0;
}
.gv-servers-settings .gvs-server-section > h3,
.gv-servers-settings .gvs-server-section > .gvs-head-hint {
  padding-left: 10px;
}
.gv-servers-settings .gvs-server-section > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gv-servers-settings .gvs-utilities-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin: 10px 0;
  background: var(--gvs-bg-inset);
  border: 1px solid var(--gvs-border);
  border-radius: var(--gvs-radius-sm);
  font-size: 13px;
}
.gv-servers-settings .gvs-utilities-setting > div {
  min-width: 0;
}
.gv-servers-settings .gvs-utilities-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}
.gv-servers-settings .gvs-utilities-switch input {
  width: 22px;
  height: 22px;
  accent-color: var(--gvs-data);
}
.gv-servers-settings .gvs-utility-row {
  border: 1px solid var(--gvs-border);
  border-radius: var(--gvs-radius-sm);
  background: var(--gvs-bg-inset);
  margin: 6px 0;
  padding: 10px 12px 0;
  min-width: 0;
}
.gv-servers-settings .gvs-utility-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.gv-servers-settings .gvs-utility-main > div {
  flex: 1;
  min-width: 0;
}
.gv-servers-settings .gvs-utility-title {
  color: var(--gvs-text-title);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.gv-servers-settings .gvs-utility-hint {
  color: var(--gvs-text-muted);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.gv-servers-settings .gvs-utility-details summary {
  color: var(--gvs-text-muted);
  font-size: 11px;
  font-weight: 400;
  min-height: 28px;
  padding: 0;
  display: list-item;
  line-height: 28px;
}
.gv-servers-settings .gvs-utility-details[open] {
  padding-bottom: 10px;
}
.gv-servers-settings .gvs-utility-command {
  font-family: 'JetBrains Mono', Monaco, Consolas, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
  padding: 6px 0;
}
.gv-servers-settings .gvs-utility-main .gvs-btn {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 64px;
  padding: 8px 12px;
  font-size: 13px;
  box-sizing: border-box;
}
.gv-servers-settings .gvs-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.7);
}
.gv-servers-settings [data-server-group] > .gvs-label {
  margin: 12px 0 6px;
  padding-left: 10px;
}
.gv-servers-settings > details.gvs-well {
  margin-top: 16px;
}
/* Rich utility rows: icon tile, description, OS + kind badges. */
.gv-servers-settings .gvs-utility-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(86, 182, 194, 0.12);
  border: 1px solid rgba(86, 182, 194, 0.35);
  font-size: 18px;
  line-height: 1;
}
.gv-servers-settings .gvs-utility-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.gv-servers-settings .gvs-utility-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  color: var(--gvs-text-muted);
  background: var(--gvs-bg-inset);
  border: 1px solid var(--gvs-border);
  white-space: nowrap;
}
.gv-servers-settings .gvs-utility-badge[data-utility-kind-badge] {
  color: #56b6c2;
  border-color: rgba(86, 182, 194, 0.45);
}
.gv-servers-settings .gvs-utility-badge.is-soon {
  color: #e5c07b;
  border-color: rgba(229, 192, 123, 0.45);
  border-style: dashed;
}
.gv-servers-settings .gvs-utility-group-label {
  margin: 12px 0 4px;
  padding-left: 10px;
}
@media (min-width: 700px) {
  .gv-servers-settings [data-utility-group-block] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0 10px;
  }
  .gv-servers-settings [data-utility-group-block] > .gvs-label {
    grid-column: 1 / -1;
  }
}
@media (pointer: coarse) {
  .gv-servers-settings .gvs-utility-details summary {
    min-height: 44px;
    line-height: 44px;
  }
}
.gv-servers-settings [hidden] {
  display: none !important;
}

/* ==========================================================================
   2026-10-11: Linux-style prompt line (owner) = the TERMINAL console style,
   the default. Personalisation console_style "classic" sets
   <html data-gv-console-style="classic"> and every rule below steps aside,
   restoring the bordered, coloured prompt bar. The prefix reads
   model/profile@node: followed by a blinking block cursor. No pill
   backgrounds or borders; muted greys that keep >= 4.5:1 on the dark input;
   lowercase JetBrains Mono. Tap targets keep the existing 24px / 26.4px
   heights. Two-ID selectors and !important beat the inline styles and the
   phone-tier pill block above.
   ========================================================================== */
:root:not([data-gv-console-style="classic"]) #composer-prefix {
  column-gap: 0;
  row-gap: 4px;
  --gv-prompt-ident: #b9c1ca;
  --gv-prompt-host: #d3d9df;
  --gv-prompt-sep: #858e98;
  --gv-prompt-size: 11px;
}
/* Desktop (fine pointer, Fold-main width and up) reads closer to the draft. */
@media (min-width: 884px) and (hover: hover) and (pointer: fine) {
  :root:not([data-gv-console-style="classic"]) #composer-prefix { --gv-prompt-size: 13px; }
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-model-picker { order: 1; gap: 0 !important; flex-wrap: nowrap !important; }
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-agent-picker { order: 2; }
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge { order: 3; }
:root:not([data-gv-console-style="classic"]) #composer-prefix .composer-prompt-lead { order: 5; padding-left: 0; }
/* The short model word stays on the first row (the phone tier still hides it:
   at 320-430px it squeezed the profile name to an ellipsis). */
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-compact-controls]:not([data-model-collapsed]) #conn-model-picker { flex: 0 0 auto; max-width: 7ch; }
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-compact-controls] #conn-agent-picker { margin-right: 0; }
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-compact-controls] #conn-agent-picker,
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-compact-controls] #composer-node-badge { max-width: calc((100% - 88px - 7ch) / 2); }
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-compact-controls] #composer-node-badge { margin-right: 84px; }
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-active-agent,
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-model-picker > button,
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge > [data-node-badge] {
  display: inline-flex;
  align-items: center;
  gap: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gv-prompt-ident) !important;
  font-family: "JetBrains Mono", Monaco, Consolas, monospace !important;
  font-size: var(--gv-prompt-size) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: lowercase !important;
  border-radius: 6px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-width: 0 !important;
  min-height: 26.4px;
  transition: background-color 120ms ease, color 120ms ease;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge > [data-node-badge] {
  color: var(--gv-prompt-host) !important;
}
/* opus/profile@node: effort and tone live in the profile sheet; the model
   badge shows the complete model label except in the compact phone fallback. */
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-thinking-effort,
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-tone {
  display: none !important;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-model-picker > #conn-active-model[data-prompt-label]:not([data-prompt-label=""]) {
  font-size: 0 !important;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-model-picker > #conn-active-model[data-prompt-label]:not([data-prompt-label=""])::before {
  content: attr(data-prompt-label);
  font-size: var(--gv-prompt-size);
  white-space: nowrap;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-active-agent:hover,
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-model-picker > button:hover,
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge > [data-node-badge]:hover,
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge > [data-node-badge][data-open="true"],
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-active-agent[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #eef1f4 !important;
}
/* Identity, not decoration: no provider logo or dropdown caret on the line. */
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-active-agent-logo,
:root:not([data-gv-console-style="classic"]) #composer-prefix [data-node-badge] [data-badge-caret] {
  display: none !important;
}
/* model/profile@node: separators belong to the clickable controls. */
/* The '/' is part of the model control: tapping it opens the profile sheet
   too (the group is otherwise pointer-transparent). */
:root:not([data-gv-console-style="classic"]) #composer-prefix:not([data-model-collapsed]) #conn-model-picker[data-has-model] { pointer-events: auto; cursor: pointer; }
:root:not([data-gv-console-style="classic"]) #composer-prefix:not([data-model-collapsed]) #conn-model-picker[data-has-model]::after {
  content: "/";
  align-self: center;
  color: var(--gv-prompt-sep);
  font: 500 var(--gv-prompt-size)/1 "JetBrains Mono", Monaco, Consolas, monospace;
  padding: 0;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix [data-node-badge]::before {
  content: "@";
  order: 0;
  color: var(--gv-prompt-sep);
}
:root:not([data-gv-console-style="classic"]) #composer-prefix [data-node-badge] [data-badge-label] { order: 1; }
/* Health stays visible as a small status dot after the host name. */
:root:not([data-gv-console-style="classic"]) #composer-prefix [data-node-badge] [data-health-dot] {
  display: none !important;
}
#composer-prompt-marker {
  color: var(--gv-prompt-sep);
  font: 500 calc(var(--gv-prompt-size) + 1px)/24px "JetBrains Mono", Monaco, Consolas, monospace;
}
/* The block cursor reserves its width always (the measured first-line indent
   never shifts) and shows only while the draft is empty; the native caret is
   hidden then, so exactly one cursor blinks where typing starts. */
#composer-prompt-marker::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  margin-left: 0.45em;
  vertical-align: -0.2em;
  background: var(--gv-prompt-host);
  visibility: hidden;
}
:root:not([data-gv-console-style="classic"]) .console-input-wrap[data-composer-prefix]:has(> .console-input:placeholder-shown) #composer-prompt-marker::after {
  visibility: visible;
  animation: gv-prompt-cursor-blink 1.1s steps(1, end) infinite;
}
:root:not([data-gv-console-style="classic"]) .console-input-wrap[data-composer-prefix] > .console-input:placeholder-shown {
  caret-color: transparent;
}
@keyframes gv-prompt-cursor-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-gv-console-style="classic"]) .console-input-wrap[data-composer-prefix]:has(> .console-input:placeholder-shown) #composer-prompt-marker::after { animation: none; }
  :root:not([data-gv-console-style="classic"]) #composer-prefix #conn-active-agent,
  :root:not([data-gv-console-style="classic"]) #composer-prefix #conn-model-picker > button,
  :root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge > [data-node-badge] { transition: none; }
}
/* Terminal input line: no box, no fill, no glow. The 2px border stays (as
   transparent) so the measured prefix geometry is unchanged. */
:root:not([data-gv-console-style="classic"]) .input-row .console-input,
:root:not([data-gv-console-style="classic"]) .input-row .console-input:focus,
:root:not([data-gv-console-style="classic"]) .input-row .console-input:not(:placeholder-shown) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* Desktop labels have room for the full profile and node names. */
@media (min-width: 884px) and (hover: hover) and (pointer: fine) {
  :root:not([data-gv-console-style="classic"]) #composer-prefix #conn-active-agent-label,
  :root:not([data-gv-console-style="classic"]) #composer-prefix [data-node-badge] [data-badge-label] {
    max-width: 22ch !important;
  }
}
/* Classic keeps its original ':>' marker (the markup now carries ':'). */
:root[data-gv-console-style="classic"] #composer-prompt-marker::after {
  content: ">";
}

/* Terminal identity stays readable at the native draft size on every device. */
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-agent-picker,
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge,
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-model-picker,
:root:not([data-gv-console-style="classic"]) #composer-prefix [data-node-badge] [data-badge-label] {
  max-width: none !important;
  flex-shrink: 0;
  overflow: visible !important;
  text-overflow: clip !important;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-model-picker {
  display: inline-flex !important;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-active-agent[data-short-label] #conn-active-agent-label {
  display: inline !important;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-active-agent[data-short-label]::after {
  content: none;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-prompt-marker {
  font-size: var(--gv-prompt-size);
}

/* Identity and the first draft line share the native textarea baseline. */
:root:not([data-gv-console-style="classic"]) #composer-prefix {
  right: 14px !important;
  flex-wrap: nowrap !important;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge {
  margin-right: 0 !important;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #conn-active-agent-label,
:root:not([data-gv-console-style="classic"]) #composer-prefix [data-node-badge] {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: var(--gv-prompt-size) !important;
}

/* Compact typing identity returns unused label width only on narrow phones. */
:root:not([data-gv-console-style="classic"]) .input-row .console-input,
:root:not([data-gv-console-style="classic"]) #composer-prefix {
  text-align: left;
  justify-content: flex-start;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact] #conn-model-picker,
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact] #conn-agent-picker,
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact] #composer-node-badge { display: none !important; }
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact][data-prefix-part="model"] #conn-model-picker,
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact][data-prefix-part="profile"] #conn-agent-picker,
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact][data-prefix-part="node"] #composer-node-badge {
  display: inline-flex !important;
  width: var(--gv-prompt-slot-width);
  min-width: 0;
  max-width: var(--gv-prompt-slot-width) !important;
  justify-content: flex-start !important;
  text-align: left;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact] #conn-model-picker > #conn-active-model[data-prompt-label]:not([data-prompt-label=""]) {
  text-transform: none !important;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact] #conn-model-picker > #conn-active-model[data-prompt-label]:not([data-prompt-label=""])::before {
  content: attr(data-prompt-full-label);
}
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact]:not([data-model-collapsed]) #conn-model-picker[data-has-model]::after,
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact] [data-node-badge]::before { content: none; }
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact] [data-node-badge],
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact] #conn-active-agent,
:root:not([data-gv-console-style="classic"]) #composer-prefix[data-prefix-compact] #conn-active-model {
  min-width: 0;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.composer-input-hint { display: none; }
:root:not([data-gv-console-style="classic"]) .composer-input-hint {
  display: block;
  position: absolute;
  top: calc(var(--composer-text-top, 14px) + 2px);
  left: var(--composer-hint-left, 28px);
  color: var(--prompt-placeholder, #7f848e);
  font-size: var(--composer-hint-size, 16px);
  line-height: var(--composer-hint-line-height, 24px);
  font-style: italic;
  pointer-events: none;
  white-space: nowrap;
  animation: gv-input-hint-fade 4s ease-in-out infinite;
}
:root:not([data-gv-console-style="classic"]) .composer-input-hint::before { content: "... "; }
:root:not([data-gv-console-style="classic"]) .input-row .console-input::placeholder { color: transparent; }
:root:not([data-gv-console-style="classic"]) .console-input-wrap[data-has-draft] > .composer-input-hint,
:root:not([data-gv-console-style="classic"]) .console-input-wrap[data-hide-input-hint] > .composer-input-hint { display: none; }
@keyframes gv-input-hint-fade { 0%,100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-gv-console-style="classic"]) .composer-input-hint { animation: none; opacity: .7; }
}

/* All four composer actions share one center even when the editor grows. */
.input-row > #context-toggle,
.input-row > #dash-console-submit,
.input-row[data-gv-draft-preview] > #context-toggle,
.input-row[data-gv-draft-preview] > #dash-console-submit { align-self: center; margin-top: 0; }
.input-row .console-input-wrap[data-composer-prefix] > #gv-follow-open,
.input-row .console-input-wrap[data-composer-prefix] > #gv-tt-open {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

/* Node-only prompt and shared status selectors, all devices. */
#composer-prefix #composer-node-badge {
  order: 1 !important; max-width: calc(100% - 28px) !important;
  margin-right: 0 !important; flex: 0 1 auto !important;
}
#composer-prefix [data-node-badge]::before { content: none !important; }
#composer-prefix .composer-prompt-lead { order: 2 !important; flex: 0 0 auto; }
#composer-prefix [data-badge-label] {
  max-width: min(28ch, calc(100vw - 210px)) !important;
}
#connection-status-bar .status-run-settings {
  display: flex; flex: 0 1 auto; min-width: 0; max-width: min(60vw, 640px);
}
#connection-status-bar #conn-run-settings {
  display: flex; align-items: center; gap: 5px; flex-wrap: nowrap;
  min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-x: contain; touch-action: pan-x;
}
#connection-status-bar #conn-run-settings::-webkit-scrollbar { display: none; }
#connection-status-bar #conn-agent-picker,
#connection-status-bar #conn-model-picker {
  display: inline-flex !important; align-items: center; flex: 0 0 auto;
  gap: 5px; flex-wrap: nowrap; visibility: visible; opacity: 1 !important;
  max-width: none !important; transform: none !important; margin-left: 0 !important;
  overflow: visible !important; pointer-events: auto !important;
}
#connection-status-bar #conn-run-settings button {
  min-height: 28px; padding: 4px 8px !important; border-radius: 0 !important;
  background: transparent !important; border: 0 !important; touch-action: pan-x; font: 600 11px/1.2 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  white-space: nowrap; letter-spacing: .2px !important; text-transform: none !important;
  box-shadow: none !important; text-underline-offset: 3px;
}
#connection-status-bar #conn-active-agent { color: #eee0d1 !important; }
#connection-status-bar #conn-active-model { color: #f4b57d !important; }
#connection-status-bar #conn-thinking-effort { color: #e9d29c !important; }
#connection-status-bar #conn-tone { color: #afd0e1 !important; }
#connection-status-bar #conn-run-settings button:focus-visible { outline: 2px solid #f59e0b; outline-offset: -2px; }
#connection-status-bar #conn-run-settings button:hover:not(:disabled),
#connection-status-bar #conn-run-settings button:focus-visible { text-decoration: underline; }
@media (pointer: coarse) {
  #connection-status-bar #conn-run-settings button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 600px) {
  #connection-status-bar .status-run-settings { max-width: calc(100vw - 96px); flex: 1 1 auto; }
  #connection-status-bar #conn-run-settings button { padding: 4px 6px !important; font-size: 10px !important; }
}

@media (max-width: 600px) {
  #connection-status-bar .status-run-settings { flex: 0 0 auto; }
  #connection-status-bar #conn-active-model[data-prompt-label]:not([data-prompt-label=""]) { font-size: 0 !important; }
  #connection-status-bar #conn-active-model[data-prompt-label]:not([data-prompt-label=""])::before {
    content: attr(data-prompt-label); font: 600 10px/1.2 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; text-transform: capitalize;
  }
}

/* Reserve the two composer actions beside the steady node label. */
:root:not([data-gv-console-style="classic"]) #composer-prefix { right: 96px !important; }
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge > [data-node-badge] {
  max-width: 100% !important; min-width: 0; overflow: hidden !important; flex-shrink: 1;
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge [data-badge-label] {
  max-width: min(28ch, 100%) !important; min-width: 0; overflow: hidden !important;
  text-overflow: ellipsis !important; white-space: nowrap;
}
#connection-status-bar #conn-active-agent[data-short-label] #conn-active-agent-label { display: none; }
#connection-status-bar #conn-active-agent[data-short-label]::after { content: attr(data-short-label); }

/* Full node identity uses wrapping, never an ellipsis or a hidden tail. */
#composer-prefix #composer-node-badge {
  min-width: 0; max-width: calc(100% - 28px) !important;
}
#composer-prefix #composer-node-badge > [data-node-badge],
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge > [data-node-badge] {
  max-width: 100% !important; overflow: visible !important; white-space: normal !important;
}
#composer-prefix #composer-node-badge [data-badge-label],
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge [data-badge-label] {
  max-width: none !important; min-width: 0; overflow: visible !important;
  text-overflow: clip !important; white-space: normal !important;
  overflow-wrap: anywhere; word-break: normal; flex-shrink: 1 !important; display: block; line-height: 24px;
}
#composer-prefix .composer-prompt-lead { align-self: flex-end; }
/* The glass node pill (inset accent + highlight from node-badge.ts) needs room
   inside its edge, or the outline sits on the first and last letters. */
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge > [data-node-badge] {
  padding-left: 10px !important; padding-right: 8px !important;
  border-radius: 8px !important;
}
/* Long drafts keep the node picker outside the textarea's scroll viewport. */
:root:not([data-gv-console-style="classic"]) .console-input-wrap[data-composer-node-row] {
  padding-top: var(--composer-node-row-height, 44px);
}
:root:not([data-gv-console-style="classic"]) #composer-prefix .composer-prompt-lead,
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-prompt-marker,
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-node-badge [data-badge-label] {
  line-height: var(--gv-prompt-line-height, 24px);
}
:root:not([data-gv-console-style="classic"]) #composer-prefix .composer-prompt-lead {
  height: var(--gv-prompt-line-height, 24px);
}
:root:not([data-gv-console-style="classic"]) #composer-prefix #composer-prompt-marker::after {
  margin-left: 4px;
}
#connection-status-bar .status-context-lane,
#connection-status-bar .status-tools-lane { display: contents; }
@media (min-width: 1440px) and (pointer: fine) {
  #connection-status-bar {
    display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    column-gap: 20px; overflow: visible;
  }
  #connection-status-bar .status-context-lane,
  #connection-status-bar .status-tools-lane {
    display: flex; align-items: center; gap: 12px; min-width: 0;
  }
  #connection-status-bar .status-tools-lane { justify-content: flex-end; }
  #connection-status-bar .status-tools-lane > * { flex-shrink: 0; }
  #connection-status-bar .status-tools-lane .console-system-status {
    flex: 1 1 0%; min-width: 0;
  }
  #connection-status-bar .status-run-settings { max-width: 50vw; justify-self: center; }
  #connection-status-bar #conn-run-settings { gap: 16px; }
  #connection-status-bar #conn-run-settings button {
    font-size: 15px !important; font-weight: 650 !important;
    min-height: 36px; padding: 6px 10px !important; letter-spacing: .25px !important;
  }
  #connection-status-bar #conn-active-agent-label { max-width: none; }
  #connection-status-bar #conn-active-agent[data-short-label] #conn-active-agent-label { display: inline; }
  #connection-status-bar #conn-active-agent[data-short-label]::after { content: none; }
}

/* Unknown values are available in the shared profile sheet, not as empty marks. */
#connection-status-bar #conn-thinking-effort[data-status-unknown="true"],
#connection-status-bar #conn-tone[data-status-unknown="true"] { display: none !important; }
@media (max-width: 1100px) {
  #connection-status-bar .status-pipe-sep,
  #connection-status-bar .divider:not(.status-trailing-divider) { display: none; }
  #connection-status-bar .status-trailing-divider { width: 0; background: transparent; }
}