:root {
  color-scheme: dark;
  --keyboard-inset: 0px;
  --canvas: #0b0d10;
  --surface: #111418;
  --surface-raised: #171b20;
  --surface-hover: #1d2228;
  --surface-active: #222932;
  --border: #2a3038;
  --border-strong: #3b4450;
  --text: #f1f3f5;
  --text-muted: #9aa4b2;
  --text-subtle: #697381;
  --reasoning-flow-muted: #9aa4b2;
  --reasoning-flow-strong: #f1f3f5;
  --primary: #5b8cff;
  --primary-hover: #78a1ff;
  --primary-soft: rgba(91, 140, 255, 0.13);
  --primary-line: rgba(91, 140, 255, 0.42);
  --success: #3cc982;
  --success-soft: rgba(60, 201, 130, 0.12);
  --warning: #e5aa45;
  --warning-soft: rgba(229, 170, 69, 0.13);
  --danger: #f07178;
  --danger-soft: rgba(240, 113, 120, 0.12);
  --info: #50b8d8;
  --thinking: #a78bfa;
  --thinking-soft: rgba(167, 139, 250, 0.1);
  --user-bg: #315fd6;
  --code-bg: #080a0d;
  --sidebar-width: 316px;
  --side-chat-width: 420px;
  --header-height: 60px;
  --conversation-width: 760px;
  --composer-width: var(--conversation-width);
  --conversation-gutter: clamp(16px, 4vw, 48px);
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-lg: 0 22px 70px rgba(0, 0, 0, 0.34);
  --skin-canvas-wash: rgba(7, 9, 13, 0.3);
  --skin-content-wash: rgba(7, 9, 13, 0.38);
  --skin-surface: rgba(17, 20, 24, 0.76);
  --skin-surface-soft: rgba(17, 20, 24, 0.58);
  --skin-surface-strong: rgba(17, 20, 24, 0.88);
  --skin-accent-glow: rgba(91, 140, 255, 0.2);
  --skin-art-position: 72% 45%;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

body[data-theme="light"] {
  color-scheme: light;
  --canvas: #f3f5f7;
  --surface: #ffffff;
  --surface-raised: #f8f9fb;
  --surface-hover: #eef1f4;
  --surface-active: #e8edf5;
  --border: #dfe3e8;
  --border-strong: #c6ccd4;
  --text: #1d232b;
  --text-muted: #66717f;
  --text-subtle: #8b95a1;
  --reasoning-flow-muted: #b0b0b1;
  --reasoning-flow-strong: #808182;
  --primary: #2f67d8;
  --primary-hover: #2458bf;
  --primary-soft: rgba(47, 103, 216, 0.1);
  --primary-line: rgba(47, 103, 216, 0.36);
  --success: #20895a;
  --success-soft: rgba(32, 137, 90, 0.1);
  --warning: #a96b12;
  --warning-soft: rgba(169, 107, 18, 0.1);
  --danger: #c94b55;
  --danger-soft: rgba(201, 75, 85, 0.09);
  --info: #267e9c;
  --thinking: #7157bd;
  --thinking-soft: rgba(113, 87, 189, 0.09);
  --user-bg: #3267d5;
  --code-bg: #f0f2f5;
  --shadow-lg: 0 20px 54px rgba(33, 40, 50, 0.14);
  --skin-canvas-wash: rgba(245, 249, 255, 0.12);
  --skin-content-wash: rgba(245, 249, 255, 0.24);
  --skin-surface: rgba(244, 248, 255, 0.74);
  --skin-surface-soft: rgba(244, 248, 255, 0.58);
  --skin-surface-strong: rgba(255, 255, 255, 0.86);
  --skin-accent-glow: rgba(47, 103, 216, 0.2);
  --skin-art-position: 72% 45%;
}

html {
  background: var(--canvas);
}

body[data-theme="light"],
body[data-theme="dark"] {
  background: var(--canvas);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

/* Ambient light particles + mouse-following light rays. */
#fxCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
}

body[data-chat-bg="custom"] #fxCanvas,
body[data-chat-bg="skin"] #fxCanvas {
  opacity: 0.28;
}

* {
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--border-strong);
  background-clip: padding-box;
}

button,
input,
textarea,
select,
summary {
  letter-spacing: 0;
}

button,
summary,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select,
a,
summary {
  outline: none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
summary:focus-visible {
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--primary);
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
}

.lucide {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

.skipLink {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  transition: transform 160ms var(--ease);
}

.skipLink:focus {
  transform: translateY(0);
}

body .login {
  min-height: 100dvh;
  background: var(--canvas);
}

body[data-theme] .card {
  width: min(400px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  backdrop-filter: none;
}

.card .brand {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: 0;
}

.card .sub {
  margin: 7px 0 24px;
  color: var(--text-muted);
  font-size: 13px;
}

.field {
  gap: 6px;
}

.field label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body[data-theme] .field input,
body[data-theme] .field textarea,
body[data-theme] .field select,
body[data-theme] .requestField input,
body[data-theme] .requestField select,
body[data-theme] .requestField textarea {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  padding: 9px 11px;
}

.field input:hover,
.field textarea:hover,
.field select:hover,
.requestField input:hover,
.requestField select:hover,
.requestField textarea:hover {
  border-color: var(--border-strong);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.requestField input:focus,
.requestField select:focus,
.requestField textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

body .primary,
body .miniPrimary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #ffffff;
  font-weight: 720;
  transition: background 160ms var(--ease), opacity 160ms var(--ease);
}

body .primary:hover,
body .miniPrimary:hover {
  background: var(--primary-hover);
}

body .app {
  position: relative;
  height: 100dvh;
  background: var(--canvas);
}

.sidebarResizeHandle {
  display: none;
}

body .side {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  container-name: sidebar;
  container-type: inline-size;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 14px 12px 12px;
  box-shadow: none;
}

body .side,
body .history {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body .side::-webkit-scrollbar,
body .history::-webkit-scrollbar {
  display: none;
}

.sideBrand {
  display: grid;
  gap: 9px;
  padding: 2px 2px 6px;
}

.brandRow {
  min-height: 38px;
  gap: 10px;
}

.logo {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
}

.logoMark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
}

.logoMark .lucide {
  width: 18px;
  height: 18px;
}

.logoCopy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .themeToggle,
body .historyUnreadToggle,
body .menuBtn,
body .iconButton,
body .attachBtn,
body .copyMsg,
body .rollbackMsg,
body .histRename,
body .histDelete,
body .attachmentChip button {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}

body .themeToggle:hover,
body .historyUnreadToggle:hover,
body .menuBtn:hover,
body .iconButton:hover,
body .attachBtn:hover,
body .copyMsg:hover,
body .rollbackMsg:hover,
body .histRename:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

body .themeToggle {
  width: 36px;
  height: 36px;
}

.brandControls {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

body .historyUnreadToggle,
body .themeToggle {
  position: relative;
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-muted);
  padding: 0;
  box-shadow: none;
}

body .historyUnreadToggle:hover,
body .historyUnreadToggle:focus-visible,
body .historyUnreadToggle[aria-expanded="true"],
body .themeToggle:hover,
body .themeToggle:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

body .historyUnreadToggle:focus-visible,
body .themeToggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

body .historyUnreadToggle .lucide,
body .themeToggle .lucide {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
}

body .historyUnreadToggle.hasUnread {
  color: var(--text);
}

body[data-theme="light"] .historyUnreadToggle,
body[data-theme="light"] .themeToggle {
  background: #eef3f8;
}

.historyUnreadBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 1;
  display: inline-flex;
  min-width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  pointer-events: none;
}

.historyUnreadBadge[hidden] {
  display: none !important;
}

.historyUnreadPopover {
  position: absolute;
  z-index: 95;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  width: min(248px, calc(100vw - 28px));
  max-height: min(320px, 56vh);
  gap: 2px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 5px;
  box-shadow: var(--shadow-lg);
}

.historyUnreadPopover[hidden] {
  display: none !important;
}

.historyUnreadHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding: 4px 8px 2px;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 620;
  letter-spacing: 0.02em;
  text-transform: none;
}

.historyUnreadHead strong {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 680;
}

.historyUnreadList {
  display: grid;
  gap: 2px;
}

.historyUnreadEmpty {
  padding: 12px 10px;
  color: var(--text-subtle);
  font-size: 12px;
  text-align: center;
}

.historyUnreadItem {
  display: grid;
  width: 100%;
  min-height: 40px;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
}

.historyUnreadItem:hover,
.historyUnreadItem:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.historyUnreadItemCopy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.historyUnreadItemCopy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
}

.historyUnreadItemCopy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 11px;
}

.historyUnreadItem .lucide {
  width: 14px;
  height: 14px;
  color: var(--text-subtle);
}

body .pill {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 720;
}

.pill .lucide {
  width: 12px;
  height: 12px;
}

.sideActions {
  position: relative;
  display: grid;
  grid-template-columns: minmax(112px, 1fr) repeat(4, 36px);
  gap: 6px;
}

.sideActions .miniPrimary {
  display: inline-flex;
  min-width: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  min-height: 36px;
  padding: 0 10px;
  font-size: 13px;
  white-space: nowrap;
}

.sideActions .miniPrimary .lucide {
  width: 14px;
  height: 14px;
}

.sideActions .miniPrimary .buttonLabel {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

body .archiveToggle,
body .automationToggle,
body .subQuotaToggle,
body .settingsToggle {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  font-weight: 700;
}

body .archiveToggle:hover,
body .archiveToggle.active,
body .automationToggle:hover,
body .automationToggle.active,
body .subQuotaToggle:hover,
body .subQuotaToggle[aria-expanded="true"],
body .settingsToggle:hover,
body .settingsToggle[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.archiveToggle .buttonLabel,
.automationToggle .buttonLabel,
.subQuotaToggle .buttonLabel,
.settingsToggle .buttonLabel {
  display: none;
}

.archiveToggle .lucide,
.automationToggle .lucide,
.subQuotaToggle .lucide,
.settingsToggle .lucide {
  width: 16px;
  height: 16px;
}

.subQuotaPopover {
  position: absolute;
  z-index: 45;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(320px, 100%);
  max-height: none;
  gap: 12px;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 14px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
}

.subQuotaPopover:not(.hidden) {
  animation: subQuotaPopoverIn 140ms var(--ease) both;
}

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

.subQuotaHead {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.subQuotaTitle {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
}

body .subQuotaClose {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

body .subQuotaClose:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.subQuotaClose .lucide {
  width: 15px;
  height: 15px;
}

.subQuotaStatusRow {
  display: flex;
  min-width: 0;
  min-height: 18px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.subQuotaStatus {
  min-width: 0;
  min-height: 18px;
  flex: 1 1 auto;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.subQuotaPrimarySource {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

.subQuotaStatus:empty {
  display: none;
}

.subQuotaStatus[data-state="error"],
.subQuotaError {
  color: var(--danger);
}

.subQuotaError {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
}

.subQuotaEmpty {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.subQuotaContent {
  display: grid;
  min-width: 0;
  gap: 12px;
  overflow: visible;
}

.subQuotaSource {
  display: grid;
  min-width: 0;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.subQuotaSource:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.subQuotaPlan {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.subQuotaPlan > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaCreditsGrid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subQuotaCredits {
  display: grid;
  min-width: 0;
  align-content: end;
  gap: 2px;
  padding: 2px 12px 2px 0;
}

.subQuotaCredits + .subQuotaCredits {
  border-left: 1px solid var(--border);
  padding: 2px 0 2px 12px;
  text-align: right;
}

.subQuotaCredits > span {
  color: var(--text-muted);
  font-size: 10px;
}

.subQuotaCredits > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaCodexPreviewProgress {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.subQuotaCodexPreviewProgressHead {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.subQuotaCodexPreviewProgress .subQuotaProgress {
  width: 100%;
}

.subQuotaExpiry {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: 11px;
}

.subQuotaExpiry > :first-child {
  flex: 0 0 auto;
}

.subQuotaExpiry > :last-child {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaWindow {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.subQuotaWindowHead {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.subQuotaWindowHead > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaWindowHeadInline {
  justify-content: flex-start;
  gap: 6px;
}

.subQuotaWindowHeadInline .subQuotaInlineStatus {
  flex: 0 0 auto;
  margin-left: auto;
}

.subQuotaProgress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-active);
}

.subQuotaProgressBar {
  display: block;
  width: var(--sub-quota-percent, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 180ms var(--ease);
}

.subQuotaProgressBar[data-level="normal"],
.subQuotaProgressBar[data-level="available"] {
  background: #22c55e;
}

.subQuotaProgressBar[data-level="warning"] {
  background: #f97316;
}

.subQuotaProgressBar[data-level="exhausted"] {
  background: var(--danger);
}

.subQuotaWindowReset {
  color: var(--text-subtle);
  font-size: 10px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.subQuotaMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--text-subtle);
  font-size: 10px;
  line-height: 1.4;
}

.subQuotaMetaDeepSeek {
  flex-wrap: nowrap;
  align-items: baseline;
}

.subQuotaMetaDeepSeek > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaMetaDeepSeek .subQuotaMetaTrailing {
  flex: 0 0 auto;
  margin-left: auto;
}

.subQuotaRefresh {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 650;
}

.subQuotaRefresh:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.subQuotaRefresh .lucide {
  width: 14px;
  height: 14px;
}

.subQuotaActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body .subQuotaReset,
body .subQuotaSync {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 650;
}

body .subQuotaReset:hover,
body .subQuotaSync:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

body .subQuotaReset:disabled,
body .subQuotaSync:disabled {
  opacity: 0.65;
  cursor: wait;
}

.subQuotaReset .lucide,
.subQuotaSync .lucide {
  width: 14px;
  height: 14px;
}

.subQuotaActionProgress {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.subQuotaActionProgress[data-state="loading"] {
  color: var(--text-muted);
}

.subQuotaActionProgress[data-state="success"] {
  color: var(--success, #16a34a);
}

.subQuotaActionProgress[data-state="error"] {
  color: var(--danger);
}

.grok2ApiConsoleOverlay {
  z-index: 92;
}

.grok2ApiConsoleDialog {
  display: grid;
  width: min(860px, calc(100vw - 32px));
  max-height: min(84dvh, 760px);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.grok2ApiConsoleHeadActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

body .grok2ApiConsoleIconButton {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 0;
}

body .grok2ApiConsoleIconButton:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

body .grok2ApiConsoleIconButton:disabled {
  cursor: wait;
  opacity: 0.62;
}

.grok2ApiConsoleIconButton .lucide {
  width: 15px;
  height: 15px;
}

.grok2ApiConsoleBody {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 16px 18px 18px;
}

.grok2ApiConsoleStatus {
  min-height: 16px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.grok2ApiConsoleStatus[data-state="error"] {
  color: var(--danger);
}

.grok2ApiConsoleOutput {
  min-height: 260px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0d1218;
  color: #d7e3ee;
  padding: 12px;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.grok2ApiConsoleOutput:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.subQuotaSettingsTitleWrap h2 .lucide {
  width: 18px;
  height: 18px;
}

.subQuotaSettingsDescription {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.5;
}

.subQuotaSettingsDescription .lucide {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--success);
}

.subQuotaSettingsToolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-raised));
  padding: 10px 11px;
}

.subQuotaSettingsToolbarCopy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.subQuotaSettingsToolbarTitle {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaSettingsToolbarHint {
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaSettingsToolbarActions {
  display: flex;
  min-width: 0;
  flex: none;
  align-items: center;
  gap: 8px;
}

.subQuotaAddSourceType,
.subQuotaSourceTypeSelect {
  min-width: 132px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
}

.subQuotaAddSourceType:focus-visible,
.subQuotaSourceTypeSelect:focus-visible,
.subQuotaManualSourceNameInput:focus-visible,
.subQuotaSettingsSourceNameInput:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.subQuotaAddSourceButton {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: 7px;
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.subQuotaAddSourceButton:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
}

.subQuotaAddSourceButton:disabled {
  opacity: 0.48;
  cursor: default;
}

.subQuotaAddSourceButton .lucide {
  width: 14px;
  height: 14px;
}

.subQuotaSettingsForm {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.subQuotaSettingsSourceList {
  display: grid;
  min-height: 0;
  min-width: 0;
  gap: 10px;
}

.subQuotaSettingsForm .field {
  min-width: 0;
  margin: 0;
}

.subQuotaSettingsForm .field > span {
  font-size: 11px;
  font-weight: 650;
}

.subQuotaSettingsSource {
  display: grid;
  min-width: 0;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 13px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease), opacity 140ms var(--ease);
}

.subQuotaSettingsSource.isHidden {
  border-style: dashed;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.subQuotaSettingsSourceHead {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subQuotaSettingsSourceIdentity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.subQuotaSettingsSourceIcon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--primary);
}

.subQuotaSettingsSourceIcon .lucide {
  width: 16px;
  height: 16px;
}

.subQuotaSettingsSourceCopy {
  min-width: 0;
}

.subQuotaSettingsSourceTitleRow {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.subQuotaSettingsSourceTitle {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaSettingsSourceState {
  flex: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-subtle);
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 680;
  line-height: 1.45;
}

.subQuotaSettingsSourceState[data-state="ready"],
.subQuotaSettingsSourceState[data-state="builtin"] {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.subQuotaSettingsSourceState[data-state="partial"] {
  border-color: color-mix(in srgb, var(--thinking) 35%, var(--border));
  color: var(--thinking);
}

.subQuotaSettingsSourceDetail {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--text-subtle);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaSettingsSourceActions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.subQuotaVisibilityToggle {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  padding: 3px 2px 3px 5px;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}

.subQuotaVisibilityToggle:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.subQuotaVisibilityToggle:focus-visible,
.subQuotaMoveButton:focus-visible,
.subQuotaCodexRefresh:focus-visible,
.subQuotaSourceRemoveButton:focus-visible,
.subQuotaRemoveButton:focus-visible,
.subQuotaAddSourceButton:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.subQuotaVisibilityTrack {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex: 0 0 32px;
  border-radius: 999px;
  background: var(--surface-active);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background 140ms var(--ease), box-shadow 140ms var(--ease);
}

.subQuotaVisibilityThumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-subtle);
  transition: transform 140ms var(--ease), background 140ms var(--ease);
}

.subQuotaVisibilityToggle[aria-checked="true"] .subQuotaVisibilityTrack {
  background: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 72%, #000);
}

.subQuotaVisibilityToggle[aria-checked="true"] .subQuotaVisibilityThumb {
  background: #fff;
  transform: translateX(14px);
}

.subQuotaMoveButtons {
  display: inline-flex;
  flex: none;
  gap: 3px;
}

.subQuotaMoveButton,
.subQuotaCodexRefresh,
.subQuotaSourceRemoveButton,
.subQuotaRemoveButton {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-subtle);
  padding: 0;
  cursor: pointer;
}

.subQuotaMoveButton:hover:not(:disabled),
.subQuotaCodexRefresh:hover:not(:disabled),
.subQuotaSourceRemoveButton:hover:not(:disabled),
.subQuotaRemoveButton:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.subQuotaSourceRemoveButton,
.subQuotaRemoveButton {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  color: var(--danger);
}

.subQuotaSourceRemoveButton:hover:not(:disabled),
.subQuotaRemoveButton:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--border-strong));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-hover));
  color: var(--danger);
}

.subQuotaMoveButton:disabled,
.subQuotaCodexRefresh:disabled,
.subQuotaSourceRemoveButton:disabled,
.subQuotaRemoveButton:disabled {
  opacity: 0.4;
  cursor: default;
}

.subQuotaMoveButton .lucide,
.subQuotaCodexRefresh .lucide,
.subQuotaSourceRemoveButton .lucide,
.subQuotaRemoveButton .lucide {
  width: 14px;
  height: 14px;
}

.subQuotaSettingsFields {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 10px;
}

.subQuotaCredentialField {
  align-content: start;
}

.subQuotaCredentialHeader,
.subQuotaCredentialHeaderActions {
  display: flex;
  min-width: 0;
  align-items: center;
}

.subQuotaCredentialHeader {
  justify-content: space-between;
  gap: 8px;
}

.subQuotaCredentialHeader > span {
  min-width: 0;
  font-size: 11px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.subQuotaCredentialHeaderActions {
  flex: none;
  gap: 6px;
}

.subQuotaCredentialCount {
  color: var(--text-subtle);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.subQuotaCredentialAdd,
.subQuotaCredentialRemove {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-subtle);
  padding: 0;
}

.subQuotaCredentialAdd:hover:not(:disabled),
.subQuotaCredentialRemove:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.subQuotaCredentialRemove {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
  color: var(--danger);
}

.subQuotaCredentialAdd:disabled {
  opacity: 0.4;
  cursor: default;
}

.subQuotaCredentialAdd:focus-visible,
.subQuotaCredentialRemove:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.subQuotaCredentialAdd .lucide,
.subQuotaCredentialRemove .lucide {
  width: 14px;
  height: 14px;
}

.subQuotaCredentialList {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.subQuotaCredentialRow {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.subQuotaCredentialRowLabel {
  min-width: 40px;
  max-width: 72px;
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaCredentialRow input {
  min-width: 0;
}

.subQuotaCredentialRow input::placeholder {
  font-size: 12px;
}

.subQuotaCredentialHint {
  min-width: 0;
  color: var(--text-subtle);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.subQuotaManualSourceFields {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 10px;
}

.subQuotaManualSourceField,
.subQuotaSettingsSourceNameField {
  min-width: 0;
  margin: 0;
}

.subQuotaManualSourceNameInput,
.subQuotaSettingsSourceNameInput {
  width: 100%;
  min-width: 0;
}

.subQuotaManualSourceNameInput::placeholder,
.subQuotaSettingsSourceNameInput::placeholder {
  color: var(--text-subtle);
  opacity: 0.8;
}

.subQuotaOpenAiStatus,
.subQuotaOpenAIStatus {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 10px;
}

.subQuotaOpenAiStatusIcon,
.subQuotaOpenAIStatusIcon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--primary);
}

.subQuotaOpenAiStatusIcon .lucide,
.subQuotaOpenAIStatusIcon .lucide {
  width: 15px;
  height: 15px;
}

.subQuotaOpenAiStatusCopy,
.subQuotaOpenAIStatusCopy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.subQuotaOpenAiStatusTitle,
.subQuotaOpenAIStatusTitle {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaOpenAiStatusMessage,
.subQuotaOpenAIStatusMessage {
  min-width: 0;
  color: var(--text-subtle);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.subQuotaOpenAiStatus[data-state="loading"],
.subQuotaOpenAIStatus[data-state="loading"] {
  border-color: color-mix(in srgb, var(--thinking) 38%, var(--border));
}

.subQuotaOpenAiStatus[data-state="success"],
.subQuotaOpenAIStatus[data-state="success"] {
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}

.subQuotaOpenAiStatus[data-state="error"],
.subQuotaOpenAIStatus[data-state="error"] {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.subQuotaSource[data-provider="openai-compatible"] .subQuotaPlan,
.subQuotaSource[data-provider="openai"] .subQuotaPlan {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.subQuotaCredentialHint {
  color: var(--text-subtle);
  font-size: 10px;
  line-height: 1.4;
}

.subQuotaSettingsBuiltinSource {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}

.subQuotaCodexSummary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.subQuotaCodexBalances {
  display: grid;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 320px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subQuotaCodexBalance {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.subQuotaCodexBalance + .subQuotaCodexBalance {
  border-left: 1px solid var(--border);
  padding-left: 12px;
}

.subQuotaCodexBalance > span {
  color: var(--text-muted);
  font-size: 10px;
}

.subQuotaCodexBalance > strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaCodexProgress {
  min-width: 120px;
  flex: 1 1 180px;
}

.subQuotaCodexProgress .subQuotaProgress {
  width: 100%;
}

.subQuotaCodexMeta {
  min-width: 0;
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subQuotaCodexMeta[data-state="success"] {
  color: var(--success);
}

.subQuotaCodexMeta[data-state="error"] {
  color: var(--danger);
}


.subQuotaSettingsFooter {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.subQuotaSettingsSubmit {
  width: max-content;
  min-width: 126px;
  flex: none;
}

.subQuotaSettingsStatus {
  min-width: 0;
  min-height: 18px;
  margin: 0;
  overflow-wrap: anywhere;
}

.subQuotaSettingsStatus.success {
  color: var(--success);
}

.subQuotaSettingsDialog {
  display: flex;
  width: min(660px, calc(100vw - 32px));
  max-height: min(88vh, 780px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.subQuotaSettingsBody {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 18px;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior-x: none;
}


@media (hover: hover) and (pointer: fine) {
  body .msg.assistant:hover > .msgActions,
  body .msg.assistant:focus-within > .msgActions,
  body .msg.user:hover .msgActions,
  body .msg.user:focus-within .msgActions,
  .msg:hover .msgActions,
  .msg:focus-within .msgActions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 820px) {
  .subQuotaPopover {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(300px, calc(100vw - 24px));
    max-height: min(61dvh, 560px);
    gap: 8px;
    overflow: hidden;
    padding: 10px;
    border-radius: 14px;
  }

  .subQuotaContent {
    min-height: 0;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .subQuotaContent::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .subQuotaSource {
    gap: 8px;
    padding-bottom: 10px;
  }

  .subQuotaHead {
    min-height: 24px;
    padding-bottom: 6px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .subQuotaPopover:not(.hidden) {
    animation: none;
  }
}

@container sidebar (max-width: 280px) {
  .sideActions {
    grid-template-columns: repeat(5, 36px);
    justify-content: space-between;
  }

  .sideActions .miniPrimary {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }

  .sideActions .miniPrimary .buttonLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.archiveView {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overflow-x: hidden;
  background: var(--canvas);
  overscroll-behavior: contain;
}

.archiveViewInner {
  width: min(1040px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(34px, 5vw, 68px) 0 64px;
}

.archiveViewHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 30px;
}

.archiveEyebrow {
  margin-bottom: 8px;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.archiveViewHeader h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.archiveViewHeader p {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.archiveDeleteAll,
.archiveRefresh {
  display: inline-flex;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 650;
}

.archiveDeleteAll {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  color: var(--danger);
}

.archiveDeleteAll:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.archiveRefresh:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.archiveDeleteAll:disabled,
.archiveRefresh:disabled {
  cursor: default;
  opacity: 0.45;
}

.archiveDeleteAll .lucide,
.archiveRefresh .lucide {
  width: 14px;
  height: 14px;
}

.archiveToolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 240px) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 11px;
}

.archiveSearch {
  display: grid;
  min-height: 38px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-subtle);
  padding: 0 11px;
}

.archiveSearch:focus-within {
  border-color: var(--primary-line);
  box-shadow: 0 0 0 2px var(--primary-soft);
  color: var(--text-muted);
}

.archiveSearch .lucide {
  width: 15px;
  height: 15px;
}

body[data-theme] .archiveSearch input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 0;
  box-shadow: none;
  font-size: 13px;
}

.archiveProjectFilter {
  display: grid;
  min-width: 0;
  gap: 5px;
  overflow: hidden;
}

.archiveProjectFilter > span {
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 650;
}

body[data-theme] .archiveProjectFilter select {
  width: 100%;
  max-width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 7px 30px 7px 10px;
  font-size: 12px;
}

.archiveStatus {
  min-height: 22px;
  margin-bottom: 18px;
  color: var(--text-subtle);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.archiveList {
  display: grid;
  gap: 28px;
}

.archiveProject {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.archiveProjectHead {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding: 0 2px 10px;
}

.archiveProjectIdentity {
  display: grid;
  min-width: 0;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.archiveProjectIdentity > .lucide {
  width: 17px;
  height: 17px;
  color: var(--text-muted);
}

.archiveProjectIdentity h2,
.archiveProjectIdentity p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archiveProjectIdentity h2 {
  color: var(--text);
  font-size: 14px;
  font-weight: 680;
}

.archiveProjectIdentity p {
  margin-top: 2px;
  color: var(--text-subtle);
  font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.archiveProjectCount {
  flex: 0 0 auto;
  color: var(--text-subtle);
  font-size: 11px;
}

.archiveProjectTasks {
  display: grid;
}

.archiveTask {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  padding: 15px 2px;
  transition: background 140ms var(--ease), opacity 140ms var(--ease);
}

.archiveTask:hover {
  background: color-mix(in srgb, var(--surface-hover) 56%, transparent);
}

.archiveTask.working {
  opacity: 0.58;
}

.archiveTaskMain {
  min-width: 0;
  overflow: hidden;
}

.archiveTaskTitle {
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archiveTaskPreview {
  display: -webkit-box;
  max-width: 760px;
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.archiveTaskPreview[hidden] {
  display: none;
}

.archiveTaskMeta {
  display: flex;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
  color: var(--text-subtle);
  font-size: 10px;
}

.archiveTaskPath {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.archiveTaskPath .lucide {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

.archiveTaskPath span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archiveTaskTime {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.archiveTaskActions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.archiveTaskRestore,
.archiveTaskDelete {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

.archiveTaskRestore:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--surface-hover);
  color: var(--text);
}

.archiveTaskDelete:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}

.archiveTaskRestore:disabled,
.archiveTaskDelete:disabled {
  opacity: 0.45;
}

.archiveTaskRestore .lucide,
.archiveTaskDelete .lucide {
  width: 15px;
  height: 15px;
}

.archiveEmpty {
  display: grid;
  min-height: 280px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text-subtle);
  text-align: center;
}

.archiveEmpty .lucide {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}

.archiveEmpty strong {
  color: var(--text-muted);
  font-size: 14px;
}

.archiveEmpty span,
.archiveEmpty.loading {
  font-size: 12px;
}

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

.automationView {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overflow-x: hidden;
  background: var(--surface);
  overscroll-behavior: contain;
}

.automationViewInner {
  width: min(760px, calc(100% - 60px));
  margin: 0 auto;
  padding: 26px 0 48px;
}

.automationViewHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.automationViewHeader h1 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  font-weight: 480;
  letter-spacing: 0;
  line-height: 1.25;
}

.automationViewHeader p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.45;
}

.automationViewHeader .automationCreate {
  display: none;
}

.automationCreate,
.automationRefresh,
.automationPrimary,
.automationSecondary {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 680;
}

.automationCreate,
.automationPrimary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--canvas);
}

.automationCreate:hover,
.automationPrimary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.automationRefresh,
.automationSecondary {
  background: transparent;
  color: var(--text-muted);
}

.automationRefresh:hover:not(:disabled),
.automationSecondary:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.automationCreate .lucide,
.automationRefresh .lucide,
.automationPrimary .lucide {
  width: 15px;
  height: 15px;
}

.automationToolbar {
  display: block;
  margin-bottom: 0;
}

.automationSearch {
  display: grid;
  min-height: 34px;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-subtle);
  padding: 0 12px;
}

.automationSearch:focus-within {
  border-color: var(--border-strong);
  box-shadow: none;
}

.automationSearch .lucide {
  width: 14px;
  height: 14px;
}

body[data-theme] .automationSearch input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 7px 0;
  box-shadow: none;
  font-size: 13px;
}

.automationFilter,
.automationRefresh {
  display: none;
}

.automationTabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 27px 0 17px;
}

.automationTab {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  padding: 4px 11px;
  font-size: 14px;
  font-weight: 430;
  line-height: 20px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.automationTab:hover,
.automationTab:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
}

.automationTab.active {
  background: var(--surface-hover);
  color: var(--text);
  font-weight: 560;
}

.automationStatus {
  min-height: 18px;
  margin: 0 0 10px;
  color: var(--text-subtle);
  font-size: 12px;
  line-height: 18px;
}

.automationStatus:empty {
  display: none;
}

.automationList,
.automationRows,
.automationSuggestions {
  display: grid;
}

.automationRows {
  margin-bottom: 0;
}

.automationRow {
  display: grid;
  min-width: 0;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  padding: 8px 14px 20px;
  cursor: pointer;
  outline: 0;
  transition: background 150ms var(--ease);
}

.automationRow:hover {
  background: color-mix(in srgb, var(--surface-hover) 58%, transparent);
}

.automationRow.selected {
  background: var(--surface-hover);
}

.automationRow:focus-visible {
  box-shadow: inset 0 0 0 2px var(--primary-line);
}

.automationRowContent {
  min-width: 0;
}

.automationRowHeading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}

.automationRowHeading strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 590;
  line-height: 20px;
}

.automationRowSchedule {
  margin-top: 1px;
  color: var(--text-subtle);
  font-size: 13px;
  line-height: 19px;
}

.automationRowContent p {
  display: none;
}

.automationRowMeta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 7px;
  color: var(--text-subtle);
  font-size: 10px;
  display: none;
}

.automationRowMeta span:first-child {
  overflow: hidden;
  max-width: 520px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automationStateToggle {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 1.25px solid var(--text-subtle);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}

.automationStateToggle::after {
  content: none;
}

.automationStateToggle.active {
  border-color: var(--text-subtle);
  background: transparent;
}

.automationStateToggle.paused {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.automationStateToggle:hover,
.automationStateToggle:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.automationEmpty {
  min-height: 96px;
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  font-size: 12px;
}

.automationSuggestions {
  gap: 0;
  margin-top: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  padding-top: 16px;
}

.automationSuggestions h2 {
  margin: 0 8px 14px;
  color: var(--text);
  font-size: 16px;
  font-weight: 470;
}

.automationSuggestion {
  display: grid;
  width: 100%;
  min-height: 63px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 8px 14px;
  text-align: left;
}

.automationSuggestion:hover {
  background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
}

.automationSuggestion:focus-visible {
  outline: 2px solid var(--primary-line);
  outline-offset: -2px;
}

.automationSuggestion > .lucide:first-child {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--primary);
}

.automationSuggestion[data-accent="blue"] > .lucide:first-child { color: #1683ff; }
.automationSuggestion[data-accent="purple"] > .lucide:first-child { color: #8b5cf6; }
.automationSuggestion[data-accent="green"] > .lucide:first-child { color: #16a05d; }

.automationSuggestion > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.automationSuggestion strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 590;
  line-height: 20px;
}

.automationSuggestion strong small {
  margin-left: 8px;
  color: var(--text-subtle);
  font-size: 13px;
  font-weight: 430;
}

.automationSuggestion span span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.automationViewInner.detailOpen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(270px, 300px) minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

.automationViewInner.detailOpen .automationViewHeader {
  display: none;
}

.automationViewInner.detailOpen .automationToolbar {
  grid-column: 1;
  grid-row: 1;
  padding: 18px 16px 0;
}

.automationViewInner.detailOpen .automationTabs {
  grid-column: 1;
  grid-row: 2;
  margin: 16px 16px 10px;
}

.automationViewInner.detailOpen .automationStatus {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
  padding: 0 16px 8px;
}

.automationViewInner.detailOpen .automationList {
  min-height: 0;
  grid-column: 1;
  grid-row: 4;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 24px;
}

.automationViewInner.detailOpen .automationSuggestions {
  display: none;
}

.automationViewInner.detailOpen .automationRows {
  align-content: start;
}

.automationDetailPanel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  background: var(--surface);
  padding: 34px clamp(28px, 4vw, 64px) 28px;
  overscroll-behavior: contain;
}

.automationDetailHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.automationDetailHead > div:first-child {
  min-width: 0;
}

.automationDetailHead h2 {
  margin: 10px 0 0;
  color: var(--text);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 560;
  letter-spacing: -0.025em;
  line-height: 1.24;
}

.automationDetailState {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 18px;
}

.automationDetailState::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: '';
}

.automationDetailState.active {
  color: #22a06b;
}

.automationDetailState.paused {
  color: var(--text-subtle);
}

.automationDetailActions {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.automationDetailAction {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

.automationDetailAction:hover,
.automationDetailAction:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.automationDetailAction .lucide {
  width: 17px;
  height: 17px;
}

.automationDetailMenu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  min-width: 132px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-raised);
  padding: 5px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

.automationDetailMenuAction {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 7px 9px;
  font-size: 13px;
  text-align: left;
}

.automationDetailMenuAction:hover,
.automationDetailMenuAction:focus-visible {
  background: var(--surface-hover);
}

.automationDetailMenuAction .lucide {
  width: 15px;
  height: 15px;
}

.automationDetailPrompt {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 22px 24px;
  font-size: 16px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.automationDetailSection {
  margin-top: 28px;
}

.automationDetailSection h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.automationDetailRow {
  display: grid;
  min-height: 45px;
  grid-template-columns: minmax(90px, 0.34fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid var(--border);
  border-bottom: 0;
  background: color-mix(in srgb, var(--surface-raised) 70%, transparent);
  padding: 11px 14px;
}

.automationDetailRow:first-of-type {
  border-radius: 11px 11px 0 0;
}

.automationDetailRow:last-child {
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 11px 11px;
}

.automationDetailRow:only-of-type {
  border-radius: 11px;
}

.automationDetailRow span {
  color: var(--text-subtle);
  font-size: 13px;
}

.automationDetailRow strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 520;
  text-align: right;
}

.automationDetailFooter {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 32px;
}

.automationDetailOpen {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--text);
  border-radius: 10px;
  background: var(--text);
  color: var(--surface);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

.automationDetailOpen:hover:not(:disabled),
.automationDetailOpen:focus-visible:not(:disabled) {
  opacity: 0.84;
}

.automationDetailOpen:disabled {
  border-color: var(--border);
  background: var(--surface-hover);
  color: var(--text-subtle);
  cursor: default;
}

.automationDetailOpen .lucide {
  width: 15px;
  height: 15px;
}

.automationDetailClose {
  display: none;
}

.automationView.editorOpen {
  overflow: hidden;
}

.automationView.editorOpen > .automationViewInner {
  display: none;
}

.automationEditor {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: var(--surface);
  overscroll-behavior: contain;
}

.automationForm {
  min-height: 100%;
  background: var(--surface);
  padding: 0 0 48px;
}

.automationEditorBack,
.automationEditorSave {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 590;
}

.automationEditorBack {
  border: 0;
  background: transparent;
  color: var(--text-muted);
}

.automationEditorBack:hover,
.automationEditorBack:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
}

.automationEditorSave {
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--surface);
}

.automationEditorSave:hover:not(:disabled),
.automationEditorSave:focus-visible:not(:disabled) {
  opacity: 0.84;
}

.automationEditorSave:disabled {
  cursor: wait;
  opacity: 0.56;
}

.automationEditorBack .lucide,
.automationEditorSave .lucide {
  width: 15px;
  height: 15px;
}

.automationFormMessage {
  max-width: min(44vw, 520px);
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automationFormMessage:empty {
  display: none;
}

.automationFormMessage.error {
  color: var(--danger);
}

.automationFormBody {
  width: calc(100% - 32px);
  margin: 0 auto;
  padding-top: 7px;
}

.automationTitleField,
.automationPromptField {
  display: block;
}

body[data-theme] .automationTitleField input {
  width: 100%;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 2px 4px;
  box-shadow: none;
  font-size: 18px;
  font-weight: 480;
  line-height: 1.45;
}

body[data-theme] .automationTitleField input::placeholder,
body[data-theme] .automationPromptField textarea::placeholder {
  color: var(--text-subtle);
  opacity: 0.76;
}

body[data-theme] .automationTitleField input:focus {
  outline: 0;
  box-shadow: inset 0 -1px 0 var(--primary);
}

.automationPromptField {
  margin-top: 14px;
}

body[data-theme] .automationPromptField textarea {
  width: 100%;
  min-height: 66px;
  height: 66px;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  padding: 14px 16px;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.5;
}

body[data-theme] .automationPromptField textarea:focus {
  border-color: var(--primary);
  outline: 0;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.automationFormSection {
  margin-top: 31px;
}

.automationFormSection h3 {
  margin: 0 4px 8px;
  color: var(--text-subtle);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.automationSettingsGroup {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: transparent;
}

.automationSettingRow {
  position: relative;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(96px, 0.28fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 0 16px;
  color: var(--text);
  font-size: 14px;
  font-weight: 520;
  cursor: pointer;
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease);
}

.automationSettingRow:not(:last-child)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: color-mix(in srgb, var(--border) 76%, transparent);
  content: '';
}

.automationSettingRow:hover {
  margin-right: 0;
  margin-left: 0;
  padding-right: 16px;
  padding-left: 16px;
  background: color-mix(in srgb, var(--surface-hover) 54%, transparent);
}

.automationSettingRow:focus-within {
  box-shadow: inset 0 0 0 2px var(--primary-soft);
}

body[data-theme] .automationSettingRow select,
body[data-theme] .automationSettingRow input {
  width: min(100%, 560px);
  min-height: 42px;
  justify-self: end;
  border: 0;
  background-color: transparent;
  color: var(--text);
  padding: 7px 2px 7px 12px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 460;
  text-align: right;
}

.automationTimeControl {
  position: relative;
  min-width: 92px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  justify-self: end;
  color: var(--text);
  font-size: 14px;
  font-weight: 460;
}

.automationTimeControl .lucide {
  width: 14px;
  height: 14px;
  color: var(--text-subtle);
}

body[data-theme] .automationTimeControl input[type="time"] {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  max-width: none;
  cursor: pointer;
  opacity: 0;
}

body[data-theme] .automationSettingRow select {
  cursor: pointer;
  text-align-last: right;
}

body[data-theme] .automationSettingRow input:focus,
body[data-theme] .automationSettingRow select:focus {
  outline: 0;
}

.automationSettingRow.hidden {
  display: none;
}

.automationFormActions {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
}

.automationFormActions .automationFormMessage {
  margin-right: auto;
}

body .settingsPanel {
  display: grid;
  gap: 18px;
  border: 0;
  background: transparent;
  padding: 0;
}

.settings {
  gap: 10px;
}

body.modalOpen {
  overflow: hidden;
}

.settingsOverlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 31, 0.42);
  padding: 20px;
  backdrop-filter: blur(5px);
}

.archiveConfirmOverlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 31, 0.42);
  padding: 20px;
  backdrop-filter: blur(5px);
}

.archiveConfirmDialog {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.archiveConfirmHead {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.archiveConfirmIcon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
}

.archiveConfirmIcon .lucide {
  width: 17px;
  height: 17px;
}

.archiveConfirmHead h2 {
  margin: 1px 0 4px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0;
}

.archiveConfirmHead p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.archiveConfirmTarget {
  display: grid;
  gap: 3px;
  margin: 18px 0 0;
  border-block: 1px solid var(--border);
  padding: 11px 0;
}

.archiveConfirmTarget > span {
  color: var(--text-muted);
  font-size: 11px;
}

.archiveConfirmTarget strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.archiveConfirmStatus {
  min-height: 18px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.archiveConfirmStatus:empty {
  display: none;
}

.archiveConfirmActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.archiveConfirmCancel,
.archiveConfirmSubmit {
  display: inline-flex;
  min-width: 76px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 650;
}

.archiveConfirmCancel {
  background: var(--surface-raised);
  color: var(--text);
}

.archiveConfirmCancel:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.archiveConfirmSubmit {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

.archiveConfirmSubmit:hover:not(:disabled) {
  background: var(--primary-hover);
}

.archiveConfirmActions button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.archiveConfirmActions button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.archiveConfirmSubmit[aria-busy="true"] .lucide {
  animation: spin 0.9s linear infinite;
}

.projectRenameField {
  display: grid;
  gap: 7px;
  margin-top: 18px;
}

.projectRenameField > span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 680;
}

.projectRenameInput {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: var(--surface-raised);
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
}

.projectRenameInput:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.projectRenamePath {
  overflow: hidden;
  margin-top: 8px;
  color: var(--text-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settingsDialog {
  display: flex;
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 780px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.settingsDialogHead {
  display: flex;
  min-height: 54px;
  flex: 0 0 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 0 14px 0 18px;
}

.settingsDialogHead h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 720;
  letter-spacing: 0;
}

.settingsDialogClose {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

.settingsDialogClose:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.settingsDialogClose .lucide {
  width: 17px;
  height: 17px;
}

.settingsDialogBody {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 20px;
}

.settingsSection {
  min-width: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
}

.settingsSection:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.settingsSectionTitle {
  margin-bottom: 11px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.settingsDialog .settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.settingsDialog .settingsSectionTitle,
.settingsDialog .backgroundControls,
.settingsDialog #defaultMsg {
  grid-column: 1 / -1;
}

.settingsDialog .field:has(#cwd) {
  grid-column: 1 / -1;
}

.settingsDialog #defaultMsg:empty,
.passwordStatus:empty {
  display: none;
}

.settingsDialog .backgroundRow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.settingsDialog .dreamSkinGenerator {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.dreamSkinGeneratorHead,
.dreamSkinIdentity,
.dreamSkinActions {
  display: flex;
  align-items: center;
}

.dreamSkinGeneratorHead {
  justify-content: space-between;
  gap: 12px;
}

.dreamSkinIdentity {
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 740;
}

.dreamSkinIdentity .lucide {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.dreamSkinConceptSection {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.dreamSkinConceptHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
}

.dreamSkinConceptHead > :last-child {
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 520;
}

.dreamSkinConceptList {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.dreamSkinConcept {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 84px;
  grid-template-rows: 48px minmax(0, 1fr);
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 4px 5px 6px;
  text-align: left;
  transition: border-color 150ms var(--ease), background 150ms var(--ease), box-shadow 150ms var(--ease), color 150ms var(--ease);
}

.dreamSkinConcept:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.dreamSkinConcept.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--text);
}

.dreamSkinConcept:disabled {
  cursor: wait;
  opacity: 0.72;
}

.dreamSkinConcept:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.dreamSkinConceptThumb {
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  object-position: center;
}

.dreamSkinConceptLabel {
  display: grid;
  min-width: 0;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.dreamSkinConceptIndex {
  color: var(--text-subtle);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.dreamSkinConceptName {
  min-width: 0;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}

.dreamSkinConcept > .lucide {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 13px;
  height: 13px;
  color: var(--primary);
  opacity: 0;
}

.dreamSkinConcept.active > .lucide {
  opacity: 1;
}

.dreamSkinConceptPreview {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(220px, 42%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.dreamSkinConceptPreview.hidden {
  display: none;
}

.dreamSkinPreviewMedia {
  display: block;
  min-width: 0;
  height: 118px;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--canvas);
  padding: 0;
}

.dreamSkinPreviewMedia:hover img {
  transform: scale(1.015);
}

.dreamSkinPreviewMedia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms var(--ease);
}

.dreamSkinPreviewInfo {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
}

.dreamSkinPreviewInfo strong {
  color: var(--text);
  font-size: 12px;
}

.dreamSkinPreviewInfo p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dreamSkinPreviewMode {
  align-self: flex-start;
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}

.dreamSkinClose {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
}

.dreamSkinClose:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.dreamSkinIdeaField,
.dreamSkinOptions .field {
  min-width: 0;
  margin: 0;
}

.dreamSkinIdeaField textarea {
  min-height: 78px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  padding: 9px 10px;
  line-height: 1.5;
}

.dreamSkinOptions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dreamSkinReferenceButton {
  width: 100%;
}

.dreamSkinReferenceList {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
}

.dreamSkinReferenceChip {
  display: grid;
  min-width: 0;
  max-width: 220px;
  grid-template-columns: 30px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.dreamSkinReferenceChip img {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  object-fit: cover;
}

.dreamSkinReferenceChip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dreamSkinReferenceChip button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 5px;
  background: transparent;
  color: var(--text-subtle);
}

.dreamSkinReferenceChip button:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.dreamSkinGuide {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  padding-top: 8px;
  font-size: 11px;
}

.dreamSkinGuide summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 680;
}

.dreamSkinGuide summary::marker {
  content: '';
}

.dreamSkinGuide summary .lucide {
  width: 14px;
  height: 14px;
}

.dreamSkinGuideBody {
  padding: 7px 0 0 20px;
  line-height: 1.55;
}

.dreamSkinGuideBody ul {
  margin: 0 0 5px;
  padding-left: 14px;
}

.dreamSkinGuideBody a {
  color: var(--primary);
  text-underline-offset: 2px;
}

.dreamSkinActions {
  min-height: 38px;
  justify-content: flex-end;
  gap: 12px;
}

.dreamSkinStatus {
  min-width: 0;
  flex: 1;
  color: var(--text-muted);
  font-size: 11px;
  text-align: right;
}

.dreamSkinGenerate {
  width: auto;
  min-width: 148px;
}

.settingsDialog .providerBox {
  margin: 0;
  border-top: 0;
  padding-top: 0;
}

.passwordForm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}

.passwordForm .field {
  min-width: 0;
  margin: 0;
}

.passwordForm .field > span {
  color: var(--text-subtle);
  font-size: 10px;
}

.passwordForm input {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  padding: 8px 10px;
}

.passwordForm input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.passwordSubmit {
  grid-column: 1 / -1;
  width: max-content;
  min-width: 132px;
  justify-self: end;
}

.passwordStatus {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: -4px 0 0;
  text-align: right;
}

.passwordStatus.success {
  color: var(--success);
}

/* --- Settings dialog polish --- */
.settingsDialog {
  width: min(760px, calc(100vw - 24px));
  max-height: min(90vh, 860px);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%),
    var(--surface);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
  animation: settingsDialogIn 0.18s var(--ease);
}

@keyframes settingsDialogIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.settingsDialogHead {
  min-height: 68px;
  flex-basis: 68px;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-hover) 70%, transparent),
    color-mix(in srgb, var(--surface) 92%, transparent)
  );
}

.settingsDialogTitle {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.settingsDialogHead h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 760;
}

.settingsDialogHead h2 .lucide {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.settingsDialogHead p {
  margin: 0;
  color: var(--text-subtle);
  font-size: 12px;
  line-height: 1.45;
}

.settingsDialogClose {
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.settingsDialogClose:hover {
  border-color: var(--border);
  background: var(--surface-hover);
}

.settingsDialogBody {
  display: grid;
  gap: 14px;
  padding: 16px 16px 18px;
  background: color-mix(in srgb, var(--canvas) 35%, var(--surface));
}

.settingsPanelModern,
#settingsPanel.settingsPanelModern {
  display: grid;
  gap: 14px;
  background: transparent;
  border: 0;
  padding: 0;
}

.settingsDialog .settingsSection,
.settingsDialog .settingsCards {
  border: 0;
  padding: 0;
  margin: 0;
}

.settingsDialog .settingsCards {
  display: grid;
  gap: 14px;
}

.settingsDialog .settingsCard,
.settingsDialog .providerBox.settingsCard,
.settingsDialog .passwordSettings.settingsCard {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, white 6%);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset;
  padding: 14px;
}

body[data-theme="light"] .settingsDialog .settingsCard,
body[data-theme="light"] .settingsDialog .providerBox.settingsCard,
body[data-theme="light"] .settingsDialog .passwordSettings.settingsCard {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.settingsDialog .settingsCardBody {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.settingsDialog .settingsCardModel .settingsCardBody {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.settingsDialog .settingsCardModel .settingsCardActions,
.settingsDialog .settingsCardModel #defaultMsg {
  grid-column: 1 / -1;
}

.settingsSectionTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 740;
  letter-spacing: 0.02em;
}

.settingsSectionTitle .lucide {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.settingsDialog .settings {
  display: contents;
}

.settingsDialog .field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.settingsDialog .field > label,
.settingsDialog .field > span,
.settingsDialog .passwordForm .field > span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.01em;
}

.settingsDialog .field input,
.settingsDialog .field select,
.settingsDialog .field textarea,
.settingsDialog .passwordForm input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 10px 12px;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease);
}

.settingsDialog .field input:hover,
.settingsDialog .field select:hover,
.settingsDialog .field textarea:hover,
.settingsDialog .passwordForm input:hover {
  border-color: var(--border-strong);
}

.settingsDialog .field input:focus,
.settingsDialog .field select:focus,
.settingsDialog .field textarea:focus,
.settingsDialog .passwordForm input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

.settingsDialog .field:has(#cwd) {
  grid-column: auto;
}

.settingsDialog .backgroundControls,
.settingsDialog .backgroundRow {
  display: grid;
  gap: 10px;
}

.settingsDialog .backgroundRow {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.settingsDialog .backgroundDelete {
  min-height: 42px;
  border-radius: 12px;
}

/* Ambient effects toggle (light particles + mouse trail). */
.settingsDialog .settingsToggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-hover) 55%, transparent), transparent),
    var(--surface-raised);
  color: var(--text);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 640;
  cursor: pointer;
}

.settingsDialog .fxSwitch {
  appearance: none;
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong);
  outline: none;
  cursor: pointer;
  transition: background 160ms var(--ease);
}

.settingsDialog .fxSwitch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 160ms var(--ease);
}

.settingsDialog .fxSwitch:checked {
  background: var(--primary);
}

.settingsDialog .fxSwitch:checked::before {
  transform: translateX(18px);
}

.settingsDialog .fxSwitch:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.settingsDialog .settingsActions,
.settingsDialog .settingsCardActions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.settingsDialog .settingsActions .miniSecondary,
.settingsDialog .settingsActions .miniDanger,
.settingsDialog .settingsCardActions .miniSecondary,
.settingsDialog .settingsCardActions .miniDanger {
  width: auto;
  min-width: 0;
  min-height: 40px;
  flex: 1 1 0;
  border-radius: 12px;
}

.settingsDialog #defaultMsg {
  min-height: 0;
  margin: 0;
}

.settingsDialog .providerBox {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, white 6%);
  padding: 4px 14px 14px;
}

.settingsDialog .providerBox summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 740;
  list-style: none;
}

.settingsDialog .providerBox summary::-webkit-details-marker {
  display: none;
}

.settingsDialog .providerBox summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.6px solid var(--text-muted);
  border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.18s var(--ease);
}

.settingsDialog .providerBox[open] summary::after {
  transform: rotate(-135deg);
}

.settingsDialog .providerBox summary .lucide {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.settingsDialog .providerBox form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.settingsDialog .providerBox form > .field {
  min-width: 0;
  margin-bottom: 0;
}

.settingsDialog .providerBox form > .providerFetchBtn {
  align-self: end;
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
}

.settingsDialog .providerBox .providerFormFooter {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 2px;
}

.settingsDialog .providerBox .providerFormFooter .miniPrimary {
  width: auto;
  min-width: 168px;
  min-height: 42px;
  border-radius: 12px;
}

.settingsDialog .providerBox .providerFormFooter .errorText {
  min-width: 0;
  margin: 0;
}

.passwordForm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.passwordForm .field {
  min-width: 0;
  margin: 0;
}

.passwordSubmit {
  grid-column: 1 / -1;
  width: max-content;
  min-width: 148px;
  min-height: 42px;
  justify-self: end;
  border-radius: 12px;
}

.passwordStatus {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: -2px 0 0;
  text-align: right;
}

.passwordStatus.success {
  color: var(--success);
}

.settingsDialog .dreamSkinGenerator {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  padding: 12px;
}

@media (max-width: 820px) {
  .settingsDialog {
    width: min(420px, calc(100vw - 28px));
    max-height: min(78dvh, 720px);
    border-radius: 18px;
  }

  .settingsDialogBody {
    gap: 12px;
    padding: 12px 12px 14px;
  }

  .settingsDialog .settingsCard,
  .settingsDialog .providerBox.settingsCard,
  .settingsDialog .passwordSettings.settingsCard,
  .settingsDialog .providerBox {
    border-radius: 14px;
    padding: 12px;
  }

  .settingsDialog .settingsCardModel .settingsCardBody,
  .settingsDialog .providerBox form,
  .passwordForm {
    grid-template-columns: minmax(0, 1fr);
  }

  .settingsDialog .settingsCardModel .settingsCardActions,
  .settingsDialog .settingsCardModel #defaultMsg,
  .settingsDialog .providerBox form > *,
  .passwordForm > * {
    grid-column: 1;
  }

  .settingsDialog .settingsActions,
  .settingsDialog .settingsCardActions {
    justify-content: stretch;
  }

  .settingsDialog .settingsActions .miniSecondary,
  .settingsDialog .settingsCardActions .miniSecondary,
  .settingsDialog .settingsActions .miniDanger,
  .settingsDialog .settingsCardActions .miniDanger,
  .settingsDialog .providerBox .providerFormFooter .miniPrimary,
  .passwordSubmit {
    width: 100%;
    flex: 1 1 auto;
    justify-self: stretch;
  }

  .settingsDialog .providerBox .providerFormFooter {
    flex-direction: column;
    align-items: stretch;
  }
}

.smallrow {
  gap: 8px;
}

body .miniSecondary,
body .miniDanger,
body .logout {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 680;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}

body .miniSecondary:hover,
body .logout:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

body .miniDanger {
  border-color: rgba(240, 113, 120, 0.28);
  background: var(--danger-soft);
  color: var(--danger);
}

body .miniDanger:hover {
  border-color: var(--danger);
  background: var(--danger-soft);
}

body .backgroundDelete {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

body[data-theme] .providerBox {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 11px 0 0;
}

.providerBox summary {
  min-height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 8px;
  font-size: 12px;
}

.providerBox summary:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.historyTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 720;
}

.historyTitleCount {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 0 5px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  line-height: 1;
}

.historySearch {
  position: relative;
  display: block;
}

.historySearch > .lucide {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 10px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

.historySearch input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  padding: 0 10px 0 31px;
  font-size: 12px;
}

.historySearch input::placeholder {
  color: var(--text-subtle);
}

.historySearch input:hover {
  border-color: var(--border-strong);
}

.historySearch input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

body .history {
  min-height: 120px;
  flex: 1 1 auto;
  gap: 9px;
  padding-right: 2px;
}

.historyEmpty {
  color: var(--text-subtle);
  padding: 18px 8px;
  text-align: center;
  font-size: 12px;
}

.historyProject {
  gap: 2px;
}

.historyPinned,
.historySidebarTasks,
.historyTasks {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding-bottom: 4px;
}

.historyPinnedHead,
.historySidebarHead,
.historyTasksHead {
  display: grid;
  width: 100%;
  min-height: 30px;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  padding: 3px 7px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}

.historyPinnedHead:hover,
.historyPinnedHead:focus-visible,
.historySidebarHead:hover,
.historySidebarHead:focus-visible,
.historyTasksHead:hover,
.historyTasksHead:focus-visible {
  background: var(--surface-hover);
}

.historyPinnedTitle,
.historySidebarTitle,
.historyTasksTitle {
  margin: 0;
  color: var(--text);
  padding: 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.historyPinnedIcon,
.historySidebarIcon {
  color: var(--text-muted);
}

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

.historyPinnedIcon,
.historySidebarIcon,
.historyTasksIcon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--primary);
}

.historyPinnedIcon .lucide,
.historySidebarIcon .lucide,
.historyTasksIcon .lucide {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.historyPinnedChevron,
.historySidebarChevron,
.historyTasksChevron {
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  color: var(--text-subtle);
  opacity: 0.72;
  transform: rotate(0deg);
  transition: transform 160ms var(--ease), color 140ms var(--ease);
}

.historyPinnedChevron .lucide,
.historySidebarChevron .lucide,
.historyTasksChevron .lucide {
  width: 12px;
  height: 12px;
}

.historyPinnedHead:hover .historyPinnedChevron,
.historySidebarHead:hover .historySidebarChevron,
.historyTasksHead:hover .historyTasksChevron {
  color: var(--text-muted);
}

.historyPinnedHead[aria-expanded="true"] .historyPinnedChevron,
.historySidebarHead[aria-expanded="true"] .historySidebarChevron,
.historyTasksHead[aria-expanded="true"] .historyTasksChevron {
  transform: rotate(90deg);
}

.historyPinnedItems,
.historySidebarItems,
.historyTasksItems {
  display: grid;
  gap: 1px;
  padding-left: 22px;
}

.historyPinnedItems[hidden],
.historySidebarItems[hidden],
.historyTasksItems[hidden] {
  display: none;
}

.historyPinned.collapsed,
.historySidebarTasks.collapsed,
.historyTasks.collapsed {
  gap: 0;
}

.historyProjectHeader {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 34px;
  border-radius: 7px;
  transition: background 120ms var(--ease);
}

.historyProjectActions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 2px;
}

.historyProjectHeader:hover,
.historyProjectHeader:focus-within {
  background: var(--surface-hover);
}

.historyProjectHead {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  gap: 7px;
  border: 0;
  border-radius: 7px 0 0 7px;
  background: transparent;
  color: inherit;
  padding: 3px 4px 3px 7px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.historyProjectMenuButton {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-subtle);
  padding: 0;
  opacity: 0.36;
  transition: background 120ms var(--ease), color 120ms var(--ease), opacity 120ms var(--ease);
}

.historyProjectMenuButton:hover,
.historyProjectMenuButton:focus-visible,
.historyProjectMenuButton[aria-expanded="true"] {
  background: var(--surface-hover);
  color: var(--text);
  opacity: 1;
}

.historyProjectMenuButton .lucide {
  width: 15px;
  height: 15px;
}

.historyProjectMenu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 4px);
  right: 2px;
  display: grid;
  width: 184px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 5px;
  box-shadow: var(--shadow-lg);
}

.historyProjectMenu[hidden] {
  display: none;
}

.historyProjectMenu.openAbove {
  top: auto;
  bottom: calc(100% + 4px);
}

.historyProjectMenuAction {
  display: grid;
  width: 100%;
  min-height: 34px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  padding: 7px 9px;
  text-align: left;
  font-size: 12px;
}

.historyProjectMenuAction:hover,
.historyProjectMenuAction:focus-visible {
  background: var(--surface-hover);
}

.historyProjectMenuAction.danger {
  color: var(--danger);
}

.historyProjectMenuAction:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.historyProjectMenuAction .lucide {
  width: 15px;
  height: 15px;
}

.historyProjectFolder {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--text-muted);
}

.historyProjectFolder .lucide {
  width: 17px;
  height: 17px;
  stroke-width: 1.75;
}

.historyProjectTitle {
  display: flex;
  min-width: 0;
  align-items: center;
}

.historyProjectChevron {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--text-subtle);
  opacity: 0.72;
  transform: rotate(0deg);
  transition: transform 160ms var(--ease), color 140ms var(--ease);
}

.historyProjectChevron .lucide {
  width: 12px;
  height: 12px;
}

.historyProjectHead:hover .historyProjectChevron {
  color: var(--text-muted);
}

.historyProjectHead[aria-expanded="true"] .historyProjectChevron {
  transform: rotate(90deg);
}

.historyProjectName {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historyProjectCount {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.historyProjectPath {
  display: none;
}

.historyProjectItems {
  gap: 1px;
  padding-left: 22px;
}

.historyProjectItems[hidden] {
  display: none;
}

.historyProject.collapsed {
  gap: 0;
}

body .hist {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  min-height: 34px;
  gap: 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  padding: 2px 4px 2px 7px;
  font-size: 12px;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}

body .hist.native {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

body .hist.native.running {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

body .hist:hover {
  background: var(--surface-hover);
  color: var(--text);
}

body .hist.active {
  border: 0;
  background: var(--surface-active);
  color: var(--text);
  box-shadow: none;
}

body[data-theme] .hist {
  background: transparent;
}

body[data-theme] .hist:hover {
  background: var(--surface-hover);
}

body[data-theme] .hist.active {
  background: var(--surface-active);
}

.histOpen {
  position: relative;
  min-width: 0;
  min-height: 28px;
  overflow: hidden;
  color: inherit;
  padding: 0 3px;
  font-size: 12px;
  font-weight: 520;
  line-height: 28px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.histOpenLabel {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.histOpen.hasAutomation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 5px;
}

.histAutomationIcon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: var(--text-subtle);
}

.histAutomationIcon .lucide,
body .histRename .lucide,
body .histDelete .lucide {
  width: 16px;
  height: 16px;
}

.hist:hover .histAutomationIcon,
.hist.active .histAutomationIcon {
  color: var(--text-muted);
}

.histOpen.running {
  padding-left: 3px;
}

.histOpen.running::before {
  content: none;
}

.histRunning {
  position: absolute;
  z-index: 2;
  top: 50%;
  /* Keep the status signal inside the sidebar's clipping edge. */
  left: -7px;
  display: block;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--success);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--success-soft);
  pointer-events: none;
  transform: translateY(-50%);
}

.histCompletionUnread {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: -18px;
  display: grid;
  width: 30px;
  height: 34px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--info);
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
}

.histCompletionUnread::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px var(--surface);
  transition: box-shadow 120ms var(--ease), transform 120ms var(--ease);
}

.histCompletionUnread:hover::after,
.histCompletionUnread:focus-visible::after {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-soft);
  transform: scale(1.08);
}

.histCompletionUnread:focus-visible {
  outline: none;
}

body .histSource {
  min-width: 20px;
  height: 18px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-subtle);
  font-size: 8px;
  font-weight: 700;
}

body .histRename,
body .histDelete {
  width: 26px;
  height: 26px;
  border-color: transparent;
  padding: 0;
}

body[data-theme] .histRename,
body[data-theme] .histDelete {
  background: transparent;
}

.histRenameInput {
  width: 100%;
  min-width: 0;
  height: 28px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  padding: 0 7px;
  outline: none;
  font: inherit;
  font-size: 12px;
}

.histRenameInput:focus {
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.hist.renaming {
  background: var(--surface-active);
}

.historyProjectPreview {
  position: fixed;
  z-index: 70;
  display: grid;
  width: min(330px, calc(100vw - 32px));
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  color: var(--text);
  padding: 14px 15px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.16), 0 3px 10px rgba(15, 23, 42, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 120ms var(--ease), transform 120ms var(--ease);
  backdrop-filter: blur(18px);
}

.historyProjectPreview[hidden] {
  display: none;
}

.historyProjectPreview.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.historyProjectPreviewHeading,
.historyProjectPreviewIdentity,
.historyProjectPreviewRow {
  display: flex;
  min-width: 0;
  align-items: center;
}

.historyProjectPreviewHeading {
  justify-content: space-between;
  gap: 12px;
}

.historyProjectPreviewIdentity {
  gap: 9px;
}

.historyProjectPreviewIdentity > .lucide {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.historyProjectPreviewIdentity strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historyProjectPreviewPin {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  color: var(--text-subtle);
}

.historyProjectPreviewPin .lucide {
  width: 16px;
  height: 16px;
}

.historyProjectPreviewRow {
  gap: 9px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.historyProjectPreviewRow > .lucide {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--text-subtle);
}

.historyProjectPreviewStats span {
  font-variant-numeric: tabular-nums;
}

.historyProjectPreviewDivider {
  height: 1px;
  background: var(--border);
}

.historyProjectPreviewPath span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historyProjectPreviewActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.historyProjectPreviewAction {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 9px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  pointer-events: auto;
}

.historyProjectPreviewAction:hover,
.historyProjectPreviewAction:focus-visible {
  background: var(--surface-hover);
}

.historyProjectPreviewAction.primary {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--border));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.historyProjectPreviewAction:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.historyProjectPreviewAction .lucide {
  width: 15px;
  height: 15px;
}


body .histDelete {
  border-color: transparent;
  background: transparent;
  color: var(--text-subtle);
}

body .histDelete:hover {
  border-color: rgba(240, 113, 120, 0.3);
  background: var(--danger-soft);
  color: var(--danger);
}

@media (hover: hover) and (pointer: fine) {
  body .histRename,
  body .histDelete {
    opacity: 0;
    pointer-events: none;
    transform: translateX(2px);
    transition: opacity 140ms var(--ease), transform 140ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
  }

  body .hist:hover .histRename,
  body .hist:hover .histDelete,
  body .hist.active .histRename,
  body .hist.active .histDelete,
  body .hist:focus-within .histRename,
  body .hist:focus-within .histDelete {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .historyProjectHeader:hover .historyProjectMenuButton,
  .historyProjectHeader:focus-within .historyProjectMenuButton,
  .historyProjectHeader:hover .historyProjectEditButton,
  .historyProjectHeader:focus-within .historyProjectEditButton,
  .historyProjectHeader:hover .historyProjectNewTaskButton,
  .historyProjectHeader:focus-within .historyProjectNewTaskButton {
    opacity: 0.88;
  }
}

body .logout {
  width: 100%;
  flex: 0 0 auto;
}

body .main {
  min-width: 0;
  background: var(--canvas);
}

body[data-theme="light"] .main {
  background: #ffffff;
}

body .top {
  height: var(--header-height);
  min-height: var(--header-height);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0 18px;
}

.top > div:not(.meta) {
  min-width: 0;
}

.top .title {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topStatus {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.topStatus::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--success);
  content: "";
}

.topStatus.running::before {
  animation: statusPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 4px var(--success-soft);
}

body #modeLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
}

#modeLabel .lucide {
  width: 12px;
  height: 12px;
}

body .chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 13px;
  background: var(--canvas);
  padding: 22px var(--conversation-gutter) 12px;
  scroll-padding-block: 24px;
}

body[data-theme="light"] .chat {
  background: #ffffff;
}

body .empty {
  color: var(--text-subtle);
}

body .empty b {
  color: var(--text);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: 0;
  margin-bottom: 5px;
}

body .empty span {
  font-size: 12px;
}

/* Keep boot/refresh from flashing an empty shell before the restored conversation paints. */
body .chat.conversationRestoring {
  position: relative;
}

body .chat.conversationRestoring > :not(.empty) {
  visibility: hidden;
}

body .chat .conversationRestorePlaceholder {
  position: fixed;
  z-index: 12;
  top: 48vh;
  left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(360px, calc(100vw - 36px));
  margin: 0;
  padding: 10px 14px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px);
  pointer-events: none;
  opacity: 1;
  white-space: nowrap;
}

body .chat .conversationRestorePlaceholder::before {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid color-mix(in srgb, var(--text-muted) 36%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  content: "";
  animation: spin 0.9s linear infinite;
}

body .chat .conversationRestorePlaceholder b,
body .chat .conversationRestorePlaceholder span {
  display: inline;
  margin: 0;
  line-height: 1.25;
}

body .chat .conversationRestorePlaceholder b {
  font-size: 13px;
}

body .chat .conversationRestorePlaceholder span {
  font-size: 12px;
}

/* Avoid partial terminal-error flashes while history is still settling. */
body .chat.conversationRestoring .msg.process.terminalError,
body .chat.conversationRestoring .msg.process.usageLimitError {
  content-visibility: auto;
}

body .chat .empty.conversationRestoring,
body .chat.conversationRestoring .empty {
  margin: auto;
  opacity: 0.88;
}

body .chat .empty.conversationRestoring b,
body .chat.conversationRestoring .empty b {
  font-size: 16px;
  font-weight: 700;
}

body .chat .empty.conversationRestoring span,
body .chat.conversationRestoring .empty span {
  color: var(--text-muted);
}

body .chat.conversationRestoring .conversationRestorePlaceholder {
  margin: 0;
  opacity: 1;
}

body .chat.conversationRestoring .conversationRestorePlaceholder b {
  font-size: 13px;
}

body .chat.conversationRestoring .conversationRestorePlaceholder span {
  font-size: 12px;
}

@media (max-width: 820px) {
  body .chat .conversationRestorePlaceholder {
    top: 44dvh;
    left: 50vw;
    max-width: calc(100vw - 28px);
    padding: 9px 12px;
  }
}


body .msg {
  max-width: min(780px, calc(100% - 32px));
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.65;
}

body .msg.user {
  position: relative;
  display: block;
  width: auto;
  max-width: min(var(--conversation-width), 77%);
  align-self: flex-end;
  margin-bottom: 16px;
  overflow: visible;
  border: 0;
  border-radius: 16px;
  background: color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--text);
  padding: 8px 12px;
  box-shadow: none;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body .msg.user > .msgBody,
body .msg.user > .msgBody.markdownBody {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body .msg.user > .msgBody {
  white-space: pre-wrap;
}

body .msg.user > .msgBody.markdownBody {
  white-space: normal;
}

body .msg.user .markdownBody,
body .msg.user .markdownBody p,
body .msg.user .markdownBody li,
body .msg.user .markdownBody code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body .msg.user.longUserMessage:not(.expanded) > .msgBody {
  max-height: 210px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
}

body .msg.user.longUserMessage.expanded > .msgBody {
  max-height: none;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

.longUserMessageToggle {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 6px 4px 0;
  font-size: 11.5px;
  font-weight: 650;
}

.longUserMessageToggle:hover,
.longUserMessageToggle:focus-visible {
  background: transparent;
  color: var(--text);
}

.longUserMessageToggle .lucide {
  width: 14px;
  height: 14px;
}

body .msg.user::after {
  position: absolute;
  top: 100%;
  right: 0;
  width: min(124px, 100%);
  height: 6px;
  content: "";
}


body .msg.user.hasInputImage {
  display: flex;
  width: fit-content;
  max-width: min(420px, 92%);
  flex-direction: column;
  align-items: flex-end;
  background: transparent;
  padding: 0;
}

.userAttachmentStack {
  display: grid;
  width: min(240px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 8px auto;
}

.userAttachmentStack.single {
  width: 100px;
  grid-template-columns: minmax(0, 1fr);
}

.userAttachment {
  display: block;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  padding: 0;
  cursor: zoom-in;
}

.userAttachment:only-child {
  grid-column: 1 / -1;
}

.userAttachment img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

body .msg.user.hasInputImage .msgBody {
  width: fit-content;
  max-width: 100%;
  border-radius: 16px;
  background: color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--text);
  padding: 8px 12px;
}

body .msg.user.hasInputImage .msgBody:empty {
  display: none;
}

.userAttachment:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

body[data-theme] .msg.assistant {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 0;
  font-size: 14px;
  line-height: 1.68;
}

body .msg.assistant > .msgBody {
  width: 100%;
}

/* Stream text cheaply while preserving line breaks; completed output is rendered as Markdown. */
body .msg.assistant.streaming > .msgBody {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body .msg.assistant > .msgBody > :not(.memoryCitations) {
  max-width: min(780px, 100%);
}

body[data-theme] .msg.image {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px;
}

body[data-theme] .msg.image.inputImage {
  width: fit-content;
  max-width: min(420px, 78%);
  align-self: flex-end;
}

.msg.image img {
  cursor: zoom-in;
  border-radius: var(--radius-sm);
}

.msg.image img:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.generatedImageActions {
  position: absolute;
  top: 14px;
  right: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms var(--ease);
}

.msg.image:hover .generatedImageActions,
.msg.image:focus-within .generatedImageActions {
  opacity: 1;
  pointer-events: auto;
}

.generatedBackgroundApply {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(12, 15, 20, 0.78);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
}

.generatedBackgroundApply:hover {
  background: rgba(12, 15, 20, 0.94);
}

.generatedBackgroundApply:disabled {
  cursor: default;
  opacity: 0.72;
}

.generatedBackgroundApply.loading .lucide {
  animation: spin 900ms linear infinite;
}

@media (hover: none) {
  .generatedImageActions {
    opacity: 1;
    pointer-events: auto;
  }
}

.msg.image.inputImage img {
  width: auto;
  max-width: 100%;
  max-height: min(44vh, 420px);
  object-fit: contain;
}

.imagePreview {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 14, 0.9);
  padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  backdrop-filter: blur(6px);
}

.imagePreviewDialog {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.imagePreviewImage {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
  object-fit: contain;
}

.imagePreviewClose {
  position: fixed;
  z-index: 1;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(12, 15, 20, 0.76);
  color: #ffffff;
  padding: 0;
  backdrop-filter: blur(10px);
}

.imagePreviewClose:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(28, 33, 42, 0.9);
}

.imagePreviewClose .lucide {
  width: 18px;
  height: 18px;
}

.msgActions {
  min-height: 24px;
  gap: 5px;
  margin: 8px 0 -3px;
  opacity: 0.48;
  transition: opacity 140ms var(--ease);
}

.msg:hover .msgActions,
.msg:focus-within .msgActions,
.msg.actionsOpen .msgActions {
  opacity: 1;
}

body .msg.assistant > .msgActions {
  width: fit-content;
  max-width: min(780px, 100%);
  min-height: 32px;
  justify-content: flex-start;
  gap: 6px;
  margin: 4px 0 -5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}

body .msg.assistant:hover > .msgActions,
body .msg.assistant:focus-within > .msgActions,
body .msg.assistant.actionsOpen > .msgActions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body .copyMsg,
body .rollbackMsg,
body .continueMsg {
  width: 26px;
  height: 24px;
  border-color: transparent;
  background: transparent;
  color: var(--text-subtle);
}

.messageAction {
  position: relative;
}

.messageAction::after {
  position: absolute;
  z-index: 40;
  bottom: calc(100% + 7px);
  left: 50%;
  max-width: 220px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(28, 29, 32, 0.96);
  color: #f4f4f5;
  padding: 6px 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  content: attr(data-tooltip);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity 120ms var(--ease), transform 120ms var(--ease);
  white-space: nowrap;
}

.messageAction:hover::after,
.messageAction:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

body .msg.assistant .copyMsg,
body .msg.assistant .continueMsg {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-subtle);
}

body .msg.assistant .continueMsg {
  background: transparent;
  color: var(--text-muted);
}

body .msg.assistant .copyMsg:hover,
body .msg.assistant .copyMsg:focus-visible,
body .msg.assistant .continueMsg:hover,
body .msg.assistant .continueMsg:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
}

body .msg.assistant .continueMsg:hover,
body .msg.assistant .continueMsg:focus-visible {
  background: transparent;
}

.nativeForkDivider {
  display: grid;
  width: min(880px, 100%);
  align-self: center;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  align-items: center;
  gap: 10px;
  margin: 2px auto;
  color: var(--primary);
  font-size: 13px;
  line-height: 1.4;
}

.nativeForkDivider::before,
.nativeForkDivider::after {
  height: 1px;
  content: "";
  background: var(--border);
}

.nativeForkDividerLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.nativeForkDividerLabel .lucide {
  width: 14px;
  height: 14px;
}

body .msg.assistant .messageAction .lucide {
  width: 15px;
  height: 15px;
}

body .msg.assistant .messageTime {
  align-self: center;
  margin-left: 2px;
  font-size: 12px;
}

body .msg.user .msgActions {
  position: absolute;
  z-index: 3;
  top: calc(100% - 1px);
  right: 0;
  min-height: 29px;
  margin: 0;
  color: var(--text-subtle);
  opacity: 0;
  padding: 5px 0 0 8px;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}

body .msg.user:hover .msgActions,
body .msg.user:focus-within .msgActions,
body .msg.user.actionsOpen .msgActions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.messageTime {
  color: var(--text-subtle);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body .msg.user .msgActions .copyMsg,
body .msg.user .msgActions .rollbackMsg {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-subtle);
}

body .msg.user .msgActions .copyMsg:hover,
body .msg.user .msgActions .rollbackMsg:hover {
  border-color: transparent;
  background: var(--surface-hover);
  color: var(--text);
}

body .msg.user .msgActions .lucide {
  width: 15px;
  height: 15px;
}

body .msg.user .messageTime {
  align-self: center;
  margin-left: 2px;
  font-size: 12px;
}

.markdownBody p {
  margin: 0 0 10px;
}

.markdownBody ul,
.markdownBody ol {
  margin: 6px 0 10px;
  padding-left: 22px;
}

.markdownBody li + li {
  margin-top: 3px;
}

.markdownBody li > p {
  margin-bottom: 4px;
}

.markdownBody strong {
  font-weight: 700;
}

.markdownBody hr {
  height: 1px;
  margin: 14px 0;
  border: 0;
  background: var(--border);
}

.markdownBody h1,
.markdownBody h2,
.markdownBody h3,
.markdownBody h4,
.markdownBody h5,
.markdownBody h6 {
  color: var(--text);
  font-weight: 720;
  letter-spacing: 0;
}

.markdownBody h1 {
  font-size: 18px;
}

.markdownBody h2 {
  font-size: 16px;
}

.markdownBody h3 {
  font-size: 14px;
}

body .msg.assistant .markdownBody h1,
body .msg.assistant .markdownBody h2,
body .msg.assistant .markdownBody h3,
body .msg.assistant .markdownBody h4,
body .msg.assistant .markdownBody h5,
body .msg.assistant .markdownBody h6 {
  margin: 16px 0 8px;
  line-height: 1.3;
}

body .msg.assistant .markdownBody p {
  margin: 0 0 10px;
}

body .msg.assistant .markdownBody ul,
body .msg.assistant .markdownBody ol {
  margin: 6px 0 10px;
  padding-left: 22px;
  list-style: revert;
}

body .msg.assistant .markdownBody li + li {
  margin-top: 3px;
}

.markdownBody a {
  color: var(--primary);
}

.markdownBody a.markdownLink {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
  word-break: break-all;
}

.markdownBody a.markdownLink:hover {
  color: var(--primary-hover, var(--primary));
}

.markdownBody a.markdownFileLink {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  vertical-align: -1px;
}

.markdownBody a.markdownFileLink .markdownFileLinkIcon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  stroke-width: 1.9;
}

.chatLinkMenu {
  position: fixed;
  z-index: 1200;
  min-width: 168px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised, var(--surface));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  padding: 6px;
}

.chatLinkMenu.hidden {
  display: none;
}

.chatLinkMenuItem {
  display: flex;
  min-height: 36px;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 520;
  text-align: left;
  cursor: pointer;
}

.chatLinkMenuItem:hover,
.chatLinkMenuItem:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

body[data-theme] .markdownBody code {
  border: 0;
  border-radius: 5px;
  background: var(--surface-hover);
  color: var(--text);
  padding: 1px 5px;
}

body[data-theme] .markdownBody pre,
body[data-theme] .requestDetail {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--text);
}

.markdownCodeBlock {
  position: relative;
  max-width: 100%;
  margin: 10px 0;
}

body[data-theme] .markdownCodeBlock > pre {
  margin: 0;
  padding-right: 46px;
}

.markdownCodeCopy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in oklab, var(--code-bg) 86%, var(--surface-raised));
  color: var(--text-muted);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}

.markdownCodeBlock:hover > .markdownCodeCopy,
.markdownCodeBlock:focus-within > .markdownCodeCopy,
.markdownCodeCopy:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.markdownCodeCopy:hover,
.markdownCodeCopy:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-raised);
  color: var(--text);
}

.markdownCodeCopy .lucide {
  width: 15px;
  height: 15px;
}

@media (hover: none), (pointer: coarse) {
  .markdownCodeCopy {
    opacity: 1;
    pointer-events: auto;
  }
}

.markdownBody blockquote {
  border-left-color: var(--primary);
  color: var(--text-muted);
}

.markdownBody th,
.markdownBody td {
  border-color: var(--border);
}

.markdownBody th {
  background: var(--surface-raised);
}

.memoryCitations {
  width: 100%;
  margin-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  padding-top: 5px;
  color: var(--text-muted);
}

.memoryCitations > summary::marker,
.memoryCitations > summary::-webkit-details-marker,
.memoryCitationItem > summary::marker,
.memoryCitationItem > summary::-webkit-details-marker {
  display: none;
  content: "";
}

.memoryCitationsSummary {
  display: flex;
  min-height: 30px;
  width: max-content;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-muted);
  list-style: none;
  font-size: 11.5px;
  font-weight: 600;
}

.memoryCitationsSummary:hover {
  color: var(--text);
}

.memoryCitationsChevron,
.memoryCitationItemChevron {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--text-subtle);
  transition: transform 160ms var(--ease), color 140ms var(--ease);
}

.memoryCitations[open] > .memoryCitationsSummary .memoryCitationsChevron,
.memoryCitationItem[open] > .memoryCitationRow .memoryCitationItemChevron {
  transform: rotate(90deg);
}

.memoryCitationsTypeIcon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--primary);
}

.memoryCitationsCount {
  min-width: 18px;
  border-radius: 4px;
  background: var(--surface-hover);
  color: var(--text-subtle);
  padding: 0 5px;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.threadGoalCompletionHint {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--text-subtle);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}

.threadGoalCompletionHint svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  stroke-width: 1.8;
}

.memoryCitationList {
  display: grid;
  margin: 1px 0 2px 6px;
  border-left: 1px solid var(--border);
  padding-left: 11px;
}

.memoryCitationItem {
  min-width: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
}

.memoryCitationItem:last-child {
  border-bottom: 0;
}

.memoryCitationRow {
  display: grid;
  min-height: 36px;
  grid-template-columns: 14px minmax(0, 1fr) auto 13px;
  align-items: center;
  gap: 7px;
  margin-left: -6px;
  border-radius: 4px;
  padding: 5px 6px;
  cursor: pointer;
  list-style: none;
}

.memoryCitationRow:hover {
  background: var(--surface-raised);
}

.memoryCitationFileIcon {
  width: 13px;
  height: 13px;
  color: var(--text-subtle);
}

.memoryCitationIdentity {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}

.memoryCitationName {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memoryCitationSource {
  min-width: 0;
  overflow: hidden;
  color: var(--text-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memoryCitationLines {
  color: var(--text-subtle);
  font-size: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.memoryCitationDetail {
  display: grid;
  gap: 6px;
  margin: 0 20px 8px 15px;
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text-muted);
  padding: 2px 0 2px 10px;
  font-size: 10.5px;
  line-height: 1.55;
}

.memoryCitationPath {
  overflow-wrap: anywhere;
  color: var(--text-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.memoryCitationPurpose {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
}

.memoryCitationPurpose > :first-child {
  color: var(--text-subtle);
  font-weight: 600;
}

.inboxItems {
  display: grid;
  width: min(520px, 100%);
  gap: 6px;
  margin: 10px 0 2px;
}

.inboxItem {
  display: grid;
  min-width: 0;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  padding: 9px 10px;
}

.inboxItemIcon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

.inboxItemIcon .lucide {
  width: 13px;
  height: 13px;
}

.inboxItemCopy {
  display: grid;
  min-width: 0;
  gap: 1px;
  padding-top: 1px;
  line-height: 1.4;
}

.inboxItemTitle {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
}

.inboxItemSummary {
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: 11.5px;
}

.reviewComments {
  width: 100%;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.reviewCommentsHead {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.reviewCommentsIcon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.reviewCommentsIcon .lucide {
  width: 14px;
  height: 14px;
}

.reviewComment {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.reviewComment:last-child {
  border-bottom: 0;
}

.reviewComment > summary::marker,
.reviewComment > summary::-webkit-details-marker {
  display: none;
  content: "";
}

.reviewCommentRow {
  display: grid;
  min-height: 38px;
  grid-template-columns: auto minmax(140px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 16px;
  list-style: none;
}

.reviewCommentRow:hover {
  background: var(--surface-raised);
}

.reviewPriority {
  min-width: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  padding: 1px 5px;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

.reviewPriority.priority0,
.reviewPriority.priority1 {
  border-color: rgba(240, 113, 120, 0.36);
  background: var(--danger-soft);
  color: var(--danger);
}

.reviewPriority.priority2 {
  border-color: rgba(229, 170, 69, 0.36);
  background: var(--warning-soft);
  color: var(--warning);
}

.reviewCommentTitle {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 630;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewCommentLocation {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewCommentBody {
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 9px 16px 10px 54px;
  font-size: 12px;
  line-height: 1.55;
}

body[data-theme] .msg.process {
  max-width: min(780px, 100%);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 3px 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
}

body[data-theme] .msg.process.nativeConnectionStatus,
body[data-theme] .msg.process[data-message-kind="task_error"],
body[data-theme] .msg.process[data-message-kind="error"] {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-left: 2px solid var(--danger);
  border-radius: 6px;
  background: color-mix(in srgb, var(--danger) 7%, transparent);
  color: var(--text);
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.55;
}

body[data-theme] .msg.process.nativeConnectionStatus.streaming {
  border-left-color: var(--border-strong);
  background: var(--surface-subtle);
  color: var(--text-muted);
}

body[data-theme] .msg.process.nativeConnectionStatus > .msgBody,
body[data-theme] .msg.process[data-message-kind="task_error"] > .msgBody,
body[data-theme] .msg.process[data-message-kind="error"] > .msgBody {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-theme] .msg.process.terminalError {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: start;
  gap: 10px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--border));
  border-left: 3px solid var(--danger);
  border-radius: 7px;
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  color: var(--text);
  padding: 11px 10px 11px 11px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--danger) 7%, transparent);
}

body[data-theme] .msg.process.terminalError.usageLimitError {
  border-color: color-mix(in srgb, #f59e0b 28%, var(--border));
  border-left-color: #f59e0b;
  background:
    linear-gradient(180deg, color-mix(in srgb, #f59e0b 10%, transparent), transparent 54%),
    color-mix(in srgb, #f59e0b 6%, var(--surface));
  box-shadow: 0 1px 2px color-mix(in srgb, #f59e0b 10%, transparent);
}

body[data-theme] .msg.process.terminalError.usageLimitError .terminalErrorIcon {
  border-color: color-mix(in srgb, #f59e0b 28%, transparent);
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #d97706;
}

body[data-theme] .msg.process.terminalError.usageLimitError .terminalErrorTitle {
  color: #b45309;
}

body[data-theme] .msg.process.terminalError.usageLimitError .terminalErrorContent.compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body[data-theme] .msg.process.terminalError.usageLimitError .terminalErrorContent.compact .terminalErrorTitle {
  margin: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}

body[data-theme] .msg.process.terminalError.usageLimitError .terminalErrorContent.compact .terminalErrorMeta {
  display: inline-flex;
  margin-top: 0;
  flex: 0 0 auto;
}

body[data-theme] .msg.process.terminalError.usageLimitError .terminalErrorContent.compact .terminalErrorBadge {
  margin: 0;
}

@media (max-width: 820px) {
  body[data-theme] .msg.process.terminalError.usageLimitError {
    align-items: center;
    padding: 11px 10px 11px 12px;
  }

  body[data-theme] .msg.process.terminalError.usageLimitError .terminalErrorContent.compact {
    gap: 8px;
  }

  body[data-theme] .msg.process.terminalError.usageLimitError .terminalErrorContent.compact .terminalErrorTitle {
    font-size: 13px;
    line-height: 1.2;
  }
}


body[data-theme] .msg.process.terminalError.usageLimitError .msgBody {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}

.terminalErrorHint {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.terminalErrorMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.terminalErrorBadge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: #b45309;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.04em;
  line-height: 1;
}

.terminalErrorIcon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger);
}

.terminalErrorIcon .lucide {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.terminalErrorContent {
  min-width: 0;
  padding-top: 1px;
}

.terminalErrorTitle {
  display: block;
  margin: 0 0 4px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.3;
}

body[data-theme] .msg.process.terminalError .msgBody {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-theme] .msg.process.terminalError > .msgActions {
  align-self: start;
  min-height: 28px;
  margin: -1px 0 0;
  opacity: 0.72;
}

body[data-theme] .msg.process.terminalError .copyMsg {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-subtle);
}

body[data-theme] .msg.process.terminalError .copyMsg:hover,
body[data-theme] .msg.process.terminalError .copyMsg:focus-visible {
  background: var(--danger-soft);
  color: var(--danger);
}

@media (min-width: 821px) {
  .terminalErrorContent {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 5px;
  }

  .terminalErrorTitle {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }

  .terminalErrorHint,
  .terminalErrorMeta {
    flex: 1 0 100%;
  }
}

@media (max-width: 820px) {
  body[data-theme] .msg.process.terminalError {
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    gap: 8px;
    margin: 2px 0 8px;
    border-radius: 12px;
    padding: 12px 10px 12px 11px;
  }

  body[data-theme] .msg.process.terminalError.usageLimitError {
    border-radius: 14px;
    padding: 13px 11px 12px 12px;
  }

  .terminalErrorIcon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    margin-top: 1px;
  }

  .terminalErrorContent {
    display: grid;
    gap: 4px;
    padding-top: 0;
  }

  .terminalErrorTitle {
    margin: 0;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.25;
  }

  body[data-theme] .msg.process.terminalError .msgBody {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
  }

  body[data-theme] .msg.process.terminalError.usageLimitError .msgBody {
    font-size: 13px;
    line-height: 1.48;
  }

  .terminalErrorHint {
    margin-top: 2px;
    font-size: 11px;
  }

  .terminalErrorMeta {
    margin-top: 4px;
  }

  body[data-theme] .msg.process.terminalError > .msgActions {
    align-self: start;
    min-height: 32px;
    margin: 0;
    opacity: 0.88;
  }

  body[data-theme] .msg.process.terminalError .copyMsg {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  body[data-theme] .liveProcessTimeline > .msg.process.terminalError,
  body[data-theme] .completionTimeline > .msg.process.terminalError {
    width: calc(100% - 2px);
    max-width: calc(100% - 2px);
  }
}

.terminalErrorDisclosure {
  display: block;
  min-width: 0;
  padding-top: 0;
}

.terminalErrorDisclosure > summary {
  list-style: none;
}

.terminalErrorDisclosure > summary::-webkit-details-marker {
  display: none;
}

.terminalErrorSummary {
  display: grid;
  min-width: 0;
  min-height: 28px;
  grid-template-columns: auto minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
}

.terminalErrorSummary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--danger) 72%, transparent);
  outline-offset: 3px;
}

.terminalErrorSummary .terminalErrorTitle {
  margin: 0;
  white-space: nowrap;
}

.terminalErrorPreview {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminalErrorChevron {
  width: 15px;
  height: 15px;
  color: var(--text-subtle);
  transition: transform 160ms ease;
}

.terminalErrorDisclosure[open] > .terminalErrorSummary .terminalErrorChevron {
  transform: rotate(90deg);
}

body[data-theme] .msg.process.terminalError .terminalErrorDisclosure > .msgBody {
  max-height: min(42vh, 420px);
  margin-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--danger) 18%, var(--border));
  padding-top: 8px;
  overflow: auto;
  overscroll-behavior: contain;
}

@media (max-width: 820px) {
  .terminalErrorSummary {
    min-height: 30px;
    grid-template-columns: auto minmax(0, 1fr) 15px;
    gap: 7px;
  }

  .terminalErrorPreview {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminalErrorChevron {
    transition: none;
  }
}

body .msg.process.completionSummary {
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  border-bottom: 0;
  padding: 0;
}

/* 已处理分隔线贴在最终回复最上方 */
.completionSummary + .msg.assistant {
  margin-top: 0;
}

.completionSummary > summary,
.completionSummary > .completionRow {
  display: flex;
  min-height: 40px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0 0 11px;
  font-size: 14px;
  list-style: none;
}

.completionSummary > summary {
  cursor: pointer;
}

.completionSummary > .completionRow {
  cursor: default;
}

.completionSummary.collapsible:not([open]) > .completionContent {
  display: none;
}

.completionSummary > summary::marker,
.completionSummary > summary::-webkit-details-marker {
  display: none;
  content: "";
}

.completionSummary > summary .completionLabel,
.completionSummary > .completionRow .completionLabel {
  white-space: nowrap;
}

.completionSummary > summary .completionTokenUsage,
.completionSummary > .completionRow .completionTokenUsage {
  color: var(--text-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.completionSummary > summary .completionTokenUsage.hidden,
.completionSummary > .completionRow .completionTokenUsage.hidden {
  display: none;
}

.completionSummary > summary .completionChevron {
  width: 13px;
  height: 13px;
  transition: transform 160ms var(--ease);
}

.completionSummary[open] > summary .completionChevron {
  transform: rotate(90deg);
}

.completionContent {
  max-height: min(64vh, 680px);
  margin-bottom: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--text);
  padding: 17px 0 8px;
  font-size: 14px;
}

.processHistory {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 4px;
}

.completionTimeline {
  display: grid;
  gap: 10px;
}

body[data-theme="dark"] .completionTimeline {
  --text: #ffffff;
  --text-muted: #acacac;
  --text-subtle: #7b7b7b;
  --reasoning-flow-muted: #7b7b7b;
  --reasoning-flow-strong: #ffffff;
}

.completionTimeline > .activityBatch + .activityBatch {
  margin-top: -10px;
}

.completionTimeline > .msg {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

body[data-theme] .completionTimeline > .msg.assistant {
  min-width: 0;
  color: var(--text);
  padding: 1px 0;
  font-size: 14px;
  line-height: 1.68;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body[data-theme] .completionTimeline > .msg.assistant > .msgBody,
body[data-theme] .completionTimeline > .msg.progressCommentary > .msgBody,
body[data-theme] .liveProcessTimeline > .msg.assistant > .msgBody,
body[data-theme] .liveProcessTimeline > .msg.progressCommentary > .msgBody {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body[data-theme] .liveProcessTimeline > .msg.progressCommentary:not(.streaming),
body[data-theme] .processHistoryTimeline > .msg.progressCommentary {
  display: grid;
  min-width: 0;
  max-width: 100%;
}

body[data-theme] .liveProcessTimeline > .msg.progressCommentary:not(.streaming) > .msgBody,
body[data-theme] .processHistoryTimeline > .msg.progressCommentary > .msgBody,
body[data-theme] .completionTimeline > .msg.progressCommentary > .msgBody {
  display: block;
  overflow: visible;
  text-overflow: unset;
  -webkit-line-clamp: unset;
}

.progressCommentary .msgActions,
.completionTimeline .progressCommentary .msgActions {
  display: none;
}

/* Process progress notes: flush main-text column, same weight as final answer. */
body[data-theme] .completionTimeline > .msg.progressCommentary,
body[data-theme] .liveProcessTimeline > .msg.progressCommentary,
body[data-theme] .processHistoryTimeline > .msg.progressCommentary,
body[data-theme] .sideChatMessages > .msg.progressCommentary,
body[data-theme] .completionTimeline > .msg.assistant.progressCommentary,
body[data-theme] .liveProcessTimeline > .msg.assistant.progressCommentary,
body[data-theme] .processHistoryTimeline > .msg.assistant.progressCommentary,
body[data-theme] .sideChatMessages > .msg.assistant.progressCommentary {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 2px 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}

body[data-theme] .completionTimeline > .msg.progressCommentary > .msgBody,
body[data-theme] .liveProcessTimeline > .msg.progressCommentary > .msgBody,
body[data-theme] .processHistoryTimeline > .msg.progressCommentary > .msgBody,
body[data-theme] .completionTimeline > .msg.assistant.progressCommentary > .msgBody,
body[data-theme] .liveProcessTimeline > .msg.assistant.progressCommentary > .msgBody,
body[data-theme] .processHistoryTimeline > .msg.assistant.progressCommentary > .msgBody,
body[data-theme] .sideChatMessages > .msg.progressCommentary > .msgBody,
body[data-theme] .sideChatMessages > .msg.assistant.progressCommentary > .msgBody {
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
}

body[data-theme] .completionTimeline > .msg.progressCommentary .markdownBody,
body[data-theme] .liveProcessTimeline > .msg.progressCommentary .markdownBody,
body[data-theme] .processHistoryTimeline > .msg.progressCommentary .markdownBody,
body[data-theme] .sideChatMessages > .msg.progressCommentary .markdownBody {
  color: var(--text);
}

body[data-theme] .completionTimeline > .msg.progressCommentary .markdownBody > :first-child,
body[data-theme] .liveProcessTimeline > .msg.progressCommentary .markdownBody > :first-child,
body[data-theme] .processHistoryTimeline > .msg.progressCommentary .markdownBody > :first-child {
  margin-top: 0;
}

body[data-theme] .completionTimeline > .msg.progressCommentary .markdownBody > :last-child,
body[data-theme] .liveProcessTimeline > .msg.progressCommentary .markdownBody > :last-child,
body[data-theme] .processHistoryTimeline > .msg.progressCommentary .markdownBody > :last-child {
  margin-bottom: 0;
}

body[data-theme="dark"] .completionTimeline > .msg.progressCommentary,
body[data-theme="dark"] .liveProcessTimeline > .msg.progressCommentary,
body[data-theme="dark"] .processHistoryTimeline > .msg.progressCommentary {
  color: #f3f4f6;
}

body[data-theme="dark"] .completionTimeline > .msg.progressCommentary .markdownBody,
body[data-theme="dark"] .liveProcessTimeline > .msg.progressCommentary .markdownBody,
body[data-theme="dark"] .processHistoryTimeline > .msg.progressCommentary .markdownBody {
  color: #f3f4f6;
}
body[data-theme] .completionTimeline > .msg.progressCommentary + .activityCluster,
body[data-theme] .liveProcessTimeline > .msg.progressCommentary + .activityCluster {
  margin-top: 2px;
}

body[data-theme] .completionTimeline > .activityCluster + .msg.progressCommentary,
body[data-theme] .liveProcessTimeline > .activityCluster + .msg.progressCommentary {
  margin-top: 2px;
}

/* Keep cluster summary one-line and tool hierarchy primary when settled. */
.activityCluster:not(.streaming) > summary .activityClusterText {
  color: var(--text-muted);
}


body[data-theme] .activityBatch {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
}

.liveProcessPanel {
  width: 100%;
  max-width: 100%;
  margin: 0 0 18px;
}

.liveProcessElapsed {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveProcessElapsed + .liveProcessTimeline {
  margin-top: 10px;
}

body[data-theme="dark"] .liveProcessElapsed {
  border-bottom-color: #303030;
  color: #acacac;
}

.liveProcessTimeline {
  width: 100%;
  gap: 14px;
}

body .liveProcessTimeline > .progressCommentary.streaming .markdownBody > :last-child,
body .liveProcessTimeline > .activityCluster.streaming > summary .activityClusterText {
  background: linear-gradient(105deg, var(--text-subtle) 0%, var(--text-muted) 28%, var(--text) 43%, var(--primary) 50%, var(--text) 57%, var(--text-muted) 72%, var(--text-subtle) 100%);
  background-position: 120% 50%;
  background-size: 220% 100%;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: liveProcessFlow 4.8s linear infinite;
  will-change: background-position;
}

body[data-theme] .msg.process.reasoningStatus {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme] .liveProcessTimeline > .msg.process.reasoningStatus.streaming {
  background: linear-gradient(90deg, var(--reasoning-flow-muted) 0%, var(--reasoning-flow-muted) 36%, var(--reasoning-flow-strong) 50%, var(--reasoning-flow-muted) 64%, var(--reasoning-flow-muted) 100%);
  background-position: 100% 50%;
  background-size: 220% 100%;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: liveProcessFlow 4.8s linear infinite;
}

body .liveProcessTimeline > .progressCommentary.streaming .markdownBody > :last-child::after {
  display: none;
}

body[data-theme="dark"] .liveProcessTimeline .markdownBody code,
body[data-theme="dark"] .completionTimeline .markdownBody code {
  background: #373737;
  color: #ffffff;
}

.completionTimeline > .msg.user.steeringUser {
  width: fit-content;
  max-width: 77%;
  margin: 6px 0 12px auto;
  padding: 8px 10px 8px;
  font-size: 13px;
}

body .msg.user.steeringUser {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 16px;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--primary) 12%, var(--surface)) 0%,
      color-mix(in srgb, var(--primary) 5%, var(--surface)) 100%
    );
  color: var(--text);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--primary) 12%, transparent),
    0 10px 22px color-mix(in srgb, var(--primary) 8%, transparent);
  padding: 8px 10px 8px;
  box-sizing: border-box;
}
body .msg.user.steeringUser::before {
  content: '引导';
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
body[data-theme="light"] .msg.user.steeringUser {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--primary) 9%, #ffffff) 0%,
      color-mix(in srgb, var(--primary) 3%, #ffffff) 100%
    );
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--primary) 10%, transparent),
    0 8px 18px rgba(47, 103, 216, 0.08);
}
body[data-theme="dark"] .msg.user.steeringUser {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--primary) 16%, var(--surface)) 0%,
      color-mix(in srgb, var(--primary) 7%, var(--surface)) 100%
    );
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--primary) 16%, transparent),
    0 12px 26px rgba(0, 0, 0, 0.22);
}
body .msg.user.steeringUser > .msgBody,
body .msg.user.steeringUser > .msgBody.markdownBody {
  width: 100%;
  color: var(--text);
}
body .msg.user.steeringUser .markdownBody,
body .msg.user.steeringUser .markdownBody p,
body .msg.user.steeringUser .markdownBody li,
body .msg.user.steeringUser .markdownBody code {
  color: inherit;
}
body .msg.user.steeringUser.optimistic {
  opacity: 0.9;
  border-style: dashed;
}
body .msg.user.steeringUser .msgActions {
  margin-top: 6px;
  align-self: stretch;
}
body .msg.user.steeringUser .userAttachmentStack,
body .msg.user.steeringUser.hasInputImage .userAttachmentStack {
  width: min(220px, 100%);
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 8px 0;
  align-self: stretch;
}

body .msg.user.steeringUser .userAttachmentStack.single,
body .msg.user.steeringUser.hasInputImage .userAttachmentStack.single {
  width: 100px;
  max-width: 100%;
  align-self: flex-end;
}
body .msg.user.steeringUser .userAttachmentStack .userAttachment:nth-child(n+2) {
  display: none;
}

body .msg.user.steeringUser .messageTime {
  color: var(--text-muted);
}

.completionTimeline > .msg.user.steeringUser.optimistic {
  opacity: 0.88;
}

/* Browser-comment inputs: compact cards that stay in the main conversation flow. */
body .msg.user.browserCommentSteering,
body .msg.user.hasInputImage.browserCommentSteering {
  display: flex;
  flex: 0 0 auto;
  width: fit-content;
  max-width: min(280px, 88%);
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: 4px 0 10px auto;
  overflow: visible;
  padding: 0;
  box-sizing: border-box;
}

body .msg.user.steeringUser.browserCommentSteering::before {
  margin: 0 0 0;
}

body .msg.user.browserCommentSteering::after {
  display: none;
}

body .msg.user.steeringUser.browserCommentSteering .userAttachmentStack,
body .msg.user.steeringUser.browserCommentSteering.hasInputImage .userAttachmentStack,
.browserCommentSteering .userAttachmentStack {
  width: min(220px, 100%);
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  align-self: flex-end;
}

body .msg.user.steeringUser.browserCommentSteering .userAttachmentStack.single,
body .msg.user.steeringUser.browserCommentSteering.hasInputImage .userAttachmentStack.single,
.browserCommentSteering .userAttachmentStack.single {
  width: 100px;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  align-self: flex-end;
}

body .msg.user.steeringUser.browserCommentSteering .userAttachment,
.browserCommentSteering .userAttachment {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  overflow: hidden;
}

body .msg.user.steeringUser.browserCommentSteering .userAttachment img,
.browserCommentSteering .userAttachment img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center top;
}

body .msg.user.steeringUser.browserCommentSteering > .msgBody,
body .msg.user.steeringUser.browserCommentSteering > .msgBody.markdownBody,
.browserCommentSteering > .browserCommentSource {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border-radius: 16px;
  background: color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  align-self: flex-end;
}

.browserCommentSteering > .msgBody.markdownBody p {
  margin: 0;
}

body .msg.user.steeringUser {
  gap: 6px;
}

body .msg.user.steeringUser .userAttachmentStack,
body .msg.user.steeringUser.hasInputImage .userAttachmentStack {
  margin: 0;
}

body .msg.user.steeringUser .msgActions {
  margin-top: 2px;
}

.turnResultArtifacts {
  display: grid;
  width: min(780px, 100%);
  max-width: min(780px, 100%);
  align-self: center;
  gap: 10px;
  margin-top: -4px;
}

.turnResultCard {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}

.editedFilesResult {
  width: min(160px, 100%);
  max-width: 100%;
  justify-self: center;
  overflow: hidden;
  border-radius: 999px;
}

.editedFilesResult:not(.live):not([open]) {
  width: max-content;
  max-width: 100%;
}

.editedFilesResult:not(.live):not([open]) > .turnResultHead {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  grid-template-columns: none;
  flex-wrap: nowrap;
}

.turnResultHead {
  display: inline-grid;
  min-height: 32px;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0 10px;
  list-style: none;
}

.turnResultHead::marker,
.turnResultHead::-webkit-details-marker {
  display: none;
  content: "";
}

.turnResultHead > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editedFilesResult.withPlan {
  width: max-content;
  max-width: 100%;
  overflow: visible;
}

.editedFilesResult.withPlan > .turnResultHead {
  position: relative;
  display: inline-flex;
  width: max-content;
  min-height: 36px;
  max-width: 100%;
  grid-template-columns: none;
  gap: 7px;
  padding-inline: 12px;
}

.editedFilesResult.planOnly > .turnResultHead {
  cursor: default;
}

.turnPlanProgressRing {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: conic-gradient(var(--info) var(--turn-plan-progress), var(--border-strong) 0);
  transform: rotate(-90deg);
}

.turnPlanProgressRing::after {
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--surface);
  content: "";
}

.turnResultHead > .turnPlanProgressLabel {
  flex: 0 0 auto;
  overflow: visible;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-overflow: clip;
}

.turnPlanTooltip {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(100% + 8px);
  display: grid;
  width: max-content;
  min-width: 270px;
  max-width: min(360px, calc(100vw - 32px));
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
  visibility: hidden;
}

.editedFilesResult.withPlan:hover .turnPlanTooltip,
.editedFilesResult.withPlan:focus-within .turnPlanTooltip {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.turnPlanTooltipStep {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.turnPlanTooltipMarker {
  width: 8px;
  height: 8px;
  margin-top: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
}

.turnPlanTooltipStep[data-status="completed"] .turnPlanTooltipMarker {
  border-color: var(--success);
  background: var(--success);
}

.turnPlanTooltipStep[data-status="in_progress"] {
  color: var(--text);
  font-weight: 650;
}

.turnPlanTooltipStep[data-status="in_progress"] .turnPlanTooltipMarker {
  border-color: var(--info);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--info) 18%, transparent);
}

.turnPlanTooltipText {
  min-width: 0;
  overflow-wrap: anywhere;
}

.turnResultDivider {
  flex: 0 0 auto;
  color: var(--text-subtle);
  font-size: 14px;
  line-height: 1;
}

.turnResultHead > .turnResultFileLabel {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}

.turnResultStatus {
  display: inline-flex;
  min-height: 22px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--success) 24%, transparent);
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.turnResultStatus::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.editedFilesResult[open] {
  width: min(520px, 100%);
  max-width: 100%;
  border-radius: var(--radius);
}

.editedFilesResult[open] > .turnResultHead {
  display: grid;
  width: 100%;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 72%, var(--surface));
  padding: 0 12px;
  transition: background 160ms var(--ease);
}

.editedFilesResult[open] > .turnResultHead:hover {
  background: var(--surface-hover);
}

.editedFilesResult > .turnResultHead:focus-visible {
  box-shadow: inset 0 0 0 2px var(--primary);
}

.editedFilesResult[open] > .turnResultHead > .turnResultFileLabel {
  color: var(--text);
  font-weight: 680;
}

.editedFilesResult.withPlan[open] > .turnResultHead {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.editedFilesContent {
  display: grid;
  min-width: 0;
}

.editedFilesContent > .turnResultActions {
  justify-content: flex-end;
  padding: 9px 12px 0;
}

.turnResultIdentity {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.turnResultIdentity > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.turnResultIdentity strong,
.webPreviewCopy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
}

.turnResultStats,
.webPreviewCopy span {
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turnResultStats {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  overflow: visible;
  color: var(--text-subtle);
  font: 13px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.turnResultStat.added {
  color: var(--success);
}

.turnResultStat.removed {
  color: var(--danger);
}

.turnResultIcon {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
}

.turnResultIcon.preview {
  border-color: color-mix(in srgb, var(--info) 34%, var(--border));
  background: color-mix(in srgb, var(--info) 9%, var(--surface));
  color: var(--info);
}

.turnResultIcon .lucide {
  width: 15px;
  height: 15px;
}

.turnResultActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

.turnResultAction {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 650;
}

.turnResultAction:hover,
.turnResultAction:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.turnResultAction .lucide {
  width: 13px;
  height: 13px;
}

.editedFilesList {
  display: grid;
  padding: 4px 12px 7px;
}

.editedFilesContent > .turnResultActions + .editedFilesList {
  margin-top: 5px;
  border-top: 1px solid var(--border);
}

body[data-theme="dark"] .editedFilesResult:not([open]) {
  border-color: #383838;
  background: #272727;
  box-shadow: none;
}

body[data-theme="dark"] .editedFilesResult.withPlan .turnPlanProgressRing::after {
  background: #272727;
}

body[data-theme="dark"] .editedFilesResult.withPlan .turnPlanProgressRing {
  background: conic-gradient(#339cff var(--turn-plan-progress), #2b3c4f 0);
}

body[data-theme="dark"] .editedFilesResult.withPlan .turnPlanProgressLabel,
body[data-theme="dark"] .editedFilesResult.withPlan .turnResultFileLabel {
  color: #bbbbbb;
}

body[data-theme="dark"] .editedFilesResult .turnResultStat.added {
  color: #3fc977;
}

body[data-theme="dark"] .editedFilesResult .turnResultStat.removed {
  color: #fa423e;
}

.editedFileRow {
  display: grid;
  min-height: 31px;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 11px;
}

.editedFileRow > .lucide {
  width: 13px;
  height: 13px;
  color: var(--text-subtle);
}

.editedFileName {
  overflow: hidden;
  color: var(--text-muted);
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editedFileMeta {
  color: var(--text-subtle);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.webPreviewResult {
  display: grid;
  min-height: 58px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
}

.webPreviewCopy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.activityItem > summary::marker,
.activityItem > summary::-webkit-details-marker {
  display: none;
  content: "";
}

.activityBatch {
  display: grid;
  gap: 3px;
}

body[data-theme] .activityCluster {
  --activity-icon-box: 16px;
  --activity-icon-size: 14px;
  --activity-row-height: 24px;
  --activity-rail: var(--border);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
}

@supports (color: color-mix(in srgb, black 50%, transparent)) {
  body[data-theme] .activityCluster {
    --activity-rail: color-mix(in srgb, var(--text-subtle) 42%, transparent);
  }
}

.activityCluster > summary::marker,
.activityCluster > summary::-webkit-details-marker {
  display: none;
  content: "";
}

.activityClusterSummary {
  display: grid;
  min-height: var(--activity-row-height);
  width: 100%;
  grid-template-columns: var(--activity-icon-box) minmax(0, 1fr) 14px;
  align-items: center;
  column-gap: 8px;
  cursor: pointer;
  list-style: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.activityClusterSummary:hover {
  color: var(--text);
}

.activityClusterSummary:hover .activityClusterText,
.activityClusterSummary:focus-visible .activityClusterText,
.activityClusterSummary:hover .activityClusterIcon,
.activityClusterSummary:focus-visible .activityClusterIcon,
.activityClusterSummary:hover .activityClusterChevron,
.activityClusterSummary:focus-visible .activityClusterChevron {
  color: var(--text);
}

.activityClusterSummary:focus-visible {
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--primary-line);
}

.activityClusterText {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  justify-self: stretch;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activityCluster.streaming .activityClusterText {
  color: var(--text-subtle);
}

.activityClusterIcon {
  min-width: var(--activity-icon-box);
  color: var(--text-muted);
  opacity: 1;
  visibility: visible;
}

.activityClusterIcon .lucide {
  display: block;
  width: var(--activity-icon-size);
  height: var(--activity-icon-size);
  color: currentColor;
  stroke: currentColor;
}

.activityClusterChevron {
  width: 13px;
  height: 13px;
  justify-self: end;
  color: var(--text-subtle);
  opacity: 0.82;
  transition: transform 160ms var(--ease), opacity 140ms var(--ease);
}

.activityCluster[open] > summary .activityClusterChevron {
  opacity: 1;
  transform: rotate(90deg);
}

.activityCluster > summary:hover .activityClusterChevron,
.activityCluster > summary:focus-visible .activityClusterChevron {
  opacity: 1;
}

.activityClusterItems {
  position: relative;
  display: grid;
  gap: 3px;
  margin: 4px 0 6px 8px;
  padding: 0 0 0 17px;
}

.activityClusterItems::before {
  position: absolute;
  top: 2px;
  bottom: 6px;
  left: 0;
  width: 1px;
  background: var(--activity-rail);
  content: "";
  pointer-events: none;
}

.activityCluster:not([open]) > .activityClusterItems {
  display: none;
}

.activityClusterItems > .activityBatch {
  width: 100%;
  max-width: 100%;
}

.activityItem {
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.activityCluster .activityItem {
  color: var(--text-subtle);
}

.activityItemSummary {
  display: grid;
  min-height: var(--activity-row-height, 24px);
  grid-template-columns: var(--activity-icon-box, 16px) auto minmax(0, 1fr) auto 13px;
  align-items: center;
  column-gap: 6px;
  color: inherit;
  cursor: pointer;
  line-height: 20px;
  list-style: none;
}

.activityItem.skillTarget .activityItemSummary {
  width: max-content;
  max-width: 100%;
  grid-template-columns: var(--activity-icon-box, 16px) auto max-content;
}

.activityItemSummary.standalone {
  grid-template-columns: var(--activity-icon-box, 16px) minmax(0, 1fr) auto 13px;
}

.activityItem.static .activityItemSummary {
  cursor: default;
}

.activityItemSummary:hover {
  color: var(--text);
}

.activityItem.static .activityItemSummary:hover {
  color: var(--text-muted);
}

.activityCluster .activityItemSummary:hover {
  color: var(--text-muted);
}

.activityCluster .activityItem.static .activityItemSummary:hover {
  color: inherit;
}

.activityCluster .activityItem[data-current="true"] > .activityItemSummary,
.activityCluster .activityItem[data-current="true"] > .activityItemSummary:hover {
  color: var(--text);
}

.agentActivityRow {
  display: grid;
  min-height: 30px;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) 13px;
  align-items: center;
  gap: 9px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  list-style: none;
  outline: none;
}

body[data-theme] .completionTimeline > .msg.agentActivityGroup {
  display: flex;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 6px;
  color: var(--text-muted);
  padding: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
}

.agentActivityGroup > .activityBatch {
  display: contents;
}

.agentActivityGroup .agentActivityItem {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

.agentActivityGroup .agentActivityRow {
  display: inline-flex;
  min-height: 28px;
  width: max-content;
  max-width: 100%;
  gap: 0;
}

.agentActivityGroup .agentActivityItem > .agentActivityRow .agentActivityStatus,
.agentActivityGroup .agentActivityItem > .agentActivityRow .agentActivityChevron {
  display: none;
}

.agentActivityGroupStatus {
  flex: 0 0 auto;
  margin-left: 2px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

.agentActivityGroupStatus[data-trace-state="starting"],
.agentActivityGroupStatus[data-trace-state="running"] {
  color: var(--warning);
}

.agentActivityGroupStatus[data-trace-state="done"],
.agentActivityGroupStatus[data-trace-state="updated"] {
  color: var(--text-muted);
}

.agentActivityGroupStatus[data-trace-state="error"],
.agentActivityGroupStatus[data-trace-state="interrupted"] {
  color: var(--danger);
}

.agentActivityGroup .agentActivityItem[open] {
  width: 100%;
  flex: 1 0 100%;
}

.agentActivityItem > summary::marker,
.agentActivityItem > summary::-webkit-details-marker {
  display: none;
  content: "";
}

.agentActivityRow:hover {
  color: var(--text);
}

.agentActivityRow:focus-visible {
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--primary-line);
}

.agentActivityRow:hover .agentActivityIdentity,
.agentActivityItem[open] > .agentActivityRow .agentActivityIdentity {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.agentActivityIdentity {
  display: inline-flex;
  min-width: 0;
  height: 28px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--text-muted);
  padding: 0 10px 0 8px;
}

body[data-theme="dark"] .completionTimeline .agentActivityIdentity {
  border-color: #242424;
  background: transparent;
}

body[data-theme="dark"] .completionTimeline .agentActivityGroupStatus[data-trace-state="starting"],
body[data-theme="dark"] .completionTimeline .agentActivityGroupStatus[data-trace-state="running"],
body[data-theme="dark"] .completionTimeline .agentActivityStatus[data-trace-state="starting"],
body[data-theme="dark"] .completionTimeline .agentActivityStatus[data-trace-state="running"] {
  color: var(--text-muted);
}

.agentActivityIcon {
  display: grid;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  place-items: center;
  color: #f0c83e;
}

.agentActivityIcon .lucide {
  width: 15px;
  height: 15px;
  stroke-width: 2.35;
}

.agentActivityLabel,
.agentActivityStatus {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentActivityLabel {
  max-width: 150px;
  font-weight: 500;
}

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

.agentActivityStatus[data-trace-state="starting"],
.agentActivityStatus[data-trace-state="running"] {
  color: var(--warning);
}

.agentActivityStatus[data-trace-state="done"] {
  color: var(--text-muted);
}

.agentActivityStatus[data-trace-state="error"],
.agentActivityStatus[data-trace-state="interrupted"] {
  color: var(--danger);
}

.agentActivityChevron {
  justify-self: end;
}

.agentActivityItem[open] > .agentActivityRow .agentActivityChevron {
  color: var(--text-muted);
  transform: rotate(90deg);
}

.subagentTraceContent {
  width: min(720px, calc(100% - 21px));
  margin: 5px 0 10px 21px;
  border-left: 1px solid var(--border);
  padding: 7px 0 4px 12px;
}

.subagentTraceMeta {
  margin: 0 0 8px;
  overflow: hidden;
  color: var(--text-subtle);
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subagentTraceMeta[hidden],
.subagentTraceNotice[hidden],
.subagentTraceRetry[hidden] {
  display: none;
}

.subagentTraceNotice {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  color: var(--text-subtle);
  font-size: 12px;
}

.subagentTraceNotice.loading::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--warning);
  content: "";
  animation: streamDot 1.1s ease-in-out infinite;
}

.subagentTraceNotice.error {
  color: var(--danger);
}

.subagentTraceTimeline {
  display: grid;
  max-height: min(58vh, 560px);
  gap: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px 8px 2px 0;
}

.subagentTraceMessage {
  min-width: 0;
  border-left: 2px solid var(--border-strong);
  padding: 1px 0 1px 11px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.62;
}

.subagentTraceMessage.final {
  border-left-color: var(--success);
}

.subagentTraceMessageHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.subagentTraceMessage.final .subagentTraceMessageHead {
  color: var(--success);
}

.subagentTraceMarkdown {
  min-width: 0;
}

.subagentTraceMarkdown > :last-child {
  margin-bottom: 0;
}

.subagentTraceTime {
  flex: 0 0 auto;
  color: var(--text-subtle);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0;
}

.subagentTraceTool {
  width: 100% !important;
  max-width: 100% !important;
}

.subagentTraceEvent {
  display: grid;
  min-height: 24px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
  color: var(--text-subtle);
  font-size: 11px;
  line-height: 1.5;
}

.subagentTraceEventIcon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.subagentTraceEventIcon .lucide {
  width: 13px;
  height: 13px;
}

.subagentTraceEvent.phase .subagentTraceEventIcon {
  color: var(--thinking);
}

.subagentTraceEvent.success .subagentTraceEventIcon {
  color: var(--success);
}

.subagentTraceEvent.error .subagentTraceEventIcon,
.subagentTraceEvent.interrupted .subagentTraceEventIcon {
  color: var(--danger);
}

.subagentTraceRetry {
  margin-top: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
}

.subagentTraceRetry:hover,
.subagentTraceRetry:focus-visible {
  border-color: var(--primary-line);
  color: var(--text);
  outline: none;
}

.activityBatch.streaming .agentActivityIcon {
  animation: streamDot 1.1s ease-in-out infinite;
}

.activityItemChevron {
  width: 13px;
  height: 13px;
  grid-column: -1;
  color: var(--text-subtle);
  transition: transform 160ms var(--ease), color 140ms var(--ease), opacity 140ms var(--ease);
}

.activityCluster .activityItemChevron {
  opacity: 0;
}

.activityCluster .activityItem[data-current="true"] > .activityItemSummary .activityItemChevron,
.activityCluster .activityItem[open] > .activityItemSummary .activityItemChevron {
  opacity: 1;
}

.activityCluster .activityItem:not([data-current="true"]) > .activityItemSummary:hover .activityItemChevron,
.activityCluster .activityItem:not([data-current="true"]) > .activityItemSummary:focus-visible .activityItemChevron {
  opacity: 0.72;
}

.activityItem[open] > .activityItemSummary .activityItemChevron {
  color: var(--text-muted);
  transform: rotate(90deg);
}

.activityItem.withImages[open] > .activityItemSummary {
  color: var(--text);
}

.activityImageGallery {
  display: grid;
  width: min(560px, calc(100% - 25px));
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  margin: 5px 0 9px 25px;
}

.activityItem.withImages > .activityImageGallery {
  margin-top: 8px;
}

.activityImageGallery.single {
  width: min(240px, calc(100% - 25px));
  grid-template-columns: minmax(0, 1fr);
}

.activityImagePreview {
  position: relative;
  display: grid;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
}

.activityImagePreview.loaded {
  aspect-ratio: auto;
}

.activityImagePreview:hover {
  border-color: transparent;
  background: transparent;
}

.activityImagePreview:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.activityImagePreview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.activityImagePreview.loaded img {
  height: auto;
}

.activityImagePreview.unavailable {
  cursor: default;
  opacity: 0.72;
}

.activityImageUnavailable {
  display: grid;
  place-items: center;
  gap: 7px;
  color: var(--text-subtle);
  font-size: 12px;
}

.activityImageUnavailable[hidden] {
  display: none;
}

.activityImageUnavailable .lucide {
  width: 18px;
  height: 18px;
}

.activityItemIcon {
  display: grid;
  width: var(--activity-icon-box, 16px);
  height: var(--activity-icon-box, 16px);
  place-items: center;
  color: var(--text-subtle);
}

.activityCluster .activityItemIcon {
  color: inherit;
}

.activityItemIcon .lucide {
  width: var(--activity-icon-size, 14px);
  height: var(--activity-icon-size, 14px);
  stroke-width: 1.8;
}

.activityVerb {
  color: var(--text-muted);
  white-space: nowrap;
}

.activityCluster .activityVerb {
  color: inherit;
}

.activityTargetLine {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 4px;
  overflow: hidden;
}

.activityTarget {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activityCluster .activityTarget {
  color: inherit;
}

.activityItem:not(.static) .activityTarget,
.activityItem.fileTarget .activityTarget {
  text-decoration: underline dotted color-mix(in srgb, var(--text-muted) 58%, transparent);
  text-underline-offset: 3px;
}

.activitySuffix {
  flex: 0 0 auto;
  color: var(--text-muted);
  white-space: nowrap;
}

.activityCluster .activitySuffix {
  color: inherit;
}

.activityBatch.streaming .activityItem:last-child .activityItemIcon {
  color: var(--text-muted);
  animation: streamDot 1.1s ease-in-out infinite;
}

.activityCluster .activityBatch.streaming .activityItem:last-child .activityItemIcon {
  color: inherit;
  animation: none;
}

.activityMeta {
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.activityItemContent {
  position: relative;
  margin: 3px 0 6px 21px;
  border-left: 1px solid var(--border);
  padding: 5px 30px 5px 10px;
}

.activityRaw {
  max-height: 180px;
  margin: 0;
  overflow: auto;
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.activityCopy {
  position: absolute;
  top: 3px;
  right: 2px;
}

body[data-theme] .msg.tool,
body[data-theme] .msg.thinking {
  max-width: min(780px, 100%);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

body[data-theme] .msg.tool {
  color: var(--text-muted);
}

body[data-theme] .msg.thinking {
  color: var(--text-muted);
}

body[data-theme] .msg.context {
  align-self: flex-start;
  max-width: min(680px, 90%);
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.5;
}

body[data-theme] .msg.context .toolSummaryTag {
  color: var(--text-subtle);
}

body[data-theme] .msg.context .toolContent .msgBody {
  max-height: min(34vh, 280px);
  overflow: auto;
  color: var(--text-muted);
  white-space: pre-wrap;
}

body .toolDetails summary {
  display: block;
  min-height: 30px;
  border-radius: 4px;
  padding: 5px 2px;
}

.toolDetails summary::marker,
.toolDetails summary::-webkit-details-marker {
  display: none;
  content: "";
}

body .toolDetails summary:hover,
body .toolDetails[open] summary {
  background: transparent;
  color: var(--text);
}

.toolSummaryRow {
  display: flex;
  width: 100%;
  gap: 6px;
}

.toolChevron {
  width: 13px;
  height: 13px;
  transition: transform 160ms var(--ease);
}

.toolDetails[open] .toolChevron {
  transform: rotate(90deg);
}

.toolSummaryTag {
  color: var(--text-subtle);
  font-size: 9px;
  letter-spacing: 0;
  opacity: 0.68;
}

.toolSummaryText {
  color: var(--text-muted);
  font-weight: 560;
}

.toolContent {
  margin-left: 7px;
  border-top: 0;
  border-left: 1px solid var(--border);
  padding: 7px 0 8px 14px;
}

.msg.thinking.streaming {
  box-shadow: none;
}

body .msg.thinking.streaming .toolSummaryText::after {
  color: var(--thinking);
  content: " · 实时生成";
  font-weight: 600;
}

body .msg.thinking.streaming .toolSummaryRow::after {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--thinking);
  box-shadow: 0 0 0 4px var(--thinking-soft);
  content: "";
  animation: streamDot 1s ease-in-out infinite;
}

body .chat > :is(
  .msg:not(.user):not(.inputImage),
  .activityCluster,
  .liveProcessPanel
) {
  width: min(var(--conversation-width), 100%);
  max-width: var(--conversation-width);
  align-self: center;
}

/* Keep the conversation artifacts and the composer on the same content rail. */
body .chat {
  padding-right: 30px;
  padding-left: 30px;
}

/* Dynamic bottom inset: JS sets --composer-overlay-height from live composer+queue height. */
body .chat {
  padding-bottom: max(132px, calc(var(--composer-overlay-height, 132px) + 12px));
  scroll-padding-bottom: max(132px, calc(var(--composer-overlay-height, 132px) + 12px));
}

body .chat > :is(
  .msg:not(.user):not(.inputImage),
  .activityCluster,
  .liveProcessPanel,
  .turnResultArtifacts
) {
  width: min(var(--composer-width), 100%);
  max-width: var(--composer-width);
  align-self: center;
}

body .chat > :is(.msg.user, .msg.image.inputImage) {
  max-width: min(var(--conversation-width), 77%);
  margin-right: max(0px, calc((100% - var(--conversation-width)) / 2));
}

/* Keep browser-comment cards compact after the generic user-message rail rule. */
body .chat > .msg.user.browserCommentSteering,
body .chat > .msg.user.hasInputImage.browserCommentSteering {
  width: fit-content;
  max-width: min(280px, 88%);
}

body .chat > .msg.user.browserCommentSteering > .msgBody.browserCommentSource,
body .chat > .msg.user.browserCommentSteering > .msgBody.markdownBody.browserCommentSource {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 16px;
  background: color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  align-self: flex-end;
}

body .chat > .msg.user.browserCommentSteering > .msgBody.browserCommentSource > p {
  margin: 0;
}

/* Design annotations stay compact in history; their change list is an overlay. */
body .chat > .msg.user.browserCommentSteering > .msgBody.browserCommentSource.browserAnnotationSource,
body .chat > .msg.user.browserCommentSteering > .msgBody.markdownBody.browserCommentSource.browserAnnotationSource {
  overflow: visible;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

body .msg.user.browserCommentSteering .browserAnnotationCard {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
}

body .msg.user.browserCommentSteering .browserAnnotationTrigger {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--primary));
  border-radius: 8px;
  background: color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--text);
  cursor: pointer;
  padding: 6px 10px;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  user-select: none;
}

body .msg.user.browserCommentSteering .browserAnnotationTrigger::-webkit-details-marker,
body .msg.user.browserCommentSteering .browserAnnotationTrigger::marker {
  display: none;
  content: '';
}

body .msg.user.browserCommentSteering .browserAnnotationTrigger .lucide,
body .msg.user.browserCommentSteering .browserAnnotationTrigger > i {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

body .msg.user.browserCommentSteering .browserAnnotationTrigger:hover {
  background: color-mix(in oklab, var(--primary) 10%, var(--surface));
}

body .msg.user.browserCommentSteering .browserAnnotationTrigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body .msg.user.browserCommentSteering .browserAnnotationDetails {
  display: block;
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 100%;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  max-height: min(48vh, 260px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised, var(--surface));
  color: var(--text);
  box-shadow: none;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms var(--ease), visibility 140ms var(--ease), transform 140ms var(--ease);
}

body .msg.user.browserCommentSteering .browserAnnotationDetails.markdownBody ul,
body .msg.user.browserCommentSteering .browserAnnotationDetails.markdownBody ol {
  margin: 0;
  padding-left: 20px;
}

body .msg.user.browserCommentSteering .browserAnnotationDetails.markdownBody li + li {
  margin-top: 4px;
}

@media (hover: hover) and (pointer: fine) {
  body .msg.user.browserCommentSteering .browserAnnotationCard:hover > .browserAnnotationDetails,
  body .msg.user.browserCommentSteering .browserAnnotationCard.browserAnnotationPointerOver > .browserAnnotationDetails,
  body .msg.user.browserCommentSteering .browserAnnotationTrigger:focus-visible + .browserAnnotationDetails {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (hover: none), (pointer: coarse) {
  body .msg.user.browserCommentSteering .browserAnnotationTrigger {
    min-height: 40px;
  }

  body .msg.user.browserCommentSteering .browserAnnotationCard[open] > .browserAnnotationTrigger {
    background: color-mix(in oklab, var(--primary) 10%, var(--surface));
  }

  body .msg.user.browserCommentSteering .browserAnnotationCard[open] > .browserAnnotationDetails {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  body .msg.user.browserCommentSteering .browserAnnotationDetails {
    max-width: min(280px, calc(100vw - 28px));
  }
}

@media (prefers-reduced-motion: reduce) {
  body .msg.user.browserCommentSteering .browserAnnotationDetails {
    transition: none;
  }
}

body .msg.assistant .responseAnnotationCard {
  position: relative;
  display: inline-block;
  margin: 0 2px;
  vertical-align: baseline;
}

body .msg.assistant .responseAnnotationTrigger {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 0.88em;
  font-weight: 600;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 48%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body .msg.assistant .responseAnnotationTrigger:hover {
  color: color-mix(in srgb, var(--primary) 82%, var(--text));
  text-decoration-color: currentColor;
}

body .msg.assistant .responseAnnotationTrigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

body .msg.assistant .responseAnnotationDetails {
  display: block;
  position: absolute;
  z-index: 12;
  left: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(340px, calc(100vw - 28px));
  max-height: min(52vh, 300px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised, var(--surface));
  color: var(--text);
  box-shadow: 0 10px 28px color-mix(in srgb, #000 16%, transparent);
  padding: 11px 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms var(--ease), visibility 140ms var(--ease), transform 140ms var(--ease);
}

body .msg.assistant .responseAnnotationField {
  display: block;
  min-width: min(260px, calc(100vw - 54px));
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.5;
}

body .msg.assistant .responseAnnotationField + .responseAnnotationField {
  margin-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  padding-top: 9px;
}

body .msg.assistant .responseAnnotationLabel {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

body .msg.assistant .responseAnnotationText {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  body .msg.assistant .responseAnnotationCard:hover > .responseAnnotationDetails,
  body .msg.assistant .responseAnnotationCard.browserAnnotationPointerOver > .responseAnnotationDetails,
  body .msg.assistant .responseAnnotationTrigger:focus-visible + .responseAnnotationDetails {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (hover: none), (pointer: coarse) {
  body .msg.assistant .responseAnnotationTrigger {
    min-height: 36px;
    padding: 6px 0;
  }

  body .msg.assistant .responseAnnotationCard.open > .responseAnnotationDetails {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  body .msg.assistant .responseAnnotationDetails {
    max-width: calc(100vw - 28px);
  }

  body .msg.assistant .responseAnnotationField {
    min-width: min(240px, calc(100vw - 54px));
  }
}

@media (prefers-reduced-motion: reduce) {
  body .msg.assistant .responseAnnotationDetails {
    transition: none;
  }
}

body .msg.assistant > .msgBody > :not(.memoryCitations),
body[data-theme] .msg.process,
body[data-theme] .activityBatch,
body[data-theme] .activityCluster,
.turnResultArtifacts {
  max-width: 100%;
}

body[data-theme] .activityBatch,
body[data-theme] .activityCluster,
.turnResultArtifacts {
  width: 100%;
}

.editedFilesResult[open] {
  width: 100%;
}

body .composer {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  border-top: 0;
  background: transparent;
  padding: 0 0 28px;
}

body .composer:has(> .composerProjectPicker:not(.hidden)) {
  width: min(var(--composer-width), calc(100% - 34px));
  margin: 0 auto 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

body[data-theme="light"] .composer {
  background: transparent;
}

body[data-theme="light"] .composer:has(> .composerProjectPicker:not(.hidden)) {
  border-color: transparent;
  background: transparent;
}

body[data-theme="light"] .composerProjectToggle {
  border-color: transparent;
  background: #f6f6f6;
  box-shadow: none;
}

body[data-theme="light"] .composerProjectToggle:hover,
body[data-theme="light"] .composerProjectToggle[aria-expanded="true"] {
  background: #f6f6f6;
}

body[data-theme="light"] .box,
body[data-theme="light"] .box:focus-within {
  border-color: #e2e2e2;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(31, 35, 41, 0.06);
}

.composer > * {
  width: min(var(--composer-width), calc(100% - 60px));
  margin-inline: auto;
}

body .composer > .editedFilesResult.live {
  flex: 0 0 auto;
  align-self: center;
  justify-self: auto;
  margin: 0 auto 8px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body .composer > .editedFilesResult.live:not([open]) {
  width: max-content;
  max-width: 100%;
}

body .composer > .editedFilesResult.live.withPlan:not([open]) {
  width: max-content;
  max-width: 100%;
}

body .composer > .editedFilesResult.live[open] {
  width: min(520px, 100%);
  max-height: min(38vh, 360px);
  overflow: auto;
}

body .nativeNotice {
  display: none;
}

body .nativeHistoryLoad {
  align-self: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
}

body .nativeHistoryLoad:hover {
  border-color: var(--primary-line);
  background: var(--primary-soft);
  color: var(--text);
}

.composerProjectPicker {
  position: relative;
  z-index: 1;
  width: min(var(--composer-width), calc(100% - 60px));
  margin-bottom: -14px;
}

body .composer:has(> .composerProjectPicker:not(.hidden)) > .composerProjectPicker {
  width: calc(100% - 29px);
}

body .composer:has(> .composerProjectPicker:not(.hidden)) > .box {
  width: 100%;
}

.composerProjectToggle {
  display: flex;
  width: 100%;
  height: 46px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 20px 20px 10px 10px;
  background: var(--surface-hover);
  color: var(--text-muted);
  padding: 0 16px 7px;
  font-size: 12px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.composerProjectToggle:hover,
.composerProjectToggle[aria-expanded="true"] {
  background: var(--surface-raised);
  color: var(--text);
}

.composerProjectToggle:disabled {
  cursor: default;
  opacity: 1;
}

.composerProjectToggle .lucide {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.composerProjectName {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composerProjectChevron {
  display: none;
}

.composerProjectToggle:disabled .composerProjectChevron {
  display: none;
}

.composerProjectPanel {
  position: absolute;
  z-index: 40;
  left: 0;
  bottom: calc(100% + 8px);
  display: grid;
  width: min(460px, 100%);
  max-height: min(440px, 62vh);
  gap: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}

.composerProjectOptions {
  display: grid;
  max-height: 290px;
  gap: 3px;
  overflow-y: auto;
}

.composerProjectOption {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  padding: 8px 9px;
  text-align: left;
}

.composerProjectOption:hover,
.composerProjectOption.active {
  background: var(--surface-hover);
  color: var(--text);
}

.composerProjectOption.active {
  box-shadow: inset 2px 0 0 var(--primary);
}

.composerProjectOption .lucide {
  width: 16px;
  height: 16px;
}

.composerProjectOption > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.composerProjectOption strong,
.composerProjectOption small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composerProjectOption strong {
  color: var(--text);
  font-size: 12px;
}

.composerProjectOption small {
  color: var(--text-subtle);
  font-size: 10px;
}

.composerProjectCustom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

body[data-theme] .composerProjectCustom input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 6px 9px;
  font-size: 11px;
}

.composerProjectApply {
  min-width: 54px;
  border: 0;
  border-radius: 8px;
  background: var(--text);
  color: var(--canvas);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 650;
}

.composerProjectPicker:not(.hidden) + .box {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

body .composerProjectPicker.hidden + .box {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

body .box {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(50px, auto) 34px;
  grid-template-columns: 34px max-content minmax(0, 1fr) max-content 34px;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  padding: 6px 10px 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}

body .box.runActive {
  grid-template-columns: 34px max-content minmax(0, 1fr) max-content 34px;
}

body .box:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.13);
}

/* Collapsed capsule composer (default idle): + / placeholder / mic
   Running capsule: + / 跟进 / mic / stop */
body .box.composerCollapsed {
  display: grid !important;
  grid-template-rows: 52px !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  align-items: center;
  gap: 0 !important;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border-radius: 999px !important;
  padding: 0 12px 0 10px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

body .box.composerCollapsed.runActive {
  grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important;
}

body .box.composerCollapsed:focus-within {
  border-radius: 999px !important;
}

body .box.composerCollapsed > .attachBtn {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  justify-self: start;
}

body[data-theme] .box.composerCollapsed textarea {
  grid-row: 1 !important;
  grid-column: 2 !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 36px !important;
  max-height: 36px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  resize: none !important;
  padding: 8px 10px !important;
  font-size: 15px !important;
  line-height: 20px !important;
  /* Let the capsule handle the first tap without giving the textarea a chance
     to invoke the mobile keyboard before the composer has expanded. */
  pointer-events: none;
  /* Keep the caret available for the deliberate input tap after expansion. */
  caret-color: auto;
}

body[data-theme] .box.composerCollapsed textarea:focus {
  caret-color: auto;
}

/* Hide expanded-only chrome in capsule mode */
body .box.composerCollapsed > .composerPermissionToggle,
body .box.composerCollapsed > .composerGoalIndicator,
body .box.composerCollapsed > .composerContextToggle,
body .box.composerCollapsed > .composerModelToggle,
body .box.composerCollapsed > .send:not(.cancelButton),
body .box.composerCollapsed > .composerPopover,
body .box.composerCollapsed > .fileInput,
body .box.composerCollapsed > #fileInput {
  display: none !important;
}

body .box.composerCollapsed > .composerMicBtn {
  display: grid !important;
  grid-row: 1 !important;
  grid-column: 3 !important;
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  place-items: center;
  justify-self: end;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

body .box.composerCollapsed.runActive > .composerMicBtn {
  justify-self: center;
}

body .box.composerCollapsed > .composerMicBtn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

body .box.composerCollapsed > .composerMicBtn .lucide {
  width: 18px;
  height: 18px;
}

/* Stop button visible on the right of running capsule */
body .box.composerCollapsed.runActive > .cancelButton {
  display: grid !important;
  grid-row: 1 !important;
  grid-column: 4 !important;
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  place-items: center;
  justify-self: end;
  border: 0;
  border-radius: 50%;
  background: var(--text) !important;
  color: var(--canvas) !important;
  padding: 0;
}

body .box.composerCollapsed:not(.runActive) > .cancelButton {
  display: none !important;
}

/* Expanded toolbar keeps mic before send/stop */
body .box.composerExpanded > .composerMicBtn,
body .box:not(.composerCollapsed) > .composerMicBtn {
  display: grid !important;
  grid-row: 2;
  grid-column: 5;
  width: 34px;
  min-width: 34px;
  height: 34px;
  place-items: center;
  justify-self: end;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

body .box.composerExpanded > .composerMicBtn:hover,
body .box:not(.composerCollapsed) > .composerMicBtn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

body .box.composerExpanded > .composerMicBtn .lucide,
body .box:not(.composerCollapsed) > .composerMicBtn .lucide {
  width: 18px;
  height: 18px;
}

/* Voice dictation active state */
body .box > .composerMicBtn.listening,
body .box.composerCollapsed > .composerMicBtn.listening,
body .box.composerExpanded > .composerMicBtn.listening,
body .box:not(.composerCollapsed) > .composerMicBtn.listening {
  background: color-mix(in srgb, var(--danger, #ef4444) 18%, transparent) !important;
  color: var(--danger, #ef4444) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #ef4444) 28%, transparent);
}
body .box > .composerMicBtn.listening .lucide,
body .box.composerCollapsed > .composerMicBtn.listening .lucide,
body .box.composerExpanded > .composerMicBtn.listening .lucide {
  color: inherit;
}

/* Shift send/stop right by one column to leave room for mic */
body .box.composerExpanded,
body .box:not(.composerCollapsed) {
  grid-template-columns: 34px max-content minmax(0, 1fr) max-content 34px 34px;
}

body .box.composerExpanded.runActive,
body .box:not(.composerCollapsed).runActive {
  grid-template-columns: 34px max-content minmax(0, 1fr) max-content 34px 34px;
}

/* Narrow screens: keep the middle goal/context track wide enough so the
   context toggle never overflows onto the permission toggle. */
@media (max-width: 520px) {
  body .box.composerExpanded > .composerModelToggle,
  body .box:not(.composerCollapsed) > .composerModelToggle {
    max-width: 120px;
  }
}

body .box.composerExpanded > .send:not(.cancelButton),
body .box:not(.composerCollapsed) > .send:not(.cancelButton) {
  grid-column: 6;
}

body .box.composerExpanded > .cancelButton,
body .box:not(.composerCollapsed) > .cancelButton {
  grid-column: 6;
}

body[data-theme="light"] .box.composerCollapsed {
  border-color: #e6e6e6;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(31, 35, 41, 0.08);
}

body[data-theme="dark"] .box.composerCollapsed {
  border-color: #3a3a3a;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* Session canvas wins over theme-only capsule fills. */
body[data-chat-bg="skin"] .box.composerCollapsed,
body[data-theme="light"][data-chat-bg="skin"] .box.composerCollapsed,
body[data-theme="dark"][data-chat-bg="skin"] .box.composerCollapsed {
  border-color: var(--primary-line);
  background: color-mix(in srgb, var(--skin-surface-strong) 78%, transparent);
  box-shadow: 0 10px 28px var(--skin-accent-glow);
}

body[data-chat-bg="custom"] .box.composerCollapsed,
body[data-theme="light"][data-chat-bg="custom"] .box.composerCollapsed,
body[data-theme="dark"][data-chat-bg="custom"] .box.composerCollapsed {
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

/* Keep file-change pill centered above capsule */
body .composer:has(> .box.composerCollapsed) > .editedFilesResult.live:not([open]) {
  margin-bottom: 10px;
}

/* Collapsed capsule should keep the same content width as the expanded box. */
body .composer > .box.composerCollapsed {
  width: min(var(--composer-width), calc(100% - 60px));
}

body .composer:has(> .box.composerCollapsed) {
  padding-bottom: max(32px, env(safe-area-inset-bottom, 0px) + 20px);
}

body.keyboardOpen .composer:has(> .box.composerCollapsed) {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}

body .box.drag {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

body[data-theme] .box textarea {
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: stretch;
  width: 100%;
  min-height: 50px;
  max-height: 180px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 4px 4px 6px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: none;
}

body[data-theme] .box textarea::placeholder {
  color: var(--text-subtle);
  opacity: 0.78;
}

body[data-theme="dark"] .box {
  border-color: #3b3b3b;
  background: var(--surface);
}

body[data-theme="dark"] .composerProjectToggle {
  border-color: #343434;
  background: #222222;
}

body[data-theme="light"] .composerProjectToggle {
  background: #f6f6f6;
}

body[data-theme] .box textarea:focus {
  box-shadow: none;
}

body[data-theme] .box textarea:disabled {
  background: transparent;
  color: var(--text-muted);
}

body .attachBtn {
  grid-row: 2;
  grid-column: 1;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

body .attachBtn:hover {
  border-color: transparent;
  background: var(--surface-hover);
  color: var(--text);
}

body[data-theme] .box .attachBtn {
  background: transparent;
}

.composerPermissionToggle {
  display: inline-flex;
  grid-row: 2;
  grid-column: 2;
  width: auto;
  min-width: 0;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--success);
  padding: 0 8px 0 4px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.composerPermissionToggle:hover,
.composerPermissionToggle[aria-expanded="true"] {
  background: var(--surface-hover);
}

.composerPermissionToggle[data-mode="full"] {
  color: #f2773d;
}

.composerPermissionToggle .lucide,
.attachBtn .lucide {
  width: 18px;
  height: 18px;
}

.composerPermissionToggle .buttonLabel {
  line-height: 1;
}

.composerGoalIndicator {
  display: inline-flex;
  grid-row: 2;
  grid-column: 3;
  width: 36px;
  min-width: 36px;
  height: 24px;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  justify-self: start;
  margin-left: 8px;
  border-left: 1px solid color-mix(in srgb, var(--border-strong) 60%, transparent);
  color: var(--text-muted);
  padding-left: 10px;
  pointer-events: none;
}

.composerGoalIndicator.hidden {
  display: none !important;
}

.composerGoalIndicator.isPaused {
  color: var(--warning, #b7791f);
}

.composerGoalIndicator.isBlocked {
  color: var(--danger);
}

.composerGoalIndicator .lucide {
  width: 18px;
  height: 18px;
}

.composerContextToggle {
  display: grid;
  grid-row: 2;
  grid-column: 3;
  width: 24px;
  min-width: 24px;
  height: 24px;
  place-items: center;
  justify-self: end;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

.composerContextToggle:hover,
.composerContextToggle:focus-visible,
.composerContextToggle[aria-expanded="true"] {
  background: var(--surface-hover);
  color: var(--text);
}

.composerContextRing {
  --context-progress: 0%;
  position: relative;
  /*
   * Keep the ring on an even pixel box so the 24px control centers it on
   * integer coordinates. A fractional 15px box made the top and bottom
   * anti-aliasing rows render with visibly different weights.
   */
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
  border-radius: 50%;
  background: conic-gradient(
    currentColor var(--context-progress),
    color-mix(in srgb, currentColor 24%, transparent) 0
  );
}

.composerContextRing::after {
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--surface);
  content: "";
}

body .composerContextPanel {
  right: 84px;
  width: min(176px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  gap: 1px;
  border-radius: 11px;
  padding: 7px 10px 8px;
  text-align: center;
}

.composerContextTitle {
  color: var(--text-subtle);
  font-size: 9px;
  font-weight: 560;
  line-height: 1.3;
}

.composerContextPercent {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 570;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.composerContextDetails {
  color: var(--text);
  font-size: 10.5px;
  font-weight: 560;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 520px) {
  body .composerContextPanel {
    right: 50%;
    transform: translateX(50%);
  }
}

.composerModelToggle {
  display: inline-flex;
  grid-row: 2;
  grid-column: 4;
  min-width: 0;
  max-width: 190px;
  height: 32px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 0 2px;
  font-size: 13px;
  box-shadow: none;
}

.composerModelToggle:hover,
.composerModelToggle:focus-visible,
.composerModelToggle[aria-expanded="true"] {
  background: transparent;
  box-shadow: none;
}

.composerModelToggle:disabled {
  cursor: not-allowed;
  background: transparent;
  opacity: 0.45;
}

.composerPermissionToggle:disabled {
  cursor: default;
  background: transparent;
  opacity: 1;
}

.composerModelToggle.running:disabled {
  cursor: default;
  opacity: 1;
  background: transparent;
}

.composerModelToggle.running:not(:disabled) {
  cursor: pointer;
  background: transparent;
}

.composerModelState {
  display: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--text-muted);
  border-radius: 50%;
}

.composerModelToggle.running .composerModelState {
  display: block;
  border-color: var(--text-muted);
  border-right-color: transparent;
  animation: spin 900ms linear infinite;
}

.composerModelName {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composerEffortName {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 500;
}

.composerEffortName.maximum {
  color: var(--primary);
  font-weight: 600;
}

.composerModelToggle .lucide {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--text-subtle);
}

body .send {
  display: grid;
  grid-row: 2;
  grid-column: 5;
  width: 34px;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--text);
  color: var(--canvas);
  padding: 0;
  transition: transform 140ms var(--ease), opacity 140ms var(--ease), background 140ms var(--ease);
}

body .send:hover {
  background: var(--text);
  transform: translateY(-1px);
}

body .send:disabled {
  background: #a4a7ab;
  color: #ffffff;
  opacity: 1;
  transform: none;
}

body .box.runActive > .send:not(.cancelButton):disabled {
  display: none;
}

body .cancelButton {
  grid-column: 5;
  background: var(--text) !important;
  color: var(--canvas) !important;
}

body .box.runActive:has(> .send:not(.cancelButton):not(:disabled)) > .cancelButton {
  display: none !important;
}

body .cancelButton:hover {
  background: var(--text) !important;
}

body .cancelButton .lucide {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
}

.promptQueue {
  /* Above the input capsule, not inside it. */
  position: relative;
  z-index: 2;
  display: block;
  /* Always shorter than the input capsule (.box uses composer-width - 60px). */
  width: min(680px, calc(var(--composer-width) - 48px), calc(100% - 108px));
  max-width: min(680px, calc(var(--composer-width) - 48px), calc(100% - 108px));
  box-sizing: border-box;
  max-height: min(28vh, 200px);
  margin: 0 auto 8px;
  overflow: hidden auto;
  border: 1px solid color-mix(in srgb, var(--border) 48%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 4px 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  pointer-events: auto;
}

.promptQueue.hidden {
  display: none !important;
}

body .composer > .promptQueue {
  width: min(680px, calc(var(--composer-width) - 48px), calc(100% - 108px));
  max-width: min(680px, calc(var(--composer-width) - 48px), calc(100% - 108px));
  margin: 0 auto 8px;
}

.threadGoalBar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: min(720px, calc(var(--composer-width) - 24px), calc(100% - 32px));
  max-width: min(720px, calc(var(--composer-width) - 24px), calc(100% - 32px));
  box-sizing: border-box;
  min-height: 42px;
  margin: 0 auto 14px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text-muted);
  padding: 6px 10px;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.10);
}

.threadGoalBar.hidden {
  display: none !important;
}

.threadGoalBar.runtimeOnly {
  display: none;
}

body .composer > .threadGoalBar {
  width: min(720px, calc(var(--composer-width) - 24px), calc(100% - 32px));
  max-width: min(720px, calc(var(--composer-width) - 24px), calc(100% - 32px));
  margin: 0 auto 14px;
}

.threadGoalLead {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: currentColor;
}

.threadGoalLead svg {
  width: 18px;
  height: 18px;
}

.threadGoalBody {
  min-width: 0;
  overflow: hidden;
}

.threadGoalTitle {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}

.threadGoalStatus {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.threadGoalSummary {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.threadGoalTime {
  color: var(--text-subtle);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.threadGoalActions {
  display: flex;
  align-items: center;
  gap: 1px;
}

body .threadGoalAction,
body .threadGoalAction:hover,
body .threadGoalAction:active,
body .threadGoalAction:focus {
  display: grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--text-subtle);
  padding: 0;
}

body .threadGoalAction:hover {
  color: var(--text);
}

body .threadGoalAction.isDanger:hover {
  color: var(--danger);
}

body .threadGoalAction:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

body .threadGoalAction:disabled {
  cursor: wait;
  opacity: 0.45;
}

.threadGoalAction svg {
  width: 15px;
  height: 15px;
}

.threadGoalBar.isActive .threadGoalStatus {
  color: var(--primary);
}

.threadGoalBar.isPaused .threadGoalStatus,
.threadGoalBar.isBlocked .threadGoalStatus {
  color: var(--warning, #b7791f);
}

body[data-theme="dark"] .threadGoalBar {
  border-color: color-mix(in srgb, #454545 70%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.24);
}

.threadRunMobile {
  display: none;
}

.promptQueueHead {
  display: none;
}

.promptQueueCount {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-hover);
  color: var(--text-muted);
  padding-inline: 5px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.promptQueueList {
  display: grid;
}

.promptQueueRow {
  display: grid;
  min-height: 40px;
  grid-template-columns: 22px minmax(0, 1fr) 30px auto 30px 30px;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 28%, transparent);
  background: transparent;
  padding: 4px 6px 4px 4px;
  transition: background 140ms var(--ease), opacity 140ms var(--ease), box-shadow 140ms var(--ease);
  will-change: auto;
}

.promptQueueRow:last-child {
  border-bottom: 0;
}

.promptQueueRow:hover {
  background: transparent;
}

.promptQueueRow.sending {
  background: transparent;
}

.promptQueueRow.failed {
  background: transparent;
}

body[data-theme="dark"] .promptQueue {
  border-color: color-mix(in srgb, #454545 70%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.promptQueueLead {
  display: grid;
  width: 22px;
  height: 28px;
  place-items: center;
  color: var(--text-subtle);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  flex: 0 0 auto;
}
.promptQueueBody {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.promptQueueLead svg {
  width: 14px;
  height: 14px;
}
.promptQueueLead.promptQueueLeadLocked {
  cursor: default;
  opacity: 0.55;
}
.promptQueueToggle {
  align-self: end;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 9px;
  background: #1b2533;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}
.promptQueueToggle[aria-pressed="true"] {
  color: #9ee8b5;
  border-color: #254a33;
  background: #0f1f16;
}

.promptQueueList.dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.promptQueueList.dragging .promptQueueRow:not(.dragSource) {
  transition: background 120ms var(--ease), box-shadow 120ms var(--ease);
}

.promptQueueRow.dragSource,
.promptQueueDropPlaceholder {
  position: relative;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 58%, transparent);
}

.promptQueueRow.dragSource > * {
  visibility: hidden;
}

.promptQueueDragGhost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  box-sizing: border-box;
  pointer-events: none;
  cursor: grabbing;
  opacity: 0.97;
  border: 1px solid color-mix(in srgb, var(--primary) 46%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  transform-origin: center;
  will-change: transform;
}

.promptQueueRow.dragOver {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  box-shadow: inset 0 2px 0 var(--primary);
}

.promptQueueRow.dragOver.dragOverAfter {
  box-shadow: inset 0 -2px 0 var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .promptQueueDragGhost,
  .promptQueueList.dragging .promptQueueRow:not(.dragSource) {
    transition: none;
  }
}

.promptQueueRow:not(.sending) {
  cursor: default;
}
.promptQueueRow:not(.sending) .promptQueueLead:active {
  cursor: grabbing;
}

.promptQueueRow.sending {
  cursor: default;
}

.promptQueueRow.sending .promptQueueLead {
  color: var(--primary);
  animation: spin 900ms linear infinite;
}

.promptQueueBody {
  display: flex;
  min-width: 0;
  height: 30px;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0 3px;
  text-align: left;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.promptQueueText {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promptQueueMeta {
  flex: 0 0 auto;
  color: var(--text-subtle);
  font-size: 9px;
  white-space: nowrap;
}

.promptQueueGuide,
.promptQueueIconButton {
  display: inline-flex;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

.promptQueueGuide {
  min-width: 56px;
  gap: 4px;
  padding-inline: 7px;
  font-size: 10px;
}

.promptQueueIconButton {
  width: 30px;
}

.promptQueueGuide:hover,
.promptQueueIconButton:hover {
  background: var(--surface-active);
  color: var(--text);
}

.promptQueueGuide:disabled,
.promptQueueIconButton:disabled,
.promptQueueBody:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.promptQueueGuide .lucide,
.promptQueueIconButton .lucide {
  width: 13px;
  height: 13px;
}

.promptQueueError {
  grid-column: 2 / -1;
  overflow: hidden;
  color: var(--danger);
  padding: 0 3px 3px;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachmentTray {
  display: flex;
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: start;
  justify-self: stretch;
  width: calc(100% - 12px);
  min-width: 0;
  max-width: calc(100% - 12px);
  gap: 6px;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  background: transparent;
  padding: 0 0 4px;
  box-shadow: none;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.attachmentTray::-webkit-scrollbar {
  display: none;
}

body .box:has(> .attachmentTray:not(.hidden)) {
  grid-template-rows: auto minmax(50px, auto) 34px;
}

body[data-theme] .box:has(> .attachmentTray:not(.hidden)) > textarea {
  grid-row: 2;
}

body .box:has(> .attachmentTray:not(.hidden)) > :is(
  .attachBtn,
  .composerPermissionToggle,
  .composerGoalIndicator,
  .composerContextToggle,
  .composerModelToggle,
  .composerMicBtn,
  .send,
  .cancelButton
) {
  grid-row: 3;
}

body[data-theme] .attachmentChip {
  display: grid;
  width: max-content;
  min-width: 0;
  max-width: min(300px, calc(100vw - 72px));
  min-height: 48px;
  flex: 0 0 auto;
  grid-template-columns: 40px minmax(0, auto) 28px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--surface-hover);
  color: var(--text);
  padding: 4px 6px 4px 4px;
  font-size: 13px;
  scroll-snap-align: start;
}

body .attachmentChip img,
body .attachmentChip .attachmentIcon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 6px;
}

body .attachmentChip img {
  object-fit: cover;
}

body .attachmentText {
  min-width: 0;
  display: block;
}

body .attachmentText > span:first-child {
  display: block;
  max-width: 200px;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .box > .attachmentTray .attachmentMeta {
  display: none;
}

body .attachmentChip button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--text-muted);
  color: var(--surface);
  padding: 0;
}

body .attachmentChip button:hover {
  background: var(--text);
  color: var(--surface);
}

body .attachmentChip button .lucide {
  width: 16px;
  height: 16px;
}

.composerControls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 9px;
  margin: 0;
}

/* Fail-safe: hide raw composer controls until enhanceComposer promotes them into popover */
.composer > .composerControls:not(.composerPopover),
.composer > .hint {
  display: none !important;
}


.composerPopover {
  position: absolute;
  z-index: 30;
  bottom: 44px;
  width: min(300px, calc(100vw - 40px));
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}

.composerPermissionPanel {
  bottom: 56px;
  left: 38px;
  display: block;
  width: min(300px, calc(100vw - 32px));
  max-height: min(370px, calc(100dvh - 120px));
  overflow: auto;
  border-radius: 11px;
  padding: 5px;
  overscroll-behavior: contain;
}

.composerPermissionLegacyControl,
.composerPermissionPanel > .field,
.composerPermissionPanel > .safety {
  display: none !important;
}

.composerPermissionHead {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 7px 3px;
}

.composerPermissionHead strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.25;
}

.composerPermissionHead a {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 10px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset: 2px;
}

.composerPermissionHead a:hover,
.composerPermissionHead a:focus-visible {
  color: var(--text);
}

.composerPermissionOptions {
  display: grid;
  gap: 1px;
}

.composerPermissionOption {
  position: relative;
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 5px 7px;
  text-align: left;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}

.composerPermissionOption:hover,
.composerPermissionOption:focus-visible {
  background: var(--surface-hover);
}

.composerPermissionOption:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.composerPermissionOption[data-permission-mode="custom"] {
  margin-top: 2px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 7px 7px;
}

.composerPermissionOptionIcon,
.composerPermissionCheck {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.composerPermissionCopy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.composerPermissionCopy strong {
  font-size: 12px;
  font-weight: 610;
  line-height: 1.25;
}

.composerPermissionCopy small {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  white-space: normal;
}

.composerPermissionCheck {
  justify-self: end;
  opacity: 0;
  transition: opacity 140ms var(--ease);
}

.composerPermissionOption[aria-checked="true"] .composerPermissionCheck {
  opacity: 1;
}

.composerPermissionOption[data-permission-mode="full"][aria-checked="true"] :is(.composerPermissionOptionIcon, .composerPermissionCheck),
.composerPermissionOption[data-permission-mode="full"][aria-checked="true"] .composerPermissionCopy strong,
.composerPermissionOption[data-permission-mode="full"][aria-checked="true"] .composerPermissionCopy small {
  color: #f2773d;
}

.composerPermissionRunHint {
  margin: 3px 7px 2px;
  color: var(--text-subtle);
  font-size: 9px;
  line-height: 1.4;
}

@media (max-width: 520px) {
  .composerPermissionPanel {
    bottom: 58px;
    left: 50%;
    width: min(330px, calc(100vw - 32px));
    max-height: min(64dvh, 340px);
    transform: translateX(-50%);
  }
}

.composerModelPanel {
  right: 38px;
  width: min(260px, calc(100vw - 40px));
  display: block;
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.composerModelPanel > .composerPopoverTitle,
.composerModelNativeField {
  display: none !important;
}

.composerModelMainMenu,
.composerModelSubmenu {
  display: grid;
  gap: 2px;
}

.composerModelMenuRow {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) 18px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 8px 9px;
  text-align: left;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}

.composerModelMenuRow:hover,
.composerModelMenuRow:focus-visible,
.composerModelMenuRow.active {
  background: var(--surface-hover);
}

.composerModelMenuRow.active .composerModelMenuValue,
.composerModelMenuRow.active .lucide {
  color: var(--text);
}

.composerModelMenuRow:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.composerModelMenuLabel {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 590;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composerModelMenuValue {
  max-width: 116px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composerModelMenuRow .lucide {
  width: 17px;
  height: 17px;
  color: var(--text-subtle);
}

.composerModelMenuDivider {
  height: 1px;
  margin: 3px 8px;
  background: var(--border);
}

.composerModelRunHint {
  margin: 3px 7px 4px;
  color: var(--text-subtle);
  font-size: 10px;
  line-height: 1.4;
}

.composerModelSubmenu {
  position: static;
  width: auto;
  max-height: min(420px, calc(100vh - 96px));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.composerModelPanel[data-submenu] .composerModelMainMenu {
  display: none;
}

.composerModelSubmenuHead {
  min-height: 38px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  margin: 0 3px 4px;
  padding-bottom: 4px;
}

.composerModelSubmenuHead strong {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.composerModelSubmenuBack {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
}

.composerModelSubmenuBack:hover,
.composerModelSubmenuBack:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
}

.composerModelSubmenuBack .lucide {
  width: 17px;
  height: 17px;
}

.composerModelSubmenuOptions {
  display: grid;
  gap: 2px;
  max-height: min(350px, calc(100vh - 160px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.composerReasoningSlider {
  display: grid;
  gap: 10px;
  padding: 8px 10px 12px;
}

.composerReasoningInline {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin: 2px 6px 6px;
}

.composerReasoningInline .composerReasoningSlider {
  min-width: 0;
  gap: 0;
  padding: 0;
}

.composerFastToggle {
  min-width: 58px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 0 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.composerFastToggle .lucide {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.composerFastToggle:hover,
.composerFastToggle:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.composerFastToggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--warning) 44%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 10%, transparent);
}

.composerFastToggle:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.composerReasoningInline :is(.composerReasoningDefault, .composerReasoningCurrent, .composerReasoningEndpoints) {
  display: none;
}

.composerReasoningInline .composerReasoningRangeWrap,
.composerReasoningInline .composerReasoningRange {
  height: 36px;
}

.composerReasoningDefault {
  display: grid;
  width: 100%;
  min-height: 36px;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  padding: 7px 8px;
  font-size: 12px;
  text-align: left;
}

.composerReasoningDefault:hover,
.composerReasoningDefault:focus-visible,
.composerReasoningDefault[aria-checked="true"] {
  background: var(--surface-hover);
  color: var(--text);
}

.composerReasoningDefault .lucide {
  width: 16px;
  height: 16px;
  opacity: 0;
}

.composerReasoningDefault[aria-checked="true"] .lucide {
  opacity: 1;
}

.composerReasoningCurrent {
  min-height: 20px;
  color: var(--text);
  font-size: 13px;
  font-weight: 620;
  line-height: 20px;
  text-align: center;
}

/* Reference: white capsule + blue filled track + white thumb + segment dots */
.composerReasoningRangeWrap {
  position: relative;
  display: grid;
  height: 36px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  background: #f3f4f6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding-inline: 10px;
  overflow: hidden;
}

body[data-theme="dark"] .composerReasoningRangeWrap {
  border-color: rgba(255, 255, 255, 0.08);
  background: #1f2329;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.composerReasoningRange {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 36px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.composerReasoningRange::-webkit-slider-runnable-track {
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #2f7bff 0 var(--reasoning-progress),
    transparent var(--reasoning-progress) 100%
  );
}

.composerReasoningRange::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -1px;
  border: 0;
  border-radius: 50%;
  appearance: none;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.18),
    0 4px 12px rgba(15, 23, 42, 0.14);
}

.composerReasoningRange::-moz-range-track {
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.composerReasoningRange::-moz-range-progress {
  height: 22px;
  border-radius: 999px;
  background: #2f7bff;
}

.composerReasoningRange::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.18),
    0 4px 12px rgba(15, 23, 42, 0.14);
}

.composerReasoningRange:focus-visible {
  box-shadow: none;
}

.composerReasoningRange:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 3px rgba(47, 123, 255, 0.22),
    0 1px 2px rgba(15, 23, 42, 0.18),
    0 4px 12px rgba(15, 23, 42, 0.14);
}

.composerReasoningMarks {
  position: absolute;
  z-index: 1;
  right: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: repeat(var(--reasoning-step-count), 1fr);
  align-items: center;
  pointer-events: none;
}

.composerReasoningMark {
  width: 6px;
  height: 6px;
  justify-self: center;
  border-radius: 50%;
  background: #c5cad3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

body[data-theme="dark"] .composerReasoningMark {
  background: #6b7280;
}

.composerReasoningMark:first-child {
  justify-self: start;
}

.composerReasoningMark:last-child {
  justify-self: end;
}

.composerReasoningMark.filled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.composerReasoningMark.active {
  background: transparent;
  box-shadow: none;
}

.composerReasoningSlider.default .composerReasoningRangeWrap {
  opacity: 0.78;
}

.composerReasoningEndpoints {
  display: flex;
  justify-content: space-between;
  color: var(--text-subtle);
  padding-inline: 6px;
  font-size: 10px;
  line-height: 1.2;
}

/* Main model menu: keep reasoning row + pill slider as the hero control */
.composerModelMainMenu .composerModelMenuRow[data-kind="reasoning"] {
  min-height: 40px;
}

.composerModelMainMenu .composerReasoningInline {
  margin: 0 4px 8px;
  padding: 2px;
}

.composerModelOption {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
}

.composerModelOption:hover,
.composerModelOption:focus-visible,
.composerModelOption[aria-selected="true"] {
  background: var(--surface-hover);
}

.composerModelOptionCopy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.composerModelOptionCopy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composerModelOptionCopy small {
  color: var(--text-subtle);
  font-size: 11px;
  line-height: 1.35;
}

.composerModelOption > .lucide {
  width: 17px;
  height: 17px;
  color: var(--text);
  opacity: 0;
}

.composerModelOption[aria-selected="true"] > .lucide {
  opacity: 1;
}

.composerPopoverTitle {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.composerSlashPanel {
  left: 10px;
  right: 10px;
  width: auto;
  max-width: min(460px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - 120px));
  bottom: calc(100% + 10px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  z-index: 40;
}

.composerSlashHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 6px 2px;
}

.composerSlashHead .composerPopoverTitle {
  margin: 0;
  font-size: 11px;
}

.composerSlashStatus {
  color: var(--text-muted, var(--muted));
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.composerSlashSection {
  color: var(--text-muted, var(--muted));
  font-size: 10px;
  font-weight: 650;
  padding: 8px 8px 3px;
  letter-spacing: 0.02em;
}

.composerSlashList {
  display: grid;
  gap: 1px;
  overflow: auto;
  overscroll-behavior: contain;
  max-height: min(480px, calc(100dvh - 150px));
  padding-right: 1px;
}

.composerSlashItem {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 5px 8px;
  cursor: pointer;
}
.composerSlashItem.disabled,
.composerSlashItem:disabled {
  opacity: 0.55;
  cursor: default;
}

.composerSlashItem > .lucide,
.composerSlashItem > i {
  width: 13px;
  height: 13px;
  margin-top: 0;
  color: var(--blue, #6aa8ff);
  opacity: 0.9;
  flex: 0 0 auto;
}

.composerSlashItem:hover,
.composerSlashItem.active {
  background: rgba(106, 168, 255, 0.12);
}

.composerSlashItemBody {
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}

.composerSlashItemName {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.25;
  white-space: nowrap;
  overflow: visible;
}

.composerSlashItemDesc {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-muted, var(--muted));
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
}

.composerSlashItemMeta {
  color: var(--text-muted, var(--muted));
  font-size: 10px;
  white-space: nowrap;
  margin-left: 4px;
  justify-self: end;
  align-self: center;
  text-align: right;
  flex: 0 0 auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.composerSlashEmpty {
  color: var(--text-muted, var(--muted));
  font-size: 11px;
  padding: 10px 8px;
  text-align: center;
}

.composerAtPanel {
  left: 10px;
  right: 10px;
  width: auto;
  max-width: min(460px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - 120px));
  bottom: calc(100% + 10px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  z-index: 40;
}

.composerAtList {
  display: grid;
  gap: 1px;
  overflow: auto;
  overscroll-behavior: contain;
  max-height: min(480px, calc(100dvh - 150px));
  padding-right: 1px;
}

.composerAtSection {
  color: var(--text-muted, var(--muted));
  font-size: 10px;
  font-weight: 650;
  padding: 8px 8px 3px;
  letter-spacing: 0.02em;
}

.composerAtItem {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 5px 8px;
  cursor: pointer;
}

.composerAtItem > .lucide,
.composerAtItem > i {
  width: 14px;
  height: 14px;
  margin-top: 0;
  color: var(--text-muted, var(--muted));
  flex: 0 0 auto;
}

.composerAtPluginIcon.tone-pdf { color: #ef6b6b; }
.composerAtPluginIcon.tone-docs { color: #5b8def; }
.composerAtPluginIcon.tone-sheets { color: #3fad6f; }
.composerAtPluginIcon.tone-slides { color: #e2a33a; }
.composerAtPluginIcon.tone-media { color: #9b7bff; }
.composerAtPluginIcon.tone-web { color: #5aa7ff; }
.composerAtPluginIcon.tone-default { color: var(--text-muted, var(--muted)); }

.composerAtItem:hover,
.composerAtItem.active {
  background: rgba(106, 168, 255, 0.12);
}

.composerAtItem.disabled,
.composerAtItem:disabled {
  opacity: 0.5;
  cursor: default;
}

.composerAtItemBody {
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}

.composerAtItemName {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.25;
  white-space: nowrap;
  overflow: visible;
}

.composerAtItemDesc {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-muted, var(--muted));
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
}

.composerAtItemMeta {
  color: var(--text-muted, var(--muted));
  font-size: 10px;
  white-space: nowrap;
  margin-left: 4px;
  justify-self: end;
  align-self: center;
  text-align: right;
  flex: 0 0 auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.composerControls .field,
.composerMenuField {
  display: grid;
  width: auto;
  margin: 0;
  gap: 5px;
}

.composerControls .field label,
.composerMenuField > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: var(--text-subtle);
  font-size: 10px;
  white-space: normal;
}

body[data-theme] .composerControls .field select,
body[data-theme] .composerMenuField select {
  width: 100%;
  min-height: 34px;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 11px;
}

body[data-theme] .safety {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  padding: 6px 9px;
  font-size: 10px;
  line-height: 1.35;
}

body[data-theme] .safety.safe {
  border-color: rgba(60, 201, 130, 0.3);
  background: var(--success-soft);
  color: var(--success);
}

body[data-theme] .safety.warn {
  border-color: rgba(229, 170, 69, 0.34);
  background: var(--warning-soft);
  color: var(--warning);
}

body[data-theme] .safety.danger {
  border-color: rgba(240, 113, 120, 0.34);
  background: var(--danger-soft);
  color: var(--danger);
}

body .hint {
  display: none;
}

body .requestOverlay {
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(4px);
}

body[data-theme] .requestPanel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

body[data-theme] .requestAction {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  padding: 9px 14px;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), opacity 160ms var(--ease);
}

body[data-theme] .requestAction:hover:not(:disabled) {
  border-color: var(--primary-line);
  background: var(--surface-hover);
}

body[data-theme] .requestAction.primary {
  border-color: transparent;
  background: var(--success);
  color: #07150d;
}

body[data-theme] .requestAction.primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--success) 88%, white);
}

body[data-theme] .requestAction.danger {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}

body[data-theme] .requestAction.danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 72%, var(--danger));
  color: var(--text);
}

body[data-theme] .requestAction:disabled {
  opacity: 0.52;
}

body[data-chat-bg="default"] .main,
body[data-chat-bg="plain"] .main {
  background: var(--canvas);
}

body[data-theme="light"][data-chat-bg="default"] .main,
body[data-theme="light"][data-chat-bg="plain"] .main {
  background: #ffffff;
}

body[data-chat-bg="grid"] .main {
  background-color: var(--canvas);
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}

body[data-chat-bg="paper"] .main {
  background: #f2ead7;
  color: #25282d;
}

body[data-theme="dark"][data-chat-bg="paper"] .main {
  background: #25231e;
  color: #ece8de;
}

body[data-chat-bg="custom"] .main {
  background-color: var(--canvas);
  background-image: var(--custom-chat-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body[data-chat-bg="skin"] .app {
  background-color: var(--canvas);
  background-image:
    linear-gradient(var(--skin-canvas-wash), var(--skin-canvas-wash)),
    var(--custom-chat-bg);
  background-position: var(--skin-art-position);
  background-repeat: no-repeat;
  background-size: cover;
}

body[data-chat-bg="skin"] .main {
  background:
    linear-gradient(90deg, var(--skin-content-wash), transparent 64%),
    transparent;
}

body[data-chat-bg] .chat {
  background: transparent;
}

body[data-chat-bg="skin"] .composer {
  background: transparent;
}

body[data-chat-bg="skin"] .side,
body[data-chat-bg="skin"] .top {
  background: linear-gradient(90deg, var(--skin-surface), var(--skin-surface-soft));
  border-color: var(--primary-line);
  backdrop-filter: blur(16px) saturate(1.08);
}

body[data-chat-bg="skin"] .composerPopover,
body[data-chat-bg="skin"] .composerProjectPanel {
  background: var(--skin-surface-strong);
  border-color: var(--primary-line);
  backdrop-filter: blur(18px) saturate(1.08);
}

body[data-chat-bg="skin"] .box,
body[data-chat-bg="skin"] .box.composerCollapsed,
body[data-chat-bg="skin"] .box.composerExpanded,
body[data-chat-bg="skin"] .box:focus-within,
body[data-theme="light"][data-chat-bg="skin"] .box,
body[data-theme="light"][data-chat-bg="skin"] .box.composerCollapsed,
body[data-theme="dark"][data-chat-bg="skin"] .box,
body[data-theme="dark"][data-chat-bg="skin"] .box.composerCollapsed {
  border-color: var(--primary-line);
  background: color-mix(in srgb, var(--skin-surface-strong) 78%, transparent);
  box-shadow: 0 10px 28px var(--skin-accent-glow);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

/* Custom wallpaper: same frosted treatment so the mobile capsule matches the session canvas. */
body[data-chat-bg="custom"] .box,
body[data-chat-bg="custom"] .box.composerCollapsed,
body[data-chat-bg="custom"] .box.composerExpanded,
body[data-chat-bg="custom"] .box:focus-within,
body[data-theme="light"][data-chat-bg="custom"] .box,
body[data-theme="light"][data-chat-bg="custom"] .box.composerCollapsed,
body[data-theme="dark"][data-chat-bg="custom"] .box,
body[data-theme="dark"][data-chat-bg="custom"] .box.composerCollapsed {
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

body[data-chat-bg="skin"] .promptQueue {
  border-color: color-mix(in srgb, var(--primary-line) 55%, transparent);
  background: color-mix(in srgb, var(--skin-surface, var(--surface)) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
body[data-chat-bg="skin"] .msg.image,
body[data-chat-bg="skin"] .nativeHistoryLoad,
body[data-chat-bg="skin"] .providerBox {
  border-color: var(--primary-line);
  background: var(--skin-surface);
  box-shadow: 0 8px 24px var(--skin-accent-glow);
  backdrop-filter: blur(10px) saturate(1.06);
}

body[data-chat-bg="skin"] .msg.assistant {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-chat-bg="skin"] .miniPrimary,
body[data-chat-bg="skin"] .send {
  background: var(--primary);
  color: var(--canvas);
  box-shadow: 0 6px 18px var(--skin-accent-glow);
}

body[data-chat-bg="skin"] .miniPrimary:hover,
body[data-chat-bg="skin"] .send:hover:not(:disabled) {
  background: var(--primary-hover);
}

body[data-chat-bg="skin"] .logoMark,
body[data-chat-bg="skin"] .archiveToggle,
body[data-chat-bg="skin"] .automationToggle,
body[data-chat-bg="skin"] .subQuotaToggle,
body[data-chat-bg="skin"] .settingsToggle,
body[data-chat-bg="skin"] .themeToggle,
body[data-chat-bg="skin"] .historyUnreadToggle,
body[data-chat-bg="skin"] .attachBtn,
body[data-chat-bg="skin"] .composerPermissionToggle {
  border-color: var(--primary-line);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
}

/* Model/effort control stays chromeless so it does not look like a second pill. */
body[data-chat-bg="skin"] .composerModelToggle,
body[data-chat-bg="skin"] .composerModelToggle:hover,
body[data-chat-bg="skin"] .composerModelToggle:focus-visible,
body[data-chat-bg="skin"] .composerModelToggle[aria-expanded="true"],
body[data-chat-bg="skin"] .composerModelToggle.running {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

body[data-chat-bg="skin"] .subQuotaPopover {
  border-color: var(--primary-line);
  background: var(--skin-surface-strong);
  box-shadow: 0 16px 42px var(--skin-accent-glow);
  backdrop-filter: blur(18px) saturate(1.08);
}

body[data-chat-bg="skin"] .hist.active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}

/* Keep the composer surface visually continuous with the conversation canvas. */
body .composer > .box,
body .composer > .box:focus-within {
  background: var(--surface);
  box-shadow: none;
}

@keyframes statusPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.48;
  }
}

@keyframes streamDot {
  0%,
  100% {
    transform: scale(0.76);
    opacity: 0.45;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes liveProcessFlow {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: -100% 50%;
  }
}

@media (min-width: 821px) {
  body .app {
    display: grid;
    grid-template-columns: clamp(240px, var(--sidebar-width), min(480px, calc(100vw - 480px))) minmax(0, 1fr);
    overflow: hidden;
    transition: grid-template-columns 180ms var(--ease);
  }

  .sidebarResizeHandle {
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: var(--sidebar-width);
    display: block;
    width: 14px;
    cursor: col-resize;
    outline: none;
    touch-action: none;
    transform: translateX(-50%);
  }

  .sidebarResizeHandle::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: transparent;
    content: "";
    transform: translateX(-50%);
    transition: background 140ms var(--ease), box-shadow 140ms var(--ease);
  }

  .sidebarResizeHandle:hover::before,
  .sidebarResizeHandle:focus-visible::before,
  body .app.sidebarResizing .sidebarResizeHandle::before {
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft);
  }

  body .app.sidebarResizing {
    cursor: col-resize;
    user-select: none;
    transition: none;
  }

  body .app.sidebarResizing .side {
    transition: none;
  }

  body .app.sideCollapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  body .app.sideCollapsed .sidebarResizeHandle {
    display: none;
  }

  body .side {
    position: static;
    min-width: 0;
    width: auto;
    height: 100dvh;
    overflow: hidden;
    opacity: 1;
    transition: opacity 120ms var(--ease), transform 180ms var(--ease);
  }

  body .side:has(.subQuotaPopover:not(.hidden)) {
    overflow-y: auto;
  }

  body .app.sideCollapsed .side {
    visibility: hidden;
    border-right: 0;
    opacity: 0;
    padding-inline: 0;
    pointer-events: none;
    transform: translateX(-12px);
  }

  body .main {
    position: relative;
    height: 100dvh;
    margin-left: 0;
  }

  body .chat {
    padding-bottom: max(132px, calc(var(--composer-overlay-height, 132px) + 12px));
    scroll-padding-bottom: max(132px, calc(var(--composer-overlay-height, 132px) + 12px));
  }

  body .main:has(> .composer > .editedFilesResult.live.withPlan) > .chat {
    padding-bottom: max(202px, calc(var(--composer-overlay-height, 190px) + 12px));
    scroll-padding-bottom: max(202px, calc(var(--composer-overlay-height, 190px) + 12px));
  }

  /* Keep the desktop composer floating over the conversation canvas. */
  body .composer {
    position: absolute;
    inset: auto 0 0;
    bottom: var(--keyboard-inset, 0px);
    width: auto;
    margin: 0;
    background: transparent;
    pointer-events: none;
    transition: bottom 120ms var(--ease);
  }

  body.keyboardOpen .composer {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  body.keyboardOpen .chat {
    padding-bottom: max(calc(132px + var(--keyboard-inset, 0px)), calc(var(--composer-overlay-height, 132px) + var(--keyboard-inset, 0px) + 12px));
    scroll-padding-bottom: max(calc(132px + var(--keyboard-inset, 0px)), calc(var(--composer-overlay-height, 132px) + var(--keyboard-inset, 0px) + 12px));
  }

  body .composer > * {
    pointer-events: auto;
  }

  body .menuBtn {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  body .composer:has(> .composerProjectPicker.hidden) {
    padding-bottom: 14px;
  }

  body .composer:has(> .composerProjectPicker.hidden) > .box {
    width: min(calc(var(--composer-width) - 22px), calc(100% - 60px));
    grid-template-columns: 32px max-content minmax(0, 1fr) max-content 34px;
    border-radius: 15px;
    padding: 6px 7px 5px;
  }

  body .composer:has(> .composerProjectPicker.hidden) > .box.runActive {
    grid-template-columns: 32px max-content minmax(0, 1fr) max-content 30px;
  }

  body .composer:has(> .composerProjectPicker.hidden) > .box.runActive > .cancelButton,
  body .composer:has(> .composerProjectPicker.hidden) > .box.runActive > .send:not(.cancelButton) {
    width: 30px;
    min-width: 30px;
    height: 30px;
  }

  body .composer:has(> .composerProjectPicker.hidden) .composerModelToggle.running .composerModelState {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  body[data-theme="light"] .composer:has(> .composerProjectPicker.hidden) > .box {
    border-color: #e1e3e6;
    background: #ffffff;
    box-shadow: none;
  }

  /* Session wallpaper/skin must own the capsule fill on mobile too. */
  body[data-chat-bg="skin"] .composer:has(> .composerProjectPicker.hidden) > .box,
  body[data-theme="light"][data-chat-bg="skin"] .composer:has(> .composerProjectPicker.hidden) > .box,
  body[data-theme="dark"][data-chat-bg="skin"] .composer:has(> .composerProjectPicker.hidden) > .box {
    border-color: var(--primary-line);
    background: color-mix(in srgb, var(--skin-surface-strong) 78%, transparent);
    box-shadow: 0 10px 28px var(--skin-accent-glow);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
  }

  body[data-chat-bg="custom"] .composer:has(> .composerProjectPicker.hidden) > .box,
  body[data-theme="light"][data-chat-bg="custom"] .composer:has(> .composerProjectPicker.hidden) > .box,
  body[data-theme="dark"][data-chat-bg="custom"] .composer:has(> .composerProjectPicker.hidden) > .box {
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
  }

  body[data-chat-bg="grid"] .composer:has(> .composerProjectPicker.hidden) > .box,
  body[data-chat-bg="paper"] .composer:has(> .composerProjectPicker.hidden) > .box,
  body[data-chat-bg="default"] .composer:has(> .composerProjectPicker.hidden) > .box,
  body[data-chat-bg="plain"] .composer:has(> .composerProjectPicker.hidden) > .box {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.04);
    -webkit-backdrop-filter: blur(14px) saturate(1.04);
  }

  body[data-theme="light"][data-chat-bg="default"] .composer:has(> .composerProjectPicker.hidden) > .box,
  body[data-theme="light"][data-chat-bg="plain"] .composer:has(> .composerProjectPicker.hidden) > .box {
    border-color: #e1e3e6;
    background: color-mix(in srgb, #ffffff 90%, transparent);
    box-shadow: 0 8px 22px rgba(31, 35, 41, 0.08);
  }

  body[data-theme="dark"] .composer:has(> .composerProjectPicker.hidden) > .box {
    border-color: #454545;
    background: var(--surface);
    box-shadow: none;
  }
}

@media (max-width: 820px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  body .app,
  body .main {
    position: relative;
    height: 100dvh;
  }

  body .main {
    --header-height: 64px;
  }

  body .side {
    z-index: 50;
    width: min(88vw, 326px);
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    box-shadow: 20px 0 54px rgba(0, 0, 0, 0.28);
  }

  .historyProjectPreview {
    display: none !important;
  }

  body .scrim {
    z-index: 40;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
  }

  /* The mobile drawer must cover side-chat tabs and content completely. */
  body .app.menuOpen .side,
  body[data-chat-bg="skin"] .app.menuOpen .side,
  body[data-chat-bg="custom"] .app.menuOpen .side {
    padding-top: calc(env(safe-area-inset-top, 0px) + 68px);
    background: var(--surface);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body .app.menuOpen .main > .top {
    z-index: 60;
    border-color: transparent;
    background: transparent !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }

  body .app.menuOpen .main > .top > :not(.menuBtn) {
    visibility: hidden;
  }

  body .app.menuOpen .main > .top .menuBtn {
    pointer-events: auto;
    background: var(--surface-raised);
  }

  body .app.menuOpen .main > .sideChatTabs {
    visibility: hidden;
    pointer-events: none;
  }

  body .top {
    min-height: 64px;
    height: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    gap: 14px;
  }

  body .top .title {
    line-height: 1.4;
  }

  body .menuBtn {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--radius-sm);
    background: transparent;
  }

  body .chat {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 10px;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-x: none;
    padding: 22px 16px 20px;
    scroll-padding-top: 32px;
  }

  body .chat > *,
  body .chat :is(
    .msgBody,
    .markdownBody,
    .liveProcessPanel,
    .liveProcessTimeline,
    .completionTimeline,
    .processHistory,
    .activityBatch,
    .activityCluster,
    .activityClusterItems,
    .activityItem
  ) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body .chat :is(.msgBody, .markdownBody) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body .chat .activitySuffix {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .activityItem.skillTarget .activityItemSummary {
    width: 100%;
    min-width: 0;
    grid-template-columns: var(--activity-icon-box, 16px) auto minmax(0, 1fr) auto 13px;
  }

  .archiveViewInner {
    width: min(100% - 26px, 760px);
    padding: 26px 0 42px;
  }

  .archiveViewHeader {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 22px;
  }

  .archiveDeleteAll {
    align-self: flex-start;
  }

  .archiveToolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .archiveProjectFilter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .archiveTask {
    gap: 10px;
  }

  .archiveTaskMeta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .archiveTaskRestore,
  .archiveTaskDelete {
    width: 44px;
    height: 44px;
  }

  .automationViewInner {
    width: min(100% - 32px, 760px);
    padding: 24px 0 40px;
  }

  .automationViewInner.detailOpen {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
  }

  .automationViewInner.detailOpen .automationToolbar,
  .automationViewInner.detailOpen .automationTabs,
  .automationViewInner.detailOpen .automationStatus,
  .automationViewInner.detailOpen .automationList {
    display: none;
  }

  .automationDetailPanel {
    width: 100%;
    height: 100%;
    border-left: 0;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  }

  .automationDetailClose {
    display: inline-grid;
  }

  .automationDetailHead {
    gap: 12px;
  }

  .automationDetailHead h2 {
    font-size: 23px;
  }

  .automationDetailPrompt {
    margin-top: 22px;
    padding: 18px;
    font-size: 15px;
  }

  .automationDetailRow {
    grid-template-columns: minmax(72px, 0.3fr) minmax(0, 1fr);
  }

  .automationViewHeader {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .automationStateToggle {
    width: 14px;
    height: 14px;
  }

  .automationFormBody {
    width: calc(100% - 24px);
  }

  .automationForm {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  }

  body[data-theme] .automationTitleField input {
    min-height: 38px;
    font-size: 18px;
  }

  body[data-theme] .automationPromptField textarea {
    min-height: 96px;
    height: 96px;
    border-radius: 14px;
  }

  .automationFormSection {
    margin-top: 28px;
  }

  .automationSettingsGroup {
    border-radius: 14px;
  }

  .automationSettingRow {
    min-height: 48px;
    grid-template-columns: minmax(72px, 0.3fr) minmax(0, 1fr);
    gap: 10px;
    margin: 0 14px;
  }

  .automationSettingRow:hover {
    margin-right: 0;
    margin-left: 0;
    padding-right: 14px;
    padding-left: 14px;
  }

  body[data-theme] .automationSettingRow select,
  body[data-theme] .automationSettingRow input {
    max-width: 100%;
    min-height: 46px;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
  }

  .automationTimeControl {
    min-height: 46px;
  }

  .automationFormMessage {
    max-width: 44vw;
  }

  .turnResultAction {
    min-height: 44px;
  }

  body .msg {
    max-width: 100%;
  }

  body .msg.user {
    max-width: 92%;
  }

  /* Float composer over chat with transparent rail so session wallpaper/bg shows through. */
  body .chat {
    padding-bottom: max(calc(84px + env(safe-area-inset-bottom, 0px)), calc(var(--composer-overlay-height, calc(72px + env(safe-area-inset-bottom, 0px))) + 12px));
    scroll-padding-bottom: max(calc(84px + env(safe-area-inset-bottom, 0px)), calc(var(--composer-overlay-height, calc(72px + env(safe-area-inset-bottom, 0px))) + 12px));
  }

  body .composer {
    position: absolute;
    inset: auto 0 0;
    bottom: var(--keyboard-inset, 0px);
    z-index: 12;
    width: auto;
    margin: 0;
    padding: 0 13px calc(env(safe-area-inset-bottom, 0px) + 16px);
    border: 0;
    background: transparent !important;
    box-shadow: none;
    pointer-events: none;
    transition: bottom 120ms var(--ease);
  }

  body.keyboardOpen .composer {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  /* WebKit keeps 100dvh at the layout height when its keyboard covers the page. */
  body.keyboardOpen .app,
  body.keyboardOpen .main {
    height: var(--composer-visual-viewport-bottom, 100dvh);
  }

  /* The main chat now ends at the visible viewport, so do not lift twice. */
  body.keyboardOpen .main:not(.sideChatOpen) > .composer {
    bottom: 0;
    transition: none;
  }

  body.keyboardOpen .main.sideChatOpen > .composer {
    bottom: 0 !important;
    transition: none;
  }

  /* The compact mobile capsule needs only its 16px rail plus the device safe area. */
  body .composer:has(> .box.composerCollapsed) {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  body.keyboardOpen .composer:has(> .box.composerCollapsed) {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  body.keyboardOpen .chat {
    /* --composer-overlay-height already includes any unresized keyboard clearance. */
    padding-bottom: max(calc(84px + env(safe-area-inset-bottom, 0px)), calc(var(--composer-overlay-height, calc(72px + env(safe-area-inset-bottom, 0px))) + 12px));
    scroll-padding-bottom: max(calc(84px + env(safe-area-inset-bottom, 0px)), calc(var(--composer-overlay-height, calc(72px + env(safe-area-inset-bottom, 0px))) + 12px));
  }

  body .composer > * {
    width: 100%;
    pointer-events: auto;
  }

  body[data-theme="light"] .composer,
  body[data-theme="dark"] .composer,
  body[data-chat-bg] .composer,
  body[data-chat-bg="skin"] .composer,
  body[data-chat-bg="custom"] .composer,
  body[data-chat-bg="default"] .composer,
  body[data-chat-bg="plain"] .composer {
    background: transparent !important;
  }

  /* Capsule uses same translucent fill as session chrome, not a solid slab. */
  body[data-theme="light"] .composer > .box,
  body[data-theme="light"] .composer > .box:focus-within,
  body[data-theme="light"] .composer > .box.composerCollapsed,
  body[data-theme="light"] .composer > .box.composerExpanded {
    border-color: color-mix(in srgb, #e1e3e6 88%, transparent);
    background: color-mix(in srgb, #ffffff 88%, transparent);
    box-shadow: 0 10px 28px rgba(31, 35, 41, 0.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-theme="dark"] .composer > .box,
  body[data-theme="dark"] .composer > .box:focus-within,
  body[data-theme="dark"] .composer > .box.composerCollapsed,
  body[data-theme="dark"] .composer > .box.composerExpanded {
    border-color: color-mix(in srgb, #454545 88%, transparent);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-chat-bg="skin"] .composer > .box,
  body[data-theme="light"][data-chat-bg="skin"] .composer > .box,
  body[data-theme="dark"][data-chat-bg="skin"] .composer > .box {
    border-color: var(--primary-line);
    background: color-mix(in srgb, var(--skin-surface-strong) 78%, transparent);
    box-shadow: 0 10px 28px var(--skin-accent-glow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-chat-bg="custom"] .composer > .box,
  body[data-theme="light"][data-chat-bg="custom"] .composer > .box,
  body[data-theme="dark"][data-chat-bg="custom"] .composer > .box {
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .promptQueue,
  body .composer > .promptQueue {
    width: min(calc(var(--composer-width) - 40px), calc(100% - 84px));
    max-width: min(calc(var(--composer-width) - 40px), calc(100% - 84px));
    /* The list owns scrolling, so the panel keeps its 4px padding and 1px border on each edge. */
    max-height: calc(3 * 40px + 10px);
    margin: 0 auto 10px;
    overflow: hidden;
  }

  .promptQueueList {
    max-height: calc(3 * 40px);
    overflow: hidden auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .promptQueueList::-webkit-scrollbar {
    display: none;
  }

  body .box > .attachmentTray {
    display: flex;
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
    margin: 0;
    box-sizing: border-box;
  }

  body .nativeNotice {
    margin-bottom: 7px;
  }

  body .box {
    grid-template-columns: 38px max-content minmax(0, 1fr) max-content 42px;
    grid-template-rows: minmax(70px, auto) 42px;
    border-radius: 26px;
    padding: 14px 14px 10px;
  }

  body .box.composerCollapsed {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    grid-template-rows: 52px !important;
    min-height: 52px;
    border-radius: 999px !important;
    padding: 0 12px 0 10px !important;
  }

  body .box.composerCollapsed.runActive {
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important;
  }

  body .box.composerExpanded,
  body .box:not(.composerCollapsed) {
    grid-template-columns: 38px max-content minmax(0, 1fr) max-content 38px 42px;
  }

  body .box.composerExpanded.runActive,
  body .box:not(.composerCollapsed).runActive {
    grid-template-columns: 38px max-content minmax(0, 1fr) max-content 38px 42px;
  }

  body .composer > .box.composerCollapsed {
    width: 100%;
  }

  body[data-theme] .box.composerCollapsed textarea,
  body[data-theme] .box.composerCollapsed textarea:focus {
    font-size: 16px !important;
    height: 36px !important;
    max-height: 36px !important;
    min-height: 0 !important;
  }

  body[data-theme] .box textarea {
    font-size: 16px;
  }

  body .box.runActive {
    grid-template-columns: 38px max-content minmax(0, 1fr) max-content 42px;
  }

  body .send {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
  }

  .composerControls {
    grid-template-columns: 1fr 1fr;
  }

  body[data-theme] .safety {
    grid-column: 1 / -1;
  }

  .requestPanel {
    padding: 16px;
  }
}

@media (max-width: 460px) {
  body .composer > .box {
    width: min(380px, calc(100% - 20px));
  }

  .editedFilesResult.withPlan > .turnResultHead {
    gap: 6px;
    padding-inline: 9px;
  }

  .turnResultHead > .turnPlanProgressLabel,
  .turnResultDivider {
    font-size: 13px;
  }

  .turnResultActions {
    width: 100%;
  }

  .turnResultActions .turnResultAction {
    flex: 1 1 0;
  }

  .webPreviewResult {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .webPreviewResult > .turnResultAction {
    grid-column: 1 / -1;
  }

  .settingsOverlay {
    place-items: center;
    align-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) 14px max(16px, env(safe-area-inset-bottom, 0px));
  }

  .grok2ApiConsoleOverlay {
    place-items: center;
    padding: 12px;
  }

  .grok2ApiConsoleDialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }

  .grok2ApiConsoleBody {
    gap: 8px;
    padding: 12px;
  }

  .grok2ApiConsoleOutput {
    min-height: 180px;
    padding: 10px;
    font-size: 10px;
  }

  .archiveConfirmOverlay {
    place-items: end center;
    padding: 8px;
  }

  .archiveConfirmDialog {
    width: 100%;
    padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  .archiveConfirmActions {
    margin-top: 14px;
  }

  .archiveConfirmActions button {
    flex: 1 1 0;
  }

  .projectRenameOverlay {
    place-items: center;
    padding: 14px;
  }

  .projectRenameDialog {
    width: min(420px, calc(100vw - 28px));
    padding: 18px 16px;
  }

  .subQuotaSettingsOverlay {
    place-items: center;
    align-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) 14px max(16px, env(safe-area-inset-bottom, 0px));
  }

  .subQuotaSettingsDialog {
    width: min(420px, calc(100vw - 28px));
    max-height: min(78dvh, 720px);
    border-radius: 18px;
  }

  .subQuotaSettingsBody {
    padding: 12px 12px 14px;
  }

  .subQuotaSettingsToolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .subQuotaSettingsToolbarTitle,
  .subQuotaSettingsToolbarHint {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .subQuotaSettingsToolbarActions {
    width: 100%;
    flex-wrap: wrap;
  }

  .subQuotaAddSourceType,
  .subQuotaSourceTypeSelect {
    min-width: 0;
    min-height: 40px;
    flex: 1 1 160px;
  }

  .subQuotaAddSourceButton {
    min-height: 40px;
    flex: 1 1 118px;
  }

  .subQuotaMoveButton,
  .subQuotaCodexRefresh,
  .subQuotaSourceRemoveButton,
  .subQuotaRemoveButton,
  .subQuotaCredentialAdd,
  .subQuotaCredentialRemove {
    width: 40px;
    height: 40px;
  }

  .subQuotaSettingsSource {
    padding: 12px;
  }

  .subQuotaSettingsSourceHead {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .subQuotaSettingsSourceIdentity {
    flex: 1 1 190px;
  }

  .subQuotaSettingsSourceTitle,
  .subQuotaSettingsSourceDetail {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .subQuotaSettingsSourceActions {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
  }

  .subQuotaVisibilityLabel {
    display: none;
  }

  .subQuotaVisibilityToggle {
    padding-inline: 2px;
  }

  .subQuotaSettingsFields {
    grid-template-columns: minmax(0, 1fr);
  }

  .subQuotaCredentialRow {
    grid-template-columns: 46px minmax(0, 1fr) 40px;
    gap: 6px;
  }

  .subQuotaCredentialRowLabel {
    max-width: 46px;
  }

  .subQuotaManualSourceFields {
    grid-template-columns: minmax(0, 1fr);
  }

  .subQuotaOpenAiStatus,
  .subQuotaOpenAIStatus {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 9px;
  }

  .subQuotaOpenAiStatusIcon,
  .subQuotaOpenAIStatusIcon {
    width: 26px;
    height: 26px;
  }

  .subQuotaOpenAiStatusTitle,
  .subQuotaOpenAIStatusTitle {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .subQuotaCodexSummary {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
  }

  .subQuotaCodexBalances {
    width: 100%;
    max-width: none;
    flex: none;
  }

  .subQuotaCodexProgress {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  .subQuotaCodexMeta {
    text-align: left;
    white-space: normal;
  }

  .subQuotaSettingsFooter {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .subQuotaSettingsSubmit {
    width: 100%;
  }




  .dreamSkinOptions {
    grid-template-columns: minmax(0, 1fr);
  }

  .dreamSkinConceptList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dreamSkinConcept {
    min-height: 82px;
  }

  .dreamSkinConceptPreview {
    grid-template-columns: minmax(0, 1fr);
  }

  .dreamSkinPreviewMedia {
    height: 132px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .dreamSkinActions {
    align-items: stretch;
    flex-direction: column;
  }

  .dreamSkinStatus {
    text-align: left;
  }

  .dreamSkinGenerate {
    width: 100%;
  }

  .passwordSubmit {
    width: 100%;
  }

  .passwordStatus {
    text-align: left;
  }

  body #modeLabel {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .box {
    grid-template-columns: 34px 34px minmax(0, 1fr) max-content 38px;
    grid-template-rows: minmax(54px, auto) 38px;
    gap: 3px;
    border-radius: 22px;
    padding: 10px 10px 7px;
  }

  body .box.composerCollapsed {
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    grid-template-rows: 48px !important;
    min-height: 48px;
    gap: 0 !important;
    border-radius: 999px !important;
    padding: 0 10px 0 8px !important;
  }

  body .box.composerCollapsed.runActive {
    grid-template-columns: 36px minmax(0, 1fr) 36px 36px !important;
  }

  body .box.composerExpanded,
  body .box:not(.composerCollapsed) {
    grid-template-columns: 34px 34px minmax(0, 1fr) max-content 34px 38px;
  }

  body .box.composerExpanded.runActive,
  body .box:not(.composerCollapsed).runActive {
    grid-template-columns: 34px 34px minmax(0, 1fr) max-content 34px 38px;
  }

  body .composer > .box.composerCollapsed {
    width: min(380px, calc(100% - 20px));
  }

  body .box.composerCollapsed > .attachBtn,
  body .box.composerCollapsed > .composerMicBtn {
    width: 34px !important;
    min-width: 34px;
    height: 34px !important;
  }

  body .box.runActive {
    grid-template-columns: 34px 34px minmax(0, 1fr) max-content 38px;
  }

  body[data-theme] .box textarea {
    min-height: 54px;
    padding: 2px 4px 6px;
  }

  .composerProjectPicker {
    width: min(calc(var(--composer-width) - 20px), calc(100% - 20px));
    margin-bottom: -14px;
  }

  .composerProjectToggle {
    height: 42px;
    border-radius: 20px 20px 10px 10px;
    padding: 0 14px 8px;
    font-size: 12px;
  }

  .composerPermissionToggle {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
  }

  .composerPermissionToggle .buttonLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .composerPermissionToggle .lucide,
  body .attachBtn .lucide {
    width: 19px;
    height: 19px;
  }

  .composerGoalIndicator {
    width: 30px;
    min-width: 30px;
    margin-left: 4px;
    padding-left: 8px;
  }

  .composerGoalIndicator .lucide {
    width: 17px;
    height: 17px;
  }

  .composerModelToggle {
    min-width: 0;
    max-width: 174px;
    height: 36px;
    gap: 4px;
    padding-inline: 3px;
    font-size: 12px;
  }

  .composerModelState {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .composerModelToggle .lucide {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }

  .promptQueueRow {
    grid-template-columns: 22px minmax(0, 1fr) auto 28px 28px;
    gap: 2px;
    padding-inline: 8px 5px;
  }

  .promptQueueEditButton {
    display: none;
  }

  .promptQueueGuide {
    min-width: 50px;
    padding-inline: 5px;
  }

  body .attachBtn {
    width: 34px;
    height: 34px;
  }

  body .send {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
  }

  .send .buttonLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .composerControls {
    gap: 6px;
  }

  .composerPopover {
    width: min(290px, calc(100vw - 36px));
  }

  .composerPermissionPanel {
    bottom: 58px;
    left: 50%;
    width: min(330px, calc(100vw - 32px));
    max-height: min(64dvh, 340px);
    transform: translateX(-50%);
  }

  .composerModelPanel {
    right: 0;
  }

  .composerModelSubmenu {
    position: static;
    width: auto;
    max-height: min(420px, calc(100vh - 120px));
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .composerModelPanel[data-submenu] .composerModelMainMenu {
    display: none;
  }

  .memoryCitationSource {
    display: none;
  }

  .reviewCommentsHead {
    min-height: 48px;
    padding-inline: 12px;
  }

  .reviewCommentRow {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 8px;
    padding: 7px 12px;
  }

  .reviewCommentLocation {
    grid-column: 2;
  }

  .reviewCommentBody {
    padding: 9px 12px 10px 48px;
  }

  .activityList {
    padding-left: 12px;
  }

  .activityItemSummary {
    grid-template-columns: var(--activity-icon-box, 16px) auto minmax(0, 1fr) auto 13px;
  }

  .activityMeta {
    grid-column: auto;
  }
}

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

  body .liveProcessTimeline > .progressCommentary.streaming .markdownBody > :last-child,
  body .liveProcessTimeline > .activityCluster.streaming > summary .activityClusterText,
  body[data-theme] .liveProcessTimeline > .msg.process.reasoningStatus.streaming {
    background: none;
    color: var(--text-muted);
    -webkit-text-fill-color: currentColor;
  }
}

@media (hover: none) {
  .activityCluster .activityItem:not([data-current="true"]):not([open]) > .activityItemSummary .activityItemChevron {
    opacity: 0.5;
  }

  /* Touch devices: hide action chrome until the bubble is tapped (actionsOpen). */
  body .msg.user:hover .msgActions,
  body .msg.assistant:hover > .msgActions,
  .msg:hover .msgActions {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
  }

  body .msg.user:focus-within .msgActions,
  body .msg.user.actionsOpen .msgActions,
  body .msg.assistant:focus-within > .msgActions,
  body .msg.assistant.actionsOpen > .msgActions,
  .msg:focus-within .msgActions,
  .msg.actionsOpen .msgActions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@media (forced-colors: active) {
  .activityClusterSummary:focus-visible {
    outline-color: CanvasText;
  }
}


/* Side chat: desktop split + mobile/top tab switch (never insert into chat stream) */
/* Visual contract: inherit main session background, message bubbles, and composer look. */
.main {
  position: relative;
  min-width: 0;
}

.main.sideChatOpen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--side-chat-width, 420px));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  transition: grid-template-columns 180ms var(--ease);
}

.main.sideChatOpen.sideChatResizing {
  cursor: col-resize;
  user-select: none;
  transition: none;
}

.main.sideChatOpen > .top {
  grid-column: 1 / -1;
  grid-row: 1;
}

.main.sideChatOpen > .sideChatTabs {
  grid-column: 1 / -1;
  grid-row: 2;
}

.main.sideChatOpen > .chat,
.main.sideChatOpen > .automationView,
.main.sideChatOpen > .archiveView {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.main.sideChatOpen > .composer {
  position: relative;
  inset: auto;
  bottom: auto;
  grid-column: 1;
  grid-row: 4;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 10;
}

/* Desktop floating composer must not stretch under the side pane. */
@media (min-width: 821px) {
  body .main.sideChatOpen > .composer {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    box-sizing: border-box;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* Keep the same 760px reading rail; do not stretch full left column. */
    --composer-width: min(760px, 100%);
    --conversation-width: min(760px, 100%);
  }

  body .main.sideChatOpen > .chat {
    min-width: 0;
    padding-bottom: 24px;
    scroll-padding-bottom: 24px;
    --composer-width: min(760px, 100%);
    --conversation-width: min(760px, 100%);
  }

  body .main.sideChatOpen > .composer > *,
  body .main.sideChatOpen > .composer > .box,
  body .main.sideChatOpen > .composer > .box.composerCollapsed,
  body .main.sideChatOpen > .composer > .box.composerExpanded,
  body .main.sideChatOpen > .composer > .promptQueue,
  body .main.sideChatOpen > .composer > .composerProjectPicker,
  body .main.sideChatOpen > .composer > .editedFilesResult {
    width: min(760px, calc(100% - 24px)) !important;
    max-width: min(760px, calc(100% - 24px)) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    align-self: center !important;
    box-sizing: border-box;
  }

  body .main.sideChatOpen > .composer > .promptQueue {
    width: min(calc(var(--composer-width) - 48px), calc(100% - 72px)) !important;
    max-width: min(calc(var(--composer-width) - 48px), calc(100% - 72px)) !important;
    margin: 0 auto 8px !important;
  }

  /* Main-only tab keeps the same centered rail after collapsing the side pane. */
  body .main.sideChatOpen.sideChatViewMain > .composer,
  body .main.sideChatOpen:has(> .sideChatPane.hidden) > .composer {
    --composer-width: min(760px, 100%) !important;
    --conversation-width: min(760px, 100%) !important;
  }

  body .main.sideChatOpen > .sideChatPane {
    min-width: 0;
    overflow: hidden;
  }

  body .main.sideChatOpen > .sideChatPane .sideChatComposer,
  body .main.sideChatOpen > .sideChatPane .sideChatComposerBox {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body .main.sideChatOpen.sideChatViewMain > .chat,
  body .main.sideChatOpen:has(> .sideChatPane.hidden) > .chat {
    --composer-width: min(760px, 100%) !important;
    --conversation-width: min(760px, 100%) !important;
  }
}

.sideChatTabs {
  display: none;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  padding: 8px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.sideChatTabs::-webkit-scrollbar {
  height: 6px;
}

.main.sideChatOpen > .sideChatTabs {
  display: flex;
}

.sideChatTabs.hidden {
  display: none !important;
}

.sideChatTab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(42vw, 200px);
  min-height: 32px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.sideChatTab > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sideChatTab:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.sideChatTab.active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--text);
}

.sideChatTabDot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.sideChatTabClose {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  margin-left: 2px;
}

.sideChatTabClose:hover {
  background: var(--surface-active);
  color: var(--text);
}

/* Pane is transparent so main session background (skin/custom/default) shows through. */
.sideChatPane {
  position: relative;
  grid-column: 2;
  grid-row: 3 / 5;
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: transparent;
  box-shadow: none;
  z-index: 4;
  overflow: hidden;
  color: var(--text);
}

/* Desktop drag handle on the left edge of the side chat pane. */
.sideChatResizeHandle {
  display: none;
}

@media (min-width: 821px) {
  .sideChatPane > .sideChatResizeHandle {
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 14px;
    cursor: col-resize;
    outline: none;
    touch-action: none;
    transform: translateX(-50%);
  }

  .sideChatPane > .sideChatResizeHandle::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: transparent;
    content: "";
    transform: translateX(-50%);
    transition: background 140ms var(--ease), box-shadow 140ms var(--ease);
  }

  .sideChatPane > .sideChatResizeHandle:hover::before,
  .sideChatPane > .sideChatResizeHandle:focus-visible::before,
  .main.sideChatOpen.sideChatResizing .sideChatResizeHandle::before {
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft);
  }
}

@media (max-width: 820px) {
  .sideChatResizeHandle {
    display: none !important;
  }
}

/* Main tab / collapse: only main conversation; drop second grid track. */
.main.sideChatOpen.sideChatViewMain {
  grid-template-columns: minmax(0, 1fr) !important;
}
.main.sideChatOpen.sideChatViewMain > .sideChatPane,
.main.sideChatOpen.sideChatViewMain > .sideChatResizeHandle {
  display: none !important;
}
.main.sideChatOpen.sideChatViewMain > .chat,
.main.sideChatOpen.sideChatViewMain > .automationView,
.main.sideChatOpen.sideChatViewMain > .archiveView,
.main.sideChatOpen.sideChatViewMain > .composer {
  grid-column: 1 / -1;
}
.sideChatPane.hidden {
  display: none !important;
}
/* When pane is hidden (collapsed), do not reserve the side column. */
.main.sideChatOpen:has(> .sideChatPane.hidden) {
  grid-template-columns: minmax(0, 1fr) !important;
}
.main.sideChatOpen:has(> .sideChatPane.hidden) > .chat,
.main.sideChatOpen:has(> .sideChatPane.hidden) > .automationView,
.main.sideChatOpen:has(> .sideChatPane.hidden) > .archiveView,
.main.sideChatOpen:has(> .sideChatPane.hidden) > .composer {
  grid-column: 1 / -1;
}

.sideChatHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  padding: 12px 14px;
}

.sideChatHead[data-state="running"] {
  background: color-mix(in srgb, var(--primary) 8%, color-mix(in srgb, var(--surface) 78%, transparent));
}

.sideChatHead[data-state="error"] {
  background: color-mix(in srgb, var(--danger, #d14343) 8%, color-mix(in srgb, var(--surface) 78%, transparent));
}

.sideChatHeadCopy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
}

.sideChatEyebrow {
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sideChatTitle {
  /* Session name is shown only on the top tab, not in the pane header. */
  display: none !important;
}

.sideChatMeta {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 70%, transparent);
  color: var(--text-muted);
  padding: 3px 9px 3px 7px;
}

.sideChatMeta[data-state="running"] {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: color-mix(in srgb, var(--primary) 70%, var(--text));
}

.sideChatMeta[data-state="error"] {
  border-color: color-mix(in srgb, var(--danger, #d14343) 40%, var(--border));
  background: color-mix(in srgb, var(--danger, #d14343) 10%, var(--surface));
  color: var(--danger, #d14343);
}

.sideChatMeta[data-state="interrupted"] {
  border-color: color-mix(in srgb, var(--border-strong) 70%, transparent);
  color: var(--text-muted);
}

.sideChatStatusDot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-subtle) 80%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-subtle) 10%, transparent);
}

.sideChatMeta[data-state="running"] .sideChatStatusDot {
  background: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  animation: sideChatPulse 1.4s ease-in-out infinite;
}

.sideChatMeta[data-state="error"] .sideChatStatusDot {
  background: var(--danger, #d14343);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #d14343) 16%, transparent);
  animation: none;
}

.sideChatMeta[data-state="interrupted"] .sideChatStatusDot {
  background: var(--text-muted);
  animation: none;
}

@keyframes sideChatPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.86); }
}

.sideChatStatus {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sideChatHeadActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.sideChatClose {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
  color: var(--text-muted);
  padding: 0;
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background 140ms var(--ease);
}

.sideChatClose:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-hover);
}

/* Match main chat stream spacing / transparent wash. */
.sideChatMessages {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 22px 18px 12px;
  background: transparent;
  scroll-padding-block: 24px;
  -webkit-overflow-scrolling: touch;
}

.sideChatEmpty {
  margin: auto;
  color: var(--text-subtle);
  font-size: 12px;
}

/*
 * Message nodes use class "msg sideChatMsg user|assistant" so main bubble
 * rules (body .msg.user / body .msg.assistant) own the look. Only reset the
 * old card-like sideChat overrides and keep layout helpers.
 */
.sideChatMsg {
  /* do not invent a separate card system */
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  align-self: stretch;
  color: var(--text);
  font-size: inherit;
  line-height: inherit;
  word-break: break-word;
}

/* User / assistant bubbles are controlled by main body .msg.* rules. */
.sideChatMessages > .msg.user,
.sideChatMessages > .sideChatMsg.user {
  align-self: flex-end;
  max-width: min(var(--conversation-width), 77%);
  margin-right: 0;
}

.sideChatMessages > .msg.assistant,
.sideChatMessages > .sideChatMsg.assistant {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}

/* Layout only: typography comes from main body .msg.* rules. */
.sideChatMsg .msgBody,
.sideChatMsgBody {
  min-width: 0;
  max-width: 100%;
}

.sideChatMsg .msgBody.markdownBody,
.sideChatMsgBody.markdownBody {
  white-space: normal !important;
}

.sideChatMsg .msgBody:not(.markdownBody),
.sideChatMsgBody:not(.markdownBody) {
  white-space: pre-wrap;
}

/* Composer shell mirrors main floating composer: transparent rail + capsule box. */
.sideChatComposer {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 0;
  background: transparent;
  padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.sideChatComposerBox {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: end;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 6px 8px 6px 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}

.sideChatComposerBox:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.13);
}

body[data-theme="light"] .sideChatComposerBox {
  border-color: #e6e6e6;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(31, 35, 41, 0.08);
}

body[data-theme="dark"] .sideChatComposerBox {
  border-color: #3a3a3a;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* Skin / custom wallpaper: same frosted capsule as main composer. */
body[data-chat-bg="skin"] .sideChatComposerBox,
body[data-theme="light"][data-chat-bg="skin"] .sideChatComposerBox,
body[data-theme="dark"][data-chat-bg="skin"] .sideChatComposerBox {
  border-color: var(--primary-line);
  background: color-mix(in srgb, var(--skin-surface-strong) 78%, transparent);
  box-shadow: 0 10px 28px var(--skin-accent-glow);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

body[data-chat-bg="custom"] .sideChatComposerBox,
body[data-theme="light"][data-chat-bg="custom"] .sideChatComposerBox,
body[data-theme="dark"][data-chat-bg="custom"] .sideChatComposerBox {
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.sideChatInput {
  min-height: 36px;
  max-height: 120px;
  width: 100%;
  resize: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 4px;
  outline: none;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
}

.sideChatInput::placeholder {
  color: var(--text-subtle);
}

.sideChatInput:focus {
  border: 0;
  box-shadow: none;
}

.sideChatSend {
  width: 36px;
  height: 36px;
  align-self: end;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--canvas);
  padding: 0;
  box-shadow: none;
}

body[data-chat-bg="skin"] .sideChatSend {
  background: var(--primary);
  color: var(--canvas);
  box-shadow: 0 6px 18px var(--skin-accent-glow);
}

.sideChatSend:hover:not(:disabled) {
  background: var(--primary-hover);
}

.sideChatSend:disabled,
.sideChatInput:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Use the same conversation rail and artifact sizing as the main transcript. */
.sideChatMessages > :is(
  .msg:not(.user):not(.inputImage),
  .activityCluster,
  .liveProcessPanel,
  .turnResultArtifacts
) {
  width: min(var(--composer-width), 100%);
  max-width: var(--composer-width);
  align-self: center;
}


.promptQueueMenu {
  position: fixed;
  z-index: 80;
  min-width: 188px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}

.promptQueueMenu.hidden {
  display: none !important;
}

.promptQueueMenuItem {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 560;
}

.promptQueueMenuItem:hover {
  background: var(--surface-active);
}

.promptQueueMenuItem.danger {
  color: var(--danger);
}

@media (max-width: 820px) {
  /* Mobile: top tabs + full panel switch; never insert into message stream. */
  .main.sideChatOpen {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    min-height: 0;
    height: 100dvh;
    overflow: hidden;
  }

  .main.sideChatOpen > .top,
  .main.sideChatOpen > .sideChatTabs {
    position: relative;
    z-index: 40;
    flex: 0 0 auto;
  }

  .main.sideChatOpen > .sideChatTabs {
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    backdrop-filter: blur(12px) saturate(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
  }

  .main.sideChatOpen > .chat,
  .main.sideChatOpen > .automationView,
  .main.sideChatOpen > .archiveView,
  .main.sideChatOpen > .composer {
    grid-column: auto;
    grid-row: auto;
  }

  body .main.sideChatOpen > .composer {
    position: absolute !important;
    inset: auto 0 0 !important;
    bottom: var(--keyboard-inset, 0px) !important;
    width: auto !important;
  }

  /* Full-screen side pane reuses main background; never paint solid canvas over skin/custom. */
  .main.sideChatOpen > .sideChatPane {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(var(--header-height, 56px) + env(safe-area-inset-top, 0px) + 48px);
    z-index: 30;
    display: none;
    min-height: 0;
    height: auto;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: transparent;
    box-shadow: none;
  }

  .main.sideChatOpen.sideChatViewMain > .sideChatPane {
    display: none !important;
  }

  .main.sideChatOpen.sideChatViewSide > .chat,
  .main.sideChatOpen.sideChatViewSide > .automationView,
  .main.sideChatOpen.sideChatViewSide > .archiveView,
  .main.sideChatOpen.sideChatViewSide > .composer {
    visibility: hidden;
    pointer-events: none;
  }

  .main.sideChatOpen.sideChatViewSide > .sideChatPane {
    display: flex !important;
  }

  .main.sideChatOpen > .sideChatPane > .sideChatHead {
    display: none;
  }

  .main.sideChatOpen > .sideChatPane > .sideChatMessages {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 16px 10px;
    background: transparent;
    -webkit-overflow-scrolling: touch;
  }

  .main.sideChatOpen > .sideChatPane > .sideChatComposer {
    flex: 0 0 auto;
    padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 14px);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .main.sideChatOpen > .sideChatPane .sideChatComposerBox {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.keyboardOpen .main.sideChatOpen > .sideChatPane > .sideChatComposer {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  /* composer-fit mobile sidechat: keep capsule inside column */
  .main.sideChatOpen > .composer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    --composer-width: 100%;
    --conversation-width: 100%;
  }

  /* A retained Side Chat tab must not clip mobile run-pill details in main view. */
  .main.sideChatOpen.sideChatViewMain > .composer,
  .main.sideChatOpen:has(> .sideChatPane.hidden) > .composer {
    overflow: visible;
  }

  .main.sideChatOpen > .composer > *,
  .main.sideChatOpen > .composer > .box,
  .main.sideChatOpen > .composer > .promptQueue {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .main.sideChatOpen > .composer > .promptQueue {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 auto 8px !important;
  }

  body .main.sideChatOpen > .composer > .box > .attachmentTray {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin: 0 !important;
  }

  .main.sideChatOpen > .sideChatPane > .sideChatComposer .sideChatInput {
    min-height: 40px;
    font-size: 16px;
  }

  .main.sideChatOpen > .sideChatPane > .sideChatComposer .sideChatSend {
    width: 38px;
    height: 38px;
    border-radius: 50%;
  }

  .sideChatTab {
    max-width: min(58vw, 240px);
    min-height: 34px;
    font-size: 12px;
  }
}


/* App-like Shell expand panel + dual image activity gallery */
.activityItemContent.shell {
  position: relative;
  margin: 6px 0 8px 25px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 88%, transparent);
  border-radius: 10px;
  background: #0b1220;
  overflow: hidden;
}
.activityShellHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  background: color-mix(in srgb, #111827 92%, #1d4ed8 8%);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.activityShellLabel { opacity: 0.92; }
.activityItemContent.shell .activityShellBody {
  margin: 0;
  max-height: 240px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e2e8f0;
  padding: 10px 12px 12px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.activityItemContent.shell .activityCopy {
  position: absolute;
  top: 6px;
  right: 8px;
}
.activityImageGallery {
  width: min(640px, calc(100% - 25px));
}
.activityImageGallery:not(.single) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(560px, calc(100% - 25px));
}
.activityImagePreview {
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
}
.activityImagePreview.loaded {
  aspect-ratio: auto;
  background: transparent;
}
.activityImagePreview img {
  object-fit: contain;
  background: transparent;
}

/* Inline local/path images inside assistant/user markdown bodies:
   fixed thumbnails only; click opens full preview. */
.markdownBody .markdownImage,
.msgBody.markdownBody .markdownImage {
  display: inline-block;
  width: 120px;
  max-width: min(120px, 42vw);
  margin: 8px 8px 8px 0;
  vertical-align: top;
}
.markdownBody .markdownImage img,
.msgBody.markdownBody .markdownImage img,
.markdownBody img.markdownInlineImage {
  display: block;
  width: 120px;
  max-width: min(120px, 42vw);
  height: 150px;
  max-height: 150px;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  cursor: zoom-in;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.markdownBody .markdownImage img:hover,
.msgBody.markdownBody .markdownImage img:hover,
.markdownBody img.markdownInlineImage:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}
.markdownBody .markdownImage.unavailable img {
  display: none;
}
.markdownBody .markdownImageFallback {
  display: inline-block;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
  word-break: break-all;
}
.markdownBody .markdownImageRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0;
  max-width: min(560px, 100%);
}
.markdownBody .markdownImageRow .markdownImage {
  margin: 0;
  width: 120px;
  max-width: min(120px, 42vw);
}
.markdownBody .markdownImageRow .markdownImage img {
  width: 120px;
  max-width: min(120px, 42vw);
  height: 150px;
  max-height: 150px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center top;
}

/* Standalone image messages also use compact thumbs; click still opens preview */
body[data-theme] .msg.image:not(.inputImage) {
  width: fit-content;
  max-width: min(148px, 46%);
  padding: 6px;
}
body[data-theme] .msg.image:not(.inputImage) img {
  display: block;
  width: 120px;
  max-width: 120px;
  height: 150px;
  max-height: 150px;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  cursor: zoom-in;
}

@media (max-width: 820px) {
  body .composer > .threadGoalBar,
  .threadGoalBar {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0 0 14px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  body[data-theme] .composer > .threadGoalBar {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body .composer > .threadGoalBar.runtimeOnly,
  .threadGoalBar.runtimeOnly {
    display: block;
  }

  .threadGoalBar > :is(.threadGoalLead, .threadGoalBody, .threadGoalTime, .threadGoalActions) {
    display: none;
  }

  .threadRunMobile {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
  }

  .threadRunPillsViewport {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .threadRunPillsViewport::-webkit-scrollbar {
    display: none;
  }

  .threadRunPills {
    display: flex;
    width: max-content;
    min-width: min-content;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
    border: 0;
    background: transparent;
    padding: 0 12px;
    box-shadow: none;
  }

  body .threadRunPill,
  body .threadRunPill:hover,
  body .threadRunPill:active,
  body .threadRunPill:focus {
    display: inline-flex;
    min-width: 0;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    scroll-snap-align: center;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  body .threadRunPill:hover {
    color: var(--text);
  }

  body .threadRunPill.isSelected,
  body .threadRunPill.isSelected:hover,
  body .threadRunPill.isSelected:active,
  body .threadRunPill.isSelected:focus {
    border-color: var(--text);
    background: var(--text);
    box-shadow: none;
    color: var(--canvas);
  }

  body .threadRunPill:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .threadRunPill > :is(svg, .lucide) {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    stroke-width: 1.9;
  }

  .threadRunPillLabel,
  .threadRunGoalTime {
    color: currentColor;
    font: inherit;
    white-space: nowrap;
  }

  .threadRunGoalPill {
    gap: 6px;
  }

  .threadRunGoalTime {
    margin-left: 1px;
    font-variant-numeric: tabular-nums;
  }

  .threadRunPlanProgress {
    position: relative;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border-radius: 50%;
    background: conic-gradient(currentColor var(--thread-run-progress, 0%), color-mix(in srgb, currentColor 18%, transparent) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  }

  .threadRunDetail {
    position: absolute;
    z-index: 3;
    bottom: calc(100% + 10px);
    left: 50%;
    width: min(560px, calc(100% - 36px));
    max-width: min(560px, calc(100% - 36px));
    box-sizing: border-box;
    margin: 0 auto;
    border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    color: var(--text);
    transform: translateX(-50%);
  }

  .threadRunGoalDetail {
    display: grid;
    min-height: 72px;
    grid-template-rows: minmax(28px, auto) auto;
    gap: 3px;
    padding: 10px 10px 6px 12px;
  }

  .threadRunGoalObjective {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
  }

  .threadRunGoalActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  body .threadRunGoalAction,
  body .threadRunGoalAction:hover,
  body .threadRunGoalAction:active,
  body .threadRunGoalAction:focus {
    width: 34px;
    min-width: 34px;
    height: 34px;
    background: transparent;
    color: var(--text-muted);
  }

  body .threadRunGoalAction:hover {
    color: var(--text);
  }

  body .threadRunGoalAction.isDanger:hover {
    color: var(--danger);
  }

  .threadRunGoalAction > :is(svg, .lucide) {
    width: 17px;
    height: 17px;
    stroke-width: 1.8;
  }

  .threadRunPlanDetail {
    display: grid;
    max-height: min(32vh, 200px);
    gap: 2px;
    overflow: hidden auto;
    padding: 8px 10px;
  }

  .threadRunFilesDetail,
  .threadRunAgentsDetail {
    display: grid;
    max-height: min(32vh, 200px);
    gap: 2px;
    overflow: hidden auto;
    padding: 8px 10px;
  }

  .threadRunFileRow,
  .threadRunAgentRow {
    display: grid;
    min-height: 30px;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 2px;
    color: var(--text);
  }

  .threadRunFileRow > :is(svg, .lucide),
  .threadRunAgentRow > :is(svg, .lucide) {
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    stroke-width: 1.9;
  }

  .threadRunFileName,
  .threadRunAgentName {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .threadRunFileMeta,
  .threadRunAgentStatus {
    color: var(--text-subtle);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .threadRunAgentRow[data-state="starting"] .threadRunAgentStatus,
  .threadRunAgentRow[data-state="running"] .threadRunAgentStatus {
    color: var(--warning);
  }

  .threadRunPlanStep {
    display: grid;
    min-height: 30px;
    grid-template-columns: 18px 21px minmax(0, 1fr);
    align-items: start;
    gap: 3px;
    padding: 2px 0;
    color: var(--text);
  }

  .threadRunPlanMarker {
    position: relative;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    margin-top: 1px;
    border: 2px solid color-mix(in srgb, var(--text-muted) 54%, transparent);
    border-radius: 50%;
    color: var(--text-muted);
  }

  .threadRunPlanStep[data-status="in_progress"] .threadRunPlanMarker {
    border-color: color-mix(in srgb, var(--text-muted) 30%, transparent);
    border-top-color: var(--text-muted);
    animation: threadRunPlanSpin 900ms linear infinite;
  }

  .threadRunPlanStep[data-status="completed"] .threadRunPlanMarker {
    border-color: var(--text-muted);
    background: var(--text-muted);
    color: var(--surface);
  }

  .threadRunPlanMarker > :is(svg, .lucide) {
    width: 10px;
    height: 10px;
    stroke-width: 2.4;
  }

  .threadRunPlanNumber {
    color: var(--text-subtle);
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
  }

  .threadRunPlanText {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.42;
  }

  body .composer > .editedFilesResult.live {
    display: none;
  }

  @keyframes threadRunPlanSpin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .threadRunPlanStep[data-status="in_progress"] .threadRunPlanMarker {
      animation: none;
    }
  }
}

@media (max-width: 360px) {
  .threadRunDetail {
    width: min(560px, calc(100% - 20px));
    max-width: min(560px, calc(100% - 20px));
  }

  .threadRunPills {
    padding-inline: 6px;
  }
}

.forkToast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  transform: translateX(-50%) translateY(-6px);
  z-index: 130;
  max-width: min(92vw, 460px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface-raised, #242424);
  border: 1px solid var(--border, #3d3d3d);
  color: var(--text, #ececec);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.forkToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.forkToast.error {
  background: var(--danger-soft, #3b1f1f);
  border-color: var(--danger, #e05555);
  color: var(--danger, #ff8d8d);
}

/* A running native turn can continue below the floating composer while the user reads history. */
body .main > .jumpToLatest {
  position: absolute;
  z-index: 9;
  bottom: calc(var(--composer-overlay-height, 132px) + 16px);
  left: 50%;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  box-shadow: none;
  padding: 0;
  transform: translate(-50%, 8px);
  transition: color 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease), transform 140ms var(--ease);
}

body .main > .jumpToLatest:not(.hidden) {
  transform: translate(-50%, 0);
}

body .main > .jumpToLatest:hover {
  border-color: var(--primary-line);
  background: var(--surface-hover);
  color: var(--text);
}

body .main > .jumpToLatest:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body .main > .jumpToLatest .jumpToLatestDots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 0;
}

body .main > .jumpToLatest .jumpToLatestDot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.58;
  transform: translateY(2px);
}

body .main > .jumpToLatest:not(.hidden) .jumpToLatestDot {
  animation: jumpToLatestDotFloat 720ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

body .main > .jumpToLatest:not(.hidden) .jumpToLatestDot:nth-child(2) {
  animation-delay: 120ms;
}

body .main > .jumpToLatest:not(.hidden) .jumpToLatestDot:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes jumpToLatestDotFloat {
  0%, 60%, 100% {
    opacity: 0.58;
    transform: translateY(2px);
  }

  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body .main > .jumpToLatest .jumpToLatestDot {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media(max-width:820px) {
  body .main > .jumpToLatest {
    bottom: calc(var(--composer-overlay-height, 132px) + 12px);
    width: 44px;
    height: 44px;
  }
}

/* --- Login screen --- */
body .login {
  position: relative;
  z-index: auto;
  background:
    radial-gradient(1100px 760px at 86% -12%, rgba(124, 92, 255, 0.30), transparent 56%),
    radial-gradient(980px 680px at -10% 108%, rgba(47, 129, 247, 0.28), transparent 56%),
    linear-gradient(160deg, #0a0e1a 0%, #121a2e 55%, #0a1120 100%);
}

body[data-theme="light"] .login {
  background:
    radial-gradient(1050px 720px at 88% -14%, rgba(124, 92, 255, 0.22), transparent 56%),
    radial-gradient(950px 640px at -8% 110%, rgba(47, 129, 247, 0.20), transparent 56%),
    linear-gradient(160deg, #eef2fb 0%, #f8faff 55%, #eaf1ff 100%);
}

.loginBg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.loginBlob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  animation: loginDrift 30s ease-in-out infinite alternate;
}

.loginBlobOne {
  top: -130px;
  right: -90px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at 32% 32%, #7c5cff, transparent 70%);
  opacity: 0.5;
}

.loginBlobTwo {
  bottom: -150px;
  left: -110px;
  width: 430px;
  height: 430px;
  background: radial-gradient(circle at 60% 40%, #2f81f7, transparent 70%);
  opacity: 0.48;
  animation-duration: 36s;
  animation-direction: alternate-reverse;
}

.loginBlobThree {
  top: 46%;
  left: 56%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 50% 50%, #37c871, transparent 70%);
  opacity: 0.22;
  animation-duration: 42s;
}

@keyframes loginDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(42px, -30px, 0) scale(1.12);
  }
}

.login .card {
  position: relative;
  z-index: 3;
  width: min(420px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  background: rgba(13, 18, 30, 0.70);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 32px 30px 28px;
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

body[data-theme="light"] .login .card {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 30px 80px rgba(31, 41, 55, 0.16),
    inset 0 1px 0 #ffffff;
}

.loginBrand {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.loginLogo {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(135deg, #2f81f7, #7c5cff);
  box-shadow: 0 12px 32px rgba(96, 110, 255, 0.38);
  color: #ffffff;
}

.loginLogo .lucide {
  width: 25px;
  height: 25px;
}

.login .brand {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.login .sub {
  margin: 0 0 22px;
  text-align: center;
  color: var(--text-subtle, var(--muted));
  font-size: 13px;
  line-height: 1.55;
}

.login .field {
  margin-bottom: 14px;
}

.login .field input {
  min-height: 46px;
  border-radius: 12px;
  background: rgba(9, 13, 20, 0.55);
  padding: 12px 14px;
}

body[data-theme="light"] .login .field input {
  background: #ffffff;
}

.login .primary {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f81f7, #7c5cff);
  box-shadow: 0 12px 30px rgba(63, 102, 255, 0.30);
  transition: box-shadow 160ms var(--ease), transform 160ms var(--ease), filter 160ms var(--ease);
}

.login .primary:hover {
  box-shadow: 0 14px 36px rgba(63, 102, 255, 0.42);
  filter: brightness(1.06);
}

.login .primary:active {
  transform: translateY(1px);
}

.login .primary .lucide {
  width: 16px;
  height: 16px;
}

.login .errorText {
  text-align: center;
}

.loginFooter {
  margin-top: 18px;
  text-align: center;
  color: var(--text-subtle, var(--muted));
  font-size: 11px;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .loginBlob {
    animation: none;
  }
}


html[data-boot-restore="1"] .chat > .empty:not(.conversationRestoring) {
  opacity: 0;
}
html[data-boot-restore="1"] .title:not([data-restored]) {
  /* keep layout stable while early restore rewrites the title */
}


/* Composer speech feedback */
.composerSpeechToast {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 8px);
  z-index: 8;
  max-width: min(280px, calc(100% - 24px));
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  color: var(--text);
  box-shadow: var(--shadow-md, 0 10px 28px rgba(0,0,0,.14));
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}

.composerSpeechToast.show {
  opacity: 1;
  transform: translateY(0);
}

.composerSpeechToast.error {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 35%, var(--border));
  color: var(--danger, #b91c1c);
}

body .box > .composerMicBtn.pending,
body .box.composerCollapsed > .composerMicBtn.pending,
body .box.composerExpanded > .composerMicBtn.pending {
  opacity: 0.72;
}

body .box > .composerMicBtn:disabled,
body .box.composerCollapsed > .composerMicBtn:disabled,
body .box.composerExpanded > .composerMicBtn:disabled {
  cursor: progress;
  opacity: 0.7;
}

body .box > .composerMicBtn[data-speech-state="unsupported"],
body .box > .composerMicBtn[data-speech-state="insecure"],
body .box > .composerMicBtn[data-speech-state="error"] {
  color: var(--text-subtle);
}