/* ==========================================================================
   Honeypot — a hidden field bots fill and humans never see (spam guard).
   Off-screen rather than display:none so form-filling bots still populate it.
   ========================================================================== */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Fonts (self-hosted for an offline-safe local demo)
   ========================================================================== */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-v16-latin-400-05d166028ceaf11d329a91bf215f7c40.woff2?vsn=d") format("woff2");
}
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/vt323-v18-latin-400-098f3ed5f67608e362a32a3dbfc1a0f3.woff2?vsn=d") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-v20-latin-variable-65850a373e258f1c897a2b3d75eb74de.woff2?vsn=d") format("woff2");
}

/* ==========================================================================
   Dark Arcade design tokens
   ========================================================================== */
:root {
  color-scheme: dark;
  /* surfaces */
  --bg: #0b0c10;
  --bg-raised: #14161c;
  --surface: #1b1e26;
  --border: #2a2e38;
  --bg-glow: #241f10;
  /* text */
  --text: #e8e6e3;
  --text-muted: #9a948a;
  /* the yellow */
  --accent: #ffd23f;
  --accent-dim: #c9a227;
  --accent-glow: rgba(255, 210, 63, 0.14);
  /* status */
  --ok: #6ee7a0;
  --ok-glow: rgba(110, 231, 160, 0.14);
  --warn: #ffb454;
  --warn-glow: rgba(255, 180, 84, 0.14);
  --danger: #ff5c5c;
  --danger-glow: rgba(255, 92, 92, 0.14);
  --info: #7aa2f7;
  --info-glow: rgba(122, 162, 247, 0.14);
  --purple: #c792ea;
  --purple-glow: rgba(199, 146, 234, 0.14);
  /* fonts */
  --font-display: "Press Start 2P", monospace;
  --font-mono-terminal: "VT323", monospace;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* layout */
  --sidebar-width: 220px;
  --topbar-height: 56px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-raised);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border: 2px solid var(--bg-raised);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--accent);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
}
h1 { font-size: clamp(20px, 3vw, 30px); text-shadow: 3px 3px 0 var(--accent-dim); }
h2 { font-size: clamp(16px, 2vw, 20px); text-shadow: 2px 2px 0 var(--accent-dim); }
h3 { font-size: 13px; }
h4 { font-size: 11px; }

p { margin: 0 0 12px; }
code, pre { font-family: var(--font-mono-terminal); font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Utility classes
   ========================================================================== */
.pixel-card {
  background: var(--bg-raised);
  border: 2px solid var(--border);
  border-radius: 0;
  padding: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 4px 8px;
  font-family: var(--font-display);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 0;
  white-space: nowrap;
}
.badge-urgent, .badge-high { background: var(--danger-glow); color: var(--danger); border-color: var(--danger); }
.badge-normal, .badge-open { background: var(--info-glow); color: var(--info); border-color: var(--info); }
.badge-low, .badge-resolved { background: var(--ok-glow); color: var(--ok); border-color: var(--ok); }
.badge-waiting { background: var(--warn-glow); color: var(--warn); border-color: var(--warn); }
.badge-escalated { background: var(--danger-glow); color: var(--danger); border-color: var(--danger); }
.badge-new { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
.badge-blue { background: var(--info-glow); color: var(--info); border-color: var(--info); }
.badge-green { background: var(--ok-glow); color: var(--ok); border-color: var(--ok); }
.badge-orange { background: var(--warn-glow); color: var(--warn); border-color: var(--warn); }
.badge-purple { background: var(--purple-glow); color: var(--purple); border-color: var(--purple); }
.badge-level { background: var(--purple-glow); color: var(--purple); border-color: var(--purple); }
.badge-closed { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
.badge-urgent-pin {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--danger);
  background: var(--danger-glow);
  color: var(--danger);
  padding: 3px 6px;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.03em;
  margin-right: 6px;
}

.expertise-dots { color: var(--accent); letter-spacing: 2px; font-size: 12px; }
.expertise-dots.small { font-size: 10px; }
.agent-chip { display: inline-flex; align-items: center; gap: 6px; }
.is-urgent-row { background: var(--danger-glow); }

.timeline-note {
  border: 1px dashed var(--border);
  background: var(--surface);
  padding: 10px;
  border-radius: 0;
}
.timeline-email {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 10px;
  border-radius: 0;
}
.timeline-email-header {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.btn,
.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-raised);
  border: 2px solid var(--accent);
  border-radius: 0;
  color: var(--accent);
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, background-color 0.12s ease, color 0.12s ease;
}
.btn:hover,
.button:hover,
button:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translate(2px, 2px);
}
.btn-primary,
.button.primary,
button.primary {
  background: var(--accent);
  color: var(--bg);
}
.btn-primary:hover,
.button.primary:hover,
button.primary:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: var(--bg);
}
.btn:disabled,
.button:disabled,
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Konami code easter egg */
.konami-crt {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    var(--accent-glow) 0,
    var(--accent-glow) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: konami-flicker 1.3s steps(2, end) forwards;
}
@keyframes konami-flicker {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 0.15; }
  35% { opacity: 0.9; }
  50% { opacity: 0.1; }
  70% { opacity: 0.7; }
  100% { opacity: 0; }
}
.konami-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  z-index: 201;
  max-width: min(92vw, 440px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: var(--bg-raised);
  border: 2px solid var(--accent);
  box-shadow: 4px 4px 0 var(--accent-dim);
  color: var(--text);
  font-family: var(--font-mono-terminal);
  font-size: 18px;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.konami-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.konami-toast strong {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.03em;
}
.konami-toast a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .konami-toast { transition: opacity 0.3s ease; transform: translate(-50%, 0); }
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6) 0px,
    rgba(255, 255, 255, 0.6) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.04;
}

/* ==========================================================================
   App shell — sidebar (desktop) / topbar + overlay (mobile)
   ========================================================================== */
.app-shell {
  min-height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 18px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.dg-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 11px;
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar {
  display: none;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.nav-link::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: transparent;
}
.nav-link:hover {
  color: var(--text);
}
.nav-link.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}
.nav-link.is-active::before {
  background: var(--accent);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Social links pinned to the bottom of the desktop sidebar. */
.sidebar-social {
  margin-top: auto;
  display: flex;
  gap: 6px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}
.sidebar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-social a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.mobile-overlay-social {
  display: flex;
  gap: 18px;
  margin-top: 28px;
}
.mobile-overlay-social a {
  display: inline-flex;
  color: var(--text-muted);
}
.mobile-overlay-social a:hover {
  color: var(--accent);
}
/* Collapse control lives in the sidebar (desktop only); expand control is a floating
   corner button shown only while collapsed. Both hidden on mobile (hamburger nav there). */
.nav-collapse-btn,
.nav-expand-btn {
  display: none;
}
/* The collapse (« in the sidebar) and expand (» floating corner) controls are the same
   toggle in two states, so they share size, border weight, and colors. */
.nav-expand-btn {
  position: fixed;
  top: 12px;
  left: 7px;
  z-index: 60;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  background: var(--bg-raised);
  border: 2px solid var(--accent);
  color: var(--accent);
}
.nav-expand-btn:hover {
  background: var(--accent);
  color: var(--bg);
  transform: none;
}

.topbar-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  padding: 0 16px;
  border-bottom: 2px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 30;
}

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid var(--border);
  padding: 0;
}
.hamburger:hover {
  background: transparent;
  color: inherit;
  transform: none;
  border-color: var(--accent);
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--accent);
}
.hamburger.nav-close {
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.mobile-overlay[data-state="open"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.mobile-overlay-header {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px;
  height: var(--topbar-height);
}
.mobile-overlay-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  height: calc(100% - var(--topbar-height));
}
.mobile-overlay-nav a {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-overlay-nav a.is-active,
.mobile-overlay-nav a:hover {
  color: var(--accent);
}

.app-main {
  padding: 24px;
}

@media (min-width: 900px) {
  .topbar-mobile { display: none; }

  .app-shell {
    display: grid;
    /* minmax(0, 1fr) — not a bare 1fr — so the main column can shrink below its
       content's min-content width. Without the 0 minimum, wide children (the
       support ticket table) blow the grid past the viewport and scroll the page. */
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--border);
    background: rgba(11, 12, 16, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .app-main {
    padding: 32px 40px;
  }

  .nav-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    min-height: 0;
    margin-right: 14px;
    padding: 0;
    font-family: var(--font-display);
    font-size: 13px;
    background: var(--bg-raised);
    border: 2px solid var(--accent);
    color: var(--accent);
  }
  .nav-collapse-btn:hover {
    color: var(--bg);
    border-color: var(--accent);
    background: var(--accent);
    transform: none;
  }

  /* Collapsed: sidebar shrinks to a thin rail that still shows the active-section
     border/dot, hero + content go full width, and a corner arrow expands it again. */
  html.nav-collapsed .app-shell {
    grid-template-columns: 44px 1fr;
  }
  html.nav-collapsed .sidebar {
    padding-top: 14px;
    overflow: hidden;
  }
  html.nav-collapsed .sidebar-head {
    display: none;
  }
  html.nav-collapsed .sidebar-social {
    display: none;
  }
  html.nav-collapsed .nav-link {
    padding: 11px 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
    border-left-width: 3px;
  }
  html.nav-collapsed .nav-link::before {
    width: 6px;
    height: 6px;
  }
  html.nav-collapsed .nav-expand-btn {
    display: inline-flex;
  }
}

/* ==========================================================================
   Page content (chat / docs / support desk)
   ========================================================================== */
.shell { max-width: 1320px; margin: 0 auto; }
.chat-page { width: min(1120px, 100%); margin: 0 auto; }

/* Single implicit column capped at minmax(0, 1fr) so a wide child (the ticket
   table) can't stretch the column — and every sibling panel — past the viewport. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.grid.two { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); align-items: start; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel, .card {
  background: var(--bg-raised);
  border: 2px solid var(--border);
  border-radius: 0;
  padding: 16px;
}
.panel h2, .card h3 { margin: 0 0 12px; }

.section-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.section-heading h2 { margin: 0; }
.header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--text-muted); }

.chat-panel {
  min-height: calc(100vh - 156px);
  display: flex;
  flex-direction: column;
}
.chat-log {
  height: clamp(520px, calc(100vh - 270px), 760px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 6px;
  scrollbar-gutter: stable;
}
.message {
  max-width: 78%;
  padding: 12px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}
/* Only the text body preserves the model's own line breaks; the wrapper stays
   normal-whitespace so template indentation never renders as a leading indent. */
.message-body, .widget-message-body {
  white-space: pre-wrap;
}
.message-body { display: block; }
.message.thinking, .widget-message.thinking { color: var(--text-muted); }
.thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}
.thinking-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: thinking-bounce 1.2s infinite ease-in-out both;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinking-bounce {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-dots span { animation: none; opacity: 0.6; }
}

.message.user { align-self: flex-end; background: var(--accent-glow); border-color: var(--accent-dim); }
.message.assistant { align-self: flex-start; }
.message.agent { align-self: flex-start; background: var(--info-glow); border-color: var(--info); }
.message.system {
  align-self: center;
  max-width: 90%;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.sources { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.source-link {
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  background: var(--info-glow);
  color: var(--info);
  border: 1px solid var(--info);
  text-decoration: none;
  white-space: nowrap;
}

.chat-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-left: 0;
  white-space: normal;
}
.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  min-height: 0;
}
.mini-button.success { background: var(--ok-glow); border-color: var(--ok); color: var(--ok); }
.mini-button.danger { background: var(--danger-glow); border-color: var(--danger); color: var(--danger); }

form { display: grid; gap: 10px; }
.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}
.ticket-confirmation { margin-top: 16px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
}
.modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-raised);
  border: 2px solid var(--accent);
  border-radius: 0;
  padding: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.icon-button { padding: 5px 8px; font-size: 12px; }

input, textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}
textarea { min-height: 96px; resize: vertical; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Wraps the wide ticket table so it scrolls horizontally within its panel on
   narrower screens instead of forcing the whole page wider. Harmless once the
   table collapses to stacked cards at <=600px. */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table th { color: var(--text-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }

.flash { border: 1px solid var(--ok); background: var(--ok-glow); color: var(--ok); padding: 12px; border-radius: 0; margin-bottom: 16px; }
.flash-error { border-color: var(--danger); background: var(--danger-glow); color: var(--danger); }

.timeline { display: grid; gap: 10px; }
.timeline-item { border-left: 3px solid var(--border); padding-left: 12px; }

/* DylanSupport desk analytics */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-tile {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-num { font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--text); }
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-danger { border-color: var(--danger); }
.stat-danger .stat-num { color: var(--danger); }

.workload-meter {
  height: 6px;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.workload-fill { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }

.sla-aging { color: var(--warn); }
.sla-stale { color: var(--danger); }

@media (max-width: 600px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

.article-body { line-height: 1.6; white-space: pre-wrap; font-family: var(--font-body); }

/* Visitor-facing ticket status page */
.status-page { width: min(720px, 100%); margin: 0 auto; display: grid; gap: 16px; }
.status-lede { font-size: 16px; margin-bottom: 12px; }
.status-footer { text-align: center; }

@media (max-width: 900px) {
  .grid.two { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
  .grid.three { grid-template-columns: 1fr; }
  .message { max-width: 100%; }
  .chat-panel { min-height: calc(100vh - 130px); }
  .chat-log { height: calc(100vh - 280px); min-height: 360px; }
}
@media (max-width: 600px) {
  .app-main { padding: 16px; }
  .section-heading { flex-direction: column; align-items: flex-start; }

  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    border: 1px solid var(--border);
    margin-bottom: 12px;
    padding: 4px 12px;
  }
  .table tr.is-urgent-row { border-color: var(--danger); }
  .table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    text-align: right;
  }
  .table td:last-child { border-bottom: none; }
  .table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Portfolio landing page — hero
   ========================================================================== */
.app-main:has(#hero) {
  padding: 0;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 24px;
}

.hero-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 900px 600px at 50% -10%, var(--bg-glow), transparent 70%);
}

.hero-bg-grid {
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
}

.hero-clouds {
  pointer-events: none;
}

/* Interactive hero grid mini-game */
.hero-grid-cells {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.grid-cell {
  position: absolute;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  border-radius: 0;
  color: var(--accent);
  font-family: var(--font-mono-terminal);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  animation: grid-cell-in 0.25s ease-out;
}
.grid-cell:hover { background: var(--accent); color: var(--bg); transform: none; }
.grid-cell.is-fading {
  opacity: 0;
  animation: none;
  transition: opacity 0.25s ease-out;
}
.grid-cell.is-hit {
  background: var(--accent);
  color: var(--bg);
  transform: scale(1.4);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@keyframes grid-cell-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-score {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 6px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.05em;
}
@media (prefers-reduced-motion: reduce) {
  .grid-cell { animation: none; }
}

/* Battleship easter egg — a bordered board over the hero, unlocked at grid score 10 */
.hero-content.is-battleship-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.battleship {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  /* Fixed width so the panel never resizes when the info line changes length
     (long "click the grid" prompt -> short "Miss." after the first shot). */
  width: min(380px, calc(100vw - 40px));
  background: var(--bg-raised);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow), 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: bs-in 0.3s ease-out;
}
@keyframes bs-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.bs-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.bs-title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--accent);
}
.bs-remaining {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--text-muted);
}
.bs-remaining b { color: var(--accent); }
.bs-info {
  margin: 0;
  /* Reserve two lines so the board doesn't jump when the info text wraps/unwraps. */
  min-height: 2.6em;
  text-align: center;
  font-family: var(--font-mono-terminal);
  font-size: 18px;
  color: var(--text);
}
.bs-board {
  display: grid;
  grid-template-columns: repeat(var(--bs-cols, 6), 34px);
  gap: 4px;
  justify-content: center;
}
.bs-cell {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 11px;
  cursor: pointer;
}
.bs-cell:hover {
  background: var(--bg-glow);
  border-color: var(--accent-dim);
  color: var(--text);
  transform: none;
}
.bs-cell.bs-miss,
.bs-cell.bs-hit { cursor: default; }
.bs-cell.bs-miss,
.bs-cell.bs-miss:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.bs-cell.bs-hit,
.bs-cell.bs-hit:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}
.bs-again {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1.6;
  color: var(--accent);
  text-align: center;
}
/* The class sets display:flex, which would otherwise beat the [hidden] attribute the
   JS toggles between rounds; restore hidden's effect so the prompt only shows on a win. */
.bs-again[hidden] { display: none; }
.bs-again-actions { display: flex; gap: 10px; }
.bs-again button { font-size: 10px; padding: 8px 16px; }

.hero-shape {
  position: absolute;
  background: var(--accent-dim);
  opacity: 0.12;
}
.hero-shape-1 { width: 130px; height: 60px; top: 18%; left: 10%; }
.hero-shape-2 { width: 80px; height: 40px; top: 62%; left: 76%; }
.hero-shape-3 { width: 160px; height: 70px; top: 76%; left: 18%; }

.hero-content {
  flex-direction: column;
  gap: 18px;
  padding: 0 24px;
  max-width: 900px;
  z-index: 2;
  /* Let clicks in the empty hero area fall through to the interactive grid cells
     below; re-enable pointer events only on the actually-interactive children. */
  pointer-events: none;
}
.hero-headline,
.hero-subline {
  pointer-events: auto;
}

.hero-headline {
  margin: 0;
  line-height: 1.5;
  text-shadow: 3px 3px 0 var(--accent-dim);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.hero-headline:active { cursor: grabbing; }

.headline-line { display: block; }
.headline-line:first-child { font-size: clamp(26px, 6vw, 56px); }
.headline-line:last-child {
  font-size: clamp(13px, 2.4vw, 24px);
  margin-top: 14px;
  text-shadow: 1px 1px 0 var(--accent-dim);
}

.word { display: inline-block; white-space: nowrap; }
.letter {
  display: inline-block;
  will-change: transform;
  color: var(--text);
}
.letter.is-scrambled,
.letter.is-glitching { color: var(--accent-dim); }
.letter.is-resolved { color: inherit; }
.letter-space { display: inline-block; width: 0.4em; }

.hero-cursor {
  display: inline-block;
  color: var(--accent);
  animation: cursor-blink 1060ms step-end infinite;
}
.hero-cursor.is-static { animation: none; }
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.hero-subline {
  font-family: var(--font-mono-terminal);
  font-size: clamp(16px, 2.2vw, 22px);
  color: var(--text-muted);
  margin: 0;
  min-height: 1.4em;
}

.subline-chat-link {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 0.7em;
  padding: 4px 10px;
  margin: 0 2px;
  text-decoration: none;
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.subline-chat-link:hover {
  background: var(--accent-dim);
}

.hero-scanlines { z-index: 3; }

.scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--accent);
  font-size: 20px;
  text-decoration: none;
  animation: scroll-hint-bounce 2s ease-in-out infinite;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

@media (max-width: 899px) {
  .hero-bg-grid, .hero-clouds { display: none; }
}

/* ==========================================================================
   Portfolio landing page — sections
   ========================================================================== */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 24px;
}
.section h2 { margin-bottom: 24px; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.text-link { display: inline-block; margin-top: 8px; }
.small { font-size: 13px; }

.about-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 220px 1fr; align-items: start; }
}

.about-avatar-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .about-avatar-wrap { align-items: flex-start; text-align: left; }
}
.about-avatar {
  width: 180px;
  height: 180px;
  object-fit: cover;
  display: block;
  background: var(--bg-raised);
  border: 2px solid var(--accent);
  box-shadow: 4px 4px 0 var(--accent-dim);
}

.skills-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 20px 0;
}
.skills-group h3 { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.skill-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 14px;
}
.skill-dots { color: var(--accent); letter-spacing: 2px; }

.projects-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.project-card { display: flex; flex-direction: column; gap: 10px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.project-links { display: flex; gap: 12px; margin-top: auto; padding-top: 4px; }

/* Whole card is a click target for its detail dialog. A stretched, transparent button
   sits over the card so the <h3> stays a real heading (no interactive nesting). */
.project-card { position: relative; cursor: pointer; }
.project-card:hover,
.project-card:focus-within {
  border-color: var(--accent);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--accent-dim);
}
.project-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.project-card-cue {
  margin-top: auto;
  padding-top: 4px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}
.project-card-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.project-card-hit:hover { background: transparent; transform: none; }
.project-card-hit:focus-visible { outline: none; }

.project-dialog {
  width: min(680px, calc(100vw - 28px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 2px solid var(--accent);
  border-radius: 0;
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.project-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.project-dialog-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.project-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.project-dialog-head h3 { margin: 0; }
.project-dialog-close { flex: none; }
.project-dialog-blurb { margin: 0; }

.project-shots {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.project-shot { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.project-shot-frame {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  background: repeating-linear-gradient(
    -45deg,
    var(--surface) 0,
    var(--surface) 8px,
    var(--bg) 8px,
    var(--bg) 16px
  );
  overflow: hidden;
}
.project-shot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-shot-frame.has-shot {
  aspect-ratio: auto;
  border-style: solid;
  background: var(--surface);
}
.project-shot-frame.has-shot img { height: auto; object-fit: contain; }
.project-shot-ph {
  font-family: var(--font-mono-terminal);
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--accent-dim);
}
.project-shot figcaption { color: var(--text-muted); font-size: 13px; }

.project-highlights {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-highlights li::marker { color: var(--accent); }

.project-dialog-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.project-dialog[open] { animation: project-dialog-in 160ms ease-out; }
.project-dialog[open]::backdrop { animation: project-backdrop-in 160ms ease-out; }
@keyframes project-dialog-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes project-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .project-dialog[open],
  .project-dialog[open]::backdrop { animation: none; }
  .project-card:hover,
  .project-card:focus-within { transform: none; }
}
@media (max-width: 600px) {
  .project-dialog-links .btn { flex: 1 1 auto; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.resume-section .btn { margin: 16px 0; }

.terminal-window {
  background: #000;
  border: 2px solid var(--border);
  max-width: 640px;
  margin: 0 auto 24px;
  text-align: left;
}
.terminal-titlebar {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-raised);
  border-bottom: 2px solid var(--border);
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.terminal-body {
  margin: 0;
  padding: 16px;
  font-family: var(--font-mono-terminal);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ok);
  white-space: pre-wrap;
  overflow-x: auto;
}
.docs-teaser-actions {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.contact-links { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.contact-links a { font-size: 16px; }
.site-footer { border-top: 1px solid var(--border); padding-top: 16px; }
.site-footer p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint { animation: none; }
  .hero-cursor { animation: none; }
}

/* ==========================================================================
   DylanDocs (/docs)
   ========================================================================== */
.docs-layout {
  display: block;
}

.docs-sidebar-desktop {
  display: none;
}

.docs-sidebar-mobile {
  margin-bottom: 24px;
  border: 2px solid var(--border);
  background: var(--bg-raised);
}
.docs-sidebar-mobile summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--accent);
}
.docs-sidebar-mobile[open] summary {
  border-bottom: 1px solid var(--border);
}
.docs-sidebar-mobile .docs-nav-tree {
  padding: 12px 16px;
}

.docs-nav-group {
  margin-bottom: 20px;
}
.docs-nav-group h4 {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.docs-nav-link {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}
.docs-nav-link:hover {
  color: var(--accent);
}
.docs-nav-link.is-active {
  color: var(--accent);
  font-weight: 700;
}

.docs-search {
  margin-bottom: 24px;
}
.docs-search input {
  font-family: var(--font-mono-terminal);
  font-size: 18px;
}

.docs-search-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.docs-search-result {
  display: block;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  text-decoration: none;
  color: var(--text);
}
.docs-search-result:hover {
  border-color: var(--accent);
}
.docs-search-result strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
}
.docs-search-result p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.docs-breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.docs-ask-bot-hint {
  margin-top: 32px;
  padding: 12px 16px;
  border: 1px dashed var(--border);
  background: var(--bg-raised);
}
.docs-ask-bot-hint p {
  margin: 0;
  font-size: 14px;
}

.docs-prev-next {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.docs-prev-next a {
  font-size: 14px;
}
.docs-next {
  margin-left: auto;
}

/* Rendered markdown content */
.docs-article h1 {
  font-size: clamp(18px, 3vw, 26px);
  text-shadow: 3px 3px 0 var(--accent-dim);
}
.docs-article h2 {
  margin-top: 32px;
  font-size: clamp(15px, 2vw, 19px);
}
.docs-article h3 {
  margin-top: 24px;
  font-size: 13px;
  color: var(--accent);
}
.docs-article p,
.docs-article li {
  line-height: 1.7;
}
.docs-article ul,
.docs-article ol {
  padding-left: 24px;
  margin: 0 0 16px;
}
.docs-article a {
  color: var(--accent);
}
.docs-article pre {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 12px 16px;
  overflow-x: auto;
  margin: 0 0 16px;
}
.docs-article code {
  font-family: var(--font-mono-terminal);
  font-size: 16px;
}
.docs-article :not(pre) > code {
  background: var(--surface);
  padding: 1px 6px;
  border: 1px solid var(--border);
}
.docs-article blockquote {
  margin: 0 0 16px;
  padding: 8px 16px;
  border-left: 3px solid var(--accent-dim);
  background: var(--accent-glow);
  color: var(--text-muted);
  font-style: italic;
}
.docs-article blockquote p {
  margin: 0;
}
.docs-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
}
.docs-article th,
.docs-article td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}
.docs-article hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

@media (min-width: 900px) {
  .docs-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: start;
  }
  .docs-sidebar-desktop {
    display: block;
    position: sticky;
    top: 32px;
  }
  .docs-sidebar-mobile {
    display: none;
  }
}

/* ==========================================================================
   DylanBot widget
   ========================================================================== */
.widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 380px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Collapsed = just this bar; expanded = bar sits on top of the panel and rises. */
.widget-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  background: var(--bg-raised);
  border: 2px solid var(--accent);
  border-radius: 0;
  color: var(--accent);
  transition: background-color 0.12s ease;
}
.widget.is-open .widget-bar {
  border-bottom: none;
}
/* The title area is the main toggle; fullscreen + arrow are separate controls. */
.widget-bar-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  text-align: left;
}
.widget-bar-main:hover {
  background: transparent;
  color: var(--accent);
  transform: none;
}
.widget-bar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-bar-icon,
.widget-bar-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--accent);
  background: var(--bg-raised);
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
  text-decoration: none;
}
.widget-bar-icon:hover,
.widget-bar-toggle:hover {
  background: var(--accent);
  color: var(--bg);
  transform: none;
}
.widget-bar-icon svg {
  display: block;
}

.widget-unread-badge {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--bg);
  border: 2px solid var(--bg-raised);
  font-family: var(--font-display);
  font-size: 9px;
  border-radius: 0;
}

.widget-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--text-muted);
  flex: none;
}
.widget-status-dot.is-ok { background: var(--ok); animation: widget-blink 2s infinite; }
.widget-status-dot.is-fallback { background: var(--warn); }
.widget-status-dot.is-live { background: var(--accent); animation: widget-blink 2s infinite; }
@keyframes widget-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.widget-panel {
  width: 100%;
  height: 540px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 2px solid var(--accent);
  border-top: none;
  transform-origin: bottom center;
  animation: widget-panel-enter 180ms ease-out;
}
@keyframes widget-panel-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Exit slide, driven by JS.transition on phx-remove. */
.widget-leaving { transition: opacity 180ms ease-in, transform 180ms ease-in; }
.widget-panel-in { opacity: 1; transform: translateY(0); }
.widget-panel-out { opacity: 0; transform: translateY(14px); }

.widget-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono-terminal);
  font-size: 19px;
  line-height: 1.45;
}
.widget-message {
  max-width: 82%;
  padding: 8px 11px;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.widget-message.user {
  align-self: flex-end;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.widget-message.assistant {
  align-self: flex-start;
}
.widget-message.agent {
  align-self: flex-start;
  border-color: var(--info);
  color: var(--info);
}
.widget-message.system {
  align-self: center;
  max-width: 90%;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
}
.widget-message .sources {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.widget-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
  flex-shrink: 0;
}
.widget-chip {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  padding: 8px 10px;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono-terminal);
  font-size: 18px;
  line-height: 1.3;
}
.widget-chip:hover {
  background: var(--surface);
  color: var(--accent);
  transform: none;
}

.widget-escalated {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ok);
  flex-shrink: 0;
}

.widget-notice {
  padding: 10px 14px;
  border-top: 1px solid var(--warn);
  background: var(--warn-glow);
  font-size: 13px;
  color: var(--warn);
  flex-shrink: 0;
}

.widget-escalation-form {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.widget-escalation-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--warn);
  background: var(--warn-glow);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.widget-escalation-note a {
  color: var(--accent);
}
.widget-escalation-form form {
  gap: 8px;
}
.widget-escalation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.widget-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 2px solid var(--accent);
  margin-top: 0;
  flex-shrink: 0;
}
.widget-input-row input {
  flex: 1;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono-terminal);
  font-size: 19px;
  padding: 7px 9px;
  caret-color: var(--accent);
}
.widget-input-row button {
  flex: none;
  background: var(--accent);
  border: 2px solid var(--bg-raised);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 10px;
  padding: 0 14px;
}
.widget-input-row button:hover {
  background: var(--accent-dim);
  color: var(--bg);
  transform: none;
}

.widget-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-top: 2px solid var(--border);
  font-family: var(--font-mono-terminal);
  font-size: 16px;
  flex-shrink: 0;
}
.widget-footer-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.widget-footer a {
  color: var(--accent);
  text-decoration: underline;
}
.widget-footer-sep {
  color: var(--text-muted);
}
.widget-footer-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--font-mono-terminal);
  font-size: 16px;
}
.widget-footer-link:hover {
  background: none;
  color: var(--accent);
  transform: none;
}

@media (max-width: 600px) {
  .widget {
    right: 12px;
    left: 12px;
    bottom: 16px;
    width: auto;
    max-width: none;
  }
  .widget-panel {
    max-height: calc(100vh - 140px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget-status-dot { animation: none; }
  .widget-panel { animation: none; }
  .widget-leaving { transition: none; }
}