/* FCMv extension portal (1.21.0): the phone in the browser, and its sign-in page.
   A navy rail, the list on the side, the keypad or the call in the middle, a status bar on top.
   Calm white surfaces with hairlines; colour is kept for what is happening: green and red for calls,
   the orange lamp for where you are and what is new, the light running along the line of a live call. */

:root {
  --x-paper: #f3f5f8; --x-panel: #fff; --x-fill: #f2f5f9; --x-fill-h: #e8edf4; --x-hover: #eef2f7;
  --x-rule: #e0e5ec; --x-rule-2: #ebeef3;
  --x-ink: #14243b; --x-ink-2: #4b596c; --x-ink-3: #647083;
  --x-rail: #1b3a5f; --x-rail-ink: #b8c7da;
  --x-accent: #24548c; --x-accent-h: #1d4675; --x-accent-ink: #24548c; --x-accent-tint: #e8eff8; --x-ring: #24548c33;
  --x-signal: #e8622a; --x-badge: #f07a35; --x-badge-ink: #0f2341;
  --x-go: #1b8248; --x-go-h: #166c3b; --x-go-ink: #1a7a44; --x-go-tint: #e5f3eb; --x-go-line: #1b824833; --x-go-light: #36c374;
  --x-stop: #c93a41; --x-stop-h: #ae2f36; --x-stop-ink: #b8323a; --x-stop-tint: #fbe9ea;
  --x-warn: #d08a1e; --x-warn-ink: #9a5f0c; --x-warn-tint: #fbf1df;
  --x-on: #14243b; --x-on-ink: #fff;
  --x-thumb: #fff; --x-thumb-sh: 0 1px 2px #0b18301f, 0 0 0 1px #0b18300d;
  --x-pop: 0 18px 48px #0b18302e, 0 2px 6px #0b18301a;
  --x-dim: #0b1830a6;
  --x-ease: cubic-bezier(.2, .7, .2, 1);
}
:root[data-theme="dark"] {
  --x-paper: #0d1624; --x-panel: #121d2e; --x-fill: #18263a; --x-fill-h: #1f3048; --x-hover: #172539;
  --x-rule: #24344c; --x-rule-2: #1c2a3e;
  --x-ink: #e4ebf4; --x-ink-2: #a9b6c8; --x-ink-3: #8191a6;
  --x-rail: #0f2341; --x-rail-ink: #9db0c8;
  --x-accent: #3b73bd; --x-accent-h: #4a82cc; --x-accent-ink: #8cb4e8; --x-accent-tint: #1a2d47; --x-ring: #8cb4e840;
  --x-signal: #f2853e;
  --x-go: #1b8248; --x-go-h: #20975a; --x-go-ink: #5ccb8e; --x-go-tint: #143826; --x-go-line: #5ccb8e33; --x-go-light: #5ccb8e;
  --x-stop: #cf3f47; --x-stop-h: #dc4f57; --x-stop-ink: #f0858a; --x-stop-tint: #3a1c22;
  --x-warn: #e3a64b; --x-warn-ink: #e3a64b; --x-warn-tint: #3a2c14;
  --x-on: #e4ebf4; --x-on-ink: #0d1624;
  --x-thumb: #2a3b55; --x-thumb-sh: 0 1px 2px #0006;
  --x-pop: 0 18px 48px #0009, 0 0 0 1px #24344c;
  --x-dim: #050b14b3;
}

/* ------------------------------------------------------------------ frame: rail | list | main */
.xp { position: relative; height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-columns: 76px 352px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  background: var(--x-paper); color: var(--x-ink); font-size: 14px; }
.xp .grow { flex: 1; min-width: 0; }
.xp .faint { color: var(--x-ink-3); }
.xp button { font: inherit; }
.xp :focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; }
.xp bdi { unicode-bidi: isolate; }
.xp-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
@media (min-width: 861px) { .xp-only-m { display: none !important; } }

/* the rail */
.xp-rail { grid-row: 1; display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 0 0 12px; background: var(--x-rail); color: var(--x-rail-ink); z-index: 3; }
.xp-rail :focus-visible { outline-color: #fff; outline-offset: -2px; }
.xp-brand { height: 56px; flex: none; display: grid; place-items: center; perspective: 240px; }
.xp-brand img { width: 32px; height: 32px; object-fit: contain; animation: xpLogoSpin 10s cubic-bezier(.45, .05, .25, 1) infinite; transform-style: preserve-3d; }
/* the V logo turns once every 10 seconds, in 3D (owner's request, 1.13.0) */
@keyframes xpLogoSpin { 0%, 86% { transform: rotateY(0deg); } 93% { transform: rotateY(180deg) scale(1.08); } 100% { transform: rotateY(360deg); } }
.xp-navs { width: 100%; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.xp-nav { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 8px; border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 11px; font-weight: 500; line-height: 1.15; transition: color .15s; }
.xp-nav:hover { color: #fff; }
.xp-nav.on { color: #fff; font-weight: 600; }
.xp-nav-i { position: relative; width: 44px; height: 32px; border-radius: 10px; display: grid; place-items: center; transition: background .15s; }
.xp-nav:hover .xp-nav-i { background: #ffffff12; }
.xp-nav.on .xp-nav-i { background: #ffffff1f; }
.xp-nav .i { width: 21px; height: 21px; }
.xp-nav-l { max-width: 70px; text-align: center; overflow-wrap: anywhere; }
/* where you are: a small orange lamp on the edge of the rail */
.xp-nav-mark { position: absolute; inset-inline-start: 0; top: 50%; width: 3px; height: 30px; margin-top: -15px; border-radius: 0 3px 3px 0; background: var(--x-signal); view-transition-name: xp-navmark; }
[dir=rtl] .xp-nav-mark { border-radius: 3px 0 0 3px; }
.xp-nav-live { position: absolute; top: 2px; inset-inline-end: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--x-go-light); box-shadow: 0 0 0 2px var(--x-rail); animation: xpBreath 2s ease-in-out infinite; }
.xp-nav-i .xp-badge { position: absolute; top: -3px; inset-inline-end: -1px; box-shadow: 0 0 0 2px var(--x-rail); }
.xp-rail > .grow { flex: 1; }
.xp-me { position: relative; margin: 10px 0 6px; cursor: default; }
.xp-me .xp-dot { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 12px; height: 12px; border: 2px solid var(--x-rail); }
.xp-out { padding: 6px 4px; }
.xp-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--x-badge); color: var(--x-badge-ink);
  font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* the list column */
.xp-side { grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--x-panel); border-inline-end: 1px solid var(--x-rule); view-transition-name: xp-side; }
.xp-side-h { height: 56px; flex: none; display: flex; align-items: center; gap: 6px; padding-inline: 20px 10px; border-bottom: 1px solid var(--x-rule); }
.xp-side-h h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.1px; }
.xp-tabs { position: relative; flex: none; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 14px 16px 0; padding: 3px; border-radius: 10px; background: var(--x-fill); }
.xp-tabs-thumb { position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc((100% - 6px) / var(--n, 3)); border-radius: 8px; background: var(--x-thumb); box-shadow: var(--x-thumb-sh);
  transform: translateX(calc(100% * var(--i, 0))); transition: transform .3s var(--x-ease); }
[dir=rtl] .xp-tabs-thumb { transform: translateX(calc(-100% * var(--i, 0))); }
.xp-tabs button { position: relative; z-index: 1; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--x-ink-2); font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.xp-tabs button:hover, .xp-tabs button.on { color: var(--x-ink); }
.xp-search { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; margin: 12px 16px 6px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: var(--x-fill);
  color: var(--x-ink-3); transition: background .15s, border-color .15s, box-shadow .15s; }
.xp-search:focus-within { background: var(--x-panel); border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-ring); }
.xp-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--x-ink); font-size: 13.5px; -webkit-appearance: none; appearance: none; }
.xp-search input:focus-visible { outline: 0; }
.xp-search input::placeholder { color: var(--x-ink-3); }
.xp-search input::-webkit-search-cancel-button { -webkit-appearance: none; width: 14px; height: 14px; cursor: pointer; opacity: .55;
  background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647083' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.xp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 16px; scrollbar-width: thin; scrollbar-color: var(--x-rule) transparent; }
.xp-list.in-fwd { animation: xpListFwd .26s var(--x-ease); }
.xp-list.in-back { animation: xpListBack .26s var(--x-ease); }
[dir=rtl] .xp-list.in-fwd { animation-name: xpListBack; } [dir=rtl] .xp-list.in-back { animation-name: xpListFwd; }
@keyframes xpListFwd { from { opacity: 0; transform: translateX(14px); } }
@keyframes xpListBack { from { opacity: 0; transform: translateX(-14px); } }
/* the day (or letter) over its rows stays in view while the list scrolls */
.xp-group { position: sticky; top: 0; z-index: 2; padding: 12px 10px 6px; background: var(--x-panel); color: var(--x-ink-3); font-size: 12px; font-weight: 600; }

/* rows */
.xp-row { position: relative; width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding-block: 8px; padding-inline: 10px 8px; border: 0; border-radius: 10px;
  background: none; color: inherit; text-align: start; }
.xp-row:hover, .xp-row:focus-within { background: var(--x-hover); }
.xp-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.xp-row-t > b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-row-t > b small { margin: 0 6px; font-size: 12px; font-weight: 500; color: var(--x-ink-3); }
.xp-row-s { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--x-ink-2); white-space: nowrap; overflow: hidden; }
.xp-row-s > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xp-row-s > .xp-num { flex: none; }
.xp-row-s > .xp-st { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-row-m { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--x-ink-3); font-variant-numeric: tabular-nums; }
.xp-len { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
.xp-row.missed .xp-row-t > b { color: var(--x-stop-ink); }
.xp-row.unread .xp-row-t > b { font-weight: 700; }
.xp-row.unread .xp-row-s { color: var(--x-ink); }
.xp-dir { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--x-fill); color: var(--x-ink-2); }
.xp-dir.missed { background: var(--x-stop-tint); color: var(--x-stop-ink); }
.xp-more { flex: none; color: var(--x-ink-3); }
/* more for the row (chat, video, save, edit): on hover or keyboard focus, before the time; always on touch screens */
.xp-row-a { flex: none; display: none; gap: 2px; margin-inline: -4px; }
.xp-row:hover .xp-row-a, .xp-row:focus-within .xp-row-a { display: flex; }
@media (hover: none) { .xp-row-a { display: flex; } }
.xp-ibtn { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--x-ink-2); cursor: pointer; transition: background .12s, color .12s; }
.xp-ibtn:hover { background: var(--x-fill-h); color: var(--x-ink); }
.xp-ibtn .i { width: 17px; height: 17px; }
.xp-ibtn.spin .i { animation: xpSpin .8s linear infinite; }
.xp-ibtn.red { color: var(--x-stop-ink); }
.xp-ibtn.red:hover { background: var(--x-stop); color: #fff; }
[dir=rtl] .xp-flip .i { transform: scaleX(-1); }
.xp-callbtn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid var(--x-rule); border-radius: 50%; background: var(--x-panel); color: var(--x-go-ink);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .1s; }
.xp-callbtn:hover { background: var(--x-go); border-color: var(--x-go); color: #fff; }
.xp-callbtn:active { transform: scale(.94); }
.xp-callbtn .i { width: 16px; height: 16px; }

/* how a call went (recent calls) */
.xp-st { flex: none; font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 18px; }
.xp-st.ok { color: var(--x-go-ink); }
.xp-st.warn, .xp-st.bad { padding: 0 6px; border-radius: 5px; }
.xp-st.warn { background: var(--x-warn-tint); color: var(--x-warn-ink); }
.xp-st.bad { background: var(--x-stop-tint); color: var(--x-stop-ink); }
/* a recorded call the person may play */
.xp-st.rec { width: 22px; height: 20px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: var(--x-accent-tint); color: var(--x-accent-ink);
  cursor: pointer; position: relative; z-index: 1; }
.xp-st.rec .i { width: 9px; height: 9px; fill: currentColor; stroke: none; }
.xp-st.rec:hover { background: var(--x-accent); color: #fff; }

/* people */
.xp-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--av-bg, #e9edf2); color: var(--av-ink, #3c4756);
  font-size: 13px; font-weight: 650; letter-spacing: .2px; }
.xp-av.xs { width: 20px; height: 20px; font-size: 9px; }
.xp-av.sm { width: 32px; height: 32px; font-size: 12px; }
.xp-av.lg { width: 56px; height: 56px; font-size: 19px; }
[data-c="0"] { --av-bg: #e3ebf6; --av-ink: #23466f; } [data-c="1"] { --av-bg: #e2f1e8; --av-ink: #1f6343; }
[data-c="2"] { --av-bg: #f7ebdc; --av-ink: #8a4b17; } [data-c="3"] { --av-bg: #ece7f7; --av-ink: #4f3a86; }
[data-c="4"] { --av-bg: #e1f0f2; --av-ink: #1d5e68; } [data-c="5"] { --av-bg: #f6e5e8; --av-ink: #8b2f3c; }
[data-c="6"] { --av-bg: #e9edf2; --av-ink: #3c4756; } [data-c="7"] { --av-bg: #f1eedb; --av-ink: #6b5716; }
:root[data-theme="dark"] [data-c="0"] { --av-bg: #1d3352; --av-ink: #a9c6ec; } :root[data-theme="dark"] [data-c="1"] { --av-bg: #173a2b; --av-ink: #93d7b1; }
:root[data-theme="dark"] [data-c="2"] { --av-bg: #3d2c17; --av-ink: #f0c38c; } :root[data-theme="dark"] [data-c="3"] { --av-bg: #2d2549; --av-ink: #c3b5ef; }
:root[data-theme="dark"] [data-c="4"] { --av-bg: #15363b; --av-ink: #8fd3dc; } :root[data-theme="dark"] [data-c="5"] { --av-bg: #3e1f27; --av-ink: #f1a9b4; }
:root[data-theme="dark"] [data-c="6"] { --av-bg: #26303d; --av-ink: #c1cad6; } :root[data-theme="dark"] [data-c="7"] { --av-bg: #353216; --av-ink: #dccf8a; }
.xp-av-wrap { position: relative; display: inline-flex; flex: none; }
.xp-av-wrap .xp-dot { position: absolute; inset-inline-end: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid var(--x-panel); }
.xp-row:hover .xp-av-wrap .xp-dot, .xp-row:focus-within .xp-av-wrap .xp-dot, .xp-conv.on .xp-av-wrap .xp-dot { border-color: var(--x-hover); }
.xp-dot { width: 8px; height: 8px; flex: none; display: inline-block; border-radius: 50%; background: #98a4b5; }
.xp-dot.on { background: #1f9d55; }
.xp-dot.busy, .xp-dot.held, .xp-dot.connecting { background: var(--x-warn); }
.xp-dot.dnd, .xp-dot.failed { background: var(--x-stop); }
.xp-dot.connecting { animation: xpBlink 1.1s ease-in-out infinite; }
.xp-pres.on { color: var(--x-go-ink); } .xp-pres.busy { color: var(--x-warn-ink); } .xp-pres.dnd { color: var(--x-stop-ink); }
@keyframes xpBlink { 50% { opacity: .3; } }
@keyframes xpBreath { 50% { opacity: .55; } }

.xp-empty { padding: 48px 24px; text-align: center; color: var(--x-ink-3); font-size: 13px; }
.xp-empty p { margin: 12px auto 0; max-width: 250px; line-height: 1.5; }
.xp-empty-i { width: 44px; height: 44px; margin: 0 auto; border-radius: 12px; display: grid; place-items: center; background: var(--x-fill); color: var(--x-ink-3); }
.xp-spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--x-rule); border-top-color: var(--x-accent); animation: xpSpin .8s linear infinite; }
@keyframes xpSpin { to { transform: rotate(360deg); } }

/* the person (settings) */
.xp-plist { padding: 20px; }
.xp-me-big { display: flex; align-items: center; gap: 14px; }
.xp-me-big b { display: block; font-size: 16px; font-weight: 650; }
.xp-me-big .grow > span { display: block; margin-top: 2px; font-size: 13px; color: var(--x-ink-2); }
.xp-me-big .xp-av-wrap .xp-dot { width: 14px; height: 14px; }
.xp-kv { margin: 20px 0 0; border-top: 1px solid var(--x-rule); }
.xp-kv dt { margin: 0; padding: 10px 0 2px; color: var(--x-ink-3); font-size: 12px; }
.xp-kv dd { margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--x-rule-2); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }

/* Google contacts */
.xp-glink { display: flex; align-items: center; gap: 12px; margin: 6px 4px 10px; padding: 12px; border: 1px dashed var(--x-rule); border-radius: 12px; }
.xp-glink b { display: block; font-size: 13.5px; } .xp-glink span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--x-ink-3); }
.xp-g { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--x-rule); border-radius: 9px; background: #fff; }
.xp-g svg { width: 20px; height: 20px; }
.xp-g.sm { width: 24px; height: 24px; border-radius: 7px; } .xp-g.sm svg { width: 14px; height: 14px; }
.xp-gacc { display: flex; align-items: center; gap: 4px; margin: 6px 4px 4px; padding-block: 4px; padding-inline: 8px 4px; border-radius: 10px; background: var(--x-fill); font-size: 12.5px; color: var(--x-ink-2); }
.xp-gacc .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline-start: 4px; }
.xp-gacc .xp-ibtn { width: 30px; height: 30px; }
.xp-tag { margin-inline-start: 6px; padding: 1px 6px; border-radius: 5px; background: var(--x-warn-tint); color: var(--x-warn-ink); font-style: normal; font-size: 10.5px; font-weight: 600; vertical-align: 1px; }
.xp-crow { cursor: pointer; }
.xp-crow.open { background: var(--x-hover); border-radius: 10px 10px 0 0; }
.xp-cnums { display: grid; gap: 4px; margin: 0 0 8px; padding-block: 2px 10px; padding-inline: 56px 8px; background: var(--x-hover); border-radius: 0 0 10px 10px; }
.xp-cnums .faint { margin: 4px 2px 0; font-size: 12px; }
.xp-cnum { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--x-rule); border-radius: 9px; background: var(--x-panel); color: var(--x-ink);
  cursor: pointer; text-align: start; }
.xp-cnum:hover { border-color: var(--x-go); color: var(--x-go-ink); }
.xp-cnum small { display: block; font-size: 11px; color: var(--x-ink-3); }
.xp-cnum b { font-size: 13px; font-variant-numeric: tabular-nums; }
/* new or changed Google contact (a window of the page) */
.xp-cf { display: grid; gap: 2px; min-width: min(420px, 80vw); }
.xp-cf-phones { display: grid; gap: 8px; justify-items: start; }
.xp-cf-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; width: 100%; align-items: center; }

/* ------------------------------------------------------------------ main: status bar and stage */
.xp-main { grid-row: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.xp-top { height: 56px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 24px; border-bottom: 1px solid var(--x-rule); background: var(--x-panel); }
.xp-status { min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--x-ink); }
.xp-status > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-status.connecting { color: var(--x-warn-ink); }
.xp-status.failed, .xp-status.dnd { color: var(--x-stop-ink); }
.xp-status.off { color: var(--x-ink-2); }
.xp-ident { padding-inline-start: 14px; border-inline-start: 1px solid var(--x-rule); color: var(--x-ink-3); font-size: 13px; white-space: nowrap; }
.xp-link { padding: 0; border: 0; background: none; color: var(--x-accent-ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.xp-switch { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; color: var(--x-ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; user-select: none; }
.xp-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.xp-track { position: relative; width: 38px; height: 22px; flex: none; border-radius: 11px; background: #c3ccd8; transition: background .2s; }
:root[data-theme="dark"] .xp-track { background: #3a4a62; }
.xp-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0b183040; transition: transform .22s var(--x-ease); }
.xp-switch input:checked + .xp-track { background: var(--x-accent); }
.xp-switch.dnd input:checked + .xp-track { background: var(--x-stop); }
.xp-switch input:checked + .xp-track::after { transform: translateX(16px); }
[dir=rtl] .xp-switch input:checked + .xp-track::after { transform: translateX(-16px); }
.xp-switch input:focus-visible + .xp-track { outline: 2px solid var(--x-accent); outline-offset: 2px; }
.xp-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; view-transition-name: xp-stage; }
.xp-center { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 16px; padding: 24px 20px 32px; }

/* buttons */
.xp-btn, .xp-cf .xp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--x-rule); border-radius: 10px;
  background: var(--x-panel); color: var(--x-ink); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .08s; }
.xp-btn:hover:not(:disabled) { background: var(--x-hover); text-decoration: none; }
.xp-btn:active:not(:disabled) { transform: translateY(1px); }
.xp-btn:disabled { opacity: .5; cursor: not-allowed; }
.xp-btn.primary { background: var(--x-accent); border-color: var(--x-accent); color: #fff; }
.xp-btn.primary:hover:not(:disabled) { background: var(--x-accent-h); border-color: var(--x-accent-h); }
.xp-btn.go { background: var(--x-go); border-color: var(--x-go); color: #fff; }
.xp-btn.go:hover:not(:disabled) { background: var(--x-go-h); border-color: var(--x-go-h); }
.xp-btn.stop { background: var(--x-stop); border-color: var(--x-stop); color: #fff; }
.xp-btn.stop:hover:not(:disabled) { background: var(--x-stop-h); border-color: var(--x-stop-h); }
.xp-btn.ghost { background: none; border-color: transparent; color: var(--x-ink-2); }
.xp-btn.ghost:hover:not(:disabled) { background: var(--x-hover); color: var(--x-ink); }
.xp-btn.sm { height: 30px; padding: 0 10px; gap: 6px; border-radius: 8px; font-size: 12.5px; }
.xp-btn.lg { height: 50px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.xp-btn.icon { width: 36px; padding: 0; } .xp-btn.sm.icon { width: 30px; } .xp-btn.lg.icon { width: 50px; }
.xp-btn.lg .i { width: 20px; height: 20px; }
.xp-btn .spin { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: xpSpin .7s linear infinite; }

/* notes over the keypad */
.xp-notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--x-accent-tint); color: var(--x-ink); font-size: 12.5px; line-height: 1.45; }
.xp-notice > .i { margin-top: 1px; color: var(--x-accent-ink); }
.xp-notice.bad { background: var(--x-stop-tint); }
.xp-notice.bad > .i { color: var(--x-stop-ink); }
.xp-notice-sub { display: block; margin-top: 4px; font-size: 11.5px; opacity: .85; }
.xp-notice-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xp-list .xp-notice { margin: 0 4px 8px; }
.xp-hint { width: min(560px, 100%); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--x-rule); border-radius: 12px; background: var(--x-panel); }
.xp-hint-i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--x-warn-tint); color: var(--x-warn-ink); }
.xp-hint b { display: block; font-size: 13.5px; } .xp-hint .grow > span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--x-ink-2); }
.xp-hint-a { flex: none; display: flex; gap: 6px; }

/* the keypad panel; it turns into the call panel when a call starts */
.xp-panel { position: relative; width: min(372px, 100%); border: 1px solid var(--x-rule); border-radius: 16px; background: var(--x-panel); view-transition-name: xp-panel; }
.xp-dial { padding: 20px 28px 28px; }
.xp-numrow { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--x-rule); transition: border-color .15s; }
.xp-numrow:focus-within { border-bottom-color: var(--x-accent); }
.xp-numsp { width: 36px; flex: none; }
.xp-number { flex: 1; min-width: 0; height: 58px; border: 0; outline: 0; background: none; color: var(--x-ink); text-align: center; font-size: 30px; font-weight: 300; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; }
.xp-number:focus-visible { outline: 0; }
.xp-number::placeholder { color: var(--x-ink-3); font-size: 17px; font-weight: 400; letter-spacing: 0; }
.xp-bk { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--x-ink-3); cursor: pointer; }
.xp-bk:hover { background: var(--x-hover); color: var(--x-ink); }
.xp-numrow:has(.xp-number:placeholder-shown) .xp-bk { visibility: hidden; }
.xp-match { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0 10px; font-size: 13px; font-weight: 600; color: var(--x-ink); text-align: center; }
.xp-match .faint { font-weight: 500; }
.xp-match .i { color: var(--x-ink-3); }
.xp-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; direction: ltr; }
.xp-key { height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 12px; background: var(--x-fill); color: var(--x-ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, transform .08s; }
.xp-key:hover { background: var(--x-fill-h); }
.xp-key:active { background: var(--x-accent-tint); transform: scale(.97); }
.xp-key b { font-size: 23px; font-weight: 450; line-height: 1; font-variant-numeric: tabular-nums; }
.xp-key small { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; line-height: 1; color: var(--x-ink-3); }
.xp-pad.small { width: min(300px, 100%); gap: 8px; margin: 18px auto 0; }
.xp-pad.small .xp-key { height: 46px; }
.xp-pad.small .xp-key b { font-size: 19px; }
.xp-go { display: flex; gap: 10px; margin-top: 20px; }
.xp-callgo { flex: 1; }
.xp-vidgo { color: var(--x-accent-ink); }

/* the line along the top of a call: light running along it while it rings, steady green light while it is live */
.xp-signal { position: absolute; inset: 0 0 auto 0; height: 3px; overflow: hidden; background: var(--sig-base, var(--x-rule)); pointer-events: none; }
.xp-signal::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, var(--sig, var(--x-accent)), transparent);
  transform: translateX(-100%); animation: xpSignal 2.4s cubic-bezier(.45, 0, .2, 1) infinite; }
.xp-signal.is-ring { --sig-base: var(--x-accent-tint); --sig: var(--x-accent); }
.xp-signal.is-ring::after { animation-duration: 1.5s; }
.xp-signal.is-live { --sig-base: var(--x-go-line); --sig: var(--x-go-light); }
.xp-signal.is-held { --sig-base: var(--x-warn); }
.xp-signal.is-held::after { display: none; }
[dir=rtl] .xp-signal { transform: scaleX(-1); }
@keyframes xpSignal { to { transform: translateX(300%); } }

/* in a call */
.xp-call { width: min(400px, 100%); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 34px 28px 26px; text-align: center; }
.xp-chero { width: 100%; display: flex; flex-direction: column; align-items: center; }
.xp-callav { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--av-bg, #e9edf2); color: var(--av-ink, #3c4756); font-size: 26px; font-weight: 600; }
.xp-callav .i { width: 30px; height: 30px; }
.xp-callav.is-ring { animation: xpCallPulse 1.8s ease-out infinite; }
@keyframes xpCallPulse { 0% { box-shadow: 0 0 0 0 var(--x-ring); } 100% { box-shadow: 0 0 0 16px transparent; } }
.xp-call h2, .xp-ring h2 { max-width: 100%; margin: 16px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; font-weight: 650; letter-spacing: -.2px; }
.xp-callnum { margin: 4px 0 0; color: var(--x-ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.xp-callstate { height: 28px; margin: 14px 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; background: var(--x-fill); color: var(--x-ink-2); font-size: 13px; font-weight: 600; }
.xp-callstate.is-live { background: var(--x-go-tint); color: var(--x-go-ink); }
.xp-callstate.is-held { background: var(--x-warn-tint); color: var(--x-warn-ink); }
.xp-callstate .xp-timer { font-size: 14px; }
.xp-timer { font-variant-numeric: tabular-nums; font-weight: 650; }
.xp-ctrls { display: grid; grid-template-columns: repeat(3, 84px); justify-content: center; gap: 16px 18px; margin: 26px 0 24px; }
.xp-ctrls:has(> :nth-child(7)) { grid-template-columns: repeat(4, 72px); column-gap: 12px; }
.xp-ctrl { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--x-ink-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.xp-ctrl-i { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--x-fill); color: var(--x-ink); transition: background .12s, color .12s, transform .08s; }
.xp-ctrl:hover:not(:disabled) .xp-ctrl-i { background: var(--x-fill-h); }
.xp-ctrl:active:not(:disabled) .xp-ctrl-i { transform: scale(.96); }
.xp-ctrl.on { color: var(--x-ink); }
.xp-ctrl.on .xp-ctrl-i, .xp-ctrl.on:hover:not(:disabled) .xp-ctrl-i { background: var(--x-on); color: var(--x-on-ink); }
.xp-ctrl:disabled { opacity: .45; cursor: not-allowed; }
.xp-ctrl small { max-width: 84px; font-size: 12px; line-height: 1.2; text-align: center; }
.xp-ctrl:focus-visible { outline: 0; }
.xp-ctrl:focus-visible .xp-ctrl-i { outline: 2px solid var(--x-accent); outline-offset: 2px; }
.xp-hang { width: min(260px, 100%); }
/* transferring, or a second call: a small header so the list fits */
.xp-call.compact { padding-top: 22px; align-items: stretch; text-align: start; }
.xp-chead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.xp-chead .xp-callav { width: 44px; height: 44px; font-size: 16px; animation: none; }
.xp-chead .xp-callav .i { width: 20px; height: 20px; }
.xp-chead h2 { margin: 0; font-size: 16px; }
.xp-chead p { margin: 2px 0 0; display: flex; gap: 8px; font-size: 12.5px; color: var(--x-ink-3); }
.xp-chead .xp-timer { font-size: 15px; }
.xp-call.compact .xp-hang { align-self: center; }

/* a call on another page: one line at the top */
.xp-callbar { position: relative; flex: none; height: 48px; display: flex; align-items: center; gap: 10px; padding-inline: 16px 12px; border-bottom: 1px solid var(--x-rule); background: var(--x-go-tint);
  color: var(--x-go-ink); cursor: pointer; overflow: hidden; }
.xp-callbar .xp-signal { top: auto; bottom: 0; }
.xp-callbar.is-ring { background: var(--x-accent-tint); color: var(--x-accent-ink); }
.xp-callbar.is-held { background: var(--x-warn-tint); color: var(--x-warn-ink); }
.xp-cb-i { display: grid; place-items: center; }
.xp-cb-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--x-ink); font-weight: 650; }
.xp-cb-st { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.xp-callbar .xp-timer { margin-inline-start: auto; color: var(--x-ink); }
.xp-callbar:hover { filter: brightness(.98); }
.xp-side .xp-callbar { display: none; }

/* an incoming call */
.xp-overlay { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 16px; background: var(--x-dim); }
.xp-overlay.on { display: grid; animation: xpFade .18s ease-out; }
.xp-ring { position: relative; width: min(380px, 100%); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 32px 24px 18px; border-radius: 18px;
  background: var(--x-panel); color: var(--x-ink); box-shadow: var(--x-pop); text-align: center; animation: xpRise .34s var(--x-ease); }
.xp-ring-l { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 24px; font-size: 13px; font-weight: 600; color: var(--x-accent-ink); }
.xp-ring-av { position: relative; display: grid; place-items: center; }
.xp-ring-av > i { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--x-accent); opacity: 0; animation: xpRipple 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.xp-ring-av > i:nth-child(2) { animation-delay: 1.2s; }
.xp-ring-av.quiet > i { animation: none; }
.xp-ring-av .xp-callav { animation: none; width: 80px; height: 80px; }
@keyframes xpRipple { 0% { transform: scale(.96); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
.xp-ring-btns { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 26px; }
.xp-ring-btns .xp-btn { padding: 0 12px; }
.xp-silence { margin-top: 10px; }
.xp-silence.on { color: var(--x-warn-ink); }
@keyframes xpFade { from { opacity: 0; } }
@keyframes xpRise { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* chat */
.xp-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--x-paper); }
.xp-chat-h { height: 64px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--x-rule); background: var(--x-panel); }
.xp-chat-h b { display: block; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-chat-h .xp-row-s { margin-top: 2px; }
.xp-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 18px 24px 20px; }
.xp-msg { max-width: min(560px, 76%); align-self: flex-start; padding: 8px 12px 6px; border: 1px solid var(--x-rule); border-radius: 14px 14px 14px 4px; background: var(--x-panel); color: var(--x-ink); }
.xp-msg.mine { align-self: flex-end; border-color: var(--x-accent); border-radius: 14px 14px 4px 14px; background: var(--x-accent); color: #fff; }
[dir=rtl] .xp-msg { border-radius: 14px 14px 4px 14px; } [dir=rtl] .xp-msg.mine { border-radius: 14px 14px 14px 4px; }
.xp-msg.cont { margin-top: -3px; }
.xp-msg.new { animation: xpMsgIn .26s var(--x-ease); }
@keyframes xpMsgIn { from { opacity: 0; transform: translateY(8px); } }
.xp-msg p { margin: 0; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.xp-msg small { display: block; margin-top: 2px; text-align: end; font-size: 10.5px; opacity: .72; font-variant-numeric: tabular-nums; }
.xp-tick { margin-inline-start: 4px; font-style: normal; }
.xp-tick.read { color: #a8d1ff; }
.xp-day { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; color: var(--x-ink-3); font-size: 12px; font-weight: 600; }
.xp-day::before, .xp-day::after { content: ""; flex: 1; height: 1px; background: var(--x-rule); }
.xp-compose { flex: none; display: flex; align-items: flex-end; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--x-rule); background: var(--x-panel); }
.xp-compose-in { flex: 1; min-height: 42px; max-height: 140px; resize: none; padding: 10px 14px; border: 1px solid var(--x-rule); border-radius: 12px; outline: 0; background: var(--x-fill); color: var(--x-ink);
  line-height: 1.4; transition: background .15s, border-color .15s, box-shadow .15s; }
.xp-compose-in:focus { background: var(--x-panel); border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-ring); }
.xp-send { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--x-accent); color: #fff; cursor: pointer; transition: background .12s; }
.xp-send:hover { background: var(--x-accent-h); }
[dir=rtl] .xp-send .i { transform: scaleX(-1); }
.xp-blank { max-width: 360px; text-align: center; color: var(--x-ink-2); }
.xp-blank-i { width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--x-accent-tint); color: var(--x-accent-ink); }
.xp-blank-i .i { width: 26px; height: 26px; }
.xp-blank h2 { margin: 16px 0 6px; color: var(--x-ink); font-size: 17px; font-weight: 650; }
.xp-blank p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.xp-conv { cursor: pointer; }
.xp-conv.on { background: var(--x-hover); }
.xp-conv .xp-row-m .xp-badge { margin-top: 1px; }

/* settings: groups of rows */
.xp-settings { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 32px 40px; }
.xp-settings > * { max-width: 680px; margin-inline: auto; }
.xp-sgroup { margin-bottom: 16px; border: 1px solid var(--x-rule); border-radius: 14px; background: var(--x-panel); }
.xp-srow { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.xp-srow + .xp-srow { border-top: 1px solid var(--x-rule-2); }
.xp-srow-i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--x-fill); color: var(--x-ink-2); }
.xp-srow.dnd .xp-srow-i { background: var(--x-stop-tint); color: var(--x-stop-ink); }
.xp-srow-t { flex: 1; min-width: 0; }
.xp-srow-t > b { display: block; margin-top: 1px; font-size: 14px; font-weight: 600; }
.xp-srow-t > p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--x-ink-2); }
.xp-srow > .xp-switch, .xp-srow > .xp-sel, .xp-srow > .xp-seg2 { flex: none; margin-top: 4px; }
.xp-srow-x { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.xp-form { display: grid; gap: 12px; max-width: 400px; margin-top: 14px; }
.xp-form .strength { margin-top: 6px; }
.xp-form .f > label { color: var(--x-ink); }
.xp .inp { background: var(--x-panel); border-color: var(--x-rule); color: var(--x-ink); }
.xp .inp:focus { border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-ring); }
.xp-sel { height: 34px; max-width: 220px; padding: 0 10px; border: 1px solid var(--x-rule); border-radius: 9px; background: var(--x-panel); color: var(--x-ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.xp-sel:focus { outline: 0; border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-ring); }
.xp-seg2 { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--x-fill); }
.xp-seg2 button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--x-ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.xp-seg2 button:hover { color: var(--x-ink); }
.xp-seg2 button.on { background: var(--x-thumb); color: var(--x-ink); box-shadow: var(--x-thumb-sh); }
.xp-me-m { margin-bottom: 18px; padding: 18px; border: 1px solid var(--x-rule); border-radius: 14px; background: var(--x-panel); }
.xp-me-m .xp-kv { margin-top: 16px; }
.xp-out-m { margin-top: 8px; }
.xp-out-m .xp-btn { width: 100%; height: 44px; color: var(--x-stop-ink); }

/* ------------------------------------------------------------------ transfer, a second call, 3-way */
.xp-xfer { width: 100%; margin: 0 0 18px; text-align: start; }
.xp-xfer-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.xp-xfer-h b { font-size: 15px; font-weight: 650; }
.xp-xfer-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xp-xfer-mode { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--x-rule); border-radius: 12px; background: var(--x-panel); color: var(--x-ink); cursor: pointer; text-align: start;
  transition: border-color .15s, background .15s; }
.xp-xfer-mode:hover { border-color: var(--x-ink-3); }
.xp-xfer-mode.on { border-color: var(--x-accent); background: var(--x-accent-tint); box-shadow: 0 0 0 1px var(--x-accent) inset; }
.xp-xfer-mi { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--x-fill); color: var(--x-ink-2); }
.xp-xfer-mode.on .xp-xfer-mi { background: var(--x-accent); color: #fff; }
.xp-xfer-mode b { display: block; font-size: 13px; } .xp-xfer-mode small { display: block; font-size: 11.5px; color: var(--x-ink-3); }
.xp-xfer-tabs { display: flex; margin: 12px 0 0; }
.xp-xfer-tabs button { flex: 1; }
.xp-xfer .xp-search { margin: 8px 0 6px; }
.xp-xfer-list { max-height: 220px; overflow-y: auto; display: grid; gap: 2px; }
.xp-xfer-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: none; color: var(--x-ink); cursor: pointer; text-align: start; }
.xp-xfer-row:hover, .xp-xfer-row:focus-visible { background: var(--x-hover); }
.xp-xfer-row b { display: block; font-size: 13.5px; font-weight: 600; }
.xp-xfer-row small { display: flex; gap: 8px; font-size: 12px; color: var(--x-ink-3); }
.xp-xfer-row .xp-av-wrap .xp-dot { width: 11px; height: 11px; }
.xp-xfer-go { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--x-accent-ink); opacity: 0; transition: opacity .12s, background .12s; }
.xp-xfer-row:hover .xp-xfer-go, .xp-xfer-row:focus-visible .xp-xfer-go, .xp-xfer-row.typed .xp-xfer-go { opacity: 1; background: var(--x-accent); color: #fff; }
.xp-xfer-row.typed { margin-bottom: 4px; background: var(--x-accent-tint); }
.xp-xfer-num { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--x-accent); color: #fff; }
.xp-xfer-none { margin: 14px 0; text-align: center; color: var(--x-ink-3); font-size: 12.5px; }
.xp-xfer-note { margin: 0 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--x-ink-2); }
.xp-consult { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; text-align: start; }
.xp-clabel { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--x-accent-ink); font-size: 13px; font-weight: 600; }
.xp-cline { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--x-rule); border-radius: 12px; background: var(--x-panel); opacity: .72; transition: opacity .2s; }
.xp-cline.on { opacity: 1; border-color: var(--x-go); box-shadow: 0 0 0 1px var(--x-go) inset; }
.xp-cline b { display: block; font-size: 14px; } .xp-cline small { display: block; font-size: 12px; color: var(--x-ink-3); }
.xp-ctimer { font-size: 14px; font-variant-numeric: tabular-nums; }
.xp-cline-arrow { align-self: center; height: 18px; color: var(--x-ink-3); transform: rotate(90deg); }
.xp-consult-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 4px; }
.xp-conf .xp-ctrls { grid-template-columns: 84px; margin: 14px auto 10px; }
.xp-conf > .xp-hang { align-self: center; }

/* ------------------------------------------------------------------ video calls */
.xp-vstage { position: relative; flex: 1; min-height: 320px; margin: 16px; overflow: hidden; border-radius: 16px; background: #0b1626; color: #fff; }
.xp-vstage:fullscreen, .xp-vstage:-webkit-full-screen { width: 100vw; height: 100vh; margin: 0; border-radius: 0; }
.xp-vremote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.xp-vstage.noremote .xp-vremote { opacity: 0; }
.xp-vph { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.xp-vstage.noremote .xp-vph { display: flex; }
.xp-vph p { margin: 0; font-size: 13.5px; color: #c9d5e8; }
.xp-vlocal { position: absolute; right: 18px; bottom: 92px; width: min(26%, 260px); aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid #ffffff40; border-radius: 12px; background: #13233d;
  box-shadow: 0 10px 24px #0007; transform: scaleX(-1); }
.xp-vlocal.screen { transform: none; object-fit: contain; }
.xp-vstage.noself .xp-vlocal { display: none; }
[dir=rtl] .xp-vlocal { right: auto; left: 18px; }
.xp-vtop { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 40px; background: linear-gradient(#000a, #0000); }
.xp-vwho { flex: 1; min-width: 0; } .xp-vwho b { display: block; font-size: 17px; } .xp-vwho span { font-size: 12.5px; color: #c9d5e8; }
.xp-vtime { padding: 4px 12px; border-radius: 999px; background: #ffffff1f; color: #fff; font-size: 14px; }
.xp-vtime .xp-timer { color: #fff; font-size: 14px; }
.xp-vtag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--x-signal); color: #fff; font-size: 12px; font-weight: 600; }
.xp-vbar { position: absolute; left: 50%; bottom: 16px; max-width: calc(100% - 24px); display: flex; gap: 10px; padding: 10px 12px; overflow-x: auto; border-radius: 999px; background: #0b1830e0;
  box-shadow: 0 10px 28px #0006; transform: translateX(-50%); }
.xp-vbtn { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: #ffffff1f; color: #fff; cursor: pointer; transition: background .15s; }
.xp-vbtn .i { width: 20px; height: 20px; }
.xp-vbtn:hover:not(:disabled) { background: #ffffff38; }
.xp-vbtn.on { background: #fff; color: #14243b; }
.xp-vbtn.off { color: #fca5a5; }
.xp-vbtn.red { width: 58px; border-radius: 999px; background: var(--x-stop); }
.xp-vbtn.red:hover { background: var(--x-stop-h); }
.xp-vbtn:disabled { opacity: .4; cursor: not-allowed; }
.xp-vpad { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); }
.xp-vpad .xp-pad { width: 240px; margin: 0; padding: 12px; border-radius: 18px; background: #0b1830e0; }
.xp-vpad .xp-key { background: #ffffff1f; color: #fff; }
.xp-vpad .xp-key:hover { background: #ffffff33; }
.xp-camtest { width: min(520px, 80vw); aspect-ratio: 16 / 10; border-radius: 12px; background: #000; object-fit: cover; transform: scaleX(-1); }

/* ------------------------------------------------------------------ listening to a recorded call
   (callplayer.js: the same window in the extension portal and in Call detail records) */
.xp-plo { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: var(--x-dim); animation: xpFade .18s; }
.xp-pl { width: min(440px, 100%); display: grid; gap: 18px; padding: 20px 22px 22px; border-radius: 18px; background: var(--x-panel); color: var(--x-ink); box-shadow: var(--x-pop); animation: xpRise .28s var(--x-ease); }
.xp-pl.wide { width: min(560px, 100%); }
.xp-pl-h { min-width: 0; display: flex; align-items: center; gap: 12px; }
.xp-pl-h .xp-av { width: 44px; height: 44px; font-size: 15px; }
.xp-pl-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.xp-pl-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 650; }
.xp-pl-t b small { margin: 0 6px; color: var(--x-ink-3); font-size: 12.5px; font-weight: 500; unicode-bidi: isolate; }
.xp-pl-when { display: flex; gap: 10px; font-size: 12.5px; color: var(--x-ink-2); white-space: nowrap; overflow: hidden; }
.xp-pl-when > span + span { padding-inline-start: 10px; border-inline-start: 1px solid var(--x-rule); }
.xp-pl-x { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 9px; background: var(--x-fill); color: var(--x-ink-2); cursor: pointer; }
.xp-pl-x:hover { background: var(--x-fill-h); color: var(--x-ink); }
.xp-pl-bar { display: grid; gap: 6px; }
.xp-pl-seek { width: 100%; height: 4px; margin: 8px 0; border-radius: 999px; outline: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--x-accent) var(--p, 0%), var(--x-rule) var(--p, 0%)); }
[dir=rtl] .xp-pl-seek { direction: ltr; }
.xp-pl-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--x-accent); border: 2px solid var(--x-panel); box-shadow: 0 0 0 1px var(--x-accent); }
.xp-pl-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--x-accent); border: 2px solid var(--x-panel); }
.xp-pl-seek::-moz-range-track { background: transparent; }
.xp-pl-seek:focus-visible { box-shadow: 0 0 0 3px var(--x-ring); }
.xp-pl-time { display: flex; justify-content: space-between; font-size: 12px; color: var(--x-ink-3); font-variant-numeric: tabular-nums; }
.xp-pl-ctl { display: flex; align-items: center; justify-content: center; gap: 28px; }
.xp-pl-skip { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--x-ink); cursor: pointer; transition: background .12s; }
.xp-pl-skip:hover { background: var(--x-hover); }
.xp-pl-skip .i { width: 26px; height: 26px; }
.xp-pl-skip small { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 1px; font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xp-pl-play { width: 60px; height: 60px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--x-accent); color: #fff; cursor: pointer; transition: background .12s, transform .08s; }
.xp-pl-play:hover { background: var(--x-accent-h); }
.xp-pl-play:active { transform: scale(.96); }
.xp-pl-play .i { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.xp-pl-play:disabled { opacity: .5; cursor: default; }
.xp-pl-speed { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.xp-pl-speed > span { margin-inline-end: 6px; font-size: 12px; color: var(--x-ink-3); }
.xp-pl-speed button { min-width: 46px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--x-ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums; }
.xp-pl-speed button:hover { background: var(--x-hover); }
.xp-pl-speed button.on { background: var(--x-accent-tint); color: var(--x-accent-ink); }
.xp-pl-msg { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--x-ink-2); }
.xp-pl-msg[hidden] { display: none; }
.xp-pl-msg .xp-spin { width: 16px; height: 16px; }
.xp-pl-msg.bad { color: var(--x-stop-ink); }
.xp-pl-tr { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--x-rule); }
.xp-pl-tr[hidden] { display: none; }
.xp-pl-trh { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 650; color: var(--x-ink); }
.xp-pl-copy { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--x-ink-2); cursor: pointer; }
.xp-pl-copy:hover { background: var(--x-hover); color: var(--x-ink); }
.xp-pl-lines { max-height: min(36vh, 320px); overflow: auto; display: grid; gap: 2px; padding-inline-end: 2px; }
.xp-pl-line { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 8px; padding: 6px 8px; border: 0; border-radius: 9px; background: none; color: var(--x-ink); font: inherit; font-size: 13.5px;
  line-height: 1.45; text-align: start; cursor: pointer; }
.xp-pl-line:hover { background: var(--x-hover); }
.xp-pl-line.on { background: var(--x-accent-tint); }
.xp-pl-lt { padding-top: 2px; font-size: 11.5px; color: var(--x-ink-3); font-variant-numeric: tabular-nums; }
.xp-pl-lx b { display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: 700; color: var(--x-accent-ink); }
.xp-pl-line.me .xp-pl-lx b { color: var(--x-go-ink); }
.xp-pl-note { margin: 0; font-size: 13px; color: var(--x-ink-2); }
/* Call detail records: the kind of call as the picture, the download, and the company's call keywords */
.xp-pl-dir { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--x-fill); color: var(--x-ink-2); }
.xp-pl-dir.inbound { background: var(--x-accent-tint); color: var(--x-accent-ink); }
.xp-pl-dir.outbound { background: var(--x-go-tint); color: var(--x-go-ink); }
.xp-pl-dir .i { width: 20px; height: 20px; }
a.xp-pl-x { text-decoration: none; }
.xp-pl-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xp-pl-flags-l { display: inline-flex; align-items: center; gap: 5px; margin-inline-end: 4px; color: var(--x-warn-ink); font-size: 12.5px; font-weight: 650; }
.xp-pl-flags-l .i, .xp-pl-hit .i { width: 13px; height: 13px; }
.xp-pl-flag { display: inline-flex; align-items: baseline; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: var(--x-warn-tint); color: var(--x-ink);
  font: inherit; font-size: 13px; cursor: pointer; }
.xp-pl-flag:hover { border-color: var(--x-warn); }
.xp-pl-flag span, .xp-pl-flag small { color: var(--x-ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.xp-pl-line.flagged { background: var(--x-warn-tint); }
.xp-pl-line.flagged.on { background: var(--x-accent-tint); }
.xp-pl-hit { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; color: var(--x-warn-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
@media (max-width: 420px) { .xp-pl { padding: 16px; } .xp-pl-speed button { min-width: 0; padding: 0 8px; } }

/* ------------------------------------------------------------------ moving between pages (View Transitions) */
::view-transition-group(*) { animation-duration: .28s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
html[data-vt=nav]::view-transition-old(xp-stage), html[data-vt=nav]::view-transition-old(xp-side),
html[data-vt=back]::view-transition-old(xp-stage), html[data-vt=back]::view-transition-old(xp-side),
html[data-vt=chat]::view-transition-old(xp-stage) { animation: xpVtOut .12s ease-in both; }
html[data-vt=nav]::view-transition-new(xp-stage), html[data-vt=nav]::view-transition-new(xp-side) { animation: xpVtUp .3s var(--x-ease) both; }
html[data-vt=chat]::view-transition-new(xp-stage) { animation: xpVtFwd .3s var(--x-ease) both; }
html[data-vt=back]::view-transition-new(xp-stage), html[data-vt=back]::view-transition-new(xp-side) { animation: xpVtBack .3s var(--x-ease) both; }
html[dir=rtl][data-vt=chat]::view-transition-new(xp-stage) { animation-name: xpVtBack; }
html[dir=rtl][data-vt=back]::view-transition-new(xp-stage), html[dir=rtl][data-vt=back]::view-transition-new(xp-side) { animation-name: xpVtFwd; }
/* the keypad turns into the call (and back): the panel changes its size while its content fades over */
::view-transition-group(xp-panel) { overflow: clip; border-radius: 16px; animation-duration: .36s; }
::view-transition-old(xp-panel), ::view-transition-new(xp-panel) { width: 100%; height: 100%; object-fit: none; object-position: 50% 0; }
html[data-vt=call]::view-transition-old(xp-panel) { animation: xpVtOut .14s ease-in both; }
html[data-vt=call]::view-transition-new(xp-panel) { animation: xpVtIn .28s .08s var(--x-ease) both; }
::view-transition-group(xp-navmark) { animation-duration: .32s; }
/* light or dark: the old colours fade away over the new ones */
html[data-vt=theme]::view-transition-old(*) { animation: xpVtOut .34s ease both; }
html[data-vt=theme]::view-transition-new(*) { animation: none; }
@keyframes xpVtOut { to { opacity: 0; } }
@keyframes xpVtIn { from { opacity: 0; } }
@keyframes xpVtUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes xpVtFwd { from { opacity: 0; transform: translateX(18px); } }
@keyframes xpVtBack { from { opacity: 0; transform: translateX(-18px); } }

/* ------------------------------------------------------------------ the sign-in page */
.xl { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(400px, 1fr); background: var(--x-panel); color: var(--x-ink); }
.xl-art { position: relative; overflow: hidden; display: grid; place-items: center; background: #132c4a; }
:root[data-theme="dark"] .xl-art { background: #0c1d33; }
.xl-fiber { position: absolute; inset: 0; width: 100%; height: 100%; }
.xl-fiber .s { fill: none; stroke: #ffffff17; stroke-width: 1.2; }
.xl-fiber .p { fill: none; stroke: #f59a5c; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 60 940; stroke-dashoffset: 1000; animation: xlPulse 7s linear infinite;
  filter: drop-shadow(0 0 4px #f28a4acc); }
.xl-fiber .p2 { animation-duration: 9s; animation-delay: -3s; stroke: #9cc3ff; filter: drop-shadow(0 0 4px #9cc3ffaa); }
.xl-fiber .p3 { animation-duration: 8s; animation-delay: -5.5s; }
.xl-fiber .p4 { animation-duration: 10s; animation-delay: -1.5s; stroke: #9cc3ff; filter: drop-shadow(0 0 4px #9cc3ffaa); }
@keyframes xlPulse { to { stroke-dashoffset: 0; } }
.xl-mark { position: relative; width: 190px; height: auto; opacity: .97; }
.xl-copy { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .2px; color: #c9d5e8b3; }
.xl-copy-m { display: none; }
.xl-panel { position: relative; display: grid; place-items: center; padding: 40px 32px; background: var(--x-panel); }
.xl-panel .auth-lang { top: 18px; }
.xl-card { width: min(380px, 100%); animation: xpRise .45s var(--x-ease); }
.xl-logo { display: block; height: 56px; width: auto; margin: 0 auto 28px; }
.xl-card h1 { margin: 0 0 6px; text-align: center; font-size: 22px; font-weight: 650; letter-spacing: -.2px; color: var(--x-ink); }
.xl-card > p.muted { margin: 0 0 24px; text-align: center; font-size: 13.5px; color: var(--x-ink-2); }
.xl-form .f { margin-bottom: 14px; }
.xl-domain, .xl-pw { position: relative; display: flex; align-items: center; }
.xl-domain .inp { padding-inline-end: 140px; }
.xl-suffix { position: absolute; inset-inline-end: 12px; color: var(--x-ink-3); font-size: 13px; white-space: nowrap; pointer-events: none; }
.xl-pw .inp { padding-inline-end: 64px; }
.xl-show { position: absolute; inset-inline-end: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--x-accent-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.xl-show:hover { background: var(--x-accent-tint); }
.xl-remember { display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; color: var(--x-ink-2); font-size: 13px; cursor: pointer; }
.xl-remember input { width: 16px; height: 16px; accent-color: var(--x-accent); }
.btn.xl-go { width: 100%; height: 46px; border: 0; border-radius: 10px; background: var(--x-accent); color: #fff; font-size: 15px; font-weight: 650; box-shadow: none; }
.btn.xl-go:hover:not(:disabled) { background: var(--x-accent-h); color: #fff; box-shadow: none; }
.xl-admin { margin: 18px 0 0; text-align: center; font-size: 13px; }
.xl-admin a { color: var(--x-accent-ink); }
.xl-card .copy { margin-top: 26px; text-align: center; color: var(--x-ink-3); font-size: 12px; }
@media (max-width: 960px) { .xl { grid-template-columns: 1fr; } .xl-art { display: none; } .xl-copy-m { display: block; } }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1150px) { .xp { grid-template-columns: 76px 316px minmax(0, 1fr); } .xp-ident { display: none; } }
@media (max-width: 860px) {
  .xp { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .xp-rail { grid-row: 2; grid-column: 1; flex-direction: row; padding: 0 0 env(safe-area-inset-bottom); border-top: 1px solid #ffffff14; }
  .xp-brand, .xp-rail > .grow, .xp-me, .xp-out { display: none; }
  .xp-navs { flex-direction: row; padding: 0; }
  .xp-nav { flex: 1; padding: 8px 4px 7px; }
  .xp-nav-mark { top: 0; inset-inline-start: 50%; width: 32px; height: 3px; margin: 0 0 0 -16px; border-radius: 0 0 3px 3px; }
  [dir=rtl] .xp-nav-mark { margin: 0 -16px 0 0; border-radius: 0 0 3px 3px; }
  .xp-side, .xp-main { grid-row: 1; grid-column: 1; }
  .xp-side { border: 0; }
  .xp[data-pane=list] .xp-main, .xp[data-pane=stage] .xp-side { display: none; }
  .xp-side .xp-callbar { display: flex; }
  .xp-top { gap: 10px; padding-inline: 8px 12px; }
  .xp-ident { display: none; }
  .xp-center { padding: 12px 12px 20px; justify-content: flex-start; }
  .xp-dial { width: 100%; max-width: 420px; padding: 8px 4px 16px; border: 0; background: none; }
  .xp-dial .xp-key { height: 62px; background: var(--x-panel); box-shadow: 0 0 0 1px var(--x-rule-2) inset; }
  .xp-dial .xp-key:hover { background: var(--x-hover); }
  .xp-call { padding: 28px 16px 20px; }
  .xp-ctrls { grid-template-columns: repeat(3, 76px); gap: 14px 12px; }
  .xp-hint { flex-wrap: wrap; }
  .xp-hint-a { width: 100%; justify-content: flex-end; }
  .xp-settings { padding: 16px 12px 28px; }
  .xp-srow { padding: 14px; }
  .xp-chat-h { padding-inline: 8px 12px; }
  .xp-msgs { padding: 14px 12px; }
  .xp-msg { max-width: 86%; }
  .xp-compose { padding: 10px 12px 12px; }
  .xp-vstage { margin: 0; border-radius: 0; }
  .xp-vlocal { width: 34%; right: 10px; bottom: 128px; }
  .xp-vbar { width: calc(100% - 20px); bottom: 10px; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px; border-radius: 22px; overflow: visible; }
  .xp-vbtn { width: 42px; height: 42px; } .xp-vbtn.red { width: 52px; }
  .xp-vpad { bottom: 130px; }
  /* messages and the update note stay above the bottom bar */
  body:has(.xp) .toasts, body:has(.xp) .update-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ less motion when the system asks for it */
@media (prefers-reduced-motion: reduce) {
  .xp *, .xp *::before, .xp *::after, .xl *, .xl *::before, .xl *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .xp-signal::after, .xp-ring-av > i, .xl-fiber .p { display: none; }
  .xp-brand img { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}