/* Vaizdo skambučiai (prototipas) — Antalgijos dizaino sistemos žetonai (portal style.css), be išorinių šriftų. */
:root {
  --bg:#f5f3ef; --surface:#ffffff; --fg:#1f2a24; --fg-strong:#0e1612; --fg-muted:#5a655f;
  --brand:#249a48; --brand-hover:#1c7a39; --brand-soft:#e9f5ec; --accent-soft:#f8f1e7;
  --border:#dfe6e1; --danger:#b23a3a; --warning:#9a6700;
  --call-bg:#0b120e; --ctl:rgba(255,255,255,.16); --ctl-fg:#ffffff;
  --font:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e1612; --surface:#16211b; --fg:#ecece8; --fg-strong:#ffffff; --fg-muted:#a9b1ac;
    --brand:#3daa5c; --brand-hover:#5eb97a; --brand-soft:#15301f; --accent-soft:#2a2218; --border:#2a3730;
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.5 var(--font); min-height:100dvh; }
[hidden] { display:none !important; }
h1 { font-size:28px; line-height:1.2; margin:8px 0 10px; color:var(--fg-strong); text-wrap:balance; }
h2 { font-size:18px; margin:18px 0 8px; }
.brand { font-weight:700; letter-spacing:.08em; color:var(--brand); font-size:14px; }
.lead { font-size:19px; margin:0 0 22px; }
.hint { margin:18px 0 0; }
.muted { color:var(--fg-muted); }
.small { font-size:14px; }
.screen.center { max-width:560px; margin:0 auto; padding:max(32px, env(safe-area-inset-top)) 16px 24px; text-align:center; }
button { font:inherit; cursor:pointer; }
.big { display:block; width:100%; max-width:340px; margin:0 auto; padding:20px 28px; font-size:23px; font-weight:700;
       border:0; border-radius:16px; background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(36,154,72,.28); }
.big:hover { background:var(--brand-hover); }
.big:disabled { opacity:.6; cursor:wait; }
.secondary { padding:12px 18px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--fg); }
.link { border:0; background:none; color:var(--brand); padding:6px; }
.notice { margin:22px 0 0; padding:16px; border-radius:12px; background:var(--accent-soft); text-align:left; }
.proto { max-width:560px; margin:0 auto; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); font-size:13px; color:var(--fg-muted); text-align:center; }
body:has(#call:not([hidden])) .proto { display:none; }

/* leidimų pagalba */
.help { text-align:left; margin:8px 0 22px; }
.steps { padding-left:22px; margin:0; }
.steps li { margin:0 0 14px; }
.pic { display:block; width:100%; max-width:300px; height:auto; margin:4px 0 6px; }
.pic .bar { fill:#ecece8; } .pic .card { fill:#ffffff; stroke:#bfd0c5; }
.pic .hl { fill:none; stroke:#ca9b5e; stroke-width:3; } .pic .hl-box { fill:#f8f1e7; stroke:#ca9b5e; stroke-width:2; }
.pic .ico-t { font:700 15px var(--font); fill:#1f2a24; text-anchor:middle; } .pic .url { font:14px var(--font); fill:#5a655f; }
.pic .ico { fill:none; stroke:#1f2a24; stroke-width:2; stroke-linecap:round; }
.pic .menu { font:14px var(--font); fill:#1f2a24; } .pic .menu.b { font-weight:700; } .pic .menu.ok { fill:#1c7a39; font-weight:700; }
.pic .on { fill:#249a48; } .pic .knob { fill:#fff; }

/* skambutis */
.screen.call { position:fixed; inset:0; background:var(--call-bg); color:#fff; overflow:hidden; }
#remote { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--call-bg); }
.remote-off { position:absolute; inset:0; z-index:1; background:var(--call-bg); display:flex; align-items:center; justify-content:center; color:#d6ddd8; font-size:18px; padding:24px; text-align:center; }
#local { position:absolute; top:calc(12px + env(safe-area-inset-top)); right:12px; width:min(30vw, 200px); max-height:34vh;
         border-radius:12px; border:2px solid rgba(255,255,255,.7); background:#1f2a24; object-fit:cover; z-index:2; }
#local.mirror { transform:scaleX(-1); }
#local.off { visibility:hidden; }
.status { position:absolute; left:50%; transform:translateX(-50%); top:calc(14px + env(safe-area-inset-top)); max-width:calc(100% - 32px - min(30vw, 200px));
          padding:10px 16px; border-radius:999px; background:rgba(0,0,0,.6); font-size:16px; text-align:center; z-index:2; }
.status:empty { display:none; }
.status.warn { background:rgba(154,103,0,.9); }
.screen.call:not(.connected) .status:not(.warn) { display:none; }
.screen.call:not(.connected) .status.warn { top:auto; bottom:calc(120px + env(safe-area-inset-bottom)); max-width:calc(100% - 32px); z-index:4; }
.quality { position:absolute; left:12px; top:calc(54px + env(safe-area-inset-top)); display:flex; gap:8px; align-items:center;
           padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.5); font-size:13px; z-index:2; }
.bars { display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.bars i { display:block; width:4px; background:rgba(255,255,255,.3); border-radius:1px; }
.bars i:nth-child(1) { height:5px; } .bars i:nth-child(2) { height:9px; } .bars i:nth-child(3) { height:14px; }
.quality.q3 i { background:#5eb97a; } .quality.q2 i:nth-child(-n+2) { background:#e0b35a; } .quality.q1 i:nth-child(1) { background:#e06b6b; }
.remote-mic { position:absolute; left:12px; top:calc(92px + env(safe-area-inset-top)); padding:4px 10px; border-radius:999px; background:rgba(178,58,58,.85); font-size:13px; z-index:2; }
.tap-audio { position:absolute; left:50%; top:55%; transform:translateX(-50%); padding:14px 22px; border-radius:12px; border:0; background:#fff; color:#0e1612; font-weight:700; z-index:3; }

.controls { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
            padding:12px 8px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(0,0,0,.65)); z-index:3; }
.ctl { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; width:72px; padding:0; border:0; background:none; color:var(--ctl-fg); font-size:12px; }
.ctl svg { width:60px; height:60px; padding:16px; border-radius:50%; background:var(--ctl); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ctl .slash { display:none; }
.ctl.off svg { background:#ffffff; color:var(--danger); }
.ctl.off .slash { display:inline; }
.ctl.off span { color:#ffd9d9; }
.ctl.leave svg { background:#c73c3c; }
.ctl:focus-visible svg { outline:3px solid #5eb97a; outline-offset:2px; }
.badge { position:absolute; top:-2px; right:6px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:#c73c3c; color:#fff; font-size:13px; line-height:22px; }
@media (max-width:380px) { .ctl { width:60px; } .ctl svg { width:52px; height:52px; padding:13px; } }

.chat { position:absolute; top:0; right:0; bottom:0; width:min(400px, 100%); display:flex; flex-direction:column; gap:8px;
        padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); background:var(--surface); color:var(--fg); z-index:5;
        box-shadow:-8px 0 24px rgba(0,0,0,.3); }
.chat header { display:flex; justify-content:space-between; align-items:center; font-size:18px; }
.msgs { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.msg { max-width:85%; padding:8px 12px; border-radius:14px; background:var(--bg); overflow-wrap:anywhere; white-space:pre-wrap; font-size:16px; }
.msg.me { align-self:flex-end; background:var(--brand-soft); }
.msg.sys { align-self:center; background:none; color:var(--fg-muted); font-size:14px; text-align:center; }
.msg time { display:block; font-size:11px; color:var(--fg-muted); margin-top:2px; }
.msg img { display:block; max-width:100%; max-height:240px; border-radius:8px; margin:4px 0; }
.msg a { color:var(--brand); font-weight:600; }
.msg progress { width:100%; }
.chat-note { margin:0; }
.chat-form { display:flex; gap:8px; }
.chat-form input { flex:1; min-width:0; font:inherit; font-size:17px; padding:12px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--fg); }
.chat-form button { padding:12px 16px; border-radius:10px; border:0; background:var(--brand); color:#fff; font-weight:700; }
.chat-form button:disabled, .file-btn.disabled { opacity:.5; }
.file-btn { display:block; text-align:center; padding:12px; border-radius:10px; border:1px dashed var(--brand); color:var(--brand); font-weight:600; cursor:pointer; }
.file-btn input { position:absolute; width:1px; height:1px; opacity:0; }

/* ---------- prekės ženklas, pradžios laikas, laukimo kambarys (2 iteracija, 2026-11-12) */
.hero { display:block; margin:0 auto 18px; max-width:420px; }
.hero img { display:block; width:100%; height:clamp(170px, 30vh, 280px); object-fit:cover; object-position:50% 30%; border-radius:18px;
            box-shadow:0 10px 30px rgba(14,67,34,.16); }
.brandline { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--brand); font-weight:600; font-size:15px; letter-spacing:.02em; }
.brandline .logo { height:26px; width:auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brandline .logo { filter:brightness(0) invert(1); } }
.sched { margin:6px auto 20px; padding:14px 16px; max-width:420px; border-radius:14px; background:var(--brand-soft); text-align:center; }
.sched p { margin:0; }
.sched .countdown { margin-top:4px; color:var(--fg-muted); font-size:16px; }
.sched .countdown.late { color:var(--fg); font-weight:600; }   /* calm, not alarming */
.urgent { margin:22px auto 0; max-width:460px; font-size:13px; line-height:1.45; color:var(--fg-muted); }
.tiny { font-size:12px; margin:6px 0 0; }

.wait { position:absolute; z-index:1; left:50%; transform:translateX(-50%); top:calc(12px + env(safe-area-inset-top));
        bottom:calc(112px + env(safe-area-inset-bottom)); width:min(520px, calc(100% - 24px)); overflow-y:auto;
        padding:18px 16px; border-radius:18px; background:var(--surface); color:var(--fg); text-align:center;
        box-shadow:0 12px 40px rgba(0,0,0,.35); -webkit-overflow-scrolling:touch; }
.screen.call.connected .wait, .screen.call.connected .promo { display:none; }
.screen.call:not(.connected) #local { display:none; }
.wait h2 { font-size:21px; margin:12px 0 10px; color:var(--fg-strong); }
.wait .sched { margin:0 auto 10px; }
.wait-note { margin:0 auto 12px; max-width:440px; font-size:15px; color:var(--fg-muted); }
.self { display:block; width:100%; max-width:360px; max-height:22vh; margin:0 auto; border-radius:14px; background:#1f2a24; object-fit:cover; }
.self.mirror { transform:scaleX(-1); }
.self.off { display:none; }
.promo { margin:14px auto 0; max-width:440px; text-align:left; }
.promo-card { display:flex; gap:12px; align-items:center; padding:10px; border-radius:14px; border:1px solid var(--border);
              color:var(--fg); text-decoration:none; background:var(--bg); transition:opacity .5s; }
.promo-card.fade { opacity:0; }
.promo-card img { flex:none; width:72px; height:72px; border-radius:10px; object-fit:cover; }
.promo-card b { display:block; font-size:15px; }
.promo-card span span { display:block; font-size:13px; line-height:1.35; color:var(--fg-muted); margin:2px 0; }
.promo-card em { font-style:normal; font-size:13px; font-weight:600; color:var(--brand); }
.promo-row { display:flex; align-items:center; gap:6px; }
.promo-row .promo-card { flex:1; min-width:0; }
.promo-nav { flex:none; width:32px; height:44px; padding:0; border:1px solid var(--border); border-radius:10px; background:var(--bg);
             color:var(--fg); font-size:22px; line-height:1; cursor:pointer; }
.promo-nav[hidden] { display:none; }
.dots { display:flex; gap:4px; justify-content:center; margin-top:6px; }
.dots button { width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dots button::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--border); }
.dots button.on::after { background:var(--brand); }
.promo-sheet { margin-top:10px; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--bg); }
.promo-sheet[hidden] { display:none; }
.promo-sheet p { margin:0 0 8px; }
.sheet-url { word-break:break-all; font-size:13px; color:var(--brand); }
.sheet-actions { display:flex; gap:12px; align-items:center; }
@media (prefers-reduced-motion: reduce) { .promo-card { transition:none; } }
@media (max-height:640px) { .self { max-height:20vh; } .wait h2 { font-size:18px; margin:8px 0; } }

/* ---------- saugaus pokalbio ženklas: žalias tik kai ICE connected IR DTLS transport connected */
.secure { position:absolute; z-index:3; left:12px; top:calc(12px + env(safe-area-inset-top)); display:flex; align-items:center; gap:6px;
          padding:6px 12px 6px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.55);
          color:#d6ddd8; font:600 13px/1 var(--font); }
.secure svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.secure .tick { display:none; }
.secure.on { background:#1c7a39; border-color:#249a48; color:#fff; }   /* #1c7a39: white text 5.3:1 (brand #249a48 is 3.4:1) */
.secure.on .tick { display:inline; }
.screen.call:not(.connected) .secure { display:none; }
.secure-info { position:absolute; z-index:6; left:12px; top:calc(50px + env(safe-area-inset-top)); width:min(340px, calc(100% - 24px));
               padding:12px 14px; border-radius:12px; background:var(--surface); color:var(--fg); font-size:14px; line-height:1.45;
               box-shadow:0 8px 24px rgba(0,0,0,.35); }
.safe { display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0 0; color:#1c7a39; font-size:13px; font-weight:600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .safe { color:#5eb97a; } }
.safe svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }