/* Barad application layout and component styles. */

:root {
  --git-modified: var(--accent-solid);
  --git-added: var(--success-text);
  --git-untracked: var(--success-text);
  --git-deleted: var(--danger-text);
  --git-renamed: var(--agent-text);
  --git-conflict: var(--danger-text);
  --git-type-changed: var(--accent-solid);
  --git-copied: var(--agent-text);
}

:where(button, a, summary, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
:where(a, summary, [role="button"]):active,
button:active:not(:disabled) { opacity: 0.78; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.hidden { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid var(--surface-canvas); border-radius: 6px; }

/* ---------- Status motion ---------- */

@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Toasts ---------- */

.toast-host {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: grid;
  gap: 6px;
  justify-items: center;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  max-width: 640px;
  padding: 0.55rem 0.9rem;
  animation: toast-in 160ms ease-out;
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Gate (signed out) ---------- */

.gate {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.gate-frame {
  text-align: center;
  max-width: 560px;
  padding: 4rem 3rem 3rem;
  position: relative;
}
.gate-frame::before, .gate-frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
}
.gate-frame::before { top: -1px; left: -1px; }
.gate-frame::after { bottom: -1px; right: -1px; }

.gate-coords {
  margin: 0 0 2.5rem;
  font-size: 10px;
  letter-spacing: 0.35em;
}
.gate-lockup {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}
.gate-mark {
  margin: 0;
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  text-indent: 0.22em;
}
.gate-sub {
  margin: 1.2rem auto 0;
  max-width: 40ch;
}
.gate-rule {
  width: 60px;
  height: 1px;
  background: var(--accent-solid);
  margin: 2.2rem auto;
}
.gate-foot {
  margin: 2.5rem 0 0;
  font-size: 11px;
}

.auth-form {
  display: grid;
  gap: 0.8rem;
  text-align: left;
  max-width: 340px;
  margin: 0 auto;
}
.auth-form .field { margin: 0; }
.auth-submit { margin-top: 0.4rem; }
.auth-link {
  font: inherit;
  font-size: 12px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  justify-self: center;
  padding: 0.2rem 0.4rem;
}
.auth-note {
  margin: 0;
  font-size: 12px;
  text-align: center;
}
.auth-legal {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.auth-legal a { color: var(--text-primary); }
.turnstile-widget {
  display: grid;
  min-height: 65px;
  place-items: center;
  width: 100%;
}
.auth-status {
  margin: 1rem auto 0;
  max-width: 340px;
  color: var(--success-text);
  font-size: 12px;
  text-align: center;
}
.auth-error {
  margin: 1rem auto 0;
  max-width: 340px;
  font-size: 12px;
  color: var(--danger-text);
  padding: 0.5rem 0.8rem;
  text-align: left;
  word-break: break-word;
}

/* ---------- Shell layout ---------- */

.shell {
  position: fixed;
  top: var(--visual-viewport-top, 0px);
  left: var(--visual-viewport-left, 0px);
  width: var(--visual-viewport-width, 100%);
  height: var(--visual-viewport-height, 100%);
  display: grid;
  overflow: hidden;
}

/* ---------- Rail ---------- */

.mobile-nav, .session-picker-backdrop, .session-picker-close { display: none; }

.rail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.brand-lockup {
  display: flex;
  align-items: center;
}
.brand-mark {
  margin: 0;
  font-family: var(--font-serif);
}
.brand-sub {
  margin: 0.1rem 0 0;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-solid);
}
.session-search {
  display: flex;
  align-items: center;
}
.session-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  outline: 0;
  background: transparent;
}
.session-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.rail-label {
  margin: 0;
}
.rail-scope-button {
  background: transparent;
  cursor: pointer;
}
.session-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  display: grid;
  align-content: start;
}
.session-item {
  position: relative;
  min-width: 0;
}
.session-item-select {
  min-width: 0;
  text-align: left;
  font: inherit;
  background: transparent;
  cursor: pointer;
}
.session-item-draft {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-item-activity {
  white-space: nowrap;
}
.session-item-status { text-align: right; }
.session-item-status,
.session-item-time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-item-menu-button {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  border-radius: 3px;
  font: 16px/1 var(--font-mono);
  cursor: pointer;
}
.session-item:focus-within .session-item-menu-button { opacity: 1; }
.session-summary { letter-spacing: 0.04em; }
.session-list-empty, .session-list-notice {
  margin: 0;
  padding: 1rem 0.6rem;
}
.session-list-notice {
  background:color-mix(in srgb,var(--danger-text) 6%,transparent);
}
.rail-account {
  flex: none;
}
.rail-account > .rail-label,
.account-line { margin-inline: 0.45rem; }
.account-line {
  min-width: 0;
  margin-block: 0.2rem 0.7rem;
}
.account-nav {
  display: grid;
}
.account-nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

/* ---------- Stage ---------- */

.connection-status {
  position: absolute;
  z-index: 20;
  top: 12px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 24px);
  min-height: 38px;
  padding: 5px 6px 5px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: translateX(-50%);
  border-radius: 4px;
  text-align: center;
}
.connection-status .btn { flex: none; color: currentColor; }

.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.empty-stage,
.session-stage,
.page-stage { grid-row: 1; }
.empty-stage {
  display: grid;
  place-content: center;
  padding: var(--workspace-gutter);
  overflow-y: auto;
  gap: 0.4rem;
  text-align: center;
}
.empty-mark {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
}
.empty-sub { margin: 0 auto; max-width: 44ch; }
.recent-sessions { width: min(540px,100%); display: grid; gap: 8px; margin: 20px auto 0; text-align: left; }
.recent-sessions:empty { display: none; }
.recent-session { width: 100%; padding: 14px; display: grid; gap: 6px; color: var(--text-primary); text-align: left; overflow-wrap: anywhere; }
.recent-session strong { font-size: 15px; font-weight: 600; line-height: 1.4; }
.recent-session span { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.recent-session:hover { background: var(--surface-raised); }
#create-model-status:empty,#session-model-status:empty { display: none; }
.environment-disclosure summary { min-height: 36px; }
.environment-disclosure summary span { color: var(--text-muted); font-weight: 400; margin-left: auto; }
.environment-disclosure[open] > :not(summary) { margin-top: 12px; }
.empty-action { justify-self: center; margin-top: 0.7rem; }

.session-stage {
  container: session / size;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.panel {
  min-height: 0;
  display: grid;
  overflow: hidden;
}
#panel-conversation { grid-template-rows: minmax(0, 1fr) auto; }
#panel-review { grid-template-rows: auto auto auto minmax(0, 1fr); }
#panel-terminal { grid-template-rows: auto minmax(0, 1fr); }

/* ---------- Session header ---------- */

.session-head {
  min-width: 0;
  display: flex;
  justify-content: space-between;
}
.session-head-id { min-width: 0; }
.session-title-row {
  display: flex;
  min-width: 0;
}
.session-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-head-side {
  display: flex;
  align-items: center;
  flex: none;
}
.gauge-labels {
  display: flex;
  justify-content: space-between;
}
.gauge-fill {
  height: 100%;
  width: 0;
  transition: width 400ms ease;
}
.gauge-fill.is-hot { background: var(--danger-text); }
.head-buttons { display: flex; gap: 6px; }
.session-menu-button {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
}
.tab {
  background: transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.terminal-tab-indicator {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--accent-solid);
}
.terminal-tab-indicator.is-connected { background: var(--success-text); }
.tab:focus-visible { outline-offset: -3px; }

/* ---------- Transcript ---------- */

.transcript-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.transcript {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  display: grid;
  align-content: start;
}
.transcript > * {
  min-width: 0;
  max-width: var(--session-content-width);
  width: 100%;
  margin: 0 auto;
}
.transcript-nav {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.transcript-nav-button {
  position: absolute;
  right: 0;
  min-width: 4.6rem;
  pointer-events: auto;
}
.transcript-nav-button.is-loading:disabled {
  color: transparent;
  cursor: wait;
  opacity: 1;
}
.transcript-nav-button.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 13px;
  height: 13px;
  margin: auto;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent-solid);
  border-radius: 50%;
  animation: transcript-nav-spin 800ms linear infinite;
}
@keyframes transcript-nav-spin { to { transform: rotate(360deg); } }
#transcript-top { top: 0; }
#transcript-bottom { bottom: 0; }

.msg-body {
  overflow-wrap: anywhere;
}

.cursor-blink {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--agent-text);
  vertical-align: text-bottom;
  margin-left: 3px;
  animation: led-pulse 0.9s step-end infinite;
}

/* markdown prose */
.prose { min-width: 0; max-width: 100%; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 0.6rem; }
.prose h1, .prose h2, .prose h3 {
  margin: 1rem 0 0.4rem;
}
.prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 0.6rem; }
.prose ul { padding-inline-start: 1.6rem; list-style-type: disc; }
.prose ol { padding-inline-start: 2.5rem; list-style-type: decimal; }
.prose li { margin: 0.15rem 0; }
.prose li > p { margin: 0.35rem 0; }
.prose li > ul, .prose li > ol { margin: 0.25rem 0 0.35rem; }
.prose ul ul { list-style-type: circle; }
.prose ul ul ul { list-style-type: square; }
.prose code {
  padding: 0 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.prose .code-block {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0.6rem 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.prose .code-copy {
  position: sticky;
  left: calc(100% - 4.5rem);
  z-index: 1;
  display: block;
  margin: 0.4rem 0.4rem 0 auto;
  cursor: pointer;
}
.prose .code-block pre {
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0.7rem 0.9rem;
}
.prose .code-block code {
  display: block;
  padding: 0;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}
.prose .table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0.6rem 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.prose .table-scroll table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  background: var(--surface-default);
}
.prose .table-scroll th,
.prose .table-scroll td {
  max-width: 36rem;
  padding: 0.45rem 0.65rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.prose .table-scroll th {
  background: var(--surface-muted);
  color: var(--text-primary);
  font-size: 11px;
}
.prose .table-scroll .is-align-left { text-align: left; }
.prose .table-scroll .is-align-center { text-align: center; }
.prose .table-scroll .is-align-right { text-align: right; }
.prose .code-block:focus-visible,
.prose .table-scroll:focus-visible { outline: 1px solid var(--accent-solid); outline-offset: 2px; }
.prose a, .prose .file-link { text-underline-offset: 2px; }
.prose .file-link {
  display: inline;
  min-height: 0;
  border-radius: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: inherit;
  text-decoration: underline;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.prose blockquote {
  margin: 0.6rem 0;
}

/* reasoning summaries */
.thinking-head {
  min-width: 0;
  cursor: pointer;
  list-style: none;
}

.thinking-body {
  overflow-wrap: anywhere;
}

/* tool cards */
.tool-head {
  width: 100%;
  min-width: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  list-style: none;
}
.tool-summary {
  overflow-wrap: anywhere;
}
.tool-failure-summary {
  color: var(--danger-text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.tool-section + .tool-section { margin-top: 0.75rem; }
.tool-section + .tool-note, .tool-detail-title + .tool-note { margin-top: 0.6rem; }
.tool-diff-stats {
  display: inline-flex;
  flex: none;
  gap: 8px;
}
.tool-diff-stats .is-delete { color: var(--danger-text); }
.tool-diff-stats .is-insert { color: var(--success-text); }
.tool-file-view, .tool-file-diff {
  max-width: 100%;
  overflow: auto;
  max-height: 32rem;
}
.tool-file-content {
  min-width: max-content;
  margin: 0;
  padding: 0.75rem 0.85rem;
  white-space: pre;
}
.tool-file-empty {
  padding: 0.8rem 0.9rem;
  font-size: 11px;
  font-style: italic;
}
.code-diff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 100%;
  width: 100%;
}
.code-diff-row { display: contents; }
.code-diff-cell {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  min-width: 0;
  min-height: 1.55rem;
}
.code-diff-grid.has-line-numbers .code-diff-cell {
  grid-template-columns: 3.2rem 1.8rem minmax(0, 1fr);
}
.code-diff-line {
  padding-right: 0.5rem;
  color: var(--text-quiet);
  text-align: right;
  user-select: none;
}
.code-diff-cell.is-delete {
  background:color-mix(in srgb,var(--danger-text) 16%,transparent);
  color: var(--text-primary);
}
.code-diff-cell.is-insert {
  background:color-mix(in srgb,var(--success-text) 16%,transparent);
  color: var(--text-primary);
}
.code-diff-cell.is-empty {
  min-height: 1.55rem;
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(168, 159, 144, 0.08) 7px 9px);
}
.review-diff-file .code-diff-grid {
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(168, 159, 144, 0.08) 7px 9px);
}
.review-diff-file .code-diff-cell { background: var(--surface-default); }
.review-diff-file .code-diff-cell.is-empty { background: transparent; }
.code-diff-cell.is-meta {
  color: var(--text-quiet);
  font-style: italic;
}
.code-diff-marker {
  padding-left: 0.45rem;
  color: var(--text-quiet);
  user-select: none;
}
.code-diff-cell.is-delete .code-diff-marker { color: var(--danger-text); }
.code-diff-cell.is-insert .code-diff-marker { color: var(--success-text); }
.code-diff-text {
  display: block;
  min-width: 0;
  padding-right: 0.8rem;
  color: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}
.code-diff-cell.is-delete .code-diff-emphasis { background:color-mix(in srgb,var(--danger-text) 34%,transparent); }
.code-diff-cell.is-insert .code-diff-emphasis { background:color-mix(in srgb,var(--success-text) 32%,transparent); }
.tool-diff-separator {
  position: sticky;
  left: 0;
  padding: 0.35rem 0.65rem;
}
.web-search-findings {
  padding: 0.7rem 0.8rem;
  overflow-wrap: anywhere;
}
.web-search-sources {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.web-search-sources li {
  min-width: 0;
  padding: 0.55rem 0.7rem;
}
.web-search-sources a {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.web-search-sources span {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* divider rows: turn status, compaction */
.turn-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.turn-divider.is-cancelled { color: var(--text-muted); }
.turn-divider.is-compaction { color: var(--agent-text); }

.transcript-error {
  display: grid;
  gap: 0.45rem;
  color: var(--text-primary);
}
.transcript-error header {
  display: flex;
  justify-content: space-between;
}
.transcript-error strong { color: var(--danger-text); font-size: 16px; line-height: 25px; }
.transcript-error p { margin: 0; overflow-wrap: anywhere; }
.transcript-error code { justify-self: start; overflow-wrap: anywhere; }
.provider-failure-details { min-width: 0; font-size: 12px; color: var(--text-muted); }
.provider-failure-details summary { cursor: pointer; width: fit-content; padding: 0.25rem 0; }
.provider-failure-details summary:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; }
.provider-failure-details dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0.5rem 0 0; }
.provider-failure-details dt { color: var(--text-quiet); }
.provider-failure-details dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.transcript-empty {
  text-align: center;
  color: var(--text-quiet);
  padding: 3rem 0;
}
.transcript-history-retry {
  align-self: center;
}

.turn-activity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
}
.turn-activity strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.turn-activity-elapsed {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
}

/* ---------- Composer ---------- */
.composer-media {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.composer-media.hidden { display: none; }
.composer-media-item {
  position: relative;
  flex: 0 0 104px;
  height: 78px;
  overflow: hidden;
  background: var(--surface-canvas);
}
.composer-media-item img { width: 100%; height: 100%; object-fit: cover; }
.composer-media-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 4px;
  color: var(--text-muted);
  background: var(--surface-raised);
  cursor: pointer;
}
.composer-media-remove .ui-icon { width: 14px; height: 14px; }
.composer-media-remove:disabled { cursor: default; opacity: 0.55; }
.composer-attach {
  font-size: 20px;
}
.transcript-media-frame {
  position: relative;
  width: 100%;
  max-height: 520px;
  aspect-ratio: var(--media-aspect-ratio, 16 / 10);
  overflow: hidden;
  background: var(--surface-subtle);
}
.transcript-media-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 120ms ease;
}
.transcript-media-frame.is-loaded img { opacity: 1; }
.transcript-media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--text-muted);
  font: 500 12px/16px var(--font-ui);
  text-align: center;
}
.transcript-media-placeholder[hidden] { display: none; }
.transcript-media-frame.is-unavailable { background: var(--surface-muted); }
.transcript-media-frame.is-unavailable .transcript-media-placeholder { color: var(--danger-text); }
.prompt-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 0.75rem;
}
.prompt-media figure {
  margin: 0;
  overflow: hidden;
  background: var(--surface-canvas);
}
.prompt-media figcaption {
  padding: 0.4rem 0.55rem;
  overflow: hidden;
  color: var(--text-quiet);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-row {
  gap: 8px;
  align-items: stretch;
  max-width: var(--session-content-width);
  margin: 0 auto;
}
.composer textarea {
  flex: 1;
  border-radius: 3px;
  resize: vertical;
  overflow-y: auto;
}
.composer textarea:focus { outline: none; }

/* ---------- Review ---------- */

.review-panel { min-width: 0; }
.review-bar { min-width: 0; }
.review-context {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.review-context strong {
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-scope { white-space: nowrap; }
.review-layout {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.review-navigator {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}
.review-nav-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.review-changes-section { flex: 0 1 auto; max-height: 42%; }
.review-changes-section.is-clean { max-height: 9rem; }
.review-workspace-section { flex: 1 1 auto; }
.review-nav-section.is-collapsed { flex: 0 0 auto; }
.review-navigator.is-workspace-collapsed .review-changes-section:not(.is-collapsed) {
  flex: 1 1 auto;
  max-height: none;
}
.review-nav-section.is-collapsed .review-changes-content,
.review-workspace-section.is-collapsed .review-tree { display: none; }
.review-nav-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  flex: none;
  text-align: left;
  cursor: pointer;
}
.review-nav-chevron { width: 14px; height: 14px; transition: transform 120ms ease; }
.review-nav-heading[aria-expanded="false"] .review-nav-chevron { transform: rotate(-90deg); }
.review-nav-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-nav-heading span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.review-changes-content,
.review-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.review-changes-content { padding: 0 0 0.6rem; }
.review-tree { padding: 0 0.55rem 0.65rem; }
.review-nav-item,.review-tree-name,.review-tree-file {
  background: transparent;
}
.review-tree-toggle,.review-tree-note {
  background: transparent;
  font: 11px/1.35 var(--font-mono);
}
.review-nav-item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  min-height: 2.2rem;
  padding: 0.35rem 0.75rem;
  text-align: left;
  cursor: pointer;
}
.review-all-changes {
  color: var(--text-primary);
  background: var(--surface-default);
  font-weight: 600;
}
.review-all-changes-icon {
  color: var(--text-quiet);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
.review-repository-group + .review-repository-group { margin-top: 0.45rem; }
.review-repository-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.75rem 0.35rem;
  background: var(--surface-default);
  color: var(--text-muted);
}
.review-repository-group-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-repository-group-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--text-quiet);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-nav-path {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.review-nav-name,
.review-tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-nav-name { flex: 1 1 auto; }
.review-nav-directory {
  flex: 0 1 42%;
  min-width: 0;
  overflow: hidden;
  color: var(--text-quiet);
  text-overflow: ellipsis;
}
.review-git-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0;
  border-radius: 2px;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.review-git-badge.is-modified { color: var(--git-modified); }
.review-git-badge.is-type-changed { color: var(--git-type-changed); }
.review-git-badge.is-added { color: var(--git-added); }
.review-git-badge.is-untracked { color: var(--git-untracked); }
.review-git-badge.is-deleted { color: var(--git-deleted); }
.review-git-badge.is-renamed { color: var(--git-renamed); }
.review-git-badge.is-copied { color: var(--git-copied); }
.review-git-badge.is-conflict { color: var(--git-conflict); }
.has-git-status.is-modified .review-nav-path,
.has-git-status.is-modified .review-tree-label,
.entry-row.is-modified .entry-link { color: var(--git-modified); }
.has-git-status.is-type-changed .review-nav-path,
.has-git-status.is-type-changed .review-tree-label,
.entry-row.is-type-changed .entry-link { color: var(--git-type-changed); }
.has-git-status.is-added .review-nav-path,
.has-git-status.is-added .review-tree-label,
.entry-row.is-added .entry-link { color: var(--git-added); }
.has-git-status.is-untracked .review-nav-path,
.has-git-status.is-untracked .review-tree-label,
.entry-row.is-untracked .entry-link { color: var(--git-untracked); }
.has-git-status.is-deleted .review-nav-path,
.has-git-status.is-deleted .review-tree-label,
.entry-row.is-deleted .entry-link { color: var(--git-deleted); }
.has-git-status.is-renamed .review-nav-path,
.has-git-status.is-renamed .review-tree-label,
.entry-row.is-renamed .entry-link { color: var(--git-renamed); }
.has-git-status.is-copied .review-nav-path,
.has-git-status.is-copied .review-tree-label,
.entry-row.is-copied .entry-link { color: var(--git-copied); }
.has-git-status.is-conflict .review-nav-path,
.has-git-status.is-conflict .review-tree-label,
.entry-row.is-conflict .entry-link { color: var(--git-conflict); }
.review-tree-row {
  display: grid;
  padding-left: calc(var(--tree-depth) * 0.9rem);
}
.review-tree-toggle { cursor: pointer; }
.review-tree-name {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.3rem 0.25rem;
  text-align: left;
  cursor: pointer;
}
.review-tree-file,
.review-tree-note {
  width: 100%;
  padding: 0.3rem 0.25rem 0.3rem calc(1.4rem + var(--tree-depth) * 0.9rem);
  text-align: left;
}
.review-tree-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.review-tree-note {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-tree-file:disabled { color: var(--text-quiet); cursor: default; }
.review-tree-note.is-error { color: var(--danger-text); cursor: pointer; }
.review-repository-badge { color: var(--agent-text); }
.review-directory-count { opacity: 0.9; }
.review-workspace-scope { text-transform: none; letter-spacing: 0; color: var(--text-quiet); }
.review-status-summary { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.review-status-summary span { font-size: 11px; }
.review-status-summary .is-modified { color: var(--git-modified); }
.review-status-summary .is-type-changed { color: var(--git-type-changed); }
.review-status-summary .is-added { color: var(--git-added); }
.review-status-summary .is-untracked { color: var(--git-untracked); }
.review-status-summary .is-deleted { color: var(--git-deleted); }
.review-status-summary .is-conflict { color: var(--git-conflict); }
.review-status-summary .is-renamed { color: var(--git-renamed); }
.review-status-summary .is-copied { color: var(--git-copied); }
.review-document-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.05rem 0.55rem;
  min-width: 0;
}
.review-document-title .review-git-badge { grid-row: 1 / 3; }
.review-document-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-document-repository {
  min-width: 0;
  overflow: hidden;
  color: var(--text-quiet);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-directory-table .entry-status { width: 3rem; text-align: center; }
.review-content {
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
}
.review-back { display: none; margin: 0.65rem 1rem 0; }
.review-body { min-width: 0; padding: 1rem 1.2rem 2rem; }
.review-summary-head h3 { margin: 0; }
.review-summary-head p { margin: 0.35rem 0 1rem; color: var(--text-quiet); }
.review-summary-overview {
  display: grid;
  gap: 0.4rem;
  max-width: 42rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 12px;
}
.review-summary-overview strong { color: var(--text-primary); }
.review-summary-card {
  display: grid;
  gap: 0.35rem;
  max-width: 42rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 12px;
}
.review-summary-card strong { color: var(--text-primary); }
.review-crumbs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.7rem; color: var(--text-quiet); }
.review-crumbs button { padding: 0; background: transparent; color: var(--agent-text); font: inherit; cursor: pointer; }
.review-document-head {
  position: sticky;
  top: -1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -1rem -1.2rem 0.8rem;
  padding: 0.7rem 1.2rem;
}
.review-document-head strong { min-width: 0; overflow-wrap: anywhere; }
.review-document-meta { flex: none; color: var(--text-quiet); font: 11px/1.4 var(--font-mono); }
.review-mode-buttons { display: flex; flex: none; }
.review-mode-buttons .is-active { color: var(--accent-solid); }
.review-diff-file { min-width: 0; margin-bottom: 1.1rem; overflow: hidden; }
.review-diff-file-head {
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.7rem;
  font-size: 11px;
}
.review-diff-file-head strong { flex: 1; overflow-wrap: anywhere; }
.review-diff-file-head span { flex: none; color: var(--text-quiet); }
details.review-diff-file > summary { cursor: pointer; }
.review-diff-hunk { padding: 0.35rem 0.7rem; color: var(--agent-text); font: 11px/1.4 var(--font-mono); }
.review-diff-file .browser-note { padding: 0.7rem; }
.review-load-more { margin-top: 0.8rem; }

/* ---------- Browser ---------- */

.panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.browser-bar-actions { display: flex; gap: 6px; flex: none; }
.label-compact { display: none; }
.browser-bar-actions [aria-pressed="true"] { color: var(--accent-solid); }
.browser-title { margin: 0; font-size: 12px; color: var(--text-muted); }
.workspace-freshness {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 34px;
  padding: 0.35rem 1.4rem;
  background:color-mix(in srgb,var(--accent-text) 7%,transparent);
  color: var(--text-muted);
  font-size: 11px;
}
.workspace-freshness .btn { flex: none; }
.file-transfer-status {
  min-height: 30px;
  padding: 0.4rem 1.4rem;
  background: var(--surface-canvas);
  color: var(--success-text);
  font-size: 11px;
}
.file-transfer-status.is-error { color: var(--danger-text); }
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
}
.crumb {
  font: inherit;
  background: transparent;
  color: var(--agent-text);
  cursor: pointer;
  padding: 2px 4px;
}
.crumb-sep { color: var(--text-quiet); }
.crumb-current { color: var(--text-primary); padding: 2px 4px; }

.browser-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.6rem 1.4rem 1.4rem;
}
.browser-body > * {
  width: 100%;
  max-width: var(--session-content-width);
  margin-left: auto;
  margin-right: auto;
}
.terminal-status {
  min-width: 0;
  margin: 0;
}
.terminal-actions { display: flex; gap: 6px; flex: none; }
.terminal-host {
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.terminal-host .terminal {
  height: 100%;
}
.terminal-host .xterm-viewport { scrollbar-width: thin; }
.browser-note { color: var(--text-quiet); padding: 1rem 0; }
.provider-login-fields { display: grid; gap: var(--card-gap); margin-top: var(--card-gap); }
.provider-login-fields > .btn { justify-self: start; }
.provider-login-fields > [role="status"] { margin: 0; }
.provider-login-fields > [role="status"]:empty { display: none; }
.browser-state {
  display: grid;
  justify-items: start;
  gap: 0.7rem;
  color: var(--text-muted);
}
.browser-state.is-error { color: var(--danger-text); }

.entry-table { width: 100%; border-collapse: collapse; }
.entry-table td {
  padding: 0.35rem 0.6rem;
  vertical-align: middle;
}
.entry-row.is-selected td { background:color-mix(in srgb,var(--accent-text) 8%,transparent); }
.entry-select {
  width: 2rem;
  text-align: center;
}
.entry-select input {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  accent-color: var(--accent-solid);
  cursor: pointer;
}
.entry-name { color: var(--text-primary); }
.entry-link {
  width: 100%;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.entry-link:disabled { cursor: default; color: var(--text-quiet); }
.entry-name.is-dir { color: var(--agent-text); font-weight: 600; }
.entry-type { color: var(--text-quiet); font-size: 11px; width: 5rem; }
.entry-size { color: var(--text-quiet); text-align: right; width: 7rem; font-size: 11px; }
.entry-status { width: 5rem; letter-spacing: 0.1em; }
.entry-status .s-add { color: var(--success-text); }
.entry-status .s-del { color: var(--danger-text); }
.entry-status .s-mod { color: var(--accent-solid); }
.entry-status .s-unt { color: var(--agent-text); }
.viewer-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0 0.6rem;
  color: var(--text-quiet);
  font-size: 11px;
  flex-wrap: wrap;
}
.viewer-head .viewer-path { color: var(--text-primary); font-size: 12px; }
.code-view {
  margin: 0 auto;
  background: var(--surface-default);
  border-radius: 3px;
  padding: 0.8rem 1rem;
  overflow: auto;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 4;
}
.code-view.is-wrap { white-space: pre-wrap; word-break: break-word; }

.load-more-row { padding: 0.8rem 0; }

/* ---------- Dialogs ---------- */

.dialog {
  padding: 0;
  position: fixed;
  margin: 0;
  top: calc(var(--visual-viewport-top, 0px) + var(--visual-viewport-height, 100dvh) / 2);
  left: calc(var(--visual-viewport-left, 0px) + var(--visual-viewport-width, 100vw) / 2);
  transform: translate(-50%, -50%);
  width: 440px;
  max-width: calc(var(--visual-viewport-width, 100vw) - 32px);
  max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
  overflow-y: auto;
}
.dialog-form { padding: var(--dialog-gutter); display: grid; gap: var(--dialog-gap); }
.dialog-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
}
.dialog-sub { margin: -0.4rem 0 0; }
.field { display: grid; }
.field input, .field select, .field textarea {
  letter-spacing: normal;
  text-transform: none;
  padding: 0.55rem 0.7rem;
}
.field input:disabled, .field select:disabled { color: var(--text-quiet); opacity: 0.7; }
.field-error {
  margin: -0.45rem 0 0;
  color: var(--danger-text);
  font-size: 11px;
  line-height: 1.4;
}
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 0.4rem; }
.confirmation-list { max-height: 12rem; margin: 0; padding-left: 1.4rem; overflow: auto; color: var(--text-muted); font-size: 12px; }
.confirmation-list li + li { margin-top: 0.3rem; }
.action-confirm-dialog { width: 460px; }
.create-repositories { display: grid; gap: 0.65rem; }
.create-repository-row {
  display: grid;
  gap: 0.55rem;
}
.create-repository-branch-line { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.create-repository-branch-summary { color: var(--text-quiet); }
.create-repository-folder-field,
.create-repository-note { min-width: 0; }
.create-repository-remove { justify-self: start; color: var(--text-quiet); }
.create-repository-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.create-repository-add .ui-icon { width: 14px; height: 14px; flex-basis: 14px; }
.repository-access-list { display: grid; gap: 0.45rem; }
.repository-access-row,
.repository-access-add { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.repository-access-row > span { min-width: 0; overflow-wrap: anywhere; }
.repository-access-row > .btn { flex: none; white-space: nowrap; }
.repository-access-add select { flex: 1; height: var(--control-large-size); padding: 0 10px; color: var(--text-primary); }
.settings-panel-heading p {
  margin: 0;
  color: var(--text-muted);
}
.settings-card-heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.settings-panel {
  display: grid;
  width: 100%;
  align-content: start;
  align-items: start;
}
.settings-panel-heading { grid-column: 1 / -1; }
#settings-source-control > #git-settings-form { grid-column: 1; }
.settings-source-integrations { display: grid; gap: 1rem; align-content: start; }
.settings-panel-heading h3,
.settings-card-heading h4 {
  margin: 0;
}
.settings-panel-heading p,
.settings-card-heading p { margin-top: 0.3rem; }
.settings-card {
  display: grid;
  min-width: 0;
  margin: 0;
}
.git-identity-preview {
  display: grid;
  gap: 0.35rem;
  background: var(--surface-subtle);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.git-identity-preview p { margin: 0; }
.git-identity-preview strong {
  display: inline-block;
  width: 5.5rem;
  color: var(--text-quiet);
}
.settings-card .browser-note {
  margin: 0;
  padding: 0.7rem;
  background: var(--surface-subtle);
  overflow-wrap: anywhere;
}
.settings-card .browser-note a { color: var(--agent-text); }
.settings-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-details { color: var(--text-quiet); }
.settings-details summary, .session-details-disclosure summary, .usage-quality summary, .usage-daily-details summary {
  cursor: pointer;
}
.settings-details p { margin: 0.65rem 0 0; }
.session-dialog-context { margin: 0.25rem 0 0; color: var(--text-quiet); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.session-settings-section {
  display: grid;
}
.session-settings-heading h3 {
  margin: 0;
}
.session-settings-heading p {
  margin: 0.2rem 0 0;
  font-size: 11px;
  line-height: 1.45;
}
.session-section-note {
  margin: 0.2rem 0 0;
}
.session-toggle,
.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}
.session-toggle span,
.settings-toggle span { display: grid; gap: 0.25rem; }
.session-toggle input,
.settings-toggle input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--accent-solid);
}
.session-toggle input:disabled,
.settings-toggle input:disabled { cursor: not-allowed; opacity: 0.6; }
.device-setting-note {
  margin: -0.45rem 0 0;
  color: var(--text-quiet);
}
.device-setting-note.is-error { color: var(--danger-text); }
.device-install-actions {
  align-items: center;
  justify-content: space-between;
}
.device-install-actions .device-setting-note {
  flex: 1 1 260px;
  margin: 0;
}
.device-install-actions .btn { flex: none; }
.session-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0.25rem 0;
}
.session-details div { min-width: 0; }
.session-details dt {
  margin-bottom: 0.25rem;
}
.session-details dd { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.session-instructions {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 1rem;
}
.session-instructions-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.session-instructions-heading h4 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 14px;
}
.session-instructions-heading p {
  margin: 0;
  color: var(--text-quiet);
  font-size: 12px;
}
.session-instruction-list { display: grid; }
.session-instruction-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0;
}
.session-instruction-row code {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.session-instruction-row span { color: var(--text-quiet); font-size: 12px; text-align: right; }
.session-instructions > .session-section-note { margin: 0; }
.session-share {
  display: grid;
}
.session-share-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.session-share-heading h3 { margin: 0.15rem 0 0; color: var(--text-primary); font-family: var(--font-serif); font-size: 15px; }
.session-share-eyebrow {
  margin: 0;
}
.session-share-note { margin: 0; }
.session-share-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
}
.session-share-result input {
  padding: 0.45rem 0.55rem;
}
.session-share-result a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.session-share-result p { grid-column: 1 / -1; margin: 0; color: var(--text-quiet); font-size: 10px; }
.session-management { gap: 0; }
.session-management > .session-settings-heading { padding: var(--card-padding); }
.session-management-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
.session-management-row h4 { margin: 0; }
.session-management-row p { margin: 0.2rem 0 0; color: var(--text-quiet); }
.session-management-danger { background:color-mix(in srgb,var(--danger-text) 3.5%,transparent); }

/* ---------- Narrow screens ---------- */

@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
  .auth-link:hover { color: var(--accent-solid); text-decoration: underline; }
  .session-item:hover .session-item-menu-button { opacity: 1; }
  .tab:hover { color: var(--text-muted); }
  .prose .code-copy:hover { color: var(--text-primary); }
  .thinking-head:hover, .tool-head:hover { color: var(--text-primary); }
  .crumb:hover { text-decoration: underline; }
  .entry-row:hover td { background: var(--surface-subtle); }
  .usage-range-button:hover, .usage-metric-button:hover, .usage-refresh:hover { color: var(--text-primary); background: var(--surface-subtle); }
}

@media (max-width: 1100px) {
  .session-head {
    flex-wrap: wrap;
  }
  .session-head-id, .session-head-side { width: 100%; }
  .session-head-side { justify-content: space-between; }
}

@media (pointer: coarse) {
  .review-nav-heading,
  .review-nav-item,
  .review-tree-row,
  .review-tree-toggle,
  .review-tree-name,
  .review-tree-file { min-height: 44px; }
  .session-item-menu-button { opacity: 1; }
}

@media (max-width: 700px) {
  .shell {
    --mobile-gutter: 0.75rem;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }

  .mobile-nav {
    grid-row: 1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    min-height: 52px;
    padding: 0.25rem var(--mobile-gutter);
    background: var(--surface-default);
  }
  .mobile-nav-button {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
  }
  .mobile-picker-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  .mobile-lockup {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0;
    transform: translateY(1px);
  }
  .mobile-brand {
    color: var(--text-primary);
    font: 400 1rem/1 var(--font-serif);
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }
  .stage { grid-row: 2; }

  .rail {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    display: flex;
    width: min(360px, calc(100vw - 2rem));
    max-height: none;
    padding-top: max(0px, env(safe-area-inset-top));
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform 160ms ease-out, visibility 0s linear 160ms;
  }
  .rail.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }
  .session-picker-close {
    position: absolute;
    z-index: 2;
  }
  .session-picker-backdrop {
    position: fixed;
    z-index: 40;
    inset: 0;
    display: block;
    background: rgba(0, 0, 0, 0.62);
  }
  .brand { padding-right: 3.6rem; }
  .session-list { padding-bottom: max(0.6rem, env(safe-area-inset-bottom)); }
  .rail-account { padding-bottom: max(0.85rem, env(safe-area-inset-bottom)); }

  .stage, .session-stage, .panel, .transcript-frame, .transcript, .composer {
    min-width: 0;
    max-width: 100%;
  }
  .stage, .session-stage { min-height: 0; overflow: hidden; }
  .connection-status {
    padding: 0.4rem var(--mobile-gutter);
    justify-content: space-between;
    text-align: left;
  }

  /* The active session identity, context, and session action form one unit. */
  .session-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.7rem;
    row-gap: 0.2rem;
  }
  .session-head-id {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
  }
  .session-head-side { display: contents; }
  .gauge-block {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: auto minmax(70px, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    max-width: none;
  }
  .gauge-labels { display: contents; margin: 0; }
  .gauge-labels span:first-child { grid-column: 1; grid-row: 1; }
  .gauge-labels span:last-child { grid-column: 3; grid-row: 1; }
  .gauge { grid-column: 2; grid-row: 1; }
  .head-buttons {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }
  .tab { flex: 1; }

  .transcript {
    overflow-x: hidden;
  }
  .transcript > * { max-width: none; }
  .transcript-nav-button {
    padding: 0;
  }
  .transcript-nav-text { display: none; }
  .tool-file-view, .tool-file-diff { max-height: 45dvh; }
  .code-diff-grid {
    display: block;
    min-width: 100%;
    width: 100%;
  }
  .code-diff-row { display: block; }
  .code-diff-cell { width: 100%; }
  .code-diff-cell.is-new.is-context,
  .code-diff-cell.is-empty { display: none; }
  .composer-row { gap: 6px; }
  .composer textarea {
    min-width: 0;
    font-size: 16px;
    resize: none;
  }
  .turn-activity { gap: 7px; }

  .review-bar { align-items: flex-start; }
  .review-context { flex: 1; }
  .review-context strong { font-size: 11px; }
  .review-scope { max-width: 13rem; overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
  .review-layout { display: block; min-height: 0; overflow: auto; }
  .review-changes-section { max-height: none; }
  .review-nav-section:not(.is-collapsed) .review-nav-heading {
    color: var(--text-primary);
    background: var(--surface-subtle);
  }
  .review-nav-section.is-collapsed .review-nav-heading { color: var(--text-quiet); }
  .review-workspace-scope { display: none; }
  .review-navigator { height: 100%; }
  .review-content { height: 100%; }
  .review-panel.is-summary .review-content { display: none; }
  .review-panel:not(.is-summary) .review-navigator { display: none; }
  .review-panel:not(.is-summary) .review-back { display: inline-flex; }
  .review-body { padding: 0.7rem var(--mobile-gutter) 1.5rem; }
  .review-document-head { top: -0.7rem; margin: -0.7rem calc(-1 * var(--mobile-gutter)) 0.7rem; padding: 0.6rem var(--mobile-gutter); }
  .review-directory-table .entry-type { display: none; }
  .review-diff-file { margin-inline: calc(-1 * var(--mobile-gutter)); }
  .review-diff-file-head, .review-diff-hunk { padding-inline: var(--mobile-gutter); }
  .workspace-freshness { padding-inline: var(--mobile-gutter); }
  .file-transfer-status { padding-inline: var(--mobile-gutter); }
  .browser-bar-actions { gap: 4px; }
  .label-full { display: none; }
  .label-compact { display: inline; }
  .browser-body { padding: 0.5rem var(--mobile-gutter) 0.8rem; }
  .viewer-head { gap: 0.6rem; }
  .entry-table td { padding: 0.35rem 0.4rem; }
  .entry-select { width: 1.8rem; padding-inline: 0.15rem !important; }
  .entry-select input { width: 18px; height: 18px; }

  .gate { padding: 0.75rem; }
  .empty-stage { padding: 1rem; }
  .gate-frame { width: 100%; padding: 2.2rem 1rem 1.5rem; }
  .gate-coords { margin-bottom: 1.5rem; letter-spacing: 0.2em; }
  .gate-mark { font-size: clamp(2.6rem, 16vw, 4rem); }
  .gate-rule { margin: 1.5rem auto; }
  .gate-foot { margin-top: 1.5rem; }
  .create-repository-row { grid-template-columns: 1fr; align-items: stretch; }
  .create-repository-folder-field,
  .create-repository-note { grid-column: 1; }
  .create-repository-remove { justify-self: start; margin: 0; }
  .repository-access-add { align-items: stretch; flex-direction: column; }
  .repository-access-add select { width: 100%; flex: none; }
  .repository-access-add .btn { width: 100%; }
  .session-details { grid-template-columns: 1fr; }
  .session-instructions-heading { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
  .session-instruction-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .session-instruction-row span { text-align: left; }
  .session-share-heading { align-items: stretch; flex-direction: column; }
  .session-share-result { grid-template-columns: 1fr 1fr; }
  .session-share-result input { grid-column: 1 / -1; }
  .session-management-row { grid-template-columns: 1fr; gap: 0.65rem; }
  .session-management-row .btn { width: 100%; }
  .toast { max-width: calc(100vw - 1rem); }
}

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

@media (max-width: 480px) {
  #head-status { font-size: 10px; }
  .turn-divider { gap: 7px; }
}

.tool-screenshot { margin: 10px 0 0; background: var(--surface-default); }
.tool-screenshot .transcript-media-frame { max-height: 70vh; }
.tool-screenshot figcaption { padding: 7px 9px; color: var(--text-muted); font-size: 11px; }

/* ---------- Account usage ---------- */

.usage-controls { display: flex; }
.usage-range-button {
  padding: 0.45rem 0.8rem;
  background: var(--surface-default);
  white-space: nowrap;
  cursor: pointer;
}
.usage-refresh {
  padding: 0.45rem 0.8rem;
  background: var(--surface-default);
  font: 12px/1 var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
}
.usage-message { padding: 3rem 0; color: var(--text-quiet); text-align: center; }
.usage-error { color: var(--danger-text); }
.usage-metric-controls {
  display: inline-flex;
  max-width: 100%;
  margin-bottom: 1.5rem;
}
.usage-metric-button {
  padding: 0.4rem 0.7rem;
  background: var(--surface-default);
  white-space: nowrap;
  cursor: pointer;
}
.usage-eyebrow { margin: 0 0 0.5rem; }
.usage-footnote { margin: 0.7rem 0 1.8rem; }
.usage-provider-bars { display: grid; gap: 1.3rem; }
.usage-provider-row > div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.usage-provider-row strong { font-weight: 500; }
.usage-provider-row progress {
  display: block;
  width: 100%;
  height: 5px;
  appearance: none;
  background: var(--surface-muted);
}
.usage-provider-row progress::-webkit-progress-bar { background: var(--surface-muted); }
.usage-provider-row progress::-webkit-progress-value { background: var(--usage-provider-color, var(--text-muted)); }
.usage-provider-row progress::-moz-progress-bar { background: var(--usage-provider-color, var(--text-muted)); }
.usage-provider-row small { display: block; margin-top: 0.35rem; }
.usage-chart-panel { min-width: 0; }
.usage-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.usage-chart-heading h3 { margin: 0; }
.usage-lower h3 { margin: 0; font: 600 14px/1.2 var(--font-mono); }
.usage-legend { display: flex; gap: 1rem; }
.usage-chart { display: block; width: 100%; margin-top: 0.8rem; overflow: visible; }
.usage-chart-grid { stroke-width: 1; vector-effect: non-scaling-stroke; }
.usage-chart-label { fill: var(--text-quiet); }
.usage-chart-line { fill: none; stroke: var(--accent-solid); stroke-width: 2; vector-effect: non-scaling-stroke; }
.usage-chart-line.is-openai { stroke: var(--agent-text); stroke-dasharray: 8 4; }
.usage-chart-line.is-xai { stroke: var(--success-text); stroke-dasharray: 3 3; }
.usage-chart-line.is-grok { stroke: var(--danger-text); stroke-dasharray: 12 3 2 3; }
.usage-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.usage-stat-grid > div { min-width: 0; }
.usage-stat-grid > div > span, .usage-stat-grid small { display: block; color: var(--text-quiet); }
.usage-stat-grid small span { display: inline; color: var(--text-muted); }
.usage-stat-grid strong { display: block; }
.usage-stat-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-lower { display: grid; grid-template-columns: minmax(480px, 1fr) minmax(240px, 0.36fr); }
.usage-table-head, .usage-table-row { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 6rem 8rem; gap: 1rem; align-items: center; }
.usage-table-head { margin-top: 1.3rem; padding: 0 0 0.55rem; color: var(--text-quiet); }
.usage-table-row { padding: 0.65rem 0; }
.usage-table-head span:not(:first-child), .usage-table-row span:not(:first-child) { text-align: right; }
.usage-table-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-table-row span:nth-child(n+3) { color: var(--text-muted); }
.usage-table-empty { padding: 1rem 0; color: var(--text-quiet); }
.usage-quality { align-self: start; }
.usage-quality dl { margin: 1.3rem 0 0; }
.usage-quality dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; }
.usage-quality dt { color: var(--text-quiet); }
.usage-quality dd { margin: 0; text-align: right; }


.usage-daily-details { margin-top: 2rem; padding-top: 1rem; }
.usage-daily-scroll { overflow-x: auto; }
.usage-daily-scroll table { width: 100%; border-collapse: collapse; font-size: 11px; }
.usage-daily-scroll th, .usage-daily-scroll td { text-align: right; white-space: nowrap; }
.usage-daily-scroll th:first-child { text-align: left; }
.usage-message.is-inline { padding: 0.4rem 0; text-align: left; }
.billing-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
}
.billing-summary > div { min-width: 0; }
.billing-summary .usage-footnote { margin-bottom: 0; }
.billing-summary > .is-error { grid-column: 1 / -1; margin: -0.5rem 0 0; color: var(--danger-text); }
.billing-balance { display: block; }
.billing-history h3 { margin: 0 0 0.8rem; }
.usage-section-title { margin: 0 0 0.8rem; font: 600 14px/1.2 var(--font-mono); }
.billing-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.billing-history-row > div { min-width: 0; }
.billing-history-row strong, .billing-history-row span { display: block; }
.billing-history-row span { margin-top: 0.15rem; color: var(--text-quiet); font-size: 11px; }
.billing-history-row > strong { font-family: var(--font-mono); font-weight: 500; }
.billing-history-row > strong.is-credit { color: var(--success-text); }
.usage-section-title { margin-top: 0; }
.billing-terms { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; padding: 1rem 1.1rem; background: color-mix(in srgb, var(--accent-solid) 7%, transparent); }
.billing-terms h3, .billing-terms p { margin: 0; }
.billing-terms h3 { font-size: 14px; }
.billing-terms p { margin-top: 0.25rem; color: var(--text-muted); font-size: 12px; }
.billing-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.7rem; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.billing-consent input { margin-top: 0.2rem; }
.credit-notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.7rem 0; padding: 0.8rem 1rem; background: color-mix(in srgb, var(--danger-text) 7%, transparent); }
.credit-notice > div { display: grid; gap: 0.15rem; }
.credit-notice strong, .credit-notice span { display: block; }
.credit-notice span { color: var(--text-muted); font-size: 12px; }
.usage-error { display: flex; align-items: center; justify-content: center; gap: 0.7rem; }
.metric-is-tokens .usage-table-head span:last-child, .metric-is-tokens .usage-table-row span:last-child { display: none; }
.metric-is-tokens .usage-table-head, .metric-is-tokens .usage-table-row { grid-template-columns: minmax(0, 1fr) 8rem 6rem; }

@media (max-width: 1050px) {
  .usage-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .usage-lower { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .usage-controls { width: 100%; }
  .billing-summary { grid-template-columns: 1fr; }
  .billing-summary .btn, .billing-terms .btn { justify-self: stretch; }
  .billing-terms { align-items: stretch; flex-direction: column; }
  .billing-summary > .is-error { grid-column: auto; margin-top: 0; }
  .credit-notice { align-items: stretch; flex-direction: column; }
  .usage-range-button { flex: 1; padding-inline: 0.45rem; }
  .usage-metric-controls { display: flex; width: 100%; }
  .usage-metric-button { flex: 1; padding-inline: 0.35rem; }
  .usage-chart-panel { margin-top: 2rem; }
  .usage-stat-grid { grid-template-columns: 1fr 1fr; }
  .usage-stat-grid > div:last-child { grid-column: 1 / -1; }
  .usage-table-head, .usage-table-row { grid-template-columns: minmax(0, 1fr) 6.5rem 5rem; gap: 0.5rem; }
  .usage-table-head span:last-child, .usage-table-row span:last-child { display: none; }
}
.password-requirements { margin: -0.35rem 0 0; color: var(--text-quiet); font-size: 11px; line-height: 1.45; }
.session-detail-copy { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.session-detail-copy span { min-width: 0; overflow-wrap: anywhere; }
.usage-chart-point { stroke: var(--accent-solid); stroke-width: 2; vector-effect: non-scaling-stroke; }
.usage-chart-point.is-openai { stroke: var(--agent-text); }
.usage-chart-point.is-xai { stroke: var(--success-text); }
.usage-chart-point.is-grok { stroke: var(--danger-text); }
.usage-chart-point:focus { outline: none; stroke-width: 4; }
.usage-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.usage-legend-mark { display: block; width: 20px; height: 6px; flex: 0 0 20px; overflow: visible; }


/* Application palette and visual system */
@font-face{font-family:"Mona Sans";src:url("./MonaSans-Variable.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("./GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* Light theme tokens */
  --surface-canvas:#f2efe7;
  --surface-rail:#e8e4da;
  --surface-default:#faf8f2;
  --surface-raised:#fffdf8;
  --surface-subtle:#f5f2ea;
  --surface-muted:#ebe7de;
  --surface-inverse:#17191d;
  --border-subtle:#d8d3c8;
  --border-default:#c3bdb1;
  --border-control:#8b857b;
  --border-strong:#aaa397;
  --border-emphasis:#8b857b;
  --text-primary:#17191d;
  --text-secondary:#30343a;
  --text-muted:#62666c;
  --text-quiet:#64686d;
  --text-inverse:#f1f2f3;
  --accent-solid:#ff5b35;
  --accent-solid-hover:#e54d2a;
  --accent-text:#a23820;
  --accent-surface:#f9e1da;
  --accent-border:#a23820;
  --on-accent:#21100c;
  --agent-text:#426985;
  --agent-surface:#e5edf2;
  --agent-border:#426985;
  --success-text:#2b704a;
  --success-surface:#e3eee7;
  --success-border:#2b704a;
  --danger-text:#9f3f3b;
  --danger-surface:#f2e5e2;
  --danger-border:#9f3f3b;
  --neutral-surface:#ebe8e0;
  --selection-surface:#f6b19f;
  --code-surface:#171a1e;
  --code-border:#30343a;
  --code-text:#e5e7e9;
  --terminal-yellow:#8a6119;
  --terminal-magenta:#76517f;
  --terminal-cyan:#2b6b62;
}

/* Dark theme tokens */
:root[data-theme="dark"] {
  color-scheme:dark;
  --surface-canvas:#141b22;
  --surface-rail:#0c1117;
  --surface-default:#171e26;
  --surface-raised:#1e2731;
  --surface-subtle:#111920;
  --surface-muted:#26313d;
  --surface-inverse:#f0ece4;
  --border-subtle:#2b3743;
  --border-default:#354453;
  --border-control:#465666;
  --border-strong:#465666;
  --border-emphasis:#5b6b7a;
  --text-primary:#f0ece4;
  --text-secondary:#c9c8c2;
  --text-muted:#9aa0a3;
  --text-quiet:#858e94;
  --text-inverse:#10151b;
  --accent-solid:#ff5b35;
  --accent-solid-hover:#ff7759;
  --accent-text:#ff947e;
  --accent-surface:#392019;
  --accent-border:#ff5b35;
  --on-accent:#24110c;
  --agent-text:#91b8d0;
  --agent-surface:#192a37;
  --agent-border:#91b8d0;
  --success-text:#8fc29e;
  --success-surface:#192b21;
  --success-border:#8fc29e;
  --danger-text:#e79a92;
  --danger-surface:#342120;
  --danger-border:#e79a92;
  --neutral-surface:#1e2731;
  --selection-surface:#713322;
  --code-surface:#0a0f14;
  --code-border:#2b3743;
  --code-text:#f0ece4;
  --terminal-yellow:#d7bb7b;
  --terminal-magenta:#c3a3d2;
  --terminal-cyan:#85c2b7;
}
/* End theme tokens */

:root {
  --font-ui:"Mona Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  --font-serif:"Mona Sans",system-ui,sans-serif;
  --session-content-width:none;
  --workspace-width:1000px;
  --workspace-gutter:28px;
  --workspace-scrollbar-width:10px;
  --workspace-scroll-end:calc(var(--workspace-gutter) - var(--workspace-scrollbar-width));
  --shell-top-inset:14px;
  --shell-title-top:calc(var(--shell-top-inset) + 8px);
  --shell-control-top:calc(var(--shell-top-inset) + 4px);
  --view-header-height:82px;
  --view-tab-height:48px;
  --page-content-top:22px;
  --page-content-bottom:64px;
  --content-gap:20px;
  --card-radius:12px;
  --card-padding:20px;
  --card-gap:12px;
  --dialog-gutter:24px;
  --dialog-gap:13px;
  --control-micro-size:28px;
  --control-compact-size:32px;
  --control-standard-size:44px;
  --control-large-size:44px;
}
*{box-sizing:border-box}
html,body{background:var(--surface-canvas);color:var(--text-primary);font:14px/1.45 var(--font-ui);font-variation-settings:"opsz" 14;-webkit-font-smoothing:antialiased}
body{background-image:none}
::selection{background:var(--selection-surface);color:var(--text-primary)}
::-webkit-scrollbar-thumb{background:var(--border-default);border-color:var(--surface-canvas)}
:where(button,input,select,textarea){font-family:inherit}
.ui-icon{display:block;width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.ui-icon-dot{fill:currentColor;stroke:none}.icon-button,.btn.icon-button,.mobile-nav-button{display:grid;place-items:center;padding:0}.btn.icon-button{width:var(--control-compact-size);min-width:var(--control-compact-size);height:var(--control-compact-size);min-height:var(--control-compact-size)}.mobile-nav-button{width:var(--control-large-size);height:var(--control-large-size);min-height:var(--control-large-size);background:transparent;color:inherit;font:inherit;cursor:pointer}.btn.session-picker-close{display:none}.mobile-nav .mobile-new-icon{width:18px;height:18px;flex-basis:18px}.transcript-nav-button{display:inline-flex;align-items:center;gap:5px}.review-back{align-items:center;gap:5px}
.disclosure-summary{display:flex;align-items:center;gap:10px;min-width:0;list-style:none;cursor:pointer}.disclosure-summary::-webkit-details-marker{display:none}.disclosure-summary::after{content:"";width:14px;height:14px;margin-left:auto;flex:none;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;color:var(--agent-text)}details[open]>.disclosure-summary::after{background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat}.settings-details>.disclosure-summary,.session-details-disclosure>.disclosure-summary,.usage-quality>.disclosure-summary,.usage-daily-details>.disclosure-summary{min-height:32px;padding:4px 0}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

.btn{height:var(--control-standard-size);min-height:var(--control-standard-size);padding:0 13px;border-radius:8px;background:var(--surface-muted);color:var(--text-primary);font-family:inherit;font-size:14px;font-weight:580;letter-spacing:0;cursor:pointer;transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,transform 100ms ease}
.btn:active:not(:disabled){background:var(--surface-muted);transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default}
.btn-primary{background:var(--accent-solid);color:var(--on-accent);font-weight:670}.btn-primary:active:not(:disabled){background:var(--accent-solid-hover)}
.btn-danger{color:var(--danger-text);background:var(--danger-surface)}
.btn-sm{height:var(--control-compact-size);min-height:var(--control-compact-size);padding:0 10px;font-size:12px}.btn-lg{height:var(--control-large-size);min-height:var(--control-large-size);padding-inline:2.6rem;font-size:15px}
.btn.btn-micro{width:var(--control-micro-size);min-width:var(--control-micro-size);height:var(--control-micro-size);min-height:var(--control-micro-size);padding:0}
.text-button{min-height:var(--control-compact-size);padding:0 5px;border-radius:8px;background:transparent;color:var(--text-muted);font:550 14px/20px var(--font-ui);cursor:pointer}
.segmented-button{height:var(--control-compact-size);min-height:var(--control-compact-size);background:transparent;color:var(--text-muted);white-space:nowrap;cursor:pointer}
.row-button{background:transparent;color:inherit;font:inherit;cursor:pointer}
.shell{grid-template-columns:244px minmax(0,1fr);background:var(--surface-canvas)}
.rail{--rail-inline-gutter:16px;--rail-scrollbar-width:10px;color:var(--text-primary);padding:var(--shell-top-inset) 0 0}
.brand{margin-inline:var(--rail-inline-gutter);padding:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-lockup{gap:0}
.brand-mark{color:var(--text-primary);font:680 18px/24px var(--font-ui);letter-spacing:-.015em;text-transform:none}
.brand-sub{display:none}.rail-actions{padding:0}.rail-actions .ui-icon{width:14px;height:14px}
.session-list-head{margin:18px var(--rail-inline-gutter) 7px}.rail-label{line-height:18px;letter-spacing:0;text-transform:none}.session-summary{margin-left:4px;color:var(--text-quiet);font-size:12px;font-weight:520}.rail-scope-button{min-height:32px;padding:0;color:var(--text-muted);font:560 12px/16px var(--font-ui)}
.session-unread-summary{min-height:32px;margin:0 var(--rail-inline-gutter) 5px;padding:0;display:flex;align-items:center;justify-content:space-between;color:var(--text-muted);font-size:12px}.session-unread-summary strong{color:var(--agent-text)}.session-unread-summary button{min-height:var(--control-compact-size);padding:0 4px;background:transparent;color:var(--agent-text);font-size:12px;font-weight:640;cursor:pointer}
.session-search{height:var(--control-large-size);margin:0 var(--rail-inline-gutter) 9px;padding:0 11px;gap:8px;color:var(--text-quiet)}.session-search:focus-within{outline:2px solid var(--accent-text);outline-offset:2px}.session-search>.ui-icon{width:15px;height:15px;flex-basis:15px}.session-search input{height:100%;color:var(--text-primary);font:13px/18px var(--font-ui)}.session-search input::placeholder{color:var(--text-quiet)}
.session-list{margin:0 calc(var(--rail-inline-gutter) - var(--rail-scrollbar-width)) 0 var(--rail-inline-gutter);padding:0 0 10px;gap:8px;scrollbar-gutter:stable}.session-item{height:78px;min-height:78px;border-radius:10px}.session-item.is-active{background:var(--surface-raised)}
.session-item-select{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:36px 22px;align-content:center;row-gap:3px;width:100%;height:76px;min-height:76px;padding:7px 10px 6px;color:var(--text-primary)}.session-item-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;grid-column:1;grid-row:1;min-width:0;height:36px;padding-right:32px;overflow:hidden;overflow-wrap:anywhere;white-space:normal;transform:none;color:var(--text-secondary);font-size:14px;font-weight:550;line-height:18px;letter-spacing:0}.session-item.is-active .session-item-name{color:var(--text-primary);font-weight:630}.session-item.is-unread .session-item-name{color:var(--text-primary);font-weight:720}.session-item-meta{grid-column:1;grid-row:2;height:22px;margin:0;transform:none;display:grid;align-items:center;column-gap:8px;min-width:0;overflow:visible;color:var(--text-quiet);font-size:12px;line-height:18px;white-space:nowrap}.session-item-provider{height:16px;display:flex;align-items:center;justify-content:flex-start;color:var(--text-muted)}.session-provider-glyph{width:16px;height:16px;display:grid;place-items:center}.session-provider-logo{display:block;width:13px;height:13px}.session-item-provider.is-claude .session-provider-logo{width:16px;height:12px}.session-provider-wordmark{display:block;font-size:9px;font-weight:780;line-height:1;letter-spacing:-.025em;transform:translateY(-.25px)}.session-item-activity{min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden;color:var(--text-muted)}.session-item-draft{flex:none;color:var(--accent-text)}.session-item-draft:empty{display:none}.session-item-draft:not(:empty)::after{content:" ·"}.session-item-time{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:16px}.session-item-state{min-height:22px;padding:0 7px;display:inline-flex;align-items:center;justify-self:end;justify-content:flex-end;flex:none;border-radius:4px;color:var(--text-quiet);line-height:16px;white-space:nowrap}.session-item-state.is-working,.session-item-state.is-waking,.session-item-state.is-starting{gap:5px;padding-right:5px;background:var(--agent-surface);color:var(--agent-text)}.session-item-state.is-ready{color:var(--success-text)}.session-item-state.is-failed{color:var(--danger-text)}.session-item-state.is-idle,.session-item-state.is-sleeping{background:transparent;color:var(--text-muted)}.session-item-state.is-unread.is-ready{background:var(--success-surface);font-weight:690}.session-item-state.is-unread.is-failed{background:var(--danger-surface);font-weight:690}.session-item-status{line-height:16px}.status-orbit{width:14px;height:14px;display:grid;place-items:center;flex:0 0 14px}.status-orbit svg{display:block;width:14px;height:14px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.35}.status-orbit-track{opacity:.22}.status-orbit-motion{transform-origin:7px 7px;animation:status-orbit 1.25s linear infinite}.status-orbit-dot{fill:currentColor;stroke:none}@keyframes status-orbit{to{transform:rotate(360deg)}}.session-item-menu-button{top:2px;right:10px;width:var(--control-micro-size);height:var(--control-micro-size);transform:none;color:var(--text-muted);background:transparent;font-family:var(--font-ui)}
.session-list-empty,.session-list-notice{font-size:13px;color:var(--text-muted)}
.rail-account{margin-top:auto;margin-inline:var(--rail-inline-gutter)}.rail-account>.rail-label{display:none}.account-line{margin:0 7px 6px;overflow:hidden;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap}.account-nav{grid-template-columns:1fr 1fr;gap:3px}.account-nav-link{padding:7px 8px;color:var(--text-muted);font:560 12px/16px var(--font-ui)}.account-nav-link>.ui-icon{width:16px;height:16px;flex-basis:16px}.account-nav-link[aria-current=page]{color:var(--text-primary)}

.stage{width:100%;max-width:var(--workspace-width);justify-self:center}.connection-status{background:var(--accent-surface);color:var(--accent-text);font-size:13px}.empty-mark{color:var(--text-primary);font:620 25px/1.2 var(--font-ui);letter-spacing:-.02em}.empty-sub{color:var(--text-muted);font-size:15px}.session-head-id{gap:3px}.session-title{line-height:25px}.session-meta-row{min-width:0;display:flex;align-items:center;gap:0;color:var(--text-muted);white-space:nowrap}.session-meta-row>*{min-width:0}#head-model{flex:none}.session-meta-separator{flex:none;margin:0 8px;color:var(--border-strong)}.session-repositories{min-width:0;flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-repository,.session-repository-separator{display:inline}.session-repository-separator{display:inline-block;margin:0 8px;color:var(--border-strong)}.session-context-summary{display:none;flex:none}.gauge-labels{margin-bottom:4px;color:var(--text-quiet);letter-spacing:0;text-transform:none}.gauge{height:3px;border-radius:3px;background:var(--border-subtle);overflow:hidden}.session-menu-button{font-size:17px}
.tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{height:auto;margin:0;position:relative;display:grid;place-items:center;color:var(--text-muted);line-height:18px;letter-spacing:0;text-transform:none;white-space:nowrap}.tab.is-active{color:var(--text-primary)}
.transcript{overflow-y:scroll}.transcript>*{max-width:100%}.msg-body.prose>:is(p,ul,ol,blockquote,h1,h2,h3,h4,h5,h6){max-width:75ch}.prose h1,.prose h2,.prose h3{color:var(--text-primary);letter-spacing:-.01em;text-transform:none}.prose pre{background:var(--code-surface);color:var(--code-text);font-family:var(--font-mono)}
.thinking-kind{flex:none;letter-spacing:0;text-transform:none}
.tool-kind{flex:none;letter-spacing:0;text-transform:none}
.thinking-preview{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-summary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-state{flex:none}
.tool-state.is-ok{color:var(--success-text)}
.tool-detail{color:var(--text-secondary)}
.tool-detail-title{margin-bottom:8px}
.tool-section+.tool-section{margin-top:9px}.tool-section-label{margin-bottom:4px}
.tool-value{max-height:32rem;margin:0;padding:8px 10px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}.tool-section+.tool-note,.tool-detail-title+.tool-note{margin-top:7px}
.tool-result-meta{margin:0 0 8px;color:var(--text-muted);letter-spacing:0;text-transform:none}.tool-result-meta.is-error{color:var(--danger-text)}.tool-file-empty{color:var(--text-muted)}
.tool-file-diff .code-diff-cell{color:var(--text-secondary)}.tool-file-diff .code-diff-cell.is-delete{background:var(--danger-surface);color:var(--text-secondary)}.tool-file-diff .code-diff-cell.is-insert{background:var(--success-surface);color:var(--text-secondary)}.tool-file-diff .code-diff-cell.is-empty{background:var(--surface-muted)}.tool-file-diff .code-diff-line,.tool-file-diff .code-diff-marker{color:var(--text-quiet)}
.tool-diff-separator{background:var(--surface-muted);color:var(--text-muted);letter-spacing:0;text-transform:none}
.web-search-findings,.web-search-sources li{background:var(--surface-subtle);color:var(--text-secondary)}.web-search-sources a{color:var(--agent-text)}.web-search-sources span{color:var(--text-muted)}.turn-activity-elapsed{color:var(--text-quiet);letter-spacing:0;text-transform:none}
.transcript-nav{inset:12px var(--workspace-gutter)}.transcript-nav-button{background:var(--surface-raised);color:var(--text-muted);}.composer-row{display:flex;flex-direction:column;padding:0;overflow:hidden}.composer textarea{width:100%;min-height:58px;max-height:180px;padding:14px 15px 5px;background:transparent;color:var(--text-primary)}.composer-media{width:100%;max-width:none;margin:0;padding:0 12px 8px}.composer-footer{padding:7px 8px 9px 11px;display:flex;align-items:center;gap:10px}.composer-attach{flex:none;align-self:center;width:auto;height:var(--control-compact-size);min-height:var(--control-compact-size);padding:0 7px;display:flex;align-items:center;gap:7px;border-radius:8px;background:transparent;color:var(--text-muted);font:550 14px/20px var(--font-ui);cursor:pointer}.composer-attach .ui-icon{width:15px;height:15px;flex-basis:15px}.composer-hint{flex:1;color:var(--text-quiet);font-size:12px;line-height:16px}.composer-actions{margin-left:auto;width:auto;display:flex;flex:none;flex-direction:row;align-items:center;gap:8px}.composer-action{width:auto;padding:0 11px;flex:none}.composer-send{display:flex;align-items:center;gap:7px}.composer-send .ui-icon{width:15px;height:15px;flex-basis:15px}

.panel-toolbar{min-height:50px}.review-context strong{font:600 14px/20px var(--font-ui)}.review-scope{color:var(--text-muted);font-size:12px}.terminal-status{color:var(--text-muted)}.review-nav-heading{min-height:var(--control-standard-size);color:var(--text-muted);font:620 12px/16px var(--font-ui);letter-spacing:0;text-transform:none}.review-nav-heading strong{color:var(--text-primary);font:inherit}.review-nav-item,.review-tree-name,.review-tree-file,.review-tree-toggle,.review-tree-note{color:var(--text-muted)}.review-tree-row{grid-template-columns:var(--control-micro-size) minmax(0,1fr)}.review-tree-toggle{min-width:var(--control-micro-size);display:grid;place-items:center;padding:0}.review-tree-toggle,.review-tree-name,.review-tree-file{min-height:var(--control-micro-size)}.review-tree-toggle .ui-icon{width:14px;height:14px}.review-all-changes-icon{display:grid;place-items:center}.review-all-changes-icon .ui-icon{width:14px;height:14px}.review-nav-item:hover,.review-tree-row:hover,.review-tree-file:hover{background:var(--surface-muted);color:var(--text-primary)}.review-nav-item.is-active,.review-tree-row.is-active,.review-tree-file.is-active{color:var(--text-primary)}.review-summary-head h3{font:640 18px/24px var(--font-ui);letter-spacing:-.01em}.review-crumbs button,.entry-link{min-height:var(--control-micro-size);display:inline-flex;align-items:center}.review-tree-file,.review-tree-note{padding-left:calc(var(--control-micro-size) + var(--tree-depth)*.9rem)}.diff-line-context{background:var(--surface-default)}.terminal-panel,.terminal-host{background:var(--surface-default)}
.review-body{padding:16px var(--workspace-scroll-end) 32px var(--workspace-gutter)}.review-document-head{top:-16px;margin:-16px calc(-1 * var(--workspace-scroll-end)) 16px calc(-1 * var(--workspace-gutter));padding:11px var(--workspace-scroll-end) 11px var(--workspace-gutter)}.workspace-freshness,.file-transfer-status{padding-inline:var(--workspace-gutter)}

.gate{background:var(--surface-canvas)}.gate-frame::before,.gate-frame::after{display:none}.gate-coords{color:var(--text-quiet)}.gate-mark{color:var(--text-primary);font-family:var(--font-ui);font-weight:680;letter-spacing:-.015em;text-transform:none}.gate-sub,.gate-foot,.auth-note{color:var(--text-muted)}
.field{color:var(--text-primary)}.field input,.field select,.field textarea{min-height:var(--control-large-size);color:var(--text-primary)}.session-share-result input{min-height:var(--control-large-size);color:var(--text-primary)}
.dialog{color:var(--text-primary)}.dialog::backdrop{background:rgba(23,25,29,.48)}.dialog-title{color:var(--text-primary);font:650 22px/28px var(--font-ui);letter-spacing:-.02em}.dialog-sub{color:var(--text-muted)}

.page-stage{min-width:0;min-height:0;overflow-y:scroll;overscroll-behavior:contain;color:var(--text-primary)}
.page-shell{width:100%;min-height:100%}
.page-header{position:relative;column-gap:16px;margin:0}
.page-header h2{margin:0;color:var(--text-primary)}
.page-header h2[tabindex="-1"]:focus{outline:none}
.page-back{font-size:0}
.page-back .ui-icon{width:16px;height:16px}
.settings-panel{max-width:none;padding-top:0}.settings-panel-heading h3{color:var(--text-primary)}.settings-card-heading h4,.session-settings-heading h3{color:var(--text-primary);font-family:var(--font-ui)}.session-settings-heading h3{font-size:15px;line-height:20px;font-weight:650}.settings-card-heading p,.session-settings-heading p{color:var(--text-muted);font-size:13px}.settings-panel-heading p,.settings-toggle small{color:var(--text-muted)}.settings-status{margin:0;padding:8px 10px;background:var(--surface-subtle);color:var(--text-muted);font-size:12px;line-height:18px;overflow-wrap:anywhere}.settings-status.is-ok{background:var(--success-surface);color:var(--success-text)}.settings-status.is-loading{background:var(--agent-surface);color:var(--agent-text)}.settings-status.is-error{background:var(--danger-surface);color:var(--danger-text)}#settings-key-fields,#xai-settings-key-fields{display:grid;gap:10px}
.session-dialog-body{width:100%;grid-template-columns:minmax(0,1fr);align-items:start}.session-share-eyebrow{color:var(--accent-text)}.session-details-disclosure summary,.settings-details summary,.usage-quality summary,.usage-daily-details summary{color:var(--text-primary)}.session-details dt{line-height:16px}.session-details dt,.session-section-note,.session-share-note{color:var(--text-muted)}.session-section-note.is-error{color:var(--danger-text)}
.usage-status{display:grid;min-height:20px}.usage-status>*{grid-area:1/1}.usage-message.is-inline{padding:2px 0;color:var(--text-muted);font-size:12px;line-height:16px;text-align:left}.usage-error.is-inline{justify-content:flex-start}.usage-controls,.usage-metric-controls{overflow:hidden}.usage-range-button,.usage-metric-button{color:var(--text-muted)}.usage-refresh{color:var(--text-muted);font-family:var(--font-ui);font-size:12px}.usage-refresh,.usage-range-button.is-active,.usage-metric-button.is-active{background:var(--surface-raised);color:var(--text-primary)}.usage-chart-heading h3,.usage-breakdown h3{letter-spacing:0}.usage-eyebrow{color:var(--text-muted)}.usage-footnote,.usage-stat-grid small,.usage-legend{color:var(--text-muted)}.usage-provider-row small,.usage-stat-grid>div>span{color:var(--text-muted);font-size:12px}.usage-provider-row strong{text-transform:none}.usage-chart-grid{stroke:var(--border-subtle)}.usage-chart.is-empty{height:120px}.usage-chart-empty{fill:var(--text-muted);font:500 13px/18px var(--font-ui)}.usage-stat-grid{overflow:hidden}.usage-breakdown,.usage-quality{min-width:0}.usage-daily-details{margin-top:var(--content-gap);overflow:hidden}.usage-quality>.disclosure-summary{padding:4px 0}.usage-daily-scroll th:first-child,.usage-daily-scroll td:first-child{padding-left:var(--card-padding)}.usage-daily-scroll th:last-child,.usage-daily-scroll td:last-child{padding-right:var(--card-padding)}.usage-table-head{line-height:16px}.usage-chart-point{fill:var(--surface-default)}
.toast{background:var(--surface-inverse);color:var(--text-inverse)}

@media(hover:hover) and (pointer:fine){.btn:not(:disabled):hover{background:var(--surface-subtle)}.btn-primary:not(:disabled):hover{background:var(--accent-solid-hover)}.composer-attach:hover{background:var(--surface-muted);color:var(--text-primary)}.composer-media-remove:hover{background:var(--surface-raised);color:var(--text-primary)}.session-item:hover{background:var(--surface-muted)}.account-nav-link:hover,.rail-scope-button:hover,.session-unread-summary button:hover{color:var(--text-primary);background:var(--surface-muted)}.tab:hover,.usage-range-button:hover,.usage-metric-button:hover,.usage-refresh:hover{color:var(--text-primary);background:var(--surface-muted)}}
@media(max-width:1100px){.session-head{flex-wrap:nowrap}.session-head-id{width:auto;flex:1}.session-head-side{width:auto}.gauge-block{display:none}.session-context-summary{display:inline}}
@media(max-width:700px){
  :root{--workspace-gutter:13px;--workspace-scrollbar-width:0px;--shell-title-top:14px;--shell-control-top:11px;--view-header-height:76px;--view-tab-height:46px;--page-content-top:16px;--page-content-bottom:48px;--content-gap:14px;--card-padding:14px;--dialog-gutter:16px}
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .mobile-nav{background:var(--surface-rail);color:var(--text-primary)}.mobile-nav-button{background:transparent;color:var(--text-primary)}.mobile-lockup{background:var(--surface-rail)}.mobile-brand{color:var(--text-primary);font:680 17px/22px var(--font-ui);letter-spacing:-.015em;text-indent:0}.session-picker-backdrop{background:rgba(23,25,29,.45)}.rail{width:min(340px,calc(100vw - 28px));padding-top:max(14px,env(safe-area-inset-top))}.brand{padding-right:44px}.btn.session-picker-close{display:grid;top:calc(env(safe-area-inset-top) + 18px);right:var(--rail-inline-gutter)}.session-picker-close::after{content:"";position:absolute;inset:-6px}
  .session-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;row-gap:2px}.session-head-id{grid-row:1/3}.session-title{line-height:22px}.session-head-side{display:block}.head-buttons{display:block}
  .transcript,.page-stage{scrollbar-width:none}.transcript::-webkit-scrollbar,.page-stage::-webkit-scrollbar{display:none}.transcript-nav{inset:9px var(--workspace-gutter)}.composer-row{padding:0}.composer textarea{min-height:68px;padding:13px 14px 5px}.composer-footer{padding:7px 7px 8px 9px;gap:6px}.composer-hint{display:none}.composer-attach{padding-inline:6px}.composer-actions{margin-left:auto;justify-content:flex-end;gap:6px}.composer-action{padding-inline:10px}.composer-media{padding:0 10px 7px}.review-scope{font-size:11px}.review-body{padding:12px var(--workspace-gutter) 24px}.review-document-head{top:-12px;margin:-12px calc(-1 * var(--workspace-gutter)) 12px;padding:10px var(--workspace-gutter)}.terminal-host .terminal{padding:8px var(--workspace-gutter)}.page-header{column-gap:13px}.page-header h2{line-height:26px}.usage-controls{width:auto;flex:0 0 auto;margin-top:0}.usage-range-button{display:none}.usage-chart-panel{margin-top:24px}.usage-chart-heading{display:block}.usage-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin-top:10px}.usage-legend-item{min-width:0}.usage-stat-grid{grid-template-columns:1fr}.usage-stat-grid>div:last-child{grid-column:auto}.usage-lower{grid-template-columns:1fr}.usage-table-head,.usage-table-row{grid-template-columns:minmax(120px,1fr) 6.5rem 4rem 6.5rem}.usage-breakdown,.usage-daily-scroll{overflow-x:auto}.usage-daily-details>.disclosure-summary{padding-inline:var(--card-padding)}.usage-daily-scroll th:first-child,.usage-daily-scroll td:first-child{padding-left:var(--card-padding)}.usage-daily-scroll th:last-child,.usage-daily-scroll td:last-child{padding-right:var(--card-padding)}.dialog{border-radius:7px}
}
@media(prefers-reduced-motion:reduce){.status-orbit-motion{animation:none}}

.auth-link{min-height:var(--control-compact-size);display:inline-flex;align-items:center;justify-content:center}
.prose .code-copy{min-height:var(--control-micro-size);padding:0 8px;border-radius:4px;background:var(--surface-subtle);color:var(--text-muted);font:580 11px/16px var(--font-ui)}
.tool-diff-separator{font-size:11px}

/* Navigation order and form-control refinements. */
.session-title{flex:0 1 auto}.session-title-row{justify-content:flex-start}
.settings-panel-heading h3,.settings-card-heading h4,.session-settings-heading h3,.session-toggle strong,.settings-toggle strong,.field{letter-spacing:0;text-transform:none}.settings-card-heading h4{font-size:15px;font-weight:650}.session-toggle strong,.settings-toggle strong{color:var(--text-primary)}
.session-toggle small,.settings-toggle small{color:var(--text-muted)}
.session-toggle input[type="checkbox"],.settings-toggle input[type="checkbox"]{position:relative;appearance:none;border-radius:12px;cursor:pointer;transition:background-color 140ms ease,border-color 140ms ease}
.session-toggle input[type="checkbox"]::after,.settings-toggle input[type="checkbox"]::after{content:"";width:16px;height:16px;position:absolute;border-radius:50%;transition:transform 140ms ease}
.session-toggle input[type="checkbox"]:checked,.settings-toggle input[type="checkbox"]:checked{background:var(--accent-solid)}
.session-toggle input[type="checkbox"]:checked::after,.settings-toggle input[type="checkbox"]:checked::after{transform:translateX(16px)}
/* Interactive controls use four stable visual sizes; viewport and pointer type do not resize them. */
.usage-range-button,.usage-refresh,.usage-metric-button{height:var(--control-compact-size);min-height:var(--control-compact-size)}
.usage-refresh{width:var(--control-compact-size)}
.composer-media-remove{width:var(--control-micro-size);height:var(--control-micro-size)}
@media(max-width:700px){.transcript-nav-button{display:grid;place-items:center;width:var(--control-compact-size);min-width:var(--control-compact-size);padding:0}}

/* Connection inventories and details. */
.settings-panel-heading-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.settings-overview,
.connection-detail,
#settings-source-control > .settings-status {
  grid-column: 1 / -1;
  min-width: 0;
}
.settings-overview-section { display: grid; }
.settings-overview-heading h4,
.git-identity-summary h4,
.connection-detail-heading h4,
.connection-section h5,
.settings-danger-zone h5,
.danger-action-row h6 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}
.settings-overview-heading h4,
.git-identity-summary h4 { font-size: 15px; line-height: 20px; font-weight: 650; }
.settings-overview-heading p,
.git-identity-summary p,
.connection-detail-heading p,
.connection-section p,
.settings-danger-zone p,
.danger-action-row p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 19px;
}
.connection-list {
  display: grid;
}
.connection-row {
  display: grid;
  align-items: center;
  min-width: 0;
}
.connection-mark {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-primary);
}
.connection-mark-openai img { display: block; width: 21px; height: 21px; }
.connection-mark-claude img { display: block; width: 24px; height: 18px; }
.connection-mark-xai { font-size: 12px; font-weight: 760; letter-spacing: -.04em; }
.connection-mark-github svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.connection-row-identity { min-width: 0; }
.connection-row-identity h4 {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
}
.connection-row-identity p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
}
.connection-exception {
  padding: 3px 8px;
  background: var(--danger-surface);
  color: var(--danger-text);
}
.settings-empty {
  margin: 0;
  padding: 24px;
  color: var(--text-muted);
  font: 13px/19px var(--font-ui);
  text-align: center;
}
.git-identity-summary {
  align-items: center;
  gap: 20px;
}
.git-identity-summary dl { display: grid; gap: 7px; min-width: 0; margin: 0; }
.git-identity-summary dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
.git-identity-summary dt { color: var(--text-muted); font: 600 11px/18px var(--font-ui); }
.git-identity-summary dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font: 12px/18px var(--font-mono);
  text-overflow: ellipsis;
}
.connection-detail { display: grid; gap: var(--content-gap); }
.connection-detail-back {
  width: max-content;
  min-height: var(--control-compact-size);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -5px 0 0;
  background: transparent;
  color: var(--text-muted);
  font: 590 13px/18px var(--font-ui);
  cursor: pointer;
}
.connection-detail-back .ui-icon { width: 15px; height: 15px; }
.connection-detail-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-bottom: 18px;
}
.connection-detail-heading .connection-mark { width: 48px; height: 48px; }
.connection-detail-heading .connection-mark-openai img { width: 25px; height: 25px; }
.connection-detail-heading .connection-mark-claude img { width: 28px; height: 20px; }
.connection-detail-heading h4 { overflow-wrap: anywhere; font-size: 20px; line-height: 25px; font-weight: 660; }
.connection-detail-heading h4:focus { outline: none; }
.connection-section {
  align-items: center;
  gap: 16px;
}
.connection-section h5,
.settings-danger-zone h5 { font-size: 14px; line-height: 19px; font-weight: 650; }
.connection-action-row { display: flex; align-items: center; gap: 12px; min-width: min(100%, 340px); }
.connection-action-row > span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text-secondary);
  font: 13px/18px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connection-section > .btn,
.connection-action-row > .btn { flex: none; }
.connection-section > .browser-note,
.connection-repositories,
.connection-dependencies { grid-column: 1 / -1; }
.connection-dependencies { display: flex; flex-wrap: wrap; gap: 6px; }
.connection-session-link {
  min-height: var(--control-compact-size);
  max-width: 100%;
  padding: 0 10px;
  overflow: hidden;
  color: var(--text-secondary);
  font: 560 12px/16px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.connection-repositories {
  max-height: 240px;
  display: grid;
  overflow: auto;
  color: var(--text-muted);
  font: 12px/18px var(--font-mono);
}
.connection-repositories > span { padding: 7px 10px; overflow-wrap: anywhere; }
.settings-danger-zone {
  background: var(--surface-default);
}
.settings-danger-zone > div:first-child { padding-bottom: 4px; }
.danger-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}
.danger-action-row h6 { font-size: 13px; line-height: 18px; font-weight: 640; }
.danger-action-row .btn { flex: none; }
.connection-dialog { width: 520px; }

@media (hover:hover) and (pointer:fine) {
  .connection-detail-back:hover { color: var(--text-primary); }
  .connection-session-link:hover { background: var(--surface-subtle); }
}
@media (max-width:700px) {
  .settings-panel-heading-action { align-items: flex-start; gap: 14px; }
  .settings-panel-heading-action > div { min-width: 0; }
  .settings-panel-heading-action > .btn { flex: none; }
  .connection-exception { grid-column: 2; justify-self: start; margin-top: -2px; }
  .connection-row-action { grid-column: 3; grid-row: 1 / 3; }
  .git-identity-summary { gap: 14px; }
  .git-identity-summary > div:first-child { min-width: 0; }
  .git-identity-summary dl { grid-row: 2; }
  .git-identity-summary > .btn { grid-row: 1; }
  .connection-detail-heading { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding-bottom: 14px; }
  .connection-detail-heading .connection-mark { width: 42px; height: 42px; }
  .connection-detail-heading > .connection-exception { grid-column: 2; }
  .connection-section { gap: 12px; }
  .connection-section > .btn { justify-self: start; }
  .connection-action-row { width: 100%; min-width: 0; }
  .danger-action-row { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .danger-action-row .btn { justify-self: start; }
}
@media (max-width:380px) {
  .settings-panel-heading-action { display: grid; }
  .settings-panel-heading-action > .btn { justify-self: start; }
  .connection-row-action { grid-column: 2; grid-row: auto; justify-self: start; }
}

.environment-editor{display:grid;gap:8px}.environment-row{display:grid;grid-template-columns:minmax(9rem,.8fr) minmax(12rem,1.4fr) auto auto;align-items:center;gap:8px}.environment-row input[type="text"],.environment-row input[type="password"]{width:100%;height:var(--control-standard-size);padding:0 10px;color:var(--text-primary)}.environment-name{font-family:var(--font-mono)!important}.environment-secret-label{height:var(--control-standard-size);display:flex;align-items:center;gap:6px;color:var(--text-muted);font:12px/16px var(--font-ui);white-space:nowrap}.environment-secret-label input{width:16px;height:16px}.environment-remove{white-space:nowrap}
#create-environment .environment-row{grid-template-columns:minmax(0,1fr) auto}#create-environment .environment-name,#create-environment .environment-value{grid-column:1/-1}#create-environment .environment-secret-label{grid-column:1}#create-environment .environment-remove{grid-column:2}
@media(max-width:700px){.environment-row{grid-template-columns:minmax(0,1fr) auto}.environment-name,.environment-value{grid-column:1/-1}.environment-secret-label{grid-column:1}.environment-remove{grid-column:2}}
@media(pointer:coarse){.session-search input,.field input,.field select,.repository-access-add select,.environment-row input[type="text"],.environment-row input[type="password"],.composer textarea,.session-share-result input{font-size:16px}}

/* Usage dashboard */
.usage-status:has(.usage-loading.hidden):has(.usage-error.hidden){display:none}
.usage-panel{display:grid;gap:var(--content-gap)}
#billing-content{display:grid;gap:var(--content-gap)}
.billing-summary{grid-template-columns:minmax(0,1fr) auto}
.billing-summary .usage-eyebrow{margin-bottom:7px}.billing-summary .usage-footnote{grid-column:1/-1;margin:0;max-width:760px}
.billing-summary>.is-error{grid-column:1/-1;margin:0}
.billing-hours{margin:8px 0 0;color:var(--text-muted);font-size:13px}.billing-summary>.btn{align-self:center}
.billing-terms{margin:0;background:var(--accent-surface)}
.usage-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.usage-section-heading h3{margin:0;font-size:16px;line-height:22px}.usage-section-heading p{margin:3px 0 0;color:var(--text-muted);font-size:12px}
.usage-section-heading .usage-controls{position:static;top:auto;right:auto;flex:none}.usage-inline-error{margin:0 0 16px;color:var(--danger-text);font-size:13px}.usage-stat-grid small{white-space:normal}.usage-chart-note{color:var(--text-quiet);font-size:11px}.usage-chart-frame{position:relative;min-width:0}.usage-chart{margin-top:10px}.usage-chart-day-hit{fill:transparent;cursor:crosshair}.usage-chart-day-hit.is-active{fill:color-mix(in srgb,var(--accent-solid) 5.5%,transparent)}
.usage-chart-tooltip{position:absolute;z-index:4;top:20px;width:240px;padding:11px 12px;transform:translateX(-50%);pointer-events:none;font-size:12px;line-height:17px}
.usage-chart-tooltip.align-start{transform:none}.usage-chart-tooltip.align-end{transform:translateX(-100%)}.usage-chart-tooltip>strong,.usage-chart-tooltip>span,.usage-chart-tooltip>small{display:block}.usage-tooltip-total{margin:2px 0 8px;font-size:17px;font-weight:680}.usage-tooltip-row{display:flex!important;justify-content:space-between;gap:12px;padding:3px 0;color:var(--text-muted)}.usage-tooltip-row strong{font-weight:620}.usage-chart-tooltip>small{margin-top:8px;color:var(--text-quiet)}
.workspace-chart-area{fill:color-mix(in srgb,var(--accent-solid) 11%,transparent)}.workspace-chart-line{fill:none;stroke:var(--accent-solid);stroke-width:2.2;vector-effect:non-scaling-stroke}.workspace-chart-point{fill:var(--surface-raised);stroke:var(--accent-solid);stroke-width:2;vector-effect:non-scaling-stroke}.workspace-chart-guide{stroke:var(--accent-solid);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.usage-provider-row.is-openai,.usage-chart-segment.is-openai,.usage-legend-item.is-openai{--usage-provider-color:var(--agent-text)}
.usage-provider-row.is-codex,.usage-chart-segment.is-codex,.usage-legend-item.is-codex{--usage-provider-color:var(--accent-solid)}
.usage-provider-row.is-xai,.usage-chart-segment.is-xai,.usage-legend-item.is-xai{--usage-provider-color:var(--success-text)}
.usage-provider-row.is-grok,.usage-chart-segment.is-grok,.usage-legend-item.is-grok{--usage-provider-color:var(--danger-text)}
.usage-chart-segment{fill:var(--usage-provider-color,var(--text-muted))}
.usage-legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin:9px 0 0}.usage-legend-item{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:11px}.usage-legend-swatch{width:9px;height:9px;border-radius:2px;background:var(--usage-provider-color,var(--text-muted))}
.barad-activity-grid,.inference-breakdown-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--content-gap)}.usage-breakdown,.billing-history{min-width:0;margin:0}.billing-history h3,.usage-breakdown h3{margin:0 0 12px}
.workspace-activity-row,.billing-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}.workspace-activity-row>div{min-width:0}.workspace-activity-row strong,.workspace-activity-row span{display:block}.workspace-activity-row span{margin-top:2px;color:var(--text-muted);font-size:11px}.workspace-activity-row>div:last-child{text-align:right}.workspace-activity-row>div:last-child strong{font-family:var(--font-mono);font-weight:560}
#workspace-activity-more{margin-top:12px}.billing-activity-day+ .billing-activity-day{margin-top:16px}.billing-activity-day h4{margin:0;padding:8px 0 5px;color:var(--text-muted);font:600 11px/1.2 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.inference-notice{display:flex;align-items:flex-start;gap:8px 18px;padding:14px 16px;background:var(--agent-surface);color:var(--agent-text)}.inference-notice strong{flex:none}.inference-notice span{color:var(--text-muted)}
.inference-chart-panel{padding-top:0}.inference-chart-panel>.usage-chart-heading{align-items:flex-start}.inference-chart-panel .usage-metric-controls{margin:0}.inference-chart-panel>.usage-footnote{margin:5px 0 0}.usage-provider-bars{gap:16px}.usage-provider-row progress{border-radius:5px;overflow:hidden;background:var(--surface-muted)}.usage-provider-row progress::-webkit-progress-bar{background:var(--surface-muted)}
.usage-technical-grid{display:grid;grid-template-columns:1fr 1fr;margin:14px 0}.usage-technical-grid>div{padding:13px}.usage-technical-grid span,.usage-technical-grid small,.usage-technical-grid strong{display:block}.usage-technical-grid>div>span,.usage-technical-grid small{color:var(--text-muted);font-size:11px}.usage-technical-grid strong{margin:4px 0;font-size:18px}.usage-technical-grid small span{display:inline}.usage-daily-details{margin-top:0}

@media(max-width:900px){.barad-activity-grid,.inference-breakdown-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .billing-summary{grid-template-columns:1fr}.billing-summary>.btn{width:100%}.billing-summary .usage-footnote{grid-column:auto}
  .usage-section-heading{display:grid;gap:12px}.usage-section-heading .usage-controls{width:100%}.usage-section-heading .usage-range-button{display:block}.usage-chart-note{display:none}.usage-chart-tooltip{width:min(230px,calc(100vw - 56px))}
  .usage-stat-grid{grid-template-columns:1fr}
  .inference-notice{display:grid}.inference-chart-panel>.usage-chart-heading{display:grid;gap:12px}.usage-metric-controls{width:100%}.usage-technical-grid{grid-template-columns:1fr}
}


/* Surface boundaries are tonal; outlines are reserved for focus. */
*,::before,::after{border-width:0}
/* Tonal workspace. Conversation, work details and lifecycle each have one attention level.
   Layout and interaction state stay with their existing owners; no alternate theme skin. */
:root { --rail-highlight:#d3c7b5; --rail-mid:#eee8dc; --work-surface:var(--surface-muted); }
:root[data-theme="dark"] { --rail-highlight:#354453; --rail-mid:#171e26; --work-surface:var(--surface-subtle); }
:root[data-theme="dark"] :is(.session-provider-logo,.connection-mark-openai img,.connection-mark-claude img) { filter:invert(1); }
.rail { --text-quiet:var(--text-muted); background:linear-gradient(180deg,transparent,var(--surface-rail) min(42%,280px)),linear-gradient(140deg,var(--rail-highlight),var(--rail-mid) 120px,var(--surface-rail) 300px); padding-top:24px; }
.brand { min-height:44px; margin-bottom:14px; }
.brand-mark { font-size:26px; line-height:32px; font-weight:620; }
.rail-label { font-size:12px; color:var(--text-muted); font-weight:550; }
.rail-scope-button { padding-inline:8px; }
.rail-actions .btn { background:var(--surface-raised); color:var(--accent-text); }
.session-search { background:var(--surface-canvas); border-radius:8px; }
.session-search input { font-size:14px; }
.session-item-select { border-radius:10px; }
.session-item-provider { width:18px; padding-right:0; }
.session-item-meta { grid-template-columns:18px minmax(0,1fr) auto; }
.session-item-state { font-size:12px; font-weight:500; }
.rail-account { margin-block:16px 12px; padding:16px 8px 8px; border-radius:12px; background:var(--surface-canvas); }
.account-line { margin-bottom:12px; font-size:13px; }
.account-nav-link { border-radius:8px; font-size:14px; min-height:44px; }
.account-nav-link[aria-current=page] { background:var(--surface-raised); }
.stage,.view-header,.page-stage,.session-head,.composer { background:var(--surface-canvas); }
.view-header { min-height:0; }
.page-header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:16px; padding:32px var(--workspace-scroll-end) 24px var(--workspace-gutter); }
.page-heading { min-width:0; grid-column:1; }
.page-header h2 { font:580 30px/38px var(--font-ui); letter-spacing:-.015em; }
.page-header p { margin:8px 0 0; color:var(--text-muted); font-size:14px; line-height:22px; }
.page-eyebrow,.page-header .page-eyebrow { margin:0 0 8px; color:var(--text-muted); font:500 12px/18px var(--font-ui); letter-spacing:0; text-transform:none; }
.page-back { grid-column:2; grid-row:1; margin:0; }
.page-header-action { grid-column:3; grid-row:1; margin:0; }
.page-header-action:only-of-type { grid-column:2; }
.page-body { padding:24px var(--workspace-scroll-end) 48px var(--workspace-gutter); }
.session-head { padding:28px var(--workspace-gutter) 20px; align-items:center; gap:20px; }
.session-head-id { display:block; }
.session-title { font:580 28px/36px var(--font-ui); letter-spacing:-.015em; white-space:normal; overflow-wrap:anywhere; }
.session-title-row { align-items:center; flex-wrap:wrap; gap:10px; }
.session-meta-row { margin-top:8px; font-size:12px; line-height:18px; }
.session-head-side { margin:0; gap:20px; }
.gauge-block { width:104px; }
.gauge-labels { font-size:12px; line-height:18px; }
.gauge-fill { background:var(--agent-text); }
.tabs { height:52px; min-height:52px; margin:0 var(--workspace-gutter); padding:4px 0; align-items:center; gap:4px; background:var(--surface-canvas); }
.page-tabs { position:sticky; top:0; z-index:3; }
.tab { flex:none; min-height:44px; padding:10px 14px; border-radius:8px; font:550 14px/20px var(--font-ui); }
.tab.is-active { background:var(--surface-raised); }
.navigation-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; }
.navigation-action::after { content:''; width:7px; height:7px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); margin:0 4px 0 0; flex:none; }
/* Transcript: cards are siblings, never wrapped into a single work-log surface. */
.transcript { grid-auto-rows:max-content; padding:24px var(--workspace-scroll-end) 24px var(--workspace-gutter); gap:20px; }
.msg { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-width:0; margin:0; padding:20px; border-radius:8px; background:var(--surface-raised); }
.msg-tag { display:flex; flex-direction:row; align-items:center; gap:10px; padding:0; color:var(--text-primary); font:600 14px/20px var(--font-ui); letter-spacing:0; text-transform:none; }
.msg-tag time { margin-left:auto; color:var(--text-muted); font:400 12px/18px var(--font-ui); }
.msg-user .msg-tag { color:var(--accent-text); }
.msg-agent .msg-tag { color:var(--agent-text); }
.msg-body { min-width:0; padding:0; border-radius:0; background:transparent; color:var(--text-primary); }
.prose,.msg-body,.thinking-body.prose { font:400 16px/26px var(--font-ui); }
.prose h1 { font:650 20px/28px var(--font-ui); }
.prose h2 { font:650 18px/26px var(--font-ui); }
.prose h3 { font:650 16px/26px var(--font-ui); }
.prose a, .prose .file-link { color:var(--accent-text); }
.prose code,.prose .code-block pre { font:400 14px/22px var(--font-mono); color:var(--text-primary); }
.prose .code-block,.prose code { background:var(--surface-canvas); border-radius:6px; }
.prose .code-block pre,.prose .code-block code { background:transparent; }
.prose blockquote { padding:12px 16px; background:var(--surface-canvas); border-radius:6px; color:var(--text-secondary); }
.prose .table-scroll { border-radius:6px; }
.prose .table-scroll th { font:600 14px/20px var(--font-ui); letter-spacing:0; text-transform:none; }
.prose .table-scroll tbody tr:nth-child(even) { background:var(--surface-canvas); }
.thinking-card,.tool-card { min-width:0; margin:0; border-radius:8px; background:var(--work-surface); overflow:hidden; }
.transcript>:is(.thinking-card,.tool-card)+:is(.thinking-card,.tool-card) { margin-top:-12px; }
:is(.thinking-head,.tool-head) { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto 12px; align-items:center; gap:10px; min-height:48px; padding:12px 16px; background:transparent; border-radius:8px; font:400 14px/20px var(--font-ui); letter-spacing:0; text-transform:none; }
:is(.thinking-kind,.tool-kind) { grid-column:1; grid-row:1; color:var(--text-muted); font:600 14px/20px var(--font-ui); }
:is(.thinking-preview,.tool-summary) { grid-column:2; grid-row:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-muted); font:400 14px/20px var(--font-ui); }
.tool-diff-stats { grid-column:3; grid-row:1; font:400 12px/18px var(--font-mono); }
:is(.tool-state,.step-state) { grid-column:4; grid-row:1; margin:0; color:var(--text-muted); font:400 12px/18px var(--font-ui); white-space:nowrap; }
:is(.tool-state.is-ok,.step-state) { color:var(--success-text); }
.tool-state.is-run { color:var(--agent-text); }
.tool-state.is-err { color:var(--danger-text); }
:is(.tool-state,.step-state)::before { display:inline-block; width:12px; margin-right:4px; text-align:center; }
:is(.tool-state.is-ok,.step-state)::before { content:'✓'; }
.tool-state.is-run::before { content:'●'; font-size:8px; vertical-align:1px; }
.tool-state.is-err::before { content:'×'; }
.tool-state.is-cancelled::before { content:'–'; }
:is(.thinking-head,.tool-head)::after { grid-column:5; grid-row:1; content:''; width:7px; height:7px; margin:0 0 4px; background:none; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); color:var(--text-muted); }
details[open]>:is(.thinking-head,.tool-head)::after { background:none; transform:rotate(225deg); margin-top:5px; }
.tool-failure-summary { grid-column:1/-1; grid-row:2; padding:8px 12px; border-radius:6px; font:400 14px/20px var(--font-ui); background:var(--danger-surface); }
.tool-detail { background:transparent; }
.thinking-body,.tool-detail-block { padding:16px; margin:0 8px 8px; border-radius:6px; background:var(--surface-default); color:var(--text-primary); }
.thinking-time { display:block; margin-top:12px; color:var(--text-muted); font:400 12px/18px var(--font-ui); }
.tool-value,.tool-file-content,.code-diff-cell { font:400 14px/22px var(--font-mono); color:var(--text-primary); }
.tool-value,.tool-file-view,.tool-file-diff { background:var(--surface-canvas); border-radius:6px; }
.tool-detail-title,.tool-section-label,.tool-note { font:400 14px/20px var(--font-ui); color:var(--text-muted); letter-spacing:0; text-transform:none; }
.tool-detail-title,.tool-section-label { font-weight:600; }
.tool-result-meta,.tool-diff-stats { font-size:12px; line-height:18px; }
.web-search-findings,.web-search-sources li { border-radius:6px; }
.web-search-sources span,.prompt-media figcaption { font-size:12px; line-height:18px; }
.prompt-media figure,.tool-screenshot,.transcript-media-frame { border-radius:6px; }
.turn-divider,.turn-activity { min-width:0; margin:0; padding:0 20px; border-radius:0; background:transparent; color:var(--text-muted); font:400 12px/18px var(--font-ui); letter-spacing:0; text-transform:none; }
.turn-divider::before,.turn-divider::after { display:none; }
.turn-activity-elapsed { font-size:12px; line-height:18px; }
.turn-activity.is-stopping { color:var(--text-muted); background:transparent; }
.turn-divider.is-provider-retry { color:var(--accent-text); }
.transcript-error { min-width:0; margin:0; padding:20px; border-radius:8px; background:var(--danger-surface); }
.transcript-error header { gap:12px; color:var(--danger-text); font:600 14px/20px var(--font-ui); letter-spacing:0; text-transform:none; }
.transcript-error header time,.transcript-error code { color:var(--text-muted); font-size:12px; letter-spacing:0; }
.transcript-error p { color:var(--text-primary); font-size:16px; line-height:26px; }
.transcript-error-diagnostics { padding:12px; background:var(--surface-default); border-radius:6px; }
.composer { padding:12px var(--workspace-gutter) max(18px,env(safe-area-inset-bottom)); }
.composer-row { border-radius:12px; background:var(--surface-raised); }
.composer-row:focus-within { outline:2px solid var(--accent-text); outline-offset:2px; }
.composer textarea { font:400 16px/26px var(--font-ui); }
.composer-media-item { border-radius:8px; }
.transcript-nav-button { border-radius:8px; }
/* Page grouping is identical at desktop and mobile widths. */
.surface-card { background:var(--surface-raised); border-radius:12px; }
.form-section { display:grid; grid-template-columns:205px minmax(0,1fr); align-items:start; gap:32px; margin:0; padding:24px; border-radius:12px; background:var(--surface-raised); min-width:0; }
.section-intro { min-width:0; }
.section-number { display:none; }
.section-intro :is(h3,h4,h5) { margin:0 0 8px; color:var(--text-primary); font:600 18px/26px var(--font-ui); letter-spacing:0; text-transform:none; }
.section-intro p { margin:0; color:var(--text-muted); font:400 14px/22px var(--font-ui); max-width:60ch; }
.section-content { display:flex; flex-direction:column; align-items:stretch; min-width:0; gap:16px; }
.section-content>.btn { align-self:flex-start; }
.section-content>.field { margin:0; }
.field { font-size:14px; gap:8px; }
.field input,.field select,.field textarea,.repository-access-add select,.environment-row input[type="text"],.environment-row input[type="password"],.session-share-result input { min-width:0; border-radius:8px; background:var(--surface-canvas); font:400 16px/24px var(--font-ui); }
.field input,.field select,.field textarea { width:100%; }
.field input:focus,.field select:focus,.field textarea:focus { outline:2px solid var(--accent-text); outline-offset:2px; }
.settings-panel { grid-template-columns:minmax(0,1fr); gap:24px; }
.settings-panel-heading h3 { font:600 18px/26px var(--font-ui); }
.settings-panel-heading p { font-size:14px; line-height:22px; }
.settings-overview,.connection-detail-sections,.session-dialog-body,.create-body { display:grid; gap:20px; }
.settings-overview-section,.settings-card,.session-settings-section,.session-share { gap:32px; }
.settings-card-actions { justify-content:flex-start; }
.connection-section,.git-identity-summary { grid-template-columns:205px minmax(0,1fr); }
.connection-section>* { grid-column:auto; }
.connection-list { gap:12px; overflow:visible; background:transparent; border-radius:0; }
.connection-row { min-height:80px; padding:16px; grid-template-columns:34px minmax(0,1fr) auto; gap:10px 12px; border-radius:8px; background:var(--surface-subtle); }
.connection-mark { width:34px; height:34px; border-radius:8px; background:var(--surface-raised); }
.connection-row-identity h4 { font:600 14px/20px var(--font-ui); white-space:normal; overflow-wrap:anywhere; }
.connection-row-identity p { font:400 12px/18px var(--font-ui); white-space:normal; overflow-wrap:anywhere; margin-top:4px; }
.connection-row-action { grid-column:3; grid-row:1/3; min-width:0; }
.connection-exception { grid-column:2; justify-self:start; font-size:12px; border-radius:6px; white-space:normal; }
.connection-detail-heading { padding:20px; border-radius:12px; background:var(--surface-raised); }
.connection-detail-back { padding:8px 12px; border-radius:8px; }
.connection-repositories { background:var(--surface-subtle); border-radius:8px; gap:4px; }
.connection-session-link { background:var(--surface-subtle); border-radius:8px; }
.connection-action-row>span { white-space:normal; overflow-wrap:anywhere; font-size:14px; }
.settings-empty { background:var(--surface-subtle); border-radius:8px; font-size:14px; line-height:22px; }
.git-identity-summary dl { grid-column:auto; }
.git-identity-summary>.btn { grid-column:auto; }
.git-identity-summary dd { font-size:14px; line-height:22px; white-space:normal; overflow-wrap:anywhere; }
.git-identity-preview { padding:16px; border-radius:8px; font:400 12px/18px var(--font-mono); }
.git-identity-preview strong { letter-spacing:0; text-transform:none; }
.session-toggle,.settings-toggle { padding:16px; border-radius:8px; background:var(--surface-subtle); }
.session-toggle strong,.settings-toggle strong { font-size:14px; line-height:20px; }
.session-toggle small,.settings-toggle small,.session-section-note,.device-setting-note,.session-share-note { font-size:12px; line-height:18px; }
.session-toggle input[type="checkbox"],.settings-toggle input[type="checkbox"] { width:40px; height:24px; background:var(--surface-muted); }
.session-toggle input[type="checkbox"]::after,.settings-toggle input[type="checkbox"]::after { left:4px; top:4px; background:var(--text-muted); }
.session-toggle input[type="checkbox"]:checked::after,.settings-toggle input[type="checkbox"]:checked::after { background:var(--on-accent); }
.session-details-disclosure { display:block; padding:24px; border-radius:12px; background:var(--surface-raised); }
.session-details-disclosure>:not(summary) { margin-top:16px; }
.session-details { background:transparent; gap:12px; }
.session-details div { padding:12px 16px; background:var(--surface-subtle); border-radius:8px; }
.session-details dt { font-size:12px; letter-spacing:0; text-transform:none; }
.session-details dd { font-size:14px; line-height:22px; }
.session-management { overflow:visible; }
.session-management-row,.danger-action-row,.repository-access-row { padding:16px; border-radius:8px; background:var(--surface-subtle); }
.session-management-row h4 { font-size:14px; line-height:20px; color:var(--text-primary); }
.session-management-row p { font-size:12px; line-height:18px; }
.session-management-danger h4 { color:var(--danger-text); }
.danger-action-row+.danger-action-row { margin-top:12px; }
.session-share-eyebrow { font-size:12px; letter-spacing:0; text-transform:none; }
.environment-disclosure { padding:0; background:transparent; }
.environment-row { padding:12px; background:var(--surface-subtle); border-radius:8px; }
.create-repository-row { border-radius:8px; padding:16px; background:var(--surface-subtle); }
.create-repository-branch-summary { font-size:12px; }
.create-actions { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:4px 0; }
.create-actions p { margin:0; color:var(--text-muted); font-size:12px; line-height:20px; }
.create-actions .btn { flex:none; }
.settings-details,.session-instruction-row,.model-control-error { font-size:12px; border-radius:8px; }
.settings-details summary,.session-details-disclosure summary,.usage-quality summary,.usage-daily-details summary { font-size:14px; letter-spacing:0; }
.settings-status,.auth-error,.credit-notice,.billing-terms,.browser-note,.toast { border-radius:8px; }
.gate-frame,.dialog { border-radius:12px; background:var(--surface-raised); }
.dialog-sub { font-size:14px; line-height:22px; }
.dialog-actions { gap:8px; }
.recent-session { border-radius:8px; }
/* Review has separate navigation and document surfaces, with local code scrolling. */
.panel-toolbar { padding:16px var(--workspace-gutter); background:var(--surface-canvas); }
.review-layout { grid-row:4; grid-template-columns:240px minmax(0,1fr); gap:12px; margin:0 var(--workspace-gutter); }
.review-navigator { background:transparent; gap:12px; }
.review-nav-section { background:var(--work-surface); border-radius:10px; overflow:hidden; }
.review-nav-heading { background:transparent; padding:14px 10px; }
.review-content { background:var(--surface-raised); border-radius:12px; overflow:auto; }
.review-document-head { background:var(--surface-raised); }
.review-nav-item,.review-tree-file,.review-tree-name,.review-repository-group-head,.review-nav-directory,.review-document-repository { font-size:12px; line-height:18px; }
.review-nav-item,.review-tree-row,.review-tree-file { border-radius:6px; }
.review-git-badge { color:var(--text-primary); }
.review-nav-item.is-active,.review-tree-row.is-active,.review-tree-file.is-active { background:var(--surface-raised); }
.review-summary-overview { background:var(--surface-subtle); border-radius:8px; padding:16px; }
.review-summary-card { background:var(--surface-subtle); border-radius:8px; padding:16px; }
.review-diff-file { border-radius:8px; background:var(--surface-default); }
.review-diff-file-head,.review-diff-hunk { background:var(--surface-subtle); }
.review-diff-file .code-diff-cell.is-delete { background:var(--danger-surface); }
.review-diff-file .code-diff-cell.is-insert { background:var(--success-surface); }
.terminal-panel { margin:16px var(--workspace-gutter) 0; border-radius:12px; overflow:hidden; background:var(--surface-default); }
.terminal-bar { margin:0; padding:12px 16px; background:var(--work-surface); }
.terminal-status { font-size:12px; line-height:18px; }
.terminal-host .terminal { padding:12px 16px; }
/* Metrics and evidence preserve their billing meaning inside tonal groups. */
.usage-section,.usage-breakdown,.billing-history,.billing-summary,.usage-quality,.usage-daily-details { padding:24px; }
.billing-balance { font:550 44px/1.2 var(--font-ui); letter-spacing:-.015em; }
.usage-eyebrow { font-size:12px; letter-spacing:0; text-transform:none; }
.usage-stat-grid { background:transparent; border-radius:0; margin:24px 0; gap:12px; }
.usage-stat-grid>div { padding:20px; background:var(--surface-canvas); border-radius:8px; }
.usage-stat-grid strong { font:550 32px/1.3 var(--font-ui); letter-spacing:-.015em; margin:10px 0; }
.usage-stat-grid>div>span,.usage-stat-grid small,.usage-footnote { font-size:12px; line-height:18px; }
.usage-chart-panel { padding:20px 0 0; }
.usage-chart { height:250px; }
.usage-chart-heading h3,.usage-breakdown h3,.billing-history h3 { font:600 18px/26px var(--font-ui); }
.usage-lower { gap:20px; }
.usage-quality>summary,.usage-daily-details>.disclosure-summary { padding:0; min-height:32px; }
.usage-daily-scroll { margin-top:16px; }
.usage-table-head,.usage-table-row,.usage-legend,.usage-chart-label { font-size:12px; }
.usage-controls,.usage-metric-controls { padding:4px; gap:4px; border-radius:8px; background:var(--surface-canvas); }
.usage-range-button,.usage-metric-button { font-size:12px; border-radius:6px; }
.usage-chart-tooltip { background:var(--surface-inverse); color:var(--text-inverse); border-radius:8px; }
.usage-chart-tooltip :is(span,small,strong),.usage-tooltip-row strong { color:inherit; }
.usage-technical-grid { gap:8px; background:transparent; }
.usage-technical-grid>div { background:var(--surface-canvas); border-radius:8px; }
.inference-notice { border-radius:8px; }
.usage-table-row:nth-child(even),.usage-daily-scroll tbody tr:nth-child(even) { background:var(--surface-subtle); }
.workspace-activity-row,.billing-history-row { padding:12px; background:var(--surface-subtle); border-radius:8px; margin-top:8px; }
.usage-daily-scroll td,.usage-daily-scroll th { padding:12px; }
.usage-quality dl>div { padding:8px 0; }
@media(hover:hover) and (pointer:fine){
.btn:not(:disabled):hover { background:var(--surface-canvas); }
.btn-primary:not(:disabled):hover { background:var(--accent-solid-hover); }
.navigation-action:not(:disabled):hover,.text-button:hover,.tab:hover { background:var(--surface-muted); color:var(--text-primary); }
:is(.thinking-head,.tool-head):hover { background:var(--surface-raised); }
.session-item:hover,.account-nav-link:hover,.rail-scope-button:hover,.session-unread-summary button:hover { background:var(--surface-default); }
.session-item.is-active:hover { background:var(--surface-raised); }}
@media(max-width:1100px){
.session-head { align-items:center; }
.form-section,.connection-section,.git-identity-summary { grid-template-columns:170px minmax(0,1fr); gap:24px; }
.review-layout { grid-template-columns:210px minmax(0,1fr); }
.connection-row { grid-template-columns:30px minmax(0,1fr); }
.connection-row-action { grid-column:2; grid-row:auto; justify-self:start; }
.connection-mark { width:30px; height:30px; }}
@media(max-width:900px){
.form-section,.connection-section,.git-identity-summary { grid-template-columns:minmax(0,1fr); gap:24px; }
.section-intro p { max-width:65ch; }
.environment-row { grid-template-columns:minmax(0,1fr) auto; }
.environment-name,.environment-value { grid-column:1/-1; }
.environment-secret-label { grid-column:1; }
.environment-remove { grid-column:2; }}
@media(max-width:700px){
.rail { inset:12px auto 12px 12px; width:min(340px,calc(100vw - 24px)); border-radius:16px; padding-top:20px; }
.rail .brand { padding-right:38px; }
.btn.session-picker-close { top:24px; }
.mobile-lockup { background:transparent; }
.mobile-nav { background:var(--surface-rail); }
.mobile-nav-button { border-radius:8px; }
.session-search input { font-size:16px; }
.page-header,.session-head { padding:16px var(--workspace-gutter); gap:12px; }
.page-header h2,.session-title { font-size:22px; line-height:28px; }
.page-heading { grid-column:1; }
.page-header p { font-size:12px; line-height:18px; }
.page-eyebrow,.page-header .page-eyebrow { display:none; }
.session-head { display:flex; }
.session-head-id { min-width:0; }
.session-head-side { margin:0; }
.tab { padding-inline:12px; }
.page-body { padding:16px var(--workspace-gutter) 40px; }
.transcript { padding-block:20px; gap:16px; }
.msg,.transcript-error { padding:16px; }
.transcript>:is(.thinking-card,.tool-card)+:is(.thinking-card,.tool-card) { margin-top:-8px; }
:is(.thinking-head,.tool-head) { grid-template-columns:minmax(0,1fr) auto 12px; gap:4px 10px; padding:12px 16px; }
:is(.tool-kind,.thinking-kind) { grid-column:1; grid-row:1; }
:is(.tool-summary,.thinking-preview) { grid-column:1/-1; grid-row:2; }
:is(.tool-state,.step-state) { grid-column:2; grid-row:1; }
:is(.thinking-head,.tool-head)::after { grid-column:3; }
.tool-diff-stats { grid-column:1/-1; grid-row:3; margin-top:4px; }
.tool-failure-summary { grid-row:4; }
.turn-divider,.turn-activity { padding-inline:16px; }
.form-section,.session-details-disclosure,.usage-section,.billing-summary,.usage-breakdown,.billing-history,.usage-quality,.usage-daily-details { padding:16px; border-radius:10px; }
.section-intro :is(h3,h4,h5) { font-size:18px; line-height:26px; }
.section-intro p { max-width:none; font-size:14px; line-height:22px; }
.settings-overview,.connection-detail-sections,.session-dialog-body,.create-body { gap:16px; }
.settings-panel,.usage-lower { gap:16px; }
.settings-card-heading,.session-settings-heading { gap:0; }
.connection-row { padding:16px 12px; gap:8px 10px; grid-template-columns:28px minmax(0,1fr); }
.connection-row .connection-exception,.connection-row .connection-row-action { grid-column:2; grid-row:auto; }
.connection-row .connection-row-action { justify-self:start; }
.connection-mark { width:28px; height:28px; }
.session-toggle,.settings-toggle { padding:14px 12px; }
.session-management-row { grid-template-columns:minmax(0,1fr); gap:12px; }
.session-management-row>.btn { justify-self:start; }
.session-details { grid-template-columns:minmax(0,1fr); }
.section-content { gap:16px; }
.create-actions { flex-direction:column; align-items:stretch; gap:18px; }
.create-actions .btn { width:100%; }
.create-repository-row { padding:12px; }
.panel-toolbar { padding:12px var(--workspace-gutter); }
.review-layout { grid-template-columns:minmax(0,1fr); margin:0 var(--workspace-gutter); gap:8px; }
.terminal-panel { margin-top:12px; }
.terminal-bar { padding:12px; }
.terminal-host .terminal { padding:8px 12px; }
.usage-stat-grid>div { padding:16px; }
.usage-stat-grid strong { font-size:28px; }
.usage-chart-panel { margin-top:0; padding-top:16px; }
.usage-chart-heading { display:grid; gap:12px; }
.usage-chart { height:220px; }
.usage-stat-grid { margin:16px 0; gap:8px; }
.usage-daily-details>.disclosure-summary { padding:0; }
.usage-daily-scroll { margin-top:16px; }
}

/* The visual viewport, not device orientation, determines usable conversation height. */
@container session (max-height:500px) {
  .session-head { padding:8px var(--workspace-gutter); gap:12px; }
  .session-head .page-eyebrow { display:none; }
  .session-title-row { flex-wrap:nowrap; }
  .session-title { min-width:0; font-size:18px; line-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .session-meta-row { margin-top:4px; }
  .tabs { height:44px; min-height:44px; padding:0; }
  .composer { padding:8px var(--workspace-gutter) max(8px,env(safe-area-inset-bottom)); }
  .composer-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; }
  .composer textarea { grid-column:1; grid-row:1; height:56px; min-height:56px; max-height:56px; padding:6px 10px; resize:none; }
  .composer-footer { grid-column:1/-1; padding-block:4px; }
  .composer-media { grid-column:2; grid-row:1; align-self:center; max-width:88px; padding:4px 6px 4px 0; }
  .composer-media-item { flex-basis:72px; height:48px; }
  .composer-media-remove { top:2px; right:2px; }
}

/* Pending proposals use the informational palette; task details live in review. */
.tool-card.proposal-pending { background:var(--agent-surface); }
.proposal-pending :is(.tool-kind,.tool-state,.proposal-status) { color:var(--agent-text); }
.tool-state.is-review::before { content:'●'; font-size:8px; vertical-align:1px; }
.proposal-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.proposal-actions .btn { height:var(--control-large-size); min-height:var(--control-large-size); }
#create-proposal-prompt { min-height:200px; resize:vertical; }
#session-origin { flex:none; color:var(--agent-text); }
#head-context { flex-shrink:1; overflow:hidden; text-overflow:ellipsis; }