/* Quiet Operations Cockpit v1 — visual layer only.
 * Existing application routes, auth/session handling, chat/attachment scope,
 * meeting lifecycle, recovery and Shade integrations remain in app.js.
 */
:root {
  --background: oklch(0.16 0.012 240);
  --foreground: oklch(0.93 0.008 240);
  --rail: oklch(0.145 0.012 240);
  --surface-1: oklch(0.19 0.013 240);
  --surface-2: oklch(0.225 0.014 240);
  --surface-3: oklch(0.26 0.015 240);
  --surface-hover: oklch(0.29 0.016 240);
  --card: oklch(0.225 0.014 240);
  --card-foreground: oklch(0.93 0.008 240);
  --popover: oklch(0.26 0.015 240);
  --popover-foreground: oklch(0.93 0.008 240);
  --primary: oklch(0.64 0.09 200);
  --primary-foreground: oklch(0.14 0.02 200);
  --accent: oklch(0.64 0.09 200);
  --accent-foreground: oklch(0.14 0.02 200);
  --secondary: oklch(0.26 0.015 240);
  --secondary-foreground: oklch(0.93 0.008 240);
  --muted: oklch(0.26 0.015 240);
  --muted-foreground: oklch(0.64 0.014 240);
  --destructive: oklch(0.50 0.16 25);
  --destructive-foreground: oklch(0.97 0.01 25);
  --live: oklch(0.50 0.14 320);
  --live-foreground: oklch(0.97 0.01 320);
  --warning: oklch(0.76 0.13 85);
  --success: oklch(0.68 0.11 155);
  --border: oklch(0.31 0.015 240);
  --border-strong: oklch(0.36 0.016 240);
  --input: oklch(0.26 0.015 240);
  --ring: oklch(0.64 0.09 200 / 56%);
  --mention: oklch(0.64 0.09 200 / 18%);
  --thread: oklch(0.64 0.09 200 / 14%);
  --radius: 12px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
}

html, body, #root { background: var(--background); }
button, input, textarea, [role="button"] { border-radius: var(--radius-md); }
button:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Deliberately subtle: preserve density, but make the cockpit's controls feel
 * coherent and calm across desktop and the compact mobile shell. */
@media (min-width: 768px) {
  #root > div > main { box-shadow: inset 1px 0 0 color-mix(in oklab, var(--border), transparent 35%); }
}
@media (max-width: 767px) {
  :root { --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px; }
}