/*
 * GrayBeam Technology — Design Tokens
 * Crystalline, angular, research-grade. Purple + grayscale only.
 * Reference: Astro Starlight, Linear, Bear Blog
 */

:root[data-brand="graybeam"],
[data-brand="graybeam"] {
  /* Typography — φ scale base (ratios computed in ui.css) */
  --font-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --phi-base: 1rem;
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-semibold: 700;
  --line-md: 1.6;
  --letterspacing-caps: 0.05em;

  /* Spacing + density */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --control-h: 2.5rem;
  --control-px: 1rem;
  --control-py: 0.5rem;
  --layout-gap: 1.5rem;
  --space-8: 2.5rem;
  --space-10: 3rem;
  --space-12: 4rem;
  --space-16: 5rem;
  --space-20: 6rem;
  --space-24: 8rem;
  --section-gap: 6rem;
  --container-sm: 36rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 72rem;

  /* Radii — angular (4px everywhere) */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;

  /* Surfaces + borders (dark mode) */
  --bg: #0a0a0c;
  --surface-1: #121215;
  --surface-2: #1a1a1f;
  --border: #222332;
  --border-strong: #333344;
  --text: #f0f0f2;
  --text-muted: #a0a0a8;
  --panel-bg: #121215;
  --panel-blur: 0px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

  /* Brand / action colors */
  --accent: #7c3cb7;
  --accent-hover: #9b5ac7;
  --accent-contrast: #ffffff;
  --danger: #b05050;
  --warning: #8b733a;
  --success: #4a8b5c;
  --focus-ring: #7c3cb7;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 300ms;
}
/*
 * GrayBeam UI — Component Class Layer
 * Brand-agnostic primitives that consume token variables.
 * Consumers: LiveView (HEEx), React, static HTML.
 *
 * Naming: ui-{component}[data-intent][data-size][data-variant]
 * All visual values come from --token variables set by brand CSS.
 */

/* ============================================================
   PHI TYPOGRAPHY SCALE — Golden Ratio (φ = 1.618)
   Each step relates to its neighbors by φ.
   Brands set --phi-base; derived steps cascade automatically.
   Override individual --text-* in brand CSS to break the scale.
   ============================================================ */

/* ============================================================
   SENSIBLE DEFAULTS — standalone baseline for all tokens.
   Brand files override these via [data-brand="x"] (higher specificity).
   These ensure the library works without any brand CSS loaded.
   ============================================================ */

:root {
  /* Typography — phi scale */
  --phi-base: 1rem;
  --text-xs:   calc(var(--phi-base) * 0.618);
  --text-sm:   calc(var(--phi-base) * 0.786);
  --text-base: var(--phi-base);
  --text-md:   calc(var(--phi-base) * 1.272);
  --text-lg:   calc(var(--phi-base) * 1.618);
  --text-xl:   calc(var(--phi-base) * 2.618);
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-md: 1.6;
  --letterspacing-caps: 0.05em;

  /* Spacing — 4px base grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 2.5rem;
  --space-10: 3rem;
  --space-12: 4rem;
  --space-16: 5rem;
  --space-20: 6rem;
  --space-24: 8rem;
  --layout-gap: 1.5rem;
  --section-gap: 6rem;

  /* Controls */
  --control-h: 2.5rem;
  --control-px: 1rem;
  --control-py: 0.5rem;

  /* Containers */
  --container-sm: 36rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 72rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Surfaces — neutral dark baseline */
  --bg: #0a0a0c;
  --surface-1: #121215;
  --surface-2: #1a1a1f;
  --border: #222332;
  --border-strong: #333344;
  --text: #f0f0f2;
  --text-muted: #a0a0a8;
  --panel-bg: #121215;
  --panel-blur: 0px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

  /* Colors — neutral purple accent */
  --accent: #7c3cb7;
  --accent-hover: #9b5ac7;
  --accent-contrast: #ffffff;
  --danger: #b05050;
  --warning: #8b733a;
  --success: #4a8b5c;
  --focus-ring: #7c3cb7;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 300ms;
}

/* Responsive — scale down proportionally on small screens */
@media (max-width: 640px) {
  :root {
    --phi-base: 0.875rem;  /* 14px */
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --section-gap: 4rem;
  }
}

/* ============================================================
   RESET — normalize form elements across brands
   ============================================================ */

.ui-button,
.ui-input,
.ui-label,
.ui-badge {
  font-family: var(--font-sans);
  line-height: var(--line-md);
  box-sizing: border-box;
}

/* ============================================================
   ui-button
   ============================================================ */

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: var(--control-py) var(--control-px);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
}

.ui-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ui-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Intent: primary (default) */
.ui-button,
.ui-button[data-intent="primary"] {
  background: var(--accent);
  color: var(--accent-contrast);
}

.ui-button:hover:not(:disabled),
.ui-button[data-intent="primary"]:hover:not(:disabled) {
  background: var(--accent-hover);
}

/* Intent: secondary */
.ui-button[data-intent="secondary"] {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.ui-button[data-intent="secondary"]:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-1);
}

/* Intent: ghost */
.ui-button[data-intent="ghost"] {
  background: transparent;
  color: var(--text-muted);
}

.ui-button[data-intent="ghost"]:hover:not(:disabled) {
  background: var(--surface-1);
  color: var(--text);
}

/* Intent: danger */
.ui-button[data-intent="danger"] {
  background: var(--danger);
  color: #ffffff;
}

.ui-button[data-intent="danger"]:hover:not(:disabled) {
  opacity: 0.9;
}

/* Size: sm */
.ui-button[data-size="sm"] {
  height: calc(var(--control-h) - 0.5rem);
  padding: calc(var(--control-py) * 0.75) calc(var(--control-px) * 0.75);
  font-size: var(--text-xs);
}

/* Size: lg */
.ui-button[data-size="lg"] {
  height: calc(var(--control-h) + 0.5rem);
  padding: calc(var(--control-py) * 1.25) calc(var(--control-px) * 1.5);
  font-size: var(--text-md);
}

/* ============================================================
   ui-input
   ============================================================ */

.ui-input {
  display: block;
  width: 100%;
  height: var(--control-h);
  padding: var(--control-py) var(--control-px);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-1) var(--ease-standard);
}

.ui-input::placeholder {
  color: var(--text-muted);
}

.ui-input:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px var(--focus-ring);
}

.ui-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Textarea variant */
.ui-input[data-variant="textarea"] {
  height: auto;
  min-height: calc(var(--control-h) * 3);
  resize: vertical;
}

/* Mono variant (code input) */
.ui-input[data-variant="mono"] {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ============================================================
   ui-label
   ============================================================ */

.ui-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text);
  margin-bottom: var(--space-1);
}

.ui-label[data-variant="muted"] {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

.ui-label[data-variant="caps"] {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letterspacing-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   ui-panel
   ============================================================ */

.ui-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}

/* Glass variant (for brands with panel-blur > 0) */
.ui-panel[data-variant="glass"] {
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}

/* Inset variant (lower surface) */
.ui-panel[data-variant="inset"] {
  background: var(--bg);
  border-color: var(--border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Compact density */
.ui-panel[data-size="sm"] {
  padding: var(--space-3);
}

.ui-panel[data-size="lg"] {
  padding: var(--space-6);
}

/* ============================================================
   ui-badge
   ============================================================ */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Intent: neutral (default) */
.ui-badge,
.ui-badge[data-intent="neutral"] {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Intent: accent */
.ui-badge[data-intent="accent"] {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Intent: success */
.ui-badge[data-intent="success"] {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}

/* Intent: warning */
.ui-badge[data-intent="warning"] {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
}

/* Intent: danger */
.ui-badge[data-intent="danger"] {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

/* ============================================================
   ui-table
   ============================================================ */

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ui-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letterspacing-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-strong);
}

.ui-table td {
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.ui-table tr:hover td {
  background: var(--surface-1);
}

/* Compact variant */
.ui-table[data-size="sm"] th,
.ui-table[data-size="sm"] td {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

/* ============================================================
   LAYOUT COMPOSITION — page, section, stack
   Semantic containers that consume spacing + container tokens.
   ============================================================ */

.ui-page {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--space-6);
  overflow-x: clip;
}
.ui-page[data-size="sm"] { max-width: var(--container-sm); }
.ui-page[data-size="md"] { max-width: var(--container-md); }
.ui-page[data-size="xl"] { max-width: var(--container-xl); }

.ui-section { padding-block: var(--section-gap); }

.ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}
.ui-stack[data-gap="tight"] { gap: var(--space-2); }
.ui-stack[data-gap="loose"] { gap: var(--space-6); }

/* ============================================================
   ui-workbench — canvas + sidebar tool layout
   Dominant workspace canvas with contextual sidebar and optional
   toolbar strip. Used for annotation tools, editors, inspectors.
   Variants: default (canvas+sidebar), compare (side-by-side).
   ============================================================ */

.ui-workbench {
  display: grid;
  grid-template-columns: 1fr var(--workbench-sidebar, 20rem);
  grid-template-rows: auto 1fr auto;
  gap: 0;
  height: 100%;
  min-height: 0;
}

.ui-workbench-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
}

.ui-workbench-canvas {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  overflow: auto;
  background: var(--bg);
}

.ui-workbench-sidebar {
  grid-column: 2;
  grid-row: 2;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  background: var(--surface-1);
}

.ui-workbench-footer {
  grid-column: 1 / -1;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  font-size: var(--text-xs);
}

/* Variant: compare — two equal canvases, sidebar hidden */
.ui-workbench[data-variant="compare"] {
  grid-template-columns: 1fr 1fr;
}
.ui-workbench[data-variant="compare"] .ui-workbench-sidebar {
  display: none;
}

/* Responsive — sidebar stacks below on small screens */
@media (max-width: 768px) {
  .ui-workbench {
    grid-template-columns: 1fr;
  }
  .ui-workbench-sidebar {
    grid-column: 1;
    border-left: none;
    border-top: 1px solid var(--border);
  }
}
/* GrayBeam Mail — Token-driven styles
   Built on graybeam-ui primitives + BEAM personality */

@import "../vendor/graybeam-ui/graybeam.css";
@import "../vendor/graybeam-ui/ui.css";

/* ============================================================
   BEAM-flavored extensions
   ============================================================ */

:root {
  --beam-green: #4ade80;
  --beam-green-dim: #2a5a3a;
  --beam-cyan: #67e8f9;
  --beam-amber: #fbbf24;
  --process-pulse: #7c3cb7;
}

/* ============================================================
   BASE RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: var(--line-md);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent-hover); text-decoration: none; }
a:hover { color: var(--accent); }

/* ============================================================
   APP SHELL — sticky header, flex main, pinned footer
   The body is the shell. The LiveView phx-* wrapper and app
   layout content must all participate in the flex column.
   ============================================================ */

.mail-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* LiveView wraps content in a div — make it flex-grow */
.mail-shell > [data-phx-main] {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ============================================================
   HEADER
   ============================================================ */

.mail-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  padding: var(--space-3) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mail-header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  color: var(--text);
  text-decoration: none;
}

.mail-header-brand:hover { color: var(--text); }

.beam-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--beam-green);
  flex-shrink: 0;
  animation: pulse-dot 3s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 8px 2px rgba(74, 222, 128, 0.2); }
}

.mail-header-nav {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
}

.mail-header-user {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.mail-main {
  flex: 1;
  max-width: var(--container-lg);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8);
}

@media (max-width: 640px) {
  .mail-main { padding: var(--space-4); }
}

/* ============================================================
   FOOTER — BEAM telemetry bar
   ============================================================ */

.mail-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border-strong);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: auto;
}

.mail-footer-inner {
  max-width: var(--container-lg);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.mail-footer-stats {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.mail-footer-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mail-footer-stat .stat-label {
  color: var(--text-muted);
  opacity: 0.6;
}

.mail-footer-stat .stat-value {
  color: var(--text-muted);
}

.mail-footer-build {
  opacity: 0.5;
}

/* Socket status in footer */
.socket-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.socket-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: background var(--dur-2) var(--ease-standard);
}

.socket-status-dot[data-state="connected"] {
  background: var(--beam-green);
}

.socket-status-dot[data-state="disconnected"] {
  background: var(--danger);
  animation: none;
}

/* ============================================================
   INBOX
   ============================================================ */

.inbox-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

.inbox-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.inbox-count {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
}

.inbox-address {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.inbox-empty {
  text-align: center;
  padding: var(--space-12) var(--space-5);
  color: var(--text-muted);
}

.inbox-empty p { margin-bottom: var(--space-2); }

.inbox-empty code {
  font-family: var(--font-mono);
  color: var(--accent-hover);
  background: var(--surface-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* ============================================================
   EMAIL ROW
   ============================================================ */

.email-row {
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-1) var(--ease-standard),
              background var(--dur-1) var(--ease-standard);
}

.email-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: inherit;
}

.email-row[data-unread="true"] {
  border-left: 3px solid var(--accent);
}

.email-row-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.email-row-content { flex: 1; min-width: 0; }

.email-row-meta {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  margin-bottom: var(--space-1);
}

.email-sender {
  font-weight: var(--font-weight-medium);
  color: var(--text);
  font-size: var(--text-sm);
}

.email-row[data-unread="true"] .email-sender {
  font-weight: var(--font-weight-semibold);
}

.email-date {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

.email-subject {
  color: var(--text);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.email-row:not([data-unread="true"]) .email-subject {
  color: var(--text-muted);
}

.email-preview {
  color: var(--text-muted);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-row-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ============================================================
   EMAIL DETAIL
   ============================================================ */

.email-detail-header {
  margin-bottom: var(--space-4);
}

.email-detail-subject {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}

.email-detail-addresses {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.email-detail-sender {
  font-weight: var(--font-weight-medium);
  color: var(--text);
}

.email-detail-body {
  white-space: pre-wrap;
  color: var(--text);
  line-height: 1.7;
  font-size: var(--text-base);
  padding: var(--space-5);
  background: var(--bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-top: var(--space-4);
}

.email-detail-attachments {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.email-detail-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
}

/* ============================================================
   COMPOSE
   ============================================================ */

.compose-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.compose-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letterspacing-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ============================================================
   THREAD VIEW
   ============================================================ */

.thread-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.thread-message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.thread-message-body {
  white-space: pre-wrap;
  color: var(--text);
  line-height: 1.6;
}

/* ============================================================
   LOGIN
   ============================================================ */

.login-container {
  max-width: 24rem;
  margin: var(--space-24) auto;
  padding: 0 var(--space-5);
}

.login-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.login-subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   FLASH MESSAGES
   ============================================================ */

.flash-info {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.flash-error {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

/* ============================================================
   BEAM PERSONALITY ELEMENTS
   ============================================================ */

.beam-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.beam-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--beam-green);
  flex-shrink: 0;
  animation: pulse-dot 3s ease-in-out infinite;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--beam-green);
}

.live-indicator::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--beam-green);
  animation: pulse-dot 2s ease-in-out infinite;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.back-link:hover { color: var(--text); }