/*
 * The client portal shell, 2026-10-29 redesign (MalkaVRS, MalkaVRI, MapleVRI,
 * MalkaVCS). Robert approved the web mockups on 2026-10-29
 * (~/dev/scratch/mockups/web/web-vrs.html, web-vri.html, web-vcs.html).
 *
 * Loaded after client-profile.css. It does two things:
 *
 * 1. The family palette of the approved MalkaVRI v2 mockups, per brand and
 *    mode, and the remap of the portal's semantic tokens onto it, so every
 *    older component takes the new colours without its own rule.
 *    Dark is the default; the scheme inverts in Light.
 *      Malka dark:  navy-black page, orange main buttons with navy text.
 *      Malka light: light grey page, the same orange buttons, navy text.
 *      Maple dark:  near-black page, white main buttons, Maple red brand.
 *      Maple light: white page, black main buttons, Maple red brand.
 *    The call stage stays dark in Light mode.
 *
 * 2. The shell: logo top start, avatar top end, a rail of areas at 640 px and
 *    wider, bottom tabs below; the camera with the call bar directly under
 *    it; the Now chips; the ring takeover with its 1 Hz edge flash.
 *
 * Every new rule is scoped to .pv-shell (or the ring overlay) and uses logical
 * properties, so MalkaVCS can turn the page right to left with dir="rtl".
 */

/* ========================================================================
 * Family palette
 * ======================================================================== */
body {
    --pv-bg: #0A0A1A;
    --pv-sf: #17192C;
    --pv-sf2: #22253A;
    --pv-tx: #F4F4F7;
    --pv-mu: #A6A9BA;
    --pv-ac: #F47D22;
    --pv-onac: #0D1A38;
    --pv-ln: #2B2E45;
    --pv-logo: #FFFFFF;
    --pv-brand: #F47D22;
    --pv-brt: #F47D22;
    --pv-ok: #8FD14F;
    --pv-wa: #F4B740;
    --pv-bad: #FF6B6B;
    --pv-cam: #2A2C3A;
    --pv-camfg: #5A5D70;
    --pv-end: #D23B3B;
    --pv-veil: rgba(6, 7, 15, 0.66);
    --pv-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

body.theme-light {
    --pv-bg: #F7F7FA;
    --pv-sf: #FFFFFF;
    --pv-sf2: #E9EBF1;
    --pv-tx: #0D1A38;
    --pv-mu: #5B6078;
    --pv-ln: #DDE0E8;
    --pv-logo: #0D1A38;
    --pv-brt: #A84A00;
    --pv-ok: #2E7D32;
    --pv-wa: #9A6100;
    --pv-bad: #C62828;
    --pv-cam: #D9DCE6;
    --pv-camfg: #8E93A8;
    --pv-shadow: 0 18px 48px rgba(13, 26, 56, 0.16);
}

body.theme-maple:not(.theme-light) {
    --pv-bg: #0B0B0B;
    --pv-sf: #1B1B1B;
    --pv-sf2: #2A2A2A;
    --pv-tx: #F5F5F5;
    --pv-mu: #B3B3B3;
    --pv-ac: #FFFFFF;
    --pv-onac: #0B0B0B;
    --pv-ln: #303030;
    --pv-logo: #FFFFFF;
    --pv-brand: #E0262B;
    --pv-brt: #FF7A7D;
}

body.theme-maple.theme-light {
    --pv-bg: #FFFFFF;
    --pv-sf: #F3F3F3;
    --pv-sf2: #E4E4E4;
    --pv-tx: #0B0B0B;
    --pv-mu: #5E5E5E;
    --pv-ac: #0B0B0B;
    --pv-onac: #FFFFFF;
    --pv-ln: #E0E0E0;
    --pv-logo: #0B0B0B;
    --pv-brand: #A90000;
    --pv-brt: #A90000;
}

/* The semantic tokens every older component reads. */
body,
body.theme-light,
body.theme-maple:not(.theme-light),
body.theme-maple.theme-light {
    --vrs-surface-0: var(--pv-bg);
    --vrs-surface-1: var(--pv-bg);
    --vrs-surface-2: var(--pv-sf);
    --vrs-surface-3: var(--pv-sf2);
    --vrs-surface-4: var(--pv-sf2);
    --vrs-text: var(--pv-tx);
    --vrs-text-muted: var(--pv-mu);
    --vrs-text-faint: var(--pv-mu);
    --vrs-line: var(--pv-ln);
    --vrs-line-strong: var(--pv-ln);
    --vrs-accent: var(--pv-brand);
    --vrs-page-bg: var(--pv-bg);
    --vrs-header-bg: var(--pv-bg);
    --vrs-card-bg: var(--pv-sf);
    --vrs-card-border: var(--pv-ln);
    --vrs-panel-bg: var(--pv-sf2);
    --vrs-panel-bg-hover: var(--pv-sf2);
    --vrs-panel-border: var(--pv-ln);
    --vrs-input-bg: var(--pv-sf);
    --vrs-input-border: var(--pv-ln);
    --vrs-input-ink: var(--pv-tx);
    --vrs-input-placeholder: var(--pv-mu);
    --vrs-btn-primary-bg: var(--pv-ac);
    --vrs-btn-primary-bg-hover: var(--pv-ac);
    --vrs-btn-primary-ink: var(--pv-onac);
    --vrs-btn-ghost-bg-hover: var(--pv-sf2);
    --vrs-btn-ghost-border: var(--pv-ln);
    --vrs-btn-ghost-ink: var(--pv-tx);
    --vrs-segment-active-bg: var(--pv-bg);
    --vrs-segment-active-ink: var(--pv-tx);
    --vrs-link: var(--pv-brt);
    --vrs-success: var(--pv-ok);
    --vrs-warn: var(--pv-wa);
    background: var(--pv-bg);
    color: var(--pv-tx);
}

/* ========================================================================
 * Shell
 * ======================================================================== */
.pv-shell {
    background: var(--pv-bg);
    color: var(--pv-tx);
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 1.4;
    min-height: 100vh;
}

.pv-shell .sr-only,
.pv-sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.pv-icon {
    flex: none;
    height: 1.25em;
    width: 1.25em;
}

/* Arrows point the way the line reads. */
[dir="rtl"] .pv-icon--flip {
    transform: scaleX(-1);
}

/* ---- Header -------------------------------------------------------------- */
.pv-header {
    align-items: center;
    background: var(--pv-bg);
    border-block-end: 0.5px solid var(--pv-ln);
    display: flex;
    gap: 12px;
    min-height: 60px;
    padding-block: 8px;
    padding-inline: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.pv-gap { flex: 1 1 auto; }

/* The logo is a mask, so its colour follows the theme. One brand only: the
   page renders the Malka mark or the Maple mark, never both. */
.pv-logo {
    display: inline-flex;
    flex: none;
    gap: 6px;
    align-items: center;
}

.pv-logo-malka {
    background: var(--pv-logo);
    height: 36px;
    -webkit-mask: url(../images/brand/malka-mask.png) no-repeat left center / contain;
    mask: url(../images/brand/malka-mask.png) no-repeat left center / contain;
    width: 76px;
}

[dir="rtl"] .pv-logo-malka {
    -webkit-mask-position: right center;
    mask-position: right center;
}

.pv-logo-leaf {
    background: var(--pv-brand);
    height: 28px;
    -webkit-mask: url(../images/brand/maple-leaf-mask.png) no-repeat center / contain;
    mask: url(../images/brand/maple-leaf-mask.png) no-repeat center / contain;
    width: 30px;
}

.pv-logo-word {
    background: var(--pv-logo);
    height: 13px;
    -webkit-mask: url(../images/brand/maple-word-mask.png) no-repeat left center / contain;
    mask: url(../images/brand/maple-word-mask.png) no-repeat left center / contain;
    width: 86px;
}

/* The service switch: VRS · VRI · Relay, a segmented slider. */
.pv-shell .service-switch {
    background: var(--pv-sf2);
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
}

.pv-shell .service-switch-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--pv-mu);
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    min-height: 38px;
    padding: 0 12px;
    white-space: nowrap;
}

.pv-shell .service-switch-btn + .service-switch-btn { border-inline-start: 0; }

.pv-shell .service-switch-btn.active {
    background: var(--pv-bg);
    color: var(--pv-tx);
}

.pv-lang-switch {
    align-items: center;
    background: var(--pv-sf);
    border: 0.5px solid var(--pv-ln);
    border-radius: 18px;
    color: var(--pv-tx);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 13px;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
}

/* The connection pill shows only while the call socket is not connected. */
.pv-shell .ws-status {
    inset-inline-end: auto;
    position: static;
    top: auto;
}

/* The avatar opens the account menu: identity and the rare actions. */
.pv-shell .account-menu__button.pv-avatar {
    align-items: center;
    background: var(--pv-sf2);
    border: 0;
    border-radius: 50%;
    color: var(--pv-tx);
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    height: 44px;
    justify-content: center;
    max-width: none;
    min-height: 44px;
    padding: 0;
    width: 44px;
}

.pv-shell .account-menu__button.pv-avatar::after { content: none; }

.pv-shell .account-menu__panel {
    background: var(--pv-sf);
    border: 0.5px solid var(--pv-ln);
    border-radius: 14px;
    box-shadow: var(--pv-shadow);
    inset-inline-end: 0;
    min-width: 240px;
    right: auto;
}

.pv-shell .account-menu__email {
    color: var(--pv-mu);
    display: block;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-shell .account-menu__item { text-align: start; }

.pv-menu-services { display: none; }

/* ---- Body: rail + main --------------------------------------------------- */
.pv-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.pv-rail {
    align-self: flex-start;
    border-inline-end: 0.5px solid var(--pv-ln);
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 2px;
    min-height: calc(100vh - 60px);
    padding: 8px 0;
    position: sticky;
    top: 60px;
    width: 84px;
}

.pv-rail-item {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--pv-mu);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    font-size: 12px;
    gap: 4px;
    min-height: 60px;
    justify-content: center;
    padding: 8px 2px;
    position: relative;
}

.pv-rail-item .pv-icon {
    height: 24px;
    width: 24px;
}

.pv-rail-item:hover { color: var(--pv-tx); }

.pv-rail-item.is-active { color: var(--pv-tx); }
.pv-rail-item.is-active .pv-icon { color: var(--pv-brand); }

.pv-rail-item.is-active::before {
    background: var(--pv-brand);
    border-radius: 2px;
    content: '';
    inset-block: 12px;
    inset-inline-start: 0;
    position: absolute;
    width: 3px;
}

.pv-rail-item.is-dragging { opacity: 0.5; }
.pv-rail-item.is-drag-over { outline: 2px dashed var(--pv-brand); outline-offset: -4px; }

.pv-rail-icon {
    display: inline-flex;
    position: relative;
}

.pv-badge {
    background: var(--pv-bad);
    border-radius: 9px;
    box-sizing: border-box;
    color: var(--pv-bg);
    font-size: 11px;
    font-weight: 500;
    height: 18px;
    inset-block-start: -6px;
    inset-inline-start: 16px;
    line-height: 18px;
    min-width: 18px;
    padding: 0 5px;
    position: absolute;
    text-align: center;
}

.pv-main {
    flex: 1 1 auto;
    margin-inline: auto;
    max-width: 920px;
    min-width: 0;
    padding: 18px 24px 48px;
    width: 100%;
}

/* The old .profile-main grid (client-profile.css) is on the same element.
   This rule is more specific, so the area layout here wins. */
.pv-shell .profile-main {
    display: block;
    margin-block: 0;
    margin-inline: auto;
    max-width: 920px;
    padding: 18px 24px 48px;
}

.pv-area-head {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-block-end: 14px;
}

.pv-area-title {
    color: var(--pv-tx);
    flex: 1 1 auto;
    font-size: 22px;
    font-weight: 500;
    margin: 0;
}

.pv-subhead {
    color: var(--pv-mu);
    font-size: 13px;
    font-weight: 400;
    margin: 16px 0 8px;
}

/* ---- Buttons ------------------------------------------------------------- */
.pv-btn {
    align-items: center;
    border-radius: 14px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    gap: 8px;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    white-space: nowrap;
}

.pv-btn-main,
.pv-shell .composer-start-btn,
.pv-shell .vri-request-btn {
    background: var(--pv-ac);
    border: 1px solid var(--pv-ac);
    border-radius: 14px;
    color: var(--pv-onac);
    font-size: 16px;
    font-weight: 500;
    min-height: 50px;
}

.pv-btn-main:hover,
.pv-shell .composer-start-btn:hover,
.pv-shell .vri-request-btn:hover { filter: brightness(1.06); }

.pv-btn-quiet {
    background: var(--pv-sf);
    border: 1px solid var(--pv-ln);
    color: var(--pv-tx);
    font-size: 15px;
}

.pv-btn-cancel,
.pv-shell .vrs-callbar-waiting .vrs-call-secondary {
    background: transparent;
    border: 1px solid var(--pv-bad);
    border-radius: 14px;
    color: var(--pv-bad);
    font-size: 16px;
    font-weight: 500;
    min-height: 50px;
    width: 100%;
}

.pv-btn-sm {
    border-radius: 12px;
    font-size: 14px;
    min-height: 44px;
    padding: 0 14px;
}

/* ---- Now chips ----------------------------------------------------------- */
.pv-now {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.pv-chip {
    align-items: center;
    background: var(--pv-sf);
    border: 0;
    border-radius: 22px;
    box-sizing: border-box;
    color: var(--pv-tx);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 13px;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    white-space: nowrap;
}

.pv-chip:hover { background: var(--pv-sf2); }

.pv-chip--quiet {
    background: transparent;
    color: var(--pv-mu);
}

.pv-chip-group {
    display: inline-flex;
    gap: 2px;
}

.pv-chip-group > .pv-chip:first-child {
    border-end-end-radius: 6px;
    border-start-end-radius: 6px;
}

.pv-chip-group > .pv-chip:last-child {
    border-end-start-radius: 6px;
    border-start-start-radius: 6px;
    min-width: 44px;
    padding: 0 10px;
}

.pv-dot {
    background: var(--pv-ok);
    border-radius: 50%;
    display: inline-block;
    flex: none;
    height: 8px;
    width: 8px;
}

.pv-dot--bad { background: var(--pv-bad); }
.pv-dot--warn { background: var(--pv-wa); }
.pv-dot--muted { background: var(--pv-mu); }

/* ---- Home: the stage and the call bar ------------------------------------ */
.pv-home {
    display: block;
    min-width: 0;
}

.pv-shell .vrs-callbar.pv-callbar {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: block;
    margin: 0;
    padding: 0;
}

.pv-shell .vrs-callbar.pv-callbar::before { content: none; }

.pv-stage { position: relative; }

/* The camera: 16:9 on a desktop, the whole frame, never cropped. */
.pv-shell .mirror .mirror-frame {
    --mirror-max-h: min(56vh, 520px);
    background: var(--pv-cam);
    border-radius: 16px;
    box-shadow: none;
    width: min(100%, calc(var(--mirror-max-h) * var(--mirror-ar, 1.7778)));
}

.pv-shell .mirror .mirror-idle { color: var(--pv-camfg); }

.pv-shell .mirror-btn {
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    height: 44px;
    width: 44px;
}

.pv-shell .mirror-controls {
    inset-inline-end: 12px;
    right: auto;
}

.pv-shell .mirror-light {
    inset-inline-start: 12px;
    left: auto;
}

/* The call bar, directly below the camera: one field and one button. */
.pv-actions {
    margin-top: 12px;
}

.pv-shell .vrs-call-composer.pv-composer {
    background: transparent;
    border: 0;
    display: grid;
    gap: 8px;
    padding: 0;
}

.pv-shell .pv-composer .composer-input-row {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
}

.pv-field {
    align-items: center;
    background: var(--pv-sf);
    border: 1px solid var(--pv-ln);
    border-radius: 14px;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    min-height: 50px;
    min-width: 0;
    padding: 0 6px;
}

.pv-field:focus-within { border-color: var(--pv-brand); }

.pv-shell .pv-field .composer-input {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--pv-tx);
    flex: 1 1 auto;
    font-size: 16px;
    min-height: 46px;
    min-width: 0;
    outline: none;
    padding: 0 6px;
}

.pv-shell .pv-field .composer-country-chip {
    align-items: center;
    background: var(--pv-sf2);
    border: 0;
    border-radius: 10px;
    color: var(--pv-tx);
    display: inline-flex;
    flex: none;
    font-size: 14px;
    gap: 6px;
    min-height: 38px;
    min-width: 44px;
    padding: 0 10px;
}

.pv-shell .pv-field .composer-keypad-btn,
.pv-shell .pv-field .composer-vco-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--pv-mu);
    display: inline-flex;
    flex: none;
    font-size: 13px;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
}

.pv-shell .pv-field .composer-vco-toggle {
    background: var(--pv-sf2);
    min-height: 36px;
}

.pv-shell .pv-field .composer-vco-toggle.active {
    background: var(--pv-ac);
    color: var(--pv-onac);
}

.pv-shell .pv-composer .composer-start-btn {
    flex: none;
    gap: 8px;
    padding: 0 18px;
    white-space: nowrap;
}

/* The route is the button's name; the note stays for screen readers. */
.pv-shell .pv-composer .composer-route-note:not([data-composer-capacity-row]) {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Flags are images, so Windows shows a flag rather than the letters "KW". */
.pv-flag.iti-flag {
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
    display: inline-block;
    flex: none;
}

.pv-shell .composer-country-picker {
    background: var(--pv-sf);
    border: 0.5px solid var(--pv-ln);
    border-radius: 14px;
    box-shadow: var(--pv-shadow);
    inset-inline-start: 0;
    left: auto;
    max-height: 360px;
    z-index: 30;
}

.pv-shell .composer-country-row {
    align-items: center;
    display: flex;
    gap: 10px;
    min-height: 44px;
    text-align: start;
}

.pv-more {
    margin-top: 10px;
    position: relative;
}

.pv-shell .pv-more > .composer-more__button {
    align-items: center;
    color: var(--pv-mu);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    gap: 6px;
    list-style: none;
    min-height: 44px;
}

.pv-shell .pv-more > .composer-more__button::-webkit-details-marker { display: none; }

.pv-shell .pv-more .composer-more__menu {
    background: var(--pv-sf);
    border: 0.5px solid var(--pv-ln);
    border-radius: 14px;
    box-shadow: var(--pv-shadow);
    inset-inline-start: 0;
    left: auto;
    right: auto;
    z-index: 30;
}

.pv-shell .pv-more .composer-more__item {
    min-height: 44px;
    text-align: start;
}

/* ---- Waiting: the place in line in the camera box ------------------------ */
.pv-wait {
    display: grid;
    gap: 12px;
}

.pv-wait-box {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: var(--pv-sf);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    max-height: min(56vh, 520px);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.pv-wait-title {
    color: var(--pv-mu);
    font-size: 13px;
    margin: 0;
    text-align: center;
}

.pv-wait-ring {
    align-items: center;
    border: 5px solid var(--pv-sf2);
    border-block-start-color: var(--pv-brand);
    border-inline-end-color: var(--pv-brand);
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 124px;
    justify-content: center;
    width: 124px;
}

.pv-wait-ring b {
    font-size: 38px;
    font-weight: 500;
    line-height: 1;
}

.pv-wait-ring span {
    color: var(--pv-mu);
    font-size: 12px;
}

.pv-wait-avatar {
    align-items: center;
    background: var(--pv-sf2);
    border-radius: 50%;
    display: flex;
    font-size: 30px;
    font-weight: 500;
    height: 96px;
    justify-content: center;
    width: 96px;
}

.pv-wait-clock {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* Your own picture stays, small, in the corner of the box. */
.pv-wait-box .mirror.pv-mirror-mini {
    inset-block-start: 10px;
    inset-inline-end: 10px;
    position: absolute;
    width: 112px;
    z-index: 1;
}

.pv-wait-box .pv-mirror-mini .mirror-frame {
    --mirror-max-h: 64px;
    border-radius: 10px;
}

.pv-wait-box .pv-mirror-mini .mirror-controls,
.pv-wait-box .pv-mirror-mini .mirror-light,
.pv-wait-box .pv-mirror-mini .mirror-status,
.pv-wait-box .pv-mirror-mini .mirror-idle { display: none; }

.pv-wait-box .vri-waiting-media,
.pv-wait-box .vrs-hold-media {
    inset: 0;
    object-fit: contain;
    position: absolute;
    width: 100%;
    height: 100%;
}

.pv-wait-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pv-wait-note {
    color: var(--pv-mu);
    font-size: 14px;
    margin: 0;
}

/* ---- Language line (VRI, MalkaVCS) --------------------------------------- */
.pv-lang-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.pv-lang {
    align-items: center;
    background: var(--pv-sf);
    border: 0;
    border-radius: 20px;
    color: var(--pv-tx);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 13px;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
}

.pv-lang.is-locked {
    cursor: default;
}

/* One offered language: text, not a picker. */
.pv-lang.is-text {
    background: transparent;
    cursor: default;
    padding-inline: 0;
}

.pv-lang-value {
    color: var(--pv-tx);
    font-size: 14px;
    margin: 0;
}

.pv-row-value {
    color: var(--pv-mu);
}

.pv-lang-panel {
    background: var(--pv-sf);
    border-radius: 14px;
    margin: 0 0 12px;
    padding: 10px 14px 14px;
}

.pv-lang-head {
    align-items: center;
    color: var(--pv-mu);
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    margin-block-end: 8px;
}

.pv-lang-head button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--pv-mu);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.pv-lang-label {
    color: var(--pv-mu);
    font-size: 12px;
    margin: 12px 0 8px;
}

.pv-seg {
    background: var(--pv-sf2);
    border-radius: 10px;
    display: flex;
    padding: 3px;
}

.pv-seg > button {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--pv-mu);
    cursor: pointer;
    flex: 1 1 0;
    font: inherit;
    font-size: 13px;
    min-height: 40px;
    padding: 0 8px;
    white-space: nowrap;
}

.pv-seg > button.is-on {
    background: var(--pv-bg);
    color: var(--pv-tx);
    font-weight: 500;
}

.pv-seg > button:disabled {
    cursor: default;
    opacity: 0.35;
}

/* ---- One line with the fix: "No billing account" + "Set up billing" ----- */
/* border: 0 first: the wait strip also has the old .vri-waiting-bar class,
   which has a 1px border on all sides. */
.pv-notice {
    align-items: center;
    background: var(--pv-sf);
    border: 0;
    border-inline-start: 3px solid var(--pv-wa);
    font-weight: 400;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    margin: 0 0 12px;
    min-height: 50px;
    padding: 6px 8px 6px 12px;
}

.pv-notice .pv-icon { color: var(--pv-wa); }

.pv-notice-text { flex: 1 1 auto; }

/* ---- Guests (VRI) -------------------------------------------------------- */
.pv-guests {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pv-guest {
    gap: 0;
    padding: 0;
}

.pv-guest > button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 6px;
    min-height: 44px;
    padding: 0 10px 0 14px;
}

.pv-guest > button + button {
    color: var(--pv-mu);
    min-width: 40px;
    padding: 0 12px 0 4px;
}

/* ---- Favorites ----------------------------------------------------------- */
.pv-shell .vrs-favourites {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}

.pv-shell .vrs-favourite {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--pv-mu);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    gap: 4px;
    min-width: 60px;
    padding: 4px;
}

.pv-shell .vrs-favourite-avatar {
    align-items: center;
    background: var(--pv-sf2);
    border-radius: 50%;
    color: var(--pv-tx);
    display: flex;
    font-size: 15px;
    font-weight: 500;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 48px;
}

.pv-fav-route {
    align-items: center;
    background: var(--pv-bg);
    border-radius: 50%;
    color: var(--pv-brt);
    display: flex;
    height: 22px;
    inset-block-end: -3px;
    inset-inline-end: -3px;
    justify-content: center;
    position: absolute;
    width: 22px;
}

.pv-fav-route .pv-icon {
    height: 14px;
    width: 14px;
}

/* ---- Areas: Contacts, Recent, VideoMail, Schedule, Usage ----------------- */
.pv-area .card,
.pv-area .section-card {
    background: var(--pv-sf);
    border: 0;
    border-radius: 14px;
}

.pv-area .home-tabbed-body,
.pv-area .section-body {
    max-height: none;
    overflow: visible;
}

/* ---- Schedule (VRI) ------------------------------------------------------ */
.pv-week {
    align-items: center;
    display: flex;
    gap: 4px;
    margin-block-end: 6px;
}

.pv-week-days {
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.pv-week-day {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--pv-mu);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    font-size: 12px;
    gap: 2px;
    min-height: 60px;
    padding: 6px 0;
    position: relative;
}

.pv-week-day b {
    color: var(--pv-tx);
    font-size: 16px;
    font-weight: 500;
}

.pv-week-day.is-today {
    background: var(--pv-sf);
}

.pv-week-day.is-today b { color: var(--pv-brt); }

.pv-week-day.is-chosen {
    outline: 2px solid var(--pv-brand);
    outline-offset: -2px;
}

.pv-week-day i {
    background: var(--pv-brand);
    border-radius: 50%;
    height: 5px;
    width: 5px;
}

.pv-week-nav {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--pv-mu);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.pv-session {
    align-items: center;
    background: var(--pv-sf);
    border-radius: 14px;
    display: flex;
    gap: 12px;
    margin-block-end: 8px;
    min-height: 64px;
    padding: 10px 12px;
}

.pv-session-time {
    display: flex;
    flex: none;
    flex-direction: column;
    font-size: 15px;
    font-weight: 500;
    width: 78px;
}

.pv-session-time span {
    color: var(--pv-mu);
    font-size: 12px;
    font-weight: 400;
}

.pv-session-main { flex: 1 1 auto; min-width: 0; }

.pv-session-title {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-cap {
    color: var(--pv-mu);
    font-size: 12px;
}

.pv-session-state {
    align-items: center;
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.pv-session-more {
    position: relative;
}

.pv-session-more > summary {
    align-items: center;
    border-radius: 12px;
    color: var(--pv-mu);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    list-style: none;
    width: 44px;
}

.pv-session-more > summary::-webkit-details-marker { display: none; }

.pv-session-menu {
    background: var(--pv-sf);
    border: 0.5px solid var(--pv-ln);
    border-radius: 14px;
    box-shadow: var(--pv-shadow);
    display: grid;
    gap: 2px;
    inset-inline-end: 0;
    min-width: 200px;
    padding: 6px;
    position: absolute;
    top: calc(100% + 4px);
    z-index: 20;
}

.pv-session-menu button {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--pv-tx);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    min-height: 44px;
    padding: 0 12px;
    text-align: start;
}

.pv-session-menu button:hover { background: var(--pv-sf2); }

.pv-session-menu .is-danger { color: var(--pv-bad); }

.pv-session-editor {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

/*
 * New session: a side panel on a desktop. Robert, 2026-10-29: in a sheet
 * with a summary line and a primary button, the rows scroll and the summary
 * and the button sit below them, never over them, at every text size. So the
 * panel is a flex column: a head, the scrolling rows, then the foot in flow.
 */
.pv-scrim {
    background: rgba(6, 7, 15, 0.5);
    border: 0;
    inset: 0;
    position: fixed;
    z-index: 200;
}

.pv-drawer {
    background: var(--pv-bg);
    border-inline-start: 0.5px solid var(--pv-ln);
    box-shadow: var(--pv-shadow);
    display: flex;
    flex-direction: column;
    inset-block: 0;
    inset-inline-end: 0;
    max-width: 100vw;
    position: fixed;
    width: 380px;
    z-index: 201;
}

.pv-drawer-head {
    align-items: center;
    border-block-end: 0.5px solid var(--pv-ln);
    display: flex;
    flex: none;
    gap: 8px;
    min-height: 56px;
    padding: 0 8px;
}

.pv-drawer-head h2 {
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.pv-drawer-head button {
    background: transparent;
    border: 0;
    color: var(--pv-mu);
    cursor: pointer;
    font: inherit;
    min-height: 44px;
    min-width: 64px;
}

.pv-drawer-rows {
    display: grid;
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    align-content: start;
}

.pv-drawer-foot {
    border-block-start: 0.5px solid var(--pv-ln);
    display: grid;
    flex: none;
    gap: 8px;
    padding: 12px 14px 16px;
}

.pv-drawer-summary {
    color: var(--pv-mu);
    font-size: 13px;
    text-align: center;
}

.pv-group {
    background: var(--pv-sf);
    border-radius: 14px;
    overflow: hidden;
}

.pv-row {
    align-items: center;
    border-block-end: 0.5px solid var(--pv-ln);
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    min-height: 50px;
    padding: 8px 14px;
}

.pv-group > .pv-row:last-child { border-block-end: 0; }

.pv-row-label { flex: 1 1 auto; min-width: 0; }

.pv-row input,
.pv-row select {
    background: transparent;
    border: 0;
    color: var(--pv-tx);
    font: inherit;
    font-size: 14px;
    max-width: 60%;
    min-height: 40px;
    text-align: end;
}

.pv-row input:focus,
.pv-row select:focus { outline: 2px solid var(--pv-brand); outline-offset: 2px; }

.pv-row .pv-seg { min-width: 180px; }

/* ---- Usage (VRI) --------------------------------------------------------- */
.pv-usage {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.pv-usage-big {
    font-size: 32px;
    font-weight: 500;
    margin: 4px 0;
}

.pv-overdue {
    align-items: center;
    background: var(--pv-sf);
    border-inline-start: 3px solid var(--pv-bad);
    border-radius: 12px;
    display: flex;
    gap: 10px;
    margin-block-end: 12px;
    padding: 10px 12px;
}

.pv-overdue .pv-icon { color: var(--pv-bad); }

/* ---- Settings: one line per group, the value at the end ------------------ */
.pv-settings {
    display: grid;
    gap: 12px;
}

.pv-settings-who {
    align-items: center;
    display: flex;
    gap: 12px;
}

.pv-settings-who .pv-avatar-lg {
    align-items: center;
    background: var(--pv-sf2);
    border-radius: 50%;
    display: flex;
    flex: none;
    font-size: 15px;
    font-weight: 500;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.pv-shell .pv-settings .section-card {
    background: var(--pv-sf);
    border: 0;
    border-radius: 14px;
    margin: 0;
}

.pv-shell .pv-settings .section-card > summary {
    font-size: 15px;
    font-weight: 400;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
}

.pv-shell .pv-settings .section-card > summary::after { content: none; }

.pv-setting-name { flex: 1 1 auto; min-width: 0; }

.pv-setting-value {
    color: var(--pv-mu);
    font-size: 13px;
    max-width: 55%;
    overflow: hidden;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-setting-chevron {
    color: var(--pv-mu);
    transition: transform 150ms ease;
}

.pv-shell .pv-settings .section-card[open] > summary .pv-setting-chevron { transform: rotate(90deg); }
[dir="rtl"] .pv-shell .pv-settings .section-card > summary .pv-setting-chevron { transform: scaleX(-1); }
[dir="rtl"] .pv-shell .pv-settings .section-card[open] > summary .pv-setting-chevron { transform: rotate(90deg); }

.pv-shell .pv-settings .section-body {
    border-block-start: 0.5px solid var(--pv-ln);
    padding: 12px 14px 16px;
}

.pv-setting-line {
    align-items: center;
    background: var(--pv-sf);
    border-radius: 14px;
    display: flex;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
}

/* Changes save at once: the Save buttons are gone; a status shows the save. */
.pv-shell .pv-settings [data-autosave-hidden] { display: none; }

.pv-data-line {
    color: var(--pv-mu);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ========================================================================
 * The ring: an in-page takeover with a 1 Hz edge flash
 * ======================================================================== */
.overlay.pv-ring {
    background: rgba(6, 7, 15, 0.92);
    gap: 12px;
}

/* No photo: the brand's mark in a ring, as on the phone apps' ring. */
.pv-ring .overlay-brand-mark {
    border-color: rgba(255, 255, 255, 0.18);
    height: 132px;
    width: 132px;
}

.pv-ring .overlay-caller-name {
    font-size: 28px;
    font-weight: 500;
}

.pv-ring .overlay-status {
    color: #B9BCCB;
    font-size: 15px;
}

.pv-ring .overlay-buttons {
    gap: 30px;
    margin-top: 24px;
}

.pv-ring .overlay-btn {
    background: transparent;
    box-shadow: none;
    color: #F4F4F7;
    flex-direction: column;
    font-size: 14px;
    font-weight: 400;
    gap: 8px;
    min-height: 0;
    min-width: 88px;
    padding: 0;
}

.pv-ring .overlay-btn:hover { transform: none; }

.pv-ring .overlay-btn-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    display: flex;
    height: 64px;
    justify-content: center;
    width: 64px;
}

.pv-ring .overlay-btn-icon .pv-icon {
    height: 28px;
    width: 28px;
}

.pv-ring .overlay-btn-decline .overlay-btn-icon { background: #D23B3B; color: #FFFFFF; }
.pv-ring .overlay-btn-accept .overlay-btn-icon { background: #2FA35A; color: #FFFFFF; }

.pv-ring .overlay-btn:focus-visible .overlay-btn-icon {
    outline: 3px solid var(--vrs-focus, #F4B740);
    outline-offset: 3px;
}

.pv-edge {
    animation: pv-edge-flash 1s steps(2, jump-none) infinite;
    border: 5px solid var(--pv-brand);
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 10001;
}

@keyframes pv-edge-flash {
    0% { opacity: 1; }
    100% { opacity: 0.15; }
}

/* Nothing flashes with reduced motion: the edge stays on, steady. */
@media (prefers-reduced-motion: reduce) {
    .pv-edge { animation: none; }
}

/* ---- Header layout over the older header rules -------------------------- */
.pv-header .profile-header-left,
.pv-header .profile-header-right {
    flex: none;
    gap: 10px;
}

.pv-main:focus { outline: none; }

.pv-drawer-spacer {
    display: inline-block;
    width: 64px;
}

/* ---- The ring keys: decline, VideoMail, answer (drawn as masks) ---------- */
.pv-ring .pv-ring-key::before {
    background: currentColor;
    content: '';
    display: block;
    height: 28px;
    -webkit-mask: var(--pv-key) no-repeat center / contain;
    mask: var(--pv-key) no-repeat center / contain;
    width: 28px;
}

.pv-ring .pv-ring-key--decline { --pv-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate%28135 12 12%29'%3E%3Cpath d='M6.6 3.8h2.6l1.6 4-2 1.3a10.5 10.5 0 0 0 6.1 6.1l1.3-2 4 1.6v2.6a2 2 0 0 1-2.1 2A15.6 15.6 0 0 1 4.6 5.9a2 2 0 0 1 2-2.1z'/%3E%3C/g%3E%3C/svg%3E"); }
.pv-ring .pv-ring-key--videomail { --pv-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6.5' width='12' height='11' rx='2.5'/%3E%3Cpath d='m15 10.5 5.5-3v9l-5.5-3z'/%3E%3C/svg%3E"); }
.pv-ring .pv-ring-key--answer { --pv-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.8h2.6l1.6 4-2 1.3a10.5 10.5 0 0 0 6.1 6.1l1.3-2 4 1.6v2.6a2 2 0 0 1-2.1 2A15.6 15.6 0 0 1 4.6 5.9a2 2 0 0 1 2-2.1z'/%3E%3C/svg%3E"); }

/* ---- Usage and invoices --------------------------------------------------- */
.pv-usage-area .usage-card.pv-group {
    margin-block-end: 12px;
    padding: 14px;
}

.pv-billing { display: grid; gap: 12px; margin-block-end: 12px; }

.pv-usage-area .pv-setting,
.pv-billing .pv-setting { margin-block-end: 12px; }

.pv-usage-area .usage-charts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 12px;
}

/* ---- Right to left (MalkaVCS in Arabic) ----------------------------------- */
[dir="rtl"] .pv-shell .composer-input,
[dir="rtl"] .pv-shell .settings-input,
[dir="rtl"] .pv-shell .settings-textarea { text-align: start; }

[dir="rtl"] .pv-shell .account-menu__panel { left: 0; right: auto; }
[dir="rtl"] .pv-rail-item.is-active::before { left: auto; right: 0; }

/* ---- Undo toast ------------------------------------------------------------ */
#pv-toast-host {
    bottom: 24px;
    display: flex;
    inset-inline: 0;
    justify-content: center;
    pointer-events: none;
    position: fixed;
    z-index: 300;
}

.pv-toast {
    align-items: center;
    background: var(--pv-tx);
    border-radius: 14px;
    box-shadow: var(--pv-shadow);
    color: var(--pv-bg);
    display: flex;
    gap: 14px;
    min-height: 50px;
    padding: 4px 6px 4px 16px;
    pointer-events: auto;
}

.pv-toast-undo {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--pv-brand);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    min-height: 44px;
    min-width: 64px;
}

@media (max-width: 639px) {
    #pv-toast-host { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ========================================================================
 * Narrow windows: bottom tabs, the call bar stacks
 * ======================================================================== */
@media (max-width: 639px) {
    .pv-header {
        min-height: 56px;
        padding-inline: 16px;
    }

    .pv-header > .service-switch { display: none; }
    .pv-menu-services { display: block; padding: 4px 0 6px; }
    .pv-menu-services .service-switch { display: flex; }

    .pv-rail {
        background: var(--pv-bg);
        border-block-start: 0.5px solid var(--pv-ln);
        border-inline-end: 0;
        bottom: 0;
        flex-direction: row;
        inset-inline: 0;
        min-height: 0;
        padding: 4px 0 calc(8px + env(safe-area-inset-bottom, 0px));
        position: fixed;
        top: auto;
        width: auto;
        z-index: 100;
    }

    .pv-rail-item {
        flex: 1 1 0;
        font-size: 11px;
        min-height: 54px;
        padding: 4px 0;
    }

    .pv-rail-item.is-active::before { content: none; }

    /* Home sits in the middle of the tabs, as on the phone apps. */
    .pv-rail[data-service="vrs"] .pv-rail-item[data-area="contacts"] { order: 1; }
    .pv-rail[data-service="vrs"] .pv-rail-item[data-area="recent"] { order: 2; }
    .pv-rail[data-service="vrs"] .pv-rail-item[data-area="home"] { order: 3; }
    .pv-rail[data-service="vrs"] .pv-rail-item[data-area="videomail"] { order: 4; }
    .pv-rail[data-service="vrs"] .pv-rail-item[data-area="settings"] { order: 5; }

    .pv-main,
    .pv-shell .profile-main {
        padding: 12px 16px calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .pv-shell .pv-composer .composer-input-row {
        flex-wrap: wrap;
    }

    .pv-shell .pv-composer .composer-start-btn {
        width: 100%;
    }

    /* A portrait box for the camera on a phone. */
    .pv-shell .mirror .mirror-frame {
        --mirror-max-h: 44vh;
    }

    .pv-wait-box {
        aspect-ratio: 4 / 5;
        max-height: 44vh;
    }

    .pv-usage { grid-template-columns: minmax(0, 1fr); }

    .pv-drawer { width: 100vw; }
}