/* ============================================================================
   whisper.css — a Mac window + WhisperMLX's interface, rebuilt in CSS.

   These are not decorative approximations. The tokens below are lifted from
   the app itself: CobaltPalette and MeshBackground in UI/Theme.swift, the
   channel colours in Support/RecordingPreset.swift (mic = orange, system =
   cyan, both = purple), and the glass-card recipe every dashboard tile uses.
   The seeded tiles are the app's real defaults; the model rows are the real
   catalog from Engine/ModelStore.swift, numbers and all.
   ========================================================================== */

.wm {
  /* CobaltPalette — the app's navy appearance */
  --cob-top:    #0D143D;
  --cob-bot:    #14215C;
  --glass:      rgba(255, 255, 255, .07);
  --glass-line: rgba(255, 255, 255, .12);
  --indigo:     #788FFF;

  /* Channel colours: what a tile captures decides its colour */
  --mic:    #FF9F0A;   /* microphone            */
  --sys:    #64D2FF;   /* system audio          */
  --both:   #BF5AF2;   /* mic + system          */
  --live:   #30D158;   /* ready / on-device dot */
  --rec:    #FF453A;   /* recording             */

  --wtext1: #F4F5FA;
  --wtext2: #B6BdD1;
  --wtext3: #7E86A0;

  --round: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}

/* ------------------------------------------------------------- the window */
/* A macOS window: traffic lights, a quiet title bar, and the app's default
   Mesh appearance drifting behind glass tiles. Fluid width; the interior is
   authored to read correctly from 340px up. */

.macwin {
  width: min(600px, 100%);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--cob-top), var(--cob-bot));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .55),
    0 24px 70px -22px rgba(0, 0, 0, .75),
    0 60px 130px -40px rgba(20, 33, 92, .55);
  overflow: hidden;
  position: relative;
  font-family: var(--round);
  color: var(--wtext1);
  -webkit-font-smoothing: antialiased;
}

/* The MeshBackground: four radial washes (cyan, indigo, purple, pink — the
   literal colours in Theme.swift), blurred and slowly adrift. */
.macwin::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(42% 42% at 24% 24%, #64D2FF 0%, transparent 70%),
    radial-gradient(42% 42% at 78% 22%, #5E5CE6 0%, transparent 70%),
    radial-gradient(42% 42% at 22% 80%, #BF5AF2 0%, transparent 70%),
    radial-gradient(46% 46% at 80% 78%, #FF375F 0%, transparent 70%);
  filter: blur(52px) saturate(115%);
  opacity: .34;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .macwin::before { animation: wm-mesh 26s ease-in-out infinite alternate; }
  @keyframes wm-mesh {
    from { transform: translate(-2.5%, -2%) scale(1); }
    to   { transform: translate(2.5%, 3%) scale(1.06); }
  }
}

.titlebar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(10, 14, 38, .35);
}
.titlebar .tl { width: 12px; height: 12px; border-radius: 50%; }
.titlebar .tl.r { background: #FF5F57; }
.titlebar .tl.y { background: #FEBC2E; }
.titlebar .tl.g { background: #28C840; }
.titlebar .win-title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--wtext2);
  pointer-events: none;
}

/* ------------------------------------------------- screens (the crossfade) */
/* Same contract as the phone: reveal.js toggles .is-active on the .screen at
   the index of the caption nearest mid-viewport. */

.mac-screens {
  position: relative;
  height: 480px;
}
.mac-screens .screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  opacity: 0;
  transition: opacity .45s ease;
}
/* No JS: the window simply shows its first screen. */
.mac-screens .screen:first-of-type { opacity: 1; }
.mac-screens.js .screen { opacity: 0; }
.mac-screens.js .screen.is-active { opacity: 1; }
.mac-screens.js .screen:not(.is-active) { visibility: hidden; }

/* -------------------------------------------------------------- dashboard */

.wm-identity { text-align: center; margin-bottom: 16px; }
.wm-identity .wave-coin {
  width: 44px; height: 44px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #8FA2FF, #5E5CE6);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(94, 92, 230, .7);
}
.wm-identity h3 {
  margin: 0 0 2px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.wm-identity p {
  margin: 0;
  font-size: 11.5px;
  color: var(--wtext3);
}

.wm-rowhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
}
.wm-rowhead .h { font-size: 12.5px; font-weight: 650; }
.wm-rowhead .add {
  font-size: 11px;
  color: var(--indigo);
  font-weight: 550;
}

.wm-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* A recording tile: source glyph in its channel colour, title, what it
   captures. The glass recipe is the app's: white 7% fill, hairline stroke,
   14pt corners. */
.wm-tile {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  padding: 12px 13px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
}
.wm-tile .glyph { color: var(--tint, var(--indigo)); height: 20px; }
.wm-tile .glyph svg { display: block; }
.wm-tile .t {
  font-size: 13px;
  font-weight: 620;
  letter-spacing: -0.01em;
}
.wm-tile .c {
  font-size: 10.5px;
  color: var(--wtext3);
}
.wm-tile .kbd {
  position: absolute;
  right: 9px; bottom: 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--wtext2);
  background: rgba(255, 255, 255, .10);
  border-radius: 5px;
  padding: 2px 5px;
}
.wm-tile .en {
  position: absolute;
  right: 9px; top: 9px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cob-top);
  background: var(--indigo);
  border-radius: 4px;
  padding: 1.5px 4px;
}

/* Utility cards + the model footer line */
.wm-utils {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.wm-util {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 550;
}
.wm-util svg { color: var(--wtext2); flex: none; }
.wm-util .sub { display: block; font-size: 10px; font-weight: 400; color: var(--wtext3); }

.wm-modelline {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--wtext3);
}
.wm-modelline .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px rgba(48, 209, 88, .8);
}

/* -------------------------------------------------------------- recording */

.wm-reccard {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  padding: 16px;
}
.wm-rechead {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wm-rechead .recdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rec);
  box-shadow: 0 0 10px rgba(255, 69, 58, .8);
}
@media (prefers-reduced-motion: no-preference) {
  .wm-rechead .recdot { animation: wm-pulse 1.4s ease-in-out infinite; }
  @keyframes wm-pulse { 50% { opacity: .35; } }
}
.wm-rechead .t { font-size: 14px; font-weight: 640; }
.wm-rechead .src { font-size: 11px; color: var(--wtext3); }
.wm-rechead .time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--wtext2);
  font-variant-numeric: tabular-nums;
}

/* The level meter: a row of bars. Heights are static; motion is added, never
   required. */
.wm-meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  margin: 14px 0;
}
.wm-meter i {
  flex: 1;
  max-width: 6px;
  height: calc(var(--h) * 1%);
  border-radius: 3px;
  background: linear-gradient(180deg, #A9B8FF, var(--indigo));
  opacity: .9;
}
@media (prefers-reduced-motion: no-preference) {
  .wm-meter i {
    animation: wm-eq 1.1s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.13s);
  }
  @keyframes wm-eq {
    from { transform: scaleY(.45); }
    to   { transform: scaleY(1); }
  }
}

.wm-recbtns {
  display: flex;
  gap: 8px;
}
.wm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 9px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, .10);
  color: var(--wtext1);
}
.wm-btn.stop {
  background: var(--rec);
  color: #fff;
  margin-left: auto;
}

/* Live preview: segments arrive as the quick model drafts them. Each becomes
   visible with a stagger every time the screen becomes active. */
.wm-live {
  margin-top: 14px;
  flex: 1;
  min-height: 0;
}
.wm-live .cap {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wtext3);
  margin: 0 0 8px;
}
.wm-seg {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.wm-seg .ts {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--wtext3);
  padding-top: 2px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.wm-seg.draft { color: var(--wtext3); }
.wm-seg.draft .txt::after {
  content: "";
  display: inline-block;
  width: 7px; height: 13px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--indigo);
}
@media (prefers-reduced-motion: no-preference) {
  .mac-screens.js .screen.is-active .wm-seg {
    animation: wm-segin .5s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: calc(.25s + var(--i) * .55s);
  }
  @keyframes wm-segin {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  .mac-screens.js .screen.is-active .wm-seg.draft .txt::after {
    animation: wm-caret 1s step-end infinite;
  }
  @keyframes wm-caret { 50% { opacity: 0; } }
}

/* -------------------------------------------------------------- delivered */

/* The finished transcript sits centred in the window rather than stretched:
   a done card is a small, calm thing. */
.mac-screens .screen.centered { justify-content: center; }
.wm-donecard {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.wm-donehead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.wm-donehead .t { font-size: 14px; font-weight: 640; }
.wm-donehead .meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--wtext3);
}
.wm-prose {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--wtext2);
  margin: 8px 0 0;
}
.wm-prose strong { color: var(--wtext1); font-weight: 600; }

.wm-delivery {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--wtext2);
}
.wm-delivery .ok {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(48, 209, 88, .18);
  color: var(--live);
  display: grid;
  place-items: center;
  flex: none;
}
.wm-delivery .spd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--wtext3);
}

/* ----------------------------------------------------------- model manager */
/* The real catalog: Engine/ModelStore.swift, row for row. Presented like the
   app's model manager — name, parameters, disk size, and the resource chips. */

.wm-models {
  background: linear-gradient(180deg, var(--cob-top), var(--cob-bot));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  padding: 1.25rem;
  max-width: 24rem;
  margin-left: auto;
  font-family: var(--round);
  color: var(--wtext1);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
}
.wm-models .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.wm-models .head .t { font-size: .8125rem; font-weight: 650; }
.wm-models .head .m {
  font-family: var(--mono);
  font-size: .625rem;
  color: var(--wtext3);
}
.wm-mrow {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-variant-numeric: tabular-nums;
}
.wm-mrow .n { font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.wm-mrow .p {
  font-family: var(--mono);
  font-size: .625rem;
  color: var(--wtext3);
}
.wm-mrow .sz {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--wtext2);
  white-space: nowrap;
}
.wm-mrow .spd {
  font-family: var(--mono);
  font-size: .625rem;
  color: var(--wtext3);
  white-space: nowrap;
}
.wm-mrow.reco .n { color: #A9B8FF; }
.wm-mrow.reco .badge-reco {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--cob-top);
  background: var(--indigo);
  border-radius: 4px;
  padding: 2px 4px;
  vertical-align: 1px;
}
.wm-models .foot {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .6875rem;
  color: var(--wtext3);
}
.wm-models .foot .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--live);
}

/* ------------------------------------------------------- two-track meeting */
/* A meeting transcript as the library shows it: each turn labelled with its
   track — "Me" from the microphone, "Mac Audio" from the Mac's own output. */

.wm-meeting {
  background: linear-gradient(180deg, var(--cob-top), var(--cob-bot));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  padding: 1.25rem;
  width: min(26rem, 100%);
  font-family: var(--round);
  color: var(--wtext1);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
}
.wm-meeting .head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .875rem;
}
.wm-meeting .head .t { font-size: .8125rem; font-weight: 650; }
.wm-meeting .head .tracks {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .625rem;
  color: var(--wtext3);
}

/* The two waveforms, one per track, in their channel colours. */
.wm-trackrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .5rem;
}
.wm-trackrow .lab {
  flex: none;
  width: 4.5rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tc);
}
.wm-trackrow .wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
}
.wm-trackrow .wave i {
  flex: 1;
  height: calc(var(--h) * 1%);
  min-height: 2px;
  border-radius: 1.5px;
  background: var(--tc);
  opacity: .75;
}

.wm-turns { margin-top: 1rem; }
.wm-turn {
  display: flex;
  gap: .625rem;
  padding: .5rem 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .75rem;
  line-height: 1.5;
}
.wm-turn .who {
  flex: none;
  width: 4.5rem;
  padding-top: 1px;
}
.wm-turn .who b {
  display: inline-block;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tc);
  background: color-mix(in srgb, var(--tc) 16%, transparent);
  border-radius: 5px;
  padding: 2px 6px;
}
.wm-turn .say { color: var(--wtext2); }
.wm-turn .ts {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: .5625rem;
  color: var(--wtext3);
  padding-top: 3px;
}

/* ----------------------------------------------------------- live captions */
/* The floating captions window: dark glass, always on top, English out. */

.wm-captions {
  background: rgba(13, 17, 38, .92);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: .875rem 1rem;
  width: min(24rem, 100%);
  font-family: var(--round);
  color: var(--wtext1);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
}
.wm-captions .head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .625rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wtext3);
}
.wm-captions .head .recdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rec);
}
.wm-captions .head .en {
  margin-left: auto;
  font-size: .5625rem;
  color: var(--cob-top);
  background: var(--indigo);
  border-radius: 4px;
  padding: 2px 5px;
  letter-spacing: .05em;
}
.wm-captions .line {
  font-size: .875rem;
  line-height: 1.5;
  margin: 0;
}
.wm-captions .line + .line { margin-top: .25rem; }
.wm-captions .line.dim { color: var(--wtext3); font-size: .75rem; }

/* ---------------------------------------------------------- menu bar panel */
/* The macOS menu bar and the app's dropdown panel beneath it. */

.wm-desktop {
  background:
    radial-gradient(120% 120% at 20% 0%, #1B2A6B 0%, transparent 55%),
    radial-gradient(110% 100% at 85% 20%, #3A2470 0%, transparent 55%),
    linear-gradient(170deg, #0B1030, #05070F);
  border: 1px solid #222945;
  border-radius: 24px;
  padding: 0 0 3rem;
  overflow: hidden;
}

.wm-menubar {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .45rem 1.1rem;
  background: rgba(16, 20, 44, .75);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: var(--round);
  font-size: .6875rem;
  color: var(--wtext2);
}
.wm-menubar .apple { font-size: .8125rem; }
.wm-menubar .sp { margin-left: auto; }
.wm-menubar .status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.wm-menubar .status.on {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border-radius: 5px;
  padding: 2px 7px;
}
.wm-menubar .clock { font-variant-numeric: tabular-nums; }

.wm-panel {
  width: min(21rem, calc(100% - 2rem));
  margin: .625rem auto 0 auto;
  margin-right: clamp(1rem, 6%, 3rem);
  background: linear-gradient(180deg, var(--cob-top), var(--cob-bot));
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  padding: .875rem;
  font-family: var(--round);
  color: var(--wtext1);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .8);
}
.wm-panel .brand {
  font-family: var(--mono);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--wtext3);
  margin: 0 0 .625rem;
}
.wm-panel .ptiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.wm-ptile {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  padding: .5rem .625rem;
}
.wm-ptile .coin {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--tint) 22%, transparent);
  color: var(--tint);
  display: grid;
  place-items: center;
  flex: none;
}
.wm-ptile .t { font-size: .6875rem; font-weight: 600; line-height: 1.2; }
.wm-ptile .c { display: block; font-size: .5625rem; font-weight: 400; color: var(--wtext3); }

.wm-panel .module {
  margin-top: .625rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  padding: .5rem .625rem;
}
.wm-panel .module .cap {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wtext3);
  margin: 0 0 .375rem;
}
.wm-panel .recent {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .6875rem;
  padding: .25rem 0;
  color: var(--wtext2);
}
.wm-panel .recent .copy {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .5625rem;
  color: var(--indigo);
}
.wm-panel .pfoot {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .625rem;
  font-size: .5625rem;
  color: var(--wtext3);
}
.wm-panel .pfoot .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--live);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 60rem) {
  .wm-models, .wm-meeting { margin-left: 0; }
  .mac-screens { height: 460px; }
}
@media (max-width: 30rem) {
  .mac-screens .screen { padding: 16px 14px 12px; }
  .wm-tiles, .wm-utils { gap: 8px; }
  .mac-screens { height: 470px; }
  /* The nowrap model rows can't afford the speed column on a phone. */
  .wm-mrow .spd { display: none; }
  .wm-menubar { gap: .7rem; padding-inline: .8rem; }
}