.new-thread-button { align-items: center; background: var(--emerald-400); border-radius: var(--radius-pill); color: var(--mineral-1000); display: flex; font-size: var(--text-sm); font-weight: 700; gap: var(--space-2); min-block-size: var(--touch-target); padding-inline: var(--space-4); }.new-thread-button:hover { background: var(--emerald-300); box-shadow: 0 0 0.9rem var(--emerald-glow); }
.connection-card { align-items: center; background: var(--mineral-850); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--limestone-200); display: grid; gap: var(--space-3); grid-template-columns: auto 1fr auto; min-width: 12rem; padding: var(--space-2) var(--space-3); text-align: start; }.connection-card:hover { border-color: var(--emerald-glow); }.connection-card b { font-size: var(--text-xs); }
.status-orb { background: var(--red-400); border: 3px solid var(--red-wash); border-radius: 50%; box-sizing: content-box; height: 0.45rem; width: 0.45rem; }.status-orb.is-connecting { animation: pulse 1.4s infinite; background: var(--amber-400); }.status-orb.is-connected { animation: pulse 2.5s infinite; background: var(--emerald-400); }
.rail-button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--mineral-300); display: flex; height: 3rem; justify-content: center; position: relative; transition: all var(--duration-fast); width: 3rem; }.rail-button:hover, .rail-button.is-active { background: var(--emerald-wash); border-color: var(--emerald-glow); color: var(--emerald-300); }.rail-button::after { background: var(--mineral-750); border: 1px solid var(--border-mid); border-radius: var(--radius-sm); color: var(--limestone-200); content: attr(data-tooltip); font-size: var(--text-xs); inset-inline-end: calc(100% + var(--space-2)); opacity: 0; padding: var(--space-2) var(--space-3); pointer-events: none; position: absolute; transform: translateX(0.4rem); transition: all var(--duration-fast); white-space: nowrap; }.rail-button:hover::after { opacity: 1; transform: translateX(0); }
.rail-avatar { align-items: center; background: var(--gold-wash); border: 1px solid var(--gold-border); border-radius: 50%; color: var(--gold-300); display: flex; font-weight: 700; height: 2.7rem; justify-content: center; width: 2.7rem; }
.search-field { align-items: center; background: var(--mineral-950); border: 1px solid var(--border-soft); border-radius: var(--radius-md); color: var(--mineral-400); display: flex; gap: var(--space-2); margin-block-start: var(--space-4); padding-inline: var(--space-3); }.search-field input { background: transparent; border: 0; min-block-size: var(--touch-target); min-width: 0; outline: 0; width: 100%; }
.session-filters { display: flex; gap: var(--space-2); margin-block-start: var(--space-3); }.chip { background: transparent; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--mineral-300); font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }.chip.is-active { background: var(--gold-wash); border-color: var(--gold-border); color: var(--gold-300); }
.session-item { background: transparent; border: 1px solid transparent; border-radius: var(--radius-lg); display: grid; padding: var(--space-3); text-align: start; width: 100%; }.session-item::before { background: var(--mineral-600); border-radius: var(--radius-pill); content: ""; height: 1.2rem; inset-block-start: 1.05rem; inset-inline-start: 0; opacity: 0; position: absolute; width: 0.16rem; }.session-item:hover { background: var(--mineral-900); }.session-item.is-active { background: linear-gradient(110deg, var(--emerald-wash), transparent); border-color: var(--emerald-glow); }.session-item.is-active::before { background: var(--emerald-400); opacity: 1; }.session-item-head { align-items: center; display: flex; gap: var(--space-2); }.session-item-head b { flex: 1; font-size: var(--text-sm); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.session-item p { color: var(--mineral-300); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.session-meta { align-items: center; color: var(--mineral-400); display: flex; font-size: var(--text-xs); justify-content: space-between; }
.session-load-more { align-items: center; background: var(--mineral-900); border: 1px solid var(--border-mid); border-radius: var(--radius-md); color: var(--mineral-300); display: flex; font-size: var(--text-sm); gap: var(--space-2); justify-content: center; margin-block-start: var(--space-2); min-block-size: var(--touch-target); width: 100%; }
.session-load-more:hover { background: var(--emerald-wash); border-color: var(--emerald-glow); color: var(--emerald-300); }
.session-load-more[disabled] { color: var(--mineral-400); cursor: default; }
.status-dot { background: var(--mineral-400); border-radius: 50%; height: 0.4rem; width: 0.4rem; }.status-dot.active { background: var(--green-400); }.status-dot.waiting { background: var(--amber-400); }
.usage-card { border-block-start: 1px solid var(--border-soft); margin-block-start: auto; padding-block-start: var(--space-4); }.usage-card b { display: block; font-size: var(--text-xs); }
.welcome { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 100%; text-align: center; }.welcome-seal { align-items: center; background: var(--emerald-wash); border: 1px solid var(--emerald-glow); clip-path: polygon(25% 4%, 75% 4%, 98% 50%, 75% 96%, 25% 96%, 2% 50%); color: var(--emerald-300); display: flex; font-size: 2rem; font-weight: 800; height: 5.2rem; justify-content: center; margin-block-end: var(--space-6); width: 5.2rem; }.welcome h2 { font-size: var(--text-2xl); font-weight: 720; }.welcome p { color: var(--mineral-300); line-height: 1.9; margin-block-start: var(--space-3); max-width: 35rem; }.suggestions { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, 1fr); margin-block-start: var(--space-8); max-width: 46rem; width: 100%; }.suggestion { background: var(--mineral-900); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); color: var(--limestone-300); min-height: 4.2rem; padding: var(--space-4); position: relative; text-align: start; }.suggestion::after { color: var(--gold-300); content: "↖"; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); opacity: 0; position: absolute; transition: opacity var(--duration-fast); }.suggestion:hover { border-color: var(--emerald-glow); color: var(--limestone-100); transform: translateY(-2px); }.suggestion:hover::after { opacity: 1; }
.message { display: grid; gap: var(--space-3); margin-block-end: var(--space-8); }.message-head { align-items: center; color: var(--mineral-300); display: flex; font-size: var(--text-xs); gap: var(--space-2); }.message-head i { align-items: center; background: var(--emerald-wash); border: 1px solid var(--emerald-glow); border-radius: var(--radius-sm); color: var(--emerald-300); display: flex; font-style: normal; height: 1.8rem; justify-content: center; width: 1.8rem; }.message.user { justify-items: start; }.message.user .message-body { border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg); max-width: 80%; padding: var(--space-4) var(--space-5); }.message-body { color: var(--limestone-200); line-height: 1.85; overflow-wrap: anywhere; white-space: pre-wrap; }.message-body code, .message-body pre { direction: ltr; font-family: var(--font-mono); text-align: left; }.message-body pre { background: var(--mineral-1000); border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow-x: auto; padding: var(--space-4); }.message-body ul { margin: var(--space-2) 0; padding-inline-start: var(--space-5); }.message-body li { margin-block-end: var(--space-1); }.message-body strong { font-weight: 760; }.streaming-caret::after { animation: blink 0.8s infinite; background: var(--emerald-400); content: ""; display: inline-block; height: 1em; margin-inline-start: var(--space-1); vertical-align: -0.12em; width: 0.12rem; }
.composer { border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: var(--space-3); position: relative; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }.composer::before { background: linear-gradient(90deg, var(--emerald-400), var(--gold-400)); border-radius: var(--radius-pill); content: ""; height: 0.12rem; inset-block-start: -1px; position: absolute; }.composer:focus-within { border-color: var(--emerald-glow); box-shadow: var(--shadow-panel), 0 0 0 3px var(--emerald-wash); }.composer textarea { background: transparent; border: 0; line-height: 1.65; max-height: 12rem; min-height: 3.6rem; outline: 0; padding: var(--space-2); resize: none; width: 100%; }.composer textarea::placeholder { color: var(--mineral-400); }
.composer-toolbar, .toolbar-group, .runtime-controls { align-items: center; display: flex; }.composer-toolbar { justify-content: space-between; }.toolbar-group, .runtime-controls { gap: var(--space-1); }.select-button, .project-pill { align-items: center; background: transparent; border-radius: var(--radius-sm); color: var(--mineral-300); display: flex; font-size: var(--text-xs); gap: var(--space-2); padding: var(--space-2); }.select-button:hover, .project-pill:hover { background: var(--mineral-750); color: var(--limestone-100); }.send-button { align-items: center; background: var(--emerald-400); border-radius: 50%; color: var(--mineral-1000); display: flex; height: 2.45rem; justify-content: center; width: 2.45rem; }.send-button:hover { background: var(--emerald-300); box-shadow: 0 0 1rem var(--emerald-glow); transform: translateY(-1px); }
.model-control { position: relative; }.model-control > .select-button[aria-expanded="true"] { background: var(--emerald-wash); color: var(--limestone-100); }.model-control > .select-button[aria-expanded="true"] [data-icon="chevron-down"] { transform: rotate(180deg); }.model-control [data-icon="chevron-down"] { transition: transform var(--duration-fast); }
.model-picker { animation: picker-in var(--duration-base) var(--ease-out); background: color-mix(in srgb, var(--mineral-850) 96%, transparent); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); bottom: calc(100% + var(--space-3)); box-shadow: var(--shadow-float), 0 0 0 1px rgb(53 214 163 / 5%); direction: rtl; inset-inline-end: 0; overflow: hidden; position: absolute; width: min(25rem, calc(100vw - 2rem)); z-index: 18; }.model-picker::after { background: linear-gradient(90deg, var(--emerald-400), var(--gold-400)); content: ""; height: 2px; inset: 0 0 auto; position: absolute; }.model-picker-header { align-items: center; display: flex; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-3); }.model-picker-header b { display: block; font-size: var(--text-sm); }.model-picker-header small { margin-block-start: 0.18rem; }.model-count { align-items: center; background: var(--emerald-wash); border: 1px solid var(--emerald-glow); border-radius: var(--radius-pill); color: var(--emerald-300); display: flex; font-size: var(--text-xs); height: 1.7rem; justify-content: center; min-width: 1.7rem; padding-inline: var(--space-2); }
.model-search { align-items: center; background: var(--mineral-950); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--mineral-400); display: flex; gap: var(--space-2); margin: 0 var(--space-3) var(--space-2); padding-inline: var(--space-3); }.model-search:focus-within { border-color: var(--emerald-glow); color: var(--emerald-300); }.model-search input { background: transparent; border: 0; min-height: 2.5rem; min-width: 0; outline: 0; width: 100%; }.model-list { display: grid; gap: 2px; max-height: min(22rem, 48vh); overflow-y: auto; padding: var(--space-2); }.model-option { align-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); display: grid; gap: var(--space-1) var(--space-3); grid-template-columns: 2rem minmax(0, 1fr) auto; padding: var(--space-3); text-align: start; width: 100%; }.model-option:hover, .model-option:focus-visible { background: var(--mineral-750); border-color: var(--border-mid); }.model-option.is-selected { background: linear-gradient(105deg, var(--emerald-wash), transparent); border-color: var(--emerald-glow); }.model-glyph { align-items: center; background: var(--mineral-750); border: 1px solid var(--border-mid); border-radius: var(--radius-sm); color: var(--gold-300); display: flex; font-family: var(--font-mono); font-size: var(--text-xs); grid-row: 1 / 3; height: 2rem; justify-content: center; width: 2rem; }.model-option.is-selected .model-glyph { background: var(--emerald-wash); border-color: var(--emerald-glow); color: var(--emerald-300); }.model-name { direction: auto; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 550; overflow: hidden; text-align: start; text-overflow: ellipsis; unicode-bidi: plaintext; white-space: nowrap; }.model-description { color: var(--mineral-400); direction: auto; font-size: var(--text-xs); grid-column: 2 / 4; overflow: hidden; text-align: start; text-overflow: ellipsis; unicode-bidi: plaintext; white-space: nowrap; }.model-badge { background: var(--gold-wash); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); color: var(--gold-300); font-size: var(--text-xs); padding: 0.16rem var(--space-2); }.model-check { color: var(--emerald-300); font-size: var(--text-md); }.model-empty { color: var(--mineral-400); font-size: var(--text-sm); padding: var(--space-8) var(--space-4); text-align: center; }
.attachment-strip { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: var(--space-2); }.attachment { align-items: center; background: var(--mineral-800); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); display: flex; flex: none; gap: var(--space-2); max-width: 13rem; padding: var(--space-2); }.attachment img { border-radius: var(--radius-sm); height: 2.25rem; object-fit: cover; width: 2.25rem; }.attachment span { min-width: 0; }.attachment b { display: block; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-banner { align-items: center; background: var(--amber-wash); border: 1px solid var(--amber-border); border-radius: var(--radius-md); display: grid; gap: var(--space-3); grid-template-columns: auto 1fr auto auto; margin: 0 auto var(--space-3); max-width: 51rem; padding: var(--space-3); width: calc(100% - 3rem); }.approval-icon { align-items: center; background: var(--amber-400); border-radius: 50%; color: var(--mineral-1000); display: flex; font-weight: 700; height: 1.6rem; justify-content: center; width: 1.6rem; }
.detail-card { align-items: center; background: var(--mineral-950); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); display: flex; gap: var(--space-3); padding: var(--space-3); }.detail-list { background: var(--mineral-950); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; }.detail-list div { display: grid; gap: var(--space-2); padding: var(--space-3); }.detail-list div + div { border-block-start: 1px solid var(--border-soft); }.detail-list span { color: var(--mineral-400); font-size: var(--text-xs); }.detail-list code, .detail-list b { font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.live-label { align-items: center; color: var(--emerald-300); display: flex; font-size: var(--text-xs); gap: var(--space-2); }.live-label i { animation: pulse 2s infinite; background: var(--emerald-400); border-radius: 50%; height: 0.4rem; width: 0.4rem; }.activity-list { display: grid; gap: var(--space-2); margin-block-start: var(--space-3); }.activity-item { border-inline-start: 1px solid var(--emerald-glow); color: var(--mineral-300); font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }.activity-item b { color: var(--limestone-300); display: block; font-family: var(--font-mono); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.empty-mini { align-items: center; border: 1px dashed var(--border-mid); border-radius: var(--radius-lg); color: var(--mineral-400); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.modal-layer { inset: 0; position: fixed; z-index: 20; }.modal-backdrop { backdrop-filter: blur(12px); background: var(--overlay); inset: 0; position: absolute; }.modal-card { animation: modal-in var(--duration-base) var(--ease-out); background: var(--mineral-850); border: 1px solid var(--border-mid); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); inset-block-start: 50%; inset-inline-start: 50%; max-height: calc(100dvh - 2rem); max-width: 34rem; overflow-y: auto; padding: var(--space-6); position: absolute; transform: translate(50%, -50%); width: calc(100% - 2rem); }.modal-card header { align-items: center; display: grid; gap: var(--space-3); grid-template-columns: auto 1fr auto; }.modal-card > p { color: var(--mineral-300); line-height: 1.8; margin-block: var(--space-5); }.field { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); }.field span { color: var(--limestone-300); font-size: var(--text-xs); }.field input { background: var(--mineral-950); border: 1px solid var(--border-mid); border-radius: var(--radius-sm); min-height: 2.7rem; padding-inline: var(--space-3); }.command-card { align-items: center; background: var(--mineral-1000); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) auto; margin-block-start: var(--space-4); padding: var(--space-3); }.command-card > span { color: var(--mineral-400); font-size: var(--text-xs); grid-column: 1 / -1; }.command-card code { color: var(--emerald-300); direction: ltr; font-size: var(--text-xs); overflow-x: auto; text-align: left; }.notice { align-items: flex-start; background: var(--emerald-wash); border-radius: var(--radius-lg); color: var(--emerald-300); display: flex; gap: var(--space-3); margin-block-start: var(--space-4); padding: var(--space-3); }.notice p { color: var(--limestone-300); font-size: var(--text-xs); line-height: 1.7; }.modal-card footer { display: flex; gap: var(--space-2); justify-content: flex-end; margin-block-start: var(--space-6); }
.toast-region { display: grid; gap: var(--space-2); inset-block-end: var(--space-5); inset-inline-end: var(--space-5); position: fixed; z-index: 30; }.toast { animation: toast-in var(--duration-base) var(--ease-out); background: var(--mineral-750); border: 1px solid var(--border-mid); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); color: var(--limestone-200); font-size: var(--text-sm); max-width: 22rem; padding: var(--space-3) var(--space-4); }
@keyframes pulse { 50% { box-shadow: 0 0 0 0.4rem transparent; opacity: 0.55; } 0%, 100% { box-shadow: 0 0 0 0 var(--emerald-glow); } } @keyframes blink { 50% { opacity: 0; } } @keyframes modal-in { from { opacity: 0; transform: translate(50%, -46%) scale(0.98); } } @keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-3)); } } @keyframes picker-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.985); } }
.model-provider-heading { color: var(--gold-300); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; padding: var(--space-3) var(--space-3) var(--space-1); }

.app-shell {
  transition: gap var(--duration-fast) var(--ease-out);
}

.global-header {
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}

.sessions-panel,
.inspector,
.nav-rail,
.workspace {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-glass-soft) 88%, transparent), var(--mineral-900));
}

.sessions-list,
.activity-list,
.model-list,
.attachment-strip,
.conversation {
  scrollbar-width: thin;
  scrollbar-color: var(--mineral-500, var(--mineral-700)) transparent;
}

.session-item {
  gap: var(--space-2);
  position: relative;
}

.session-item::after {
  content: "";
  inset-block-end: 0;
  inset-inline: var(--space-3);
  height: 1px;
  opacity: 0;
  position: absolute;
}

.session-item:hover {
  /* The interface is RTL throughout, so inward is towards the start edge. */
  transform: translate(calc(var(--space-1) * -1), 0);
}

.session-item.is-active {
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}

.composer {
  background: linear-gradient(180deg, var(--mineral-800), var(--mineral-850));
  border: 1px solid var(--border-mid);
}

.composer-toolbar {
  align-items: flex-start;
  column-gap: var(--space-2);
  row-gap: var(--space-2);
}

.composer::before {
  inset-inline: clamp(1.2rem, 5vw, 2.5rem) clamp(46%, 65vw, 64%);
}

.conversation {
  line-height: 1.78;
}

.message-body {
  font-size: var(--text-sm);
}

.message-head {
  margin-bottom: 0.15rem;
}

.message.user .message-body {
  background: linear-gradient(160deg, color-mix(in srgb, var(--mineral-700) 72%, transparent), var(--mineral-800));
  border: 1px solid color-mix(in srgb, var(--emerald-wash) 62%, var(--border-soft));
  box-shadow: inset 0 1px 0 var(--highlight-soft);
}

.message.assistant .message-body {
  background: color-mix(in srgb, var(--mineral-950) 76%, transparent);
  border: 1px solid var(--border-soft);
}

.message-body pre {
  position: relative;
}

.message-body pre code {
  display: block;
}

.message-body .code-copy {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--limestone-300);
  inset-inline-end: var(--space-3);
  inset-block-start: var(--space-2);
  padding: 0.28rem 0.55rem;
  position: absolute;
  background: var(--mineral-950);
  box-shadow: var(--shadow-soft);
}

.message-body .code-copy:hover { color: var(--limestone-100); }

.code-block-header {
  border-block-end: 1px solid var(--border-soft);
  color: var(--mineral-300);
  display: flex;
  font-size: var(--text-xs);
  justify-content: space-between;
  margin-block-end: var(--space-2);
  padding-block-end: var(--space-2);
}

.code-block-header i {
  color: var(--emerald-300);
  letter-spacing: 0.04em;
}

.code-block code {
  display: block;
  white-space: pre;
}

.select-button,
.new-thread-button,
.button,
.icon-button,
.chip,
.rail-button,
.session-item {
  transition-duration: var(--duration-fast);
}

.modal-card {
  backdrop-filter: blur(16px);
}

.toast {
  backdrop-filter: blur(10px);
}

.code-only.is-hidden {
  display: none !important;
}

/* Keep each natural-language paragraph independent from surrounding code. */
.message-body, #composerInput { unicode-bidi: plaintext; text-align: start; }
.message-body code { unicode-bidi: isolate; }
.send-button:disabled { background: var(--mineral-600); cursor: wait; transform: none; box-shadow: none; }
.usage-card small { display: block; margin-block-start: var(--space-2); }
.usage-card progress { width: 100%; accent-color: var(--emerald-400); margin-block-start: var(--space-2); }

#approvalDetails { white-space: pre-wrap; unicode-bidi: plaintext; overflow-wrap: anywhere; max-height: 12rem; overflow-y: auto; }

.app-update { display: grid; gap: var(--space-3); max-inline-size: min(22rem, calc(100vw - 3rem)); }
.app-update .button { min-block-size: var(--touch-target); }

/* The back gesture's cue: a round arrow that slides in from the left edge as
   the finger travels, and settles into the brand color once a release would
   go back. Created on first use by back-swipe.js. */
.back-swipe-cue { align-items: center; background: var(--mineral-800); border: 1px solid var(--border-mid); border-radius: var(--radius-pill); block-size: 2.5rem; color: var(--limestone-100); display: flex; inline-size: 2.5rem; inset-block-start: 50%; inset-inline-end: var(--space-2); justify-content: center; opacity: var(--back-progress, 0); pointer-events: none; position: fixed; transform: translate(calc((1 - var(--back-progress, 0)) * -3rem), -50%); z-index: 1000; }
.back-swipe-cue::before { content: "→"; font-size: var(--text-lg); line-height: 1; }
.back-swipe-cue.is-ready { background: var(--emerald-600); border-color: var(--emerald-400); }