/* =============================================================================
   SHELL — app chrome: topbar, workspace, side panels, footer, mobile nav.
   Layout is flex column on <body>; the middle region scrolls, never the page.
   ========================================================================== */
@layer shell {

body {
  height: 100vh; height: 100svh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  overscroll-behavior: none;
}
body.drawer-open { overflow: hidden; touch-action: none; }

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  position: relative; z-index: var(--z-bar); flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-h); padding: 0 max(var(--space-6), env(safe-area-inset-right)) 0 max(var(--space-6), env(safe-area-inset-left));
  background: rgba(var(--bg-rgb), .9); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md));
  border-bottom: 1px solid var(--border-subtle);
}
.topbar-logo { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: -.03em; color: var(--text-primary); text-decoration: none; }
.logo-mark { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); transition: opacity var(--duration-base); }
.logo-mark svg { width: 14px; height: 14px; }
.topbar-logo:hover .logo-mark { opacity: .85; }
.topbar-nav { display: flex; gap: var(--space-1); margin-left: var(--space-2); }
.topbar-link { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--text-base); text-decoration: none; transition: color var(--duration-base), background-color var(--duration-base); }
.topbar-link:hover { color: var(--text-primary); }
.topbar-link[aria-current="page"] { color: var(--text-primary); background: var(--surface-raised); }
.topbar-spacer { flex: 1; }
.topbar-divider { flex-shrink: 0; width: 1px; height: 16px; background: var(--border); }
.version-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2-5); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); color: var(--text-secondary); font: var(--weight-regular) var(--text-xs)/1 var(--font-mono); text-decoration: none; transition: border-color var(--duration-base), color var(--duration-base); }
.version-pill:hover { border-color: var(--border-hover); color: var(--text-primary); }

.theme-toggle .theme-icon-light { display: none; }
.theme-toggle .theme-icon-dark  { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-dark  { display: none; }

/* ── Workspace ─────────────────────────────────────────────────────────── */
.workspace { position: relative; flex: 1; display: flex; overflow: hidden; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.overlay { display: none; position: fixed; inset: 0; z-index: calc(var(--z-panel) - 1); height: 100dvh; background: var(--overlay); opacity: 0; backdrop-filter: blur(var(--blur-sm)); transition: opacity var(--duration-slow) var(--ease-soft); }
.overlay.visible { opacity: 1; }

/* ── Panel primitives ──────────────────────────────────────────────────── */
.panel-left, .panel-right { z-index: var(--z-panel); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; background: var(--surface); transition: width var(--duration-slow) var(--ease-soft); }
.panel-hd { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; height: 44px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); cursor: pointer; user-select: none; transition: background-color var(--duration-base); }
.panel-hd:hover { background: var(--accent-subtle); }
.panel-hd-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--weight-regular) var(--text-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
.panel-hd-chevron { display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--duration-slow) var(--ease-soft); }

/* ── Left panel ────────────────────────────────────────────────────────── */
.panel-left { width: var(--panel-w); border-right: 1px solid var(--border-subtle); }
.panel-left.collapsed { width: var(--panel-w-rail); }
.panel-left.collapsed :is(.panel-hd-title, .panel-search-wrap, .nav-label, .nav-item-text, .nav-badge, .nav-indent-pad) { display: none; }
.panel-left.collapsed .panel-hd { justify-content: center; padding: 0; }
.panel-left.collapsed .panel-hd-chevron { transform: rotate(180deg); }
.panel-left.collapsed .nav-item { justify-content: center; gap: 0; padding: 0; }
.panel-left.collapsed .nav-indent { padding-left: 0; }

.panel-search-wrap { padding: var(--space-3) var(--space-3) var(--space-2); }
.panel-search, .field-val { border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); transition: border-color var(--duration-base) var(--ease-soft), box-shadow var(--duration-base); }
.panel-search { width: 100%; height: var(--control-h-sm); padding: 0 var(--space-3); color: var(--text-primary); font: inherit; font-size: var(--text-sm); outline: none; }
.panel-search::placeholder { color: var(--text-muted); }
.panel-search:hover, .field-val:hover { border-color: var(--border-hover); }
.panel-search:focus, .field-val:focus-within { border-color: var(--border-hover); box-shadow: 0 0 0 3px var(--accent-subtle); }

.panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 var(--space-2) var(--space-4); }
.nav-section { margin-top: var(--space-4); }
.nav-section:first-child { margin-top: var(--space-2); }
.nav-label { padding: var(--space-2) var(--space-3); font: var(--weight-regular) var(--text-2xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
.nav-item { position: relative; display: flex; align-items: center; gap: var(--space-2-5); height: var(--control-h-sm); margin: 1px 0; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1; cursor: pointer; transition: background-color var(--duration-base), color var(--duration-base), border-color var(--duration-base); }
.nav-item:hover { color: var(--text-primary); background: var(--accent-subtle); }
.nav-item.active { background: var(--surface-raised); border-color: var(--border); color: var(--text-primary); }
.nav-item .icon { color: var(--text-muted); transition: color var(--duration-base); }
.nav-item:hover .icon, .nav-item.active .icon { color: var(--text-primary); }
.nav-item-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-indent { padding-left: var(--space-8); }
.nav-badge { margin-left: auto; }
.nav-item.active .chip:not(.chip-brand):not(.chip-green):not(.chip-amber):not(.chip-red) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Right panel (inspector) ───────────────────────────────────────────── */
.panel-right { width: var(--right-w); border-left: 1px solid var(--border-subtle); }
.panel-right.collapsed { width: 0; border-left-width: 0; }
.panel-right.collapsed .panel-hd-chevron { transform: rotate(180deg); }
.right-collapse-tab { position: absolute; z-index: calc(var(--z-panel) + 1); right: 0; top: 50%; translate: 0 -50%; display: flex; align-items: center; justify-content: center; width: 28px; height: 64px; border: 1px solid var(--border); border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--surface); color: var(--text-muted); box-shadow: var(--shadow-subtle); cursor: pointer; opacity: 0; pointer-events: none; transition: background-color var(--duration-base), color var(--duration-base), opacity var(--duration-slow); }
.workspace:has(.panel-right.collapsed) .right-collapse-tab { opacity: 1; pointer-events: auto; }
.right-collapse-tab:hover { background: var(--surface-raised); color: var(--text-primary); }

.right-tabs { display: flex; flex-shrink: 0; align-items: center; height: var(--control-h-md); padding: 0 var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.right-tab { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: color var(--duration-base), border-color var(--duration-base); }
.right-tab:hover { color: var(--text-primary); }
.right-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.right-body { flex: 1; overflow-y: auto; }
.right-section { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.right-section:last-child { border-bottom: 0; }
.right-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); font: var(--weight-regular) var(--text-2xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
.right-section-title .chev { cursor: pointer; }
.field-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.field-row:last-child { margin-bottom: 0; }
.field-label { flex-shrink: 0; width: 72px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); line-height: 1; }
.field-val { flex: 1; display: flex; align-items: center; height: var(--control-h-sm); padding: 0 var(--space-2-5); }
.field-val input { width: 100%; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: var(--text-sm); line-height: 1; outline: none; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.activity-list { display: flex; flex-direction: column; gap: var(--space-4); }
.activity-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.act-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 5px; border-radius: var(--radius-full); background: var(--border-hover); box-shadow: 0 0 0 3px var(--surface); }
.act-dot.ac { background: var(--info); }
.act-dot.br { background: var(--success); }
.act-body { display: flex; flex-direction: column; gap: var(--space-0-5); }
.act-text { font-size: var(--text-sm); color: var(--text-primary); }
.act-text strong { font-weight: var(--weight-semibold); }
.act-time { font: var(--weight-regular) var(--text-xs)/1.5 var(--font-mono); color: var(--text-muted); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.app-footer { position: relative; z-index: calc(var(--z-bar) - 1); flex-shrink: 0; display: flex; align-items: center; gap: var(--space-4); min-height: var(--footer-h); padding: 0 var(--space-6); background: rgba(var(--bg-rgb), .9); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-muted); }
.app-footer a, .app-footer__link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--duration-fast), text-decoration-color var(--duration-fast); }
.app-footer a:hover, .app-footer__link:hover { color: var(--text-primary); text-decoration-color: currentColor; }
.app-footer__link { appearance: none; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.footer-sep { width: 1px; height: 12px; background: var(--border); }
.footer-spacer { flex: 1; }
.footer-meta { display: inline-flex; align-items: center; gap: var(--space-1-5); font-family: var(--font-mono); }
.footer-meta::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--success); animation: pulse-subtle 3s infinite; }

/* ── Mobile nav ────────────────────────────────────────────────────────── */
.mobile-nav { display: none; z-index: var(--z-bar); flex-shrink: 0; height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(var(--bg-rgb), .9); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border-top: 1px solid var(--border-subtle); }
.mobile-nav-items { display: flex; flex: 1; width: 100%; height: 100%; }
.mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); color: var(--text-muted); font-size: var(--text-2xs); font-weight: var(--weight-medium); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-base); }
.mobile-nav-icon { display: grid; place-items: center; width: 36px; height: 32px; border-radius: var(--radius-md); transition: background-color var(--duration-base), color var(--duration-base); }
.mobile-nav-item:hover, .mobile-nav-item.active { color: var(--text-primary); }
.mobile-nav-item.active .mobile-nav-icon { background: var(--surface-raised); }
.mobile-nav-item.brand-item.active .mobile-nav-icon { background: var(--accent); color: var(--on-accent); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .breadcrumb > :not(:last-child) { display: none; }
}
@media (max-width: 640px) {
  .mobile-nav { display: flex; order: 1; }
  .app-footer { order: 2; flex-wrap: wrap; height: auto; min-height: 40px; padding: var(--space-3) var(--space-4); row-gap: var(--space-2); }
  .topbar { padding: 0 var(--space-4); gap: var(--space-2); }
  .nav-item { height: 40px; }
  .panel-left, .panel-right { position: fixed; top: 0; bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px)); width: min(86vw, 320px) !important; box-shadow: none; overscroll-behavior: contain; transition: transform var(--duration-slow) var(--ease-soft), box-shadow var(--duration-slow); }
  .panel-left  { left: 0;  transform: translateX(-100%); }
  .panel-right { right: 0; transform: translateX(100%); width: min(86vw, 340px) !important; }
  .panel-left.mobile-open, .panel-right.mobile-open { transform: none; box-shadow: var(--shadow-modal); }
  .right-collapse-tab { display: none; }
  .overlay { display: block; pointer-events: none; }
  .overlay.visible { pointer-events: auto; }
  .topbar-divider, .topbar-nav, .avatars, .breadcrumb, .version-pill, .hide-mobile { display: none !important; }
}
@media (max-width: 380px) {
  .topbar-logo span { display: none; }
}
}