/* ==========================================================================
   Will's World — Cockpit
   --------------------------------------------------------------------------
   Built on modern native browser features (no build step):
     - OKLCH colour tokens + color-mix() for derived shades
     - Native CSS nesting throughout
     - CSS Grid with subgrid (the left column's rows align to the master grid)
     - Container queries (slots style themselves by their own width)
     - View Transitions API (smooth slide-in driven from JS)
     - Popover API (header menu uses native popover)
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  /* One coral. Everything else derives. */
  --accent:        oklch(64% 0.155 22.5);
  --accent-dark:   color-mix(in oklab, var(--accent), black 14%);
  --accent-soft:   color-mix(in oklab, var(--accent), white 75%);
  --accent-faint:  color-mix(in oklab, var(--accent), white 90%);

  --bg:            oklch(95.5% 0.005 80);
  --surface:       #ffffff;
  --ticker-bg:     oklch(98.5% 0 0);

  --border:        oklch(73% 0 0);
  --border-soft:   oklch(85% 0 0);

  --text:          oklch(30% 0 0);
  --text-soft:     oklch(45% 0 0);
  --text-faint:    oklch(60% 0 0);

  /* Slot demo colours — replaced by real iframes later. */
  --slot-voice:    oklch(73% 0.06 195);
  --slot-main:     var(--accent);
  --slot-detail:   oklch(58% 0.04 250);

  /* Layout dimensions. Easy to retune in one place. */
  --voice-col:     420px;
  --detail-col:    360px;
  --header-h:      52px;
  --ticker-h:      22px;
  --voice-top-h:   60px;
  --voice-bot-h:   90px;

  --transition-fast: 0.18s ease;
  --transition-mid:  0.3s ease;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Master shell grid --------------------------------------------------- */
/* Five rows × three columns. The voice column will subgrid into rows 3-5
   so its internal header / conversation / footer align to the master grid. */
.shell {
  height: 100%;
  display: grid;
  grid-template-rows:
    var(--header-h)
    var(--ticker-h)
    var(--voice-top-h)
    1fr
    var(--voice-bot-h);
  grid-template-columns: var(--voice-col) 1fr 0px;
  transition: grid-template-columns var(--transition-mid);

  &.detail-open {
    grid-template-columns: var(--voice-col) 1fr var(--detail-col);
  }
}

/* --- Header (row 1, full width) ----------------------------------------- */
.header {
  grid-row: 1;
  grid-column: 1 / -1;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;

  & img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: block;
  }

  & h1 {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
  }

  & .header-spacer { flex: 1; }

  & .header-btn {
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-soft);
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;

    &:hover { color: var(--accent); border-color: var(--accent); }
  }
}

/* --- Ticker (row 2, full width) ----------------------------------------- */
.ticker-bar {
  grid-row: 2;
  grid-column: 1 / -1;
  background: var(--ticker-bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow:
    inset 0 3px 5px color-mix(in srgb, black 7.5%, transparent),
    0 2px 4px color-mix(in srgb, black 8%, transparent);
  position: relative;
  z-index: 5;

  & .ticker-content {
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
    font-size: 11px;
    color: var(--text-soft);
    padding-left: 100%;
    padding-top: 3px;
  }
  & .ticker-content .pipe { color: var(--border); margin: 0 8px; }
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* --- Voice column (col 1, rows 3–5 via subgrid) ------------------------- */
/* Subgrid means voice's internal rows ARE the master grid's rows 3, 4, 5.
   So voice-top is exactly --voice-top-h, voice-mid takes the 1fr, voice-bot
   is exactly --voice-bot-h. No guessing, no double-declaring heights. */
.pane-voice {
  grid-column: 1;
  grid-row: 3 / 6;
  display: grid;
  grid-template-rows: subgrid;
  border-right: 1px solid var(--border);
  background: var(--slot-voice);
  container-type: inline-size;
  container-name: voice;

  & .voice-top    { background: color-mix(in oklab, var(--slot-voice), black 8%); }
  & .voice-mid    { background: color-mix(in oklab, var(--slot-voice), black 4%); }
  & .voice-bot    { background: color-mix(in oklab, var(--slot-voice), black 12%); }

  & > div {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
}

/* --- Main column (col 2, rows 3–5) -------------------------------------- */
.pane-main {
  grid-column: 2;
  grid-row: 3 / 6;
  background: var(--slot-main);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
  container-type: inline-size;
  container-name: main;

  & .label { font-size: 22px; }
  & .sub   { font-size: 12px; opacity: 0.85; font-weight: 400; letter-spacing: 0; }

  /* Container query: when the main pane shrinks (because detail opens) the
     label gracefully reduces. Real slots will use this same pattern to
     rearrange their internals based on the slot's own width. */
  @container main (max-width: 600px) {
    & .label { font-size: 18px; }
    & .sub   { font-size: 11px; }
  }
}

/* --- Detail column (col 3, rows 3–5) ------------------------------------ */
.pane-detail {
  grid-column: 3;
  grid-row: 3 / 6;
  background: var(--slot-detail);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
  overflow: hidden;
  min-width: 0;
  container-type: inline-size;

  & .label { font-size: 22px; }
  & .sub   { font-size: 12px; opacity: 0.85; font-weight: 400; letter-spacing: 0; text-align: center; padding: 0 12px; }
}

/* --- View Transitions ---------------------------------------------------- */
/* When JS calls document.startViewTransition() around the toggle, the browser
   captures before/after states and animates the transition on the GPU. We
   slow the cross-fade slightly so the slide reads as deliberate. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
}

/* --- Native Popover (header menu) --------------------------------------- */
[popover] {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 6px;
  background: var(--surface);
  box-shadow: 0 12px 32px color-mix(in srgb, black 18%, transparent);
  min-width: 180px;
  font-family: inherit;

  &::backdrop { background: color-mix(in srgb, black 20%, transparent); }

  & button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--text);

    &:hover { background: var(--accent-faint); color: var(--accent-dark); }
  }
}

/* --- Floating toggle (mockup-only, will be replaced by real triggers) -- */
.toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 160px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 12px color-mix(in srgb, black 25%, transparent);
  z-index: 100;
  transition: background var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  &:hover { background: var(--accent-dark); }
  &:active { background: var(--accent-dark); }
}

/* --- Mobile collapse: voice only --------------------------------------- */
@media (max-width: 899px) {
  .shell, .shell.detail-open {
    grid-template-columns: 1fr;
  }
  .pane-main, .pane-detail, .toggle { display: none; }
}