/* Top-bar dialer: phone button, dial panel, live-call pill, incoming-call and save-number cards. Tokens only, so Night and Day both work. */
.dial-btn{position:relative;flex:none;width:34px;height:34px;border-radius:11px;color:var(--accent);background:rgba(212,180,131,.06);border:1px solid var(--line2)}
.dial-btn:hover,.dial-btn[aria-expanded="true"]{background:var(--accent-soft);color:var(--text1);border-color:var(--line3)}
.dial-btn svg{width:17px;height:17px}
.dial-btn .dh-kbd{position:absolute;right:-5px;bottom:-5px;font:600 9px var(--mono);line-height:1;padding:2px 4px;border-radius:5px;background:var(--bg4);color:var(--text2);border:1px solid var(--line2)}
body.signin .dial-btn,body.signin .livepill{display:none!important}

.dh-pop{position:fixed;z-index:70;top:62px;right:16px;width:348px;max-height:calc(100dvh - 76px);overflow:auto;padding:16px;border:1px solid var(--line3);border-radius:16px;
  background:linear-gradient(180deg,rgba(22,22,25,.97),rgba(16,16,19,.97));box-shadow:var(--sh2),var(--glow);color:var(--text1);opacity:0;transform:translateY(-6px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.dh-pop.on{opacity:1;transform:none}
.dh-pop[hidden],.dh-pop [hidden]{display:none!important}
.dh-sys{font:500 10px var(--mono);letter-spacing:.16em;color:var(--accent);margin-bottom:10px}
.dh-l{display:block;font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.dh-inwrap{display:flex;gap:6px;align-items:center}
.dh-pop input,.dh-pop select{width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--bg3);color:var(--text1);font:500 16px var(--sans);outline:0}
.dh-pop input:focus,.dh-pop select:focus{border-color:var(--accent);box-shadow:var(--accent-glow)}
.dh-pop select{font-size:14px;height:40px;margin-bottom:10px}
.dh-bs{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line2);color:var(--text2)}
.dh-bs:hover{color:var(--text1);border-color:var(--line3)} .dh-bs svg{width:18px;height:18px}
.dh-res{margin-top:8px;border:1px solid var(--line1);border-radius:12px;background:var(--bg3);max-height:210px;overflow:auto}
.dh-opt{display:flex;flex-direction:column;gap:1px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line1)}
.dh-opt:last-child{border-bottom:0} .dh-opt:hover,.dh-opt.hl{background:var(--accent-soft)}
.dh-on{font:600 14px var(--sans)} .dh-os{font:400 12px var(--sans);color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-num{margin-top:12px;padding:12px;border:1px solid var(--line2);border-radius:12px;background:rgba(212,180,131,.05)}
.dh-who{display:flex;flex-direction:column;margin-bottom:10px} .dh-who b{font:600 16px var(--serif)} .dh-who span{font:400 12px var(--sans);color:var(--text2)}
.dh-gate{display:flex;gap:8px;align-items:flex-start;font:500 12.5px var(--sans);padding:8px 10px;border-radius:10px;border:1px solid var(--line1);margin-bottom:10px;color:var(--text2)}
.dh-gate svg{width:15px;height:15px;flex:none;margin-top:1px}
.dh-gate.ok{color:var(--ok);border-color:rgba(143,201,154,.4);background:var(--ok-soft)}
.dh-gate.block{color:var(--hot);border-color:rgba(224,112,95,.45);background:var(--hot-soft)}
.dh-go,.dh-yes{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;border:0;background:linear-gradient(180deg,#E2C49A,var(--accent));color:var(--accent-ink);font:700 14px var(--sans);box-shadow:0 0 18px rgba(212,180,131,.4)}
.dh-go{width:100%} .dh-go svg{width:18px;height:18px}
.dh-go[disabled]{opacity:.45;box-shadow:none;cursor:not-allowed}
.dh-no{height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);color:var(--text1);font:600 13px var(--sans);background:var(--bg3)}
.dh-no:hover{border-color:var(--hot);color:var(--hot)}
.dh-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.dh-key{height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--bg3);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;transition:border-color var(--t1),transform var(--t1)}
.dh-key b{font:600 18px var(--mono)} .dh-key i{font:500 8px var(--mono);letter-spacing:.14em;color:var(--text3);font-style:normal;min-height:9px;margin-top:2px}
.dh-key:hover{border-color:var(--accent);background:var(--accent-soft)} .dh-key:active{transform:scale(.96)}
.dh-rec{margin-top:14px;border-top:1px solid var(--line1);padding-top:10px}
.dh-rec h3{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.dh-r{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px;border-radius:10px;text-align:left}
.dh-r:hover{background:var(--accent-soft)} .dh-rn{font:600 13.5px var(--sans);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-rs{font:400 11.5px var(--mono);color:var(--text2);white-space:nowrap} .dh-ri{color:var(--accent);display:grid} .dh-ri svg{width:16px;height:16px}

/* live-call pill */
.livepill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 12px;border-radius:999px;border:1px solid var(--line3);background:rgba(212,180,131,.08);color:var(--text1);min-width:0;flex:none}
body.has-livecall .top .find{flex:0 1 260px;min-width:36px}
body.has-livecall .top .find kbd{display:none}
.livepill[hidden]{display:none}
.livepill.live{border-color:rgba(143,201,154,.55);background:var(--ok-soft);box-shadow:0 0 14px rgba(143,201,154,.25)}
.livepill.ended{border-color:rgba(230,180,90,.6);background:var(--amber-soft)}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.livepill.live .lp-dot{background:var(--ok);box-shadow:0 0 8px rgba(143,201,154,.9);animation:dhblink 1.6s ease-in-out infinite}
.livepill.call:not(.live) .lp-dot{animation:dhblink 1s ease-in-out infinite}
@keyframes dhblink{50%{opacity:.35}}
.lp-txt{display:flex;flex-direction:column;min-width:0;max-width:240px;line-height:1.15}
.lp-name{font:600 13px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-sub{font:400 10.5px var(--sans);color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-time{font:600 13px var(--mono);font-variant-numeric:tabular-nums;color:var(--text1);flex:none}
.lp-b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);color:var(--text1);flex:none;background:var(--bg3)}
.lp-b svg{width:15px;height:15px} .lp-b:hover{border-color:var(--accent)} .lp-b[aria-pressed="true"]{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.lp-b.hang{background:var(--hot);border-color:var(--hot);color:#fff} .lp-b.hang:hover{filter:brightness(1.1)}
.lp-open{height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 12px var(--sans);flex:none}
.lp-open:hover{filter:brightness(1.08)}

/* incoming call and save offer */
#dhtray{position:fixed;z-index:75;top:64px;right:16px;width:340px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.dh-card{pointer-events:auto;padding:14px;border-radius:16px;border:1px solid var(--line3);background:linear-gradient(180deg,rgba(26,26,30,.98),rgba(18,18,21,.98));box-shadow:var(--sh2),var(--glow);color:var(--text1)}
.dh-card.ring{border-color:rgba(143,201,154,.6)}
.dh-ct{display:flex;gap:12px;align-items:flex-start;justify-content:space-between} .dh-ct>div:not(.dh-sysl){display:flex;flex-direction:column;min-width:0}
.dh-ct b{font:600 16px var(--serif)} .dh-ct span{font:400 12.5px var(--sans);color:var(--text2)}
.dh-sysl{font:500 10px var(--mono);letter-spacing:.16em;color:var(--accent);margin-bottom:2px}
.dh-pulse{width:12px;height:12px;border-radius:50%;background:var(--ok);margin-top:14px;flex:none;box-shadow:0 0 0 0 rgba(143,201,154,.6);animation:dhring 1.3s ease-out infinite}
@keyframes dhring{to{box-shadow:0 0 0 14px rgba(var(--kf-ok,143,201,154),0)}}
.dh-ca,.dh-of{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .dh-ca>button{flex:1}
.dh-of input{flex:1 1 100%;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--bg3);color:var(--text1);font:500 14px var(--sans);outline:0}
.dh-of input:focus{border-color:var(--accent);box-shadow:var(--accent-glow)} .dh-of input[aria-invalid="true"]{border-color:var(--hot)}
.dh-of>button{flex:1;height:40px}
.dh-x{width:32px;height:32px;display:grid;place-items:center;color:var(--text2);border-radius:8px;flex:none} .dh-x:hover{background:var(--accent-soft);color:var(--text1)} .dh-x svg{width:14px;height:14px}

/* Day theme: surfaces swap to light tokens, so only the translucent dark gradients need help */
html[data-theme-active="day"] .dh-pop,html[data-theme-active="day"] .dh-card{background:linear-gradient(180deg,rgba(250,246,238,.99),rgba(240,233,220,.99));box-shadow:0 18px 40px -16px rgba(80,60,30,.35)}
html[data-theme-active="day"] .dial-btn{background:rgba(150,112,54,.06)}
html[data-theme-active="day"] .livepill{background:rgba(150,112,54,.08)}
html[data-theme-active="day"] .livepill.live{background:rgba(52,138,70,.12)}
html[data-theme-active="day"] .lp-b{background:rgba(255,255,255,.6)}
html[data-theme-active="day"] .dh-key,html[data-theme-active="day"] .dh-pop input,html[data-theme-active="day"] .dh-pop select,html[data-theme-active="day"] .dh-res,html[data-theme-active="day"] .dh-no,html[data-theme-active="day"] .dh-of input{background:rgba(255,255,255,.7)}

@media (max-width:1500px){body.has-livecall .pill.tx,body.has-livecall .pill.fake{display:none}}
@media (max-width:760px){
  .dh-kbd{display:none}
  .dh-pop{left:8px;right:8px;width:auto;top:58px}
  #dhtray{left:8px;right:8px;width:auto;top:58px}
  /* the pill drops to its own strip under the top bar so the search and dial buttons keep their room */
  body.has-livecall .top .find{flex:0 0 36px}
  .livepill{position:fixed;z-index:19;top:56px;left:8px;right:8px;max-width:none;height:40px;flex:none;background:var(--bg2);backdrop-filter:blur(14px)}
  .livepill .lp-txt{flex:1}
  body.has-livecall .page{padding-top:50px}
}
@media (prefers-reduced-motion:reduce){
  .dh-pop{transition:none;transform:none} .lp-dot,.dh-pulse{animation:none!important}
}
.dh-view{display:block;margin-top:10px;text-align:center;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;cursor:pointer}
.dh-view:hover{text-decoration:underline}
.dh-who .dh-view{display:inline-block;margin-top:6px;text-align:left}