:root {
  --terminal-font-size: 14px;
  --terminal-line-height: 1.16;
  --brand-color: #80e7aa;
  --brand-active: #a4f6c3;
  --surface-bg: #0b100d;
  --surface-panel: #101713;
  --surface-deep: #0c120e;
  --surface-raise: #17221b;
  --text-dim: color-mix(in srgb, var(--brand-color) 14%, #7d7d7d);
  --text-mid: color-mix(in srgb, var(--brand-color) 16%, #a3a3a3);
  --text-main: color-mix(in srgb, var(--brand-color) 14%, #d6d6d6);
  --text-bright: color-mix(in srgb, var(--brand-color) 16%, #f5f5f5);
  --line-1: color-mix(in srgb, var(--brand-color) 14%, #141414);
  --line-2: color-mix(in srgb, var(--brand-color) 18%, #222222);
  --line-3: color-mix(in srgb, var(--brand-color) 24%, #2e2e2e);
  --raise-1: color-mix(in srgb, var(--brand-color) 12%, #101010);
  --brand-deep: color-mix(in srgb, var(--brand-color) 30%, #050505);
  --context-label-shadow: 0 1px 3px #000, 0 0 5px #000;
  --context-meter-shadow: inset 0 1px 4px #0008;
  --disabled-opacity: .55;
  color-scheme: dark;
  font-family: var(--ui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--surface-bg);
  color: #e2eadf;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; touch-action: manipulation; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: var(--disabled-opacity); }
.hidden { display: none !important; }
.muted { color: var(--text-dim); }
.eyebrow { margin: 0 0 6px; color: var(--brand-color); font: 700 11px/1.2 ui-monospace, monospace; letter-spacing: .16em; }
.error { min-height: 20px; margin: 0; color: #ff938e; font-size: 13px; }

.login-view {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 18% 10%, var(--brand-deep) 0, transparent 38%), var(--surface-bg);
}
.embedded-auth-pending .login-view { display: none; }
.panel, dialog { border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface-panel) 96%, transparent); box-shadow: 0 24px 80px #0008; }
.login-card { width: min(430px, 100%); padding: 36px; border-radius: 18px; }
.login-card h1, .dialog-form h2 { margin: 0 0 8px; }
label { display: grid; gap: 7px; color: var(--text-mid); font-size: 13px; }
input, select { width: 100%; border: 1px solid color-mix(in srgb, var(--brand-color) 26%, #2a3530); border-radius: 9px; outline: 0; background: var(--surface-deep); color: var(--text-bright); padding: 11px 12px; }
input:focus, select:focus { border-color: var(--brand-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 13%, transparent); }
.login-card label { margin: 24px 0 10px; }

.primary, .secondary, .danger, .text-button, .icon-button {
  border: 0;
  border-radius: 8px;
  color: inherit;
  padding: 9px 13px;
}
.primary { background: var(--theme-accent, var(--brand-color)); color: #07120b; font-weight: 750; }
.primary:hover, .primary:focus-visible { background: color-mix(in srgb, var(--theme-accent, var(--brand-color)) 82%, white); }
.secondary { border: 1px solid var(--line-2); background: var(--raise-1); }
.danger { border: 1px solid #6c3837; background: #311c1b; color: #ffaaa6; }
.text-button, .icon-button { background: transparent; color: var(--text-mid); }
.icon-button { min-width: 34px; padding: 7px; font-size: 18px; }
.full-width { width: 100%; }

.app-shell { display: grid; grid-template-columns: 310px minmax(0, 1fr); width: 100%; height: 100%; height: 100dvh; }
.app-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
.app-shell.sidebar-collapsed .sidebar { display: none; }
.sidebar { display: flex; min-height: 0; flex-direction: column; gap: 16px; border-right: 1px solid var(--line-1); background: var(--line-1); padding: 20px; }
.brand, .section-heading, .terminal-toolbar, .terminal-actions, .dialog-form header, .dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brand h1 { margin: 0; font-size: 20px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-color); box-shadow: 0 0 14px var(--brand-color); }
.section-heading { margin-top: 5px; color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.session-list { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 8px; overflow: auto; }
.sidebar-mode-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-deep); }
.sidebar-mode-switch button { border: 0; background: transparent; color: var(--text-dim); padding: 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-mode-switch button.active { background: color-mix(in srgb, var(--brand-color) 18%, transparent); color: var(--brand-active); box-shadow: 0 1px 4px #0008; }
.sidebar-panel { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 12px; }
.file-tree { min-height: 0; flex: 1; overflow: auto; font-family: "SFMono-Regular", "Cascadia Code", monospace; font-size: 12px; }
.file-tree-children { margin-left: 14px; border-left: 1px solid var(--line-1); padding-left: 4px; }
.file-tree-row { display: flex; width: 100%; align-items: center; gap: 6px; border: 0; border-radius: 5px; background: transparent; color: var(--text-main); padding: 5px 6px; text-align: left; }
.file-tree-row:hover, .file-tree-row.active { background: color-mix(in srgb, var(--brand-color) 14%, transparent); color: #fff; }
.file-tree-row .tree-icon { width: 14px; color: var(--text-dim); text-align: center; }
.file-view { height: 100%; overflow: auto; background: var(--line-1); padding: 22px; }
.file-view-header { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-1); padding-bottom: 14px; }
.file-view-header h2 { margin: 2px 0 4px; overflow-wrap: anywhere; }
.file-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 14px 0; color: var(--text-mid); font-size: 12px; }
.file-meta div { display: flex; gap: 6px; }.file-meta dt { color: var(--text-dim); }.file-meta dd { margin: 0; }
.file-content { min-height: calc(100% - 130px); margin: 0; overflow: auto; border: 1px solid var(--line-1); border-radius: 8px; background: var(--surface-panel); color: var(--text-main); padding: 16px; font-family: "SFMono-Regular", "Cascadia Code", monospace; font-size: 13px; line-height: 1.5; tab-size: 2; white-space: pre; }
.file-image-wrap { min-height: calc(100% - 130px); overflow: auto; border: 1px solid var(--text-main); border-radius: 8px; background: #fff; padding: 16px; text-align: center; }
.file-image-wrap img { max-width: 100%; height: auto; image-rendering: auto; }
.session-card { position: relative; display: grid; gap: 5px; width: 100%; border: 1px solid transparent; border-radius: 11px; background: var(--line-1); color: inherit; padding: 13px 52px 13px 13px; text-align: left; }
.session-card:hover, .session-card.active { border-color: color-mix(in srgb, var(--brand-color) 45%, transparent); background: color-mix(in srgb, var(--brand-color) 12%, transparent); }
.session-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.session-card span { overflow: hidden; color: var(--text-dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.session-card i { position: absolute; top: 13px; right: 10px; border-radius: 999px; padding: 3px 6px; font-size: 9px; font-style: normal; }
.session-card i.live { background: var(--brand-deep); color: var(--brand-color); }
.session-card i.ended { background: #2a2e2b; color: var(--text-dim); }
.list-empty { padding: 16px 4px; text-align: center; }
.sidebar footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
}
.sidebar footer #device-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.display-mode-switch { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-deep); padding: 3px; }
.display-mode-switch button { border: 0; border-radius: 7px; background: transparent; color: var(--text-dim); padding: 7px 10px; }
.display-mode-switch button.is-active { background: var(--brand-deep); color: var(--brand-active); box-shadow: 0 1px 5px #0006; }
.logout-button { color: #d59b98; }
.sidebar footer .sidebar-settings-button {
  min-width: 38px;
  min-height: 38px;
  padding: 8px;
  color: var(--text-mid);
  background: transparent;
  border: 0;
}
.sidebar footer .sidebar-settings-button:hover,
.sidebar footer .sidebar-settings-button:focus-visible { color: var(--text-bright); background: var(--surface-raise); }
.sidebar footer .sidebar-settings-button svg {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace { position: relative; min-width: 0; min-height: 0; background: var(--surface-deep); }
.sidebar-expand { position: absolute; z-index: 5; top: 12px; left: 10px; border: 1px solid var(--line-3); background: var(--surface-raise); }
.empty-state { display: grid; height: 100%; place-content: center; padding: 30px; text-align: center; }
.empty-state h2 { margin: 0 0 10px; }
.empty-state p:last-child { max-width: 520px; color: var(--text-dim); }
.multi-session-view { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-width: 0; min-height: 0; }
.session-tabs { display: flex; min-width: 0; gap: 5px; overflow-x: auto; border-bottom: 1px solid var(--line-1); background: var(--surface-deep); padding: 6px 8px; scrollbar-width: none; }
.session-tabs::-webkit-scrollbar { display: none; }
.session-tab { position: relative; min-width: 120px; max-width: 240px; flex: 0 0 auto; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: transparent; color: var(--text-dim); padding: 6px 36px 6px 13px; text-align: center; white-space: nowrap; cursor: pointer; }
.session-tab-name { display: block; min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; }
.session-tab-rename-action { position: absolute; top: 50%; right: 5px; display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: currentColor; opacity: .72; transform: translateY(-50%); transition: opacity 140ms ease, background 140ms ease; }
.session-tab-rename-action svg, .session-tab-context-menu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.session-tab-rename-action:hover, .session-tab-rename-action:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); opacity: 1; }
.session-tab-name-input { min-width: 0; width: 100%; height: 24px; margin: -3px 0; border: 1px solid var(--brand-color); border-radius: 5px; background: var(--surface-panel); color: var(--text-main); padding: 2px 6px; outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-color) 18%, transparent); }
.session-tab.is-renaming .session-tab-rename-action { display: none; }
.session-tab-context-menu { position: fixed; z-index: 1200; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-1); border-radius: 9px; background: var(--surface-panel); box-shadow: 0 10px 30px #0006; }
.session-tab-context-menu button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--text-main); }
.session-tab-context-menu button:hover, .session-tab-context-menu button:focus-visible { background: var(--surface-raise); }
.session-tab:hover { border-color: transparent; background: var(--surface-raise); color: var(--text-main); }
.session-tab.active { border-color: var(--brand-color); background: color-mix(in srgb, var(--brand-color) 14%, var(--surface-panel)); color: var(--brand-active); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color) 40%, transparent), 0 0 10px color-mix(in srgb, var(--brand-color) 24%, transparent); }
.session-tab.waiting-for-input { color: #d8b86a; padding-left: 28px; }
.session-tab.waiting-for-input::before { position: absolute; top: 50%; left: 12px; width: 7px; height: 7px; border-radius: 50%; background: #d8b86a; box-shadow: 0 0 0 2px #d8b86a29; content: ""; transform: translateY(-50%); }
.session-tab.active.waiting-for-input { padding-left: 13px; }
.session-tab.active.waiting-for-input::before { display: none; animation: none; }
.session-panes { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; }
.terminal-view { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; height: 100%; overscroll-behavior-x: none; }
.embedded-session .app-shell { grid-template-columns: minmax(0, 1fr); }
.embedded-session .sidebar, .embedded-session .sidebar-expand { display: none !important; }
.embedded-session .session-tabs { display: none !important; }
.embedded-session .multi-session-view { grid-template-rows: minmax(0, 1fr); }
.embedded-session.embedded-multi-session .session-tabs { display: flex !important; }
.embedded-session.embedded-multi-session .multi-session-view { grid-template-rows: auto minmax(0, 1fr); }
.embedded-session.embedded-multi-session .terminal-view.no-active-session > :not(.terminal-toolbar) { display: none !important; }
.embedded-session.embedded-multi-session .terminal-view.no-active-session .context-meter,
.embedded-session.embedded-multi-session .terminal-view.no-active-session .terminal-actions > :not(#quick-new-session-button) { display: none !important; }
.terminal-toolbar { min-height: 65px; border-bottom: 1px solid var(--line-1); background: var(--surface-panel); padding: 10px 16px; }
.usage-meters { display: grid; min-width: 180px; max-width: 560px; flex: 1 1 360px; gap: 2px; }
.usage-meters .context-meter { width: 100%; min-width: 0; max-width: none; flex: none; }
.context-meter {
  --context-used: 0%;
  position: relative;
  min-width: 180px;
  max-width: 560px;
  height: 18px;
  flex: 1 1 360px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-bg);
  box-shadow: var(--context-meter-shadow);
}
.context-meter-fill { width: var(--context-used); height: 100%; background: var(--brand-color); transition: width .35s ease, background-color .2s ease; }
#context-meter { border-color: color-mix(in srgb, var(--theme-accent, var(--brand-color)) 58%, var(--line-2)); background: color-mix(in srgb, var(--theme-accent, var(--brand-color)) 8%, var(--surface-bg)); box-shadow: inset 0 0 0 1px #0005, 0 0 8px color-mix(in srgb, var(--theme-accent, var(--brand-color)) 28%, transparent); }
#context-meter .context-meter-fill { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff66 0%, transparent 38%, #00000045 100%), linear-gradient(180deg, color-mix(in srgb, var(--theme-accent, var(--brand-color)) 72%, white) 0%, var(--theme-accent, var(--brand-color)) 43%, color-mix(in srgb, var(--theme-accent, var(--brand-color)) 68%, black) 100%); box-shadow: inset 0 1px #ffffff88, inset 0 -2px #0008, 2px 0 #fff8, 5px 0 9px color-mix(in srgb, var(--theme-accent, var(--brand-color)) 34%, transparent); }
#context-meter .context-meter-fill::after { position: absolute; inset: 0; background: repeating-linear-gradient(112deg, transparent 0 18px, #ffffff14 19px, transparent 22px); content: ""; }
.account-quota-meter {
  border-color: var(--quota-edge-color, #ff6075);
  background: #160b0f;
  box-shadow: inset 0 0 0 1px #0009, 0 0 8px var(--quota-glow-color, #ff365744);
}
.account-quota-meter[data-quota-tier="0"] { --quota-layer-gradient: linear-gradient(180deg, #ff7c84 0%, #ef334f 43%, #aa102d 100%); --quota-underlay-gradient: #160b0f; --quota-edge-color: #ff6075; --quota-glow-color: #ff365744; }
.account-quota-meter[data-quota-tier="1"] { --quota-layer-gradient: linear-gradient(180deg, #ffd05a 0%, #ff8b24 43%, #d74312 100%); --quota-underlay-gradient: linear-gradient(180deg, #ff7c84 0%, #ef334f 43%, #aa102d 100%); --quota-edge-color: #ffb144; --quota-glow-color: #ff7c2844; }
.account-quota-meter[data-quota-tier="2"] { --quota-layer-gradient: linear-gradient(180deg, #fff58a 0%, #f3c72f 43%, #c98108 100%); --quota-underlay-gradient: linear-gradient(180deg, #ffd05a 0%, #ff8b24 43%, #d74312 100%); --quota-edge-color: #ffe36a; --quota-glow-color: #ffc12d44; }
.account-quota-meter[data-quota-tier="3"] { --quota-layer-gradient: linear-gradient(180deg, #8dfaff 0%, #35c7ef 43%, #285bdd 100%); --quota-underlay-gradient: linear-gradient(180deg, #fff58a 0%, #f3c72f 43%, #c98108 100%); --quota-edge-color: #68eaff; --quota-glow-color: #37cfff4d; }
.account-quota-underlay { position: absolute; inset: 0; background: linear-gradient(180deg, #ffffff55 0%, transparent 38%, #00000040 100%), var(--quota-underlay-gradient, #160b0f); box-shadow: inset 0 1px #ffffff55, inset 0 -2px #0007; }
.account-quota-meter .context-meter-fill { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(180deg, #ffffff66 0%, transparent 38%, #00000045 100%), var(--quota-layer-gradient, linear-gradient(180deg, #ff7c84, #aa102d)); opacity: 1; box-shadow: inset 0 1px #ffffff88, inset 0 -2px #0008, 2px 0 #fff8, 5px 0 9px var(--quota-glow-color, #ff365744); }
.account-quota-meter .context-meter-fill::after { position: absolute; inset: 0; background: repeating-linear-gradient(112deg, transparent 0 18px, #ffffff14 19px, transparent 22px); content: ""; }
.account-quota-window-marker { position: absolute; z-index: 2; top: 1px; bottom: 1px; left: var(--quota-short-window, 0%); width: 3px; transform: translateX(-1.5px); background: #00efff; box-shadow: 0 0 0 1px #031317, 0 0 6px 2px #00efffcc; }
.account-quota-window-marker::before { position: absolute; top: -1px; left: 50%; width: 8px; height: 5px; transform: translateX(-50%); background: #00efff; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; }
.account-quota-meter .context-meter-label { z-index: 3; color: #fff7ea; text-shadow: 0 1px 3px #000, 0 0 5px #000; }
.context-meter-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-bright);
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1;
  text-shadow: var(--context-label-shadow);
  white-space: nowrap;
}
.terminal-actions { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.terminal-actions::-webkit-scrollbar { display: none; }
.terminal-actions button { flex: 0 0 auto; white-space: nowrap; }
.toolbar-icon-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--raise-1);
  color: var(--text-mid);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.toolbar-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toolbar-icon-button { position: relative; }
.toolbar-icon-button.session-create-pending svg { visibility: hidden; }
.toolbar-icon-button.session-create-pending::after { position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; animation: session-create-spin .7s linear infinite; }
@keyframes session-create-spin { to { transform: rotate(360deg); } }
.settings-loading { display: flex; align-items: center; gap: 10px; padding: 14px 2px; color: var(--text-mid); }
.settings-loading.hidden { display: none; }
.settings-loading-spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: session-create-spin .7s linear infinite; }
.toolbar-icon-button .speech-disabled-mark { stroke: #e76567; }
.toolbar-icon-button.auto-speech-enabled .speech-disabled-mark,
.toolbar-icon-button:not(.auto-speech-enabled) .speech-enabled-waves { display: none; }
.toolbar-icon-button.auto-speech-enabled {
  border-color: var(--brand-active);
  background: var(--brand-deep);
  color: var(--brand-active);
  box-shadow: 0 0 0 2px var(--brand-active)22;
}
.toolbar-icon-button.danger { border-color: #6c3837; background: #311c1b; color: #ffaaa6; }
.control-state { color: var(--text-dim); font-size: 11px; }
.control-state.owned { color: var(--brand-color); }
.terminal-surface { position: relative; grid-row: 2; min-width: 0; min-height: 0; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; background: var(--surface-panel); }
.terminal-container { width: 100%; height: 100%; min-width: 0; min-height: 0; overscroll-behavior-x: none; touch-action: pan-y; background: var(--surface-panel); padding: 10px 8px 8px 12px; }
.terminal-container .xterm { height: 100%; }
.terminal-scrollback { position: absolute; z-index: 2; inset: 0; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; background: var(--surface-panel); padding: 10px 8px 8px 12px; }
.terminal-scrollback .xterm, .history-content .xterm { height: 100%; }
.terminal-scrollback .xterm-viewport, .history-content .xterm-viewport { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.touch-input { display: block; border-top: 1px solid var(--line-1); background: var(--surface-panel); padding: 7px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.touch-key-row, .touch-composer-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.touch-key-row { margin-bottom: 7px; overflow-x: auto; overflow-y: hidden; padding-top: 6px; flex-wrap: nowrap; scrollbar-width: none; }
.touch-key-row::-webkit-scrollbar { display: none; }
.composer-attachment-preview { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface-raise); padding: 8px 10px; color: var(--text-main); font-size: 13px; }
.composer-attachment-preview.hidden { display: none; }
.composer-attachment-preview img { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; }
.composer-attachment-preview span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-attachment-preview button { width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--line-3); color: var(--text-main); padding: 0; font-size: 18px; }
.upload-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; justify-self: center; width: min(680px, calc(100% - 28px)); margin: 0 0 8px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface-panel); padding: 9px 11px; color: var(--text-main); box-shadow: 0 10px 30px #0008; font-size: 12px; }
.upload-progress.hidden { display: none; }
.upload-progress-copy { display: grid; min-width: 0; gap: 2px; }
.upload-progress-copy strong, .upload-progress-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress-copy small { color: var(--text-dim); }
#upload-progress-percent { color: var(--brand-color); font-variant-numeric: tabular-nums; font-weight: 700; }
#upload-cancel-button { min-height: 28px; color: #ffb7a7; padding: 2px 5px; }
.upload-progress-track { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: var(--line-1); }
.upload-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand-color); transition: width 120ms linear; }
.touch-key-row button { flex-shrink: 0; padding: 7px 10px; font-size: 12px; }
.touch-key-row button[id^="touch-arrow-"] { padding: 5px 7px; font-size: 14px; }
.touch-composer-row textarea { min-width: 0; min-height: 42px; max-height: 112px; flex: 1; resize: vertical; border: 1px solid var(--line-3); border-radius: 9px; outline: 0; background: var(--surface-deep); color: var(--text-bright); padding: 10px 11px; }
.touch-composer-row textarea::placeholder { color: var(--text-dim); opacity: 1; }
.touch-composer-row textarea:focus { border-color: var(--theme-accent, var(--brand-color)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, var(--brand-color)) 13%, transparent); }
.touch-composer-row button { align-self: stretch; }
.touch-composer-row .composer-action {
  width: 52px;
  min-width: 52px;
  flex: 0 0 52px;
  border-width: 1px;
  border-style: solid;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.touch-composer-row .composer-action.primary { border-color: transparent; }
.touch-composer-row .composer-action svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.attachment-upload { display: inline-flex; align-self: stretch; align-items: center; justify-content: center; cursor: pointer; }
.attachment-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.history-view { position: absolute; z-index: 4; inset: 65px 0 0; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; background: var(--surface-panel); }
.todo-view { z-index: 3; display: grid; grid-row: 2; grid-template-rows: auto minmax(72px, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden; border-top: 1px solid var(--line-2); background: var(--surface-panel); }
.todo-view > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-2); padding: 12px 16px; }
.todo-view > header div { display: grid; gap: 3px; }
.todo-view > header small { color: var(--text-dim); font-weight: 400; }
#todo-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; border-top: 1px solid var(--line-1); padding: 12px; }
#todo-form .todo-attachment-preview { grid-column: 1 / -1; margin: 0; }
#todo-form textarea { min-width: 0; min-height: 44px; max-height: 72px; resize: vertical; }
.todo-list { display: flex; flex-direction: column; gap: 9px; overflow: auto; padding: 12px; }
.todo-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 8px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--line-1); padding: 11px; }
.todo-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.todo-empty { color: var(--text-dim); text-align: center; }
.todo-composer-button { position: relative; align-self: stretch; }
.todo-count { position: absolute; top: -5px; right: -5px; min-width: 17px; border-radius: 999px; background: var(--brand-color); color: #07120b; padding: 1px 4px; font-size: 10px; font-weight: 800; }
.history-view header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-2); padding: 9px 14px; }
.history-content { width: 100%; min-width: 0; max-width: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; background: var(--surface-panel); padding: 10px 8px 8px 12px; }
.native-history-source { position: absolute !important; inset: 0; visibility: hidden; pointer-events: none; }
.native-terminal-history { width: 100%; min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--text-main); font-family: "SFMono-Regular", "Cascadia Code", "Noto Sans Mono CJK SC", monospace; font-size: var(--terminal-font-size); font-kerning: none; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; line-height: var(--terminal-line-height); -webkit-font-smoothing: antialiased; }
.native-terminal-line { min-height: var(--native-terminal-row-height, calc(var(--terminal-font-size) * var(--terminal-line-height))); white-space: pre-wrap; overflow-wrap: anywhere; }
.native-terminal-wide-cell { display: inline-block; width: calc(var(--native-terminal-cell-width) * 2); overflow: visible; vertical-align: top; }
.scrollback-live-button { position: sticky; z-index: 3; top: max(0px, env(safe-area-inset-top)); float: right; width: 38px; height: 38px; margin: 0 0 8px 8px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--line-1)ee; color: var(--text-main); padding: 8px; }
.scrollback-live-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.connection-banner { position: fixed; z-index: 20; top: 50%; left: 50%; width: max-content; max-width: min(430px, calc(100% - 32px)); transform: translate(-50%, -50%); border: 1px solid #5a4430; border-radius: 12px; background: #2a2118ee; color: #ffd0a0; padding: 11px 15px; box-shadow: 0 12px 35px #0008; font-size: 13px; text-align: center; pointer-events: none; animation: toast-visible 4s ease both; }
@keyframes toast-visible { 0% { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } 10%, 72% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) { .connection-banner, .toolbar-icon-button.session-create-pending::after { animation: none; } }
.mobile-only { display: none; }
.desktop-only { display: inline-flex; }

dialog { width: min(520px, calc(100% - 28px)); border-radius: 16px; color: inherit; padding: 0; }
dialog::backdrop { background: var(--surface-bg)bb; backdrop-filter: blur(5px); }
.dialog-form { display: grid; gap: 18px; padding: 24px; }
.dialog-form header { margin-bottom: 2px; }
.dialog-form h2 { letter-spacing: .005em; }
.dialog-form label > input,
.dialog-form label > select {
  height: 43px;
  min-height: 42px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.25;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  border-radius: 10px;
  background: var(--line-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dialog-form label > select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brand-active) 50%),
    linear-gradient(135deg, var(--brand-active) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% - 3px),
    calc(100% - 11px) calc(50% - 3px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
#create-session-form label {
  gap: 8px;
  color: var(--text-mid);
  margin: 0;
}
#create-session-form { width: 100%; gap: 15px; }
#create-dialog { width: min(760px, calc(100% - 28px)); max-height: min(900px, calc(100dvh - 28px)); }
#create-session-form { max-height: calc(100dvh - 28px); overflow-y: auto; }
#create-session-form .dialog-actions button {
  min-height: 40px;
  border-radius: 10px;
}
.checkbox-label { display: flex; align-items: center; gap: 9px; }
.checkbox-label input { width: auto; }
.dialog-actions { justify-content: flex-end; }
.dialog-hint { margin: -8px 0 0; font-size: 12px; line-height: 1.5; }
.notification-options { display: grid; gap: 9px; }
.notification-options label { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--line-1); padding: 13px; cursor: pointer; }
.notification-options label:has(input:checked) { border-color: var(--brand-color); background: color-mix(in srgb, var(--brand-color) 12%, transparent); }
.notification-options input { width: auto; accent-color: var(--brand-color); }
.notification-options span { display: grid; gap: 3px; }
.notification-options small { color: var(--text-dim); }

@media (max-width: 760px) {
  :root { --terminal-font-size: 12px; }
  .app-shell { display: block; }
  html:not(.embedded-session) .session-tabs { padding-top: max(6px, env(safe-area-inset-top)); }
  .sidebar { width: 100%; height: 100%; border: 0; padding-top: calc(20px + env(safe-area-inset-top)); }
  .workspace { display: none; width: 100%; height: 100%; }
  .app-shell.terminal-open .sidebar { display: none; }
  .app-shell.terminal-open .workspace { display: block; }
  .app-shell.file-open .sidebar { display: none; }
  .app-shell.file-open .workspace { display: block; }
  .file-view { padding: max(14px, env(safe-area-inset-top)) 10px 10px; }
  .embedded-session .workspace { display: block; }
  .mobile-only { display: inline-flex; }
  .desktop-only { display: none !important; }
  .terminal-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 0; padding: max(9px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
  .embedded-session .terminal-toolbar { padding-top: 9px; }
  .native-host-session .terminal-toolbar { padding-top: 9px; }
  .embedded-session .touch-input { padding-bottom: 18px; }
  .context-meter { width: 100%; min-width: 0; max-width: none; height: 17px; }
  .context-meter-label { overflow: hidden; padding: 0 8px; font-size: 11px; text-overflow: ellipsis; }
  .terminal-actions { width: 100%; justify-content: flex-start; gap: 5px; }
  .terminal-actions button { padding: 7px 8px; font-size: 11px; }
  .terminal-actions .toolbar-icon-button { width: 36px; height: 36px; padding: 7px; }
  .control-state { display: none; }
  .terminal-container { padding: 7px 3px 5px 7px; }
  .history-view { position: relative; grid-row: 2 / 4; inset: auto; }
  #todo-form { grid-template-columns: minmax(0, 1fr) auto; padding: 8px; }
}

@media (min-width: 1400px) {
  .session-panes { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 2200px) {
  .session-panes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479px) {
  .touch-composer-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .touch-composer-row textarea { grid-column: 1 / -1; }
  .touch-composer-row .composer-action {
    width: auto;
    min-width: 0;
    min-height: 40px;
    flex: none;
  }
}

@media (min-width: 480px) and (max-width: 620px) {
  .terminal-toolbar {
    gap: 6px;
    padding: max(6px, env(safe-area-inset-top)) 6px 6px;
  }
  .terminal-actions { gap: 4px; }
  .terminal-actions button { padding: 5px 7px; font-size: 10px; }
  .terminal-actions .toolbar-icon-button { width: 32px; height: 32px; padding: 6px; }
  .touch-input {
    display: block;
    padding: 5px max(6px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  .touch-key-row, .touch-composer-row { min-width: 0; gap: 4px; }
  .touch-key-row { margin-bottom: 5px; }
  .touch-key-row button { flex-shrink: 0; padding: 6px 8px; font-size: 11px; }
  .touch-key-row button[id^="touch-arrow-"] { padding: 4px 6px; font-size: 13px; }
  .touch-composer-row textarea {
    min-height: 36px;
    max-height: 72px;
    padding: 7px 8px;
  }
  .touch-composer-row .composer-action {
    width: 44px;
    min-width: 44px;
    flex-basis: 44px;
    padding: 0;
    font-size: 11px;
  }
}

.app-config-card {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface-deep);
  padding: 10px;
  margin-bottom: 8px;
}
.app-config-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 8px;
}
.app-config-form label {
  margin: 0;
}
.app-config-save {
  align-self: flex-start;
  font-size: 12px;
  padding: 6px 16px;
}

.namespace-config-info {
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface-deep);
  padding: 10px 12px;
}
.namespace-config-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 6px 0 0;
  font-size: 13px;
}
.namespace-config-list dt { color: var(--text-dim); }
.namespace-config-list dd { margin: 0; color: var(--text-main); }

.namespace-buttons {
  display: flex;
  gap: 6px;
  padding: 4px 0;
  overflow-x: auto;
}
.namespace-button {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 10px;
}

.activity-rail { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 0; overflow: visible; }
.activity-rail::-webkit-scrollbar { display: none; }
.activity-card { position: relative; display: grid; width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; place-items: center; border: 1px solid var(--line-2); border-radius: 9px; background: var(--raise-1); padding: 0; color: var(--text-mid); transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.activity-card:hover, .activity-card.active { border-color: color-mix(in srgb, var(--brand-color) 46%, var(--line-2)); background: var(--brand-deep); color: var(--brand-active); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-color) 14%, transparent); }
.activity-card:disabled { opacity: var(--disabled-opacity); }
.activity-card-icon { display: grid; width: 100%; height: 100%; place-items: center; border-radius: inherit; font-size: 17px; font-weight: 800; color: inherit; }
.activity-card-icon.has-actionable { color: var(--theme-accent, var(--brand-color)); }
.activity-card-icon.is-progress > svg { width: 20px; height: 20px; fill: var(--surface-panel); stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transform: translateX(-3px); }
.activity-card-icon.is-run::before { width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, transparent 48%, currentColor 49% 53%, transparent 54%) center 4px / 100% 6px no-repeat; content: ""; }
.activity-card-icon.is-app .task-app-mark { width: 28px; height: 28px; border-radius: 8px; }
.activity-card-icon.is-app .task-app-mark::after { inset: 2px; border-radius: 6px; }
.activity-card-icon.is-app .task-app-mark svg { width: 18px; height: 18px; }
.activity-card-badge { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; padding: 0; border: 2px solid var(--surface-panel); border-radius: 999px; background: #ff453a; }

.activity-panel { display: flex; flex-direction: column; gap: 3px; max-height: min(280px, 38vh); margin-bottom: 7px; overflow: auto; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-deep); padding: 6px; box-shadow: 0 10px 28px color-mix(in srgb, #000 20%, transparent); }
.activity-panel-header { position: sticky; z-index: 2; top: -6px; display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px; margin: -6px -6px 2px; padding: 7px 9px; border-bottom: 1px solid var(--line-1); background: color-mix(in srgb, var(--surface-deep) 94%, transparent); backdrop-filter: blur(16px); }
.activity-panel-header > span { display: grid; min-width: 0; gap: 1px; }
.activity-panel-header strong { color: var(--text-bright); font-size: 12px; }
.activity-panel-header small { color: var(--text-dim); font-size: 10px; }
.activity-panel-close { width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--raise-1); color: var(--text-mid); padding: 0; font-size: 18px; }
.activity-group-label { color: var(--text-dim); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 6px 2px; }
.activity-panel-item { display: flex; min-height: 42px; align-items: center; gap: 8px; border: 0; border-radius: 9px; background: transparent; padding: 6px 7px; color: var(--text-main); text-align: left; }
.activity-panel-item:hover { background: var(--line-1); }
.activity-icon-done, .activity-icon-pending { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 7px; font-size: 11px; font-weight: 800; }
.activity-icon-done { background: var(--brand-deep); color: var(--theme-accent, var(--brand-color)); }
.activity-icon-pending { background: #2b2616; color: #d4a946; }
.activity-item-body { display: grid; gap: 1px; min-width: 0; flex: 1; }
.activity-item-body strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-item-body small { color: var(--text-dim); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.activity-panel.task-sheet { position: fixed; z-index: 80; right: 12px; bottom: 84px; width: min(480px, calc(100vw - 24px)); height: min(720px, calc(100dvh - 108px)); max-height: none; gap: 0; margin: 0; overflow: hidden auto; border-radius: 18px; padding: 0 20px 22px; background: color-mix(in srgb, var(--surface-deep) 97%, transparent); box-shadow: 0 24px 72px #0008; backdrop-filter: blur(24px); }
.activity-panel.task-sheet.is-opening { animation: task-sheet-open 260ms cubic-bezier(.2,.82,.2,1) both; }
.activity-panel.task-sheet.is-closing { pointer-events: none; animation: task-sheet-close 210ms cubic-bezier(.4,0,1,1) both; }
.task-sheet-header { position: sticky; z-index: 3; top: 0; display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -20px; padding: 14px 18px; border-bottom: 1px solid var(--line-1); background: color-mix(in srgb, var(--surface-deep) 94%, transparent); backdrop-filter: blur(18px); }
.task-sheet-identity { display: flex; min-width: 0; align-items: center; gap: 12px; }
.task-sheet-identity > span:last-child { display: grid; min-width: 0; gap: 2px; }
.task-sheet-identity small, .task-progress-overview small { color: var(--text-dim); font-size: 11px; }
.task-sheet-identity strong { overflow: hidden; color: var(--text-bright); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.task-app-mark { position: relative; display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--task-app-color) 55%, #f4dfad); border-radius: 11px; color: #fff0c7; background: linear-gradient(145deg, color-mix(in srgb, var(--task-app-color) 86%, #fff), color-mix(in srgb, var(--task-app-color) 66%, #111)); box-shadow: inset 0 1px #fff4, inset 0 -7px 12px #0002, 0 5px 10px #0004; }
.task-app-mark::after { position: absolute; inset: 3px; border: 1px solid #f1d89544; border-radius: 8px; content: ""; }
.task-app-mark svg { z-index: 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.task-app-icon { width: 46px; height: 46px; }
.task-icon-button, .task-stage-action, .task-app-switch, .run-open-action { display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--raise-1); color: var(--text-mid); padding: 0; }
.task-icon-button { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; font-size: 20px; }
.task-app-switcher { display: flex; justify-content: center; gap: 8px; padding: 15px 0 3px; }
.task-app-switch { position: relative; width: 48px; height: 48px; border-radius: 12px; font-size: 16px; font-weight: 800; }
.task-app-switch .task-app-mark { width: 34px; height: 34px; }
.task-app-switch.active { border-color: var(--theme-accent, var(--brand-color)); background: var(--brand-deep); color: var(--theme-accent, var(--brand-color)); }
.task-app-switch.attention::after { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border: 2px solid var(--surface-deep); border-radius: 50%; background: #ff453a; content: ""; }
.task-progress-overview { display: flex; align-items: center; gap: 15px; margin: 18px 0 12px; padding: 15px; border: 1px solid var(--line-1); border-radius: 15px; background: var(--raise-1); }
.task-progress-overview > span { display: grid; gap: 3px; }
.task-progress-overview strong { color: var(--text-bright); font-size: 14px; }
.task-progress-ring { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--theme-accent, var(--brand-color)) var(--task-progress), var(--line-2) 0); }
.task-progress-ring::before { grid-area: 1 / 1; width: 46px; height: 46px; border-radius: 50%; background: var(--raise-1); content: ""; }
.task-progress-ring span { z-index: 1; grid-area: 1 / 1; color: var(--text-bright); font-size: 11px; font-weight: 800; }
.run-state { display: grid; min-width: 70px; height: 38px; place-items: center; border: 1px solid var(--line-2); border-radius: 19px; color: var(--text-mid); background: var(--surface-deep); font-size: 11px; font-weight: 800; }
.run-state.state-running, .run-state.state-queued { border-color: #4d8ed6; color: #86bcff; }
.run-state.state-waiting_human, .run-state.state-failed { border-color: #bb4b47; color: #ff8a84; }
.run-state.state-completed { border-color: #54885c; color: #8dcc98; }
.run-facts { display: grid; gap: 0; margin-top: 8px; border: 1px solid var(--line-1); border-radius: 14px; overflow: hidden; }
.run-facts > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-1); }
.run-facts > div:last-child { border-bottom: 0; }
.run-facts small { color: var(--text-dim); font-size: 11px; }
.run-facts strong { overflow-wrap: anywhere; color: var(--text-main); font-size: 12px; font-weight: 600; }
.run-open-action { width: 42px; height: 42px; margin: 18px 0 0 auto; border-radius: 12px; color: var(--theme-accent, var(--brand-color)); font-size: 20px; }
.task-timeline { display: grid; padding: 4px 0 8px; }
.task-stage { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 66px; align-items: start; gap: 10px; padding: 9px 8px; border-radius: 13px; }
.task-stage::before { position: absolute; top: 41px; bottom: -16px; left: 23px; width: 2px; background: var(--line-2); content: ""; }
.task-stage:last-child::before { display: none; }
.task-stage.current { background: color-mix(in srgb, var(--brand-deep) 72%, transparent); }
.task-stage-marker { z-index: 1; display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid var(--line-2); border-radius: 50%; background: var(--surface-deep); color: var(--text-dim); font-size: 12px; font-weight: 900; }
.task-stage.state-completed .task-stage-marker, .task-stage.state-skipped .task-stage-marker { border-color: var(--theme-accent, var(--brand-color)); background: var(--brand-deep); color: var(--theme-accent, var(--brand-color)); }
.task-stage.state-waiting_user .task-stage-marker, .task-stage.state-failed .task-stage-marker { border-color: #ff665e; background: #3a1d1d; color: #ff8a84; }
.task-stage.state-running .task-stage-marker { border-color: #65a8ff; color: #86bcff; }
.task-stage.state-ready .task-stage-marker { border-color: #d4a946; color: #e9c66c; }
.task-stage-body { display: grid; min-width: 0; gap: 5px; padding-top: 5px; }
.task-stage-body strong { color: var(--text-main); font-size: 13px; }
.task-stage-body small { color: var(--text-dim); font-size: 11px; line-height: 1.45; }
.task-stage-action { width: 34px; height: 34px; margin-top: -2px; border-radius: 10px; color: var(--theme-accent, var(--brand-color)); font-size: 18px; }
.task-stage-action:hover, .task-icon-button:hover, .task-app-switch:hover, .run-open-action:hover { border-color: color-mix(in srgb, var(--brand-color) 52%, var(--line-2)); background: var(--brand-deep); }

[data-theme="black_myth"] .task-icon-button,
[data-theme="black_myth"] .task-stage-action,
[data-theme="black_myth"] .task-app-switch,
[data-theme="black_myth"] .run-open-action {
  border-radius: 50%;
}
[data-theme="black_myth"] .activity-card { border-radius: 10px; }
[data-theme="black_myth"] .activity-card-icon.is-progress { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); }
[data-theme="black_myth"] .activity-card-icon.is-progress > svg { display: block; width: 100%; height: 100%; place-self: auto; fill: none; stroke-width: 1.35; transform: none; }
[data-theme="black_myth"] .task-app-mark { border-color: rgba(196,154,74,.55); border-radius: 3px; color: var(--theme-accent, #c49a4a); background: linear-gradient(145deg, rgba(196,154,74,.15), rgba(196,154,74,.025)); box-shadow: inset 0 0 0 1px rgba(244,223,173,.06), 0 0 14px rgba(196,154,74,.12); }
[data-theme="black_myth"] .task-app-mark::after { border-color: rgba(241,216,149,.22); border-radius: 1px; }
[data-theme="black_myth"] .task-app-mark svg { stroke-width: 1.45; }
[data-theme="black_myth"] .activity-panel.task-sheet { border-color: rgba(196,154,74,.32); border-radius: 2px; background: rgba(7,9,8,.97); }
[data-theme="black_myth"] .task-progress-overview { border-radius: 2px; background: rgba(196,154,74,.06); }
[data-theme="black_myth"] .task-progress-ring { border: 1px solid rgba(196,154,74,.32); background: conic-gradient(var(--theme-accent) var(--task-progress), rgba(224,214,190,.10) 0); box-shadow: 0 0 18px rgba(196,154,74,.12); }
[data-theme="black_myth"] .task-progress-ring::before { background: #0b0d0c; }
[data-theme="black_myth"] .task-stage { border-radius: 2px; }
[data-theme="black_myth"] .task-stage.current { background: linear-gradient(90deg, rgba(196,154,74,.14), transparent); }
[data-theme="black_myth"] .task-stage::before { width: 1px; background: linear-gradient(var(--theme-accent), var(--line-2)); }
[data-theme="black_myth"] .task-stage-marker { border-width: 1px; box-shadow: 0 0 0 4px rgba(196,154,74,.05); }

@media (max-width: 700px) {
  .activity-panel.task-sheet { right: 0; bottom: 0; width: 100vw; height: 85dvh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 20px 20px 0 0; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

@keyframes task-sheet-open { from { opacity: 0; transform: translateX(24px) scale(.985); } }
@keyframes task-sheet-close { to { opacity: 0; transform: translateX(20px) scale(.985); } }

@media (max-width: 700px) {
  @keyframes task-sheet-open { from { opacity: 0; transform: translateY(34px); } }
  @keyframes task-sheet-close { to { opacity: 0; transform: translateY(34px); } }
}

@media (prefers-reduced-motion: reduce) {
  .activity-panel.task-sheet.is-opening,
  .activity-panel.task-sheet.is-closing { animation: none; }
}

.settings-menu-wrap { position: relative; }
.settings-menu { position: absolute; bottom: 100%; right: 0; margin-bottom: 6px; display: flex; flex-direction: column; min-width: 110px; background: var(--theme-background, var(--surface-bg)); border: 1px solid var(--line-1); border-radius: 8px; padding: 4px; z-index: 30; }
.settings-menu button { background: none; border: none; color: inherit; text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.settings-menu button:hover { background: rgba(255, 255, 255, 0.06); }
.fullscreen-dialog { width: min(1200px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); max-height: calc(100vh - 32px); }
.local-preview-dialog { overflow: hidden; }
.local-preview-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; min-height: 0; padding: 14px; }
.local-preview-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-2); padding: 0 0 12px; }
.local-preview-shell h2 { margin: 0; overflow-wrap: anywhere; font-size: 17px; }
.local-preview-shell small { display: block; margin-top: 3px; color: var(--text-dim); }
.local-preview-filters { display: flex; gap: 7px; min-width: 0; overflow-x: auto; border-bottom: 1px solid var(--line-2); padding: 9px 0; scrollbar-width: none; }
.local-preview-filters::-webkit-scrollbar { display: none; }
.local-preview-filter { flex: 0 0 auto; min-height: 32px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text-mid); padding: 5px 11px; font-size: 12px; }
.local-preview-filter[aria-pressed="true"] { border-color: var(--brand-color); background: color-mix(in srgb, var(--brand-color) 16%, transparent); color: var(--brand-active); }
.local-preview-frame { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; min-height: 0; align-items: center; padding-top: 12px; }
.local-preview-nav { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--line-1); color: var(--text-main); padding: 10px; }
.local-preview-nav:disabled { visibility: hidden; }
.local-preview-nav svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.local-preview-carousel { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; }
.local-preview-carousel::-webkit-scrollbar { display: none; }
.local-preview-slide { display: grid; flex: 0 0 100%; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.local-preview-file { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 2px 2px 10px; }
.local-preview-file strong { overflow-wrap: anywhere; }
.local-preview-file small { color: var(--text-dim); }
.local-preview-content { position: relative; display: grid; min-height: 0; place-items: center; overflow: auto; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-deep); }
.local-preview-content img, .local-preview-content video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.local-preview-content img { position: absolute; inset: 0; width: 100%; height: 100%; }
.local-preview-content video { width: 100%; height: 100%; background: #000; }
.local-preview-content audio { width: min(720px, calc(100% - 32px)); }
.local-preview-content pre { align-self: stretch; justify-self: stretch; min-height: 100%; margin: 0; overflow: auto; padding: 16px; color: var(--text-main); font: 13px/1.55 "SFMono-Regular", "Cascadia Code", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.local-preview-status { color: var(--text-dim); padding: 24px; text-align: center; }
@media (max-width: 700px) {
  .local-preview-shell { padding: 10px; }
  .local-preview-frame { position: relative; display: block; padding-top: 10px; }
  .local-preview-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); background: color-mix(in srgb, var(--surface-panel) 88%, transparent); }
  #local-preview-previous { left: 6px; }
  #local-preview-next { right: 6px; }
  .local-preview-content pre { padding: 14px; }
}
.cli-config-form { height: 100%; overflow-y: auto; align-content: start; }
.provider-config-table-wrap { display: grid; gap: 14px; }
.provider-card { border: 1px solid var(--line-1); border-radius: 12px; padding: 16px 18px; display: grid; gap: 14px; background: var(--surface-panel); }
.provider-card-header { display: flex; justify-content: space-between; align-items: center; }
.provider-card-header h4 { margin: 0; font-size: 15px; }
.card-actions { display: flex; gap: 8px; }
.provider-field { display: grid; gap: 7px; }
.provider-field > span { font-size: 12px; color: var(--text-dim); }
.provider-field-caption { display: flex; justify-content: space-between; align-items: center; }
.codex-account-list { display: grid; gap: 9px; }
.codex-account-meter { width: 100%; min-width: 0; max-width: none; }
.codex-account-key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.codex-account-key-row input, .codex-account-key-row button { min-width: 0; height: 34px; font-size: 12px; }
.unified-settings { position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr; gap: 0; overflow: hidden; }
.settings-toast { position: absolute; z-index: 2; right: 18px; bottom: 18px; max-width: calc(100% - 36px); border: 1px solid #3e9b68; border-radius: 10px; background: #173526f2; color: #bff5d3; padding: 10px 14px; box-shadow: 0 12px 32px #0008; font-size: 13px; pointer-events: none; animation: settings-toast-visible 3s ease both; }
@keyframes settings-toast-visible { 0% { opacity: 0; transform: translateY(8px); } 12%, 76% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-5px); } }
.settings-header { display: flex; justify-content: space-between; align-items: center; padding: 0 0 12px; border-bottom: 1px solid var(--line-1); }
.settings-tabs { display: flex; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line-1); overflow-x: auto; }
.settings-tab { background: none; border: none; color: var(--text-dim); padding: 8px 14px; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; font-size: 13px; }
.settings-tab:hover { background: rgba(255,255,255,0.06); }
.settings-tab.active { color: var(--text-main); border-bottom: 2px solid var(--brand-color, #80e7aa); }
.settings-tab-panels { overflow-y: auto; padding: 16px 0; }
.settings-tab-panel.hidden { display: none; }
.settings-fields { display: grid; gap: 12px; }
.settings-field-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; }
.settings-field-row label { font-size: 12px; color: var(--text-dim); }
.settings-field-row input, .settings-field-row select { height: 36px; font-size: 13px; }
.theme-settings-form .settings-field-row { grid-template-columns: 92px minmax(0, 1fr); }
.theme-settings-form .settings-field-row input, .theme-settings-form .settings-field-row select { width: 100%; min-width: 0; }
.theme-settings-form .settings-field-row select { display: block; height: 44px; min-height: 44px; line-height: normal; padding-top: 10px; padding-bottom: 10px; }
.theme-settings-form .settings-field-row .badge { grid-column: 2; justify-self: start; }
.badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.badge-live { background: rgba(128,231,170,0.15); color: #80e7aa; }
.badge-restart { background: rgba(229,101,103,0.15); color: #e56567; }
.secret-input-row { display: flex; gap: 6px; align-items: center; }
.secret-input-row input { flex: 1; }
.secret-reveal { font-size: 11px; padding: 4px 8px; }
.settings-restart-notice { color: #e56567; font-size: 12px; }
.settings-restart-notice.hidden { display: none; }
.settings-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 0; border-top: 1px solid var(--line-1); }
.settings-section { display: grid; gap: 10px; }
.settings-section + .settings-section { margin-top: 18px; }
.settings-section-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.settings-section-header h3 { margin: 0; font-size: 13px; }
.settings-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.model-source-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; gap: 10px; }
.model-source-card { display: grid; gap: 8px; min-width: 0; border: 1px solid var(--line-1); border-radius: 10px; padding: 10px 12px; background: var(--surface-bg); }
.model-source-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.model-source-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.model-source-heading small { flex: 0 0 auto; color: var(--text-dim); font-size: 11px; }
.model-source-card .codex-account-key-row button:only-child { justify-self: stretch; width: 100%; }
.namespace-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  align-items: start;
  gap: 12px;
}
.namespace-card { border: 1px solid var(--line-1); border-radius: 10px; padding: 14px; background: var(--surface-panel); display: grid; gap: 10px; }
.namespace-card-header { display: flex; justify-content: space-between; align-items: center; }
.namespace-card-header h4 { margin: 0; font-size: 14px; }
.namespace-card-title { display: grid; min-width: 0; gap: 2px; }
.namespace-card-title small { overflow: hidden; color: var(--text-dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.namespace-card-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.namespace-card-body { display: grid; gap: 10px; }
.namespace-binding-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.namespace-binding-fields label { display: grid; gap: 3px; color: var(--text-dim); font-size: 11px; }
.namespace-binding-fields select { width: 100%; min-width: 0; height: 32px; font-size: 12px; }
.namespace-advanced summary { cursor: pointer; color: var(--text-dim); font-size: 12px; padding: 4px 0 8px; }
.namespace-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.namespace-card-fields label { font-size: 11px; color: var(--text-dim); display: grid; gap: 3px; }
.namespace-card-fields input, .namespace-card-fields select { height: 32px; font-size: 12px; }
.codex-login-box { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-1); }
.codex-login-box .eyebrow { margin: 0; white-space: nowrap; }
.codex-login-box a { word-break: break-all; color: var(--theme-accent, var(--brand-color)); font-size: 13px; }
.codex-login-device-code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 18px; letter-spacing: 0.16em; color: var(--text-main); }
#codex-login-status { min-height: 18px; }
@media (max-width: 700px) {
  .fullscreen-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; padding: max(12px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
  .settings-tab-panels { padding: 8px 0; }
  .settings-tab-panel > .muted { margin: 2px 2px 10px; font-size: 11px; }
  .namespace-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .namespace-card { gap: 0; padding: 0; overflow: hidden; }
  .namespace-card-header { min-height: 56px; gap: 8px; padding: 10px 12px; }
  .namespace-card-title { flex: 1; }
  .namespace-expand { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; transition: transform .16s ease; }
  .namespace-card.mobile-expanded .namespace-expand { transform: rotate(180deg); }
  .namespace-card-body { display: none; gap: 10px; border-top: 1px solid var(--line-1); padding: 10px; }
  .namespace-card.mobile-expanded .namespace-card-body { display: grid; }
  .namespace-card-fields { grid-template-columns: minmax(0, 1fr); }
  .model-source-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .namespace-binding-fields { grid-template-columns: minmax(0, 1fr); }
  .namespace-advanced { border-top: 1px solid var(--line-1); padding-top: 3px; }
  .namespace-card .ns-save { width: 100%; min-height: 40px; }
}
.destroyed-session-group { border-top: 1px dashed var(--line-1); margin-top: 8px; padding-top: 6px; }
.destroyed-session-group summary { cursor: pointer; color: var(--text-dim); padding: 4px 2px; }
.destroyed-session-group .session-card { opacity: 0.65; }
dialog input, dialog select { height: 42px; }
input:focus, select:focus, .primary { border-color: var(--theme-accent, var(--brand-color)); }
.primary { background: var(--theme-accent, var(--brand-color)); }
.eyebrow { color: var(--theme-accent, var(--brand-color)); }