:root {
  color-scheme: dark;
  --bg: #080b12;
  --surface: #101520;
  --surface-2: #161c29;
  --surface-3: #1d2534;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f5f7fb;
  --muted: #9aa5b5;
  --accent: #9b72ff;
  --accent-2: #5968e8;
  --success: #4bd18b;
  --warning: #f5be5b;
  --danger: #ff6b7a;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 15% -10%, rgba(124, 140, 255, 0.16), transparent 35%),
    radial-gradient(circle at 90% 5%, rgba(67, 217, 170, 0.08), transparent 30%),
    var(--bg);
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small-text { font-size: .8rem; }
.wide { width: 100%; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(460px, 100%);
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(16, 21, 32, .88);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  text-align: center;
}
.login-card h1 { margin: 8px 0 12px; font-size: clamp(2rem, 6vw, 3rem); }
.login-card p { line-height: 1.6; }
.fine-print { margin: 20px 0 0; color: var(--muted); font-size: .8rem; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--accent), #9e79ff);
  color: white;
  font-weight: 900;
  font-size: 1.5rem;
  box-shadow: 0 15px 40px rgba(124, 140, 255, .3);
}
.brand-mark.small { width: 38px; height: 38px; border-radius: 12px; font-size: 1rem; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  border-right: 1px solid var(--line);
  background: rgba(10, 13, 21, .82);
  backdrop-filter: blur(18px);
}
.brand-row { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; }
.brand-row strong { display: block; }
.brand-row span { color: var(--muted); font-size: .75rem; }
.nav-list { display: grid; gap: 7px; }
.nav-item {
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.045); }
.nav-item.active { color: white; background: linear-gradient(135deg, rgba(124,140,255,.22), rgba(124,140,255,.08)); }
.sidebar-footer { margin-top: auto; display: grid; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 10px; min-width: 0; }
.user-chip img { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); }
.user-chip div { min-width: 0; }
.user-chip strong, .user-chip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip span { color: var(--muted); font-size: .75rem; text-transform: capitalize; }

.main-content { padding: 28px clamp(18px, 3vw, 44px) 60px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); }
h2 { margin-bottom: 0; font-size: 1.1rem; }
.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.button, .icon-button, .file-button {
  border: 1px solid transparent;
  border-radius: 11px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: .18s ease;
}
.button:disabled, .icon-button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 25px rgba(89,104,232,.25); }
.button.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.button.ghost, .icon-button, .file-button { border-color: var(--line); background: rgba(255,255,255,.035); }
.button.ghost:hover, .icon-button:hover, .file-button:hover { background: rgba(255,255,255,.075); }
.button.danger-outline { border-color: rgba(255,107,122,.35); background: rgba(255,107,122,.06); color: #ff9aa5; }
.icon-button { width: 42px; padding: 0; font-size: 1.1rem; }
.file-button input { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .78rem;
  color: var(--muted);
  background: rgba(255,255,255,.03);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.success { color: var(--success); }
.pill.warning { color: var(--warning); }
.pill.danger { color: var(--danger); }

.view { display: none; }
.view.active { display: block; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card, .panel {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(155deg, rgba(24,31,45,.86), rgba(13,18,28,.92));
  box-shadow: 0 12px 35px rgba(0,0,0,.14);
}
.metric-card { padding: 20px; min-height: 128px; display: flex; flex-direction: column; }
.metric-label { color: var(--muted); font-size: .8rem; }
.metric-card strong { margin-top: auto; font-size: 1.75rem; }
.metric-detail { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.panel { overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-header.compact { padding: 16px; }
.panel-header.wrap { flex-wrap: wrap; }
.two-column-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.details-list { margin: 0; padding: 10px 22px 20px; }
.details-list div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.details-list div:last-child { border-bottom: 0; }
.details-list dt { color: var(--muted); }
.details-list dd { margin: 0; overflow-wrap: anywhere; }

.compact-log-list, .log-list { padding: 8px 20px 20px; }
.log-entry { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.log-entry:last-child { border-bottom: 0; }
.log-time { color: var(--muted); font-size: .75rem; }
.log-entry strong { font-size: .86rem; }
.log-entry p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.log-entry.error strong { color: var(--danger); }
.log-entry.warning strong { color: var(--warning); }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; }

select, input, textarea {
  width: 100%;
  color: var(--text);
  background: #0d121d;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
}
select:focus, input:focus, textarea:focus { border-color: rgba(124,140,255,.7); box-shadow: 0 0 0 3px rgba(124,140,255,.12); }
.filter-row select, .filter-row input { width: auto; min-width: 140px; }
textarea { resize: vertical; line-height: 1.5; }

.chat-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; height: calc(100vh - 145px); min-height: 560px; }
.chat-list-panel, .chat-panel { height: 100%; }
.chat-channel-list { padding: 8px; overflow-y: auto; max-height: calc(100% - 75px); }
.chat-channel-button { width: 100%; border: 0; border-radius: 11px; padding: 12px; display: flex; gap: 10px; text-align: left; color: var(--text); background: transparent; cursor: pointer; }
.chat-channel-button:hover { background: rgba(255,255,255,.045); }
.chat-channel-button.active { background: rgba(124,140,255,.14); }
.channel-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--surface-3); color: var(--accent); font-weight: 800; }
.chat-channel-button strong, .chat-channel-button span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel-button span { color: var(--muted); font-size: .75rem; margin-top: 3px; }
.chat-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow: hidden; min-height: 0; }
.chat-header { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.chat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.path-label { display: block; margin-top: 5px; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.live-job-panel { margin: 14px 20px 0; padding: 15px; border: 1px solid rgba(124,140,255,.24); border-radius: 14px; background: rgba(124,140,255,.07); display: grid; gap: 12px; max-height: min(210px, 28vh); overflow: auto; min-height: 0; overscroll-behavior: contain; }
.live-job-panel.hidden { display: none; }
.panel-pagination { display: flex; justify-content: center; padding-top: 12px; }
.usage-capacity-strip { margin: 0 24px 12px; padding: 9px 13px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(124,140,255,.24); border-radius: 13px; background: rgba(124,140,255,.06); }
.usage-capacity-strip > div:last-child { display: grid; min-width: 0; }
.usage-capacity-strip small { color: var(--muted); overflow-wrap: anywhere; }
.usage-battery { position: relative; width: 48px; height: 22px; flex: 0 0 auto; padding: 3px; border: 2px solid var(--success); border-radius: 6px; }
.usage-battery::after { content: ""; position: absolute; right: -6px; top: 5px; width: 4px; height: 8px; border-radius: 0 3px 3px 0; background: currentColor; }
.usage-battery span { display: block; height: 100%; width: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--success), #67dca7); transition: width .6s ease; }
.usage-capacity-strip.warning .usage-battery { border-color: var(--warning); color: var(--warning); }
.usage-capacity-strip.warning .usage-battery span { background: var(--warning); }
.usage-capacity-strip.critical .usage-battery { border-color: var(--danger); color: var(--danger); }
.usage-capacity-strip.critical .usage-battery span { background: var(--danger); animation: usage-battery-pulse 1.2s ease-in-out infinite; }
.usage-capacity-strip.unavailable { border-style: dashed; }
.usage-capacity-strip.unavailable .usage-battery { border-color: var(--muted); color: var(--muted); }
.usage-capacity-strip.unavailable .usage-battery span { background: var(--muted); opacity: .45; }
@keyframes usage-battery-pulse { 50% { opacity: .35; } }
.live-job-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.live-job-header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.live-job-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.live-job-header strong { overflow-wrap: anywhere; }
.live-response { padding: 12px; border-radius: 10px; background: rgba(0,0,0,.22); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.live-response.hidden { display: none; }
.activity-list { display: grid; gap: 8px; }
.activity-item { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 9px; align-items: start; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.035); }
.activity-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-3); }
.activity-copy strong, .activity-copy span { display: block; }
.activity-copy span { margin-top: 3px; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.activity-time { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.job-usage { color: var(--muted); font-size: .72rem; }
.chat-messages { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; min-height: 0; overscroll-behavior: contain; }
.message { max-width: min(780px, 88%); padding: 13px 15px; border-radius: 15px; background: var(--surface-3); line-height: 1.52; overflow-wrap: anywhere; white-space: pre-wrap; }
.message.user { align-self: flex-end; background: linear-gradient(145deg, rgba(124,140,255,.30), rgba(89,104,232,.18)); }
.message.assistant { align-self: flex-start; }
.message.system { align-self: center; max-width: 94%; color: var(--warning); background: rgba(245,190,91,.08); border: 1px solid rgba(245,190,91,.18); }
.message-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; color: var(--muted); font-size: .72rem; }
.message-meta strong { color: var(--text); }
.message-usage { margin-top: 9px; color: var(--muted); font-size: .68rem; }
.chat-composer { border-top: 1px solid var(--line); padding: 14px; background: rgba(7,10,17,.35); }
.chat-composer textarea { min-height: 82px; }
.composer-footer { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.composer-footer .muted { margin-right: auto; }
.empty-state { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 30px; }
.empty-state strong { color: var(--text); }

.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.channel-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.channel-card { padding: 20px; }
.channel-card-header { display: flex; justify-content: space-between; gap: 16px; }
.channel-card h3 { margin: 0; }
.channel-card p { margin: 7px 0 0; color: var(--muted); font-size: .82rem; }
.channel-card dl { margin: 18px 0; display: grid; gap: 8px; }
.channel-card dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.channel-card dt { color: var(--muted); }
.channel-card dd { margin: 0; overflow-wrap: anywhere; }
.card-actions { display: flex; justify-content: flex-end; gap: 8px; }

.modal { width: min(650px, calc(100% - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(5px); }
.modal-header { display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px; }
.form-grid label, .stack-form label { display: grid; gap: 7px; color: var(--muted); font-size: .82rem; }
.full-width { grid-column: 1 / -1; }
.toggle-row { display: flex !important; align-items: center; gap: 10px !important; }
.toggle-row input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }

.updates-grid { align-items: start; }
.warning-box { margin: 20px; padding: 15px; border-radius: 12px; border: 1px solid rgba(245,190,91,.25); background: rgba(245,190,91,.07); }
.warning-box p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; }
.stack-form { padding: 0 20px 20px; display: grid; gap: 15px; }
.release-catalog-section { display: grid; gap: 12px; padding: 0 20px 20px; }
.subsection-heading h3 { margin: 0 0 5px; }
.subsection-heading p { margin: 0; line-height: 1.45; }
.release-catalog-list { display: grid; gap: 10px; }
.release-catalog-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.release-catalog-card > div { min-width: 0; display: grid; gap: 6px; }
.release-catalog-card strong, .release-catalog-card span, .release-catalog-card small { overflow-wrap: anywhere; }
.release-catalog-card > div > span:not(.pill), .release-catalog-card small { color: var(--muted); }
.release-catalog-card.invalid { border-color: rgba(255,113,133,.25); }
.section-divider { display: flex; align-items: center; gap: 10px; margin: 0 20px 18px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.section-divider::before, .section-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.update-status-card { padding: 22px; }
.update-status-card strong { display: block; font-size: 1.1rem; }
.update-status-card p { color: var(--muted); line-height: 1.5; }

.toast-container { position: fixed; right: 18px; bottom: 18px; z-index: 20; display: grid; gap: 10px; }
.toast { min-width: 260px; max-width: 420px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); box-shadow: var(--shadow); animation: toast-in .2s ease; }
.toast.error { border-color: rgba(255,107,122,.35); }
.toast.success { border-color: rgba(75,209,139,.35); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1000px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .two-column-grid, .channel-card-grid { grid-template-columns: 1fr; }
  .chat-layout { grid-template-columns: 240px minmax(0,1fr); }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; width: auto; height: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-row { padding-bottom: 12px; }
  .nav-list { grid-template-columns: repeat(6, minmax(88px,1fr)); overflow-x: auto; }
  .nav-item { text-align: center; padding: 10px 8px; font-size: .78rem; }
  .sidebar-footer { display: none; }
  .release-catalog-card { align-items: stretch; flex-direction: column; }
  .main-content { padding-top: 18px; }
  .chat-layout { display: flex; flex-direction: column; height: auto; }
  .chat-list-panel { height: auto; max-height: 260px; }
  .chat-panel { height: 70vh; min-height: 520px; }
  .topbar { align-items: flex-start; }
  .chat-header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .full-width { grid-column: auto; }
  .section-toolbar, .composer-footer { align-items: stretch; flex-direction: column; }
  .composer-footer .muted { margin-right: 0; }
  .message { max-width: 95%; }
}

.update-preview-list { display: grid; gap: 14px; padding: 0 20px 20px; }
.update-preview-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.update-preview-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.update-preview-header h3 { margin: 9px 0 4px; font-size: 1rem; overflow-wrap: anywhere; }
.update-preview-header p { margin: 0; color: var(--muted); }
.preview-details { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; margin: 16px 0; }
.preview-details div { min-width: 0; }
.preview-details dt { color: var(--muted); font-size: .72rem; }
.preview-details dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.preview-details .full-detail { grid-column: 1 / -1; }
.preview-details code, .backup-path code, .backup-card code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; }
.preview-warnings { padding: 10px 12px; border-radius: 10px; background: rgba(245,190,91,.08); border: 1px solid rgba(245,190,91,.2); }
.preview-warnings p { margin: 0; color: var(--warning); font-size: .78rem; }
.preview-warnings p + p { margin-top: 6px; }
.preview-files { margin: 14px 0; }
.preview-files summary { cursor: pointer; color: var(--muted); }
.preview-files pre { max-height: 260px; overflow: auto; padding: 12px; border-radius: 10px; background: #080c14; color: var(--muted); font-size: .72rem; white-space: pre; }
.compact-empty { min-height: 130px; padding: 18px; }
.update-status-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.deployment-progress { height: 9px; overflow: hidden; margin: 18px 0; border-radius: 999px; background: rgba(255,255,255,.07); }
.deployment-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #66d7ff); transition: width .35s ease; }
.deployment-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.deployment-step { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .8rem; }
.deployment-step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line); }
.deployment-step.completed { color: var(--text); }
.deployment-step.completed .deployment-step-dot { background: var(--success); border-color: var(--success); }
.deployment-step.running { color: var(--warning); }
.deployment-step.running .deployment-step-dot { background: var(--warning); border-color: var(--warning); box-shadow: 0 0 0 4px rgba(245,190,91,.12); }
.deployment-step.failed { color: var(--danger); }
.deployment-step.failed .deployment-step-dot { background: var(--danger); border-color: var(--danger); }
.backup-path { display: grid; gap: 5px; }
.backup-path strong { font-size: .75rem; color: var(--text); }
.backup-path code { overflow-wrap: anywhere; }
.backup-panel { margin-top: 16px; }
.backup-panel .panel-header p { margin: 6px 0 0; }
.backup-list { display: grid; gap: 10px; padding: 0 20px 20px; }
.backup-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.backup-card > div { display: grid; gap: 4px; min-width: 0; }
.backup-card span { color: var(--muted); font-size: .76rem; }
.backup-card code { color: var(--muted); overflow-wrap: anywhere; }
.small-text { font-size: .72rem; }

@media (max-width: 620px) {
  .update-preview-header, .backup-card { flex-direction: column; align-items: stretch; }
  .preview-details { grid-template-columns: 1fr; }
  .preview-details .full-detail { grid-column: auto; }
}

/* Update 03: conversation archive, export, information, and management */
.conversation-modal { width: min(920px, calc(100% - 30px)); max-height: min(900px, calc(100vh - 30px)); }
.conversation-dialog-body { padding: 20px; overflow-y: auto; max-height: calc(100vh - 120px); display: grid; gap: 16px; }
.conversation-summary, .conversation-section { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022); }
.conversation-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.conversation-metrics article { padding: 13px; border-radius: 11px; background: rgba(255,255,255,.035); min-width: 0; }
.conversation-metrics span { display: block; color: var(--muted); font-size: .72rem; }
.conversation-metrics strong { display: block; margin-top: 5px; font-size: 1.15rem; overflow-wrap: anywhere; }
.conversation-details { margin-top: 15px; }
.conversation-details div { grid-template-columns: 130px minmax(0,1fr); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-heading h3 { margin: 3px 0 0; }
.section-heading p { margin: 7px 0 0; }
.archive-create-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; margin-top: 15px; }
.maintenance-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.conversation-archive-list { display: grid; gap: 10px; margin-top: 14px; }
.conversation-archive-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.026); }
.conversation-archive-card > div:first-child { min-width: 0; display: grid; gap: 4px; }
.conversation-archive-card strong { overflow-wrap: anywhere; }
.conversation-archive-card span, .conversation-archive-card small { color: var(--muted); }
.conversation-archive-card span { font-size: .76rem; }
.conversation-archive-card small { font-size: .68rem; }
.archive-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.archive-actions .button { padding: 8px 10px; text-decoration: none; }

@media (max-width: 760px) {
  .conversation-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .archive-create-row { grid-template-columns: 1fr; }
  .conversation-archive-card { align-items: stretch; flex-direction: column; }
  .archive-actions { justify-content: flex-start; }
}

@media (max-width: 460px) {
  .conversation-metrics { grid-template-columns: 1fr; }
  .section-heading { flex-direction: column; }
}


/* Update 04: dashboard roles and per-channel permissions */
.access-layout { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); align-items: start; }
.access-description { margin: 7px 0 0; line-height: 1.45; }
.access-user-list { display: grid; gap: 10px; padding: 14px 18px 20px; }
.access-user-card { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(240px, 1fr) auto; align-items: center; gap: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.access-user-card.disabled { opacity: .62; }
.access-user-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.access-user-identity img { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-3); }
.access-user-identity > div { min-width: 0; }
.access-user-identity strong, .access-user-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-user-identity span { margin-top: 3px; color: var(--muted); font-size: .74rem; }
.access-user-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role-badge { display: inline-flex; align-items: center; width: max-content; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.role-badge.owner { color: #f0b7ff; border-color: rgba(213,126,255,.35); background: rgba(213,126,255,.08); }
.role-badge.administrator { color: #9fb0ff; border-color: rgba(124,140,255,.38); background: rgba(124,140,255,.09); }
.role-badge.operator { color: var(--success); border-color: rgba(75,209,139,.32); background: rgba(75,209,139,.07); }
.role-badge.viewer { color: var(--muted); background: rgba(255,255,255,.035); }
.role-guide { display: grid; gap: 10px; padding: 18px 20px 8px; }
.role-guide article { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.022); }
.role-guide p { margin: 9px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.access-warning { margin-top: 12px; }
.access-modal { width: min(820px, calc(100% - 30px)); max-height: calc(100vh - 30px); overflow-y: auto; }
.input-action-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.success-text { color: var(--success); }
.danger-text { color: var(--danger); }
.channel-permission-editor { padding: 0 20px 20px; }
.channel-permission-editor h3 { margin: 3px 0 0; }
.channel-permission-editor p { margin: 7px 0 0; line-height: 1.45; }
.access-channel-permissions { display: grid; gap: 8px; margin-top: 14px; max-height: 310px; overflow-y: auto; }
.channel-permission-row { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 14px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.022); }
.channel-permission-row strong, .channel-permission-row small { display: block; }
.channel-permission-row small { margin-top: 3px; color: var(--muted); }

@media (max-width: 1050px) {
  .access-layout { grid-template-columns: 1fr; }
  .access-user-card { grid-template-columns: minmax(0,1fr) auto; }
  .access-user-meta { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 700px) {
  .access-user-card { grid-template-columns: 1fr; align-items: stretch; }
  .access-user-meta { grid-column: auto; grid-row: auto; }
  .access-user-card .card-actions { justify-content: flex-start; }
  .channel-permission-row { grid-template-columns: 1fr; }
  .input-action-row { grid-template-columns: 1fr; }
}

/* Update 21.1 — cluster resilience and unified platform tracking. */
.cluster-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.cluster-wide-panel { grid-column: 1 / -1; }
.cluster-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cluster-fact-grid > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: rgba(7, 9, 13, .45); }
.cluster-fact-grid span, .cluster-fact-grid strong { display: block; overflow-wrap: anywhere; }
.cluster-fact-grid span { margin-bottom: 5px; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.cluster-fact-grid strong { color: var(--text); font-size: .84rem; }
.cluster-controller-panel .warning-box { margin-top: 12px; }
.cluster-candidate-list { display: grid; gap: 9px; }
.cluster-candidate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: rgba(7, 9, 13, .45); }
.cluster-candidate.ready { border-color: rgba(69, 214, 151, .23); }
.cluster-candidate.replicated { border-color: rgba(240, 180, 80, .23); }
.cluster-candidate > div:first-child strong, .cluster-candidate > div:first-child span { display: block; }
.cluster-candidate > div:first-child span { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.cluster-candidate > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.cluster-candidate .card-actions { grid-column: 1 / -1; }
.cluster-status-grid .activity-list { max-height: 360px; overflow: auto; }
.cluster-status-grid .activity-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; }
.cluster-status-grid .activity-item p { margin: 4px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }

@media (max-width: 900px) {
  .cluster-status-grid { grid-template-columns: 1fr; }
  .cluster-wide-panel { grid-column: auto; }
}
@media (max-width: 520px) {
  .cluster-fact-grid { grid-template-columns: 1fr; }
  .cluster-candidate { grid-template-columns: 1fr; }
}

/* Update 05: DM history and verification controls */
.chat-list-group-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px 6px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chat-list-group-label span {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  text-align: center;
  background: rgba(255,255,255,.05);
}
.channel-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
}
.card-pill-stack { display: grid; justify-items: end; gap: 7px; }
.verification-panel {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.verification-panel.success {
  color: var(--success);
  border-color: rgba(75,209,139,.3);
  background: rgba(75,209,139,.07);
}
.verification-panel.danger {
  color: var(--danger);
  border-color: rgba(255,107,122,.3);
  background: rgba(255,107,122,.07);
}
.verification-panel.neutral { color: var(--muted); }

/* Update 06: health monitoring and expanded audit logs */
.health-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.health-value.success { color: #6ee7a8; }
.health-value.warning { color: #f6c85f; }
.health-value.danger { color: #ff8c8c; }
.health-issues { display: grid; gap: .75rem; margin-bottom: 1rem; }
.health-issue { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .9rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
.health-issue.warning { border-color: rgba(246, 200, 95, .42); }
.health-issue.critical { border-color: rgba(255, 100, 100, .48); }
.health-issue p { margin: .25rem 0 0; color: var(--muted); line-height: 1.45; }
.health-history { display: grid; gap: .45rem; }
.health-history-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) 110px repeat(3, minmax(100px, 1fr)); gap: .75rem; align-items: center; padding: .7rem .8rem; border-bottom: 1px solid var(--border); }
.health-history-row:last-child { border-bottom: 0; }
.audit-filters { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); width: min(100%, 1000px); }
.audit-filters button { min-height: 40px; }
.log-content { min-width: 0; }
.log-title-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.log-details { margin-top: .65rem; }
.log-details summary { cursor: pointer; color: var(--accent); }
.log-details pre { white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0,0,0,.25); padding: .75rem; border-radius: 10px; max-height: 320px; overflow: auto; }
.checkbox-row { display: flex !important; flex-direction: row !important; align-items: center; gap: .65rem; }
.checkbox-row input { width: auto; }
select[multiple] { min-height: 130px; }
.empty-state.compact { min-height: 120px; }

@media (max-width: 1150px) {
  .health-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-filters { grid-template-columns: repeat(2, minmax(135px, 1fr)); }
  .health-history-row { grid-template-columns: 1fr 100px 1fr; }
  .health-history-row span:nth-child(n+4) { display: none; }
}

@media (max-width: 700px) {
  .health-metrics, .audit-filters { grid-template-columns: 1fr; }
  .health-history-row { grid-template-columns: 1fr auto; }
  .health-history-row span:nth-child(n+3) { display: none; }
}

/* Update 07: workspace profiles and automatic DM workspaces */
.workspace-layout { align-items: start; }
.workspace-profile-grid { grid-template-columns: 1fr; }
.workspace-profile-card { box-shadow: none; }
.workspace-profile-card code,
.warning-box code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.workspace-modal textarea { resize: vertical; min-height: 70px; }

/* Update 09.5 — command-center redesign */
:root {
  --bg: #060914;
  --surface: #0d1322;
  --surface-2: #111a2d;
  --surface-3: #18243b;
  --surface-4: #223150;
  --line: rgba(170, 190, 230, 0.12);
  --line-strong: rgba(170, 190, 230, 0.24);
  --text: #f7f9ff;
  --muted: #94a3bc;
  --accent: #9b72ff;
  --accent-2: #5f6df2;
  --cyan: #a985ff;
  --success: #45d499;
  --warning: #ffc968;
  --danger: #ff7185;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

body {
  background:
    radial-gradient(circle at 85% -15%, rgba(75, 217, 232, 0.12), transparent 31rem),
    radial-gradient(circle at 13% 2%, rgba(123, 140, 255, 0.20), transparent 35rem),
    linear-gradient(180deg, #080d1a 0, var(--bg) 42rem);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.app-shell { grid-template-columns: 286px minmax(0, 1fr); }
.sidebar {
  padding: 22px 15px;
  border-right-color: rgba(161, 182, 227, .13);
  background: linear-gradient(180deg, rgba(11, 17, 31, .96), rgba(7, 11, 21, .93));
  box-shadow: 20px 0 70px rgba(0,0,0,.18);
}
.brand-row { padding: 0 11px 28px; }
.brand-mark {
  background: linear-gradient(145deg, #82a3ff, #7868f7 56%, #a985ff);
  box-shadow: 0 16px 42px rgba(95, 109, 242, .34);
}
.brand-row strong { letter-spacing: -.02em; font-size: 1.03rem; }
.brand-row span { margin-top: 3px; }

.nav-list { gap: 5px; }
.nav-item {
  position: relative;
  min-height: 46px;
  padding: 0 13px 0 47px;
  border: 1px solid transparent;
  font-weight: 680;
  letter-spacing: -.01em;
}
.nav-item::before {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #b7c4dd;
  font-size: .83rem;
  font-weight: 850;
}
.nav-item[data-view="overview"]::before { content: "⌂"; }
.nav-item[data-view="health"]::before { content: "♥"; }
.nav-item[data-view="nodes"]::before { content: "⌘"; }
.nav-item[data-view="chats"]::before { content: "✦"; }
.nav-item[data-view="channels"]::before { content: "#"; }
.nav-item[data-view="workspaces"]::before { content: "▣"; }
.nav-item[data-view="access"]::before { content: "◎"; }
.nav-item[data-view="logs"]::before { content: "≡"; }
.nav-item[data-view="updates"]::before { content: "⇧"; }
.nav-item:hover { border-color: rgba(170,190,230,.08); }
.nav-item.active {
  border-color: rgba(123,140,255,.22);
  background: linear-gradient(135deg, rgba(123,140,255,.21), rgba(74,217,232,.06));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 32px rgba(0,0,0,.14);
}
.nav-item.active::before { background: rgba(123,140,255,.22); color: #fff; }

.sidebar-footer { padding-top: 18px; border-top: 1px solid var(--line); }
.user-chip { border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }

.main-content { padding: 25px clamp(18px, 3vw, 48px) 72px; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  margin: -25px calc(clamp(18px, 3vw, 48px) * -1) 26px;
  padding: 20px clamp(18px, 3vw, 48px) 17px;
  border-bottom: 1px solid rgba(170,190,230,.10);
  background: linear-gradient(180deg, rgba(6,9,20,.94), rgba(6,9,20,.76));
  backdrop-filter: blur(18px);
}
.topbar h1 { letter-spacing: -.045em; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar-context { color: var(--muted); font-size: .76rem; }

.metric-card, .panel {
  border-color: rgba(170,190,230,.13);
  background: linear-gradient(155deg, rgba(18,28,48,.88), rgba(9,15,28,.95));
  box-shadow: 0 18px 56px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025);
}
.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  padding: 21px;
}
.metric-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -45px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,140,255,.14), transparent 68%);
}
.metric-card strong { letter-spacing: -.045em; }
.panel-header { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }

.button, .icon-button, .file-button { border-radius: 12px; font-weight: 720; }
.button.primary { background: linear-gradient(135deg, #8296ff, #6574f3 62%, #4dcbdc); }
.button.ghost, .icon-button, .file-button { background: rgba(147,171,218,.045); }
.button.ghost:hover, .icon-button:hover, .file-button:hover { border-color: var(--line-strong); background: rgba(147,171,218,.09); }

.pill { font-weight: 720; background: rgba(8,13,25,.58); }
.pill.success { background: rgba(69,212,153,.07); }
.pill.warning { background: rgba(255,201,104,.07); }
.pill.danger { background: rgba(255,113,133,.07); }

.section-toolbar {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(17,26,45,.55);
  backdrop-filter: blur(10px);
}

.chat-layout { gap: 16px; }
.chat-sidebar, .chat-panel { min-height: calc(100vh - 160px); }
.chat-sidebar { background: rgba(9,15,28,.88); }
.chat-channel-list { padding: 8px; }
.chat-list-group-label { margin: 14px 10px 6px; letter-spacing: .08em; }
.chat-channel-button {
  border: 1px solid transparent;
  min-height: 58px;
  border-radius: 13px;
  padding: 9px 10px;
}
.chat-channel-button:hover { border-color: var(--line); background: rgba(255,255,255,.035); }
.chat-channel-button.active {
  border-color: rgba(123,140,255,.30);
  background: linear-gradient(135deg, rgba(123,140,255,.18), rgba(74,217,232,.055));
}
.chat-header { min-height: 83px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.chat-messages { padding: 22px; }
.message-bubble { border: 1px solid rgba(170,190,230,.10); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.chat-composer {
  margin: 0 16px 16px;
  min-height: 0;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  background: rgba(12,19,34,.94);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.chat-composer textarea { min-height: 76px; }

.workspace-identity-panel {
  margin: 14px 18px 0;
  padding: 16px 17px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(230px,.7fr);
  gap: 16px;
  border: 1px solid rgba(74,217,232,.20);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(74,217,232,.07), rgba(123,140,255,.09));
  max-height: 142px;
  overflow: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.workspace-identity-copy { min-width: 0; }
.workspace-agent-badge {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(74,217,232,.11);
  color: #c1adff;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.workspace-identity-copy strong { display: block; font-size: .98rem; line-height: 1.4; }
.workspace-identity-copy p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; font-size: .83rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.starter-prompt-list { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: 7px; max-height: 104px; overflow-y: auto; min-width: 0; overscroll-behavior: contain; }
.starter-prompt {
  border: 1px solid rgba(170,190,230,.17);
  border-radius: 999px;
  padding: 7px 10px;
  color: #dbe5fa;
  background: rgba(7,12,24,.46);
  cursor: pointer;
  font-size: .73rem;
  transition: .16s ease;
}
.starter-prompt:hover { transform: translateY(-1px); border-color: rgba(123,140,255,.45); background: rgba(123,140,255,.11); }

.live-job-panel {
  border-color: rgba(123,140,255,.27);
  background: linear-gradient(135deg, rgba(123,140,255,.09), rgba(74,217,232,.035));
}
.activity-item { border: 1px solid rgba(170,190,230,.07); }

.workspace-purpose-summary {
  margin: 0 20px 14px;
  padding: 14px;
  border: 1px solid rgba(74,217,232,.16);
  border-radius: 13px;
  background: rgba(74,217,232,.045);
}
.workspace-purpose-summary span { display: block; color: #74dfe9; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.workspace-purpose-summary strong { display: block; margin-top: 6px; line-height: 1.45; }
.workspace-purpose-summary p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; font-size: .82rem; }
.workspace-starter-preview { margin: 0 20px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.workspace-starter-preview span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .7rem; }

.form-grid label > span { font-weight: 690; }
input, select, textarea {
  border-color: rgba(170,190,230,.15);
  background: rgba(5,10,21,.58);
}
input:focus, select:focus, textarea:focus { border-color: rgba(123,140,255,.58); box-shadow: 0 0 0 3px rgba(123,140,255,.10); }
label small { color: var(--muted); line-height: 1.4; }
.modal { border-color: rgba(170,190,230,.18); background: linear-gradient(155deg, #121c30, #090f1d); box-shadow: 0 30px 100px rgba(0,0,0,.58); }
.modal::backdrop { background: rgba(2,5,12,.72); backdrop-filter: blur(7px); }

.verification-panel { border-radius: 14px; }
.channel-card dl, .workspace-profile-card dl { background: rgba(0,0,0,.06); }
.log-entry:hover { background: rgba(255,255,255,.018); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 84px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .brand-row { justify-content: center; padding-inline: 0; }
  .brand-row > div:last-child, .nav-item span, .user-chip > div, .sidebar-footer .button { display: none; }
  .nav-item { padding: 0; }
  .nav-item::before { left: 50%; transform: translate(-50%,-50%); }
  .user-chip { justify-content: center; padding: 8px; border: 0; background: transparent; }
  .workspace-identity-panel { grid-template-columns: 1fr; }
  .starter-prompt-list { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    z-index: 60;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 70px;
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
    background: rgba(7,11,21,.95);
  }
  .brand-row, .sidebar-footer { display: none; }
  .nav-list { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; overflow-x: auto; }
  .nav-item { min-width: 58px; min-height: 52px; }
  .nav-item::before { top: 17px; }
  .nav-item span { display: block; padding-top: 28px; font-size: .59rem; text-align: center; white-space: nowrap; }
  .main-content { padding: 15px 12px 96px; }
  .topbar { margin: -15px -12px 18px; padding: 15px 13px 13px; }
  .topbar-context { display: none; }
  .topbar h1 { font-size: 1.55rem; }
  .workspace-identity-panel { margin-inline: 10px; }
  .chat-composer { margin-inline: 9px; }
  .chat-messages { padding: 13px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 112px; }
}

@media (max-width: 480px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .topbar-actions .pill { padding-inline: 8px; font-size: .66rem; }
  .workspace-identity-panel { padding: 13px; }
  .starter-prompt { width: 100%; text-align: left; border-radius: 11px; }
}

/* Update 10: approvals, diffs, snapshots, and rollback */
.change-record-list {
  display: grid;
  gap: 12px;
}

.change-record-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(14, 27, 49, 0.72);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.change-record-card.pending {
  border-color: rgba(250, 204, 21, 0.38);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.05);
}

.change-record-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.change-record-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.change-record-header strong {
  font-size: 1rem;
}

.change-record-header span:not(.pill),
.change-record-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.change-record-meta {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.change-review-modal {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(900px, calc(100vh - 32px));
}

.change-review-body {
  padding: 0 22px 22px;
  display: grid;
  gap: 16px;
  overflow: auto;
}

.change-file-list {
  display: grid;
  gap: 7px;
}

.change-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: rgba(7, 14, 28, 0.65);
  border-radius: 10px;
  padding: 9px 11px;
}

.change-file-row code {
  overflow-wrap: anywhere;
  color: #dbeafe;
}

.change-diff {
  margin: 0;
  padding: 16px;
  min-height: 180px;
  max-height: 50vh;
  overflow: auto;
  white-space: pre;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #050b16;
  color: #d7e3f5;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
}

@media (max-width: 720px) {
  .usage-capacity-strip { margin: 0 12px 10px; }
  .change-record-header {
    display: grid;
  }
  .change-file-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .change-file-row .pill:last-child {
    grid-column: 2;
    justify-self: start;
  }
}

/* Update 10.1 — visual polish and responsive control surfaces */
:root {
  --bg: #050a12;
  --surface: #0b1421;
  --surface-2: #101c2d;
  --surface-3: #17263b;
  --surface-4: #203653;
  --line: rgba(159, 188, 222, .14);
  --line-strong: rgba(159, 188, 222, .28);
  --border: var(--line);
  --text: #f5f9ff;
  --muted: #91a4bc;
  --accent: #9b72ff;
  --accent-2: #5e7cf4;
  --cyan: #9b72ff;
  --success: #4ed69a;
  --warning: #f6c968;
  --danger: #ff7185;
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
}

html { scrollbar-color: rgba(119, 167, 255, .38) rgba(5, 10, 18, .35); }
body {
  min-width: 320px;
  background:
    radial-gradient(circle at 82% -8%, rgba(67, 214, 208, .13), transparent 31rem),
    radial-gradient(circle at 8% 0, rgba(94, 124, 244, .22), transparent 38rem),
    linear-gradient(160deg, #07111f 0, var(--bg) 46rem);
}
body::before {
  opacity: .24;
  background-size: 40px 40px;
  background-image:
    linear-gradient(rgba(177, 207, 242, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177, 207, 242, .022) 1px, transparent 1px);
}

::selection { color: white; background: rgba(94, 124, 244, .55); }
:focus-visible { outline: 2px solid #8fbcff; outline-offset: 3px; }
.button:focus-visible, .nav-item:focus-visible, .icon-button:focus-visible,
.file-button:focus-visible, .starter-prompt:focus-visible { outline-offset: 2px; }

.login-screen { position: relative; overflow: hidden; }
.login-screen::before, .login-screen::after {
  content: "";
  position: absolute;
  width: min(52vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}
.login-screen::before { left: -18%; top: -35%; border: 1px solid rgba(155,114,255,.13); box-shadow: 0 0 100px rgba(128,80,220,.12); }
.login-screen::after { right: -22%; bottom: -45%; border: 1px solid rgba(240,93,115,.11); box-shadow: 0 0 100px rgba(240,93,115,.08); }
.login-card {
  position: relative;
  isolation: isolate;
  width: min(500px, 100%);
  padding: clamp(32px, 6vw, 52px);
  border-color: rgba(159,188,222,.2);
  border-radius: 30px;
  background: linear-gradient(155deg, rgba(17,30,49,.94), rgba(7,14,25,.95));
  box-shadow: 0 34px 110px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.055);
}
.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(155,114,255,.07), transparent 38%, rgba(240,93,115,.035));
}
.login-brand-stage { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 6px; }
.login-brand-stage .brand-mark { position: relative; z-index: 2; }
.brand-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(155,114,255,.24); }
.orbit-one { width: 92px; height: 92px; }
.orbit-two { width: 112px; height: 112px; border-color: rgba(240,93,115,.13); border-style: dashed; }
.login-lead { max-width: 390px; margin: 0 auto 20px; color: #b1c1d5; line-height: 1.65; }
.login-capabilities { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.login-capabilities span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .69rem; }

.brand-mark { background: linear-gradient(145deg, #8ab8ff, #667ef2 54%, #9b72ff); box-shadow: 0 18px 48px rgba(128,80,220,.35); }
.app-shell { grid-template-columns: 278px minmax(0, 1fr); }
.sidebar { border-right-color: rgba(159,188,222,.12); background: linear-gradient(180deg, rgba(9,18,31,.98), rgba(5,11,20,.96)); }
.brand-row { position: relative; }
.brand-row::after { content: "CONTROL PLANE"; position: absolute; left: 61px; bottom: 10px; color: rgba(145,164,188,.6); font-size: .55rem; font-weight: 800; letter-spacing: .16em; }
.nav-item::before { content: attr(data-icon) !important; }
.nav-item { color: #9dafc5; }
.nav-item:hover { color: #ecf5ff; border-color: rgba(155,114,255,.13); transform: translateX(2px); }
.nav-item.active { color: white; border-color: rgba(155,114,255,.28); background: linear-gradient(100deg, rgba(128,80,220,.23), rgba(240,93,115,.065)); }
.nav-item.active::after { content: ""; position: absolute; inset: 8px auto 8px -1px; width: 3px; border-radius: 5px; background: linear-gradient(#91baff, #9b72ff); box-shadow: 0 0 14px rgba(155,114,255,.7); }

.topbar { min-height: 91px; }
.topbar h1 { font-weight: 760; }
.topbar-context { padding-right: 12px; border-right: 1px solid var(--line); letter-spacing: .025em; }
.pill::before { box-shadow: 0 0 9px currentColor; }

.metric-card, .panel { border-color: var(--line); background: linear-gradient(150deg, rgba(16,29,48,.92), rgba(7,14,25,.96)); }
.metric-card { border-radius: 20px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.metric-card:hover { transform: translateY(-2px); border-color: rgba(155,114,255,.24); box-shadow: 0 22px 58px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.04); }
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(transparent, rgba(155,114,255,.78), transparent); opacity: .7; }
.metric-label { color: #a2b4c9; font-weight: 680; letter-spacing: .02em; }
.metric-card strong { position: relative; z-index: 1; }
.panel { border-radius: 20px; }
.panel-header { padding: 21px 23px; }
.panel-header h2 { font-size: 1.08rem; letter-spacing: -.02em; }

.button, .icon-button, .file-button { min-height: 43px; border-radius: 12px; }
.button.primary { background: linear-gradient(115deg, #a27cff, #8c5cf0 58%, #42c7c8); box-shadow: 0 12px 30px rgba(82,104,224,.28), inset 0 1px rgba(255,255,255,.2); }
.button.primary:hover:not(:disabled) { box-shadow: 0 15px 36px rgba(82,104,224,.36), inset 0 1px rgba(255,255,255,.24); }
.button.danger-outline:hover:not(:disabled) { border-color: rgba(255,113,133,.58); background: rgba(255,113,133,.11); }

input, select, textarea { min-height: 44px; border-radius: 12px; background: rgba(3,9,17,.68); }
textarea { min-height: 84px; }
input:hover, select:hover, textarea:hover { border-color: rgba(159,188,222,.25); }
input:focus, select:focus, textarea:focus { border-color: rgba(155,114,255,.68); box-shadow: 0 0 0 3px rgba(155,114,255,.12), 0 10px 28px rgba(0,0,0,.16); }

.section-toolbar { border-radius: 17px; background: linear-gradient(105deg, rgba(16,29,48,.72), rgba(8,17,29,.7)); }
.channel-card { transition: transform .18s ease, border-color .18s ease; }
.channel-card:hover { transform: translateY(-2px); border-color: rgba(155,114,255,.22); }
.channel-card dl { padding: 12px; border: 1px solid rgba(159,188,222,.07); border-radius: 12px; }
.details-list div { border-color: rgba(159,188,222,.1); }
.log-entry { padding-inline: 4px; border-radius: 9px; }

.chat-layout { grid-template-columns: 310px minmax(0, 1fr); }
.chat-channel-button { position: relative; }
.chat-channel-button.active::after { content: ""; position: absolute; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.channel-icon { background: linear-gradient(145deg, rgba(155,114,255,.17), rgba(240,93,115,.08)); border: 1px solid rgba(155,114,255,.14); }
.chat-panel { background: linear-gradient(155deg, rgba(12,23,39,.96), rgba(5,12,22,.98)); }
.chat-messages { background: radial-gradient(circle at 50% 10%, rgba(155,114,255,.035), transparent 50%); }
.message { border: 1px solid rgba(159,188,222,.1); box-shadow: 0 9px 26px rgba(0,0,0,.14); }
.message.user { border-color: rgba(155,114,255,.22); background: linear-gradient(145deg, rgba(128,80,220,.34), rgba(51,94,151,.22)); }
.message.assistant { background: linear-gradient(145deg, rgba(25,42,65,.92), rgba(16,29,47,.92)); }
.chat-composer { border-color: rgba(155,114,255,.25); background: linear-gradient(145deg, rgba(13,24,41,.98), rgba(7,15,27,.98)); }
.chat-composer:focus-within { border-color: rgba(155,114,255,.52); box-shadow: 0 22px 50px rgba(0,0,0,.3), 0 0 0 3px rgba(155,114,255,.07); }

.modal { border-radius: 22px; }
.modal-header { align-items: center; }
.toast { border-color: rgba(159,188,222,.2); background: rgba(14,26,43,.96); backdrop-filter: blur(16px); }
.change-record-card { border-color: var(--line); background: linear-gradient(145deg, rgba(16,30,50,.83), rgba(8,17,30,.91)); }
.change-file-row { border-color: var(--line); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 82px minmax(0, 1fr); }
  .brand-row::after { display: none; }
  .nav-item:hover { transform: none; }
}

@media (max-width: 760px) {
  .sidebar { height: calc(68px + env(safe-area-inset-bottom)); }
  .nav-list { grid-template-columns: repeat(10, minmax(62px, 1fr)); }
  .nav-item { min-width: 62px; }
  .main-content { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 78px; }
  .metrics-grid { gap: 10px; }
  .metric-card { border-radius: 16px; }
  .panel { border-radius: 17px; }
  .chat-panel { min-height: 580px; height: calc(100dvh - 190px); }
  .chat-actions { width: 100%; }
  .chat-actions .button { flex: 1 1 auto; }
  .modal { max-height: calc(100dvh - 20px); }
}

@media (max-width: 520px) {
  .login-card { padding: 30px 22px; border-radius: 24px; }
  .login-brand-stage { transform: scale(.88); margin-bottom: -2px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 104px; }
  .topbar-actions { align-items: flex-end; }
  .section-toolbar { padding: 12px; }
  .details-list div, .channel-card dl div { grid-template-columns: 1fr; gap: 4px; }
  .channel-card-header, .update-preview-header { display: grid; }
  .card-actions { justify-content: stretch; flex-wrap: wrap; }
  .card-actions .button { flex: 1 1 auto; }
}

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

/* Update 13 — complete operations-console redesign */
:root {
  --bg: #090b0e;
  --surface: #11151a;
  --surface-2: #161b21;
  --surface-3: #1d242c;
  --surface-4: #27313c;
  --line: rgba(220, 229, 238, .105);
  --line-strong: rgba(220, 229, 238, .21);
  --border: var(--line);
  --text: #f4f1ea;
  --muted: #929ba5;
  --accent: #f05d73;
  --accent-2: #cb744c;
  --cyan: #9b72ff;
  --success: #6bd4a8;
  --warning: #efba61;
  --danger: #ec7180;
  --shadow: 0 28px 80px rgba(0, 0, 0, .38);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, .22);
  --sidebar-width: 278px;
}

html { background: var(--bg); scrollbar-color: #3b444e #0d1014; }
body {
  min-width: 320px;
  background:
    radial-gradient(circle at 71% -20%, rgba(102, 210, 189, .08), transparent 32rem),
    radial-gradient(circle at 16% 8%, rgba(230, 161, 92, .075), transparent 29rem),
    linear-gradient(145deg, #0d1014, #080a0d 48rem);
  color: var(--text);
  letter-spacing: -.006em;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .25;
  background-image: radial-gradient(rgba(235, 240, 245, .16) .5px, transparent .5px);
  background-size: 19px 19px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
::selection { color: #15100b; background: #efb477; }
:focus-visible { outline-color: #f1b779; }

.app-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar {
  width: auto;
  padding: 20px 16px 18px;
  border-right: 1px solid rgba(220, 229, 238, .08);
  background:
    linear-gradient(180deg, rgba(20, 24, 29, .985), rgba(10, 13, 17, .99)),
    var(--surface);
  box-shadow: 18px 0 60px rgba(0, 0, 0, .16);
  backdrop-filter: blur(22px);
}
.brand-row { min-height: 58px; gap: 13px; padding: 0 8px 17px; }
.brand-row::after { display: none; }
.brand-row strong { color: #fffaf2; font-size: .94rem; letter-spacing: -.025em; }
.brand-row span { color: #717b85; font-size: .67rem; font-weight: 650; letter-spacing: .045em; }
.brand-mark {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 19px;
  color: #18100a;
  background: linear-gradient(145deg, #ffd19d, #e69a57 54%, #bb6250);
  box-shadow: 0 14px 34px rgba(196, 104, 62, .24), inset 0 1px rgba(255,255,255,.45);
}
.brand-mark::after { content: ""; position: absolute; inset: -45% 40% 20% -30%; transform: rotate(-28deg); background: rgba(255,255,255,.28); filter: blur(5px); }
.brand-mark span, .brand-mark.small span { position: relative; z-index: 1; }
.brand-mark.small { width: 42px; height: 42px; border-radius: 14px; font-size: 1.05rem; }

.sidebar-system-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 3px 18px;
  padding: 11px 12px;
  border: 1px solid rgba(102, 210, 189, .13);
  border-radius: 13px;
  background: linear-gradient(115deg, rgba(102, 210, 189, .07), rgba(255,255,255,.018));
}
.system-pulse { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(155,114,255,.08), 0 0 14px rgba(155,114,255,.5); }
.sidebar-system-card strong, .sidebar-system-card span { display: block; }
.sidebar-system-card strong { font-size: .7rem; color: #dce9e5; }
.sidebar-system-card span { margin-top: 2px; color: #74817e; font-size: .62rem; }

.nav-list { gap: 3px; overflow-y: auto; padding-right: 2px; }
.nav-section-label {
  display: block;
  margin: 15px 11px 5px;
  color: #59626c;
  font-size: .59rem;
  font-weight: 820;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-section-label:first-child { margin-top: 0; }
.nav-item {
  position: relative;
  min-height: 43px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: center;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #8e98a3;
  font-size: .79rem;
  font-weight: 660;
  letter-spacing: .005em;
}
.nav-item::before {
  content: attr(data-icon) !important;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #78838e;
  font-size: .76rem;
  background: rgba(255,255,255,.018);
}
.nav-item:hover { transform: none; color: #f4eee5; border-color: rgba(240,93,115,.08); background: rgba(255,255,255,.028); }
.nav-item:hover::before { color: var(--accent); background: rgba(240,93,115,.07); }
.nav-item.active { color: #fff8ee; border-color: rgba(240,93,115,.15); background: linear-gradient(100deg, rgba(240,93,115,.13), rgba(155,114,255,.025)); }
.nav-item.active::before { color: #17100a; border-color: rgba(255,255,255,.1); background: linear-gradient(145deg, #ff7990, #9b72ff); box-shadow: 0 7px 18px rgba(190,96,55,.18); }
.nav-item.active::after { inset: 11px auto 11px -4px; width: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(240,93,115,.55); }
.sidebar-footer { gap: 9px; padding-top: 14px; border-top: 1px solid rgba(220,229,238,.07); }
.user-chip { padding: 7px 8px; }
.user-chip img { width: 34px; height: 34px; border: 1px solid var(--line); }
.user-chip strong { color: #e9e6df; font-size: .76rem; }
.user-chip span { margin-top: 2px; color: #69737d; font-size: .63rem; }

.main-content { width: min(100%, 1660px); padding: 25px clamp(20px, 3.1vw, 54px) 70px; }
.topbar { min-height: 69px; margin-bottom: 26px; }
.topbar-heading { display: flex; align-items: center; gap: 13px; }
.topbar h1 { color: #f7f3ec; font-size: clamp(1.62rem, 2.6vw, 2.18rem); font-weight: 710; letter-spacing: -.045em; }
.topbar .eyebrow { margin-bottom: 4px; }
.topbar-actions { gap: 11px; }
.topbar-context { color: #69737d; border-color: var(--line); font-size: .69rem; }
.mobile-menu-button { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.mobile-menu-button span { display: block; height: 1px; margin: 4px 0; border-radius: 2px; background: #d8d4cc; }

.eyebrow { color: var(--accent); font-size: .61rem; letter-spacing: .17em; }
.pill { min-height: 29px; padding: 0 10px; border-color: var(--line); color: #aeb6be; background: rgba(255,255,255,.025); font-size: .65rem; }
.pill::before { width: 6px; height: 6px; }
.pill.success { color: var(--success); background: rgba(107,212,168,.055); }
.pill.warning { color: var(--warning); background: rgba(239,186,97,.055); }
.pill.danger { color: var(--danger); background: rgba(236,113,128,.055); }

.view.active { animation: console-view-in .28s ease both; }
@keyframes console-view-in { from { opacity: 0; transform: translateY(7px); } }
.command-hero {
  position: relative;
  isolation: isolate;
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr);
  align-items: center;
  gap: 30px;
  overflow: hidden;
  margin-bottom: 18px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(240,93,115,.16);
  border-radius: 24px;
  background:
    linear-gradient(115deg, rgba(240,93,115,.09), transparent 38%),
    linear-gradient(145deg, #191b1e, #0d1115 64%);
  box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.035);
}
.command-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent, black); }
.command-hero-copy { max-width: 720px; }
.hero-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #b0b6b8; font-size: .67rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.hero-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px rgba(155,114,255,.7); }
.command-hero h2 { max-width: 680px; margin: 0; color: #fffaf2; font-size: clamp(1.75rem, 3.3vw, 3rem); font-weight: 640; line-height: 1.06; letter-spacing: -.055em; }
.command-hero p { max-width: 620px; margin: 18px 0 0; color: #89939c; line-height: 1.7; }
.hero-visual { position: relative; width: min(100%, 300px); aspect-ratio: 1; justify-self: center; }
.hero-ring { position: absolute; inset: 12%; border: 1px solid rgba(240,93,115,.2); border-radius: 50%; }
.hero-ring.ring-b { inset: 1%; border-color: rgba(155,114,255,.11); border-style: dashed; animation: hero-spin 24s linear infinite; }
@keyframes hero-spin { to { transform: rotate(360deg); } }
.hero-core { position: absolute; inset: 28%; display: grid; place-content: center; border: 1px solid rgba(255,255,255,.12); border-radius: 30%; transform: rotate(45deg); text-align: center; background: linear-gradient(145deg, rgba(240,93,115,.2), rgba(155,114,255,.08)); box-shadow: 0 22px 60px rgba(0,0,0,.35); }
.hero-core > * { transform: rotate(-45deg); }
.hero-core small { color: #8f969a; font-size: .47rem; letter-spacing: .21em; }
.hero-core strong { color: #e4d9ff; font-size: .67rem; letter-spacing: .08em; }
.hero-node { position: absolute; width: 10px; height: 10px; border: 2px solid #101317; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(240,93,115,.09); }
.node-a { top: 10%; left: 48%; }.node-b { right: 7%; bottom: 27%; background: var(--cyan); }.node-c { left: 10%; bottom: 22%; }

.metrics-grid { gap: 13px; margin-bottom: 18px; }
.metric-card {
  min-height: 132px;
  padding: 20px 21px;
  border-color: rgba(220,229,238,.09);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(24,29,35,.97), rgba(14,18,22,.98));
  box-shadow: 0 10px 28px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.025);
}
.metric-card::before { inset: 20px auto 20px 0; width: 2px; background: linear-gradient(transparent, var(--accent), transparent); opacity: .66; }
.metric-card::after { content: ""; position: absolute; top: 17px; right: 18px; width: 6px; height: 6px; border: 1px solid rgba(240,93,115,.32); border-radius: 50%; }
.metric-card:hover { transform: translateY(-3px); border-color: rgba(240,93,115,.2); box-shadow: 0 18px 38px rgba(0,0,0,.22); }
.metric-label { color: #77818b; font-size: .67rem; font-weight: 730; text-transform: uppercase; letter-spacing: .08em; }
.metric-card strong { margin-top: auto; color: #f4f0e8; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 620; letter-spacing: -.035em; }
.metric-detail { color: #69737d; font-size: .69rem; }

.two-column-grid { gap: 16px; }
.panel {
  overflow: hidden;
  border-color: rgba(220,229,238,.09);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(22,27,33,.97), rgba(12,16,20,.98));
  box-shadow: 0 13px 34px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.025);
}
.panel-header { min-height: 76px; padding: 19px 21px; border-bottom-color: rgba(220,229,238,.075); }
.panel-header h2 { color: #eeeae3; font-size: 1rem; font-weight: 650; letter-spacing: -.025em; }
.details-list { padding: 5px 21px 15px; }
.details-list div { padding: 13px 0; border-color: rgba(220,229,238,.07); }
.details-list dt { color: #737d87; font-size: .7rem; }
.details-list dd { color: #d9d7d1; font-size: .77rem; }
.compact-log-list, .log-list { padding-inline: 20px; }
.log-entry { padding: 13px 3px; border-color: rgba(220,229,238,.07); }
.log-entry:hover { background: rgba(255,255,255,.018); }

.section-toolbar { min-height: 64px; margin-bottom: 15px; padding: 12px 14px 12px 18px; border: 1px solid rgba(220,229,238,.085); border-radius: 14px; background: rgba(19,24,29,.76); box-shadow: inset 0 1px rgba(255,255,255,.018); }
.section-toolbar p { margin: 0; font-size: .75rem; line-height: 1.5; }
.button, .icon-button, .file-button { min-height: 40px; border-radius: 10px; font-size: .73rem; font-weight: 720; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.button:hover:not(:disabled), .icon-button:hover:not(:disabled), .file-button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { color: #1c1209; border-color: rgba(255,255,255,.12); background: linear-gradient(115deg, #ff7990, #df8a55 60%, #d06d54); box-shadow: 0 10px 25px rgba(187,91,52,.19), inset 0 1px rgba(255,255,255,.32); }
.button.primary:hover:not(:disabled) { box-shadow: 0 13px 30px rgba(187,91,52,.27), inset 0 1px rgba(255,255,255,.36); }
.button.ghost, .icon-button, .file-button { color: #b5bbc0; border-color: var(--line); background: rgba(255,255,255,.025); }
.button.ghost:hover:not(:disabled), .icon-button:hover:not(:disabled), .file-button:hover:not(:disabled) { color: #f2eee7; border-color: rgba(240,93,115,.25); background: rgba(240,93,115,.055); }
.button.danger-outline { color: #e88893; border-color: rgba(236,113,128,.22); background: rgba(236,113,128,.035); }

input, select, textarea {
  min-height: 43px;
  border-color: rgba(220,229,238,.11);
  border-radius: 10px;
  color: #e8e5de;
  background: #0c1014;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.18);
}
input:hover, select:hover, textarea:hover { border-color: rgba(220,229,238,.2); }
input:focus, select:focus, textarea:focus { border-color: rgba(240,93,115,.58); box-shadow: 0 0 0 3px rgba(240,93,115,.09); }
label > span { color: #a3abb2; }

.channel-card-grid { gap: 13px; }
.channel-card { padding: 18px; border-radius: 15px; background: linear-gradient(145deg, rgba(25,31,38,.9), rgba(14,18,22,.95)); }
.channel-card:hover { transform: translateY(-2px); border-color: rgba(240,93,115,.17); }
.channel-card h3 { color: #eeebe4; font-size: .96rem; }
.channel-card p { color: #727c86; }
.channel-card dl { border-color: rgba(220,229,238,.065); background: rgba(0,0,0,.08); }
.channel-icon { color: var(--accent); border-color: rgba(240,93,115,.13); border-radius: 10px; background: linear-gradient(145deg, rgba(240,93,115,.11), rgba(155,114,255,.035)); }

.chat-layout { height: calc(100dvh - 125px); min-height: 620px; grid-template-columns: 290px minmax(0, 1fr); gap: 13px; }
.chat-list-panel, .chat-panel { border-radius: 17px; }
.chat-channel-list { padding: 7px; }
.chat-channel-button { min-height: 58px; padding: 10px; border: 1px solid transparent; border-radius: 10px; }
.chat-channel-button:hover { border-color: rgba(220,229,238,.07); background: rgba(255,255,255,.022); }
.chat-channel-button.active { border-color: rgba(240,93,115,.14); background: linear-gradient(100deg, rgba(240,93,115,.11), rgba(155,114,255,.02)); }
.chat-channel-button.active::after { background: var(--accent); box-shadow: 0 0 10px rgba(240,93,115,.7); }
.chat-panel { background: linear-gradient(145deg, #14191f, #0b0f13); }
.chat-header { min-height: 75px; padding: 16px 18px; border-color: rgba(220,229,238,.075); }
.chat-messages { padding: 22px; gap: 15px; background: radial-gradient(circle at 50% 0, rgba(240,93,115,.025), transparent 48%); }
.message { border-color: rgba(220,229,238,.085); border-radius: 13px; background: #1c232b; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.message.user { border-color: rgba(240,93,115,.16); background: linear-gradient(145deg, rgba(125,75,49,.56), rgba(70,48,38,.58)); }
.message.assistant { background: linear-gradient(145deg, #202831, #181f26); }
.message.system { color: var(--warning); background: rgba(239,186,97,.045); }
.chat-composer { margin: 0; padding: 13px; border: 0; border-top: 1px solid rgba(220,229,238,.08); border-radius: 0; background: rgba(12,16,20,.95); box-shadow: none; }
.chat-composer:focus-within { border-color: rgba(240,93,115,.32); box-shadow: 0 -12px 32px rgba(0,0,0,.16); }
.live-job-panel { border-color: rgba(155,114,255,.17); border-radius: 12px; background: rgba(155,114,255,.045); }
.activity-item { border: 1px solid rgba(220,229,238,.055); background: rgba(255,255,255,.018); }

.modal { border-color: rgba(220,229,238,.15); border-radius: 18px; background: #12171c; box-shadow: 0 35px 100px rgba(0,0,0,.62); }
.modal::backdrop { background: rgba(3,5,7,.78); backdrop-filter: blur(9px); }
.modal-header { min-height: 78px; border-color: rgba(220,229,238,.09); background: linear-gradient(110deg, rgba(240,93,115,.055), transparent); }
.modal-actions { border-color: rgba(220,229,238,.08); background: rgba(7,10,12,.4); }
.form-grid { gap: 16px; }
.warning-box { border-color: rgba(239,186,97,.18); border-radius: 11px; background: rgba(239,186,97,.045); }
.verification-panel, .update-preview-card, .release-catalog-card, .backup-card, .change-record-card { border-color: rgba(220,229,238,.09); border-radius: 13px; background: rgba(255,255,255,.018); }
.release-catalog-card:hover, .update-preview-card:hover, .backup-card:hover { border-color: rgba(240,93,115,.18); background: rgba(240,93,115,.025); }
.change-diff, .preview-files pre { border-color: rgba(220,229,238,.09); background: #080b0e; }
.toast { border-color: rgba(240,93,115,.17); border-radius: 11px; background: rgba(21,26,31,.97); box-shadow: 0 18px 50px rgba(0,0,0,.38); }
.access-user-card, .conversation-section, .conversation-summary, .health-issue, .workspace-identity-panel {
  border-color: rgba(220,229,238,.085);
  border-radius: 13px;
  background: rgba(255,255,255,.017);
}
.access-user-card:hover, .change-record-card:hover { border-color: rgba(240,93,115,.17); background: rgba(240,93,115,.022); }
.role-badge { border-color: rgba(220,229,238,.1); background: rgba(255,255,255,.025); }
.role-badge.owner { color: #f1b677; }.role-badge.administrator { color: #82cdbf; }.role-badge.operator { color: #aeb8d9; }.role-badge.viewer { color: #929ba5; }
.health-issue.warning { border-color: rgba(239,186,97,.25); background: rgba(239,186,97,.035); }
.health-issue.critical { border-color: rgba(236,113,128,.28); background: rgba(236,113,128,.035); }
.health-history { padding: 4px 18px 16px; }
.health-history-row { border-color: rgba(220,229,238,.07); color: #c9c9c5; font-size: .72rem; }
.health-value.success { color: var(--success); }.health-value.warning { color: var(--warning); }.health-value.danger { color: var(--danger); }
.audit-filters, .filter-row { gap: 10px; }
.conversation-metrics article { border-color: rgba(220,229,238,.08); background: rgba(255,255,255,.018); }
.workspace-agent-badge { color: var(--accent); border-color: rgba(240,93,115,.16); background: rgba(240,93,115,.055); }
.workspace-purpose-summary span { color: var(--accent); }
.workspace-starter-preview span, .starter-prompt { border-color: rgba(240,93,115,.12); color: #a4abb0; background: rgba(240,93,115,.035); }
.section-divider { color: #5e6871; }.section-divider::before, .section-divider::after { background: rgba(220,229,238,.08); }
.deployment-progress { background: rgba(255,255,255,.05); }.deployment-progress span { background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.deployment-step.running { color: var(--accent); }.deployment-step.running .deployment-step-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px rgba(240,93,115,.1); }

.login-screen {
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
  gap: clamp(35px, 7vw, 110px);
  padding: clamp(24px, 5vw, 78px);
  background:
    radial-gradient(circle at 18% 70%, rgba(240,93,115,.1), transparent 26rem),
    radial-gradient(circle at 65% 8%, rgba(155,114,255,.065), transparent 24rem),
    #090b0e;
}
.login-screen::before { inset: 0; width: auto; aspect-ratio: auto; border: 0; border-radius: 0; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 20% 60%, black, transparent 55%); }
.login-screen::after { right: 39%; bottom: 10%; width: 1px; height: 80%; border: 0; border-radius: 0; background: linear-gradient(transparent, rgba(240,93,115,.2), transparent); box-shadow: none; }
.login-showcase { position: relative; z-index: 1; min-height: 600px; display: grid; align-content: space-between; padding: clamp(16px, 3vw, 40px); }
.showcase-brand { max-width: 780px; }
.showcase-kicker { display: block; margin-bottom: 22px; color: var(--accent); font-size: .67rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.showcase-brand strong { display: block; max-width: 750px; color: #f5f0e7; font-size: clamp(2.8rem, 6vw, 6.2rem); font-weight: 580; line-height: .95; letter-spacing: -.07em; }
.showcase-orbit { position: relative; width: min(37vw, 410px); aspect-ratio: 1; place-self: center; }
.showcase-orbit span { position: absolute; inset: 4%; border: 1px solid rgba(240,93,115,.17); border-radius: 50%; }
.showcase-orbit span:nth-child(2) { inset: 17%; border-color: rgba(155,114,255,.13); }
.showcase-orbit span:nth-child(3) { inset: 31%; border-style: dashed; animation: hero-spin 20s linear infinite reverse; }
.showcase-orbit i { position: absolute; inset: 38%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 28%; color: #21150c; font-size: clamp(1.4rem, 4vw, 3rem); font-style: normal; font-weight: 900; background: linear-gradient(145deg,#ff8298,#9b72ff); transform: rotate(45deg); box-shadow: 0 25px 65px rgba(0,0,0,.42); }
.showcase-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 650px; border-top: 1px solid var(--line); padding-top: 20px; }
.showcase-stats strong, .showcase-stats span { display: block; }
.showcase-stats strong { color: #eee9df; font-size: 1rem; }
.showcase-stats span { margin-top: 5px; color: #69737c; font-size: .68rem; }
.login-card { position: relative; z-index: 1; width: min(470px, 100%); margin: auto; padding: clamp(30px, 4vw, 48px); border-color: rgba(220,229,238,.13); border-radius: 20px; background: linear-gradient(145deg, rgba(24,29,35,.96), rgba(13,17,21,.98)); box-shadow: 0 35px 100px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.035); text-align: left; }
.login-card::before { background: linear-gradient(145deg, rgba(240,93,115,.05), transparent 42%); }
.login-brand-stage { width: 76px; height: 76px; margin: 0 0 24px; }
.login-brand-stage .brand-mark { width: 54px; height: 54px; border-radius: 17px; }
.brand-orbit.orbit-one { width: 68px; height: 68px; border-color: rgba(240,93,115,.2); }
.brand-orbit.orbit-two { width: 76px; height: 76px; border-color: rgba(155,114,255,.11); }
.login-card h1 { margin: 7px 0 11px; color: #f8f3eb; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.055em; }
.login-lead { margin: 0 0 24px; color: #858f99; }
.login-capabilities { justify-content: flex-start; margin-bottom: 25px; }
.login-capabilities span { border-color: rgba(220,229,238,.1); color: #838d96; background: rgba(255,255,255,.018); }
.login-card .fine-print { color: #606a73; }

@media (max-width: 900px) and (min-width: 761px) {
  :root { --sidebar-width: 86px; }
  .brand-row { justify-content: center; padding-inline: 0; }
  .brand-copy, .sidebar-system-card, .nav-section-label, .nav-copy, .sidebar-footer { display: none; }
  .nav-list { overflow: visible; }
  .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 7px; }
  .nav-item::before { width: 32px; height: 32px; }
  .nav-item:hover::after { content: attr(data-tooltip); position: absolute; inset: auto auto auto 57px; top: 50%; z-index: 30; width: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: #eee9e1; background: #171c21; box-shadow: var(--shadow-soft); white-space: nowrap; transform: translateY(-50%); }
}

@media (max-width: 960px) {
  .command-hero { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .login-screen { grid-template-columns: 1fr; }
  .login-showcase { display: none; }
  .login-screen::after { display: none; }
  .login-card { text-align: center; }
  .login-brand-stage { margin-inline: auto; }
  .login-capabilities { justify-content: center; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: min(290px, 86vw);
    height: 100dvh;
    padding: 18px 14px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    transform: translateX(-105%);
    transition: transform .24s ease;
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .app-shell.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 70; background: rgba(3,5,7,.72); backdrop-filter: blur(4px); }
  .sidebar-footer { display: grid; }
  .nav-list { display: grid; grid-template-columns: 1fr; overflow-y: auto; }
  .nav-item { min-width: 0; text-align: left; }
  .nav-section-label { display: block; }
  .mobile-menu-button { display: block; }
  .main-content { width: 100%; padding: 17px 14px 40px; }
  .topbar { min-height: 62px; margin-bottom: 16px; }
  .topbar-context { display: none; }
  .command-hero { min-height: 220px; padding: 27px 22px; border-radius: 18px; }
  .command-hero h2 { font-size: clamp(1.65rem, 8vw, 2.3rem); }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 115px; border-radius: 14px; }
  .panel { border-radius: 14px; }
  .chat-layout { height: auto; min-height: 0; }
  .chat-list-panel { max-height: 260px; }
  .chat-panel { height: calc(100dvh - 120px); min-height: 600px; }
}

@media (max-width: 520px) {
  .login-screen { padding: 14px; }
  .login-card { padding: 28px 21px; border-radius: 17px; text-align: left; }
  .login-brand-stage { margin-inline: 0; }
  .login-capabilities { justify-content: flex-start; }
  .topbar-actions .pill { max-width: 106px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 104px; }
  .command-hero p { font-size: .82rem; }
  .section-toolbar { align-items: stretch; }
  .chat-panel { min-height: 560px; }
}

/* Update 13.1 — navigation and workspace refinement */
.brand-row { min-height: 48px; gap: 11px; }
.brand-copy { min-width: 0; display: grid; gap: 2px; }
.brand-copy strong { letter-spacing: -.02em; }
.brand-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-close-button {
  display: none;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #9ba4ac;
  background: rgba(255,255,255,.025);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.sidebar-close-button:hover { color: #f3eee6; border-color: rgba(240,93,115,.24); background: rgba(240,93,115,.06); }
.nav-list { gap: 3px; }
.nav-section-label { margin: 15px 11px 5px; }
.nav-item {
  min-height: 54px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
}
.nav-item::before { width: 32px; height: 32px; }
.nav-item::after { content: ""; position: absolute; inset: 10px auto 10px -1px; width: 2px; border-radius: 2px; background: transparent; }
.nav-item.active { border-color: rgba(240,93,115,.11); }
.nav-item.active::after { background: var(--accent); box-shadow: 0 0 12px rgba(240,93,115,.55); }
.nav-copy { min-width: 0; display: grid; gap: 2px; text-align: left; }
.nav-copy strong { overflow: hidden; color: #c7cbd0; font-size: .79rem; font-weight: 650; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.nav-copy small { overflow: hidden; color: #616b75; font-size: .62rem; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover .nav-copy strong, .nav-item.active .nav-copy strong { color: #f2eee7; }
.nav-item.active .nav-copy small { color: #a28a78; }

.workspace-command-bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid rgba(240,93,115,.13);
  border-radius: 17px;
  background: linear-gradient(120deg, rgba(240,93,115,.065), rgba(155,114,255,.025) 55%, rgba(255,255,255,.012));
}
.workspace-command-bar::after { content: ""; position: absolute; width: 240px; height: 240px; right: -100px; top: -150px; border: 1px solid rgba(240,93,115,.12); border-radius: 50%; box-shadow: 0 0 0 35px rgba(240,93,115,.018), 0 0 0 70px rgba(155,114,255,.012); pointer-events: none; }
.workspace-command-bar > * { position: relative; z-index: 1; }
.workspace-command-bar h2 { margin: 2px 0 7px; color: #f0ece4; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -.035em; }
.workspace-command-bar .muted { max-width: 680px; margin: 0; }
.workspace-command-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.workspace-management-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 14px; margin-bottom: 14px; }
.global-context-panel { margin-bottom: 14px; }
.global-context-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.global-context-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.018); display: flex; flex-direction: column; gap: 14px; }
.global-context-card.is-disabled { opacity: .67; }
.global-context-card-copy { min-width: 0; }
.global-context-card-copy h3 { margin: 10px 0 6px; }
.global-context-card-copy p { margin: 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.global-context-card .card-pill-stack { justify-content: flex-start; }
.global-context-card .card-actions { margin-top: auto; }
.global-context-profile-field { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.global-context-profile-field legend { padding: 0 7px; color: var(--muted); }
.global-context-profile-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 260px; overflow: auto; }
.workspace-catalog-panel, .workspace-dm-panel, .workspace-root-panel { padding: 20px; }
.workspace-catalog-tools { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .36fr); gap: 9px; margin: 16px 0 14px; }
.workspace-search-field { position: relative; }
.workspace-search-field > span { position: absolute; z-index: 1; left: 14px; top: 50%; color: #69747d; font-size: 1.2rem; transform: translateY(-50%); pointer-events: none; }
.workspace-search-field input { width: 100%; padding-left: 40px; }
.workspace-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workspace-card-heading { align-items: flex-start; }
.workspace-card-identity { min-width: 0; display: flex; align-items: flex-start; gap: 11px; }
.workspace-card-identity > div { min-width: 0; }
.workspace-card-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240,93,115,.15);
  border-radius: 10px;
  color: #e7a468;
  background: rgba(240,93,115,.055);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.workspace-card-icon.dm { color: var(--cyan); border-color: rgba(155,114,255,.16); background: rgba(155,114,255,.05); }
.workspace-card-icon.root { color: #aab3bc; border-color: rgba(220,229,238,.11); background: rgba(255,255,255,.025); font-size: 1rem; }
.workspace-profile-card.is-disabled { opacity: .67; }
.workspace-path-strip { display: grid; gap: 5px; margin: 13px 0; padding: 10px 12px; border: 1px solid rgba(220,229,238,.07); border-radius: 9px; background: rgba(0,0,0,.12); }
.workspace-path-strip span { color: #65707a; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.workspace-path-strip code { overflow: hidden; color: #b9c0c5; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-card-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workspace-card-facts > div { min-width: 0; }
.workspace-card-facts dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-assignment-summary { margin-right: auto; color: #69737c; font-size: .67rem; }
.workspace-dm-panel { position: sticky; top: 96px; overflow: hidden; background: linear-gradient(155deg, rgba(155,114,255,.045), rgba(18,23,28,.98) 38%); }
.workspace-panel-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid rgba(155,114,255,.17); border-radius: 14px; color: var(--cyan); background: rgba(155,114,255,.055); font-size: .72rem; font-weight: 800; }
.workspace-dm-panel .panel-header { margin-bottom: 19px; }
.workspace-root-panel { margin-top: 0; }
.workspace-root-panel #workspace-root-list { margin-top: 14px; }
.section-count { display: inline-grid; min-width: 24px; height: 24px; margin-left: 5px; place-items: center; vertical-align: 2px; border: 1px solid var(--line); border-radius: 99px; color: #8d969e; background: rgba(255,255,255,.025); font-size: .65rem; }

@media (max-width: 1240px) {
  .workspace-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .workspace-management-grid { grid-template-columns: 1fr; }
  .workspace-dm-panel { position: static; }
}

@media (max-width: 760px) {
  .global-context-profile-options { grid-template-columns: 1fr; }
  .global-context-card .card-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sidebar-close-button { display: grid; place-items: center; }
  .nav-copy { display: grid; }
  .workspace-command-bar { align-items: stretch; flex-direction: column; padding: 20px; }
  .workspace-command-actions { justify-content: stretch; }
  .workspace-command-actions .button { flex: 1 1 auto; }
  .workspace-catalog-tools { grid-template-columns: 1fr; }
  .workspace-catalog-panel, .workspace-dm-panel, .workspace-root-panel { padding: 16px; }
}

@media (max-width: 520px) {
  .workspace-command-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .workspace-command-actions .button.primary { grid-column: 1 / -1; grid-row: 1; }
  .workspace-card-facts { grid-template-columns: 1fr; }
  .workspace-profile-card .card-actions { align-items: stretch; }
  .workspace-assignment-summary { width: 100%; }
}

/* Update 14 — Discord attachments and authenticated-user controls */
.access-catalog-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(190px, .45fr) auto;
  gap: 9px;
  padding: 0 18px 14px;
}
.access-catalog-tools input, .access-catalog-tools select { width: 100%; }
.access-user-meta .pill.neutral { color: #aab2b9; background: rgba(255,255,255,.025); }

@media (max-width: 760px) {
  .access-catalog-tools { grid-template-columns: 1fr 1fr; padding-inline: 0; }
  .access-catalog-tools input { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .access-catalog-tools { grid-template-columns: 1fr; }
  .access-catalog-tools input { grid-column: auto; }
}

/* Update 14.1 — screenshot-driven layout and dialog corrections */
.main-content { width: 100%; max-width: none; }

.command-hero { min-height: 230px; padding: clamp(26px, 3vw, 38px); }
.command-hero h2 { font-size: clamp(1.8rem, 2.7vw, 2.65rem); }
.command-hero p { margin-top: 14px; line-height: 1.6; }
.hero-visual { width: min(100%, 235px); }
.metric-card { min-height: 116px; padding: 18px 20px; }

.chat-layout { height: calc(100dvh - 116px); min-height: 600px; grid-template-columns: 276px minmax(0, 1fr); }
.chat-panel { min-width: 0; overflow: hidden; }
.chat-header { min-height: 72px; gap: 12px; }
.chat-header > div:first-child { min-width: 0; }
.chat-header h2, .chat-header .path-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-actions { flex-wrap: wrap; justify-content: flex-end; }
.workspace-identity-panel {
  max-height: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 13px 15px;
  overflow: hidden;
}
.workspace-agent-badge { margin-bottom: 6px; }
.workspace-identity-copy strong { font-size: .9rem; line-height: 1.35; }
.workspace-identity-copy p { margin-top: 5px; -webkit-line-clamp: 2; font-size: .76rem; }
.starter-prompt-list {
  max-height: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-bottom: 3px;
  overflow-x: auto;
  overflow-y: hidden;
}
.starter-prompt { flex: 0 0 auto; max-width: min(380px, 72vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-messages { scrollbar-gutter: stable; }

.workspace-management-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 330px); }
.workspace-profile-grid { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.workspace-profile-card { align-content: start; }
.workspace-purpose-summary { margin: 0 0 12px; padding: 12px; }
.workspace-purpose-summary strong,
.workspace-purpose-summary p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.workspace-purpose-summary strong { -webkit-line-clamp: 3; font-size: .78rem; }
.workspace-purpose-summary p { -webkit-line-clamp: 3; font-size: .7rem; }
.workspace-starter-preview { margin: 0 0 12px; flex-wrap: nowrap; overflow: hidden; }
.workspace-starter-preview span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-starter-preview span:nth-child(n+3) { display: none; }
.workspace-card-facts { margin-top: 0; }
.workspace-root-panel #workspace-root-list { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }

.access-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); }
.access-user-card { grid-template-columns: minmax(210px, .9fr) minmax(260px, 1.1fr) auto; }
.access-modal { width: min(900px, calc(100% - 30px)); overflow: auto; }
.access-modal .modal-header { position: sticky; top: 0; z-index: 4; }
.access-modal .modal-actions { position: sticky; bottom: 0; z-index: 4; box-shadow: 0 -14px 30px rgba(0,0,0,.22); }
.access-channel-permissions { max-height: min(300px, 34vh); }

@media (min-width: 901px) and (max-width: 1180px) {
  :root { --sidebar-width: 232px; }
  .sidebar { padding-inline: 12px; }
  .brand-row { padding-inline: 5px; }
  .nav-copy small { display: none; }
  .nav-item { min-height: 46px; grid-template-columns: 32px minmax(0, 1fr); padding-inline: 8px; }
  .sidebar-system-card { padding-inline: 10px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  :root { --sidebar-width: 82px; }
  .brand-copy, .sidebar-system-card, .nav-section-label, .nav-copy, .sidebar-footer { display: none !important; }
  .brand-row { justify-content: center; padding-inline: 0; }
  .nav-list { overflow: visible; }
  .nav-item { min-height: 48px; grid-template-columns: 1fr; justify-items: center; padding: 7px; }
  .nav-item::before { width: 32px; height: 32px; }
}

@media (max-width: 1080px) {
  .workspace-management-grid, .access-layout { grid-template-columns: 1fr; }
  .workspace-dm-panel { position: static; }
}

@media (max-width: 900px) {
  .chat-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .chat-header { align-items: flex-start; flex-direction: column; }
  .chat-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .command-hero { min-height: 205px; }
  .chat-layout { height: auto; }
  .chat-panel { min-height: 620px; }
  .access-user-card { grid-template-columns: 1fr; }
}

/* Update 14.2 — always-visible web composer and labeled navigation */
@media (min-width: 761px) {
  :root { --sidebar-width: clamp(232px, 15vw, 278px); }
  .brand-copy { display: grid !important; }
  .sidebar-system-card { display: flex !important; }
  .nav-section-label { display: block !important; }
  .nav-copy { display: grid !important; }
  .sidebar-footer { display: grid !important; }
  .brand-row { justify-content: flex-start; padding-inline: 5px; }
  .nav-list { overflow-x: hidden; overflow-y: auto; }
  .nav-item {
    min-height: 48px;
    grid-template-columns: 32px minmax(0, 1fr);
    justify-items: stretch;
    gap: 9px;
    padding: 7px 9px;
  }
  .nav-item:hover::after {
    content: "";
    position: absolute;
    inset: 10px auto 10px -1px;
    width: 2px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .nav-item.active::after { background: var(--accent); box-shadow: 0 0 12px rgba(240,93,115,.55); }
  .nav-copy strong { overflow: visible; text-overflow: clip; }
}

.chat-panel {
  grid-template-rows: auto auto auto minmax(160px, 1fr) minmax(132px, auto) !important;
}
.chat-composer {
  position: relative;
  z-index: 6;
  min-height: 132px;
  display: block !important;
  visibility: visible !important;
  overflow: visible;
  border-top: 1px solid rgba(240,93,115,.18);
  background: #0c1014;
  box-shadow: 0 -12px 30px rgba(0,0,0,.2);
}
.chat-composer textarea { display: block; width: 100%; min-height: 68px; max-height: 160px; }

@media (min-width: 761px) and (max-width: 1080px) {
  .nav-copy small { display: none; }
}

@media (max-width: 760px) {
  .chat-panel { grid-template-rows: auto auto auto minmax(220px, 1fr) minmax(132px, auto) !important; }
}

/* Update 14.3 — aligned navigation and compact chat composition */
@media (min-width: 761px) {
  .nav-item::before {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    grid-column: 1;
    grid-row: 1;
    transform: none !important;
  }
  .nav-copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
}

/* Update 18.7 — synchronized Overview and login orbital satellites. */
@keyframes motion-satellite-orbit {
  from { transform: rotate(var(--orbit-start)); }
  to { transform: rotate(calc(var(--orbit-start) + 1turn)); }
}

.hero-node,
.showcase-node {
  --orbit-start: 0deg;
  position: absolute;
  z-index: 3;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: rotate(var(--orbit-start));
  animation: motion-satellite-orbit var(--orbit-duration, 12s) linear infinite;
  pointer-events: none;
}
.hero-node::after,
.showcase-node::after {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border: 2px solid #101317;
  border-radius: 50%;
  background: var(--orbit-color, var(--accent));
  box-shadow: 0 0 0 5px var(--orbit-halo, rgba(240,93,115,.09)), 0 0 12px var(--orbit-glow, rgba(240,93,115,.42));
}

.hero-node.node-a { --orbit-start: 0deg; --orbit-duration: 11s; inset: 12%; }
.hero-node.node-b { --orbit-start: 122deg; --orbit-duration: 15s; --orbit-color: var(--cyan); --orbit-halo: rgba(155,114,255,.09); --orbit-glow: rgba(155,114,255,.45); inset: 1%; }
.hero-node.node-c { --orbit-start: 238deg; --orbit-duration: 11s; inset: 12%; }

.showcase-node.orbit-a { --orbit-start: 0deg; --orbit-duration: 14s; inset: 4%; }
.showcase-node.orbit-b { --orbit-start: 122deg; --orbit-duration: 19s; --orbit-color: var(--cyan); --orbit-halo: rgba(155,114,255,.09); --orbit-glow: rgba(155,114,255,.45); inset: 4%; }
.showcase-node.orbit-c { --orbit-start: 238deg; --orbit-duration: 14s; inset: 17%; }

@media (max-width: 760px) {
  .hero-node::after, .showcase-node::after { top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-node, .showcase-node { animation: none !important; }
}

progress.deployment-progress { width: 100%; display: block; border: 0; appearance: none; }
progress.deployment-progress::-webkit-progress-bar { border-radius: inherit; background: rgba(255,255,255,.05); }
progress.deployment-progress::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--cyan)); transition: width .35s ease; }
progress.deployment-progress::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--cyan)); transition: width .35s ease; }

/* Update 18.6 — user-controlled motion, richer feedback, and collapsible workspace identity. */
@keyframes motion-ambient-drift {
  0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1); opacity: .22; }
  50% { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: .38; }
}
@keyframes motion-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
@keyframes motion-number-pop {
  0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); }
  70% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.015); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes motion-row-in {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-refresh-turn {
  to { transform: rotate(180deg); }
}

.motion-toggle {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #9ba4ac;
  background: rgba(255,255,255,.022);
  font: inherit;
  font-size: .64rem;
  font-weight: 720;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.motion-toggle > span:first-child { color: var(--accent); font-size: .9rem; line-height: 1; }
.motion-toggle:hover, .motion-toggle:focus-visible { color: #f0ebe3; border-color: rgba(240,93,115,.28); background: rgba(240,93,115,.055); outline: none; }
.motion-toggle:active { transform: scale(.97); }
.motion-toggle[aria-pressed="false"] { color: #747d85; }
.login-motion-toggle { position: fixed; z-index: 5; top: 22px; right: 24px; }

.command-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45%;
  background: radial-gradient(circle, rgba(240,93,115,.14), transparent 36%), radial-gradient(circle at 65% 40%, rgba(155,114,255,.075), transparent 28%);
  pointer-events: none;
  animation: motion-ambient-drift 12s ease-in-out infinite;
}
.hero-visual { animation: motion-float 6s ease-in-out infinite; }
.view.active.view-entering .metric-card strong { animation: motion-number-pop .55s cubic-bezier(.22, 1, .36, 1) both; }
.view.active.view-entering :is(.channel-card, .workspace-profile-card, .access-user-card, .change-record-card, .release-catalog-card, .backup-card, .health-issue, .activity-item, .log-entry) {
  animation: motion-row-in .42s cubic-bezier(.22, 1, .36, 1) both;
}
.view.active.view-entering :is(.channel-card, .workspace-profile-card, .access-user-card, .change-record-card, .release-catalog-card, .backup-card, .health-issue, .activity-item, .log-entry):nth-child(2) { animation-delay: .05s; }
.view.active.view-entering :is(.channel-card, .workspace-profile-card, .access-user-card, .change-record-card, .release-catalog-card, .backup-card, .health-issue, .activity-item, .log-entry):nth-child(3) { animation-delay: .10s; }
.view.active.view-entering :is(.channel-card, .workspace-profile-card, .access-user-card, .change-record-card, .release-catalog-card, .backup-card, .health-issue, .activity-item, .log-entry):nth-child(4) { animation-delay: .15s; }
.chat-header.chat-switching > * { animation: motion-rise-in .38s cubic-bezier(.22, 1, .36, 1) both; }
.chat-messages.messages-entering > .message { animation: motion-rise-in .4s cubic-bezier(.22, 1, .36, 1) both; }
.chat-messages.messages-entering > .message:nth-last-child(2) { animation-delay: .05s; }
.chat-messages.messages-entering > .message:last-child { animation-delay: .10s; }
#refresh-chats:hover, #refresh-release-catalog:hover, #refresh-update-status:hover, #refresh-backups:hover, #refresh-conversation-info:hover { animation: motion-refresh-turn .45s ease; }
.panel-header { position: relative; overflow: hidden; }
.panel-header::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; opacity: .28; background: linear-gradient(90deg, var(--accent), rgba(155,114,255,.65), transparent 70%); transform: scaleX(.34); transition: opacity .2s ease, transform .28s ease; transform-origin: left; }
.panel:hover > .panel-header::after { opacity: .7; transform: scaleX(1.02); }

.workspace-identity-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workspace-identity-heading .workspace-agent-badge { margin-bottom: 0; }
.workspace-identity-toggle {
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid rgba(240,93,115,.16);
  border-radius: 999px;
  color: #b6a28e;
  background: rgba(240,93,115,.045);
  font: inherit;
  font-size: .62rem;
  font-weight: 760;
  cursor: pointer;
}
.workspace-identity-toggle:hover, .workspace-identity-toggle:focus-visible { color: #f1b97d; border-color: rgba(240,93,115,.34); outline: none; }
.workspace-identity-panel { max-height: 220px; transition: max-height .32s cubic-bezier(.22, 1, .36, 1), padding .28s ease, border-color .2s ease, background-color .2s ease; }
.workspace-identity-panel.is-collapsed { max-height: 52px; grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 10px; border-color: rgba(220,229,238,.085); background: rgba(255,255,255,.015); overflow: hidden; }
.workspace-identity-panel.is-collapsed .workspace-identity-copy > strong,
.workspace-identity-panel.is-collapsed .workspace-identity-copy > p,
.workspace-identity-panel.is-collapsed .starter-prompt-list { display: none; }

.motion-disabled *, .motion-disabled *::before, .motion-disabled *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
}
.motion-disabled :is(.metric-card, .channel-card, .starter-prompt, .nav-item, .button, .icon-button, .file-button, .chat-channel-tools button):hover,
.motion-disabled :is(.button, .icon-button, .file-button, .chat-channel-tools button):active { transform: none !important; }

@media (max-width: 900px) {
  #motion-toggle > span:last-child { display: none; }
  #motion-toggle { width: 34px; padding-inline: 0; }
}

@media (max-width: 760px) {
  .login-motion-toggle { top: max(12px, env(safe-area-inset-top)); right: 12px; }
  .workspace-identity-panel { max-height: 190px; }
  .workspace-identity-panel.is-collapsed { max-height: 50px; }
}

.chat-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}
.chat-composer {
  min-height: 0;
  align-self: end;
  overflow: hidden;
  padding: 12px 14px;
}
.chat-composer textarea {
  height: 68px;
  min-height: 58px;
  max-height: 120px;
}
.chat-composer .composer-footer { margin-top: 8px; }

@media (max-width: 760px) {
  .chat-panel { grid-template-rows: auto auto auto minmax(240px, 1fr) auto !important; }
  .chat-composer { min-height: 0; }
}

/* Update 15 — release operations workspace */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.update-command-deck {
  position: relative;
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(430px, .9fr);
  align-items: center;
  gap: 28px;
  margin-bottom: 16px;
  padding: 25px 28px;
  overflow: hidden;
  border: 1px solid rgba(240,93,115,.13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 15%, rgba(240,93,115,.1), transparent 24rem),
    linear-gradient(120deg, #171a1d, #101519 62%, #0d1315);
  box-shadow: 0 20px 52px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025);
}
.update-command-deck::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -100px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(155,114,255,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(155,114,255,.018), 0 0 0 86px rgba(240,93,115,.012);
  pointer-events: none;
}
.update-command-copy { position: relative; z-index: 1; }
.update-command-copy h2 { margin: 5px 0 8px; color: #f6f1e9; font-size: clamp(1.65rem, 2.5vw, 2.25rem); letter-spacing: -.045em; }
.update-command-copy > p:last-child { max-width: 640px; margin: 0; color: #89929a; line-height: 1.5; }
.update-command-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.update-command-metrics article {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid rgba(220,229,238,.08);
  border-radius: 13px;
  background: rgba(4,8,10,.28);
}
.update-command-metrics span { color: #707b83; font-size: .64rem; font-weight: 740; letter-spacing: .06em; text-transform: uppercase; }
.update-command-metrics strong { color: #eeeae3; font-size: 1.18rem; letter-spacing: -.03em; }

.updates-grid { grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr); gap: 16px; }
.release-library-panel, .deployment-monitor-panel { overflow: hidden; }
.release-library-panel .panel-header p, .update-approval-panel .panel-header p { margin: 5px 0 0; }
.deployment-monitor-panel { position: sticky; top: 16px; }
.release-catalog-section { gap: 11px; padding: 15px 18px 18px; }
.release-catalog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 9px; }
.release-catalog-toolbar label { min-width: 0; }
.release-catalog-toolbar input, .release-catalog-toolbar select { min-height: 40px; }
.release-catalog-list {
  max-height: 510px;
  gap: 7px;
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.release-catalog-card {
  min-height: 65px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 11px;
}
.release-catalog-card.current { border-color: rgba(155,114,255,.19); background: rgba(155,114,255,.035); }
.release-catalog-card.newer { border-color: rgba(240,93,115,.17); background: rgba(240,93,115,.025); }
.release-version-mark { min-width: 0; display: grid !important; gap: 3px !important; padding: 8px; border-right: 1px solid rgba(220,229,238,.07); }
.release-version-mark strong { color: #e9e4dc; font-size: .79rem; white-space: nowrap; }
.release-version-mark span { color: #69747c !important; font-size: .58rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.release-catalog-card.current .release-version-mark strong, .release-catalog-card.current .release-version-mark span { color: var(--cyan) !important; }
.release-catalog-card.newer .release-version-mark strong, .release-catalog-card.newer .release-version-mark span { color: var(--accent) !important; }
.release-catalog-copy { min-width: 0; display: grid !important; gap: 4px !important; }
.release-catalog-copy strong { overflow: hidden; color: #ddd9d2; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.release-catalog-copy span { display: flex; align-items: center; gap: 7px; color: #6f7880 !important; font-size: .64rem; }
.release-catalog-copy i { width: 3px; height: 3px; border-radius: 50%; background: #485159; }
.release-preview-button { min-height: 34px; padding-inline: 11px; font-size: .68rem; }

.update-upload-disclosure { border-top: 1px solid rgba(220,229,238,.07); background: rgba(4,7,9,.13); }
.update-upload-disclosure > summary { padding: 14px 18px; cursor: pointer; list-style: none; }
.update-upload-disclosure > summary::-webkit-details-marker { display: none; }
.update-upload-disclosure > summary span { position: relative; display: grid; gap: 3px; padding-left: 28px; }
.update-upload-disclosure > summary span::before { content: "+"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid rgba(240,93,115,.2); border-radius: 6px; color: var(--accent); }
.update-upload-disclosure[open] > summary span::before { content: "−"; }
.update-upload-disclosure > summary strong { color: #d7d4cd; font-size: .76rem; }
.update-upload-disclosure > summary small { color: #67717a; font-size: .65rem; }
.compact-warning { margin: 0 18px 13px; }
.update-upload-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 0 18px 18px; }
.update-upload-form .button { min-height: 42px; }

.deployment-monitor-panel .update-status-card { min-height: 295px; padding: 20px; }
.deployment-monitor-panel .update-status-card > strong { color: #eee9e1; font-size: 1rem; line-height: 1.4; }
.deployment-monitor-panel .deployment-progress { height: 7px; }
.deployment-monitor-panel .deployment-steps { display: grid; grid-template-columns: 1fr; gap: 8px; }
.update-approval-panel, .update-recovery-panel { margin-top: 16px; }
.count-badge { min-width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(240,93,115,.15); border-radius: 9px; color: var(--accent); background: rgba(240,93,115,.045); font-size: .7rem; font-weight: 800; }
.update-preview-list { grid-template-columns: repeat(auto-fit, minmax(min(410px, 100%), 1fr)); padding: 14px 18px 18px; }
.update-preview-card { min-width: 0; }

.backup-list { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 8px; padding: 14px 18px 18px; }
.backup-card { min-height: 70px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px; }
.backup-version-mark { min-width: 58px; padding: 8px; border: 1px solid rgba(155,114,255,.12); border-radius: 9px; color: var(--cyan) !important; background: rgba(155,114,255,.035); font-size: .7rem !important; font-weight: 800; text-align: center; }
.backup-card > div { gap: 3px; }
.backup-card > div strong { font-size: .75rem; }
.backup-card code { overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1120px) {
  .update-command-deck { grid-template-columns: 1fr; }
  .updates-grid { grid-template-columns: 1fr; }
  .deployment-monitor-panel { position: static; }
}

@media (max-width: 700px) {
  .update-command-deck { padding: 21px; }
  .update-command-metrics { grid-template-columns: 1fr; }
  .update-command-metrics article { min-height: 68px; }
  .release-catalog-toolbar { grid-template-columns: 1fr; }
  .release-catalog-card { grid-template-columns: 65px minmax(0, 1fr); }
  .release-preview-button { grid-column: 1 / -1; }
  .update-upload-form { grid-template-columns: 1fr; }
  .backup-card { grid-template-columns: auto minmax(0, 1fr); }
  .backup-card .button { grid-column: 1 / -1; }
}

/* Update 15.1 — shared Discord and dashboard attachments */
.message { white-space: normal; }
.message-content { white-space: pre-wrap; }
.message-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 8px;
  margin-top: 11px;
}
.chat-attachment-card {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(220,229,238,.1);
  border-radius: 11px;
  color: #dcd9d2;
  background: rgba(5,8,10,.28);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.chat-attachment-card:hover {
  border-color: rgba(240,93,115,.28);
  color: #f4eee5;
  background: rgba(240,93,115,.055);
  transform: translateY(-1px);
}
.attachment-preview { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.035); }
.attachment-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.attachment-file-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(155,114,255,.13); border-radius: 8px; color: var(--cyan); background: rgba(155,114,255,.045); font-size: .52rem; font-weight: 850; letter-spacing: .05em; }
.attachment-copy { min-width: 0; display: grid; gap: 3px; }
.attachment-copy strong { overflow: hidden; color: inherit; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.attachment-copy small { overflow: hidden; color: #707a82; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.attachment-action { color: var(--accent); font-size: .6rem; font-weight: 760; }
.chat-attachment-card.legacy { grid-template-columns: auto minmax(0, 1fr); color: #9ba3aa; cursor: default; }
.chat-attachment-card.legacy:hover { border-color: rgba(220,229,238,.1); background: rgba(5,8,10,.28); transform: none; }
.chat-attachment-card.legacy > span:last-child { min-width: 0; display: grid; gap: 3px; }
.chat-attachment-card.legacy strong, .chat-attachment-card.legacy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-card.legacy strong { font-size: .72rem; }
.chat-attachment-card.legacy small { color: #69737b; font-size: .59rem; }

@media (max-width: 520px) {
  .message-attachments { grid-template-columns: 1fr; }
  .attachment-action { display: none; }
}

/* Update 16 — dashboard-managed Discord role authorization */
.access-side-stack { min-width: 0; display: grid; gap: 16px; }
.access-role-list { padding-top: 4px; }
.access-role-card { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.access-role-card .card-actions { justify-content: flex-start; }

/* Update 16.1 — unified phone and tablet layout */
.nav-backdrop { display: none; }
html.navigation-open, html.navigation-open body { overflow: hidden; overscroll-behavior: none; }

@media (max-width: 1080px) and (min-width: 761px) {
  .main-content { padding-inline: 20px; }
  .panel-header { padding-inline: 18px; }
  .command-hero, .workspace-command-bar, .update-command-deck { padding: 24px; }
  .access-user-card { grid-template-columns: minmax(0, 1fr) auto; }
  .access-user-meta { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  html, body { width: 100%; min-width: 0; overflow-x: clip; }
  body { background-attachment: scroll; }
  .app-shell.nav-open::after { display: none; }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(3,5,7,.72);
    backdrop-filter: blur(4px);
  }
  .app-shell.nav-open .nav-backdrop { display: block; }
  .sidebar {
    width: min(310px, 88vw);
    padding: max(14px, env(safe-area-inset-top)) 13px max(14px, env(safe-area-inset-bottom));
    overflow: hidden;
  }
  /* Update 16.2 — reset legacy compact-rail rules inside the phone drawer. */
  .sidebar .nav-list {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sidebar .nav-item {
    position: relative;
    min-width: 0;
    min-height: 54px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    text-align: left;
  }
  .sidebar .nav-item::before {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 1;
    transform: none;
  }
  .sidebar .nav-copy {
    min-width: 0;
    display: grid;
    grid-column: 2;
    grid-row: 1;
    gap: 2px;
    padding: 0;
    text-align: left;
  }
  .sidebar .nav-copy strong, .sidebar .nav-copy small { display: block; }
  .sidebar-footer { flex: 0 0 auto; margin-top: 10px; }
  .sidebar-footer .user-chip > div { display: block; }
  .sidebar-footer .button { display: inline-flex; }
  .main-content {
    min-width: 0;
    padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    min-width: 0;
    min-height: 60px;
    gap: 10px;
    margin: calc(max(14px, env(safe-area-inset-top)) * -1) -6px 14px;
    padding: max(12px, env(safe-area-inset-top)) 6px 10px;
    background: linear-gradient(180deg, rgba(8,10,13,.98), rgba(8,10,13,.88));
    backdrop-filter: blur(18px);
  }
  .topbar-heading, .topbar-heading > div { min-width: 0; }
  .topbar h1 { overflow: hidden; font-size: clamp(1.35rem, 6vw, 1.75rem); text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { min-width: 0; }
  .topbar-actions .pill { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-menu-button, .sidebar-close-button, .icon-button { min-width: 44px; min-height: 44px; }

  .command-hero, .workspace-command-bar, .update-command-deck { min-height: 0; padding: 21px 18px; border-radius: 15px; }
  .command-hero h2, .update-command-copy h2 { font-size: clamp(1.5rem, 7.5vw, 2rem); }
  .command-hero p, .workspace-command-bar .muted, .update-command-copy > p:last-child { font-size: .8rem; line-height: 1.55; }
  .metrics-grid { gap: 9px; }
  .metric-card { min-width: 0; min-height: 100px; padding: 15px 16px; }
  .metric-card strong { overflow-wrap: anywhere; font-size: 1.3rem; }
  .metric-detail { overflow-wrap: anywhere; }
  .panel, .two-column-grid, .channel-card-grid, .workspace-management-grid, .updates-grid, .access-layout { min-width: 0; }
  .panel-header { min-height: 0; padding: 15px; }
  .panel-header > div { min-width: 0; }
  .panel-header p { overflow-wrap: anywhere; }
  .details-list { padding: 4px 15px 13px; }
  .details-list div, .conversation-details div { grid-template-columns: minmax(92px, .38fr) minmax(0, 1fr); gap: 9px; }
  .compact-log-list, .log-list { padding: 6px 14px 15px; }
  .log-entry { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  .section-toolbar { min-height: 0; align-items: stretch; flex-direction: column; padding: 14px; }
  .section-toolbar > .button, .section-toolbar > div + .button { width: 100%; }
  .filter-row select, .filter-row input, .audit-filters input, .audit-filters select, .audit-filters button { width: 100%; min-width: 0; }
  .button, .file-button { min-height: 44px; }

  .channel-card-grid { grid-template-columns: 1fr; gap: 10px; }
  .channel-card { min-width: 0; padding: 15px; }
  .channel-card-header { min-width: 0; }
  .channel-card-header > div { min-width: 0; }
  .channel-card-header p { overflow-wrap: anywhere; }
  .channel-card dl div { grid-template-columns: 94px minmax(0, 1fr); }
  .card-actions { flex-wrap: wrap; }
  .card-actions .button { flex: 1 1 130px; }

  .health-history { padding-inline: 12px; }
  .health-history-row { min-width: 0; padding-inline: 4px; }
  .health-issue { grid-template-columns: 1fr; }

  .workspace-command-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .workspace-command-actions .button { width: 100%; }
  .workspace-command-actions .button.primary { grid-column: 1 / -1; grid-row: 1; }
  .workspace-catalog-panel, .workspace-dm-panel, .workspace-root-panel { padding: 12px; }
  .workspace-catalog-panel .panel-header, .workspace-dm-panel .panel-header, .workspace-root-panel .panel-header { padding-inline: 4px; }
  .workspace-profile-card .card-actions { justify-content: stretch; }
  .workspace-path-strip code, .workspace-card-facts dd { white-space: normal; overflow-wrap: anywhere; }
  .workspace-root-panel #workspace-root-list { grid-template-columns: 1fr; }

  .access-user-list { padding: 10px 12px 14px; }
  .access-catalog-tools { grid-template-columns: 1fr; padding: 0 12px 12px; }
  .access-catalog-tools input { grid-column: auto; }
  .access-user-card { min-width: 0; padding: 12px; }
  .access-user-identity strong, .access-user-identity span { white-space: normal; overflow-wrap: anywhere; }
  .role-guide { padding: 13px 14px 5px; }
  .warning-box { margin: 14px; }

  .update-command-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .update-command-metrics article { min-width: 0; padding: 11px; }
  .release-catalog-section { padding: 12px; }
  .release-catalog-list { max-height: none; padding-right: 0; }
  .release-catalog-card { grid-template-columns: 64px minmax(0, 1fr); }
  .release-preview-button { grid-column: 1 / -1; width: 100%; }
  .update-preview-list, .backup-list { grid-template-columns: 1fr; padding: 11px 12px 14px; }
  .update-preview-header { flex-direction: column; }
  .preview-details { grid-template-columns: 1fr; }
  .preview-details .full-detail { grid-column: auto; }
  .preview-files pre { max-width: 100%; }
  .deployment-monitor-panel .update-status-card { min-height: 0; padding: 16px; }

  .chat-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .chat-list-panel { height: auto; max-height: 220px; }
  .chat-channel-list { max-height: 160px; overscroll-behavior: contain; }
  /* Update 16.3 — use intrinsic mobile flow so chat sections cannot overlap. */
  .chat-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .chat-header {
    flex: 0 0 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 13px;
  }
  .chat-header h2, .chat-header .path-label { white-space: normal; overflow-wrap: anywhere; }
  .chat-actions { position: static; height: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; width: 100%; }
  .chat-actions .button { width: 100%; padding-inline: 10px; }
  .workspace-identity-panel { position: relative; flex: 0 0 auto; margin: 10px 12px 0; padding: 11px 12px; }
  .starter-prompt { max-width: 82vw; min-height: 40px; }
  .live-job-panel { position: relative; flex: 0 0 auto; margin: 10px 12px 0; padding: 12px; }
  .activity-item { grid-template-columns: 24px minmax(0, 1fr); }
  .activity-time { grid-column: 2; }
  .chat-messages { flex: 0 0 auto; height: min(62dvh, 620px); min-height: 360px; padding: 12px; gap: 10px; scrollbar-gutter: auto; }
  .message { max-width: 96%; padding: 11px 12px; }
  .chat-composer { flex: 0 0 auto; padding: 10px 11px max(10px, env(safe-area-inset-bottom)); }
  .chat-composer textarea { height: 62px; min-height: 54px; }
  .composer-footer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .composer-footer .muted { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .toast-container { inset: auto 10px max(10px, env(safe-area-inset-bottom)); }
  .toast { width: 100%; min-width: 0; max-width: none; }
}

@media (max-width: 640px) {
  dialog.modal {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    overflow-y: auto;
    border-inline: 0;
    border-radius: 0;
  }
  dialog.modal[open] { display: flex; flex-direction: column; }
  dialog.modal > form { min-height: 100%; display: flex; flex-direction: column; }
  .modal-header { position: sticky; top: 0; z-index: 6; min-height: 66px; padding: max(12px, env(safe-area-inset-top)) 14px 12px; background: #12171c; }
  .modal-header > div { min-width: 0; }
  .modal-header h2 { overflow-wrap: anywhere; }
  .form-grid { grid-template-columns: 1fr; gap: 13px; padding: 14px; }
  .full-width { grid-column: auto; }
  .stack-form { padding-inline: 14px; }
  .channel-permission-editor { padding-inline: 14px; }
  .access-channel-permissions { max-height: none; }
  .conversation-dialog-body, .change-review-body { flex: 1 1 auto; max-height: none; padding: 14px; }
  .conversation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    flex-wrap: wrap;
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
    background: #0c1014;
  }
  .modal-actions .button, .modal-actions a.button { flex: 1 1 135px; }
}

/* Update 17.2 — keep optional chat sections in fixed desktop grid rows. */
.chat-panel {
  grid-template-areas:
    "header"
    "workspace"
    "live"
    "messages"
    "composer";
}
.chat-header { grid-area: header; }
.workspace-identity-panel { grid-area: workspace; }
.live-job-panel { grid-area: live; }
.chat-messages { grid-area: messages; }
.chat-composer { grid-area: composer; }
/* Update 17.1 — preserve complete long messages inside the chat scroller. */
.chat-messages > .message {
  flex: 0 0 auto;
  min-height: min-content;
}
.message-content {
  overflow: visible;
}

@media (max-width: 520px) {
  .topbar .eyebrow { font-size: .55rem; }
  .metrics-grid, .health-metrics { grid-template-columns: 1fr; }
  .metric-card { min-height: 88px; }
  .panel-header.wrap { align-items: stretch; flex-direction: column; }
  .panel-header.wrap > .button { width: 100%; }
  .details-list div, .conversation-details div, .channel-card dl div { grid-template-columns: 1fr; gap: 3px; }
  .log-entry { grid-template-columns: 1fr; gap: 4px; }
  .channel-card-header { align-items: flex-start; flex-direction: column; }
  .card-pill-stack { justify-items: start; }
  .workspace-command-actions { grid-template-columns: 1fr; }
  .workspace-command-actions .button.primary { grid-column: auto; }
  .update-command-metrics { grid-template-columns: 1fr; }
  .update-command-metrics article { min-height: 62px; }
  .release-catalog-card { grid-template-columns: 1fr; }
  .release-version-mark { border-right: 0; border-bottom: 1px solid rgba(220,229,238,.07); }
  .release-preview-button { grid-column: auto; }
  .backup-card { grid-template-columns: 1fr; }
  .backup-version-mark { justify-self: start; }
  .backup-card .button { grid-column: auto; width: 100%; }
  .chat-actions { grid-template-columns: 1fr 1fr; }
  .chat-actions .button:first-child { grid-column: 1 / -1; }
  .chat-panel { min-height: 0; }
  .conversation-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .main-content { padding-inline: 8px; }
  .topbar-actions .pill { max-width: 82px; padding-inline: 7px; }
  .command-hero, .workspace-command-bar, .update-command-deck { padding-inline: 15px; }
  .composer-footer { grid-template-columns: 1fr 1fr; }
  .composer-footer .muted { grid-column: 1 / -1; grid-row: 1; }
  .composer-footer .file-button, .composer-footer .button { width: 100%; }
}

/* Update 19 — supplied Mini Dark Control artwork and release operations. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 3, 9, .76), rgba(8, 6, 13, .94) 72%),
    url("/assets/mini-dark-control-wide.jpg?v=2.39.4") center top / cover no-repeat;
  opacity: .58;
}
.login-screen {
  background:
    radial-gradient(circle at 72% 48%, rgba(155,114,255,.10), transparent 34%),
    linear-gradient(90deg, rgba(5,3,8,.55), rgba(5,3,8,.18) 48%, rgba(5,3,8,.66));
}
.login-showcase { position: relative; isolation: isolate; }
.login-showcase::before {
  content: "";
  position: absolute;
  inset: -48px;
  z-index: -1;
  background: url("/assets/mini-dark-control-square.jpg?v=2.39.4") center / contain no-repeat;
  opacity: .16;
  filter: saturate(1.15);
  mask-image: radial-gradient(circle, #000 30%, transparent 72%);
}
.update-operations-panel { margin-bottom: 18px; }
.update-operations-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.update-operations-form > label { display: grid; gap: 7px; color: var(--muted); font-size: .8rem; }
.update-operations-form input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; color: var(--text); background: rgba(5,3,9,.5); }
.update-operations-form .toggle-row { display: flex; align-items: center; align-self: end; min-height: 42px; }
.update-operations-form .toggle-row input { width: 20px; min-height: 20px; }
.maintenance-days { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.maintenance-days legend { padding: 0 6px; color: var(--muted); font-size: .78rem; }
.maintenance-days label { display: flex; align-items: center; gap: 6px; }
.maintenance-days input { width: 17px; min-height: 17px; }
.full-width { grid-column: 1 / -1; }
.verification-history-block { padding: 20px 22px; }
.verification-history-block h3 { margin: 0 0 12px; }
.verification-history-list { display: grid; gap: 8px; }
.verification-history-list article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.verification-history-list article strong, .verification-history-list article span { display: block; }
.verification-history-list article div > span { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.release-catalog-actions, .backup-actions { display: flex; align-items: center; gap: 8px; }
.release-pin-button[aria-pressed="true"], [data-pin-backup][aria-pressed="true"] { color: #ff8298; border-color: rgba(240,93,115,.3); }

@media (max-width: 900px) {
  .update-operations-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body::before { background-position: 58% top; opacity: .42; }
  .update-operations-form { grid-template-columns: 1fr; padding: 16px; }
  .maintenance-days, .full-width { grid-column: 1; }
  .backup-actions { width: 100%; justify-content: flex-end; }
}

/* Update 18.3 — safe Markdown conversation rendering. */
.message-content.markdown-body { white-space: normal; line-height: 1.62; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p { margin: 0 0 .85em; }
.markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5 {
  margin: 1.15em 0 .5em;
  color: #f2eee8;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.markdown-body h2 { font-size: 1.16rem; }
.markdown-body h3 { font-size: 1.02rem; }
.markdown-body h4, .markdown-body h5 { font-size: .92rem; }
.markdown-body strong { color: #f4f0e9; font-weight: 780; }
.markdown-body em { color: #d6d0c7; }
.markdown-body del { color: #89939c; }
.markdown-body a { color: #aa8cff; text-decoration: underline; text-decoration-color: rgba(114,214,193,.4); text-underline-offset: 3px; }
.markdown-body a:hover { color: #9ce8d7; }
.markdown-body ul, .markdown-body ol { margin: .45em 0 .9em; padding-left: 1.45em; }
.markdown-body li { margin: .28em 0; padding-left: .15em; }
.markdown-body li::marker { color: #ef6178; font-weight: 750; }
.markdown-task { display: inline-grid; width: 1.1em; color: #aa8cff; font-weight: 800; }
.markdown-body blockquote { margin: .8em 0; padding: .7em .9em; border-left: 3px solid rgba(240,93,115,.58); border-radius: 0 8px 8px 0; color: #c5ccd1; background: rgba(240,93,115,.055); }
.markdown-body hr { height: 1px; margin: 1.1em 0; border: 0; background: linear-gradient(90deg, rgba(240,93,115,.35), rgba(220,229,238,.06)); }
.markdown-body code { padding: .12em .36em; border: 1px solid rgba(220,229,238,.1); border-radius: 5px; color: #f2c18f; background: rgba(5,8,10,.45); font: .88em/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.markdown-body pre { max-width: 100%; margin: .8em 0; overflow: auto; border: 1px solid rgba(220,229,238,.1); border-radius: 10px; background: #0b0f13; scrollbar-gutter: stable; }
.markdown-body pre code { display: block; min-width: max-content; padding: 12px 14px; border: 0; color: #dce3e8; background: transparent; white-space: pre; overflow-wrap: normal; }
.markdown-table-wrap { max-width: 100%; margin: .8em 0; overflow-x: auto; border: 1px solid rgba(220,229,238,.1); border-radius: 10px; }
.markdown-body table { width: 100%; border-collapse: collapse; font-size: .88em; }
.markdown-body th, .markdown-body td { padding: 8px 10px; border-bottom: 1px solid rgba(220,229,238,.08); text-align: left; vertical-align: top; }
.markdown-body th { color: #f0c08d; background: rgba(240,93,115,.06); font-size: .78em; letter-spacing: .035em; text-transform: uppercase; }
.markdown-body tr:last-child td { border-bottom: 0; }

@media (max-width: 520px) {
  .message-content.markdown-body { font-size: .92rem; }
  .markdown-body pre code { padding: 10px 11px; }
  .markdown-body th, .markdown-body td { min-width: 110px; padding: 7px 8px; }
}

@media (max-width: 760px) and (max-height: 620px) {
  .sidebar-system-card { display: none; }
  .brand-row { min-height: 44px; padding-bottom: 8px; }
  .nav-section-label { margin-top: 7px; }
  .nav-item { min-height: 40px; }
}

@media (hover: none) and (pointer: coarse) {
  .button, .icon-button, .file-button, .nav-item, input, select { min-height: 44px; }
  .button:hover:not(:disabled), .icon-button:hover:not(:disabled), .file-button:hover:not(:disabled),
  .metric-card:hover, .channel-card:hover, .chat-attachment-card:hover { transform: none; }
}

/* Update 18 — pinned chats and live channel status. */
.chat-channel-row {
  position: relative;
  min-width: 0;
}
.chat-channel-row .chat-channel-button {
  padding-right: 44px;
}
.chat-channel-row .chat-channel-button.active::after { display: none; }
.chat-channel-copy { min-width: 0; margin: 0 !important; color: inherit !important; }
.chat-channel-status {
  width: max-content;
  max-width: 100%;
  min-height: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: #7f8992;
  font-size: .64rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.chat-channel-status i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #69737c; }
.chat-channel-status.running { color: #a985ff; }
.chat-channel-status.running i { background: #9b72ff; box-shadow: 0 0 9px rgba(102,210,185,.7); }
.chat-channel-status.queued, .chat-channel-status.waiting { color: #e7677d; }
.chat-channel-status.queued i, .chat-channel-status.waiting i { background: #f05d73; box-shadow: 0 0 8px rgba(240,93,115,.5); }
.chat-channel-status.success { color: #73cf9f; }
.chat-channel-status.success i { background: #73cf9f; }
.chat-channel-status.error { color: #cf7c88; }
.chat-channel-status.error i { background: #cf7c88; }
.chat-pin-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 7px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #727c85;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}
.chat-pin-button:hover, .chat-pin-button:focus-visible { color: #ef6178; border-color: rgba(240,93,115,.18); background: rgba(240,93,115,.07); outline: none; }
.chat-pin-button.active { color: #ef6178; }
.chat-list-group-label:first-child { margin-top: 12px; }

@media (hover: none) and (pointer: coarse) {
  .chat-pin-button { width: 40px; height: 40px; right: 4px; }
  .chat-channel-row .chat-channel-button { padding-right: 46px; }
}

/* Update 18.1 — unread tracking, activity filters, ordered pins, and mute controls. */
.chat-list-panel { display: flex; flex-direction: column; overflow: hidden; }
.chat-list-panel > .panel-header { flex: 0 0 auto; }
.chat-list-filters {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  border-bottom: 1px solid rgba(220,229,238,.07);
}
.chat-list-filters button {
  min-width: 0;
  min-height: 30px;
  padding: 5px 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #7f8992;
  background: transparent;
  font-size: .65rem;
  font-weight: 750;
  cursor: pointer;
}
.chat-list-filters button:hover, .chat-list-filters button.active { color: #ef6178; border-color: rgba(240,93,115,.16); background: rgba(240,93,115,.065); }
.chat-list-panel .chat-channel-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.chat-channel-row .chat-channel-button { min-height: 72px; padding-right: 72px; }
.chat-channel-row.has-attention .chat-channel-button { border-color: rgba(102,210,185,.2); background: linear-gradient(100deg, rgba(102,210,185,.055), rgba(240,93,115,.025)); }
.chat-channel-copy > strong { display: flex; align-items: center; gap: 6px; }
.chat-unread-count {
  min-width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 99px;
  color: #12171c;
  background: #f05d73;
  font-size: .59rem;
  line-height: 1;
}
.chat-channel-button .chat-channel-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; overflow: hidden; }
.chat-channel-button .chat-channel-meta > span { display: inline-flex; margin: 0; }
.chat-channel-button .chat-channel-status { display: inline-flex; margin: 0; }
.chat-last-activity { color: #626c75 !important; font-size: .62rem !important; }
.chat-task-summary { display: block; margin-top: 5px; overflow: hidden; color: #8e989f; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel-tools {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 6px;
  width: 60px;
  display: grid;
  grid-template-columns: repeat(2, 28px);
  gap: 3px;
  transform: translateY(-50%);
}
.chat-channel-tools button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #77818a;
  background: rgba(255,255,255,.015);
  cursor: pointer;
}
.chat-channel-tools button:hover:not(:disabled), .chat-channel-tools button:focus-visible, .chat-channel-tools button.active { color: #ef6178; border-color: rgba(240,93,115,.18); background: rgba(240,93,115,.07); outline: none; }
.chat-channel-tools button:disabled { opacity: .22; cursor: default; }

@media (max-width: 760px) {
  .chat-list-panel { max-height: 300px; }
  .chat-list-panel .chat-channel-list { flex: 0 1 190px; max-height: 190px; }
  .chat-list-filters { overflow-x: auto; }
  .chat-channel-row .chat-channel-button { padding-right: 76px; }
  .chat-channel-tools { right: 5px; }
  .chat-channel-tools button { min-width: 28px; min-height: 28px; }
}

/* Update 18.2 — chat discovery, bulk actions, notifications, and read divider. */
.chat-list-discovery { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 6px; padding: 8px 8px 0; }
.chat-list-discovery input, .chat-list-discovery select { min-width: 0; min-height: 34px; padding: 7px 9px; font-size: .7rem; }
.chat-list-filters button { display: flex; align-items: center; justify-content: center; gap: 4px; }
.chat-list-filters button span { min-width: 16px; padding: 1px 4px; border-radius: 99px; background: rgba(255,255,255,.05); font-size: .58rem; }
.chat-list-bulk-actions { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 0 8px 8px; border-bottom: 1px solid rgba(220,229,238,.07); }
.chat-list-bulk-actions button { min-width: 0; min-height: 29px; padding: 4px; border: 1px solid rgba(220,229,238,.07); border-radius: 7px; color: #75808a; background: rgba(255,255,255,.018); font-size: .58rem; font-weight: 720; cursor: pointer; }
.chat-list-bulk-actions button:hover, .chat-list-bulk-actions button.active { color: #a985ff; border-color: rgba(102,210,185,.18); background: rgba(102,210,185,.055); }
button.chat-list-group-label { width: calc(100% - 14px); margin: 10px 7px 4px; padding: 7px 6px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
button.chat-list-group-label:hover { background: rgba(255,255,255,.025); }
button.chat-list-group-label > span { min-width: 0; padding: 0; background: none; text-align: left; }
button.chat-list-group-label > b { min-width: 22px; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.05); font-size: .62rem; text-align: center; }
.chat-list-group { min-width: 0; }
.chat-channel-row .chat-channel-button { min-height: 88px; padding-right: 104px; }
.chat-message-preview { display: block; margin-top: 4px; overflow: hidden; color: #707a83; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel-tools { width: 91px; grid-template-columns: repeat(3, 28px); }
.last-read-divider { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; color: #ee5b74; font-size: .65rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.last-read-divider::before, .last-read-divider::after { content: ""; height: 1px; flex: 1 1 auto; background: rgba(240,93,115,.28); }
.last-read-divider span { flex: 0 0 auto; }

@media (max-width: 760px) {
  .chat-list-panel { max-height: 430px; }
  .chat-list-panel .chat-channel-list { flex: 0 1 225px; max-height: 225px; }
  .chat-list-discovery { grid-template-columns: minmax(0, 1fr) 104px; }
  .chat-channel-row .chat-channel-button { padding-right: 106px; }
}

@media (max-width: 380px) {
  .chat-list-discovery { grid-template-columns: 1fr; }
  .chat-list-bulk-actions { grid-template-columns: 1fr 1fr; }
  .chat-list-bulk-actions button:last-child { grid-column: 1 / -1; }
}

/* Update 18.5 — accessible site-wide motion and view choreography. */
@keyframes motion-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes motion-rise-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-slide-in-left {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-scale-in {
  from { opacity: 0; transform: scale(.965); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes motion-heading-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-modal-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes motion-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes motion-nav-pop {
  0% { transform: scale(.84); }
  68% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes motion-soft-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(155,114,255,.06), 0 0 11px rgba(155,114,255,.4); }
  50% { box-shadow: 0 0 0 7px rgba(155,114,255,.025), 0 0 18px rgba(155,114,255,.65); }
}
@keyframes motion-orbit-breathe {
  0%, 100% { opacity: .55; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.02); }
}
@keyframes motion-divider-grow {
  from { opacity: 0; transform: scaleX(.2); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes motion-sheen {
  from { transform: translate3d(-150%, 0, 0) skewX(-22deg); }
  to { transform: translate3d(280%, 0, 0) skewX(-22deg); }
}

/* Login: staged copy, orbit, and sign-in card entrance. */
.login-screen.motion-entering .showcase-kicker { animation: motion-rise-in .48s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .showcase-brand strong { animation: motion-rise-in .64s .08s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .showcase-orbit { animation: motion-scale-in .72s .18s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .showcase-stats > div { animation: motion-rise-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .showcase-stats > div:nth-child(1) { animation-delay: .28s; }
.login-screen.motion-entering .showcase-stats > div:nth-child(2) { animation-delay: .36s; }
.login-screen.motion-entering .showcase-stats > div:nth-child(3) { animation-delay: .44s; }
.login-screen.motion-entering .login-card { animation: motion-modal-in .7s .14s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .login-card > * { animation: motion-rise-in .48s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .login-card > :nth-child(1) { animation-delay: .24s; }
.login-screen.motion-entering .login-card > :nth-child(2) { animation-delay: .30s; }
.login-screen.motion-entering .login-card > :nth-child(3) { animation-delay: .36s; }
.login-screen.motion-entering .login-card > :nth-child(4) { animation-delay: .42s; }
.login-screen.motion-entering .login-card > :nth-child(5) { animation-delay: .48s; }
.login-screen.motion-entering .login-card > :nth-child(6) { animation-delay: .54s; }
.showcase-orbit span:first-child, .brand-orbit.orbit-one { animation: motion-orbit-breathe 5.5s ease-in-out infinite; }
.showcase-orbit span:nth-child(2), .brand-orbit.orbit-two { animation: motion-orbit-breathe 5.5s 1.1s ease-in-out infinite reverse; }

/* Authenticated shell and navigation entrance. */
.app-shell.motion-entering .sidebar { animation: motion-slide-in-left .55s cubic-bezier(.22, 1, .36, 1) both; }
.app-shell.motion-entering .sidebar-system-card,
.app-shell.motion-entering .sidebar-footer { animation: motion-rise-in .46s .18s cubic-bezier(.22, 1, .36, 1) both; }
.app-shell.motion-entering .nav-item { animation: motion-slide-in-left .42s cubic-bezier(.22, 1, .36, 1) both; }
.app-shell.motion-entering .nav-item:nth-of-type(1) { animation-delay: .10s; }
.app-shell.motion-entering .nav-item:nth-of-type(2) { animation-delay: .14s; }
.app-shell.motion-entering .nav-item:nth-of-type(3) { animation-delay: .18s; }
.app-shell.motion-entering .nav-item:nth-of-type(4) { animation-delay: .22s; }
.app-shell.motion-entering .nav-item:nth-of-type(5) { animation-delay: .26s; }
.app-shell.motion-entering .nav-item:nth-of-type(6) { animation-delay: .30s; }
.app-shell.motion-entering .nav-item:nth-of-type(7) { animation-delay: .34s; }
.app-shell.motion-entering .nav-item:nth-of-type(8) { animation-delay: .38s; }
.app-shell.motion-entering .nav-item:nth-of-type(9) { animation-delay: .42s; }
.app-shell.motion-entering .nav-item:nth-of-type(10) { animation-delay: .46s; }
.app-shell.motion-entering .topbar { animation: motion-fade-in .5s .12s ease both; }
.app-shell.motion-entering .view.active { animation: motion-rise-in .58s .16s cubic-bezier(.22, 1, .36, 1) both; }
.topbar-heading.heading-entering > div { animation: motion-heading-in .42s cubic-bezier(.22, 1, .36, 1) both; }
.nav-item.active::before { animation: motion-nav-pop .38s cubic-bezier(.22, 1, .36, 1); }

/* Each destination gets a short, reusable entrance without replaying on polling. */
.view.active.view-entering { animation: motion-fade-in .22s ease both; }
.view.active.view-entering > * { animation: motion-rise-in .48s cubic-bezier(.22, 1, .36, 1) both; }
.view.active.view-entering > :nth-child(1) { animation-delay: .02s; }
.view.active.view-entering > :nth-child(2) { animation-delay: .08s; }
.view.active.view-entering > :nth-child(3) { animation-delay: .14s; }
.view.active.view-entering > :nth-child(4) { animation-delay: .20s; }
.view.active.view-entering > :nth-child(5) { animation-delay: .26s; }
.view.active.view-entering .metrics-grid > *,
.view.active.view-entering .two-column-grid > *,
.view.active.view-entering .workspace-profile-grid > *,
.view.active.view-entering .channel-grid > *,
.view.active.view-entering .access-user-grid > * { animation: motion-rise-in .46s cubic-bezier(.22, 1, .36, 1) both; }
.view.active.view-entering .metrics-grid > :nth-child(2),
.view.active.view-entering .two-column-grid > :nth-child(2),
.view.active.view-entering .workspace-profile-grid > :nth-child(2),
.view.active.view-entering .channel-grid > :nth-child(2),
.view.active.view-entering .access-user-grid > :nth-child(2) { animation-delay: .06s; }
.view.active.view-entering .metrics-grid > :nth-child(3),
.view.active.view-entering .workspace-profile-grid > :nth-child(3),
.view.active.view-entering .channel-grid > :nth-child(3),
.view.active.view-entering .access-user-grid > :nth-child(3) { animation-delay: .12s; }
.view.active.view-entering .metrics-grid > :nth-child(4),
.view.active.view-entering .workspace-profile-grid > :nth-child(4),
.view.active.view-entering .channel-grid > :nth-child(4),
.view.active.view-entering .access-user-grid > :nth-child(4) { animation-delay: .18s; }
.view.active.view-entering .chat-messages > .message { animation: motion-rise-in .38s cubic-bezier(.22, 1, .36, 1) both; }
.view.active.view-entering .chat-messages > .message:nth-last-child(2) { animation-delay: .05s; }
.view.active.view-entering .chat-messages > .message:last-child { animation-delay: .10s; }

/* Dialogs, controls, and live signals. */
.modal[open] { animation: motion-modal-in .32s cubic-bezier(.22, 1, .36, 1) both; }
.modal[open]::backdrop { animation: motion-backdrop-in .24s ease both; }
.modal[open] .modal-header,
.modal[open] .form-grid,
.modal[open] .modal-actions { animation: motion-rise-in .36s cubic-bezier(.22, 1, .36, 1) both; }
.modal[open] .form-grid { animation-delay: .04s; }
.modal[open] .modal-actions { animation-delay: .08s; }
.button, .icon-button, .file-button, .chat-channel-tools button { transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.button:active:not(:disabled), .icon-button:active:not(:disabled), .file-button:active:not(:disabled), .chat-channel-tools button:active:not(:disabled) { transform: scale(.97); }
.button.primary { position: relative; overflow: hidden; isolation: isolate; }
.button.primary::after { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 32%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent); transform: translate3d(-150%, 0, 0) skewX(-22deg); pointer-events: none; }
.button.primary:hover:not(:disabled)::after { animation: motion-sheen .72s ease-out; }
.system-pulse, .hero-status i, .chat-channel-status.running i { animation: motion-soft-pulse 2.6s ease-in-out infinite; }
.last-read-divider::before, .last-read-divider::after { transform-origin: center; animation: motion-divider-grow .46s ease-out both; }
.live-job-panel:not(.hidden) { animation: motion-scale-in .34s cubic-bezier(.22, 1, .36, 1) both; }
.toast { will-change: transform, opacity; }

@media (max-width: 760px) {
  .app-shell.motion-entering .sidebar { animation-name: motion-rise-in; }
  .view.active.view-entering > * { animation-duration: .4s; }
  .login-screen.motion-entering .login-card { animation-delay: .05s; }
}

@media (prefers-reduced-motion: reduce) {
  .login-screen.motion-entering *,
  .app-shell.motion-entering *,
  .view.active.view-entering *,
  .topbar-heading.heading-entering *,
  .modal[open], .modal[open] *, .modal[open]::backdrop,
  .system-pulse, .hero-status i, .chat-channel-status.running i,
  .showcase-orbit span, .brand-orbit,
  .last-read-divider::before, .last-read-divider::after,
  .live-job-panel:not(.hidden) {
    animation: none !important;
  }
}

/* Update 18.8 — Mini Dark Control rebrand and single-pass view motion. */
:root {
  --bg: #08060d;
  --surface: #100d16;
  --surface-2: #17121f;
  --surface-3: #201828;
  --surface-4: #2b2038;
  --line: rgba(221, 207, 242, .11);
  --line-strong: rgba(221, 207, 242, .22);
  --border: var(--line);
  --text: #f7f2fb;
  --muted: #9b93a5;
  --accent: #f05d73;
  --accent-2: #9b72ff;
  --cyan: #a787ff;
}
html, body { background: #08060d; }
.sidebar { background: linear-gradient(180deg, rgba(14,10,20,.99), rgba(7,6,11,.98)); }
.topbar { background: linear-gradient(180deg, rgba(8,6,13,.98), rgba(8,6,13,.90)); }
.brand-mark,
.login-brand-stage .brand-mark { background: linear-gradient(145deg, #ff7188, #d84262 52%, #8f60f0); box-shadow: 0 18px 48px rgba(155,114,255,.22), 0 10px 30px rgba(240,93,115,.22); }
.showcase-orbit i { color: #160b15; background: linear-gradient(145deg, #ff8298, #e34d69 50%, #9b72ff); }
.button.primary { background: linear-gradient(115deg, #f36b80, #d94464 54%, #8f60f0); box-shadow: 0 12px 30px rgba(178,52,88,.25), inset 0 1px rgba(255,255,255,.2); }
.button.primary:hover:not(:disabled) { box-shadow: 0 15px 38px rgba(178,52,88,.34), 0 8px 26px rgba(123,75,220,.18), inset 0 1px rgba(255,255,255,.24); }
.nav-item.active { background: linear-gradient(100deg, rgba(240,93,115,.14), rgba(155,114,255,.05)); }
.nav-item.active::before { color: #170a12; background: linear-gradient(145deg, #ff7188, #d94464 58%, #9b72ff); box-shadow: 0 7px 20px rgba(195,54,88,.24); }
.command-hero { background: linear-gradient(115deg, rgba(240,93,115,.09), transparent 38%), linear-gradient(145deg, #17131d, #0c0a11 64%); }
.hero-core { background: linear-gradient(145deg, rgba(240,93,115,.21), rgba(155,114,255,.10)); }
.message.user { border-color: rgba(240,93,115,.22); background: linear-gradient(145deg, rgba(188,48,82,.34), rgba(105,57,154,.22)); }
.message.assistant { background: linear-gradient(145deg, rgba(38,27,52,.95), rgba(23,18,33,.96)); }
.chat-panel { background: linear-gradient(155deg, rgba(20,15,29,.97), rgba(8,7,13,.99)); }
.workspace-identity-panel { background: linear-gradient(135deg, rgba(240,93,115,.06), rgba(155,114,255,.10)); }

/* A view enters once. Removing the replay class cannot start a fallback animation. */
.view.active,
.app-shell.motion-entering .view.active { animation: none !important; }
.view.active.view-entering { animation: motion-rise-in .38s cubic-bezier(.22, 1, .36, 1) both !important; }
.view.active.view-entering > *,
.view.active.view-entering .metrics-grid > *,
.view.active.view-entering .two-column-grid > *,
.view.active.view-entering .workspace-profile-grid > *,
.view.active.view-entering .channel-grid > *,
.view.active.view-entering .access-user-grid > *,
.view.active.view-entering .metric-card strong,
.view.active.view-entering :is(.channel-card, .workspace-profile-card, .access-user-card, .change-record-card, .release-catalog-card, .backup-card, .health-issue, .activity-item, .log-entry),
.view.active.view-entering .chat-messages > .message { animation: none !important; }

/* Update 18.10 — usage-limit state and final mobile hardening. */
.chat-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto !important;
  grid-template-areas:
    "header"
    "workspace"
    "live"
    "messages"
    "typing"
    "usage"
    "composer";
}
.chat-typing-indicator {
  grid-area: typing;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 16px 4px;
  color: #aaa0b2;
  font-size: .72rem;
}
.chat-typing-indicator.hidden { display: none !important; }
.typing-dots { display: inline-flex; align-items: center; gap: 3px; height: 12px; }
.typing-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff7188, #9b72ff);
  animation: typing-dot-pulse 1.05s ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: .14s; }
.typing-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes typing-dot-pulse {
  0%, 60%, 100% { opacity: .42; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.usage-limit-notice { grid-area: usage; }
.usage-limit-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 93, 115, .32);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240, 93, 115, .13), rgba(155, 114, 255, .08));
  box-shadow: 0 14px 30px rgba(5, 2, 9, .24);
}
.usage-limit-notice.hidden { display: none !important; }
.usage-limit-notice strong { color: #fff2f5; }
.usage-limit-notice p { margin: 3px 0 0; color: #cfc3d8; font-size: .78rem; line-height: 1.45; }
.usage-limit-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(240, 93, 115, .18); color: #ff8395; font-weight: 900; }

@media (max-width: 760px) {
  .usage-limit-notice { flex: 0 0 auto; margin: 0 12px; padding: 11px 12px; }
  .chat-composer textarea:disabled { opacity: .58; cursor: not-allowed; }
}

@media (max-width: 380px) {
  .usage-limit-notice { grid-template-columns: 1fr; }
  .usage-limit-icon { width: 30px; height: 30px; }
}

/* Update 19.1 — complete login experience redesign. */
.login-screen {
  position: relative;
  display: block;
  min-height: 100dvh;
  overflow-x: hidden;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(5,3,9,.96) 0%, rgba(5,3,9,.80) 43%, rgba(5,3,9,.60) 66%, rgba(5,3,9,.90) 100%),
    linear-gradient(180deg, rgba(5,3,9,.14), rgba(5,3,9,.86)),
    url("/assets/mini-dark-control-wide.jpg?v=2.39.4") center / cover no-repeat;
  isolation: isolate;
}
.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  opacity: .28;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
  pointer-events: none;
}
.login-screen::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  width: auto;
  height: 45%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(0deg, rgba(5,3,9,.86), transparent);
  box-shadow: none;
  pointer-events: none;
}
.login-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.login-ambient span { position: absolute; border: 1px solid rgba(240,93,115,.13); border-radius: 50%; box-shadow: 0 0 80px rgba(240,93,115,.05); }
.login-ambient span:nth-child(1) { width: 520px; height: 520px; left: -250px; top: 22%; }
.login-ambient span:nth-child(2) { width: 260px; height: 260px; left: 44%; top: -170px; border-color: rgba(155,114,255,.13); }
.login-ambient span:nth-child(3) { width: 420px; height: 420px; right: -250px; bottom: -230px; border-color: rgba(155,114,255,.10); }
.login-shell {
  position: relative;
  z-index: 2;
  width: min(1540px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding:
    max(24px, env(safe-area-inset-top))
    max(34px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(34px, env(safe-area-inset-left));
}
.login-brandbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 54px; }
.login-brand-identity { display: flex; align-items: center; gap: 13px; }
.login-brand-identity img { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; object-fit: cover; box-shadow: 0 12px 30px rgba(0,0,0,.32), 0 0 22px rgba(240,93,115,.10); }
.login-brand-identity strong, .login-brand-identity span { display: block; }
.login-brand-identity strong { color: #fff8f3; font-size: .91rem; letter-spacing: .01em; }
.login-brand-identity span { margin-top: 3px; color: #88818e; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.login-secure-status { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #b8b1bd; background: rgba(9,7,13,.54); backdrop-filter: blur(14px); font-size: .72rem; }
.login-secure-status i { width: 7px; height: 7px; border-radius: 50%; background: #50d79b; box-shadow: 0 0 0 4px rgba(80,215,155,.08), 0 0 12px rgba(80,215,155,.48); }
.login-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, .72fr); align-items: center; gap: clamp(46px, 8vw, 135px); padding: clamp(55px, 8vh, 105px) 0 clamp(38px, 6vh, 75px); }
.login-intro { max-width: 790px; }
.login-kicker { margin: 0 0 23px; color: #ff7188; font-size: .7rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.login-intro h1 { max-width: 780px; margin: 0; color: #fff9f2; font-size: clamp(3.15rem, 5.35vw, 5.75rem); font-weight: 610; line-height: .94; letter-spacing: -.065em; text-wrap: balance; }
.login-intro h1 span { color: #c9c1cc; }
.login-intro-copy { max-width: 660px; margin: 28px 0 34px; color: #aaa2ad; font-size: clamp(.96rem, 1.25vw, 1.12rem); line-height: 1.72; }
.login-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.login-feature-grid article { min-width: 0; padding: 16px 14px; border-top: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.login-feature-grid article > span { display: block; margin-bottom: 13px; color: #ff7188; font-size: .61rem; font-weight: 800; letter-spacing: .12em; }
.login-feature-grid strong { display: block; color: #f1eaf2; font-size: .83rem; }
.login-feature-grid p { margin: 7px 0 0; color: #77707c; font-size: .7rem; line-height: 1.52; }
.login-auth-panel { width: min(500px, 100%); justify-self: end; overflow: hidden; border: 1px solid rgba(234,221,240,.13); border-radius: 24px; background: rgba(12,10,16,.82); box-shadow: 0 38px 100px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.045); backdrop-filter: blur(22px); }
.login-auth-art { position: relative; min-height: 180px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); background:
  linear-gradient(180deg, rgba(8,5,12,.16), rgba(8,5,12,.78)),
  url("/assets/mini-dark-control-wide.jpg?v=2.39.4") center 58% / cover no-repeat; }
.login-auth-art::before, .login-auth-art::after { content: ""; position: absolute; inset: 24px 18%; border: 1px solid rgba(240,93,115,.18); border-radius: 50%; }
.login-auth-art::after { inset: 43px 26%; border-color: rgba(155,114,255,.16); }
.login-art-scan { position: absolute; inset: 50% 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,113,136,.75), transparent); box-shadow: 0 0 20px rgba(255,113,136,.45); }
.login-art-mark { position: relative; z-index: 2; display: grid; place-items: center; width: 94px; height: 94px; border: 1px solid rgba(255,255,255,.14); border-radius: 27px; background: linear-gradient(145deg, rgba(240,93,115,.92), rgba(155,114,255,.88)); box-shadow: 0 18px 52px rgba(0,0,0,.45), 0 0 30px rgba(240,93,115,.16); transform: rotate(45deg); }
.login-art-mark > * { transform: rotate(-45deg); }
.login-art-mark small { margin: 15px 0 -17px; color: rgba(25,9,20,.7); font-size: .52rem; font-weight: 900; letter-spacing: .14em; }
.login-art-mark strong { color: #1b0c18; font-size: 1.13rem; font-weight: 950; letter-spacing: -.05em; }
.login-art-caption { position: absolute; right: 17px; bottom: 13px; color: rgba(226,211,232,.42); font-size: .5rem; font-weight: 750; letter-spacing: .14em; }
.login-card { position: relative; width: auto; margin: 0; padding: clamp(27px, 3.2vw, 39px); border: 0; border-radius: 0; background: linear-gradient(145deg, rgba(22,18,28,.95), rgba(12,10,16,.98)); box-shadow: none; text-align: left; backdrop-filter: none; }
.login-card::before { content: none; }
.login-card .eyebrow { margin-bottom: 10px; color: #ff7188; font-size: .61rem; }
.login-card h2 { margin: 0; color: #fff8f2; font-size: clamp(1.65rem, 2.4vw, 2.1rem); line-height: 1.08; letter-spacing: -.045em; }
.login-lead { margin: 14px 0 23px; color: #938b98; font-size: .86rem; line-height: 1.62; }
.login-discord-button { min-height: 52px; justify-content: flex-start; padding: 0 15px; border-color: rgba(255,255,255,.12); color: #fff; font-weight: 800; background: linear-gradient(105deg, #ed5570, #c33f71 57%, #8657e5); box-shadow: 0 14px 34px rgba(174,47,99,.26); }
.login-discord-button > span:nth-child(2) { flex: 1; text-align: center; }
.login-discord-mark { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(255,255,255,.24); border-radius: 9px; color: #fff; background: rgba(255,255,255,.09); font-size: .75rem; }
.login-discord-button:focus-visible, .login-motion-toggle:focus-visible { outline: 3px solid rgba(255,130,152,.42); outline-offset: 3px; }
.login-assurance { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin-top: 20px; }
.login-assurance span { display: flex; align-items: center; gap: 7px; color: #aaa2ae; font-size: .68rem; }
.login-assurance span:last-child { grid-column: 1 / -1; }
.login-assurance i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #62d9a6; background: rgba(98,217,166,.08); font-size: .58rem; font-style: normal; }
.login-card .fine-print { margin: 19px 0 0; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.07); color: #726b77; font-size: .68rem; line-height: 1.55; }
.login-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.07); color: #68616d; font-size: .61rem; letter-spacing: .05em; }
.login-footer span:first-child { color: #a69eaa; font-weight: 700; }
.login-motion-toggle { top: max(25px, env(safe-area-inset-top)); right: max(34px, env(safe-area-inset-right)); transform: translateY(62px); }

.login-screen.motion-entering .login-brandbar { animation: motion-fade-in .45s ease both; }
.login-screen.motion-entering .login-kicker { animation: motion-rise-in .48s .08s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .login-intro h1 { animation: motion-rise-in .62s .14s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .login-intro-copy { animation: motion-rise-in .52s .22s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .login-feature-grid article { animation: motion-rise-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .login-feature-grid article:nth-child(1) { animation-delay: .28s; }
.login-screen.motion-entering .login-feature-grid article:nth-child(2) { animation-delay: .34s; }
.login-screen.motion-entering .login-feature-grid article:nth-child(3) { animation-delay: .40s; }
.login-screen.motion-entering .login-auth-panel { animation: motion-modal-in .66s .18s cubic-bezier(.22, 1, .36, 1) both; }
.login-screen.motion-entering .login-footer { animation: motion-fade-in .48s .42s ease both; }
.login-ambient span { animation: motion-orbit-breathe 7s ease-in-out infinite; }
.login-ambient span:nth-child(2) { animation-delay: 1.4s; animation-direction: reverse; }
.login-ambient span:nth-child(3) { animation-delay: 2.1s; }

@media (max-width: 1120px) {
  .login-main { grid-template-columns: minmax(0, 1fr) minmax(380px, .76fr); gap: 45px; }
  .login-intro h1 { font-size: clamp(3rem, 5.7vw, 4.8rem); }
  .login-feature-grid { grid-template-columns: 1fr; max-width: 560px; }
  .login-feature-grid article { display: grid; grid-template-columns: 32px 1fr; gap: 5px; padding: 11px 10px; }
  .login-feature-grid article > span { margin: 2px 0 0; }
}
@media (max-width: 860px) {
  .login-shell { padding-inline: max(24px, env(safe-area-inset-left)); }
  .login-main { grid-template-columns: 1fr; align-items: start; gap: 40px; padding-top: 65px; }
  .login-intro { max-width: 680px; }
  .login-intro h1 { max-width: 650px; font-size: clamp(3rem, 10vw, 4.8rem); }
  .login-auth-panel { width: 100%; justify-self: stretch; display: grid; grid-template-columns: minmax(230px, .75fr) minmax(360px, 1.25fr); }
  .login-auth-art { min-height: 100%; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 0; }
  .login-footer { margin-top: 34px; }
  .login-motion-toggle { transform: translateY(60px); }
}
@media (max-width: 640px) {
  .login-shell { padding: max(18px, env(safe-area-inset-top)) max(17px, env(safe-area-inset-right)) max(17px, env(safe-area-inset-bottom)) max(17px, env(safe-area-inset-left)); }
  .login-brand-identity img { width: 42px; height: 42px; border-radius: 12px; }
  .login-secure-status { padding: 8px 10px; font-size: 0; }
  .login-secure-status i { margin: 0; }
  .login-motion-toggle { top: max(76px, calc(env(safe-area-inset-top) + 58px)); right: max(17px, env(safe-area-inset-right)); transform: none; }
  .login-main { gap: 29px; padding: 75px 0 22px; }
  .login-kicker { margin-bottom: 16px; font-size: .61rem; }
  .login-intro h1 { font-size: clamp(2.55rem, 13vw, 4rem); line-height: .98; }
  .login-intro-copy { margin: 20px 0 24px; font-size: .88rem; line-height: 1.62; }
  .login-feature-grid { gap: 6px; }
  .login-feature-grid article { padding: 9px 8px; }
  .login-auth-panel { display: block; border-radius: 20px; }
  .login-auth-art { min-height: 145px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .login-art-mark { width: 74px; height: 74px; border-radius: 22px; }
  .login-art-caption { display: none; }
  .login-card { padding: 25px 21px; }
  .login-assurance { grid-template-columns: 1fr; }
  .login-assurance span:last-child { grid-column: 1; }
  .login-footer { display: grid; justify-content: start; line-height: 1.5; }
}
@media (max-width: 380px) {
  .login-shell { padding-inline: max(13px, env(safe-area-inset-left)); }
  .login-brand-identity span { display: none; }
  .login-main { padding-top: 68px; }
  .login-intro h1 { font-size: clamp(2.25rem, 14vw, 3rem); letter-spacing: -.055em; }
  .login-feature-grid p { display: none; }
  .login-feature-grid article { align-items: center; min-height: 45px; }
  .login-card { padding: 23px 17px; }
  .login-discord-button { padding-inline: 12px; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .login-screen.motion-entering .login-brandbar,
  .login-screen.motion-entering .login-kicker,
  .login-screen.motion-entering .login-intro h1,
  .login-screen.motion-entering .login-intro-copy,
  .login-screen.motion-entering .login-feature-grid article,
  .login-screen.motion-entering .login-auth-panel,
  .login-screen.motion-entering .login-footer,
  .login-ambient span { animation: none !important; }
}

/* Update 19.2 — stable login controls, restored orbit, and release actions. */
.login-brandbar > .login-motion-toggle {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  transform: none;
}
.login-brandbar > .login-motion-toggle:hover,
.login-brandbar > .login-motion-toggle:focus-visible,
.login-brandbar > .login-motion-toggle:active {
  transform: none;
}
.login-auth-art::before,
.login-auth-art::after { content: none; }
.login-orbit {
  position: relative;
  z-index: 2;
  width: 164px;
  height: 164px;
  display: grid;
  place-items: center;
}
.login-orbit-ring {
  position: absolute;
  border: 1px solid rgba(240,93,115,.24);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(240,93,115,.045);
}
.login-orbit-ring.ring-outer { inset: 1px; }
.login-orbit-ring.ring-inner { inset: 29px; border-color: rgba(155,114,255,.22); border-style: dashed; }
.login-orbit .login-art-mark { position: absolute; width: 82px; height: 82px; border-radius: 24px; }
.login-orbit-node {
  --orbit-start: 0deg;
  --orbit-duration: 13s;
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  transform: rotate(var(--orbit-start));
  animation: motion-satellite-orbit var(--orbit-duration) linear infinite;
  pointer-events: none;
}
.login-orbit-node::after {
  content: "";
  position: absolute;
  top: -4px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border: 2px solid #100c14;
  border-radius: 50%;
  background: var(--orbit-color, #f05d73);
  box-shadow: 0 0 0 4px var(--orbit-halo, rgba(240,93,115,.10)), 0 0 13px var(--orbit-glow, rgba(240,93,115,.62));
}
.login-orbit-node.orbit-a { --orbit-start: 8deg; --orbit-duration: 12s; inset: 3px; }
.login-orbit-node.orbit-b { --orbit-start: 132deg; --orbit-duration: 17s; --orbit-color: #9b72ff; --orbit-halo: rgba(155,114,255,.10); --orbit-glow: rgba(155,114,255,.62); inset: 3px; }
.login-orbit-node.orbit-c { --orbit-start: 246deg; --orbit-duration: 10s; inset: 31px; }
.release-catalog-card > .release-catalog-actions {
  min-width: max-content;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.release-pin-button {
  min-width: 70px;
  min-height: 34px;
  padding-inline: 10px;
  gap: 6px;
  font-size: .68rem;
}
.release-pin-button > span:first-child { color: #8a828e; font-size: .75rem; }
.release-pin-button[aria-pressed="true"],
[data-pin-backup][aria-pressed="true"] { color: #ff8298; border-color: rgba(240,93,115,.32); background: rgba(240,93,115,.065); }
.release-pin-button[aria-pressed="true"] > span:first-child,
[data-pin-backup][aria-pressed="true"] > span:first-child { color: #ff8298; }

@media (max-width: 700px) {
  .release-catalog-card > .release-catalog-actions { grid-column: 1 / -1; width: 100%; }
  .release-catalog-actions .release-pin-button,
  .release-catalog-actions .release-preview-button { flex: 1 1 0; }
}
@media (max-width: 640px) {
  .login-orbit { width: 138px; height: 138px; }
  .login-orbit .login-art-mark { width: 70px; height: 70px; border-radius: 21px; }
  .login-orbit-node.orbit-c { inset: 27px; }
}
.motion-disabled .login-orbit-node { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .login-orbit-node { animation: none !important; }
}

/* Update 20 — per-chat model and reasoning profiles. */
.execution-settings-form {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(190px, .85fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}
.execution-settings-form label { min-width: 0; display: grid; gap: 7px; color: var(--muted); font-size: .78rem; }
.execution-settings-form small { min-height: 1.3em; color: #746d79; font-size: .64rem; line-height: 1.35; }
.execution-settings-form .button { min-height: 43px; white-space: nowrap; }
.execution-settings-effective { margin: 11px 0 0; color: #a8a0ac; font-size: .72rem; line-height: 1.5; }
.execution-settings-effective.warning { color: var(--warning); }

@media (max-width: 700px) {
  .execution-settings-form { grid-template-columns: 1fr; }
  .execution-settings-form .button { width: 100%; }
}

/* Update 21 — governed, approval-based memory. */
.memory-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) minmax(150px, 220px);
  gap: 10px;
  margin: 16px 0;
}
.memory-list { display: grid; gap: 10px; }
.memory-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(8, 10, 14, .5);
}
.memory-card.suggested { border-color: rgba(240, 180, 80, .24); }
.memory-card.active { border-color: rgba(69, 214, 151, .2); }
.memory-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.memory-card-heading > div { display: flex; flex-wrap: wrap; gap: 7px; }
.memory-card-heading small { color: var(--muted); text-align: right; }
.memory-card > p { margin: 0; color: var(--text); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: .7rem; }
.memory-card .card-actions { justify-content: flex-end; }

@media (max-width: 700px) {
  .memory-tools { grid-template-columns: 1fr; }
  .memory-card-heading { align-items: flex-start; flex-direction: column; }
  .memory-card-heading small { text-align: left; }
  .memory-card .card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Update 22 — supplied brand artwork and CSS-colored Lucide icon system. */
body {
  position: relative;
  isolation: isolate;
  background: #08060d;
  background-attachment: fixed;
}
body::before {
  background:
    linear-gradient(180deg, rgba(5, 3, 9, .68), rgba(8, 6, 13, .91) 76%),
    url("/assets/mini-dark-control-background.png?v=2.39.4") center top / cover no-repeat;
  opacity: 1;
}
.login-screen {
  background:
    linear-gradient(90deg, rgba(5,3,9,.91) 0%, rgba(5,3,9,.70) 44%, rgba(5,3,9,.44) 68%, rgba(5,3,9,.84) 100%),
    linear-gradient(180deg, rgba(5,3,9,.08), rgba(5,3,9,.68)),
    url("/assets/mini-dark-control-background.png?v=2.39.4") center / cover no-repeat;
}
.login-auth-art {
  background:
    linear-gradient(180deg, rgba(8,5,12,.12), rgba(8,5,12,.69)),
    url("/assets/mini-dark-control-background.png?v=2.39.4") center / cover no-repeat;
}
.sidebar {
  background: linear-gradient(180deg, rgba(12,8,18,.95), rgba(7,5,11,.97));
}
.brand-mark,
.brand-mark.small,
.login-brand-stage .brand-mark {
  overflow: hidden;
  padding: 0;
  background: #111018;
  box-shadow: 0 12px 34px rgba(240,93,115,.18), 0 8px 28px rgba(117,67,230,.18);
}
.brand-mark::after { content: none; }
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.login-brand-identity img {
  border-color: rgba(255,255,255,.16);
  background: #111018;
  filter: saturate(1.08) contrast(1.03);
}
.login-art-mark,
.login-orbit .login-art-mark {
  overflow: hidden;
  width: 102px;
  height: 102px;
  padding: 0;
  border-radius: 28px;
  background: #111018;
  transform: none;
}
.login-art-mark > * { transform: none; }
.login-art-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.03);
}

.nav-item::before {
  content: none !important;
  display: none !important;
}
.nav-icon {
  --icon-accent: #f05d73;
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241,232,247,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-icon::before,
.notification-toggle::before,
.notification-icon-button::before,
.usage-limit-icon::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #f6f0f8 0 68%, var(--icon-accent, #f05d73) 68% 100%);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}
.nav-icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
.nav-item[data-view="overview"] .nav-icon { --icon-url: url("/assets/icons/layout-dashboard.svg"); }
.nav-item[data-view="actions"] .nav-icon { --icon-url: url("/assets/icons/shield-check.svg"); --icon-accent: #f59e0b; }
.nav-item[data-view="health"] .nav-icon { --icon-url: url("/assets/icons/heart-pulse.svg"); --icon-accent: #f05d73; }
.nav-item[data-view="nodes"] .nav-icon { --icon-url: url("/assets/icons/network.svg"); --icon-accent: #9b72ff; }
.nav-item[data-view="chats"] .nav-icon { --icon-url: url("/assets/icons/messages-square.svg"); }
.nav-item[data-view="approvals"] .nav-icon { --icon-url: url("/assets/icons/shield-check.svg"); --icon-accent: #9b72ff; }
.nav-item[data-view="channels"] .nav-icon { --icon-url: url("/assets/icons/message-square-plus.svg"); }
.nav-item[data-view="workspaces"] .nav-icon { --icon-url: url("/assets/icons/folders.svg"); --icon-accent: #9b72ff; }
.nav-item[data-view="operations"] .nav-icon { --icon-url: url("/assets/icons/gauge.svg"); --icon-accent: #4ad9e8; }
.nav-item[data-view="cloudflare"] .nav-icon { --icon-url: url("/assets/icons/network.svg"); --icon-accent: #f48120; }
.nav-item[data-view="github"] .nav-icon { --icon-url: url("/assets/icons/network.svg"); --icon-accent: #f0f6fc; }
.nav-item[data-view="memory"] .nav-icon { --icon-url: url("/assets/icons/brain-circuit.svg"); }
.nav-item[data-view="access"] .nav-icon { --icon-url: url("/assets/icons/key-round.svg"); --icon-accent: #9b72ff; }
.nav-item[data-view="logs"] .nav-icon { --icon-url: url("/assets/icons/scroll-text.svg"); }
.nav-item[data-view="updates"] .nav-icon { --icon-url: url("/assets/icons/package-open.svg"); --icon-accent: #9b72ff; }
.nav-item[data-view="usage"] .nav-icon { --icon-url: url("/assets/icons/gauge.svg"); --icon-accent: #9b72ff; }
.nav-item:hover .nav-icon {
  border-color: rgba(240,93,115,.22);
  background: linear-gradient(145deg, rgba(240,93,115,.09), rgba(155,114,255,.07));
}
.nav-item.active .nav-icon {
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(240,93,115,.28), rgba(155,114,255,.25));
  box-shadow: 0 8px 20px rgba(100,38,135,.24);
}
.nav-item.active .nav-icon::before {
  background: linear-gradient(135deg, #fff9fc 0 58%, #ff7188 70%, #a985ff 100%);
}

.notification-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.notification-toggle::before,
.notification-icon-button::before {
  --icon-url: url("/assets/icons/bell-ring.svg");
  --icon-accent: #9b72ff;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.notification-icon-button {
  display: grid !important;
  place-items: center;
}
.notification-icon-button.active::before,
.notification-toggle.active::before {
  background: linear-gradient(135deg, #fff9fc 0 52%, #ff7188 66%, #9b72ff 100%);
}
.usage-limit-icon::before {
  --icon-url: url("/assets/icons/gauge.svg");
  --icon-accent: #9b72ff;
  width: 20px;
  height: 20px;
}

@media (min-width: 761px) and (max-width: 900px) {
  .nav-icon { width: 32px; height: 32px; }
}
@media (max-width: 760px) {
  .sidebar .nav-icon {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 36px;
    height: 36px;
    align-self: center;
    justify-self: center;
  }
}
@media (max-width: 640px) {
  .login-orbit .login-art-mark { width: 76px; height: 76px; border-radius: 22px; }
}

/* Update 23 — fleet-wide per-server health. */
.health-fleet-panel { margin-bottom: 16px; overflow: hidden; }
.health-fleet-header { align-items: flex-start; gap: 20px; }
.health-fleet-header > div:first-child { min-width: 0; }
.health-fleet-header > div:first-child > p:last-child {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.health-server-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 7px;
  width: min(100%, 420px);
}
.health-server-summary span {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(7, 9, 14, .42);
  color: var(--muted);
  font-size: .72rem;
}
.health-server-summary b { color: var(--text); font-size: 1rem; }
.health-server-summary b.success { color: var(--success); }
.health-server-summary b.warning { color: var(--warning); }
.health-server-summary b.danger { color: var(--danger); }
.health-server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 12px;
  padding: 16px 18px 20px;
  border-top: 1px solid var(--border);
}
.health-server-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,.035), rgba(7,9,14,.3));
  box-shadow: inset 3px 0 0 rgba(112, 228, 171, .62);
}
.health-server-card.warning { box-shadow: inset 3px 0 0 rgba(244, 193, 93, .78); }
.health-server-card.critical { box-shadow: inset 3px 0 0 rgba(240, 93, 115, .82); }
.health-server-card.disabled,
.health-server-card.unknown { box-shadow: inset 3px 0 0 rgba(168, 157, 179, .42); }
.health-server-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.health-server-card > header p {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.health-server-card > header h3 { margin: 0; overflow-wrap: anywhere; }
.health-server-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 7px 16px 13px;
}
.health-server-facts > div {
  min-width: 0;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.health-server-facts dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.health-server-facts dd {
  margin: 0;
  color: var(--text);
  font-size: .82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.health-server-issues,
.health-server-clear { margin: 0 16px 14px; }
.health-server-issues { display: grid; gap: 6px; }
.health-server-issues span,
.health-server-clear {
  padding: 9px 11px;
  border-radius: 10px;
  font-size: .76rem;
  line-height: 1.4;
}
.health-server-issues span {
  border: 1px solid rgba(240, 93, 115, .2);
  background: rgba(240, 93, 115, .075);
  color: #ffc2cb;
}
.health-server-card.warning .health-server-issues span {
  border-color: rgba(244, 193, 93, .22);
  background: rgba(244, 193, 93, .07);
  color: #f9d99b;
}
.health-server-clear {
  border: 1px solid rgba(112, 228, 171, .16);
  background: rgba(112, 228, 171, .055);
  color: #a5ecc9;
}
.health-server-access { border-top: 1px solid var(--border); }
.health-server-access summary {
  padding: 12px 16px;
  color: var(--muted);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
}
.health-server-access > div { padding: 0 16px 14px; }
.health-server-access strong { font-size: .72rem; }
.health-server-access p {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .health-fleet-header { display: grid; }
  .health-server-summary { width: 100%; }
}
@media (max-width: 700px) {
  .health-server-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .health-server-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .health-server-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-server-card > header { align-items: stretch; flex-direction: column; }
  .health-server-card > header .pill { align-self: flex-start; }
}

/* Update 25 — fleet usage analytics and reversible context compaction. */
.usage-command-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(240,93,115,.055), rgba(117,67,230,.07));
}
.usage-command-bar h2 { margin: 2px 0 6px; }
.usage-command-bar p:last-child { max-width: 760px; margin: 0; line-height: 1.5; }
.usage-command-actions { display: flex; gap: 8px; align-items: center; }
.usage-command-actions select { min-width: 150px; }
.usage-overview-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; margin-bottom: 14px; }
.usage-token-composition,
.usage-ranked-list { display: grid; gap: 9px; padding: 16px 18px 20px; }
.usage-token-row,
.usage-ranked-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(120px, 2fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.usage-token-row > span:first-child,
.usage-ranked-row > span:first-child { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.usage-bar { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.055); appearance: none; }
.usage-bar::-webkit-progress-bar { border-radius: inherit; background: rgba(255,255,255,.055); }
.usage-bar::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #f05d73, #7543e6); }
.usage-bar::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, #f05d73, #7543e6); }
.usage-token-row strong,
.usage-ranked-row strong { font-size: .78rem; white-space: nowrap; }
.usage-context-panel { overflow: hidden; }
.usage-context-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.usage-context-tools input { min-width: min(300px, 70vw); }
.usage-context-list { display: grid; gap: 10px; padding: 0 18px 20px; }
.usage-context-card {
  display: grid;
  grid-template-columns: minmax(210px, 1.2fr) repeat(4, minmax(95px, .55fr)) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(7,9,14,.42);
}
.usage-context-card.warning { border-color: rgba(244,193,93,.25); }
.usage-context-card.critical { border-color: rgba(240,93,115,.32); box-shadow: inset 3px 0 0 rgba(240,93,115,.7); }
.usage-context-identity { min-width: 0; }
.usage-context-identity strong,
.usage-context-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-context-identity span { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.usage-context-fact { min-width: 0; }
.usage-context-fact span { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.usage-context-fact strong { display: block; margin-top: 4px; overflow-wrap: anywhere; font-size: .78rem; }
.usage-context-reasons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.usage-context-reasons span { padding: 5px 8px; border-radius: 8px; color: #cfc3d8; background: rgba(255,255,255,.035); font-size: .66rem; }
.usage-context-card .card-actions { justify-content: flex-end; }
.compaction-modal { width: min(760px, calc(100vw - 24px)); }
.compaction-dialog-body { display: grid; gap: 14px; padding: 18px 20px; }
.compaction-dialog-body label { display: grid; gap: 7px; color: var(--muted); font-size: .76rem; }
.compaction-dialog-body textarea { min-height: 260px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; line-height: 1.5; }
.compaction-preview-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.compaction-preview-stats span { padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); font-size: .7rem; }

@media (max-width: 1050px) {
  .usage-context-card { grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(100px, .5fr)) auto; }
}
@media (max-width: 760px) {
  .usage-command-bar { display: grid; }
  .usage-command-actions { display: grid; grid-template-columns: 1fr auto; }
  .usage-overview-grid { grid-template-columns: 1fr; }
  .usage-context-tools { width: 100%; display: grid; grid-template-columns: 1fr; }
  .usage-context-tools input { min-width: 0; width: 100%; }
  .usage-context-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-context-identity { grid-column: 1 / -1; }
  .usage-context-card .card-actions { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
  .usage-command-actions,
  .usage-token-row,
  .usage-ranked-row,
  .usage-context-card { grid-template-columns: 1fr; }
  .usage-bar { width: 100%; }
  .usage-context-identity,
  .usage-context-card .card-actions,
  .usage-context-reasons { grid-column: 1; }
  .usage-context-card .button { width: 100%; }
}

/* Update 28 — compact mobile dashboard and full-width chat composition. */
@media (max-width: 760px) {
  .main-content {
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 66px;
    gap: 8px;
    margin: -10px -4px 12px;
    padding: max(10px, env(safe-area-inset-top)) 4px 9px;
    border-bottom-color: rgba(221, 207, 242, .1);
    background: linear-gradient(180deg, rgba(8, 6, 13, .995), rgba(8, 6, 13, .94));
  }
  .topbar-heading {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }
  .topbar-heading > div { min-width: 0; }
  .topbar h1 { font-size: clamp(1.35rem, 6.4vw, 1.68rem); }
  .topbar-actions {
    min-width: 0;
    max-width: 148px;
    justify-content: flex-end;
    gap: 6px;
  }
  #motion-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }
  .topbar-actions .pill {
    max-width: 104px;
    min-height: 38px;
    padding-inline: 9px;
    overflow: hidden;
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel { border-radius: 15px; }
  .panel-header { padding: 14px; }
  .section-toolbar { border-radius: 14px; }

  #view-chats .chat-layout {
    width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  #view-chats .chat-list-panel {
    width: 100%;
    max-height: 260px;
  }
  #view-chats .chat-panel {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
  }
  #view-chats .chat-panel > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
    box-sizing: border-box;
  }
  #view-chats .chat-header {
    padding: 13px 12px;
    gap: 11px;
  }
  #view-chats .chat-actions { gap: 7px; }
  #view-chats .chat-actions .button {
    min-width: 0;
    min-height: 42px;
    overflow: hidden;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #view-chats .workspace-identity-panel,
  #view-chats .live-job-panel {
    width: auto;
    max-width: none;
    margin-inline: 10px;
  }
  #view-chats .chat-messages {
    width: 100%;
    height: clamp(360px, 58dvh, 650px);
    min-height: 360px;
    padding: 12px 10px;
    gap: 10px;
    scroll-padding-block: 12px;
  }
  #view-chats .message {
    width: fit-content;
    max-width: 94%;
    padding: 12px 13px;
    border-radius: 15px;
    font-size: .92rem;
    line-height: 1.55;
  }
  #view-chats .message.user { align-self: flex-end; }
  #view-chats .message.assistant,
  #view-chats .message.system { align-self: flex-start; }
  #view-chats .chat-typing-indicator { padding-inline: 13px; }
  #view-chats .usage-limit-notice {
    width: auto;
    max-width: none;
    margin-inline: 10px;
  }
  #view-chats .chat-composer {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    min-height: 0;
    align-self: stretch;
    margin: 0 !important;
    padding: 10px 11px max(10px, env(safe-area-inset-bottom));
    overflow: hidden;
  }
  #view-chats .chat-composer textarea {
    width: 100%;
    height: auto;
    min-height: 58px;
    max-height: 140px;
    padding: 11px 12px;
    font-size: 16px;
    line-height: 1.45;
  }
  #view-chats .composer-footer {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  #view-chats .composer-footer .file-button,
  #view-chats .composer-footer .button {
    width: auto;
    min-height: 44px;
    padding-inline: 14px;
  }
}

@media (max-width: 420px) {
  .topbar-actions { max-width: 140px; }
  .topbar-actions .pill { max-width: 96px; }
  #view-chats .chat-messages { height: clamp(340px, 56dvh, 590px); min-height: 340px; }
  #view-chats .message { max-width: 96%; padding: 11px 12px; }
  #view-chats .composer-footer { grid-template-columns: minmax(0, 1fr) auto; }
  #view-chats .composer-footer .muted {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
  }
  #view-chats .composer-footer .file-button {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  #view-chats .composer-footer .button {
    grid-column: 2;
    grid-row: 2;
    min-width: 96px;
  }
}

@media (max-width: 340px) {
  .topbar-actions .pill {
    width: 38px;
    padding-inline: 0;
    font-size: 0;
  }
  .topbar-actions .pill i { margin: 0; }
}

/* Update 30 — reversible Quick reset and Discord history recovery import */
.conversation-import-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .35fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 15px;
}
.conversation-import-form .full-width { min-width: 0; }
.conversation-import-form input[type="file"] {
  width: 100%;
  min-width: 0;
}
.confirmation-modal { width: min(560px, calc(100vw - 28px)); }
.confirmation-modal .modal-body { padding: 18px 20px; }

@media (max-width: 760px) {
  .conversation-import-form { grid-template-columns: 1fr; }
  .conversation-import-form .button { width: 100%; }
}

/* Update 33 — installable private PWA and standalone iPhone hardening */
.pwa-install-button { gap: 8px; }
.pwa-install-modal { width: min(620px, calc(100vw - 28px)); }
.pwa-install-body {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 22px;
}
.pwa-install-mark {
  width: 104px;
  height: 104px;
  padding: 8px;
  border: 1px solid rgba(240,93,115,.25);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(240,93,115,.12), rgba(155,114,255,.12));
}
.pwa-install-mark img { width: 100%; height: 100%; border-radius: 19px; }
.pwa-install-copy { min-width: 0; }
.pwa-install-copy > strong { display: block; font-size: 1.08rem; }
.pwa-install-copy ol { margin: 16px 0; padding-left: 22px; color: var(--muted); line-height: 1.65; }
.pwa-install-copy li + li { margin-top: 5px; }
.pwa-install-copy p { margin: 14px 0 0; line-height: 1.55; }

@media (display-mode: standalone) {
  html, body { min-height: 100dvh; overscroll-behavior-y: none; }
  body { min-height: var(--app-viewport-height, 100dvh); }
  .pwa-install-button { display: none !important; }
}

@media (max-width: 760px) {
  html { min-height: 100%; background: #08060d; }
  body {
    min-width: 0;
    min-height: var(--app-viewport-height, 100dvh);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  .pwa-install-body {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 20px 16px;
    text-align: left;
  }
  .pwa-install-copy { width: 100%; }
  .pwa-install-copy > strong { text-align: center; }
  .pwa-install-mark { width: 92px; height: 92px; border-radius: 23px; }
  .pwa-install-copy ol { padding-left: 25px; }
  .pwa-standalone .main-content {
    min-height: var(--app-viewport-height, 100dvh);
  }
  .keyboard-visible #view-chats .chat-messages {
    height: clamp(220px, 34dvh, 340px);
    min-height: 220px;
  }
  .keyboard-visible #view-chats .chat-composer {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* Update 32 — reliable mobile chat selection */
@media (max-width: 760px) {
  #view-chats .chat-list-panel {
    max-height: none;
  }
  #view-chats .chat-list-panel .chat-channel-list {
    flex: 0 0 auto;
    height: clamp(190px, 32dvh, 300px);
    min-height: 190px;
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  #view-chats button.chat-list-group-label {
    min-height: 44px;
    margin-block: 4px;
  }
}
.experience-icon-button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}

.experience-badge {
  position: absolute;
  inset: -5px -5px auto auto;
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  font-size: .68rem;
  font-weight: 800;
}

.experience-modal {
  width: min(760px, calc(100vw - 24px));
  max-height: min(820px, calc(100dvh - 24px));
  overflow: auto;
}

.experience-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
  overflow-x: auto;
}

.experience-tabs button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  white-space: nowrap;
}

.experience-tabs button.active {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.experience-panel-heading,
.experience-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.experience-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.experience-item {
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  text-align: left;
  font: inherit;
}

button.experience-item { cursor: pointer; }
.experience-item.unread { border-left: 4px solid var(--accent); }
.experience-item > span:first-child { display: grid; gap: 4px; }
.experience-item small, .experience-item time { color: var(--muted); font-size: .78rem; }
.experience-form { margin: 18px 0; padding: 16px; border: 1px solid var(--border); border-radius: 16px; }
.command-results { max-height: 60dvh; overflow-y: auto; }

.file-clear-button {
  min-width: 44px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
  cursor: pointer;
}

.file-clear-button:hover,
.file-clear-button:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}

/* Update 35.3 — copied-file attachment queue for website and installed PWA chats. */
@media (max-width: 760px) {
  #view-chats .composer-footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #view-chats .composer-footer .file-button:not(.camera-button) {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }

  #view-chats .composer-footer .camera-button {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }

  #view-chats #file-summary {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    white-space: normal;
  }

  #view-chats #clear-chat-files {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  #view-chats #send-chat {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }
}

html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="larger"] { font-size: 125%; }
html.high-contrast { --muted: #d8d2df; --border: rgba(255, 255, 255, .3); }
html.compact-density .panel,
html.compact-density .experience-item { padding-top: 8px; padding-bottom: 8px; }

@media (max-width: 760px) {
  .topbar-actions .experience-icon-button { min-width: 40px; min-height: 40px; }
  .topbar-actions #motion-toggle { display: none; }
  .experience-modal { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); margin: 6px; }
  .experience-panel-heading, .experience-item { align-items: stretch; flex-direction: column; }
  .experience-item .card-actions { width: 100%; }
  .experience-item .card-actions .button { flex: 1; }
  .camera-button { display: inline-flex; }
}

/* Update 35.1 — viewport-contained private app controls and modal scroll locking. */
html.modal-open,
html.modal-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

html.modal-open body {
  position: fixed;
  inset: var(--modal-scroll-offset, 0) 0 auto;
  width: 100%;
}

#experience-dialog {
  overflow: hidden;
}

#experience-dialog[open] {
  display: flex;
  flex-direction: column;
}

#experience-dialog .modal-header {
  flex: 0 0 auto;
  gap: 12px;
}

#experience-dialog .modal-header > div {
  min-width: 0;
}

#experience-dialog .modal-header .icon-button {
  flex: 0 0 48px;
  min-width: 48px;
  min-height: 48px;
}

.experience-scroll-region {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px max(20px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.experience-item-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.experience-item-copy > strong,
.experience-item-copy > small,
.experience-item-copy > time {
  display: block;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  #experience-dialog.experience-modal {
    inset: 0;
    width: 100%;
    max-width: none;
    height: var(--app-viewport-height, 100dvh);
    max-height: var(--app-viewport-height, 100dvh);
    margin: 0;
    border-inline: 0;
    border-radius: 0;
  }

  #experience-dialog .modal-header h2 {
    font-size: clamp(1.05rem, 5.5vw, 1.35rem);
    line-height: 1.2;
  }

  .experience-scroll-region {
    padding: 14px 12px max(18px, env(safe-area-inset-bottom));
    scrollbar-gutter: auto;
  }

  .experience-tabs {
    position: sticky;
    top: -14px;
    z-index: 5;
    margin-inline: -12px;
    padding: 10px 12px 12px;
    background: #12171c;
  }
}

/* Update 35.4 — reliable private-app panels and visible page/PWA loading states. */
.app-launch-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  min-height: 100dvh;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  color: #f8f4fb;
  text-align: center;
  background:
    radial-gradient(circle at 50% 36%, rgb(237 82 118 / 20%), transparent 32%),
    radial-gradient(circle at 70% 65%, rgb(167 79 236 / 14%), transparent 38%),
    #0d1217;
  transition: opacity 320ms ease, visibility 320ms ease;
}

.app-launch-screen.leaving {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.launch-identity {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
}

.launch-identity img {
  position: relative;
  z-index: 2;
  width: 78px;
  height: 78px;
  border-radius: 24px;
  box-shadow: 0 18px 55px rgb(0 0 0 / 45%);
}

.launch-ring,
.launch-pulse {
  position: absolute;
  border-radius: 999px;
}

.launch-ring {
  inset: 0;
  border: 2px solid transparent;
  border-top-color: #f05b7a;
  border-right-color: rgb(185 86 239 / 75%);
  animation: launch-spin 1.35s linear infinite;
}

.launch-ring-inner {
  inset: 14px;
  border-top-color: rgb(255 255 255 / 80%);
  border-right-color: transparent;
  animation-direction: reverse;
  animation-duration: 1.05s;
}

.launch-pulse {
  inset: 28px;
  background: rgb(240 91 122 / 20%);
  animation: launch-pulse 1.8s ease-in-out infinite;
}

.launch-copy {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.launch-copy .eyebrow {
  margin: 0 0 4px;
}

.launch-copy strong {
  font-size: clamp(1.2rem, 5vw, 1.55rem);
}

.launch-copy span {
  color: var(--muted);
}

.pwa-launch-label {
  display: none;
}

@media (display-mode: standalone) {
  .browser-launch-label {
    display: none;
  }

  .pwa-launch-label {
    display: block;
  }
}

.view-loading-overlay {
  position: fixed;
  z-index: 85;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min(280px, calc(100vw - 32px));
  padding: 16px 20px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  color: #f8f4fb;
  background: rgb(15 20 26 / 94%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 45%);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(18px);
}

.view-loading-overlay strong {
  font-size: 15px;
  line-height: 1.25;
}

.view-loading-overlay.hidden {
  display: none;
}

.view-loading-spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 3px solid rgb(255 255 255 / 18%);
  border-top-color: #f05b7a;
  border-right-color: #b956ef;
  border-radius: 999px;
  animation: launch-spin 800ms linear infinite;
}

.chat-inline-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  color: var(--text);
}

.chat-inline-loading strong {
  font-size: 15px;
}

#experience-dialog > .experience-tabs {
  position: static;
  z-index: auto;
  display: flex !important;
  visibility: visible;
  flex: 0 0 auto;
  min-height: 58px;
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  opacity: 1;
  background: #12171c;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}

#experience-dialog > .experience-tabs button {
  flex: 0 0 auto;
  min-height: 42px;
}

.experience-item-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
}

.experience-item-copy > strong,
.experience-item-copy > small,
.experience-item-copy > time {
  grid-column: 1;
  display: block !important;
}

.experience-item-copy > br {
  display: none;
}

@keyframes launch-spin {
  to { transform: rotate(360deg); }
}

@keyframes launch-pulse {
  0%, 100% { transform: scale(.86); opacity: .45; }
  50% { transform: scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .launch-ring,
  .launch-pulse,
  .view-loading-spinner {
    animation: none;
  }

  .app-launch-screen {
    transition-duration: 1ms;
  }
}

/* Update 37 — unified Midnight Glass interface.
   This final layer intentionally owns presentation only. Existing view IDs,
   permission classes, API wiring, and responsive behavior remain unchanged. */
:root {
  --bg: #07060a;
  --surface: #100e15;
  --surface-2: #15121c;
  --surface-3: #1c1824;
  --surface-4: #251f2e;
  --panel: #121018;
  --border: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #faf7fb;
  --muted: #a49dab;
  --muted-strong: #c9c3cc;
  --accent: #ff607f;
  --accent-2: #9a68ff;
  --cyan: #bd8aff;
  --success: #61dfa5;
  --warning: #f6c86b;
  --danger: #ff7187;
  --focus-ring: rgba(255, 96, 127, .2);
  --surface-shadow: 0 18px 60px rgba(0, 0, 0, .28);
  --elevated-shadow: 0 28px 90px rgba(0, 0, 0, .48);
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --sidebar-width: 286px;
  font-family: Inter, "SF Pro Display", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  background: var(--bg);
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
  scrollbar-width: thin;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 16% 0%, rgba(153, 71, 117, .14), transparent 28rem),
    radial-gradient(circle at 84% 8%, rgba(111, 71, 176, .11), transparent 32rem),
    linear-gradient(145deg, #09070d 0%, #060509 54%, #09070e 100%);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

::selection {
  color: #fff;
  background: rgba(255, 96, 127, .42);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .32); }

h1, h2, h3, strong {
  letter-spacing: -.018em;
}

h1 {
  color: #fff;
  font-size: clamp(1.85rem, 2.5vw, 2.65rem);
  font-weight: 760;
  line-height: 1.08;
}

h2 { font-size: 1.08rem; font-weight: 720; }
h3 { color: var(--text); }

.eyebrow {
  margin-bottom: 7px;
  color: #ff7893;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .17em;
}

.muted,
.fine-print,
.metric-detail,
.path-label {
  color: var(--muted);
}

a { color: #ff8ba2; }

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #ff7791;
  outline-offset: 3px;
}

.app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100dvh;
}

.sidebar {
  z-index: 50;
  height: 100dvh;
  padding: 18px 16px 16px;
  border-right-color: rgba(255, 255, 255, .075);
  background:
    linear-gradient(180deg, rgba(17, 13, 22, .96), rgba(10, 8, 13, .97)),
    var(--bg);
  box-shadow: 18px 0 60px rgba(0, 0, 0, .2);
  backdrop-filter: blur(28px) saturate(125%);
}

.brand-row {
  min-height: 52px;
  gap: 12px;
  padding: 0 5px 14px;
}

.brand-mark.small {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-copy strong { font-size: .96rem; }
.brand-copy span { margin-top: 2px; font-size: .69rem; }

.sidebar-system-card {
  min-height: 60px;
  margin: 0 0 14px;
  padding: 11px 12px;
  border-color: rgba(255, 255, 255, .09);
  border-radius: 15px;
  background:
    linear-gradient(110deg, rgba(255, 96, 127, .08), rgba(154, 104, 255, .045)),
    rgba(255, 255, 255, .025);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.system-pulse {
  box-shadow: 0 0 0 6px rgba(154, 104, 255, .08), 0 0 20px rgba(154, 104, 255, .55);
}

.nav-list {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
  padding: 0 1px 12px;
  overflow-y: auto;
}

.nav-section-label {
  margin: 14px 9px 4px;
  color: #706b78;
  font-size: .61rem;
  letter-spacing: .2em;
}

.nav-item {
  position: relative;
  min-height: 50px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #aaa4b0;
}

.nav-item:hover {
  border-color: rgba(255, 255, 255, .06);
  color: #f4eff6;
  background: rgba(255, 255, 255, .035);
}

.nav-item.active {
  border-color: rgba(255, 96, 127, .2);
  color: #fff;
  background:
    linear-gradient(100deg, rgba(255, 96, 127, .17), rgba(154, 104, 255, .08)),
    rgba(255, 255, 255, .025);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 8px 24px rgba(0, 0, 0, .15);
}

.nav-item.active::before {
  position: absolute;
  left: -2px;
  width: 3px;
  height: 23px;
  border-radius: 0 4px 4px 0;
  content: "";
  background: linear-gradient(#ff7691, #a06dff);
  box-shadow: 0 0 14px rgba(255, 96, 127, .45);
}

.nav-icon {
  width: 34px;
  height: 34px;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}

.nav-item.active .nav-icon {
  border-color: rgba(255, 124, 150, .22);
  color: #ff9caf;
  background: rgba(255, 96, 127, .1);
}

.nav-copy strong { font-size: .83rem; }
.nav-copy small { margin-top: 1px; color: #77717e; font-size: .63rem; }
.nav-item.active .nav-copy small { color: #a99fab; }

.sidebar-footer {
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .065);
}

.user-chip {
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

.user-chip img {
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .07);
}

.main-content {
  width: 100%;
  min-height: 100dvh;
  padding: 0 clamp(20px, 3.1vw, 52px) 56px;
}

.topbar {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: 102px;
  margin: 0 calc(clamp(20px, 3.1vw, 52px) * -1) 26px;
  padding: 18px clamp(20px, 3.1vw, 52px) 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(to bottom, rgba(8, 6, 10, .94), rgba(8, 6, 10, .78));
  backdrop-filter: blur(24px) saturate(130%);
}

.topbar-heading { align-items: center; }
.topbar-heading .eyebrow { margin-bottom: 5px; }

.topbar-actions {
  gap: 9px;
}

.topbar-context {
  padding: 0 4px;
  color: #77717e;
  font-size: .69rem;
}

.experience-icon-button,
.motion-toggle {
  min-width: 44px;
  min-height: 42px;
  border-color: rgba(255, 255, 255, .11);
  border-radius: 13px;
  color: #d5ced8;
  background: rgba(255, 255, 255, .025);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.experience-icon-button:hover,
.motion-toggle:hover {
  border-color: rgba(255, 118, 145, .25);
  color: #fff;
  background: rgba(255, 96, 127, .075);
}

.pill {
  min-height: 30px;
  padding: 6px 11px;
  border-color: rgba(255, 255, 255, .1);
  color: var(--muted-strong);
  background: rgba(255, 255, 255, .025);
  font-size: .7rem;
  font-weight: 720;
}

.pill::before { box-shadow: 0 0 10px currentColor; }

.usage-capacity-strip {
  width: min(100%, 1440px);
  margin: 0 auto 16px;
  padding: 12px 15px;
  border-color: rgba(255, 255, 255, .1);
  border-radius: 15px;
  background:
    linear-gradient(100deg, rgba(154, 104, 255, .055), rgba(255, 96, 127, .035)),
    rgba(255, 255, 255, .022);
}

.usage-capacity-strip strong { font-size: .82rem; }
.usage-capacity-strip small { margin-top: 1px; font-size: .73rem; }

.view {
  width: min(100%, 1440px);
  margin-inline: auto;
  animation: update37-view-in 280ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes update37-view-in {
  from { opacity: 0; transform: translateY(7px); }
}

.command-hero,
.update-command-deck,
.usage-command-bar {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 86% 22%, rgba(154, 104, 255, .18), transparent 25rem),
    radial-gradient(circle at 14% 0%, rgba(255, 96, 127, .14), transparent 28rem),
    linear-gradient(145deg, rgba(26, 20, 32, .96), rgba(13, 11, 17, .97));
  box-shadow: var(--surface-shadow), inset 0 1px rgba(255, 255, 255, .055);
}

.command-hero {
  min-height: 250px;
  margin-bottom: 18px;
  padding: clamp(28px, 4vw, 52px);
}

.command-hero-copy {
  max-width: 730px;
}

.command-hero h2 {
  max-width: 680px;
  margin: 15px 0 14px;
  font-size: clamp(1.7rem, 3vw, 3rem);
  font-weight: 770;
  line-height: 1.08;
}

.command-hero p {
  max-width: 640px;
  color: #b4adb8;
  font-size: clamp(.92rem, 1.3vw, 1.04rem);
}

.hero-status {
  border-color: rgba(97, 223, 165, .2);
  color: #a5edc9;
  background: rgba(97, 223, 165, .06);
}

.hero-visual { opacity: .9; filter: saturate(.85); }

.metrics-grid {
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card,
.panel,
.channel-card,
.health-server-card,
.cluster-worker-card {
  border-color: rgba(255, 255, 255, .085);
  background:
    linear-gradient(150deg, rgba(23, 19, 28, .96), rgba(14, 12, 18, .96));
  box-shadow: 0 12px 38px rgba(0, 0, 0, .17), inset 0 1px rgba(255, 255, 255, .025);
}

.metric-card {
  position: relative;
  min-height: 128px;
  padding: 20px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.metric-card::after {
  position: absolute;
  right: -24px;
  bottom: -34px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(154, 104, 255, .13), transparent 67%);
}

.metric-label {
  color: #aaa3ae;
  font-size: .69rem;
  font-weight: 760;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.metric-card strong {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  color: #fff;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.1;
}

.metric-detail {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  font-size: .72rem;
}

.panel {
  border-radius: var(--radius-lg);
}

.panel-header {
  min-height: 76px;
  padding: 19px 21px;
  border-bottom-color: rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent);
}

.panel-header p.muted {
  max-width: 740px;
  margin: 6px 0 0;
  font-size: .8rem;
  line-height: 1.45;
}

.two-column-grid,
.channel-card-grid,
.cluster-status-grid,
.workspace-management-grid,
.usage-overview-grid {
  gap: 16px;
}

.section-toolbar {
  min-height: 54px;
  margin-bottom: 16px;
}

.section-toolbar > p,
.section-toolbar > div > p {
  margin-bottom: 0;
  color: var(--muted);
}

.button,
.icon-button,
.file-button,
.file-clear-button {
  min-height: 42px;
  border-radius: 12px;
  font-size: .76rem;
  font-weight: 720;
}

.button.primary {
  border-color: rgba(255, 255, 255, .1);
  background: linear-gradient(120deg, #f35775, #b05edc 58%, #7e64ef);
  box-shadow: 0 10px 30px rgba(195, 74, 126, .2), inset 0 1px rgba(255, 255, 255, .2);
}

.button.primary:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.08);
  box-shadow: 0 13px 34px rgba(195, 74, 126, .3), inset 0 1px rgba(255, 255, 255, .24);
}

.button.ghost,
.icon-button,
.file-button,
.file-clear-button {
  border-color: rgba(255, 255, 255, .1);
  color: #cbc5cf;
  background: rgba(255, 255, 255, .025);
}

.button.ghost:hover,
.icon-button:hover,
.file-button:hover,
.file-clear-button:hover {
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.button.danger-outline {
  border-color: rgba(255, 113, 135, .25);
  color: #ff9bae;
  background: rgba(255, 113, 135, .045);
}

select,
input,
textarea {
  min-height: 43px;
  border-color: rgba(255, 255, 255, .1);
  border-radius: 12px;
  color: #f2eef4;
  background: rgba(4, 3, 6, .44);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}

select:hover,
input:hover,
textarea:hover {
  border-color: rgba(255, 255, 255, .16);
}

select:focus,
input:focus,
textarea:focus {
  border-color: rgba(255, 112, 141, .66);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

input::placeholder,
textarea::placeholder { color: #736c78; }

.details-list { padding: 9px 21px 18px; }
.details-list div { border-bottom-color: rgba(255, 255, 255, .065); }
.details-list dt { color: #8e8793; font-size: .78rem; }
.details-list dd { color: #d9d3dc; font-size: .82rem; }

.log-entry {
  border-bottom-color: rgba(255, 255, 255, .065);
}

.warning-box,
.info-box,
.workspace-policy-note {
  border-radius: var(--radius-md);
}

.channel-card {
  border-radius: var(--radius-lg);
}

.chat-layout {
  grid-template-columns: 294px minmax(0, 1fr);
  gap: 14px;
  height: calc(100dvh - 144px);
}

.chat-list-panel,
.chat-panel {
  border-radius: 20px;
}

.chat-list-panel {
  background:
    linear-gradient(180deg, rgba(24, 20, 29, .97), rgba(13, 12, 16, .98));
}

.chat-list-panel .panel-header {
  min-height: 82px;
}

.chat-channel-list { padding: 8px; }

.chat-channel-button {
  min-height: 72px;
  margin-bottom: 4px;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 14px;
}

.chat-channel-button:hover {
  border-color: rgba(255, 255, 255, .055);
  background: rgba(255, 255, 255, .035);
}

.chat-channel-button.active {
  border-color: rgba(255, 96, 127, .22);
  background:
    linear-gradient(105deg, rgba(255, 96, 127, .12), rgba(154, 104, 255, .06)),
    rgba(255, 255, 255, .025);
  box-shadow: inset 3px 0 #e45e88;
}

.channel-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  color: #ff8ba3;
  background: rgba(255, 255, 255, .035);
}

.chat-header {
  min-height: 106px;
  padding: 18px;
  border-bottom-color: rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent);
}

.chat-header h2 { font-size: 1.15rem; }

.workspace-agent-panel,
.live-job-panel {
  border-color: rgba(255, 255, 255, .085);
  background: rgba(255, 255, 255, .02);
}

.live-job-panel {
  border-color: rgba(154, 104, 255, .2);
  background:
    linear-gradient(115deg, rgba(154, 104, 255, .07), rgba(255, 96, 127, .035)),
    rgba(0, 0, 0, .12);
}

.live-response {
  border: 1px solid rgba(255, 255, 255, .045);
  background: rgba(0, 0, 0, .26);
}

.chat-messages {
  gap: 15px;
  padding: 22px 24px;
  background:
    radial-gradient(circle at 85% 10%, rgba(154, 104, 255, .025), transparent 25rem),
    rgba(3, 2, 5, .14);
}

.message {
  max-width: min(790px, 84%);
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 17px;
  color: #e9e4ec;
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}

.message.user {
  border-color: rgba(255, 118, 145, .18);
  background:
    linear-gradient(135deg, rgba(208, 68, 109, .35), rgba(115, 66, 151, .28)),
    rgba(255, 255, 255, .025);
}

.message.assistant {
  background: rgba(25, 21, 30, .96);
}

.message.system {
  border-color: rgba(246, 200, 107, .18);
  background: rgba(246, 200, 107, .055);
}

.message-meta {
  color: #8e8794;
  font-size: .69rem;
}

.message-meta strong { color: #f4eff6; }

.chat-composer {
  padding: 13px 14px 14px;
  border-top-color: rgba(255, 255, 255, .075);
  background: rgba(10, 8, 12, .92);
}

.chat-composer textarea {
  min-height: 76px;
  border-radius: 14px;
  background: rgba(4, 3, 6, .62);
}

.modal {
  border-color: rgba(255, 255, 255, .13);
  border-radius: 22px;
  background:
    linear-gradient(150deg, rgba(25, 21, 30, .99), rgba(13, 11, 16, .99));
  box-shadow: var(--elevated-shadow), inset 0 1px rgba(255, 255, 255, .05);
}

.modal::backdrop {
  background: rgba(3, 2, 5, .78);
  backdrop-filter: blur(10px) saturate(70%);
}

.modal-header,
.modal-actions {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .012);
}

.modal-header { align-items: center; }

.experience-modal,
.change-review-modal,
.conversation-modal {
  border-radius: 24px;
}

.experience-item,
.release-catalog-card,
.backup-card,
.update-preview-card,
.approval-card,
.change-record,
.memory-card,
.usage-context-card,
.health-server-card {
  border-color: rgba(255, 255, 255, .085);
  border-radius: 15px;
  background: rgba(255, 255, 255, .025);
}

.experience-item:hover,
button.experience-item:hover,
.release-catalog-card:hover {
  border-color: rgba(255, 118, 145, .2);
  background: rgba(255, 255, 255, .045);
}

.experience-tabs {
  border-color: rgba(255, 255, 255, .085);
  border-radius: 13px;
  background: rgba(0, 0, 0, .16);
}

.experience-tabs button {
  border-radius: 9px;
}

.experience-tabs button.active {
  border-color: rgba(255, 118, 145, .22);
  background: linear-gradient(120deg, rgba(255, 96, 127, .14), rgba(154, 104, 255, .09));
}

.update-command-deck,
.usage-command-bar {
  margin-bottom: 18px;
}

.release-catalog-list,
.log-list,
.approval-list,
.change-record-list,
.backup-list {
  scrollbar-gutter: stable;
}

.update-status-card,
.deployment-progress,
.verification-history-list {
  color: #d8d1dc;
}

.app-launch-screen {
  gap: 24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 96, 127, .2), transparent 18rem),
    radial-gradient(circle at 62% 52%, rgba(154, 104, 255, .15), transparent 25rem),
    #09070d;
}

.launch-identity {
  width: 144px;
  height: 144px;
}

.launch-identity img {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px;
}

.launch-ring {
  border-top-color: #ff6685;
  border-right-color: rgba(166, 105, 255, .78);
}

.launch-copy strong { letter-spacing: -.025em; }

.view-loading-overlay {
  border-color: rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(18, 15, 22, .94);
  box-shadow: var(--elevated-shadow);
}

.login-screen {
  background:
    linear-gradient(90deg, rgba(8, 6, 10, .45), rgba(8, 6, 10, .8)),
    url("/assets/mini-dark-control-background.png?v=2.39.4") center / cover fixed;
}

.login-shell {
  border-color: rgba(255, 255, 255, .1);
  border-radius: 28px;
  background: rgba(10, 8, 13, .84);
  box-shadow: 0 38px 120px rgba(0, 0, 0, .52);
  backdrop-filter: blur(30px) saturate(115%);
}

.login-brandbar,
.login-footer {
  border-color: rgba(255, 255, 255, .08);
}

.login-intro h1 {
  max-width: 770px;
  font-size: clamp(2.45rem, 5.2vw, 5.3rem);
  line-height: .98;
}

.login-intro h1 span {
  color: transparent;
  background: linear-gradient(100deg, #ff718c, #d26dba 48%, #a77aff);
  -webkit-background-clip: text;
  background-clip: text;
}

.login-intro-copy { color: #bab2be; }

.login-feature-grid article {
  border-color: rgba(255, 255, 255, .085);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
}

.login-auth-panel {
  border-color: rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: rgba(12, 10, 15, .78);
}

.login-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.login-discord-button {
  border-radius: 13px;
}

@media (max-width: 1180px) {
  :root { --sidebar-width: 260px; }
  .main-content { padding-inline: 24px; }
  .topbar { margin-inline: -24px; padding-inline: 24px; }
  .topbar-context { display: none; }
  .command-hero { min-height: 220px; }
  .chat-layout { grid-template-columns: 276px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 82px minmax(0, 1fr); }
  .sidebar { padding-inline: 12px; }
  .brand-copy,
  .sidebar-system-card > div,
  .nav-copy,
  .nav-section-label,
  .sidebar-footer .button span {
    display: none;
  }
  .brand-row { justify-content: center; padding-inline: 0; }
  .sidebar-system-card { justify-content: center; min-height: 48px; padding: 0; }
  .nav-list { align-items: stretch; }
  .nav-item {
    display: grid;
    min-height: 48px;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 6px;
  }
  .nav-item.active::before { left: -12px; }
  .sidebar-footer .button { min-width: 44px; padding-inline: 8px; }
  .user-chip { justify-content: center; padding: 8px; }
  .user-chip > div { display: none; }
  .chat-layout { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body {
    font-size: 14px;
    background:
      radial-gradient(circle at 50% 0%, rgba(159, 67, 121, .14), transparent 25rem),
      #08070a;
  }

  body::before { display: none; }

  .app-shell { display: block; }

  .sidebar {
    width: min(88vw, 316px);
    padding:
      max(16px, env(safe-area-inset-top))
      14px
      max(14px, env(safe-area-inset-bottom));
    box-shadow: 24px 0 80px rgba(0, 0, 0, .58);
  }

  .brand-row {
    justify-content: flex-start;
    padding: 0 4px 14px;
  }

  .brand-copy,
  .sidebar-system-card > div,
  .nav-copy,
  .nav-section-label,
  .sidebar-footer .button span {
    display: block;
  }

  .sidebar-system-card { justify-content: flex-start; padding: 11px 12px; }
  .nav-list { align-items: stretch; }
  .nav-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    place-items: initial;
    min-height: 54px;
    padding: 8px 10px;
  }
  .nav-item.active::before { left: -1px; }
  .user-chip { justify-content: flex-start; }
  .user-chip > div { display: block; }

  .main-content {
    padding: 0 12px max(26px, env(safe-area-inset-bottom));
  }

  .topbar {
    min-height: calc(72px + env(safe-area-inset-top));
    margin: 0 -12px 14px;
    padding:
      max(10px, env(safe-area-inset-top))
      12px
      10px;
  }

  .topbar h1 { font-size: 1.45rem; }
  .topbar-heading .eyebrow { font-size: .58rem; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .experience-icon-button { min-width: 40px; min-height: 40px; }
  #connection-pill { max-width: 102px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .usage-capacity-strip {
    margin-bottom: 12px;
    padding: 10px 11px;
  }

  .command-hero {
    min-height: 210px;
    padding: 25px 21px;
    border-radius: 20px;
  }

  .command-hero h2 { font-size: clamp(1.55rem, 8.4vw, 2.25rem); }
  .hero-visual { opacity: .32; }

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

  .metric-card {
    min-height: 112px;
    padding: 15px;
    border-radius: 16px;
  }

  .metric-card strong { font-size: 1.38rem; }
  .metric-detail { font-size: .67rem; }

  .panel,
  .channel-card,
  .chat-list-panel,
  .chat-panel {
    border-radius: 17px;
  }

  .panel-header {
    min-height: 68px;
    padding: 16px;
  }

  .section-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .section-toolbar .button,
  .section-toolbar .filter-row {
    width: 100%;
  }

  .chat-layout {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .chat-header {
    min-height: 0;
    padding: 16px;
  }

  .chat-messages {
    min-height: 360px;
    padding: 16px 13px;
  }

  .message {
    max-width: 92%;
    padding: 12px 13px;
  }

  .chat-composer {
    padding: 11px;
  }

  .modal,
  .experience-modal,
  .change-review-modal,
  .conversation-modal {
    border-radius: 0;
  }

  .form-grid {
    padding: 16px;
  }

  .login-screen {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    background-position: 58% center;
  }

  .login-shell { border-radius: 20px; }
  .login-intro h1 { font-size: clamp(2.3rem, 13vw, 4rem); }
}

@media (max-width: 430px) {
  .metrics-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-card {
    min-height: 96px;
    padding: 14px 15px;
  }
  .metric-card strong { margin-top: 14px; }
  .topbar-actions #connection-pill { width: 12px; min-width: 12px; height: 12px; padding: 0; border: 0; font-size: 0; }
  .topbar-actions #connection-pill::before { width: 9px; height: 9px; }
  .command-hero { min-height: 225px; }
}

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

/* Update 2.39.3 — keep the iOS/PWA navigation drawer outside the blur layer. */
@media (max-width: 760px) {
  .app-shell.nav-open .sidebar {
    z-index: 90;
    isolation: isolate;
  }

  .app-shell.nav-open .nav-backdrop {
    inset: 0 0 0 min(88vw, 316px);
    z-index: 70;
    width: auto;
    height: 100dvh;
  }
}
/* 2.40.0 governed workspace files, terminal sessions, and task controls */
.live-job-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.workspace-tools-modal { width: min(1080px, calc(100vw - 32px)); max-height: min(860px, calc(100dvh - 32px)); overflow: hidden; }
.workspace-files-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(180px, 300px); gap: 10px; align-items: center; padding: 0 20px 14px; }
.workspace-files-toolbar code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); }
.workspace-recent-changes { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.workspace-tools-grid { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.4fr); min-height: 440px; max-height: 65dvh; border-top: 1px solid var(--line); }
.workspace-files-list { overflow: auto; padding: 10px; border-right: 1px solid var(--line); }
.workspace-file-row { width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; }
.workspace-file-row:hover { background: rgba(255, 255, 255, .045); }
.workspace-file-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-file-row small { color: var(--text-muted); }
.workspace-file-row.protected { opacity: .65; cursor: not-allowed; }
.workspace-file-preview { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.workspace-file-preview .panel-header { padding: 12px 16px; }
.workspace-file-preview pre, .workspace-terminal-output { flex: 1; min-height: 320px; margin: 0; padding: 16px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(2, 5, 12, .72); color: #dbe7ff; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.workspace-terminal-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 14px 20px; }
.workspace-terminal-output { margin: 0 20px; border: 1px solid var(--line); border-radius: 10px; max-height: 52dvh; }
@media (max-width: 720px) {
  .workspace-tools-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .workspace-files-toolbar { grid-template-columns: auto minmax(0, 1fr); padding-inline: 12px; }
  .workspace-files-toolbar input { grid-column: 1 / -1; }
  .workspace-tools-grid { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 38%) minmax(260px, 62%); max-height: 68dvh; }
  .workspace-files-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .workspace-terminal-form { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 12px; }
  .workspace-terminal-form .danger-outline { grid-column: 1 / -1; }
  .workspace-terminal-output { margin-inline: 12px; }
}
/* Update 2.41 unified Action Center */
.action-center-list { display: grid; gap: .7rem; }
.action-center-item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .85rem; padding: .9rem 1rem; border: 1px solid var(--border, rgba(255,255,255,.12)); border-left: 3px solid var(--muted, #777); border-radius: var(--radius-md, 12px); background: rgba(255,255,255,.025); color: inherit; text-align: left; cursor: pointer; }
.action-center-item:hover, .action-center-item:focus-visible { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.action-center-item.critical { border-left-color: var(--danger, #ef4444); }
.action-center-item.warning { border-left-color: var(--warning, #f59e0b); }
.action-center-item > span:nth-child(2) { min-width: 0; display: grid; gap: .2rem; }
.action-center-item small { color: var(--text-muted, #a7a7b0); overflow-wrap: anywhere; }
.action-center-item time { color: var(--text-muted, #a7a7b0); white-space: nowrap; font-size: .78rem; }
@media (max-width: 700px) { .action-center-item { grid-template-columns: auto minmax(0, 1fr) auto; } .action-center-item time { grid-column: 2; white-space: normal; } }
/* Update 42 — consolidated operations and mobile quick actions */
.mobile-quick-bar { display: none; }
#control-assurance-output { min-height: 180px; max-height: 420px; overflow: auto; white-space: pre-wrap; }
#control-resource-list .log-entry code { overflow-wrap: anywhere; color: var(--text-muted); }
html[data-information-density="compact"] .panel, html[data-information-density="compact"] .metric-card { padding-block: 12px; }
html[data-navigation-mode="compact"] .nav-copy small { display: none; }
html[data-navigation-mode="compact"] .nav-item { min-height: 42px; }
html[data-chat-layout="wide"] #view-chats { max-width: none; }
html[data-chat-layout="split"] .chat-layout { grid-template-columns: minmax(230px, .55fr) minmax(420px, 1.1fr) minmax(260px, .65fr); }
.chat-split-review { display: none; min-width: 0; }
html[data-chat-layout="split"] .chat-split-review { display: flex; flex-direction: column; gap: 12px; }
.chat-split-review .terminal-output { min-height: 260px; max-height: 60vh; overflow: auto; white-space: pre-wrap; }
@media (max-width: 1100px) { html[data-chat-layout="split"] .chat-layout { grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); } html[data-chat-layout="split"] .chat-split-review { grid-column: 1 / -1; } }
html[data-notification-presentation="compact"] .experience-item small { display: none; }
html[data-notification-presentation="quiet"] #notification-unread-count { display: none; }
.dashboard-layout-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.dashboard-widget { position: relative; }
.dashboard-widget[data-widget-size="small"] { max-width: 720px; }
.dashboard-widget[data-widget-size="large"] { width: 100%; }
.widget-controls { position: absolute; z-index: 4; top: 8px; right: 8px; display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(8,6,13,.92); border: 1px solid var(--line); }
.widget-controls button { border: 0; border-radius: 7px; padding: 5px 8px; color: var(--text); background: rgba(255,255,255,.07); }
@media (max-width: 720px) {
  .main-content { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .mobile-quick-bar { position: fixed; z-index: 65; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: rgba(12, 9, 19, .94); box-shadow: 0 12px 42px rgba(0,0,0,.42); backdrop-filter: blur(22px); }
  .mobile-quick-bar button { min-width: 0; min-height: 48px; border: 0; border-radius: 12px; color: var(--text); background: transparent; display: grid; place-items: center; gap: 1px; font: inherit; }
  .mobile-quick-bar button:active { background: rgba(123,140,255,.18); }
  .mobile-quick-bar span { font-size: .65rem; color: var(--text-muted); }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .two-column-grid, .chat-layout, .updates-grid { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); }
}
/* Update 47.1 — suspend continuous visual work while the dashboard tab is hidden. */
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after {
  animation-play-state: paused !important;
}