*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--f);
  font-size: var(--md-body);
  font-weight: var(--md-body-weight);
  line-height: var(--md-body-lh);
  color: var(--text);
  /* Longhands: a skin's --shell-bg can be several gradient layers. */
  background-color: var(--bg);
  background-image: var(--shell-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-shadow: var(--text-shadow);
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; position: relative; display: flex; flex-direction: column; }

[x-cloak] { display: none !important; }

/* ── Notification ── */
.shell-notifications {
  position: fixed; bottom: var(--sp-8); left: var(--sp-4); z-index: 20;
  display: flex; flex-direction: column-reverse; gap: var(--sp-2);
  max-width: 320px; margin-bottom: 56px;
}

.notif {
  font: inherit;
  font-size: var(--md-small);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r);
  backdrop-filter: blur(12px);
  cursor: pointer;
  animation: notif-in var(--tr-base) both;
  transition: opacity var(--tr-fast);
}
.notif:hover { opacity: 0.7; }
.notif--info    { background: var(--notif-info-bg);  border: 1px solid var(--notif-info-border);  color: var(--notif-info-text); }
.notif--error   { background: var(--notif-err-bg);   border: 1px solid var(--notif-err-border);   color: var(--notif-err-text); }
.notif--success { background: var(--notif-ok-bg);    border: 1px solid var(--notif-ok-border);    color: var(--notif-ok-text); }

@keyframes notif-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── App: one at a time, filling the room right of the dock. The body's padding
   is the gutter, so the app's glow is not clipped at its own edge. Showing a pane
   restarts its animation, which is the refocus between apps. ── */
.shell-panes { position: relative; z-index: 1; flex: 1; min-height: 0; pointer-events: none; }
.app-pane { position: absolute; inset: 0; display: flex; pointer-events: auto; }
.app-pane__body {
  flex: 1; min-width: 0; min-height: 0; overflow: hidden;
  padding: var(--gutter) var(--gutter) var(--gutter) var(--dock-inset);
  font-size: var(--md-small); line-height: var(--md-body-lh); color: var(--window-text-muted);
}
.app-pane__body > * { animation: glass-refocus var(--dur-switch) ease-out; }
.app-pane__body--starting { display: none; }
@keyframes glass-refocus { from { filter: blur(var(--switch-blur)); opacity: 0.2; } to { filter: blur(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-pane__body > * { animation: none; } }

.app-pane__error {
  position: absolute; top: var(--gutter); right: var(--gutter); bottom: var(--gutter); left: var(--dock-inset);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-6);
  color: var(--window-text); background: var(--window-bg); backdrop-filter: var(--glass-filter);
  border: var(--window-border-w) solid var(--window-border); border-radius: var(--r-panel);
}

/* ── What shows with no app open ── */
.shell-center { position: fixed; z-index: 2; inset: 0 0 0 var(--dock-inset); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.shell-empty, .shell-boot-error {
  pointer-events: auto; padding: var(--sp-6) var(--sp-8); font: inherit;
  color: var(--window-text); background: var(--window-bg); backdrop-filter: var(--glass-filter);
  border: var(--window-border-w) solid var(--window-border); border-radius: var(--r-panel);
  box-shadow: var(--window-shadow), inset 0 1px 0 var(--window-glow);
}
.shell-empty { cursor: pointer; }
.shell-boot-error { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 28rem; }

/* ── Dock: one glass column, each button four states read from variables ── */
.dock {
  position: fixed; left: var(--gutter); top: var(--gutter); z-index: 200;
  display: flex; flex-direction: column; width: var(--dock-btn);
  background: var(--dock-bg); backdrop-filter: var(--glass-filter);
  border: var(--window-border-w) solid var(--dock-border); border-radius: var(--r-panel);
  box-shadow: var(--window-shadow); overflow: hidden;
  box-sizing: content-box;
}
.dock-btn {
  --hue-text: var(--nav-icon); --hue-glow-1: transparent; --hue-glow-2: transparent;
  --strip-core: transparent; --strip-edge: transparent; --strip-glow-1: transparent; --strip-glow-2: transparent;
  --wash: transparent; --shade-a: transparent; --shade-b: transparent; --shade-c: transparent;
  position: relative; flex: none; width: 100%; height: var(--dock-btn); padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; font: inherit; cursor: pointer; user-select: none;
}
.dock-btn + .dock-btn { border-top: 1px solid var(--separator); }
.dock-btn__icon {
  display: block; width: var(--dock-icon); height: var(--dock-icon); background: var(--hue-text);
  filter: drop-shadow(0 0 1px var(--hue-glow-1)) drop-shadow(0 0 2px var(--hue-glow-2));
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  transition: background var(--tr-fast), filter var(--tr-fast);
}
.dock-btn::before {
  content: ""; position: absolute; inset: 1px; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 35% 70% at 0% 50%, var(--wash) 0%, transparent 75%);
  box-shadow: inset 0 4px 12px var(--shade-a), inset 0 -4px 12px var(--shade-b), inset -3px 0 10px var(--shade-c);
}
.dock-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--strip-w); pointer-events: none;
  background: linear-gradient(180deg, var(--strip-edge) 0%, var(--strip-core) 50%, var(--strip-edge) 100%);
  box-shadow: 1px 0 4px var(--strip-edge), 5px 0 15px var(--strip-glow-1), 9px 0 27px var(--strip-glow-2);
}
.dock-btn.is-sleep {
  --hue-text: var(--nav-sleep-icon); --hue-glow-1: var(--nav-sleep-glow-1); --hue-glow-2: var(--nav-sleep-glow-2);
  --strip-core: var(--nav-sleep-strip-core); --strip-edge: var(--nav-sleep-strip-edge);
  --strip-glow-1: var(--nav-sleep-strip-glow-1); --strip-glow-2: var(--nav-sleep-strip-glow-2);
}
.dock-btn.is-sleep::after { opacity: var(--nav-sleep-strip-opacity); }
.dock-btn.is-active {
  --hue-text: var(--nav-active-icon); --hue-glow-1: var(--nav-active-glow-1); --hue-glow-2: var(--nav-active-glow-2);
  --wash: var(--nav-wash); --shade-a: var(--nav-shade-a); --shade-b: var(--nav-shade-b); --shade-c: var(--nav-shade-c);
}
.dock-btn:hover { --hue-text: var(--hover-text); }
.dock-btn:not(.is-active):not(.is-sleep):hover { --hue-glow-1: var(--nav-hover-glow-1); --hue-glow-2: var(--nav-hover-glow-2); }
.dock__lane {
  position: absolute; left: 0; width: var(--strip-w); z-index: 2; pointer-events: none;
  background: var(--lane-bg); box-shadow: var(--lane-shadow);
  transition: top var(--dur-lane) var(--ease-overshoot), height var(--dur-lane) var(--ease-overshoot), opacity var(--tr-fast);
}
.dock__lane.is-traveling { box-shadow: var(--lane-shadow-travel); }
.dock__lane.is-off { opacity: 0; }

/* ── Dock icons: a mask, so the icon takes the button's colour and glow ── */
:root {
  --icon-project: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --icon-chains: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-5 4V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  --icon-agents: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  --icon-run: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4l12 8-12 8z'/%3E%3C/svg%3E");
  --icon-logins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='12' r='3.5'/%3E%3Cpath d='M11 12h10M18 12v3M21 12v2'/%3E%3C/svg%3E");
  --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  --icon-sign-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
}
.dock-btn__icon--project { --icon: var(--icon-project); }
.dock-btn__icon--chains { --icon: var(--icon-chains); }
.dock-btn__icon--agents { --icon: var(--icon-agents); }
.dock-btn__icon--run { --icon: var(--icon-run); }
.dock-btn__icon--logins { --icon: var(--icon-logins); }
.dock-btn__icon--settings { --icon: var(--icon-settings); }
.dock-btn__icon--sign-out { --icon: var(--icon-sign-out); }

/* ── Tooltip: a neon sign, following the cursor (beside the dock on dock buttons) ── */
.tip {
  position: fixed; z-index: 1000; pointer-events: none;
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--f); font-size: var(--md-small); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--neon-core); background: var(--neon-bg);
  border: 1px solid var(--neon-edge); outline: 1px solid var(--neon-light);
  border-radius: var(--r-tag); white-space: nowrap;
  box-shadow: var(--neon-shadow);
  opacity: 0; transform: translateY(2px);
  transition: opacity var(--tr-fast), transform var(--tr-fast);
}
.tip.is-visible { opacity: 1; transform: translateY(0); }

/* ── Badge ── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 var(--sp-1);
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  color: var(--badge-text);
  background: var(--badge-bg);
  border: 1px solid var(--badge-core);
  outline: 1px solid var(--neon-light);
  box-shadow: var(--badge-shadow);
  border-radius: var(--r-tag);
  line-height: 1;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--window-border); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Keyboard focus ── one ring for every control, shell and apps alike
   (apps mount into this document). Mouse clicks do not show it. */
button:focus-visible, select:focus-visible, [role="button"]:focus-visible {
  outline: 1px solid var(--accent); outline-offset: 2px;
}

/* ── Markdown highlighting ── `highlightMd` (scripts/md.js) emits these.
   Chains and Chats share them. */
.md-mark { color: var(--window-text-muted); opacity: 0.4; }
.md-list { color: var(--accent); font-weight: 600; }
.md-h1 { font-size: var(--md-h1); font-weight: 700; color: var(--window-text); }
.md-h2 { font-size: var(--md-h2); font-weight: 700; color: var(--accent); }
.md-h3 { font-size: var(--md-h3); font-weight: 700; color: var(--accent); opacity: 0.8; }
.md-bold { color: var(--accent); font-weight: 700; }
.md-code { color: var(--accent); }
.md-img { display: block; max-width: 100%; max-height: 24em; margin: var(--sp-2) 0; border: 1px solid var(--window-border); border-radius: var(--r); }
.md-img[hidden] { display: none; }
.md-quote { color: var(--accent); opacity: 0.8; }
.md-hr { display: block; border-bottom: 1px solid var(--accent); padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); color: var(--window-text-muted); opacity: 0.4; }
.md-search-hit { background: var(--hit-bg); border-radius: 2px; padding: 0 2px; }

/* ── Density ── */
:root[data-density="compact"] {
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 12px;
  --md-body: 0.875rem;
  --md-code: 0.8125rem;
}

/* ── Notifications strip ── */
.shell-alerts {
  position: relative; z-index: 2; flex: none; margin: var(--gutter) var(--gutter) 0 var(--dock-inset);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
.shell-alerts .notif { font: inherit; font-size: var(--md-small); text-align: left; }
.shell-alerts .notif:disabled { cursor: default; opacity: 1; }
.shell-alerts__count { font-size: var(--md-small); font-weight: 600; color: var(--accent); background: var(--bar-bg); border: 1px solid var(--bar-border); border-radius: var(--r); padding: var(--sp-1) var(--sp-2); }
.shell-alerts__error { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--md-small); color: var(--notif-err-text); background: var(--bar-bg); border-radius: var(--r); padding: var(--sp-1) var(--sp-2); }

/* ── Confirmation over an app ── */
.shell-modal { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: var(--scrim); }
.shell-modal[hidden] { display: none; }
.shell-modal__card { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 28rem; padding: var(--sp-6); color: var(--window-text); background: var(--window-bg); backdrop-filter: var(--glass-filter); border: var(--window-border-w) solid var(--window-border); border-radius: var(--r-panel); box-shadow: var(--window-shadow), inset 0 1px 0 var(--window-glow); }
.shell-modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }