/* VogChat on a phone (app.html) — same screens, colours and sizes as the iPhone app (mobil/src) */
:root {
    --bg: #ffffff; --sunk: #f0f2f5; --text: #111b21; --text-2: #54656f; --meta: #667781; --icon: #1f2c34;
    --green: #00a884; --green-d: #008069; --soft: rgba(0,168,132,.12); --link: #027eb5; --danger: #e5484d;
    --border: rgba(17,27,33,.1); --bar: #f6f5f3; --backdrop: rgba(11,20,26,.35);
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, monospace;
    --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
    color-scheme: light;
}
[data-theme="dark"] {
    --bg: #111b21; --sunk: #202c33; --text: #e9edef; --text-2: #aebac1; --meta: #8696a0; --icon: #d1d7db;
    --green-d: #00a884; --soft: rgba(0,168,132,.18); --link: #53bdeb; --danger: #ff6369;
    --border: rgba(255,255,255,.08); --bar: #1f2c34; --backdrop: rgba(0,0,0,.5);
    color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body.shell { overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--link); text-decoration: none; }
.grow { flex: 1; min-width: 0; }
.ico { display: block; flex-shrink: 0; }

/* screens slide in like iOS */
.scr { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); padding-top: var(--st); max-width: 640px; margin: 0 auto; }
.scr.in-right { animation: scr-in .32s cubic-bezier(.2,.8,.2,1) both; }
.scr.in-left { animation: scr-back .32s cubic-bezier(.2,.8,.2,1) both; }
.scr.in-fade { animation: scr-fade .3s ease both; }
@keyframes scr-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes scr-back { from { transform: translateX(-30%); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes scr-fade { from { opacity: 0; } to { opacity: 1; } }

.pad { padding: 0 20px; }
.pad.grow { padding-top: 20px; overflow-y: auto; }
.bottom { padding-top: 10px; padding-bottom: calc(var(--sb) + 14px); display: flex; flex-direction: column; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.h1 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 0; text-align: center; }
.lead { color: var(--meta); font-size: 16px; line-height: 1.4; text-align: center; margin: 8px 0 22px; }
.cap { font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--meta); margin: 0; display: block; }
.lbl { font-size: 14px; font-weight: 600; display: block; margin-bottom: 6px; }
.muted { color: var(--meta); }
.small { font-size: 13px; }

/* buttons (Btn in the app) */
.btn-main, .btn-soft, .btn-danger { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 26px; padding: 0 22px; font-size: 17px; font-weight: 600; transition: opacity .15s, transform .1s; }
.btn-main { background: var(--green); color: #fff; }
.btn-soft { background: var(--soft); color: var(--green-d); }
.btn-danger { background: rgba(229,72,77,.1); color: var(--danger); }
.btn-main:active, .btn-soft:active, .btn-danger:active { opacity: .8; transform: scale(.99); }
.btn-main:disabled { opacity: .45; }
.btn-main.loading { color: transparent; position: relative; pointer-events: none; }
.btn-main.loading::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* inputs (Field in the app) */
.inp { width: 100%; height: 52px; border-radius: 14px; padding: 0 16px; font: 17px var(--font); color: var(--text); background: var(--sunk); border: 1px solid var(--border); outline: none; -webkit-appearance: none; }
.inp:focus { border-color: var(--green); }
.inp.on-bg { background: var(--bg); }
.inp.bad { border-color: var(--danger); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.code-inp { text-align: center; letter-spacing: 6px; font-size: 22px; font-weight: 700; text-transform: uppercase; }
.field small { display: block; color: var(--meta); font-size: 13px; margin-top: 6px; }

/* welcome */
.brand { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 8px; }
.brand b { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.welcome-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.welcome-bottom { padding: 0 24px calc(var(--sb) + 10px); display: flex; flex-direction: column; gap: 12px; }
.links { display: flex; justify-content: center; gap: 18px; font-size: 13px; }
.name-logo { display: block; margin: 10px auto 18px; }
@media (max-height: 640px) { .vi-stage { height: 230px; } .vi-title { font-size: 22px; margin-top: 14px; } }

/* home */
.home-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 4px 16px 0; height: 48px; }
.round { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--icon); }
.round.green { background: var(--green); color: #fff; }
.round.green svg { stroke-width: 2.4; }
.big { font-size: 34px; font-weight: 800; letter-spacing: -.6px; margin: 2px 16px 10px; }
.big.flush { margin: 18px 0 18px; }
.search { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 0 12px; height: 38px; border-radius: 12px; background: var(--sunk); color: var(--meta); }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 17px var(--font); color: var(--text); -webkit-appearance: none; }
.search input::-webkit-search-cancel-button { display: none; }
.av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 21px; background: var(--c, #dfe5e7); flex-shrink: 0; }
[data-theme="dark"] .av:not([style*="--c"]) { background: #374248; }
.av.ghosty { color: var(--meta); }
.row { display: flex; align-items: center; gap: 12px; padding-left: 16px; width: 100%; text-align: left; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.row:active { background: var(--sunk); }
.row-body { flex: 1; min-width: 0; padding: 13px 16px 13px 0; border-bottom: .5px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.row-top, .row-sub { display: flex; align-items: center; gap: 6px; }
.row-top b { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-top time { font-size: 14px; color: var(--meta); }
.row-sub { color: var(--meta); font-size: 15px; }
.row-sub span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--soft); border-top-color: var(--green); animation: spin .8s linear infinite; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 34px 0; text-align: center; }
.empty img { margin-bottom: 6px; }
.empty b { font-size: 21px; }
.empty p { margin: 0 0 8px; color: var(--meta); font-size: 15px; line-height: 1.4; }
.hint { position: absolute; top: 50px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; animation: bob 1.4s ease-in-out infinite; }
.hint-arrow { width: 0; height: 0; margin-right: 14px; border: 8px solid transparent; border-bottom: 9px solid var(--green); border-top: 0; }
.hint-box { background: var(--green); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 13px; border-radius: 14px; max-width: 175px; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
@keyframes bob { 50% { transform: translateY(5px); } }
.foot { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--meta); font-size: 13px; padding: 24px 0; margin: 0; }

.tabbar { display: flex; border-top: .5px solid var(--border); background: var(--bar); padding: 6px 0 max(var(--sb), 8px); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--meta); font-weight: 500; }
.tab-ic { width: 60px; height: 32px; border-radius: 16px; display: grid; place-items: center; color: var(--icon); transition: background .2s; }
.tab.on { color: var(--text); font-weight: 700; }
.tab.on .tab-ic { background: var(--soft); color: var(--green-d); }

/* settings */
.profile { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--sunk); }
.big-av { width: 60px; height: 60px; font-size: 26px; }
.sec { font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--meta); margin: 22px 0 8px 4px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--sunk); }
.seg button { flex: 1; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; }
.seg button.on { background: var(--bg); font-weight: 700; }
.group { border-radius: 14px; overflow: hidden; background: var(--sunk); }
.group > * + * { border-top: .5px solid var(--border); }
.row-link, .lang-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; font-size: 16px; color: var(--text); text-align: left; }
.row-link svg { color: var(--meta); }
.lang-row svg { color: var(--green); }

/* create / join */
.head { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.back { color: var(--icon); padding: 4px; margin: -4px; }
.code-card { border-radius: 18px; padding: 14px; background: var(--sunk); display: flex; flex-direction: column; gap: 14px; }
.tiles { display: flex; gap: 5px; perspective: 400px; }
.tiles b { flex: 1; aspect-ratio: .82; border-radius: 10px; background: var(--bg); color: var(--green-d); display: grid; place-items: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tiles b.flip { animation: tile-flip .42s cubic-bezier(.3,.9,.4,1.2) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes tile-flip { 0% { transform: rotateX(0); } 40% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.chips { display: flex; justify-content: center; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 19px; background: var(--bg); font-size: 15px; font-weight: 600; transition: background .25s, color .25s; }
.chip .ic, .ibtn .ic { display: grid; place-items: center; }
.chip .ic-done, .ibtn .ic-done { display: none; }
.chip.copied, .ibtn.copied { background: var(--green); color: #fff; }
.chip.copied .ic-copy, .ibtn.copied .ic-copy { display: none; }
.chip.copied .ic-done, .ibtn.copied .ic-done { display: grid; animation: pop-in .45s cubic-bezier(.2,.9,.3,1.5) both; }
.chip.spin .ic-spin { animation: regen .55s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes pop-in { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes regen { to { transform: rotate(360deg); } }
.remember { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--sunk); cursor: pointer; }
.remember b { display: block; font-size: 16px; font-weight: 600; }
.remember small { display: block; color: var(--meta); font-size: 13px; margin-top: 1px; }
.rem-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); color: var(--green-d); display: grid; place-items: center; flex-shrink: 0; }
.switch { -webkit-appearance: none; appearance: none; width: 51px; height: 31px; border-radius: 16px; background: var(--border); position: relative; flex-shrink: 0; margin: 0; cursor: pointer; transition: background .2s; }
[data-theme="dark"] .switch { background: rgba(255,255,255,.16); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(20px); }
.working { text-align: center; color: var(--meta); font-size: 13px; margin: 0; }

/* sheets */
.sheet-wrap, .dlg-wrap { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: flex-end; }
.backdrop { position: absolute; inset: 0; background: var(--backdrop); animation: scr-fade .25s both; }
.sheet { position: relative; background: var(--bg); border-radius: 22px 22px 0 0; padding: 8px 16px calc(var(--sb) + 12px); display: flex; flex-direction: column; gap: 12px; max-width: 640px; width: 100%; margin: 0 auto; animation: sheet-up .3s cubic-bezier(.2,.8,.2,1) both; }
.sheet.out { animation: sheet-down .22s ease-in both; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { to { transform: translateY(100%); } }
.grabber { align-self: center; width: 38px; height: 5px; border-radius: 3px; background: var(--border); margin-bottom: 4px; }
.sheet h3 { margin: 0; font-size: 19px; text-align: center; }
.sheet-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; color: var(--meta); }
.sheet-row b { display: block; color: var(--text); font-size: 17px; font-weight: 600; }
.sheet-row small { display: block; font-size: 13px; margin-top: 1px; }
.sheet-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.info-head { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.info-head b { display: block; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-head small, .row-ic { display: flex; align-items: center; gap: 5px; color: var(--meta); font-size: 13px; margin: 0; }
.info-row { display: flex; align-items: center; gap: 8px; padding: 11px 14px; }
.info-val { display: block; font-size: 19px; font-weight: 700; letter-spacing: 1.5px; margin-top: 2px; }
.ibtn { width: 38px; height: 38px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; transition: background .25s, color .25s; }
.pill { height: 34px; padding: 0 13px; border-radius: 17px; background: var(--bg); font-weight: 600; font-size: 14px; }

.dlg-wrap { justify-content: center; align-items: center; background: var(--backdrop); padding: 30px; animation: scr-fade .2s both; }
.dlg { width: 100%; max-width: 300px; background: var(--bg); border-radius: 16px; overflow: hidden; text-align: center; animation: pop-in .25s cubic-bezier(.2,.9,.3,1.2) both; }
.dlg p { margin: 0; padding: 20px 18px; font-size: 15px; line-height: 1.4; }
.dlg-btns { display: flex; border-top: .5px solid var(--border); }
.dlg-btns button { flex: 1; height: 46px; font-size: 17px; color: var(--link); }
.dlg-btns button + button { border-left: .5px solid var(--border); }
.dlg-btns .ok { font-weight: 600; }
.dlg-btns .danger { color: var(--danger); font-weight: 600; }

/* intro inside the shell uses the shell's text colours */
.shell .vi-title { color: var(--text); }
.shell .vi-text { color: var(--meta); }

/* the page is being translated (see the <head> script) — avoids a flash of English */
html.i18n-wait body { opacity: 0; }

/* swipe left on a chat → red Delete button (like WhatsApp) */
.swipe { position: relative; overflow: hidden; }
.swipe .row { position: relative; z-index: 1; background: var(--bg); touch-action: pan-y; }
.swipe .row:active { background: var(--sunk); }
.swipe-del { position: absolute; top: 0; right: 0; bottom: 0; width: 92px; background: var(--danger); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 600; }

/* long press = our room info sheet, never the system copy/select menu */
body.shell { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.shell input, body.shell textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* globe language switch (phone screens) — the native picker opens on tap */
.lang-pick { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 16px; background: var(--sunk, var(--bg-sunk)); color: var(--text); font-size: 13px; font-weight: 700; }
.lang-pick select { position: absolute; inset: 0; opacity: 0; width: 100%; font-size: 16px; cursor: pointer; }
.brand { position: relative; }
.brand .lang-pick { position: absolute; right: 16px; top: 8px; }

.hint { animation: hint-life 5.6s ease .4s both, bob 1.4s ease-in-out infinite; }
@keyframes hint-life { 0% { opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.sheet-wrap .backdrop { background: transparent; animation: none; }
.sheet { box-shadow: 0 -6px 30px rgba(11,20,26,.16); }
[data-theme="dark"] .sheet { box-shadow: 0 -6px 30px rgba(0,0,0,.5); }

.flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; vertical-align: -3px; margin-right: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lang-code .flag { width: 18px; height: 13px; margin-right: 5px; vertical-align: -2px; }