/* Calm Workspace — final visual layer inspired by Open WebUI. */
:root {
  color-scheme: light;
  --ui-font-sans: Inter, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  --ui-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ui-bg: #f6f7f7;
  --ui-bg-accent: #eef8f6;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8faf9;
  --ui-surface-muted: #f1f4f3;
  --ui-surface-raised: rgba(255, 255, 255, .94);
  --ui-text: #17201f;
  --ui-text-soft: #53615e;
  --ui-text-faint: #7a8885;
  --ui-border: #dfe5e3;
  --ui-border-strong: #c9d2cf;
  --ui-primary: #0f766e;
  --ui-primary-hover: #0b625c;
  --ui-primary-soft: #e5f5f1;
  --ui-primary-ring: rgba(15, 118, 110, .18);
  --ui-info: #2563eb;
  --ui-warning: #b45309;
  --ui-danger: #b42318;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 20px;
  --ui-radius-modal: 24px;
  --ui-shadow-soft: 0 8px 28px rgba(23, 32, 31, .06);
  --ui-shadow-raised: 0 18px 48px rgba(23, 32, 31, .10);
  --ui-shadow-modal: 0 32px 100px rgba(15, 23, 42, .24), 0 2px 8px rgba(15, 23, 42, .08);
  --ui-motion-fast: 140ms;
  --ui-motion-base: 190ms;
  --ui-motion-slow: 250ms;
  --ui-ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ui-ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { background: var(--ui-bg); }
body {
  font-family: var(--ui-font-sans);
  font-weight: 400;
  color: var(--ui-text);
  background:
    radial-gradient(circle at 12% -8%, rgba(15, 118, 110, .075), transparent 30%),
    radial-gradient(circle at 90% 2%, rgba(37, 99, 235, .045), transparent 24%),
    var(--ui-bg);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
body.modal-open { overscroll-behavior: none; }
body * { font-weight: inherit !important; }
body strong,
body b { font-weight: 600 !important; }
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 { font-weight: 700 !important; letter-spacing: -.02em; }
body button { font-weight: 600 !important; }
body label,
body summary { font-weight: 500 !important; }
body input,
body textarea,
body select { font-weight: 400 !important; }

button,
a,
input,
textarea,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: translateY(1px) scale(.995); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ui-primary-ring) !important;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #bdc8c5 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #bdc8c5; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #97a7a3; }

.app-shell {
  height: 100dvh;
  grid-template-columns: 280px minmax(0, 1fr);
  background: transparent;
}
.app-shell.workspace-open { grid-template-columns: 280px minmax(0, 1fr) minmax(340px, 390px); }
.app-shell.workspace-open.workspace-wide { grid-template-columns: 280px minmax(320px, .82fr) minmax(520px, 700px); }

.sidebar {
  gap: 8px;
  padding: 12px 10px;
  border-right: 1px solid rgba(201, 210, 207, .8);
  background: rgba(249, 250, 250, .88);
  backdrop-filter: blur(20px) saturate(1.08);
  box-shadow: 10px 0 36px rgba(23, 32, 31, .035);
}
.side-top { min-height: 46px; padding: 0 4px; }
.brand-mark,
.welcome-logo {
  border: 1px solid rgba(255, 255, 255, .75);
  background: linear-gradient(145deg, #179187, #0b625c);
  box-shadow: 0 10px 24px rgba(15, 118, 110, .18), inset 0 1px 0 rgba(255,255,255,.24);
}
.brand-mark { border-radius: 10px; }
.brand-copy strong { color: var(--ui-text); font-size: 14px; letter-spacing: -.01em; }
.brand-copy span { color: var(--ui-text-faint); }

.new-project,
.new-chat {
  min-height: 40px;
  border-radius: var(--ui-radius-md);
  padding-inline: 12px;
  box-shadow: none;
}
.new-project {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.new-project:hover { border-color: var(--ui-border-strong); background: var(--ui-surface); box-shadow: var(--ui-shadow-soft); }
.new-chat { border: 1px solid var(--ui-primary); background: var(--ui-primary); }
.new-chat:hover { background: var(--ui-primary-hover); box-shadow: 0 10px 24px rgba(15, 118, 110, .16); }

.search-box input,
.provider-list-tools input,
.quick-action-search,
.chat-folder-input {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: rgba(255,255,255,.8);
}
.search-box input:hover,
.provider-list-tools input:hover { border-color: var(--ui-border-strong); background: #fff; }

.sidebar-section-head { color: var(--ui-text-faint); font-size: 10px; letter-spacing: .08em; }
.project-space-row,
.project-space-item,
.chat-item,
.side-action,
.account-pill {
  border-radius: var(--ui-radius-md);
}
.project-space-row:hover,
.project-space-item:hover,
.chat-item:hover,
.side-action:hover,
.account-pill:hover {
  border-color: var(--ui-border);
  background: rgba(255,255,255,.86);
  box-shadow: 0 6px 20px rgba(23, 32, 31, .045);
  transform: none;
}
.project-space-group.active > .project-space-row,
.project-space-item.active,
.chat-item.active {
  border-color: rgba(15, 118, 110, .26);
  background: var(--ui-primary-soft);
  box-shadow: inset 3px 0 0 var(--ui-primary);
}
.side-footer {
  margin: auto -2px -2px;
  padding: 10px 2px 0;
  border-top: 1px solid var(--ui-border);
  background: linear-gradient(180deg, rgba(249,250,250,0), rgba(249,250,250,.92) 22%);
}
.account-pill > span { background: var(--ui-primary-soft); color: var(--ui-primary); }

.workspace { min-width: 0; background: rgba(255,255,255,.48); }
.topbar {
  min-height: 58px;
  padding-inline: clamp(14px, 2vw, 28px);
  border-bottom: 1px solid rgba(223, 229, 227, .9);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px) saturate(1.08);
}
.model-chip { gap: 1px; }
.model-chip span { color: var(--ui-text); font-size: 14px; }
.model-chip small { color: var(--ui-text-faint); font-size: 11px; }
.ghost-btn,
.icon-btn,
.run-status-chip {
  min-height: 38px;
  border-color: transparent;
  border-radius: 11px;
}
.ghost-btn:hover,
.icon-btn:hover {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
}

.messages { padding-inline: clamp(18px, 5vw, 76px); }
.messages:has(.welcome) { place-items: center; }
.welcome { animation: uiWelcomeIn var(--ui-motion-slow) var(--ui-ease-out) both; }
.welcome-logo { width: 56px; height: 56px; border-radius: 18px; }
.welcome h1 {
  margin-top: 10px;
  color: #182321;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600 !important;
  line-height: 1.18;
  text-wrap: balance;
}
.welcome p { color: var(--ui-text-soft); }
.welcome-action,
.welcome-recent-group,
.welcome-project-zone {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: rgba(255,255,255,.82);
  box-shadow: var(--ui-shadow-soft);
}
.welcome-action:hover,
.welcome-recent-group button:hover,
.welcome-project-zone:hover {
  border-color: var(--ui-border-strong);
  box-shadow: var(--ui-shadow-raised);
}

.message-row { animation: uiMessageIn var(--ui-motion-slow) var(--ui-ease-out) both; }
.message-body { color: var(--ui-text); line-height: 1.72; }
.message-row.user .message-body,
.message-row.assistant .message-body,
.message-row.tool .message-body {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
}
.message-row.user .message-body { background: var(--ui-primary-soft); }

.composer-wrap { padding-inline: clamp(16px, 4vw, 58px); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.composer {
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-xl);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 56px rgba(23, 32, 31, .10), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
}
.composer:focus-within {
  border-color: rgba(15, 118, 110, .62);
  box-shadow: 0 22px 64px rgba(23, 32, 31, .12), 0 0 0 4px var(--ui-primary-ring);
}
.composer textarea { color: var(--ui-text); font-size: 15px; }
.composer textarea::placeholder { color: var(--ui-text-faint); }
.composer-actions button,
.agent-mode-select,
.agent-switch {
  min-height: 38px;
  border-radius: 11px;
}
#sendBtn { min-width: 66px; border-color: var(--ui-primary); background: var(--ui-primary); color: #fff; }
#sendBtn:hover { background: var(--ui-primary-hover); box-shadow: 0 8px 20px rgba(15,118,110,.18); }
.quick-actions-menu,
.slash-prompt-menu,
.anchored-action-popover {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: rgba(255,255,255,.97);
  box-shadow: var(--ui-shadow-raised);
  backdrop-filter: blur(18px);
  animation: uiPopoverIn var(--ui-motion-base) var(--ui-ease-out) both;
}

.workspace-panel {
  border-left-color: var(--ui-border);
  background: rgba(249,250,250,.96);
  box-shadow: -18px 0 48px rgba(23,32,31,.06);
}
.panel-head,
.workspace-tabs { border-color: var(--ui-border); background: rgba(255,255,255,.82); }
.workspace-block,
.workspace-stage,
.workspace-mode-summary,
.workspace-entry-primary,
.workspace-overview {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: 0 6px 22px rgba(23,32,31,.035);
}
.workspace-tabs button.active { color: var(--ui-primary); box-shadow: inset 0 -2px 0 var(--ui-primary); }

.modal-backdrop {
  z-index: var(--z-modal);
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(10px) saturate(.86);
  animation: uiBackdropIn var(--ui-motion-base) ease both;
}
.modal {
  z-index: calc(var(--z-modal) + 1);
  width: min(500px, calc(100vw - 32px));
  max-height: min(88dvh, 820px);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: var(--ui-radius-modal);
  background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(249,251,250,.985));
  box-shadow: var(--ui-shadow-modal);
  overflow: auto;
  overscroll-behavior: contain;
  animation: uiModalIn var(--ui-motion-base) var(--ui-ease-out) both;
}
.modal.wide { width: min(940px, calc(100vw - 32px)); }
.modal::before {
  content: '';
  position: absolute;
  inset: 0 16% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  pointer-events: none;
}
.modal > header {
  position: sticky;
  top: -18px;
  z-index: 4;
  min-height: 58px;
  margin: -18px -18px 16px;
  padding: 14px 16px 12px 20px;
  border-bottom: 1px solid rgba(223,229,227,.9);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
}
.modal h2 { color: var(--ui-text); font-size: 18px; line-height: 1.25; }
.modal-heading { min-width: 0; display: grid; gap: 2px; }
.modal-heading > span,
.modal > header > div > span:first-child {
  color: var(--ui-primary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.modal-note { color: var(--ui-text-soft); font-size: 12px; }
.modal > header .modal-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: transparent;
  font-size: 0;
}
.modal > header .modal-close::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  background: center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353615e' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.modal > header .modal-close:hover { border-color: var(--ui-border); background: var(--ui-surface-muted); }

.stack-form { gap: 14px; }
.stack-form label,
.settings-grid label,
.settings-route-grid label,
.settings-wide,
.project-file-action-body label {
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  line-height: 1.4;
}
.stack-form input,
.stack-form textarea,
.stack-form select,
.settings-grid input,
.settings-grid textarea,
.settings-grid select,
.settings-route-grid input,
.settings-route-grid select,
.settings-wide input,
.settings-wide textarea,
.bridge-card select,
.project-file-action-body input {
  min-height: 42px;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.stack-form input:hover,
.stack-form textarea:hover,
.settings-grid input:hover,
.settings-grid textarea:hover,
.settings-route-grid input:hover,
.settings-wide input:hover,
.settings-wide textarea:hover { border-color: #aebbb7 !important; }
.stack-form input:focus,
.stack-form textarea:focus,
.settings-grid input:focus,
.settings-grid textarea:focus,
.settings-route-grid input:focus,
.settings-route-grid select:focus,
.settings-wide input:focus,
.settings-wide textarea:focus {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 4px var(--ui-primary-ring) !important;
}
.split-actions { gap: 10px; }
.split-actions button,
.modal-actions button,
.stack-form > button,
.bridge-card button,
.primary-link {
  min-height: 42px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: var(--ui-text);
}
.split-actions button:first-child,
.stack-form > button:not(.secondary-btn),
.bridge-card button:not(.danger-btn),
.primary-link {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}
.split-actions button:first-child:hover,
.stack-form > button:not(.secondary-btn):hover,
.bridge-card button:not(.danger-btn):hover,
.primary-link:hover { background: var(--ui-primary-hover); box-shadow: 0 10px 24px rgba(15,118,110,.16); }
.secondary-btn:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-muted); }
.danger-btn,
button.danger { border-color: #fecaca !important; background: #fff5f5 !important; color: var(--ui-danger) !important; }
.danger-btn:hover,
button.danger:hover { border-color: #fca5a5 !important; background: #feecec !important; }
.modal-actions {
  position: sticky;
  bottom: -18px;
  z-index: 3;
  margin: 16px -18px -18px;
  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-border);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
}

.account-modal { width: min(480px, calc(100vw - 32px)); }
.account-intro {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: linear-gradient(135deg, var(--ui-primary-soft), rgba(255,255,255,.92));
}
.account-intro-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--ui-surface); color: var(--ui-primary); box-shadow: var(--ui-shadow-soft); }
.account-intro-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.account-intro div { min-width: 0; display: grid; gap: 3px; }
.account-intro strong { font-size: 14px; }
.account-intro p,
.account-box p { margin: 0; color: var(--ui-text-soft); font-size: 12px; line-height: 1.5; }
.account-box { display: grid; gap: 14px; }
.account-box[hidden] { display: none; }
.account-modal .account-box {
  gap: 10px;
}
.account-modal .account-box > p {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
  font-size: 12px;
  font-weight: 600 !important;
}
.account-modal .compact-form {
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-soft);
}
.account-modal .compact-form label {
  color: var(--ui-text-soft);
  font-size: 12px;
  font-weight: 600 !important;
}
.account-modal .compact-form input {
  min-height: 38px;
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
}
.account-modal .compact-form input:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px var(--ui-primary-ring);
}
.account-modal #changePasswordBtn,
.account-modal #settingsPanelBtn,
.account-modal #logoutBtn {
  width: 100%;
  min-height: 40px;
  border-radius: var(--ui-radius-md);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700 !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}
.account-modal #changePasswordBtn {
  margin-top: 2px;
  border: 1px solid var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(15,118,110,.12);
}
.account-modal #changePasswordBtn:hover {
  border-color: var(--ui-primary-hover);
  background: var(--ui-primary-hover);
  box-shadow: 0 10px 24px rgba(15,118,110,.16);
  transform: translateY(-1px);
}
.account-modal #settingsPanelBtn {
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface);
  color: var(--ui-text);
}
.account-modal #settingsPanelBtn:hover {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  color: var(--ui-primary-hover);
  box-shadow: 0 8px 18px rgba(15,118,110,.08);
  transform: translateY(-1px);
}
.account-modal #logoutBtn {
  border: 1px solid #fecaca !important;
  background: #fff5f5 !important;
  color: var(--ui-danger) !important;
}
.account-modal #logoutBtn:hover {
  border-color: #fca5a5 !important;
  background: #feecec !important;
  color: #991b1b !important;
  box-shadow: 0 8px 18px rgba(180,35,24,.08);
  transform: translateY(-1px);
}
.account-modal #changePasswordBtn:focus-visible,
.account-modal #settingsPanelBtn:focus-visible,
.account-modal #logoutBtn:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

.new-project-hero,
.project-upload-hero,
.automation-guide-hero {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: linear-gradient(145deg, var(--ui-primary-soft), #fff) !important;
}
.project-upload-options button,
.bridge-card,
.settings-provider-rail,
.settings-list-pane,
.settings-editor-card,
.settings-page-intro,
.settings-advanced-card {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 8px 26px rgba(23,32,31,.045) !important;
}

.bridge-modal { width: min(920px, calc(100vw - 32px)); }
.bridge-grid { gap: 12px; }
.bridge-card { padding: 16px; }
.bridge-card strong { font-size: 14px; }
.bridge-card p { color: var(--ui-text-soft); }
.agent-capabilities span { border-color: var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface-soft); }

.settings-center-modal {
  width: min(1480px, calc(100vw - 32px)) !important;
  height: min(90dvh, 900px);
  max-height: min(90dvh, 900px) !important;
  padding: 0 !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden !important;
}
.settings-center-modal > header {
  position: relative;
  top: auto;
  min-height: 72px;
  margin: 0;
  padding: 16px 18px 12px 22px;
}
.settings-center-modal > header h2 { font-size: 20px; }
.settings-center-modal > header .modal-note { margin: 3px 0 0; }
.settings-summary-bar {
  gap: 8px;
  padding: 10px 16px;
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface-soft);
}
.settings-summary-pill {
  min-height: 40px;
  border-color: var(--ui-border);
  border-radius: 11px;
  background: var(--ui-surface);
}
.settings-summary-pill b { color: var(--ui-text-faint); }
.settings-summary-pill em { color: var(--ui-text); }
.settings-center { grid-template-columns: 198px minmax(0, 1fr); background: var(--ui-surface); }
.settings-tabs {
  gap: 4px;
  padding: 14px 10px;
  border-right-color: var(--ui-border);
  background: var(--ui-surface-soft);
}
.settings-tab {
  min-height: 44px;
  border-radius: var(--ui-radius-md);
  color: var(--ui-text-soft);
  padding-inline: 12px;
  transform: none !important;
}
.settings-tab:hover { background: var(--ui-surface); color: var(--ui-text); }
.settings-tab.active {
  border-color: rgba(15,118,110,.2);
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  box-shadow: inset 3px 0 0 var(--ui-primary);
}
.settings-tab small { background: rgba(255,255,255,.7); color: var(--ui-text-soft); }
.settings-panels { padding: 18px; background: var(--ui-surface); }
.settings-panel { animation: uiPanelIn var(--ui-motion-base) var(--ui-ease-out) both; }
.model-settings-overview,
.settings-process-strip span,
.settings-template-shelf button,
.settings-grid,
.settings-route-grid,
.settings-card,
.provider-card,
.skill-card,
.subagent-card {
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}
.settings-template-shelf button:hover,
.settings-card:hover,
.provider-card:hover,
.skill-card:hover,
.subagent-card:hover {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  transform: none !important;
}
.settings-center-modal button { border-radius: 10px; }
.settings-savebar {
  position: relative;
  bottom: auto;
  min-height: 66px;
  margin: 0;
  padding: 12px 16px;
  border-top-color: var(--ui-border);
  background: rgba(255,255,255,.96);
}
.settings-savebar button:first-child { border-color: var(--ui-primary) !important; background: var(--ui-primary) !important; color: #fff !important; }
.settings-test-log { color: var(--ui-text-soft); }

.toast-host { right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: calc(var(--z-modal) + 10); }
.toast {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(23,32,31,.94);
  box-shadow: var(--ui-shadow-raised);
  backdrop-filter: blur(16px);
  animation: uiToastIn var(--ui-motion-base) var(--ui-ease-out) both;
}
.toast.error { background: rgba(153,27,27,.96); }

.project-file-editor-input,
#projectFileEditorInput,
.file-preview pre,
.diff-preview pre,
.terminal-runner pre {
  font-family: var(--ui-font-mono);
  font-weight: 400 !important;
}

@keyframes uiBackdropIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(10px) saturate(.86); }
}
@keyframes uiModalIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes uiPopoverIn {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes uiWelcomeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes uiMessageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes uiPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes uiToastIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 260px minmax(0, 1fr); }
  .app-shell.workspace-open { grid-template-columns: 260px minmax(0, 1fr) minmax(320px, 360px); }
  .settings-center-modal { width: calc(100vw - 24px) !important; }
  .settings-provider-workbench,
  .settings-dual-pane,
  .settings-split-pane { grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .app-shell,
  .app-shell.workspace-open,
  .app-shell.workspace-open.workspace-wide,
  .app-shell.workspace-flow-modal-active,
  .app-shell.workspace-open.workspace-flow-modal-active,
  .app-shell.workspace-open.workspace-wide.workspace-flow-modal-active {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .workspace { grid-column: 1; width: 100%; min-width: 0; }
  .messages { padding-inline: 16px; }
  .composer-wrap { padding-inline: 12px; }
  .settings-center-modal {
    width: calc(100vw - 16px) !important;
    height: min(94dvh, 940px);
    max-height: min(94dvh, 940px) !important;
  }
  .settings-summary-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: auto; }
  .settings-center {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden !important;
  }
  .settings-tabs {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .settings-tab { flex: 0 0 auto; min-width: 108px; }
  .settings-tab.active { box-shadow: inset 0 -2px 0 var(--ui-primary); }
  .settings-panels { min-height: 0; height: auto; padding: 12px; overflow: auto !important; }
  .settings-provider-workbench,
  .settings-dual-pane,
  .settings-split-pane { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .settings-provider-rail,
  .settings-list-pane { max-height: none; }
  .bridge-grid { grid-template-columns: 1fr; }
  .agent-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .modal {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 92dvh;
    padding: 16px;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
    transform: none;
    animation-name: uiSheetIn;
  }
  .modal.wide,
  .account-modal,
  .bridge-modal { width: 100%; }
  .modal > header { top: -16px; margin: -16px -16px 14px; padding: 13px 12px 11px 16px; }
  .modal-actions { bottom: -16px; margin: 14px -16px -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .settings-center-modal {
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh;
    max-height: 100dvh !important;
    border: 0;
    border-radius: 0;
  }
  .settings-center-modal > header { margin: 0; padding-top: max(14px, env(safe-area-inset-top)); }
  .settings-summary-bar { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
  .settings-tab { min-width: 96px; }
  .settings-panels { padding: 10px; }
  .settings-center-modal .settings-savebar {
    width: auto;
    margin: 0;
    bottom: auto;
    grid-template-columns: 1fr 1fr;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .settings-test-log { grid-column: 1 / -1; }
  .split-actions { grid-template-columns: 1fr; }
  .account-intro { grid-template-columns: 40px minmax(0, 1fr); }
  .account-intro-icon { width: 40px; height: 40px; border-radius: 12px; }
  .welcome h1 { font-size: 30px; }
  .composer { border-radius: 17px; }
  .toast-host { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
}

@keyframes uiSheetIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Durable task-event connection state. */
.task-event-connection {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: 7px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.task-event-connection::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.task-event-connection.connected { color: var(--success, #2f9e66); }
.task-event-connection.connecting { color: var(--accent, #5b7cfa); }
.task-event-connection.reconnecting { color: var(--warning, #c9831e); }
/* Compact Windows maintenance launcher. */
.windows-diagnostics-modal {
  width: min(920px, calc(100vw - 24px));
}

.windows-diagnostics-intro {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface-1)), var(--surface-1));
}

.windows-diagnostics-intro > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.windows-diagnostics-intro > strong { font-size: 18px; }
.windows-diagnostics-intro > p { margin: 0; color: var(--muted); line-height: 1.55; }

.windows-diagnostics-scenarios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.windows-diagnostics-scenarios button {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 11px 12px;
  text-align: start;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 14px;
  background: var(--surface-1);
}

.windows-diagnostics-scenarios button b { font-size: 13px; }
.windows-diagnostics-scenarios button span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.windows-diagnostics-scenarios button.active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
}

.windows-diagnostics-status {
  min-height: 42px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface-2);
}

.windows-diagnostics-recommendations {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface-1));
}

.windows-diagnostics-recommendations[hidden] { display: none; }
.windows-diagnostics-recommendations-head { display: grid; gap: 3px; }
.windows-diagnostics-recommendations-head span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.windows-diagnostics-recommendation-list { display: grid; gap: 8px; }
.windows-diagnostics-recommendation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 12px;
  background: var(--surface-1);
}
.windows-diagnostics-recommendation > div { display: grid; gap: 3px; min-width: 0; }
.windows-diagnostics-recommendation strong { font-size: 12px; }
.windows-diagnostics-recommendation p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.windows-diagnostics-recommendation em { color: var(--warning, #c9831e); font-size: 10px; font-style: normal; }
.windows-diagnostics-recommendation button { min-width: 132px; }

@media (max-width: 720px) {
  .windows-diagnostics-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .windows-diagnostics-actions { display: grid; grid-template-columns: 1fr; }
  .windows-diagnostics-recommendation { grid-template-columns: 1fr; }
  .windows-diagnostics-recommendation button { width: 100%; }
}
/* Restart fencing evidence in task details. */
.task-recovery-snapshot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 12px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warning, #c9831e) 42%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--warning, #c9831e) 7%, var(--surface-1));
}

.task-recovery-snapshot.ready {
  border-color: color-mix(in srgb, var(--success, #2f9e66) 40%, var(--line));
  background: color-mix(in srgb, var(--success, #2f9e66) 7%, var(--surface-1));
}

.task-recovery-snapshot > span {
  color: var(--warning, #c9831e);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.task-recovery-snapshot.ready > span { color: var(--success, #2f9e66); }
.task-recovery-snapshot > div { display: grid; gap: 3px; }
.task-recovery-snapshot strong { font-size: 13px; }
.task-recovery-snapshot em,
.task-recovery-snapshot small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.task-recovery-snapshot small { grid-column: 1 / -1; }