/* The Mac drawn in the Mac page's demos (src/tolk-mac.html, assets/js/mac-demo.js): a small screen — menu bar with
   Tolk's own icon, a plain chat window, and Tolk's capsule floating where the real one floats (centred, low on the
   screen) — drawn from the app's own SwiftUI (TolkApp/Views/HUD/CapsuleHUDView.swift, 2026-10-20). Always dark, like
   the phones. The drawing is 640 × 400 and scaled with --s, so the slot takes exactly the scaled size. Every class
   starts with md-: phone.css and the lobby own the short names. */
.mac-slot{--s:.8;position:relative;width:calc(640px * var(--s));height:calc(400px * var(--s))}
.md-screen{position:absolute;left:0;top:0;width:640px;height:400px;transform:scale(var(--s));transform-origin:0 0;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 110%,#1E2C4A 0%,#0F1420 55%,#0A0C12 100%);font-family:var(--ios);color:#F2F3F5;
  box-shadow:0 60px 90px -50px rgba(14,30,60,.7),inset 0 0 0 1px #2A2D33;transition:opacity .5s}
.md-screen.fade{opacity:0}

/* The menu bar: the chat app's menus on the left, Tolk's waveform-and-mic icon among the status items on the right */
.md-bar{position:absolute;left:0;top:0;right:0;height:24px;display:flex;align-items:center;gap:14px;padding:0 12px;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.85);
  background:rgba(22,24,30,.72);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.md-bar .md-apple{width:11px;height:13px;fill:rgba(255,255,255,.9)}
.md-bar b{font-weight:700}
.md-bar .md-right{margin-left:auto;display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.85)}
.md-bar .md-right svg{width:14px;height:14px;color:#fff}
.md-bar .md-tolk{width:15px;height:15px;color:#fff}

/* The chat window: traffic lights, who it is, the thread, the composer with the caret where the words will land */
.md-win{position:absolute;left:70px;top:40px;width:500px;height:250px;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  background:#1A1B1F;box-shadow:0 30px 50px -24px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08)}
.md-title{flex:none;height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #26282D;background:#202125}
.md-lights{display:flex;gap:7px;margin-right:6px}
.md-lights i{width:11px;height:11px;border-radius:50%}
.md-lights i:nth-child(1){background:#FF5F57} .md-lights i:nth-child(2){background:#FEBC2E} .md-lights i:nth-child(3){background:#28C840}
.md-avatar{width:22px;height:22px;border-radius:50%;background:#3A3F48;display:grid;place-items:center;font-weight:600;font-size:11px}
.md-who{display:flex;flex-direction:column;line-height:1.15}
.md-who b{font-size:12.5px;font-weight:600}
.md-who span{font-size:10px;color:#8E939B}
.md-thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 14px}
.md-bubble{max-width:300px;padding:7px 11px;font-size:13px;line-height:1.38;border-radius:14px;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.md-bubble.show{opacity:1;transform:none}
.md-in{align-self:flex-start;background:#26282C;border-bottom-left-radius:5px}
.md-out{align-self:flex-end;background:#1F4E8C;border-bottom-right-radius:5px}
.md-composer{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 10px;border-top:1px solid #26282D}
.md-field{flex:1;min-height:30px;border-radius:15px;background:#111216;border:1px solid #2A2D33;padding:6px 12px;font-size:13px;line-height:1.3;color:#F2F3F5;transition:box-shadow .3s}
.md-field:empty::before{content:"";display:inline-block;width:1.5px;height:15px;background:#5A9DF0;vertical-align:-3px;animation:md-caret 1s steps(1) infinite}
.md-field.lit{box-shadow:0 0 0 2px rgba(46,140,240,.45)}
@keyframes md-caret{50%{opacity:0}}
.md-send{width:30px;height:30px;flex:none;border-radius:50%;background:#2E8CF0;color:#fff;display:grid;place-items:center;transition:transform .18s}
.md-send.pulse{transform:scale(1.18)}

/* Tolk's capsule (CapsuleHUDView): 48 high, dark glass with a faint white rim; a blue glow while it listens or works.
   The real one sits 166 pt above the bottom of the screen, centred. */
.md-hud{position:absolute;left:50%;top:304px;transform:translate(-50%,8px);height:48px;padding:0 16px;border-radius:999px;display:flex;align-items:center;gap:9px;white-space:nowrap;
  background:rgba(66,68,74,.86);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(92,170,255,0),0 18px 34px -16px rgba(0,0,0,.8);
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,.92);opacity:0;transition:opacity .25s,transform .25s,box-shadow .35s}
.md-hud.show{opacity:1;transform:translate(-50%,0)}
.md-hud.show{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(92,170,255,.9),0 0 10px 2px rgba(60,140,255,.32),0 18px 34px -16px rgba(0,0,0,.8)}
.md-hud > *{display:none;align-items:center;gap:9px}
.md-hud.listening .md-listen,.md-hud.dictating .md-tidy,.md-hud.translating .md-trans{display:flex}
.md-dot{position:relative;width:16px;height:16px;display:grid;place-items:center}
.md-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,107,107,.25);animation:md-pulse 1.5s ease-in-out infinite alternate}
.md-dot::after{content:"";width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#FF6B6B,#FF5A5A);box-shadow:0 0 6px rgba(255,107,107,.8)}
@keyframes md-pulse{from{transform:scale(.85)}to{transform:scale(1.35)}}
.md-wave{display:flex;align-items:center;gap:3px;height:20px}
.md-wave i{width:5px;height:5px;border-radius:50%;background:#4DA3FF;animation:md-dot .9s ease-in-out infinite alternate}
.md-wave i:nth-child(2){animation-delay:-.3s} .md-wave i:nth-child(3){animation-delay:-.6s} .md-wave i:nth-child(4){animation-delay:-.15s} .md-wave i:nth-child(5){animation-delay:-.45s}
@keyframes md-dot{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}
.md-chip{display:inline-flex;align-items:center;gap:5px;padding:3.5px 9px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11.5px;font-weight:700;color:rgba(255,255,255,.92)}
.md-chip em{font-style:normal;font-size:12px}
.md-spark{width:14px;height:14px;color:#59C7FF;animation:md-twinkle 1.2s ease-in-out infinite alternate}
@keyframes md-twinkle{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.05)}}
.md-engine{padding:3px 8px;border-radius:999px;background:#25457A;color:#8FC3FF;font-size:11px;font-weight:700}

/* Tolk's card (ReviewCard): the language at the top left, the engine and its time, a close button; the translation
   large; the check in green (the words turned back into your language) or, for a message received, the original in
   grey; two buttons. Centred on the screen, as the real one is. */
.md-card{position:absolute;left:50%;top:50%;z-index:4;width:470px;transform:translate(-50%,-50%) scale(.96);border-radius:18px;padding:14px 16px 16px;background:#1F2024;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 44px 70px -30px rgba(0,0,0,.9);opacity:0;transition:opacity .3s,transform .3s}
.md-card.show{opacity:1;transform:translate(-50%,-50%)}
.md-ch{display:flex;align-items:center;gap:10px;font-size:11.5px;color:#9A9FA8}
.md-lang{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:#2F4F86;color:#fff;font-weight:700;font-size:11.5px}
.md-lang i{font-style:normal;font-size:9px;opacity:.8}
.md-x{margin-left:auto;width:18px;height:18px;border-radius:50%;background:#44464C;color:#D5D8DD;display:grid;place-items:center;font-size:11px;font-weight:700}
.md-ct{margin:12px 0 0;min-height:46px;font-size:16.5px;line-height:1.4;font-weight:600;color:#fff}
.md-cb,.md-co{display:none;gap:6px;margin-top:12px;font-size:12px;line-height:1.45}
.md-cb{color:#5BD28A} .md-co{color:#B5B9C0}
.md-cb.on,.md-co.on{display:flex}
.md-cb svg,.md-co svg{flex:none;margin-top:1px}
.md-cbtns{margin-top:14px;display:flex;gap:10px}
.md-cbtns span{flex:1;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;font-weight:700;transition:transform .15s,filter .15s}
.md-b1{background:#3B82F6;color:#fff} .md-b2{background:#3A3B41;color:#fff}
.md-cbtns .hit{transform:scale(.97);filter:brightness(1.15)}
.md-bubble.sel{box-shadow:0 0 0 2px #5AA0FF;background:#2A4F86}

/* The shortcut, shown pressed when the story presses it: two keycaps in the corner of the screen */
.md-keys{position:absolute;right:26px;bottom:20px;display:flex;align-items:center;gap:7px}
.md-keys kbd{width:46px;height:40px;border-radius:9px;padding:5px 7px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(#FDFDFE,#E3E7ED);color:#3E4652;font:500 9.5px/1 var(--ios);text-align:left;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #9BA5B3,0 10px 18px -8px rgba(0,0,0,.7);transition:transform .12s,box-shadow .12s}
.md-keys kbd span{font-size:14px;color:#0E1116}
.md-keys b{font:500 14px var(--ios);color:rgba(255,255,255,.5)}
.md-keys.press kbd{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff,0 0 0 #9BA5B3,0 0 0 2px rgba(46,140,240,.7),0 6px 12px -6px rgba(0,0,0,.7)}

/* The slot shrinks with the window; under 960 the section stacks (site.css) and the Mac takes the width it has */
@media (max-width: 1180px){ .mac-slot{--s:.68} }
@media (max-width: 960px){ .mac-slot{--s:.8} }   /* stacked under the words: as wide as it is on a desktop, then stepped down with the phone */
@media (max-width: 600px){ .mac-slot{--s:.56} }
@media (max-width: 420px){ .mac-slot{--s:.52} }
@media (max-width: 380px){ .mac-slot{--s:.48} }
@media (prefers-reduced-motion: reduce){ .md-dot::before,.md-wave i,.md-spark,.md-field:empty::before{animation:none} }