/* ============================================================
   iPhone 4 + skeuomorfní iOS – tělo telefonu, zámek, plocha
   Displej 320 × 480 bodů jako na originálu.
   ============================================================ */

:root{
  --screen-w: 320px;
  --screen-h: 480px;
  --bezel-side: 26px;
  --bezel-top: 106px;
  --bezel-bottom: 138px;

  --ios-blue: #1063d8;
  /* Arimo = webový font s rozměry Helveticy a plnou češtinou (načítá se
     z Google Fonts v index.html). Záloha: Arial, ten má češtinu všude. */
  --ios-font: "Arimo", Arial, Roboto, "Segoe UI", sans-serif;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body{
  margin:0; padding:0; height:100%;
  background:#e9e9ec;
  background-image: radial-gradient(circle at 50% 30%, #fbfbfd 0%, #dedee3 100%);
  font-family: var(--ios-font);
  overflow:hidden; overscroll-behavior:none;
}

.stage{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }

/* ---------- tělo iPhonu 4 ---------- */
.device{
  position:relative;
  width: calc(var(--screen-w) + 2 * var(--bezel-side));
  height: calc(var(--screen-h) + var(--bezel-top) + var(--bezel-bottom));
  transform-origin:center center;
  user-select:none; -webkit-user-select:none;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.35));
}

/* nerezový rámeček po obvodu */
.device__steel{
  position:absolute; inset:0; border-radius:46px; padding:3px;
  background:
    linear-gradient(160deg, #fdfdfd 0%, #9a9aa0 14%, #5e5e66 34%, #cfcfd6 52%,
                    #6c6c74 70%, #a9a9b1 86%, #ededf2 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.7);
}
.device__body{
  position:relative; width:100%; height:100%;
  border-radius:43px; overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, #23232a 0%, #0c0c10 45%, #060608 100%);
  box-shadow: inset 0 0 0 1px #000, inset 0 2px 6px rgba(255,255,255,.08);
  display:flex; flex-direction:column; align-items:center;
}

.bezel{ position:relative; width:100%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; }
.bezel--top{ height: var(--bezel-top); }
.bezel--bottom{ height: var(--bezel-bottom); }

.front-camera{
  position:absolute; left:50%; top:44px; margin-left:-62px;
  width:9px; height:9px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #3b4a63 0%, #10131a 60%, #05060a 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), inset 0 0 2px #000;
}
.earpiece{
  position:absolute; left:50%; top:45px; margin-left:-31px;
  width:62px; height:7px; border-radius:4px;
  background: linear-gradient(180deg, #17171c 0%, #0a0a0e 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.07);
}

/* ---------- home tlačítko ---------- */
.home-button{
  width:58px; height:58px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid #303036;
  background: radial-gradient(circle at 50% 35%, #2e2e35 0%, #17171c 55%, #101014 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.10), inset 0 -3px 6px rgba(0,0,0,.85),
              0 1px 0 rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  transition: transform .08s ease, filter .08s ease;
}
.home-button span{
  width:17px; height:17px; border-radius:3px;
  border:1.5px solid rgba(214,214,224,.75);
}
.home-button:active{ transform:scale(.96); filter:brightness(.8); }

/* ---------- boční tlačítka ---------- */
.side-button{
  position:absolute; border:0; padding:0; cursor:default;
  background: linear-gradient(90deg, #b9b9c0, #78787f);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.side-button--power{ top:-3px; right:52px; width:46px; height:4px; border-radius:2px 2px 0 0; cursor:pointer; }
.side-button--silent{ top:150px; left:-3px; width:4px; height:22px; border-radius:2px 0 0 2px; }
.side-button--volume-up{ top:196px; left:-3px; width:4px; height:34px; border-radius:2px 0 0 2px; }
.side-button--volume-down{ top:240px; left:-3px; width:4px; height:34px; border-radius:2px 0 0 2px; }
.side-button--power:active{ filter:brightness(.8); }

/* ---------- displej ---------- */
.screen{
  position:relative; flex:0 0 auto;
  width: var(--screen-w); height: var(--screen-h);
  overflow:hidden; background:#000; color:#fff;
  box-shadow: 0 0 0 1px #000, 0 0 14px rgba(0,0,0,.9);
}
.screen__glare{
  position:absolute; inset:0; z-index:200; pointer-events:none;
  background: linear-gradient(203deg,
      rgba(255,255,255,.17) 0%, rgba(255,255,255,.09) 26%,
      rgba(255,255,255,.02) 38%, rgba(255,255,255,0) 52%);
}
.wallpaper, .wallpaper-dim{ position:absolute; inset:0; width:100%; height:100%; }
.wallpaper-dim{ background:rgba(0,0,0,0); transition:background .35s ease; pointer-events:none; }

/* ---------- stavový řádek ---------- */
.statusbar{
  position:absolute; top:0; left:0; right:0; height:20px; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5px; font-size:12px; font-weight:700; color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.55);
  background: linear-gradient(180deg, #4b4b4b 0%, #202020 55%, #000 100%);
}
.statusbar--transparent{ background:transparent; }
.statusbar--dark{
  color:#fff;
  background: linear-gradient(180deg, #4b4b4b 0%, #202020 55%, #000 100%);
}
.statusbar__left, .statusbar__right{ display:flex; align-items:center; gap:4px; }
.statusbar__left{ flex:1; }
.statusbar__right{ flex:1; justify-content:flex-end; }
.statusbar__center{ flex:0 0 auto; font-size:12px; font-weight:700; }
.carrier{ font-size:11px; font-weight:500; }

/* signál – pět stoupajících sloupečků */
.signal{ display:flex; align-items:flex-end; gap:1.5px; height:9px; }
.signal i{ width:3px; background:#fff; border-radius:.5px; display:block; opacity:1; }
.signal i:nth-child(1){ height:3px; } .signal i:nth-child(2){ height:4.5px; }
.signal i:nth-child(3){ height:6px; } .signal i:nth-child(4){ height:7.5px; }
.signal i:nth-child(5){ height:9px; }
.signal i.off{ opacity:.32; }

.wifi{
  width:12px; height:9px; display:block;
  background:
    radial-gradient(circle at 50% 100%, #fff 0 1.6px, transparent 1.9px),
    radial-gradient(circle at 50% 100%, transparent 0 3.2px, #fff 3.4px 4.4px, transparent 4.6px),
    radial-gradient(circle at 50% 100%, transparent 0 6px, #fff 6.2px 7.2px, transparent 7.4px);
}

.battery-pct{ font-size:11px; font-weight:500; }
.battery{
  position:relative; width:23px; height:10px; border-radius:2px;
  border:1px solid rgba(255,255,255,.9); background:rgba(0,0,0,.25);
}
.battery::after{
  content:""; position:absolute; right:-3px; top:2.5px;
  width:2px; height:4px; border-radius:0 1px 1px 0; background:rgba(255,255,255,.9);
}
.battery__fill{
  position:absolute; left:1px; top:1px; bottom:1px; width:19%;
  border-radius:1px; background: linear-gradient(180deg,#fff,#cfcfcf);
}
.statusbar__lock{ display:inline-block; }
.statusbar__lock svg{ width:8px; height:11px; display:block; fill:currentColor; }

/* ---------- obecné view ---------- */
.view{
  position:absolute; inset:0; z-index:10;
  opacity:0; visibility:hidden;
  transition: opacity .22s ease;
}
.view.is-active{ opacity:1; visibility:visible; }

/* ---------- zamykací obrazovka ---------- */
.view--lock{ display:flex; flex-direction:column; justify-content:space-between; touch-action:none; }

.lock__panel{
  margin-top:20px; padding:10px 0 12px; text-align:center;
  background: linear-gradient(180deg, rgba(20,20,24,.62) 0%, rgba(8,8,10,.52) 100%);
  border-bottom:1px solid rgba(0,0,0,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 rgba(255,255,255,.08);
}
.lock__time{
  font-size:62px; line-height:1; font-weight:400; letter-spacing:-1px;
  text-shadow:0 -1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.12);
}
.lock__date{ margin-top:4px; font-size:15px; font-weight:400; text-shadow:0 -1px 2px rgba(0,0,0,.9); }

.lock__slider{ padding:0 12px 16px; }
.lock__track{
  position:relative; height:44px; border-radius:8px; overflow:hidden;
  background: linear-gradient(180deg, rgba(20,20,22,.78) 0%, rgba(50,50,54,.72) 100%);
  border:1px solid rgba(0,0,0,.8);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.14);
  display:flex; align-items:center;
}
.lock__hint{
  position:absolute; left:58px; right:12px; text-align:center;
  font-size:17px; font-weight:500; color:rgba(255,255,255,.45);
  background: linear-gradient(100deg,
      rgba(255,255,255,.35) 35%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.35) 65%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation: shimmer 2.6s linear infinite;
}
@keyframes shimmer{ 0%{ background-position:160% 0; } 100%{ background-position:-160% 0; } }

.lock__knob{
  position:absolute; left:2px; top:2px; width:62px; height:38px; border-radius:6px;
  background: linear-gradient(180deg, #fdfdfd 0%, #d8d8dc 48%, #b9b9bf 52%, #e6e6ea 100%);
  border:1px solid rgba(0,0,0,.45);
  box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
}
.lock__knob::after{
  content:""; width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:10px solid #7b7b85;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
}
.lock__knob.is-dragging{ transition:none; }
.lock__knob.is-returning{ transition: left .25s cubic-bezier(.2,.8,.3,1); }

/* ---------- plocha ---------- */
.view--home{ display:flex; flex-direction:column; padding-top:20px; }
.home__pages{ flex:1; display:flex; overflow:hidden; }
.home-page{
  flex:0 0 100%; padding:14px 8px 0;
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:88px;
  align-content:start;
  transition: transform .3s cubic-bezier(.3,.7,.3,1);
}
.home__dots{ height:18px; display:flex; align-items:center; justify-content:center; gap:7px; }
.home__dots i{
  width:6px; height:6px; border-radius:50%; display:block;
  background:rgba(255,255,255,.30); box-shadow:0 1px 0 rgba(0,0,0,.5);
}
.home__dots i.active{ background:#fff; }

.dock{
  height:88px; padding:10px 6px 0;
  display:flex; justify-content:space-around; align-items:flex-start;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 50%,
                    rgba(255,255,255,.06) 51%, rgba(255,255,255,.16) 100%),
    rgba(120,120,130,.45);
  border-top:1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dock .app__label{ display:none; }

/* ---------- ikona aplikace ---------- */
.app{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
}
.app__icon{
  position:relative; width:57px; height:57px; border-radius:11px; overflow:hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .1s ease, opacity .1s ease;
}
.app__icon::after{  /* skleněný lesk přes horní polovinu */
  content:""; position:absolute; left:-10%; right:-10%; top:-58%; height:104%;
  border-radius:50%; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.18) 70%,
              rgba(255,255,255,0) 100%);
}
.app__icon svg{ width:100%; height:100%; display:block; }
.app:active .app__icon{ transform:scale(.93); opacity:.8; }
.app__label{
  font-size:11px; font-weight:500; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- spuštěná aplikace ---------- */
.view--app{ background:#c5ccd3; }
.app-host{ position:absolute; top:20px; left:0; right:0; bottom:0; overflow:hidden; }

/* ---------- chybové hlášení (skeuomorfní alert) ---------- */
.alert-layer{
  position:absolute; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.alert-layer.is-active{ opacity:1; visibility:visible; }
.alert{
  width:270px; border-radius:11px; overflow:hidden; text-align:center; color:#fff;
  background: linear-gradient(180deg, rgba(58,64,74,.97) 0%, rgba(26,30,36,.97) 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
  transform:scale(1.12); opacity:0; transition:transform .2s ease, opacity .2s ease;
}
.alert-layer.is-active .alert{ transform:scale(1); opacity:1; }
.alert__title{ padding:14px 14px 0; font-size:16px; font-weight:700; text-shadow:0 -1px 0 rgba(0,0,0,.8); }
.alert__text{
  padding:4px 14px 14px; font-size:13px; line-height:1.3; white-space:pre-line;
  text-shadow:0 -1px 0 rgba(0,0,0,.8);
}
.alert__btn{
  width:100%; padding:10px 0; font-size:16px; font-weight:600; font-family:inherit;
  color:#fff; cursor:pointer; text-shadow:0 -1px 0 rgba(0,0,0,.7);
  border:0; border-top:1px solid rgba(255,255,255,.3);
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 50%,
              rgba(255,255,255,.02) 51%, rgba(255,255,255,.14) 100%);
}
.alert__btn:active{ background:rgba(255,255,255,.3); }

/* ============================================================
   VIKTIM – doplňky plochy, notifikací a hovoru
   ============================================================ */

/* telefon se drží mimo výřezy displeje skutečného mobilu */
/* Telefon se vejde do viditelné plochy i s lištami Safari:
   výška z dynamického viewportu (100dvh, ne 100vh) a odsazení
   o bezpečné okraje. Měřítko dopočítá fit() v app.js. */
.stage{
  top:0; left:0; right:0; bottom:auto;
  height:100vh; height:100dvh; box-sizing:border-box;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* dvojí ťuknutí nesmí stránku přibližovat */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body, button, a, [role="button"], .lock__slider, .kb-key, .callov__btn{ touch-action:manipulation; }
body.is-ended .stage{ display:none; }

/* ---------- plocha: hodiny s datem ---------- */
.home-page--clock{ display:flex; justify-content:center; align-items:flex-start; padding-top:26px; }
.home__clock{
  text-align:center; color:#fff; cursor:default; padding:6px 18px 10px; border-radius:14px;
  touch-action:none; -webkit-touch-callout:none; transition: background .3s ease, transform .3s ease;
}
.home__clock.is-holding{ background:rgba(255,255,255,.08); transform:scale(.97); transition-duration:1.4s; }
.home__time{
  font-size:60px; line-height:1; font-weight:400; letter-spacing:-1px;
  text-shadow:0 2px 8px rgba(0,0,0,.75), 0 0 1px rgba(0,0,0,.9);
}
.home__date{ margin-top:6px; font-size:15px; font-weight:500; text-shadow:0 1px 3px rgba(0,0,0,.9); }

/* dock s popisky (jako na iOS 4) a odznak nepřečtených zpráv */
.dock{ justify-content:center; gap:40px; }
.dock .app__label{ display:block; }
.app{ position:relative; }
.app__badge{
  position:absolute; top:-7px; left:calc(50% + 17px);
  min-width:24px; height:24px; padding:0 6px; border-radius:12px;
  border:2px solid #fff; color:#fff; font-size:13px; font-weight:700; line-height:20px;
  text-align:center; text-shadow:0 -1px 0 rgba(0,0,0,.35);
  background: linear-gradient(180deg, #f6857c 0%, #e0291f 50%, #c91a12 51%, #d92a20 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.65);
}

/* ---------- notifikace nahoře ---------- */
.banner{
  position:absolute; left:0; right:0; top:0; min-height:40px; padding-block:5px; z-index:90;
  display:flex; align-items:center; gap:8px; padding:0 9px; cursor:pointer; color:#fff;
  background: linear-gradient(180deg, rgba(52,52,58,.98) 0%, rgba(14,14,16,.98) 100%);
  border-bottom:1px solid #000; box-shadow:0 2px 10px rgba(0,0,0,.55);
  transform:translateY(-110%); transition:transform .32s cubic-bezier(.2,.8,.3,1);
}
.banner.is-active{ transform:translateY(0); }
.banner__icon{ flex:0 0 auto; width:24px; height:24px; border-radius:6px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.6); }
.banner__icon svg{ width:100%; height:100%; display:block; }
.banner__text{ flex:1; min-width:0; font-size:12.5px; line-height:1.25; text-shadow:0 -1px 0 rgba(0,0,0,.6);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.banner__text b{ font-weight:700; margin-right:3px; }

/* ---------- hlášení se dvěma tlačítky ---------- */
.alert__btns{ display:flex; }
.alert__btns .alert__btn{ flex:1; }
.alert__btns .alert__btn + .alert__btn{ border-left:1px solid rgba(255,255,255,.3); }

/* ---------- hovor přes celý displej ---------- */
.callov{
  position:absolute; left:0; right:0; bottom:0; top:20px; z-index:95;
  display:none; flex-direction:column; color:#fff;
  background:
    radial-gradient(120% 70% at 50% 40%, rgba(70,90,120,.35) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #262b33 0%, #0b0d11 100%);
}
.callov.is-active{ display:flex; }
.callov__top{
  flex:0 0 auto; padding:12px 10px 11px; text-align:center;
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 100%);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(0,0,0,.6);
}
.callov__name{ font-size:24px; font-weight:400; line-height:1.15; text-shadow:0 -1px 1px rgba(0,0,0,.8); }
.callov__sub{ margin-top:3px; font-size:14px; color:rgba(255,255,255,.72);
  font-variant-numeric: tabular-nums; }
.callov__mid{
  flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:12px;
}
.callov.has-subs .callov__mid{ justify-content:flex-start; }
.callov__ring{ position:relative; flex:0 0 auto; }
.callov__ring::before, .callov__ring::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(120,200,120,.55); animation: callPulse 1.6s ease-out infinite;
}
.callov__ring::after{ animation-delay:.8s; }
.callov__ring--still::before, .callov__ring--still::after{ display:none; }
@keyframes callPulse{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.45); opacity:0; } }
.callov__avatar{
  width:104px; height:104px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:38px; font-weight:600; color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 10px rgba(0,0,0,.6);
}
.callov.has-subs .callov__avatar{ width:64px; height:64px; font-size:24px; }
.callov__subs{
  width:100%; min-height:0; overflow:auto; padding:10px 12px; border-radius:10px;
  background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.1);
  font-size:14px; line-height:1.42; color:#f2f4f7;
}
.callov__who{ font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color:#9cc4ff; margin-bottom:3px; }
.callov__stage{ font-style:italic; color:rgba(255,255,255,.62); }
.callov__bottom{
  flex:0 0 auto; padding:14px 16px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.78) 100%);
  border-top:1px solid rgba(255,255,255,.14);
}
.callov__btn{
  width:100%; height:48px; border-radius:9px; cursor:pointer; color:#fff;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:18px; font-weight:700; text-shadow:0 -1px 0 rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 rgba(255,255,255,.12);
}
.callov__btn svg{ width:20px; height:20px; fill:#fff; }
.callov__btn--accept{ border:1px solid #1d6d1f;
  background: linear-gradient(180deg,#8fe08d 0%, #3fbb3f 48%, #2fa233 52%, #63cc63 100%); }
.callov__btn--end{ border:1px solid #6e1512;
  background: linear-gradient(180deg,#e06b62 0%, #c0261c 48%, #a81b13 52%, #cf4237 100%); }
.callov__btn--end svg{ transform:rotate(135deg); }
.callov__btn:active{ filter:brightness(.85); }
.callov__note{ text-align:center; font-size:13px; color:rgba(255,255,255,.55); padding:15px 0; }

@media (prefers-reduced-motion: reduce){
  .callov__ring::before, .callov__ring::after{ animation:none; display:none; }
  .lock__hint{ animation:none; }
}

/* přeskakování při přehrání z historie */
.callov__skip{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.callov__skipbtn{
  flex:1; height:38px; min-width:0; border-radius:8px; cursor:pointer; color:#fff;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:inherit; font-size:13.5px; font-weight:700; text-shadow:0 -1px 0 rgba(0,0,0,.6);
  border:1px solid rgba(0,0,0,.85);
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 49%,
                    rgba(255,255,255,.03) 51%, rgba(255,255,255,.14) 100%),
    #30343c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(255,255,255,.08);
}
.callov__skipbtn svg{ width:14px; height:11px; fill:#fff; flex:0 0 auto; }
.callov__skipbtn:active{ filter:brightness(1.35); }
.callov__skipbtn[disabled]{ opacity:.4; cursor:default; filter:none; }
.callov__skipbtn:focus-visible{ outline:2px solid #9cc4ff; outline-offset:1px; }
.callov__pos{
  flex:0 0 auto; min-width:56px; text-align:center; font-size:12px; color:rgba(255,255,255,.72);
  font-variant-numeric: tabular-nums;
}