/* Nullink Fluid Design Tokens — Slice 1
 * Spec: /workspace/nullink-design/Nullink-Fluid-Visual-Spec-v1.md §§2–8, §9–17, §21 Slice 1–3
 * Docs: /workspace/nullink-design/SLICE1-TOKENS.md
 *
 * Breakpoints: mobile ≤767 | tablet 768–1099 | desktop 1100–1399 | wide ≥1400
 * Theme: default dark. Light via [data-theme="light"] / .theme-light;
 *        dark via [data-theme="dark"] / .theme-dark (html defaults to data-theme="dark").
 * Brand: --color-brand retains existing Nullink blue (#6ea8fe); purple stays in logo gradient only.
 */

:root {
  /* ---- Spacing (4px rhythm) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --gutter-mobile: var(--space-5);   /* 20px Pixel */
  --gutter-desktop: var(--space-4);  /* 16px; surfaces may use 24 */

  /* ---- Typography ---- */
  --font-ui:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --lh-body: 1.5;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.48);

  /* ---- Breakpoints (reference; media queries use literal px) ---- */
  --bp-mobile: 767px;
  --bp-tablet: 768px;
  --bp-desktop: 1100px;
  --bp-wide: 1400px;

  /* ---- Safe area ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ---- Motion ---- */
  --motion-drawer: 200ms;
  --motion-panel: 200ms;
  --motion-compose: 180ms;
  --motion-sheet: 220ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Panel sizing primitives ---- */
  --nl-roster-min: 220px;
  --nl-roster-preferred: 260px;
  --nl-roster-max: 320px;
  --nl-workspace-min: 280px;
  --nl-workspace-preferred: 360px;
  --nl-workspace-max: 480px;
  --nl-chat-min: 280px;
  --nl-drawer-width: min(86vw, 360px);
  --nl-bottom-nav-height: 64px;
  --nl-chat-header-height: 56px;

  /* Brand — existing Nullink accent (blue); purple remains decorative in logo only */
  --color-brand: #6ea8fe;
  --color-brand-strong: #5b8def;
  --color-brand-soft: rgba(110, 168, 254, 0.18);
  --color-brand-purple: #8b7cf7; /* logo gradient companion only */

  /* Default theme = dark (current Nullink look) */
  --color-bg: #0d1014;
  --color-surface: #15191e;
  --color-surface-2: #1c2127;
  --color-surface-hover: #242a31;
  --color-text: #f1f3f5;
  --color-text-secondary: #aab2bc;
  --color-text-muted: #737d88;
  --color-border: #2b323a;
  --color-success: #45b979;
  --color-warning: #d6a340;
  --color-danger: #e06464;
  --color-info: #6798d0;
  --color-overlay: rgba(0, 0, 0, 0.62);
  --color-bubble-user: #243554;
  --color-bubble-bot: #1a2030;
  --color-success-soft: rgba(69, 185, 121, 0.2);
  --color-warning-soft: rgba(214, 163, 64, 0.2);
  --color-danger-soft: rgba(224, 100, 100, 0.18);
  --color-focus-ring: rgba(110, 168, 254, 0.2);
  --color-mark: rgba(110, 168, 254, 0.35);


  /* ---- Legacy aliases (keep existing CSS working) ---- */
  --bg: var(--color-bg);
  --bg2: var(--color-surface);
  --bg3: var(--color-surface-2);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-brand);
  --accent2: var(--color-brand-strong);
  --user: var(--color-bubble-user);
  --bot: var(--color-bubble-bot);
  --danger: var(--color-danger);
  --ok: var(--color-success);
  --radius: var(--radius-md);
  --font: var(--font-ui);
  --mono: var(--font-mono);
}

/* Explicit dark (overrides OS light) */
[data-theme="dark"],
.theme-dark {
  --color-bg: #0d1014;
  --color-surface: #15191e;
  --color-surface-2: #1c2127;
  --color-surface-hover: #242a31;
  --color-text: #f1f3f5;
  --color-text-secondary: #aab2bc;
  --color-text-muted: #737d88;
  --color-border: #2b323a;
  --color-brand: #6ea8fe;
  --color-brand-strong: #5b8def;
  --color-brand-soft: rgba(110, 168, 254, 0.18);
  --color-success: #45b979;
  --color-warning: #d6a340;
  --color-danger: #e06464;
  --color-info: #6798d0;
  --color-overlay: rgba(0, 0, 0, 0.62);
  --color-bubble-user: #243554;
  --color-bubble-bot: #1a2030;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.48);
}

/* Explicit light (overrides OS dark) */
[data-theme="light"],
.theme-light {
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-2: #f1f3f5;
  --color-surface-hover: #eceff2;
  --color-text: #171a1f;
  --color-text-secondary: #626a73;
  --color-text-muted: #89919a;
  --color-border: #dde1e6;
  --color-brand: #5b8def;
  --color-brand-strong: #4a7ad9;
  --color-brand-soft: rgba(91, 141, 239, 0.14);
  --color-success: #2e9b62;
  --color-warning: #c68a20;
  --color-danger: #c94b4b;
  --color-info: #4d7fb8;
  --color-overlay: rgba(0, 0, 0, 0.42);
  --color-bubble-user: #dbe7fb;
  --color-bubble-bot: #eef1f4;
  --color-success-soft: rgba(46, 155, 98, 0.18);
  --color-warning-soft: rgba(198, 138, 32, 0.18);
  --color-danger-soft: rgba(201, 75, 75, 0.16);
  --color-focus-ring: rgba(91, 141, 239, 0.22);
  --color-mark: rgba(91, 141, 239, 0.28);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-drawer: 0ms;
    --motion-panel: 0ms;
    --motion-compose: 0ms;
    --motion-sheet: 0ms;
  }
}

/* ---- Responsive shell containers / panel primitives ----
 * Mount: #chat-view gets .nl-shell; .sidebar → .nl-shell__roster; .main → .nl-shell__chat
 * Existing feature CSS still applies; these constrain width/overflow only.
 */

.nl-shell {
  display: grid;
  grid-template-columns:
    minmax(var(--nl-roster-min), var(--nl-roster-preferred))
    minmax(var(--nl-chat-min), 1fr);
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  box-sizing: border-box;
}

.nl-shell__roster {
  min-width: 0;
  max-width: var(--nl-roster-max);
  width: 100%;
  overflow: hidden;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.nl-shell__chat {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
}

.nl-shell__workspace {
  display: none;
  min-width: 0;
  max-width: var(--nl-workspace-max);
  overflow: hidden;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
}

/* Mobile ≤767: single column (roster becomes overlay via existing .sidebar rules at ≤767) */
@media (max-width: 767px) {
  .nl-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .nl-shell__roster {
    max-width: none;
  }
}

/* Tablet 768–1099 */
@media (min-width: 768px) and (max-width: 1099px) {
  .nl-shell {
    grid-template-columns:
      clamp(var(--nl-roster-min), 28vw, 280px)
      minmax(var(--nl-chat-min), 1fr);
  }
}

/* Desktop 1100–1399 */
@media (min-width: 1100px) and (max-width: 1399px) {
  .nl-shell {
    grid-template-columns:
      clamp(var(--nl-roster-min), 18vw, var(--nl-roster-preferred))
      minmax(var(--nl-chat-min), 1fr);
  }
}

/* Wide ≥1400 — workspace slot reserved (wired by Slice 4 / style.css) */
@media (min-width: 1400px) {
  .nl-shell {
    grid-template-columns:
      clamp(var(--nl-roster-min), 16vw, var(--nl-roster-preferred))
      minmax(var(--nl-chat-min), 1fr);
  }

  /* Slice 4 (style.css) owns 3-pane grid + collapse variants */
  .nl-shell.nl-shell--workspace-open .nl-shell__workspace {
    display: flex;
    flex-direction: column;
  }
}

/* Key containers: no horizontal blowout */
.nl-shell .panel,
.nl-shell .main,
.nl-shell .messages,
.nl-shell .compose,
.nl-shell .workspace-chrome,
.nl-shell .chat-header,
.nl-shell .editor-header,
.nl-shell .apps-header,
.nl-shell .vault-header {
  max-width: 100%;
  min-width: 0;
}