/* Demo page: three animated "windows". Each plays when scrolled into view and can be replayed.
   With reduced motion, every window shows its finished state and nothing moves. */

.demo-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.demo-copy { display: grid; gap: 14px; }
.demo-copy h2 { font-size: var(--step-2); }
.demo-copy > p { color: var(--muted); }
.demo-points { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.demo-points li { padding-left: 18px; position: relative; font-size: 0.95rem; }
.demo-points li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 2px; background: var(--sun); }
.demo-note { font-size: 0.86rem; color: var(--muted); border-left: 2px solid var(--line); padding-left: 12px; margin-top: 4px; }
@media (max-width: 960px) { .demo-grid { grid-template-columns: 1fr; } }

.demo-wide { display: grid; grid-template-columns: 120px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.demo-wide .demo-media { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); display: grid; place-items: center; background: var(--panel); }
.demo-wide .demo-media svg { width: 44px; height: 44px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.demo-wide .demo-body { padding: 26px 28px; display: grid; gap: 8px; align-content: start; }
.demo-wide h2 { font-size: var(--step-1); }
.demo-wide .demo-body p { color: var(--muted); }
.demo-wide .status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-top: 6px; }
.demo-wide .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
@media (max-width: 560px) { .demo-wide { grid-template-columns: 1fr; } .demo-wide .demo-media { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; } }

/* Window chrome */
.dw { --dw-bg: #16191c; --dw-panel: #1e2327; --dw-line: #2b3238; --dw-ink: #e8ecef; --dw-muted: #8d99a3; --dw-ok: #33b101; --dw-blue: #4aa3ff; --dw-teal: #3fd0b0; --dw-red: #fd3b3b; --dw-sun: #fda900;
  background: var(--dw-bg); color: var(--dw-ink); border-radius: 10px; border: 1px solid var(--dw-line); overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); min-width: 0; font-size: 0.9rem; }
.dw-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--dw-panel); border-bottom: 1px solid var(--dw-line); }
.dw-dots { display: inline-flex; gap: 6px; }
.dw-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a444b; }
.dw-title { font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.05em; color: var(--dw-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-replay { font: inherit; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dw-ink); background: transparent; border: 1px solid var(--dw-line); border-radius: 4px; padding: 5px 10px; cursor: pointer; min-height: 0; }
.dw-replay:hover { border-color: var(--dw-sun); color: var(--dw-sun); }
.dw-body { position: relative; min-height: 400px; }
.dw .eyebrow { color: var(--dw-sun); }
.dw .k { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dw-muted); }
.dw .v { font-weight: 500; }

/* ---------- PBX ---------- */
.pbx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--dw-line); background: #121517; }
.pbx-tabs button { font: inherit; color: var(--dw-muted); background: transparent; border: 0; border-right: 1px solid var(--dw-line); border-bottom: 2px solid transparent; padding: 11px 14px 9px; text-align: left; cursor: pointer; display: grid; gap: 3px; min-width: 0; min-height: 0; border-radius: 0; transition: color .15s, background .15s; }
.pbx-tabs button:last-child { border-right: 0; }
.pbx-tabs b { font-weight: 600; font-size: 0.86rem; color: var(--dw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbx-tabs span { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbx-tabs em { font-style: normal; }
.pbx-tabs button:hover { background: var(--dw-panel); }
.pbx-tabs button[aria-selected="true"] { background: var(--dw-bg); border-bottom-color: var(--dw-sun); color: var(--dw-sun); }
.pbx-tabs button:focus-visible { outline: 2px solid var(--dw-sun); outline-offset: -3px; }

/* Stage: the caller's phone, the firm's phone system, and the AI agent that answers */
.stage { position: relative; display: grid; grid-template-columns: auto minmax(110px, 1fr) minmax(0, 196px); align-items: start; gap: 0 6px; padding: 22px 20px 16px; background: radial-gradient(120% 90% at 50% 0%, #1c2227 0%, #131619 65%); border-bottom: 1px solid var(--dw-line); overflow: hidden; }
.st-side { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.st-label { margin: 0; display: grid; gap: 1px; text-align: center; font-size: 0.74rem; color: var(--dw-ink); line-height: 1.35; }
.st-label b { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--dw-muted); }

.handset { width: 168px; aspect-ratio: 9 / 18.6; border-radius: 28px; padding: 5px; background: linear-gradient(145deg, #444d55, #1c2126 40%, #2f363c); box-shadow: 0 26px 40px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.07); position: relative; }
.hs-screen { position: relative; height: 100%; border-radius: 23px; overflow: hidden; background: linear-gradient(180deg, #2b3c4d 0%, #18222c 46%, #0e1318 100%); display: grid; grid-template-rows: auto auto 1fr auto auto; justify-items: center; padding: 7px 12px 14px; color: #fff; transition: filter .6s; }
.hs-screen::before { content: ""; position: absolute; top: 6px; left: 50%; width: 44px; height: 13px; margin-left: -22px; border-radius: 8px; background: #04060a; }
.hs-status { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 0.6rem; font-weight: 600; padding: 1px 6px 0; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.hs-icons { display: inline-flex; gap: 4px; align-items: center; }
.sig { display: inline-flex; gap: 1px; align-items: flex-end; height: 7px; }
.sig b { width: 2px; background: #fff; border-radius: 1px; } .sig b:nth-child(1) { height: 2px; } .sig b:nth-child(2) { height: 3.5px; } .sig b:nth-child(3) { height: 5px; } .sig b:nth-child(4) { height: 7px; }
.bat { width: 15px; height: 7px; border: 1px solid rgba(255,255,255,.8); border-radius: 2px; position: relative; }
.bat::before { content: ""; position: absolute; inset: 1px 5px 1px 1px; background: #fff; border-radius: 1px; }
.bat::after { content: ""; position: absolute; right: -3px; top: 1.5px; width: 1.5px; height: 2.5px; background: rgba(255,255,255,.8); border-radius: 0 1px 1px 0; }
.hs-who { display: grid; justify-items: center; gap: 3px; margin-top: 24px; text-align: center; }
.hs-avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #75818c, #4a555f); font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; position: relative; margin-bottom: 4px; }
.handset.ringing .hs-avatar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); animation: hsPulse 1.4s ease-out infinite; }
@keyframes hsPulse { from { transform: scale(.92); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.hs-name { font-size: 0.95rem; font-weight: 600; }
.hs-sub { font-size: 0.72rem; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
.handset.ended .hs-sub { color: #ff7366; }
.handset.ended .hs-screen { filter: saturate(.4) brightness(.75); }
.hs-wave { align-self: center; display: flex; align-items: center; gap: 3px; height: 30px; }
.hs-wave i { width: 3px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); transition: height .07s linear; }
.handset.talking .hs-wave i { background: #7cc0ff; }
.hs-keys { display: grid; grid-template-columns: repeat(3, 34px); gap: 10px 14px; margin-bottom: 14px; }
.hs-key { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.hs-key svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hs-key svg circle { fill: #fff; stroke: none; }
.hs-key:first-child svg circle, .hs-key:last-child svg circle { fill: none; stroke: #fff; }
.hs-end { width: 40px; height: 40px; border-radius: 50%; background: #e5483b; display: grid; place-items: center; }
.hs-end svg { width: 20px; height: 20px; fill: #fff; }

.st-link { position: relative; display: grid; grid-template-columns: minmax(8px, 1fr) auto minmax(8px, 1fr); align-items: center; margin-top: 132px; }
.ln { height: 6px; background: radial-gradient(circle, rgba(141,153,163,.32) 1.3px, transparent 1.8px) 0 50% / 10px 6px repeat-x; }
.st-link.ring .ln-a { background-image: radial-gradient(circle, rgba(124,192,255,.75) 1.5px, transparent 2px); animation: dotsR .8s linear infinite; }
.st-link.up .ln { background-image: radial-gradient(circle, #7cc0ff 1.7px, transparent 2.2px); animation: dotsR .45s linear infinite; }
.st-link.down .ln { background-image: radial-gradient(circle, #fdb52a 1.7px, transparent 2.2px); animation: dotsL .45s linear infinite; }
@keyframes dotsR { to { background-position: 10px 50%; } }
@keyframes dotsL { to { background-position: -10px 50%; } }
.st-node { display: grid; gap: 2px; text-align: center; padding: 8px 10px 9px; border-radius: 8px; background: #1b2025; border: 1px solid var(--dw-line); width: 118px; transition: border-color .3s, box-shadow .3s; }
.st-node .k { font-size: 0.56rem; }
.st-node b { font-size: 0.76rem; font-weight: 600; line-height: 1.3; }
.st-node span:last-child { font-size: 0.67rem; color: var(--dw-muted); line-height: 1.3; }
.st-node.flash { border-color: var(--dw-sun); box-shadow: 0 0 0 3px rgba(253,169,0,.14); }
.ln-lab { display: none; position: absolute; top: calc(50% + 9px); font-family: var(--f-mono); font-size: 0.54rem; letter-spacing: .06em; text-transform: uppercase; color: #66727b; white-space: nowrap; }
.ln-lab-a { left: 2px; } .ln-lab-b { right: 2px; }

.agent { width: 100%; max-width: 196px; border-radius: 14px; background: linear-gradient(180deg, #1f252a, #15191d); border: 1px solid var(--dw-line); padding: 12px 12px 14px; display: grid; justify-items: center; align-content: start; gap: 6px; box-shadow: 0 26px 40px -22px rgba(0,0,0,.9); min-height: 312px; }
.ag-head { width: 100%; display: flex; align-items: center; gap: 8px; }
.ag-logo { width: 26px; height: 26px; flex: none; border-radius: 6px; background: var(--dw-sun); color: #111; font-weight: 700; font-size: .68rem; display: grid; place-items: center; }
.ag-id { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.ag-id b { font-size: .8rem; } .ag-id small { font-size: .66rem; color: var(--dw-muted); }
.ag-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #3a444b; }
.agent.ringing .ag-dot { background: var(--dw-sun); animation: blink .6s steps(2) infinite; }
.agent.live .ag-dot { background: var(--dw-ok); } .agent.ended .ag-dot { background: var(--dw-red); }
@keyframes blink { to { opacity: .2; } }
.ag-orb-wrap { position: relative; width: 116px; height: 116px; margin: 18px 0 8px; display: grid; place-items: center; }
.ag-orb { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 34% 30%, #fff4d6 0%, #ffc64f 20%, #fd9a00 54%, #a94400 100%); box-shadow: 0 0 30px rgba(253,154,0,.38), inset -8px -10px 18px rgba(80,30,0,.45); transition: filter .4s, box-shadow .4s; will-change: transform; }
.ag-orb::after { content: ""; position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent 0 20%, rgba(255,255,255,.28) 30%, transparent 42% 70%, rgba(255,214,140,.3) 80%, transparent 90%); animation: spin 7s linear infinite; mix-blend-mode: soft-light; }
.agent.idle .ag-orb, .agent.ended .ag-orb { filter: grayscale(.9) brightness(.55); box-shadow: none; }
.agent.ringing .ag-orb { filter: grayscale(.5) brightness(.75); animation: orbWait 1.3s ease-in-out infinite; }
@keyframes orbWait { 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }
.ag-ring { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid transparent; transition: border-color .2s; will-change: transform; }
.agent.listening .ag-ring { border-color: rgba(124,192,255,.6); }
.agent.thinking .ag-ring { border: 2px dashed rgba(253,181,42,.7); animation: spin 1.8s linear infinite; }
.ag-state { margin: 0; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--dw-muted); }
.agent.speaking .ag-state { color: var(--dw-sun); } .agent.listening .ag-state { color: #7cc0ff; }
.ag-acts { display: grid; gap: 6px; width: 100%; margin-top: 6px; }
.ag-act { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .02em; color: var(--dw-sun); border: 1px dashed rgba(253,169,0,.5); background: rgba(253,169,0,.07); border-radius: 6px; padding: 5px 8px; text-align: center; animation: rise .35s ease both; }

.st-mail { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 16px; background: rgba(12,14,16,.8); backdrop-filter: blur(3px); overflow-y: auto; animation: fadeIn .4s ease both; }
.st-mail[hidden] { display: none; }
.st-mail .pbx-summary { width: 100%; max-width: 470px; margin: 0; box-shadow: 0 24px 50px -20px rgba(0,0,0,.9); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.cap { padding: 12px 18px 14px; min-height: 96px; border-bottom: 1px solid var(--dw-line); background: #14181b; display: grid; gap: 4px; align-content: start; }
.cap-who { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dw-muted); }
.cap.ai .cap-who { color: var(--dw-sun); } .cap.caller .cap-who { color: #7cc0ff; }
.cap-text { margin: 0; font-size: .95rem; line-height: 1.45; }
.cap.idle .cap-text { color: var(--dw-muted); font-size: .86rem; }
.cap-tr { margin: 0; font-size: .8rem; font-style: italic; color: var(--dw-muted); line-height: 1.4; }
.cap-tr:empty { display: none; }
.cap.swap .cap-text, .cap.swap .cap-tr { animation: rise .3s ease both; }

.pbx-transcript summary { cursor: pointer; padding: 11px 18px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--dw-muted); list-style: none; display: flex; align-items: center; gap: 8px; }
.pbx-transcript summary::-webkit-details-marker { display: none; }
.pbx-transcript summary::before { content: "+"; width: 16px; height: 16px; border: 1px solid #3a444b; border-radius: 4px; display: grid; place-items: center; font-size: .8rem; line-height: 1; }
.pbx-transcript[open] summary::before { content: "\2013"; }
.pbx-transcript summary:hover { color: var(--dw-ink); }
.pbx-transcript summary:focus-visible { outline: 2px solid var(--dw-sun); outline-offset: -3px; }
.pbx-transcript .pbx-chat { max-height: 340px; border-top: 1px solid var(--dw-line); }
.pbx-chat { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--dw-line) transparent; }
.pbx-chat > :first-child { margin-top: auto; }
.msg { max-width: 88%; display: grid; gap: 3px; animation: rise .35s ease both; }
.msg .who { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dw-muted); }
.msg .bubble { padding: 9px 12px; border-radius: 10px; line-height: 1.45; font-size: 0.9rem; }
.msg.ai, .msg.staff { align-self: flex-start; }
.msg.ai .bubble { background: var(--dw-panel); border: 1px solid var(--dw-line); border-top-left-radius: 3px; }
.msg.staff .bubble { background: #14302d; border: 1px solid #1f4c46; border-top-left-radius: 3px; }
.msg.staff .who { color: var(--dw-teal); }
.msg.caller { align-self: flex-end; text-align: right; } .msg.caller .bubble { background: #1c3552; border-top-right-radius: 3px; text-align: left; }
.msg .bubble .tr { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.1); font-size: 0.8rem; font-style: italic; color: var(--dw-muted); }
.msg.caller .bubble .tr { color: #9fb6cf; }
.msg.sys, .msg.act { align-self: center; max-width: 100%; text-align: center; }
.msg.sys .bubble { background: transparent; color: var(--dw-muted); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em; padding: 2px 0; }
.msg.act .bubble { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; align-items: baseline; font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--dw-sun); background: rgba(253,169,0,.07); border: 1px dashed rgba(253,169,0,.5); border-radius: 6px; padding: 6px 11px; }
.msg.act .tag { color: var(--dw-muted); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.64rem; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pbx-summary { margin: 6px 0 0; padding: 14px 16px; flex: none; border-radius: 8px; background: #1a2a1c; border: 1px solid #2c4a2f; animation: rise .45s ease both; }
.pbx-summary.quiet { background: #1c2125; border-color: var(--dw-line); }
.pbx-summary.quiet .eyebrow { color: var(--dw-muted); }
.pbx-summary-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.pbx-summary-time { font-family: var(--f-mono); font-size: 0.72rem; color: var(--dw-muted); flex: none; }
.pbx-subject { margin: 0 0 10px; font-weight: 600; font-size: 0.9rem; line-height: 1.35; }
.pbx-summary dl { margin: 0; display: grid; gap: 5px; }
.pbx-summary dl > div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; font-size: 0.84rem; line-height: 1.4; }
.pbx-summary dt { color: var(--dw-muted); } .pbx-summary dd { margin: 0; }
.pbx-summary-foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--dw-muted); }
.pbx-end { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 0 2px; animation: rise .45s .1s ease both; }
.pbx-end button { font: inherit; font-size: 0.82rem; font-weight: 600; border-radius: 999px; padding: 8px 15px; cursor: pointer; min-height: 0; }
.pbx-again { background: transparent; color: var(--dw-ink); border: 1px solid #3a444b; }
.pbx-again:hover { border-color: var(--dw-sun); color: var(--dw-sun); }
.pbx-next { background: var(--dw-sun); color: #111; border: 0; }
.pbx-next:hover { background: #ffbe3a; }
.pbx-end button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .pbx-tabs button { padding: 10px 10px 8px; align-content: start; }
  .pbx-tabs b { white-space: normal; font-size: 0.8rem; line-height: 1.25; }
  .pbx-tabs span { white-space: normal; font-size: 0.64rem; line-height: 1.35; }
  .pbx-tabs em { display: none; }
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px 12px 12px; gap: 12px 10px; }
  .st-caller { grid-column: 1; grid-row: 1; } .st-agent { grid-column: 2; grid-row: 1; }
  .st-link { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .ln-lab { display: none; }
  .st-node { width: auto; min-width: 160px; }
  .handset { width: 136px; border-radius: 22px; padding: 4px; }
  .hs-screen { border-radius: 18px; padding: 6px 8px 10px; }
  .hs-screen::before { width: 36px; height: 10px; margin-left: -18px; top: 5px; }
  .hs-who { margin-top: 18px; } .hs-avatar { width: 42px; height: 42px; font-size: .86rem; } .hs-name { font-size: .8rem; } .hs-sub { font-size: .66rem; }
  .hs-keys { grid-template-columns: repeat(3, 27px); gap: 8px 10px; margin-bottom: 10px; }
  .hs-key { width: 27px; height: 27px; } .hs-key svg { width: 14px; height: 14px; }
  .hs-end { width: 32px; height: 32px; } .hs-end svg { width: 16px; height: 16px; }
  .agent { padding: 10px 8px 12px; min-height: 270px; }
  .ag-id small { font-size: .62rem; }
  .ag-orb-wrap { width: 92px; height: 92px; margin: 14px 0 6px; } .ag-orb { width: 66px; height: 66px; }
  .cap { padding: 10px 12px 12px; min-height: 112px; }
  .cap-text { font-size: .9rem; }
  .pbx-chat { padding: 14px 12px 12px; }
  .msg { max-width: 92%; }
  .pbx-summary dl > div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Wi-Fi: realistic phone + illustrated café ---------- */
.dw-body.wf { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 18px; padding: 20px; align-items: center; background: radial-gradient(120% 90% at 50% 0%, #1c2227 0%, #131619 65%); }
.wf-phone { width: 176px; aspect-ratio: 9 / 18.6; border-radius: 28px; padding: 5px; background: linear-gradient(145deg, #444d55, #1c2126 40%, #2f363c); box-shadow: 0 26px 40px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.07); }
.wf-screen { position: relative; height: 100%; border-radius: 23px; overflow: hidden; background: #f2f2f6; color: #111; }
.wf-screen::before { content: ""; position: absolute; top: 6px; left: 50%; width: 44px; height: 13px; margin-left: -22px; border-radius: 8px; background: #04060a; z-index: 3; }
.wf-status { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 8px 14px 0; font-size: 0.6rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #111; }
.wf-icons { display: inline-flex; gap: 4px; align-items: center; }
.wf-status .sig b { background: #111; } .wf-status .bat { border-color: rgba(0,0,0,.75); } .wf-status .bat::before { background: #111; } .wf-status .bat::after { background: rgba(0,0,0,.75); }
.wf-wifi { width: 11px; height: 8px; display: none; background: radial-gradient(circle at 50% 100%, #111 0 1.6px, transparent 2px), radial-gradient(circle at 50% 100%, transparent 0 3.2px, #111 3.4px 4.6px, transparent 4.8px), radial-gradient(circle at 50% 100%, transparent 0 6px, #111 6.2px 7.4px, transparent 7.6px); }
.wf-phone.joined .wf-wifi { display: inline-block; }
.wf-views { position: absolute; inset: 0; }
.wf-v { position: absolute; inset: 0; padding: 30px 10px 12px; opacity: 0; transform: translateX(24px); transition: opacity .35s, transform .35s; display: grid; align-content: start; gap: 6px; font-size: 0.72rem; }
.wf-v.on { opacity: 1; transform: none; }
.wf-back { margin: 0; color: #0a7aff; font-size: 0.68rem; }
.wf-list h4 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.wf-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 9px; background: #fff; font-size: 0.68rem; }
.wf-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-toggle { border-radius: 9px; }
.wf-sw { width: 24px; height: 14px; border-radius: 8px; background: #34c759; position: relative; flex: none; }
.wf-sw::after { content: ""; position: absolute; right: 1.5px; top: 1.5px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.wf-sec { margin: 6px 0 0 4px; font-size: 0.56rem; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8e; }
.wf-group { border-radius: 9px; overflow: hidden; display: grid; gap: 1px; background: #e2e2e7; }
.wf-lock { width: 7px; height: 8px; border: 1.3px solid #8a8a8e; border-radius: 1.5px; position: relative; flex: none; margin-top: 3px; }
.wf-lock::before { content: ""; position: absolute; left: 0.5px; right: 0.5px; top: -4.5px; height: 4px; border: 1.3px solid #8a8a8e; border-bottom: 0; border-radius: 3px 3px 0 0; }
.wf-pick { transition: background .2s; }
.wf-pick.press { background: #e5e5ea; }
.wf-state { width: 11px; height: 11px; flex: none; }
.wf-pick.joining .wf-state { border-radius: 50%; border: 1.6px solid #c7c7cc; border-top-color: #0a7aff; animation: spin .7s linear infinite; }
.wf-pick.joined span { color: #0a7aff; }
.wf-pick.joined .wf-state { border: 0; animation: none; position: relative; }
.wf-pick.joined .wf-state::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #0a7aff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.wf-portal { padding: 0; gap: 0; background: #fbfaf6; transform: translateY(40px); }
.wf-portal.on { transform: none; }
.wf-sheet-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 30px 10px 8px; background: #f7f7f7; border-bottom: 1px solid #e3e3e3; font-size: 0.64rem; }
.wf-sheet-bar span:first-child { color: #0a7aff; } .wf-sheet-bar b { font-weight: 600; }
.wf-portal-body { display: grid; gap: 6px; padding: 12px 12px; }
.wf-brand { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.74rem; }
.wf-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--dw-sun); color: #111; font-family: var(--f-mono); font-size: 0.56rem; font-weight: 700; }
.wf-portal h5 { margin: 4px 0 0; font-size: 0.92rem; line-height: 1.2; font-weight: 700; }
.wf-portal p { margin: 0; font-size: 0.64rem; color: #5d615c; line-height: 1.4; }
.wf-label { font-size: 0.58rem; color: #5d615c; margin-top: 2px; }
.wf-input { display: block; min-height: 26px; border: 1.5px solid #d6d8d1; border-radius: 6px; padding: 5px 7px; font-size: 0.66rem; background: #fff; font-family: var(--f-mono); white-space: nowrap; overflow: hidden; }
.wf-input.focus { border-color: var(--dw-sun); }
.wf-input.focus::after { content: ""; display: inline-block; width: 1px; height: 11px; background: #111; margin-left: 1px; vertical-align: -2px; animation: blink .8s steps(2) infinite; }
.wf-check { display: flex; align-items: center; gap: 6px; font-size: 0.62rem; margin-top: 2px; }
.wf-box { width: 13px; height: 13px; border: 1.5px solid #c9cbc4; border-radius: 3px; background: #fff; position: relative; flex: none; transition: background .15s, border-color .15s; }
.wf-box.on { background: #111; border-color: #111; }
.wf-box.on::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.wf-btn { display: block; margin-top: 6px; text-align: center; padding: 8px; border-radius: 7px; background: #111; color: #fff; font-weight: 600; font-size: 0.7rem; transition: background .15s, transform .15s; }
.wf-btn.press { transform: scale(.96); }
.wf-btn.busy { background: #5d615c; }
.wf-done { place-content: center; justify-items: center; text-align: center; background: #f2f2f6; }
.wf-ok { width: 50px; height: 50px; border-radius: 50%; background: #34c759; position: relative; }
.wf-v.on .wf-ok { animation: pop .4s cubic-bezier(.2,.9,.3,1.4) both; }
.wf-ok::after { content: ""; position: absolute; left: 18px; top: 11px; width: 12px; height: 23px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.wf-done h5 { margin: 8px 0 0; font-size: 0.95rem; font-weight: 700; }
.wf-done p { margin: 0; font-size: 0.68rem; color: #6b6b70; }
.wf-chips { display: flex; gap: 5px; margin-top: 6px; }
.wf-chips span { font-family: var(--f-mono); font-size: 0.58rem; padding: 3px 7px; border-radius: 999px; background: #e3e3e8; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.wf-web, .wf-err { padding-top: 28px; gap: 0; background: #fff; }
.wf-url { display: flex; align-items: center; gap: 5px; margin: 0 8px 8px; padding: 5px 8px; border-radius: 8px; background: #eeeef1; font-size: 0.58rem; color: #3c3c43; white-space: nowrap; overflow: hidden; }
.wf-url i { width: 6px; height: 7px; border: 1.2px solid #8a8a8e; border-radius: 1.5px; flex: none; }
.wf-page { margin: 0 8px; padding: 12px 10px; border-radius: 12px; background: linear-gradient(170deg, #2f8fd8, #63b6f0); color: #fff; display: grid; gap: 2px; }
.wf-city { margin: 0; font-size: 0.7rem; font-weight: 600; }
.wf-temp { margin: 0; font-size: 2.1rem; font-weight: 300; line-height: 1; }
.wf-cond { margin: 0; font-size: 0.62rem; opacity: .9; }
.wf-fc { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.3); font-size: 0.62rem; }
.wf-fc span { display: grid; justify-items: center; gap: 2px; } .wf-fc b { font-weight: 600; opacity: .85; }
.wf-lines { display: grid; gap: 5px; margin-top: 10px; } .wf-lines i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.4); } .wf-lines i:nth-child(2) { width: 80%; } .wf-lines i:nth-child(3) { width: 60%; }
.wf-load { display: block; height: 2px; margin: -6px 8px 0; border-radius: 1px; background: linear-gradient(90deg, #0a7aff 0 30%, transparent 30%) no-repeat; background-size: 200% 100%; animation: load 1.2s linear infinite; }
.wf-err.done .wf-load { visibility: hidden; }
@keyframes load { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.wf-errbody { display: grid; justify-items: center; text-align: center; gap: 5px; padding: 40px 12px 0; opacity: 0; transition: opacity .3s; }
.wf-errbody.show { opacity: 1; }
.wf-errico { width: 34px; height: 34px; border-radius: 8px; border: 2px solid #8a8a8e; position: relative; }
.wf-errico::before, .wf-errico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: #8a8a8e; transform: rotate(45deg); }
.wf-errico::after { transform: rotate(-45deg); }
.wf-err h5 { margin: 6px 0 0; font-size: 0.82rem; font-weight: 700; }
.wf-err p { margin: 0; font-size: 0.6rem; color: #6b6b70; line-height: 1.4; }
.wf-tap { position: absolute; z-index: 4; width: 24px; height: 24px; border-radius: 50%; background: rgba(253,169,0,.35); border: 2px solid var(--dw-sun); left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; transition: left .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1), opacity .2s, transform .2s; }
.wf-tap.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wf-tap.press { transform: translate(-50%, -50%) scale(.72); }

.wf-right { display: grid; gap: 12px; min-width: 0; }
.wf-scene { border-radius: 10px; overflow: hidden; border: 1px solid var(--dw-line); box-shadow: 0 20px 36px -24px rgba(0,0,0,.9); }
.wf-svg { display: block; width: 100%; height: auto; }
.wf-svg text { font-family: var(--f-mono); }
.wf-lab { font-size: 9px; letter-spacing: .06em; fill: #8d99a3; }
.wf-lab-in { fill: #c9d2d9; }
.wf-chalk { font-size: 8px; letter-spacing: .2em; fill: #d6ddd2; }
.wf-path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s, stroke-width .4s; }
.wf-path.guest { stroke: #3d474f; }
.wf-path.wf-air { stroke-dasharray: 3 5; }
.wf-path.staff { stroke: #2b5680; }
.wf-svg.guest-on .wf-path.guest { stroke: #fdb52a; }
.wf-svg.block-flash .wf-path.staff { stroke: #4aa3ff; stroke-width: 3; }
.wf-apled { fill: #4aa3ff; }
.wf-arc { fill: none; stroke: #fdb52a; stroke-width: 1.8; stroke-linecap: round; opacity: 0; }
.wf-svg.arcs .wf-arc { animation: arc 1.8s ease-out infinite; }
.wf-svg.arcs .a2 { animation-delay: .3s; } .wf-svg.arcs .a3 { animation-delay: .6s; }
@keyframes arc { 0% { opacity: 0; } 25% { opacity: .9; } 70%, 100% { opacity: 0; } }
.wf-glow { opacity: .85; }
.wf-steam { fill: none; stroke: #d6ddd2; stroke-width: 1.3; stroke-linecap: round; opacity: .5; animation: steam 2.6s ease-in-out infinite; }
.wf-steam.s2 { animation-delay: 1.1s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(3px); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateY(-5px); } }
.wf-led { fill: #33b101; animation: blink 1.1s steps(2) infinite; } .wf-led.l2 { animation-duration: .7s; }
.wf-badge { opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; transform-box: fill-box; }
.wf-badge rect { stroke-width: 1.2; }
.wf-badge text { font-size: 9px; letter-spacing: .03em; }
.b-guest rect { fill: #2a2110; stroke: #fdb52a; } .b-guest text { fill: #fdb52a; }
.b-email rect { fill: #14261a; stroke: #33b101; } .b-email text { fill: #8fe07a; }
.b-block rect { fill: #3a1715; stroke: #ff5a4f; } .b-block text { fill: #ff8a80; }
.b-session rect { fill: #14181b; stroke: rgba(253,181,42,.7); }
.b-session .t1 { font-size: 10px; fill: #e8ecef; } .b-session .t2 { font-size: 9px; fill: #fdb52a; }
.wf-svg.badge-guest .b-guest, .wf-svg.badge-email .b-email, .wf-svg.blocked .b-block, .wf-svg.badge-session .b-session { opacity: 1; transform: none; }
.wf-shield { fill: #ff5a4f; opacity: 0; transition: opacity .25s; } .wf-shield-x { stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .25s; }
.wf-svg.blocked .wf-shield, .wf-svg.blocked .wf-shield-x { opacity: 1; }
.wf-legend text { font-size: 9px; fill: #8d99a3; } .lg-guest { fill: #fdb52a; } .lg-staff { fill: #4aa3ff; }
.wf-pk { filter: drop-shadow(0 0 3px currentColor); }

.wf-cap { padding: 12px 14px 13px; border-radius: 10px; background: #14181b; border: 1px solid var(--dw-line); display: grid; gap: 4px; min-height: 104px; align-content: start; }
.wf-cap-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wf-stepno { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dw-sun); }
.wf-dots { display: inline-flex; gap: 4px; } .wf-dots i { width: 14px; height: 4px; border-radius: 2px; background: #2f373e; transition: background .3s; } .wf-dots i.on { background: var(--dw-sun); }
.wf-cap b { font-size: .95rem; font-weight: 600; line-height: 1.3; }
.wf-cap p { margin: 0; font-size: .84rem; color: var(--dw-muted); line-height: 1.45; }
.wf-cap.swap b, .wf-cap.swap p { animation: rise .3s ease both; }
@media (max-width: 640px) {
  .dw-body.wf { grid-template-columns: 1fr; padding: 14px 12px; gap: 14px; }
  .wf-right { order: -1; }
  .wf-phone { width: 158px; margin: 0 auto; }
  .wf-cap { min-height: 118px; }
}

/* ---------- Cameras: live night-vision feeds ---------- */
.dw-body.nv { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 12px; padding: 12px; background: #0b0d0f; }
.nv-main { display: grid; gap: 8px; min-width: 0; align-content: start; }
.nv-view { position: relative; border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.nv-view > canvas { display: block; width: 100%; height: 100%; }
.nv-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.nv-th { display: grid; gap: 3px; min-width: 0; }
.nv-th canvas { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 4px; outline: 1.5px solid transparent; outline-offset: 1px; opacity: .6; transition: opacity .3s, outline-color .3s; }
.nv-th.on canvas { opacity: 1; outline-color: #3a444b; }
.nv-th.hot canvas { outline-color: var(--dw-red); }
.nv-th span { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-th.on span { color: var(--dw-ink); } .nv-th.hot span { color: #ff8a80; }
.nv-tl { position: relative; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .58rem; color: var(--dw-muted); letter-spacing: .06em; text-transform: uppercase; }
.nv-tl b { flex: 1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #22292e, #2f383f); }
.nv-tl .live { color: #ff8a80; } .nv-tl .live::before { content: "\25CF "; animation: blink 1.2s steps(2) infinite; }
.nv-tl i { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #33d17a; box-shadow: 0 0 0 2px #0b0d0f; animation: pop .35s ease both; }
.nv-tl i.alert { background: #ff5a4f; }
.nv-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.nv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.nv-stats div { display: grid; gap: 1px; padding: 7px 6px; border-radius: 6px; background: #14181b; border: 1px solid var(--dw-line); text-align: center; }
.nv-stats b { font-family: var(--f-mono); font-size: .9rem; font-variant-numeric: tabular-nums; }
.nv-stats div:first-child b { color: #ff8a80; }
.nv-stats span { font-size: .56rem; line-height: 1.2; color: var(--dw-muted); }
.nv-side > .k { margin: 2px 0 0; }
.nv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 222px; align-content: start; }
.nv-ev { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 7px 8px; border-radius: 6px; background: #14181b; border: 1px solid var(--dw-line); border-left: 3px solid #33d17a; animation: rise .35s ease both; }
.nv-ev.alert { border-color: rgba(255,90,79,.6); border-left-color: #ff5a4f; background: #221413; }
.nv-ev .t { font-family: var(--f-mono); font-size: .66rem; color: var(--dw-muted); grid-row: span 2; padding-top: 1px; }
.nv-ev b { display: block; font-size: .76rem; font-weight: 600; }
.nv-ev small { display: block; font-size: .7rem; color: var(--dw-muted); line-height: 1.3; }
.nv-ev em { grid-column: 2; font-style: normal; font-family: var(--f-mono); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: #33d17a; }
.nv-ev.alert em { color: #ff8a80; }
.nv-sys { margin: 0; display: grid; gap: 6px; padding: 9px 10px; border-radius: 8px; background: #14181b; border: 1px solid var(--dw-line); transition: border-color .4s, box-shadow .4s; }
.nv-sys div { display: grid; gap: 0; }
.nv-sys dt { font-family: var(--f-mono); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dw-muted); }
.nv-sys dd { margin: 0; font-size: .74rem; line-height: 1.3; }
.nv-sys.hl { border-color: var(--dw-sun); box-shadow: 0 0 0 3px rgba(253,169,0,.15); }
.nv-note { position: absolute; top: 10px; right: 10px; width: min(268px, calc(100% - 20px)); padding: 9px 10px 10px; border-radius: 14px; background: rgba(242,242,246,.94); backdrop-filter: blur(8px); color: #111; box-shadow: 0 18px 40px -14px rgba(0,0,0,.8); transform: translateY(-130%); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; z-index: 3; }
.nv-note.show { transform: none; opacity: 1; }
.nv-note-top { display: flex; align-items: center; gap: 6px; font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; color: #6b6b70; }
.nv-note-top span:last-child { margin-left: auto; text-transform: none; }
.nv-app { width: 16px; height: 16px; border-radius: 4px; background: #111 radial-gradient(circle at 50% 50%, #fdb52a 0 3px, transparent 3.5px); }
.nv-note-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 4px; align-items: center; }
.nv-note-body b { display: block; font-size: .78rem; line-height: 1.25; }
.nv-note-body span { display: block; font-size: .7rem; color: #3c3c43; line-height: 1.3; margin-top: 1px; }
.nv-note-body canvas { width: 64px; height: 36px; border-radius: 4px; display: block; }
.nv-search { position: absolute; inset: 0; z-index: 4; display: grid; align-content: start; gap: 10px; padding: 14px; background: rgba(9,11,13,.9); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.nv-search.show { opacity: 1; }
.nv-q { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: #1c2226; border: 1px solid #3a444b; font-size: .86rem; min-height: 38px; }
.nv-qi { width: 12px; height: 12px; border: 2px solid var(--dw-muted); border-radius: 50%; position: relative; flex: none; }
.nv-qi::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: var(--dw-muted); transform: rotate(45deg); }
.nv-q .typing::after, [data-nv-q].typing::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--dw-ink); animation: blink .8s steps(2) infinite; }
.nv-res { display: grid; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.nv-res.show { opacity: 1; transform: none; }
.nv-res .k { margin: 0; }
.nv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nv-cards div { display: grid; gap: 4px; min-width: 0; }
.nv-cards canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 5px; display: block; outline: 1.5px solid #3a444b; }
.nv-cards div:first-child canvas { outline-color: var(--dw-sun); }
.nv-cards span { font-size: .66rem; color: var(--dw-muted); line-height: 1.3; } .nv-cards b { color: var(--dw-ink); font-family: var(--f-mono); }
.nv-cap { padding: 11px 14px 12px; border-radius: 10px; background: #14181b; border: 1px solid var(--dw-line); display: grid; gap: 4px; min-height: 92px; align-content: start; }
.nv-cap b { font-size: .95rem; font-weight: 600; line-height: 1.3; }
.nv-cap p { margin: 0; font-size: .84rem; color: var(--dw-muted); line-height: 1.45; }
.nv-cap.swap b, .nv-cap.swap p { animation: rise .3s ease both; }
@media (max-width: 640px) {
  .dw-body.nv { grid-template-columns: 1fr; padding: 10px; }
  .nv-list { min-height: 0; }
  .nv-search { padding: 10px; gap: 8px; } .nv-q { font-size: .78rem; min-height: 32px; padding: 6px 10px; }
  .nv-cards span { font-size: .58rem; }
  .nv-note { top: 6px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .dw *, .dw *::before, .dw *::after { animation: none !important; transition: none !important; }
}

/* PBX: voice bar and cover */
.pbx-wrap { display: block; position: relative; }
.voice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px; background: #121517; border-bottom: 1px solid var(--dw-line); }
.voice-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--dw-sun); color: #111; cursor: pointer; display: grid; place-items: center; padding: 0; min-height: 0; transition: transform .15s, background .15s; }
.voice-play:hover { transform: scale(1.06); }
.voice-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ico { display: block; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.voice-play.on .ico { width: 14px; height: 16px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px, currentColor 9px 14px); }
.voice-mid { display: grid; gap: 7px; min-width: 0; }
.voice-row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--dw-muted); }
.voice-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.voice-who.ai { color: var(--dw-sun); } .voice-who.caller { color: var(--dw-blue); } .voice-who.staff { color: var(--dw-teal); }
.voice-time { font-variant-numeric: tabular-nums; flex: none; }
.voice-track { position: relative; height: 6px; border-radius: 3px; background: var(--dw-line); cursor: pointer; }
.voice-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--dw-sun); }
.voice-cues { position: absolute; inset: 0; pointer-events: none; }
.voice-cues i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,.28); }
.voice-cues i.caller { background: rgba(74,163,255,.5); } .voice-cues i.staff { background: rgba(63,208,176,.6); }
.pbx-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(12,14,16,.72); backdrop-filter: blur(3px); z-index: 4; text-align: center; padding: 20px; transition: opacity .3s; }
.pbx-cover.off { opacity: 0; pointer-events: none; }
.cover-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; border: 0; background: var(--dw-sun); color: #111; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(253,169,0,.6); }
.cover-btn:hover { transform: translateY(-1px); }
.cover-note { font-size: 0.82rem; color: var(--dw-muted); max-width: 30em; }


.dw[data-demo="pbx"] .dw-replay { display: none; }