/* The phone drawn in every demo. Sizes are iPhone points; the keyboard is drawn from Tolk's own SwiftUI
   (TolkKeyboard/Views) and the owner's screenshots of 2026-09-26. The chat around it is a plain one, no real messenger's.
   The drawing is always 414 × 868 and scaled with --s, so the slot takes exactly the scaled size (no sideways scroll). */
.phone-slot{--s:.78;position:relative;width:calc(414px * var(--s));height:calc(868px * var(--s))}
.phone{position:absolute;left:0;top:0;width:414px;height:868px;border-radius:64px;background:#0B0C0E;padding:12px;box-shadow:0 70px 110px -60px rgba(14,30,60,.6),inset 0 0 0 1px #2A2D33;transform:scale(var(--s));transform-origin:0 0}
.screen{position:relative;height:100%;border-radius:52px;background:#0E0F11;overflow:hidden;display:flex;flex-direction:column;font-family:var(--ios);color:#F2F3F5;transition:opacity .5s}
.screen.fade{opacity:0}

/* Chat */
.status{height:50px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 30px 6px 40px;font-weight:600;font-size:15px}
.chat-head{flex:none;display:flex;align-items:center;gap:10px;padding:8px 14px 10px;border-bottom:1px solid #1E2024}
.chat-head .back{color:#8FB8F2}
.avatar{width:36px;height:36px;border-radius:50%;background:#3A3F48;color:#E9EDF2;display:grid;place-items:center;font-weight:600;font-size:15px}
.who{display:flex;flex-direction:column;line-height:1.2}
.who b{font-size:16px;font-weight:600}
.who span{font-size:12px;color:#8E939B}
.thread{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px 14px}
.bubble{max-width:262px;padding:8px 12px;font-size:15px;line-height:1.38;border-radius:18px;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.bubble.show{opacity:1;transform:none}
.bubble.in{align-self:flex-start;background:#26282C;border-bottom-left-radius:6px}
.bubble.out{align-self:flex-end;background:#1F4E8C;border-bottom-right-radius:6px}
.typing{align-self:flex-start;background:#26282C;border-radius:18px;padding:12px 14px;gap:4px;display:none}
.typing.show{display:flex}
.typing i{width:6px;height:6px;border-radius:50%;background:#8E939B;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}}
.toast{position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);background:#2C2F34;color:#F2F3F5;font-size:13px;font-weight:500;padding:8px 14px;border-radius:999px;display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.composer{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px 10px}
.composer .plus{color:#C9CDD3}
.field{flex:1;min-height:36px;border-radius:18px;background:#1C1E22;border:1px solid #2A2D33;padding:8px 14px;font-size:15px;line-height:1.3;color:#F2F3F5}
.field:empty::before{content:"";display:inline-block;width:2px;height:18px;background:#5A9DF0;vertical-align:-3px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.send{width:36px;height:36px;flex:none;border-radius:50%;background:#2E8CF0;color:#fff;display:grid;place-items:center;transition:transform .18s}
.send.pulse{transform:scale(1.18)}

/* Tolk keyboard: Color(white: 0.08) ground, 16-point margins, the rows of KeyboardView. At rest it is 250 points tall
   with the microphone row on its centre line (KeyboardColumn); a card makes it taller (350 here, 345–380 on phones). */
.kb{position:relative;isolation:isolate;flex:none;background:#141414;border-top:1px solid #262626;border-radius:16px 16px 0 0;padding:10px 16px 0;display:flex;flex-direction:column;gap:6px}
.kb-head{height:30px;display:flex;align-items:center;gap:8px}
.capsule{height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 18px;border-radius:999px;background:#2E2E2E;color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
.compose{color:#2E8CF0}
.compose span{color:#fff}
.session{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:11px;color:#999}
.session i{width:6px;height:6px;border-radius:50%;background:#34C759}
.kb-mid{position:relative;height:22px;margin-top:4px;transition:height .3s}
.kb.tall .kb-mid{height:160px}
.hint{position:absolute;left:0;right:0;top:0;height:22px;display:grid;place-items:center;font-size:12px;font-weight:500;color:#808080}
.hint.active{color:#2E8CF0}

/* InboundCard (her message, translated), ReviewCard (your reply to check) */
.card{position:absolute;inset:0;overflow:hidden;border-radius:12px;background:#242424;border:1px solid rgba(46,140,240,.3);padding:10px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:scale(.97);transition:opacity .3s,transform .3s}
.card.show{opacity:1;transform:none}
.card-head{display:flex;align-items:center;gap:6px;white-space:nowrap}
.card-head .cl{font-size:11px;font-weight:600;color:#2E8CF0}
.card-head .badge{font-size:10px;color:#8C8C8C;overflow:hidden;text-overflow:ellipsis}
.card-head .x{margin-left:auto;width:16px;height:16px;border-radius:50%;background:#8C8C8C;color:#242424;display:grid;place-items:center;flex:none}
.card .body{font-size:15px;font-weight:500;line-height:1.35;color:#fff}
.card .back{display:flex;gap:5px;font-size:12px;line-height:1.35;color:rgba(52,199,89,.9)}
.card-btns{margin-top:auto;display:flex;gap:8px}
.card-btns > span{flex:1;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;transition:transform .15s,filter .15s}
.card-btns .insert{background:#2E8CF0;color:#fff;font-size:14px;font-weight:700}
.card-btns .hit{transform:scale(.96);filter:brightness(1.15)}
.card-btns .note{background:#3D3D3D;color:#fff;transition:background-color .25s,transform .15s,filter .15s}
.card-btns .note.working{color:#DADADA}
.card-btns .note.go{background:#1AA659}
.mini-spin{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite}
/* The microphone row: a round glass key each side (settings, or × once a dictation is under way · Del), the white
   microphone in the middle — an orb while it listens, a spinner while the result is on its way — and the language
   disc that opens around it when it is held and dragged (disc.js). */
.kb-mic{height:72px;margin-top:11px;display:flex;align-items:center;justify-content:center;gap:30px;transition:margin .3s}
.kb.tall .kb-mic{margin-top:6px}
.side{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:600}
.side.gear{color:#B3B3B3}
.mic-slot{position:relative;width:70px;height:72px;display:grid;place-items:center;transition:width .25s}
.mic-btn{width:70px;height:70px;border-radius:50%;background:linear-gradient(#fff,#EBEBEB);box-shadow:0 0 12px rgba(255,255,255,.22);color:#000;display:grid;place-items:center;transition:transform .2s}
.mic-btn.press{transform:scale(.95)}
.spokes{animation:spin .8s steps(8) infinite}
.mic-btn .spokes{display:none;color:#3A3A3C}
.processing .mic-btn .spokes{display:block}
.processing .mic-glyph{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.orb{position:absolute;inset:0;display:none;place-items:center}
.recording{width:140px}
.recording .orb{display:grid}
.recording .mic-btn{display:none}
.orb .ring{position:absolute;width:66px;height:66px;border-radius:50%;border:2px solid rgba(46,140,240,.6);animation:ripple 1.4s linear infinite}
.orb .ring.two{border-width:1.5px;border-color:rgba(90,110,255,.4);animation-delay:.7s}
@keyframes ripple{from{transform:scale(1);opacity:1}to{transform:scale(1.6);opacity:.1}}
.orb .halo{position:absolute;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(46,140,240,.55) 20%,rgba(0,90,255,.15) 50%,transparent 70%);animation:breathe 1.1s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.12)}}
.orb .core{position:relative;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#00D9FF,#2673F2);box-shadow:0 0 18px rgba(46,140,240,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff}
.orb .core i{width:16px;height:16px;border-radius:3px;background:#fff}
.orb .core b{font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace}

/* The disc: dark frosted glass over the dimmed, blurred keyboard; the slice under the finger lifts and lights */
.dim{position:absolute;inset:0;z-index:5;border-radius:inherit;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s}
.kb.disc-open .dim{opacity:1}
.kb-head,.kb-mid,.kb-keys,.kb-sys,.side{transition:filter .2s}
.kb.disc-open :is(.kb-head,.kb-mid,.kb-keys,.kb-sys,.side){filter:blur(4px)}
.disc-wrap{position:absolute;left:50%;top:50%;z-index:6;width:228px;height:228px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:transform .42s cubic-bezier(.3,1.35,.5,1),opacity .25s}
.kb.disc-open .disc-wrap{opacity:1;transform:translate(-50%,-50%)}
.disc-wrap::before{content:"";position:absolute;inset:12px;border-radius:50%;background:rgba(30,32,36,.4);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.disc{position:relative;display:block;font-family:var(--ios)}
.disc text{text-anchor:middle;fill:#fff}
.disc .slice{transform-box:view-box;transform-origin:114px 114px;transition:transform .26s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.disc .slice path{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.12);stroke-width:.6;transition:fill .2s}
.disc .flag{font-size:14px}
.disc .slice .name{font-size:12.5px;font-weight:500}
.disc-wrap.lit .slice{opacity:.62}
.disc-wrap .slice.on{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1.045)}
.disc-wrap .slice.on path{fill:var(--on);stroke:none;filter:drop-shadow(0 0 9px var(--on))}
.disc .slice.on .name{font-size:14px;font-weight:700;fill:var(--ink)}
.disc .slice.on .flag{font-size:17px}
.disc .hole{fill:rgba(34,36,40,.86);stroke:rgba(255,255,255,.16);stroke-width:.6}
.disc .pointed{display:none}
.disc .pointed.on{display:inline}
.disc .pointed .flag{font-size:20px}
.disc .pointed .name{font-size:15px;font-weight:700}
.disc-wrap.lit .release{display:none}
.disc .release text{fill:rgba(255,255,255,.75);font-weight:700}
.disc .release .x{font-size:13px}
.disc .release .words{font-size:9.5px;font-weight:600}
.finger{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.3);border:1.5px solid rgba(255,255,255,.75);box-shadow:0 0 14px rgba(255,255,255,.35);transform:translate(-50%,-50%);transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.kb-keys{height:38px;margin-top:43px;display:flex;gap:10px;transition:margin .3s}
.kb.tall .kb-keys{margin-top:6px}
.key{height:38px;border-radius:8px;background:#333;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.key.space{flex:1}
.key.ret{width:88px;font-weight:600}
.key.tr{width:88px;gap:6px}
.key.tr b{font-size:17px;font-weight:500}
.key.tr .paste{width:41px;height:34px;border-radius:8px;background:#525252;display:grid;place-items:center;color:#D0D0D0;transition:background-color .2s,color .2s}
.key.tr.hit .paste{background:#8A8A8A;color:#fff}
.kb-sys{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#D0D0D0}

/* Voice notes in the chat: hers (a long press rings it), and the audio file you send back */
.voice{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:18px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s,box-shadow .3s}
.voice.show{opacity:1;transform:none}
.voice.in{align-self:flex-start;background:#26282C;border-bottom-left-radius:6px}
.voice.out{align-self:flex-end;background:#1F4E8C;border-bottom-right-radius:6px}
.voice .note-ico{width:34px;height:34px;border-radius:50%;background:#FF7A59;display:grid;place-items:center;flex:none}
.voice .track{width:110px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.voice.held,.bubble.held{box-shadow:0 0 0 2px #5A9DF0;transform:scale(1.02)}
.voice .play{width:0;height:0;border-left:11px solid #F2F3F5;border-top:7px solid transparent;border-bottom:7px solid transparent}
.voice .wave-bars{display:flex;align-items:center;gap:2px;height:22px}
.voice .wave-bars i{width:2.5px;border-radius:2px;background:#8E939B}
.voice .wave-bars i.p{background:#5A9DF0}
.voice small{font-size:11px;color:#AEB3BA}

/* Sheets over the chat: the system share sheet, and Tolk's "Voice message" sheet (ShareTranslationView) */
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.overlay.show{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#1C1C1E;border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.8,.2,1);padding:10px 16px 34px}
.sheet.share{left:8px;right:8px;bottom:8px;border-radius:30px;padding:18px 14px 20px}
.sheet.show{transform:none}
.grabber{width:36px;height:5px;border-radius:3px;background:#48484A;margin:0 auto 12px}
.share-head{display:flex;align-items:center;gap:14px;padding:0 6px 14px;border-bottom:1px solid #2C2C2E}
.share-head .doc{width:38px;height:48px;border-radius:5px;background:#E9EAEC;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8E8E93}
.share-head .doc small{font-size:7px;color:#8E8E93}
.share-head b{display:block;font-size:14px;letter-spacing:.01em}
.share-head small{font-size:12px;color:#8E8E93}
.apps,.actions{display:flex;justify-content:space-between;padding:16px 2px 4px}
.actions{border-top:1px solid #2C2C2E;margin-top:10px;padding-top:14px}
.app,.action{display:flex;flex-direction:column;align-items:center;gap:6px;width:70px;font-size:11px;line-height:1.25;color:#E5E5EA;text-align:center}
.action .round{width:56px;height:56px;border-radius:50%;background:#2C2C2E;display:grid;place-items:center;color:#E5E5EA}
.app .ico,.app img{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;transition:transform .2s,box-shadow .2s}
.app.pick .ico,.app.pick img{transform:scale(1.08);box-shadow:0 0 0 3px #0A84FF}
.vsheet{height:470px;display:flex;flex-direction:column}
.vsheet-top{display:flex;align-items:center;justify-content:center;position:relative;height:40px;margin-bottom:12px}
.vsheet-top b{font-size:17px}
.vsheet-top .done{position:absolute;right:0;height:34px;padding:0 14px;border-radius:17px;background:#2C2C2E;color:#0A84FF;font-size:16px;display:grid;place-items:center;transition:background-color .2s}
.vsheet-top .done.hit{background:#3A3A3C}
.v-working{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#8E8E93;font-size:14px}
.v-working .spokes{width:30px;height:30px;color:#3D8BF2}
.v-stop{height:32px;padding:0 12px;border-radius:8px;background:rgba(10,132,255,.16);color:#0A84FF;display:flex;align-items:center;gap:6px}
.v-stop i,.v-read i.sq{width:10px;height:10px;border-radius:2px;background:currentColor}
.v-result{display:none;flex-direction:column;gap:14px}
.vsheet.done .v-working{display:none}
.vsheet.done .v-result{display:flex}
.v-block{background:#2C2C2E;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.v-block small{font-size:12px;color:#8E8E93}
.v-block p{margin:0;font-size:16px;line-height:1.4;color:#fff}
.v-btns{display:flex;gap:12px}
.v-btns span{flex:1;height:50px;border-radius:25px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:15px;transition:background-color .2s,color .2s}
.v-read{background:rgba(10,132,255,.18);color:#0A84FF}
.v-read.preparing{background:#000;color:#636366}
.v-copy{background:#0A84FF;color:#fff}