/* Aurora Glass (board A2 of the 2026-10-26 staff panel concepts). Loaded last, after workspace-theme.css, so the
 * whole panel takes the new look without changing markup or layouts: blue for actions, VosCast green for live,
 * PlayPro magenta for attention, violet for notes and warnings, no lime or light orange. Panels float as frosted
 * glass over soft colour blobs; buttons are flat (no gradients or coloured glows). */

body.vc-ui {
    --bg:#edf1f8;
    --bg2:#e6ebf4;
    --ink:#101828;
    --ink2:#344054;
    --mut:#475467;
    --mut2:#5b6577;
    --mut3:#667085;
    --line-control:#848ea0;
    --acc:#1268d3;
    --acc-strong:#0f5cbf;
    --focus:#1268d3;
    /* --lime is "live" (a green dot); its soft tints mean "selected", which is blue now */
    --lime:#3fae1a;
    --lime-soft:rgba(18,104,211,.08);
    --lime-wash:rgba(18,104,211,.07);
    --lime-line:rgba(18,104,211,.32);
    --lime-tint:#e9f1fc;
    --lime-tint-2:#f2f7fd;
    --on-lime:#fff;
    /* --amber marks notes and warnings: violet */
    --amber:#7b4fa0;
    --amber-soft:rgba(123,79,160,.11);
    --amber-line:rgba(123,79,160,.36);
    --staff-warning-ink:#5e3591;
    --danger:#a3215e;
    --danger-soft:rgba(200,70,126,.1);
    --danger-line:rgba(200,70,126,.36);
    --shadow-cta:0 6px 16px -10px rgba(16,24,40,.45);
    --shadow-live:none;
    --font-sans:Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Archivo is for the interface (css/daylight/components.css loads it); messages and replies read better in Inter */
    --font-read:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --a2-green:#3fae1a;
    --a2-green-ink:#2a7d10;
    --a2-green-soft:rgba(63,174,26,.13);
    --a2-magenta:#b8306f;
    --a2-magenta-ink:#a3215e;
    --a2-magenta-soft:rgba(200,70,126,.12);
    --a2-violet-ink:#5e3591;
    --a2-violet-soft:rgba(123,79,160,.13);
    --a2-glass:linear-gradient(180deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.55) 100%);
    --a2-glass-edge:rgba(255,255,255,.72);
    --a2-glass-blur:blur(30px) saturate(190%);
    --a2-glass-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(16,24,40,.05),0 30px 60px -32px rgba(16,24,40,.38);
    --a2-raised:inset 0 1px 0 #fff,0 0 0 1px rgba(16,24,40,.06),0 6px 14px -8px rgba(16,24,40,.35);
    --a2-radius:26px;
    --inv-acc:#9cc3f5;
    --a2-gap:12px;
    --staff-chrome-solid:#f6f8fc;
    --staff-chrome-glass:rgba(255,255,255,.72);
    --staff-rail-glass:rgba(255,255,255,.72);
    /* Four colour blobs, fixed to the window: HostHorde blue, PlayPro magenta, VosCast green, PlayPro violet */
    background:
        radial-gradient(circle 380px at 200px 120px,rgba(30,150,210,.5),rgba(30,150,210,0)),
        radial-gradient(circle 400px at calc(100% - 200px) 240px,rgba(200,70,126,.38),rgba(200,70,126,0)),
        radial-gradient(circle 430px at calc(26% + 430px) calc(100% - 90px),rgba(100,185,40,.32),rgba(100,185,40,0)),
        radial-gradient(circle 320px at calc(96% - 320px) calc(100% - 100px),rgba(123,79,160,.38),rgba(123,79,160,0)),
        #edf1f8;
    background-attachment:fixed;
    font-family:var(--font-sans);
    font-stretch:100%;
}
body.vc-ui ::selection { background:#b9d9ff; color:#101828; }
body.vc-ui :is(.vc-message__body,.chat-message__body,.chat-private-text,.vc-textarea,.ws-reply,.ws-note-body,.chat-composer textarea) { font-family:var(--font-read); }
body.vc-ui a:hover { color:var(--acc-strong); }

/* Labels read as type, not code: the mono face stays for numbers, IDs and times */
body.vc-ui :is(.vc-table th,.ws-label,.vc-stat__label,.vc-t-label,.vc-t-eyebrow,.vc-eyebrow,.chat-eyebrow,.chat-context dt,.vc-message__role) {
    font-family:var(--font-sans);
    font-weight:800;
    letter-spacing:.08em;
}
body.vc-ui :is(.vc-table th,.ws-label,.vc-stat__label,.chat-context dt) { font-size:11px; line-height:14px; }
body.vc-ui .ws-fact dt { font-family:var(--font-sans); font-size:11px; line-height:14px; font-weight:800; letter-spacing:.08em; }
body.vc-ui .vc-legacy :is(table.dtable,table.logs) th { background:rgba(16,24,40,.035); font-family:var(--font-sans); font-weight:800; letter-spacing:.08em; }
body.vc-ui .vc-legacy table.tform th { font-family:var(--font-sans); font-weight:800; letter-spacing:.08em; }
body.vc-ui .vc-main--wide .vc-monitor__head .vc-t-section-title { color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:22px; font-weight:800; letter-spacing:-.01em; text-transform:none; }
/* Field labels as in the mockups: short, bold, sentence case */
body.vc-ui .vc-field__label { color:var(--ink2); font-family:var(--font-sans); font-size:13px; line-height:18px; font-weight:700; letter-spacing:0; text-transform:none; }

/* Navigation: a floating glass bar */
body.vc-ui .vc-nav.vc-shell {
    top:var(--a2-gap);
    min-height:62px;
    margin:var(--a2-gap) var(--a2-gap) 0;
    padding:8px 10px 8px 24px;
    gap:8px 14px;
    border:1px solid var(--a2-glass-edge);
    border-radius:31px;
    background:rgba(255,255,255,.74);
    -webkit-backdrop-filter:var(--a2-glass-blur);
    backdrop-filter:var(--a2-glass-blur);
    box-shadow:var(--a2-glass-shadow);
}
body.vc-ui .vc-shell .vc-nav__links { gap:2px; padding:4px; border-radius:999px; background:rgba(16,24,40,.05); }
body.vc-ui .vc-shell .vc-nav__links .vc-nav__link { min-height:38px; padding:0 16px; border-radius:999px; color:var(--ink2); font-weight:600; }
body.vc-ui .vc-shell .vc-nav__links .vc-nav__link:hover { background:rgba(255,255,255,.6); color:var(--ink); }
body.vc-ui .vc-shell .vc-nav__links .vc-nav__link[aria-current="page"] { background:#fff; color:var(--ink); font-weight:700; box-shadow:var(--a2-raised); }
body.vc-ui .vc-shell .vc-nav__end > .vc-nav__link { padding:0 6px; background:none; color:var(--ink); font-weight:700; }
body.vc-ui .vc-shell .vc-nav__end > .vc-nav__link:hover { color:var(--acc-strong); }
body.vc-ui .vc-shell .vc-avatar { width:40px; height:40px; background:#1268d3; color:#fff; font-size:13px; font-weight:800; box-shadow:0 0 0 3px rgba(255,255,255,.8); }
body.vc-ui .vc-count { background:#1268d3; color:#fff; }
body.vc-ui .vc-count--lime { background:var(--a2-green-ink); color:#fff; }
body.vc-ui .vc-account__menu { border-color:rgba(16,24,40,.08); border-radius:18px; }
/* The tab bar's icons and short names, the bell and the panel switch in the account menu are for phones */
body.vc-ui :is(.vc-nav__icon,.vc-nav__short,.chat-settings__icon,.vc-account__switch) { display:none; }
body.vc-ui .chat-settings > summary { display:inline-flex; align-items:center; min-height:38px; padding:0 15px; border:1px solid rgba(16,24,40,.14); border-radius:999px; background:rgba(255,255,255,.72); color:var(--ink); font-weight:700; list-style:none; box-shadow:inset 0 1px 0 #fff; }
body.vc-ui .chat-settings > summary::-webkit-details-marker { display:none; }
body.vc-ui .chat-settings > summary:hover { background:#fff; }
body.vc-ui .chat-settings__menu { border-color:rgba(16,24,40,.08); border-radius:18px; }
body.vc-ui .chat-shell [data-chat-availability][aria-pressed="true"] { background:var(--a2-green-soft); border-color:rgba(63,174,26,.4); color:var(--a2-green-ink); }
body.vc-ui .vc-progress { background:#1268d3; box-shadow:none; }

/* Buttons: frosted white, or flat blue for the one main action */
body.vc-ui .vc-btn { border-color:rgba(16,24,40,.14); background:rgba(255,255,255,.72); color:var(--ink); box-shadow:inset 0 1px 0 #fff; }
body.vc-ui .vc-btn:hover { background:#fff; color:var(--ink); }
/* A toggle whose panel is open (Details) stays pressed in */
body.vc-ui .ws-toggle[aria-expanded="true"],
body.vc-ui .ws-toggle[aria-expanded="true"]:hover { border-color:rgba(16,24,40,.16); background:rgba(16,24,40,.07); box-shadow:inset 0 1px 2px rgba(16,24,40,.12); }
body.vc-ui :is(.vc-btn--primary,.vc-btn--dark) { border-color:#1268d3; background:#1268d3; color:#fff; box-shadow:0 6px 16px -10px rgba(16,24,40,.45); }
body.vc-ui :is(.vc-btn--primary,.vc-btn--dark):hover { border-color:#0f5cbf; background:#0f5cbf; color:#fff; }
body.vc-ui .vc-btn__glyph { color:inherit; }
body.vc-ui .vc-btn--danger { border-color:var(--danger-line); color:var(--danger); }
body.vc-ui .vc-btn--danger:hover { background:var(--danger-soft); color:var(--danger); }
body.vc-ui .vc-btn--quiet, body.vc-ui .vc-btn--quiet:hover { border-color:transparent; background:transparent; box-shadow:none; }
body.vc-ui .vc-btn--on-inverse { border-color:rgba(255,255,255,.22); background:transparent; color:#fff; box-shadow:none; }
body.vc-ui :is(.vc-btn--on-inverse:hover,.vc-bulk .vc-btn--on-inverse[aria-expanded="true"]) { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.14); color:#fff; }
body.vc-ui :is(.vc-btn:disabled,.vc-btn[aria-disabled="true"]) { box-shadow:none; }

/* Tabs and switches: a soft track with the current one raised in white */
body.vc-ui .vc-tabs { padding:3px; border:0; background:rgba(16,24,40,.06); }
body.vc-ui :is(.vc-tab[aria-current="page"],.vc-tab[aria-selected="true"]) { background:#fff; color:var(--ink); box-shadow:var(--a2-raised); }
body.vc-ui :is(.vc-tab[aria-current="page"],.vc-tab[aria-selected="true"]) .vc-tab__count { color:var(--acc-strong); }

/* Fields */
body.vc-ui :is(.vc-input,.vc-select,.vc-textarea,.ws-mini) { background-color:rgba(255,255,255,.88); }
body.vc-ui .vc-search { background:rgba(255,255,255,.85); box-shadow:inset 0 1px 2px rgba(16,24,40,.05); }

/* Checkboxes: rounded, a soft outline that still stands out (3:1), flat blue with a white tick when on */
body.vc-ui input[type="checkbox"] {
    -webkit-appearance:none;
    appearance:none;
    flex:none;
    width:18px;
    height:18px;
    margin:0;
    border:1.5px solid var(--line-control);
    border-radius:6px;
    background:rgba(255,255,255,.9) center / 12px 12px no-repeat;
    box-shadow:inset 0 1px 2px rgba(16,24,40,.06);
    vertical-align:middle;
    cursor:pointer;
    transition:background-color .12s,border-color .12s;
}
body.vc-ui input[type="checkbox"]:hover:not(:disabled) { border-color:#1268d3; }
body.vc-ui input[type="checkbox"]:checked {
    border-color:#1268d3;
    background-color:#1268d3;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.6-5.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    box-shadow:none;
}
body.vc-ui input[type="checkbox"]:indeterminate {
    border-color:#1268d3;
    background-color:#1268d3;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    box-shadow:none;
}
body.vc-ui input[type="checkbox"]:disabled { opacity:.5; cursor:default; }
body.vc-ui input[type="checkbox"]:focus-visible { outline:2px solid #1268d3; outline-offset:2px; }
body.vc-ui input[type="radio"] { accent-color:#1268d3; }
@media (prefers-reduced-motion:reduce) {
    body.vc-ui input[type="checkbox"] { transition:none; }
}

/* Chips: sentence case in the panel's type, tinted by meaning */
body.vc-ui .vc-chip { gap:6px; padding:3px 10px; border:0; background:rgba(16,24,40,.07); color:var(--mut); font-family:var(--font-sans); font-size:12px; line-height:16px; font-weight:700; letter-spacing:0; text-transform:none; }
body.vc-ui .vc-chip--sm { padding:2px 8px; font-size:11.5px; }
body.vc-ui .ws .vc-chip--sm { font-size:.75rem; }
body.vc-ui .vc-chip--live { background:var(--a2-green-soft); color:var(--a2-green-ink); }
body.vc-ui .vc-chip--live::before { background:var(--a2-green); }
body.vc-ui .vc-chip--attention { background:var(--a2-magenta-soft); color:var(--a2-magenta-ink); }
body.vc-ui .vc-chip--attention::before { background:var(--a2-magenta); }
body.vc-ui .vc-chip--danger { background:rgba(200,70,126,.16); color:var(--a2-magenta-ink); }
body.vc-ui .vc-chip--danger::before { background:var(--a2-magenta); }
body.vc-ui .vc-tag--lime { background:var(--a2-green-soft); border-color:rgba(63,174,26,.4); color:var(--a2-green-ink); }
/* The VosCast brand label in a clean green rather than chat.css's olive */
body.vc-ui .brand-pill[data-brand="voscast"] { background:#e6f4ea; border-color:#acd8b9; color:#17733a; }
/* Priority dots: Emergency magenta, High blue */
body.vc-ui .vc-dot--danger { background:var(--a2-magenta); }
body.vc-ui .vc-dot--attention { background:#1268d3; }
body.vc-ui :is(.vc-alert--success,.vc-legacy #infomessage) { background:var(--a2-green-soft); border-color:rgba(63,174,26,.4); }
body.vc-ui .vc-alert--success::before { background:var(--a2-green); }
body.vc-ui .vc-alert { border-radius:16px; }
/* Ticket action results belong to the conversation panel, beside their queue. */
body.vc-ui .ws-alerts { flex:none; min-width:0; }
body.vc-ui [data-chat-native-pane]:has(> .ws-alerts) { display:flex; flex-direction:column; }
body.vc-ui [data-chat-native-pane]:has(> .ws-alerts) > .chat-conversation__content { flex:1; min-height:0; height:auto; }
body.vc-ui .chat-alert { margin-bottom:8px; border:1px solid var(--amber-line); border-radius:16px; }

/* Stat tiles, as on the Server Monitor */
body.vc-ui .vc-stat { border-color:rgba(16,24,40,.06); border-radius:18px; background:rgba(255,255,255,.62); box-shadow:inset 0 1px 0 #fff; }
body.vc-ui .vc-stat--lime,
body.vc-ui .vc-main--wide .vc-monitor__stats .vc-stat--lime { background:rgba(255,255,255,.62); border-color:rgba(16,24,40,.06); }
body.vc-ui :is(.vc-stat--lime .vc-stat__value,.vc-stat--compact.vc-stat--lime .vc-stat__value) { color:var(--ink); }
body.vc-ui .vc-monitor__bar > span { background:#1268d3; }
body.vc-ui .vc-monitor__rawtext a { color:var(--acc-strong); }

/* Tables: a frosted header that stays readable over the rows scrolling under it */
body.vc-ui .vc-table th { background:rgba(248,250,253,.985); color:var(--mut2); }
body.vc-ui .vc-table th[aria-sort] { color:var(--ink); }
body.vc-ui .vc-table tbody tr:hover td { background:rgba(255,255,255,.55); }
body.vc-ui .vc-table tbody tr[aria-selected="true"] td { background:var(--lime-soft); }

/* Lists: the open item is raised in white, picked ones are tinted blue */
body.vc-ui a.ws-item[aria-current="true"],
body.vc-ui :is(.support-item[aria-current="true"],.support-row > .support-item[aria-current="true"]) {
    border-color:rgba(18,104,211,.28);
    background:rgba(255,255,255,.92);
    box-shadow:0 8px 18px -14px rgba(16,24,40,.45);
}
body.vc-ui .chat-item[aria-current="true"] { background:rgba(255,255,255,.92); border-left-color:#1268d3; }
body.vc-ui :is(.chat-item,.vc-table td) { border-color:rgba(16,24,40,.06); }
body.vc-ui .chat-item:hover { background:rgba(255,255,255,.55); }

/* Conversation: customers in white glass, staff in blue glass, private notes in violet */
body.vc-ui :is(.vc-message,.chat-message__body) {
    border-color:rgba(16,24,40,.06);
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 20px -14px rgba(16,24,40,.4);
}
body.vc-ui .vc-message { border-radius:20px; }
body.vc-ui .chat-message__body { border-radius:20px 20px 20px 7px; }
body.vc-ui :is(.vc-message--staff,.chat-message--staff .chat-message__body) {
    border-color:rgba(255,255,255,.22);
    background:rgba(11,79,166,.8);
    color:#fff;
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    backdrop-filter:blur(16px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -14px rgba(16,24,40,.45);
}
body.vc-ui .chat-message--staff .chat-message__body { border-radius:20px 20px 7px 20px; }
body.vc-ui .vc-message--staff :is(.vc-message__who,.vc-message__title,.vc-message__body,.vc-message__role,.vc-message__meta,.vc-file__name),
body.vc-ui .vc-message--staff a,
body.vc-ui .chat-message--staff .chat-message__body a { color:#fff; }
body.vc-ui .vc-message--staff :is(.vc-message__role,.vc-message__meta) { opacity:.85; }
body.vc-ui .vc-message--staff :focus-visible { outline-color:#fff; }
body.vc-ui .vc-message--note { border-color:rgba(123,79,160,.28); background:rgba(123,79,160,.09); box-shadow:none; }
body.vc-ui :is(.ws-mode__btn--note[aria-selected="true"],.ws-btn--note,.ws-btn--note:hover) { color:#fff; }
body.vc-ui :is(.ws-btn--note,.ws-btn--note:hover) { border-color:#7b4fa0; background:#7b4fa0; box-shadow:none; }
/* Reply / Private note: a soft track; a reply is raised in white, a note turns violet */
body.vc-ui .ws-mode { border:0; background:rgba(16,24,40,.06); }
body.vc-ui .ws-mode__btn--reply[aria-selected="true"] { background:#fff; color:var(--ink); box-shadow:var(--a2-raised); }

/* Menus and pop-overs stay solid white so text over busy content stays readable */
body.vc-ui :is(.vc-account__menu,.vc-bulkpanel,.ws-menu__list,.chat-settings__menu,.chat-premade__panel) { border-color:rgba(16,24,40,.08); }

/* The workspace, as on boards A2 and A2 · Email ticket */

/* List: each conversation is a rounded card; the open one is raised in white with a blue edge */
body.vc-ui :is(.ws-list__items,.support-list__items) { padding:8px; }
body.vc-ui .ws-list__items { gap:4px; }
body.vc-ui :is(a.ws-item,.support-item) { padding:12px; border-radius:18px; }
body.vc-ui .ws-row--pick > a.ws-item { padding-left:42px; }
/* The checkbox keeps to the card's left edge, clear of the blue reply dot just before the name */
body.vc-ui :is(.ws-pick,.support-pick-label) { justify-content:flex-start; width:42px; padding:13px 0 0 7px; }
body.vc-ui :is(.support-row > .support-item,.support-item--selection-gutter) { padding-left:42px; }
body.vc-ui .support-pick-all { justify-content:flex-start; padding-left:15px; }
body.vc-ui :is(.ws-row:hover > a.ws-item,.support-item:hover,.support-row:hover > .support-item) { background:rgba(255,255,255,.62); }
body.vc-ui a.ws-item[aria-current="true"],
body.vc-ui :is(.support-item[aria-current="true"],.support-row > .support-item[aria-current="true"]) {
    border-color:transparent;
    background:#fff;
    box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(16,98,204,.22),0 10px 24px -14px rgba(16,24,40,.45);
}
body.vc-ui :is(.ws-row--picked > a.ws-item,.ws-row--picked:hover > a.ws-item,.support-row--picked > .support-item,.support-row--picked:hover > .support-item) { background:rgba(18,104,211,.08); }
body.vc-ui .support-item__title strong { font-size:14px; font-weight:700; }
body.vc-ui :is(.ws-item--replied,.support-item--replied) .support-item__title strong { font-weight:800; }
body.vc-ui .support-item__time { font-family:var(--font-sans); font-size:12px; font-weight:600; }
body.vc-ui .support-item__preview { font-size:13.5px; }

/* Picked conversations: an ink glass bar floating at the foot of the list */
body.vc-ui .ws-bulk { margin:0 8px 8px; }
body.vc-ui .ws-bulk__bar {
    padding:6px 6px 6px 16px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(16,24,40,.86);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 20px 40px -18px rgba(16,24,40,.6);
}
body.vc-ui .ws-bulk__count b { color:#fff; font-family:var(--font-sans); }
body.vc-ui :is(.ws-bulk__main,.ws-bulk__main:hover) { border-color:#fff; background:#fff; color:var(--ink); }
/* The ticket tables' bar (tickets.inc.php, inbox.php) in the same ink glass, Close white like the workspace's */
body.vc-ui .vc-bulkbar { border:1px solid rgba(255,255,255,.16); background:rgba(16,24,40,.86); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); box-shadow:0 20px 40px -18px rgba(16,24,40,.6); color:#fff; }
body.vc-ui .vc-bulkbar__count { color:#fff; font-family:var(--font-sans); }
body.vc-ui .vc-bulkbar :is(.vc-btn[name="close"],.vc-btn[name="close"]:hover) { border-color:#fff; background:#fff; color:var(--ink); }

/* Conversation header: the channel and number small above a bold subject */
body.vc-ui :is(.ws-convo__head,.chat-conversation__head) { padding:16px 16px 14px 22px; border-bottom-color:rgba(16,24,40,.07); }
body.vc-ui .support-channel-label { font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.08em; }
body.vc-ui .ws-convo__top .ws-num { font-size:12.5px; font-weight:600; }
body.vc-ui .ws-convo__title { font-size:20px; line-height:26px; }
/* A High ticket is blue, as its dot in the list; Emergency and Overdue stay magenta */
body.vc-ui [data-ticket-state-priority-chip].vc-chip--attention { background:rgba(18,104,211,.1); color:#0f59b6; }
body.vc-ui [data-ticket-state-priority-chip].vc-chip--attention::before { background:#1268d3; }

/* Thread: customers on the left in white, staff on the right in blue glass, notes across in violet */
body.vc-ui .ws-thread { gap:14px; padding:20px 22px; }
body.vc-ui .ws-thread .vc-message { padding:14px 18px 16px; }
body.vc-ui .vc-message__head { align-items:center; gap:4px 10px; margin-bottom:8px; }
body.vc-ui .ws-thread .vc-message__who { font-size:13.5px; font-weight:700; }
body.vc-ui :is(.vc-message__meta,.vc-fold__when) { font-family:var(--font-sans); font-size:12px; font-weight:600; }
body.vc-ui .vc-message__avatar { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:#6d3fb0; color:#fff; font-size:10.5px; font-weight:800; letter-spacing:0; }
body.vc-ui .vc-message--staff .vc-message__avatar { background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
body.vc-ui .vc-message--note { padding:12px 16px; border-radius:18px; }
body.vc-ui .vc-message--note .vc-message__role { color:#5e3591; }
body.vc-ui .vc-message--note .vc-message__body { color:#1d2433; }
body.vc-ui .vc-email-quote { margin-top:12px; border-top:1px solid var(--line); padding-top:8px; }
body.vc-ui .vc-email-quote > summary { width:fit-content; cursor:pointer; color:var(--mut); font-size:14px; font-weight:600; }
body.vc-ui .vc-email-quote > summary:hover { color:var(--acc-strong); }
body.vc-ui .vc-email-quote__body { margin-top:12px; }
body.vc-ui .ws-event { font-size:12.5px; font-weight:600; }
body.vc-ui .ws-day { font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.08em; }
body.vc-ui a.ws-file { border-color:rgba(16,24,40,.1); background:rgba(255,255,255,.8); font-size:13px; font-weight:600; }
body.vc-ui .ws-file__size { font-family:var(--font-sans); font-size:12px; font-weight:600; }
body.vc-ui .vc-message--staff a.ws-file { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.14); color:#fff; text-decoration:none; }
body.vc-ui .vc-message--staff a.ws-file:hover { background:rgba(255,255,255,.22); }
body.vc-ui .vc-message--staff .ws-file__size { color:rgba(255,255,255,.8); }
body.vc-ui .vc-fold__line { border-color:rgba(16,24,40,.2); border-radius:18px; background:rgba(255,255,255,.5); }
body.vc-ui .vc-fold__line:hover { background:rgba(255,255,255,.75); }
@media (min-width:860px) {
    body.vc-ui .ws-thread .vc-message:not(.vc-message--staff):not(.vc-message--note) { margin-right:56px; }
    body.vc-ui .ws-thread .vc-message--staff { margin-left:56px; }
}

/* Chat transcript: the same bubbles, with who and when above each one */
body.vc-ui .chat-transcript { padding:20px 22px; }
body.vc-ui .chat-message { display:flex; flex-direction:column; align-items:flex-start; max-width:min(80%,72ch); margin-bottom:14px; }
body.vc-ui .chat-message--staff { align-items:flex-end; }
body.vc-ui .chat-message__meta { padding:0 6px; font-size:12px; font-weight:600; }
body.vc-ui .chat-message__body { margin:5px 0 0; padding:11px 15px; }
body.vc-ui .chat-message--staff .chat-file a { color:var(--acc-strong); }

/* Reply box: a white card docked at the foot of the conversation, violet while writing a private note */
body.vc-ui :is(.ws-composer,.chat-composer) {
    border:1px solid rgba(255,255,255,.9);
    border-radius:24px;
    background-color:rgba(255,255,255,.9);
    box-shadow:0 0 0 1px rgba(16,24,40,.07),0 18px 36px -20px rgba(16,24,40,.45);
}
body.vc-ui .chat-composer { margin:0 16px 16px; padding:10px 12px; }
body.vc-ui .ws-composer:focus-within { border-color:rgba(255,255,255,.9); }
body.vc-ui .ws-composer--note {
    border-color:rgba(123,79,160,.3);
    background-image:linear-gradient(rgba(123,79,160,.07),rgba(123,79,160,.07));
    box-shadow:0 0 0 1px rgba(123,79,160,.18),0 18px 36px -20px rgba(16,24,40,.45);
}
body.vc-ui .ws-composer__head { padding:10px 10px 0; border-bottom:0; }
body.vc-ui .ws-composer__to { min-height:0; padding:10px 18px 0; border-bottom:0; }
body.vc-ui :is(.ws-composer__title,.ws-composer__text) { padding:10px 18px 6px; }
body.vc-ui .ws-composer__title { border-bottom-color:rgba(16,24,40,.07); }
body.vc-ui .ws-composer__foot { padding:6px 10px 10px 12px; border-top:0; }
body.vc-ui .ws-saved { font-family:var(--font-sans); font-size:12px; font-weight:600; }
/* The card shows focus in the writing area, rather than a square inside its rounded corners */
@supports selector(:has(*)) {
    body.vc-ui :is(.ws-composer__title,.ws-composer__text):focus-visible { outline:0; }
    body.vc-ui .ws-composer:has(:is(.ws-composer__title,.ws-composer__text):focus-visible) { border-color:#1268d3; box-shadow:0 0 0 1px #1268d3,0 18px 36px -20px rgba(16,24,40,.45); }
}

/* Details: each section a card of its own */
body.vc-ui .ws-details { gap:12px; padding:14px 10px 18px; }
body.vc-ui .ws-details__head { padding:2px 2px 0 6px; }
body.vc-ui .ws-details .ws-sec { padding:14px; border:1px solid rgba(255,255,255,.85); border-radius:20px; background:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(16,24,40,.05); }
body.vc-ui .ws-fact dd { font-size:13.5px; }
/* Room in the paired facts' columns for "Open · waiting on us" and "Support  Transfer" on one line, even beside a scrollbar */
body.vc-ui .ws-details .ws-facts { column-gap:12px; }
body.vc-ui .ws-details .ws-facts:not(.ws-facts--list) .vc-copy { padding:2px 8px; }
/* A value's button sits at the end of its line, or under the value at the left when the two don't fit */
body.vc-ui .ws-fact dd:has(> .vc-copy) { justify-content:space-between; }
body.vc-ui .ws-fact dd:has(> .vc-copy) > .vc-copy { margin-left:0; }
body.vc-ui .ws-cust__name { font-size:16px; font-weight:800; }
body.vc-ui .vc-copy { padding:2px 10px; border-color:rgba(16,24,40,.1); background:rgba(255,255,255,.85); color:#344054; font-family:var(--font-sans); font-size:12px; font-weight:700; }
body.vc-ui .vc-copy:hover { border-color:rgba(18,104,211,.35); color:#0f59b6; }
body.vc-ui .ws-sec__count { font-family:var(--font-sans); font-size:12px; font-weight:700; }
body.vc-ui a.ws-related .ws-num { color:#0f59b6; }
body.vc-ui .chat-context { padding:18px; }

/* Lists with a preview column (Premade Replies, System Logs), as on boards A2 · Premade replies and A2 · Admin */

/* The list's head: its title and count with the page's action, then its search and tabs */
body.vc-ui .vc-listhead { flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:12px; padding:18px 20px 14px 22px; border-bottom-color:rgba(16,24,40,.07); }
body.vc-ui :is(.vc-listhead__top,.vc-listhead__bar) { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; min-width:0; }
body.vc-ui .vc-listhead .ws-tablehead__title { font-size:23px; line-height:30px; letter-spacing:-.02em; }
body.vc-ui .vc-listhead__count { background:rgba(16,24,40,.06); color:#475467; }
body.vc-ui .vc-listhead__count::before { display:none; }
body.vc-ui .vc-listhead__action { margin-left:auto; }
body.vc-ui .vc-listhead .ws-tablefind { flex:0 1 380px; }
body.vc-ui .vc-listhead .ws-tablefind .vc-search { max-width:none; }
body.vc-ui .vc-listhead__tabs .vc-tab { height:32px; padding:0 13px; font-size:13px; font-weight:700; }
body.vc-ui .vc-tab__count { font-family:var(--font-sans); font-size:12px; font-weight:600; }
/* A page's own action: frosted white with blue text, next to the one flat blue button in the preview */
body.vc-ui .vc-btn--frost { border-color:rgba(16,24,40,.1); background:rgba(255,255,255,.88); color:#1268d3; box-shadow:inset 0 1px 0 #fff,0 6px 16px -10px rgba(16,24,40,.35); }
body.vc-ui .vc-btn--frost:hover { background:#fff; color:#0b4fa6; }
body.vc-ui .vc-pager__selected { min-width:96px; }
body.vc-ui .vc-btn--icon { width:32px; padding:0; justify-content:center; }

/* The open row: white, with a blue edge */
body.vc-ui [data-preview-row] { cursor:pointer; }
body.vc-ui .vc-table tbody tr[aria-current="true"] td { background:#fff; }
body.vc-ui .vc-table tbody tr[aria-current="true"] td:first-child { box-shadow:inset 3px 0 0 #1268d3; }
body.vc-ui .vc-table tbody tr[aria-current="true"] .vc-row-link { color:#0b4fa6; }

/* The preview column */
body.vc-ui .vc-preview { position:relative; display:flex; flex:none; flex-direction:column; gap:14px; width:420px; min-height:0; padding:22px; overflow:auto; scrollbar-width:thin; }
body.vc-ui .vc-preview:focus:not(:focus-visible) { outline:0; }
body.vc-ui .vc-preview__head { display:flex; align-items:flex-start; gap:10px; }
body.vc-ui .vc-preview__titles { flex:1; min-width:0; }
body.vc-ui .vc-preview__eyebrow { margin:0; color:#5b6577; font-size:11px; font-weight:800; letter-spacing:.09em; line-height:14px; text-transform:uppercase; }
body.vc-ui .vc-preview__title { margin:8px 0 0; color:var(--ink); font-size:21px; font-weight:800; line-height:27px; letter-spacing:-.01em; overflow-wrap:anywhere; }
body.vc-ui .vc-preview__sub { margin:4px 0 0; color:#5b6577; font-size:13px; font-weight:600; }
body.vc-ui .vc-preview__close { flex:none; width:34px; height:34px; padding:0; justify-content:center; }
body.vc-ui .vc-preview__chips { display:flex; flex-wrap:wrap; gap:6px; }
body.vc-ui .vc-preview__chips .vc-chip:not(.vc-chip--live):not(.vc-chip--attention):not(.vc-chip--danger)::before { display:none; }
body.vc-ui .vc-preview__card { padding:18px; border:1px solid rgba(255,255,255,.85); border-radius:20px; background:rgba(255,255,255,.82); box-shadow:0 0 0 1px rgba(16,24,40,.05); }
body.vc-ui .vc-preview__text { color:#1d2433; font-family:var(--font-read); font-size:14.5px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
body.vc-ui .vc-preview__hint { margin:0; color:#5b6577; font-size:12.5px; line-height:1.45; }
body.vc-ui .vc-preview__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:4px; }
body.vc-ui .vc-preview__actions form { display:flex; margin:0; }
body.vc-ui .vc-preview__actions > :not(:last-child) { flex:1 1 0; }
body.vc-ui .vc-preview__actions > :not(:last-child) .vc-btn,
body.vc-ui .vc-preview__actions > a.vc-btn { flex:1; justify-content:center; }
body.vc-ui .vc-preview__empty { margin:auto 0; color:#5b6577; font-size:13.5px; line-height:1.5; text-align:center; }
body.vc-ui .vc-preview__empty strong { display:block; margin-bottom:4px; color:var(--ink); font-size:15px; font-weight:800; }
body.vc-ui .vc-preview__empty p { margin:0 auto; max-width:30ch; }
/* A preview that only shows while something is open (System Logs) gives the list the whole width otherwise */
body.vc-ui .vc-preview--collapse.vc-preview--empty { display:none; }
/* Narrower windows: the preview slides over the list, and only while something is open */
@media (max-width:1099px) {
    body.vc-ui .vc-preview { position:absolute; top:0; right:0; bottom:0; z-index:6; width:min(420px,100%); }
    body.vc-ui .vc-preview--empty { display:none; }
}
@media (max-width:859px) {
    body.vc-ui .vc-preview { position:fixed; top:auto; right:8px; bottom:8px; left:8px; z-index:40; width:auto; max-height:calc(100dvh - 96px); border:1px solid var(--a2-glass-edge); border-radius:24px; background:rgba(255,255,255,.96); box-shadow:0 30px 60px -20px rgba(16,24,40,.5); }
}

/* The Directory, as on board A2 · Directory: a card for each member, with whether they're taking chats */
body.vc-ui .vc-listhead__find { flex:0 1 340px; margin-left:auto; }
body.vc-ui .vc-people { padding:16px 22px 22px; }
body.vc-ui .vc-directory .vc-listhead { border-bottom:0; padding-bottom:4px; }
body.vc-ui .vc-people__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
body.vc-ui .vc-person { display:flex; flex-direction:column; gap:14px; min-width:0; padding:20px; border:1px solid rgba(255,255,255,.85); border-radius:22px; background:rgba(255,255,255,.74); box-shadow:0 0 0 1px rgba(16,24,40,.05),0 16px 32px -26px rgba(16,24,40,.4); }
body.vc-ui .vc-person__top { display:flex; align-items:center; gap:14px; min-width:0; }
body.vc-ui .vc-person__avatar { position:relative; display:grid; place-items:center; flex:none; width:56px; height:56px; border-radius:50%; color:#fff; font-size:17px; font-weight:800; }
body.vc-ui .vc-person__pres { position:absolute; right:0; bottom:0; box-sizing:border-box; width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:#98a2b3; }
body.vc-ui .vc-person__pres--available { background:#3fae1a; }
body.vc-ui .vc-person__pres--offline { background:#fff; box-shadow:inset 0 0 0 2px #98a2b3; }
body.vc-ui .vc-person__who { flex:1; min-width:0; }
body.vc-ui .vc-person__name { margin:0; color:var(--ink); font-size:17px; font-weight:800; line-height:22px; overflow-wrap:anywhere; }
body.vc-ui .vc-person__dept { margin:2px 0 0; color:#5b6577; font-size:13px; }
body.vc-ui :is(.vc-chip--you,.vc-chip--violet)::before { display:none; }
body.vc-ui .vc-chip--you { background:rgba(18,104,211,.1); color:#0f59b6; }
body.vc-ui .vc-chip--violet { background:var(--a2-violet-soft); color:var(--a2-violet-ink); }
body.vc-ui .vc-person__status { display:flex; align-items:center; gap:7px; margin:-4px 0 0; color:#475467; font-size:12.5px; font-weight:700; }
body.vc-ui .vc-person__status--available { color:var(--a2-green-ink); }
body.vc-ui .vc-person__dot { flex:none; width:7px; height:7px; border-radius:50%; background:#98a2b3; }
body.vc-ui .vc-person__status--available .vc-person__dot { background:var(--a2-green); }
body.vc-ui .vc-person__contact { display:flex; flex-direction:column; gap:2px; margin:0; padding:12px 0 0; border-top:1px solid rgba(16,24,40,.07); }
body.vc-ui .vc-person__contact div { display:flex; align-items:center; gap:10px; min-width:0; padding:5px 0; font-size:13.5px; }
body.vc-ui .vc-person__contact dt { flex:none; width:58px; color:#5b6577; font-size:12.5px; font-weight:600; }
body.vc-ui .vc-person__contact dd { flex:1; min-width:0; margin:0; overflow:hidden; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
body.vc-ui .vc-person__number { font-family:var(--font-mono); font-size:13px; font-weight:500; }
body.vc-ui .vc-person__unset { color:#5b6577; font-weight:500 !important; }
@media (max-width:1199px) {
    body.vc-ui .vc-people__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:859px) {
    body.vc-ui .vc-people { padding:0; }
    body.vc-ui .vc-people__grid { grid-template-columns:minmax(0,1fr); }
    body.vc-ui .vc-listhead__find { flex-basis:100%; margin-left:0; }
}

/* System Logs, as on board A2 · Admin: type chips without dots, the dates in one pill beside the search */
body.vc-ui .vc-syslog .vc-chip::before,
body.vc-ui .vc-chip--plain::before { display:none; }
body.vc-ui .vc-chip--plain { background:rgba(16,24,40,.07); color:#475467; }
body.vc-ui .vc-listhead .vc-syslog__find { flex:0 1 auto; flex-wrap:nowrap; }
body.vc-ui .vc-syslog__find .vc-search { flex:1 1 220px; max-width:340px; }
body.vc-ui .vc-syslog__dates { display:flex; flex:none; align-items:center; gap:6px; height:40px; padding:0 8px 0 14px; border:1px solid rgba(16,24,40,.1); border-radius:999px; background:rgba(255,255,255,.78); box-shadow:inset 0 1px 2px rgba(16,24,40,.05); color:#5b6577; font-size:12.5px; font-weight:600; }
body.vc-ui .vc-syslog__dates:focus-within { border-color:#1268d3; }
body.vc-ui .vc-syslog__date { width:auto; height:30px; padding:0 4px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:inherit; font-size:13px; }
body.vc-ui .vc-syslog__date:focus-visible { outline:2px solid #1268d3; outline-offset:0; }
body.vc-ui .vc-syslog__table { table-layout:fixed; }
body.vc-ui .vc-syslog__table td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.vc-ui .vc-syslog__col-type { width:104px; }
body.vc-ui .vc-syslog__col-title { width:230px; }
body.vc-ui .vc-syslog__col-ip { width:140px; }
body.vc-ui .vc-syslog__col-date { width:110px; }
body.vc-ui .vc-syslog .vc-preview { width:384px; }
body.vc-ui .vc-preview__titles > .vc-chip + .vc-preview__title { margin-top:10px; }
body.vc-ui .vc-preview__facts { display:grid; grid-template-columns:110px minmax(0,1fr); gap:9px 12px; margin:0; font-size:13.5px; }
body.vc-ui .vc-preview__facts dt { color:#5b6577; font-weight:600; }
body.vc-ui .vc-preview__facts dd { min-width:0; margin:0; font-weight:600; overflow-wrap:anywhere; }
body.vc-ui .vc-preview__number { font-family:var(--font-mono); font-size:13px; font-weight:500 !important; }
body.vc-ui .vc-preview__label { margin-bottom:8px; }
body.vc-ui .vc-preview__log { margin:0; padding:14px 15px; border:1px solid rgba(16,24,40,.08); border-radius:16px; background:rgba(16,24,40,.04); color:#1d2939; font-family:var(--font-mono); font-size:12px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
body.vc-ui .vc-preview__actions--end > * { flex:none !important; }
body.vc-ui .vc-preview__actions--end > form:last-child { margin-left:auto; }
@media (max-width:859px) {
    body.vc-ui .vc-listhead .vc-syslog__find { flex-wrap:wrap; }
    body.vc-ui .vc-syslog__find .vc-search { max-width:none; }
    body.vc-ui .vc-syslog__dates { flex:1 1 100%; flex-wrap:wrap; height:auto; min-height:44px; padding:4px 12px; border-radius:22px; }
    body.vc-ui .vc-syslog__date { flex:1 1 8em; min-width:0; height:36px; }
    /* Tabs that wrap onto two lines keep a rounded box rather than a stretched pill */
    body.vc-ui .vc-tabs { border-radius:22px; }
}

/* Server Monitor, as on board A2 · Server Monitor: the totals and each table in white cards of their own */
body.vc-ui .vc-monitor__titles .vc-updated { margin:3px 0 0; color:#5b6577; font-family:var(--font-sans); font-size:13px; font-weight:600; }
body.vc-ui .vc-monitor .vc-stat__value { font-size:26px; font-weight:800; letter-spacing:-.02em; }
body.vc-ui .vc-monitor .vc-stat__unit { margin-left:6px; color:#5b6577; font-family:var(--font-sans); font-size:14px; font-weight:700; }
body.vc-ui .vc-monitor__silent { display:flex; align-items:center; gap:6px; margin:6px 0 0; color:var(--a2-magenta-ink); font-size:12.5px; font-weight:700; }
body.vc-ui .vc-monitor__silent::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--a2-magenta); }
body.vc-ui .vc-monitor__name { display:block; margin:1px 0 0; color:#5b6577; font-family:var(--font-sans); font-size:12.5px; font-weight:500; }
body.vc-ui .vc-monitor .vc-cell-strong { line-height:1.3; }
@media (min-width:860px) {
    body.vc-ui .vc-main--wide .vc-monitor .vc-page__top { padding-bottom:14px; }
    body.vc-ui .vc-main--wide .vc-monitor__stats { gap:12px; margin:0; padding:0 18px 12px; border:0; }
    body.vc-ui .vc-main--wide .vc-monitor__stats .vc-stat,
    body.vc-ui .vc-main--wide .vc-monitor__stats .vc-stat--lime,
    body.vc-ui .vc-main--wide .vc-monitor__section { border:1px solid rgba(255,255,255,.85); border-radius:22px; background:rgba(255,255,255,.72); box-shadow:0 0 0 1px rgba(16,24,40,.05),0 16px 32px -26px rgba(16,24,40,.4); }
    body.vc-ui .vc-main--wide .vc-monitor__stats .vc-stat { padding:14px 18px; }
    body.vc-ui .vc-main--wide .vc-monitor__section { margin:0 18px 12px; overflow:hidden; }
    body.vc-ui .vc-main--wide .vc-monitor__section:last-child { margin-bottom:18px; }
    body.vc-ui .vc-main--wide .vc-monitor__head { padding:16px 20px 10px; }
    body.vc-ui .vc-main--wide .vc-monitor .vc-table-wrap { border-width:1px 0 0; border-color:rgba(16,24,40,.07); background:transparent; }
    body.vc-ui .vc-main--wide .vc-monitor__table tr > :first-child { padding-left:20px; }
    body.vc-ui .vc-main--wide .vc-monitor__table tr > :last-child { padding-right:20px; }
    body.vc-ui .vc-main--wide .vc-monitor__table tbody tr:last-child td { border-bottom:0; }
}

/* Info Panel's account totals read as words, as on board A2 · Info Panel; the codes and numbers below stay mono */
body.vc-ui .vc-ip-stats .vc-stat__value { font-family:var(--font-sans); font-weight:800; letter-spacing:-.02em; }
body.vc-ui .vc-ip-stats .vc-stat__unit { color:#5b6577; font-family:var(--font-sans); font-size:12.5px; font-weight:600; }
/* and the customer's avatar beside their name: the ticket messages' initials in a brand ring */
body.vc-ui .vc-ip-who { display:flex; align-items:center; gap:14px; margin-top:12px; }
body.vc-ui .vc-ip-who__text { flex:1; min-width:0; }
body.vc-ui .vc-ip-who .ws-convo__title { margin-top:0; }
body.vc-ui .vc-ip-avatar { display:grid; place-items:center; flex:none; width:54px; height:54px; border:3px solid transparent; border-radius:50%;
    background:linear-gradient(135deg,#b8306f,#5e3591) padding-box,conic-gradient(from 200deg,#1e96d2,#7b4fa0,#c8467e,#1e96d2) border-box;
    box-shadow:inset 0 0 0 2px #fff; color:#fff; font-size:16px; font-weight:800; letter-spacing:.02em; }
@media (max-width:859px) {
    body.vc-ui .vc-ip-who { order:1; width:100%; gap:12px; margin-top:6px; }
    body.vc-ui .vc-ip-avatar { width:46px; height:46px; font-size:14px; }
}

/* Phones: the Info Panel's tables and the admin pages' older lists as cards rather than sideways scrolling, one per
   row, of labelled values two to a line. Long values (an email, URL, file, subject) take a whole line, a tap anywhere
   on the card opens what its row's link opens, and an admin list's checkbox sits at the card's left with the row's
   name as its title. The headings, and sorting by them, are left to wider screens. Info Panel cells are labelled
   on the server, the admin lists' by js/panel.js from their heading row. */
@media (max-width:859px) {
    body.vc-ui :is(.vc-ip-table,.vc-legacy table.vc-cards),
    body.vc-ui :is(.vc-ip-table,.vc-legacy table.vc-cards) > tbody { display:block; width:100%; min-width:0; }
    body.vc-ui .vc-ip-table > thead,
    body.vc-ui .vc-legacy table.vc-cards tr.vc-cards__head { display:none; }
    body.vc-ui :is(.vc-ip-table,.vc-legacy table.vc-cards) > tbody > tr { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row dense; gap:10px 16px; padding:14px 16px; border-top:1px solid rgba(16,24,40,.07); background:transparent; }
    body.vc-ui .vc-ip-table > tbody > tr:first-child,
    body.vc-ui .vc-legacy table.vc-cards tr.vc-cards__head + tr { border-top:0; }
    body.vc-ui :is(.vc-ip-table,.vc-legacy table.vc-cards) > tbody > tr:hover { background:rgba(255,255,255,.55); }
    body.vc-ui .vc-ip-table > tbody > tr.is-current { background:var(--lime-tint); box-shadow:inset 3px 0 0 var(--ink); }
    body.vc-ui .vc-legacy table.vc-cards > tbody > tr.highlight { background:var(--lime-soft); }
    body.vc-ui :is(.vc-ip-table,.vc-legacy table.vc-cards) > tbody > tr > td { display:block; min-width:0; padding:0; border:0; background:transparent; box-shadow:none; text-align:left; white-space:normal; overflow-wrap:anywhere; }
    body.vc-ui .vc-ip-table td.vc-cell-mono { font-size:12px; letter-spacing:-.02em; }
    body.vc-ui :is(.vc-ip-table,.vc-legacy table.vc-cards) td[data-label]::before { content:attr(data-label); display:block; margin-bottom:2px; color:#5b6577; font-family:var(--font-sans); font-size:11px; font-weight:700; line-height:14px; letter-spacing:.06em; text-transform:uppercase; }
    body.vc-ui :is(.vc-ip-table,.vc-legacy table.vc-cards) > tbody > tr > :is(td.vc-ip-wrap,td:not([data-label]),td.vc-cards__title) { grid-column:1 / -1; }
    body.vc-ui .vc-ip-table a.vc-row-link::after,
    body.vc-ui .vc-legacy table.vc-cards td.vc-cards__title a:first-of-type::after { content:""; position:absolute; inset:0; }
    body.vc-ui .vc-ip-table td a:not(.vc-row-link),
    body.vc-ui .vc-legacy table.vc-cards td:not(.vc-cards__title) :is(a,input,select,button) { position:relative; z-index:1; }
    body.vc-ui .vc-legacy table.vc-cards > tbody > tr:has(> td.vc-cards__pick) { padding-left:52px; }
    body.vc-ui .vc-legacy table.vc-cards > tbody > tr > td.vc-cards__pick { position:absolute; top:16px; left:16px; z-index:1; grid-column:auto; }
    body.vc-ui .vc-legacy table.vc-cards td.vc-cards__title { font-size:15px; line-height:21px; }
    body.vc-ui .vc-legacy table.vc-cards td.vc-cards__title::before { display:none; }
}

/* The Support table (inbox.php), as on board A2 · Table: chats and tickets in one table, each row's type an icon
   (violet chat, blue ticket), a chat's wait or run time in its chip, and All/Chats/Tickets beside the layout switch */
body.vc-ui .vc-chip--info { background:rgba(18,104,211,.1); color:#0f59b6; }
body.vc-ui .vc-chip--info::before { background:#1268d3; }
body.vc-ui .vc-queue .vc-inbox { min-width:1200px; }
body.vc-ui .vc-inbox .vc-col-type { width:52px; }
body.vc-ui .vc-inbox .vc-col-id { width:92px; }
body.vc-ui .vc-inbox .vc-col-from { width:150px; }
body.vc-ui .vc-inbox .vc-col-dept { width:146px; }
body.vc-ui .vc-inbox .vc-col-pri { width:124px; }
body.vc-ui .vc-inbox .vc-col-opened { width:84px; }
body.vc-ui .vc-inbox .vc-col-due { width:162px; }
body.vc-ui .vc-inbox .vc-col-who { width:116px; }
body.vc-ui .vc-inbox .vc-col-activity { width:108px; }
body.vc-ui .vc-inbox td.vc-inbox__type { padding-right:0; text-overflow:clip; }
body.vc-ui .vc-type { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; vertical-align:middle; }
body.vc-ui .vc-type .ws-svg { width:16px; height:16px; }
body.vc-ui .vc-type--chat { background:var(--a2-violet-soft); color:var(--a2-violet-ink); }
body.vc-ui .vc-type--ticket { background:rgba(18,104,211,.1); color:#0f59b6; }
/* An empty chat reads as a note, not a subject */
body.vc-ui .vc-inbox .vc-row-link--empty { color:#667085; font-weight:500; }
body.vc-ui .vc-inbox .vc-chip { white-space:nowrap; font-variant-numeric:tabular-nums; }
body.vc-ui .ws-typeswitch { flex:none; }
body.vc-ui .ws-typeswitch .vc-tab { gap:6px; height:28px; padding:0 12px; font-size:.875rem; }
body.vc-ui .ws--inbox .ws-tablefind { flex:1 1 520px; }
body.vc-ui .ws--inbox .ws-tablefind .ws-filters { display:flex; flex:1 1 auto; flex-wrap:wrap; gap:8px; }
body.vc-ui .ws--inbox .ws-tablefind .ws-filter { flex:0 1 auto; width:auto; max-width:15em; }
@media (max-width:859px) {
    /* Phones: the way back to the workspace stays in the head, the filters share one row that scrolls sideways,
       and each row is a card as in the workspace list: who and when, then the subject or last message, then its
       state and owner, the whole card opening it */
    body.vc-ui .ws.ws--inbox > .ws-head { flex-wrap:wrap; }
    body.vc-ui .ws.ws--inbox > .ws-head .ws-switch { order:3; display:flex; flex:none; }
    body.vc-ui .ws--inbox .ws-tablefind .ws-filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    body.vc-ui .ws--inbox .ws-tablefind .ws-filter { flex:none; }
    body.vc-ui .vc-queue .vc-inbox { --inbox-indent:36px; display:block; min-width:0; }
    body.vc-ui .vc-queue .vc-inbox--pick { --inbox-indent:64px; }
    body.vc-ui .vc-inbox thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
    body.vc-ui .vc-inbox tbody { display:block; }
    body.vc-ui .vc-inbox tbody tr { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:12px 16px 12px calc(16px + var(--inbox-indent)); border-bottom:1px solid var(--rule); }
    body.vc-ui .vc-inbox tbody tr[aria-selected="true"] { background:var(--lime-soft); }
    body.vc-ui .vc-queue .vc-table.vc-inbox tbody tr[aria-selected] > td { background:none; }
    body.vc-ui .vc-queue .vc-inbox tbody td { position:static; display:block; min-width:0; padding:0; border:0; background:none; box-shadow:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    body.vc-ui .vc-inbox tbody tr > :first-child { margin-left:calc(-1 * var(--inbox-indent)); }
    body.vc-ui .vc-queue .vc-inbox tbody td.vc-inbox__pick { position:relative; z-index:1; flex:0 0 20px; overflow:visible; }
    body.vc-ui .vc-inbox .vc-inbox__type { order:1; flex:0 0 28px; padding:0; }
    body.vc-ui .vc-inbox .vc-inbox__from { order:2; flex:1 1 0; color:var(--ink); font-weight:700; }
    body.vc-ui .vc-inbox .vc-inbox__activity { order:3; flex:none; font-size:12.5px; }
    body.vc-ui .vc-inbox .vc-inbox__subject { order:4; flex:1 1 100%; }
    body.vc-ui .vc-inbox .vc-inbox__due { order:5; flex:none; font-size:13px; }
    body.vc-ui .vc-inbox .vc-inbox__pri { order:6; flex:none; font-size:13px; }
    body.vc-ui .vc-inbox .vc-inbox__dept { order:7; flex:1 1 0; color:#667085; font-size:13px; }
    body.vc-ui .vc-inbox .vc-inbox__who { order:8; flex:none; margin-left:auto; font-size:13px; }
    body.vc-ui .vc-queue .vc-inbox tbody :is(.vc-inbox__num,.vc-inbox__opened,.is-empty) { display:none; }
    body.vc-ui .vc-inbox .vc-row-link::after { content:""; position:absolute; inset:0; }

    /* The top bar's chat availability as a dot and one short word, so it stays on one line */
    body.vc-ui .vc-shell .chat-shell { flex-wrap:nowrap; }
    body.vc-ui .vc-shell [data-chat-availability] { gap:6px; padding:0 12px; font-size:0; white-space:nowrap; }
    body.vc-ui .vc-shell [data-chat-availability]::before { content:""; width:8px; height:8px; border-radius:50%; background:#98a2b3; }
    body.vc-ui .vc-shell [data-chat-availability][aria-pressed="true"]::before { background:var(--a2-green); }
    body.vc-ui .vc-shell [data-chat-availability]::after { content:"Away"; content:"Away" / ""; font-size:13px; font-weight:700; }
    body.vc-ui .vc-shell [data-chat-availability][aria-pressed="true"]::after { content:"Available"; content:"Available" / ""; }
}
@media (max-width:379px) {
    body.vc-ui .vc-shell .vc-nav__brand img { height:17px; }
}

/* Phones, as on boards A2 · Phone: a compact top bar, the sections in a tab bar floating at the bottom, and
 * anything that sits on the bottom edge lifted above it. The bar is the same links (js/nav.js swaps them), so the
 * top bar loses its blur here: a blurred parent would hold a fixed child inside it. */
@media (max-width:859px) {
    body.vc-ui { --a2-tabbar:calc(76px + env(safe-area-inset-bottom, 0px)); }
    body.vc-ui .vc-nav.vc-shell { position:static; flex-wrap:nowrap; min-height:56px; margin:8px 8px 0; padding:6px 6px 6px 16px; gap:8px; border-radius:28px; background:rgba(255,255,255,.86); -webkit-backdrop-filter:none; backdrop-filter:none; }
    body.vc-ui .vc-shell .vc-nav__brand img { height:20px; }
    body.vc-ui .vc-shell .vc-nav__end { flex-wrap:nowrap; gap:6px; min-width:0; }
    body.vc-ui .vc-shell .vc-nav__end > .vc-nav__link { display:none; }
    body.vc-ui .vc-shell .chat-connection { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    body.vc-ui .vc-shell [data-chat-availability] { min-height:40px; padding:0 14px; }
    body.vc-ui .chat-settings > summary { width:40px; min-height:40px; padding:0; justify-content:center; }
    body.vc-ui .chat-settings__label { display:none; }
    body.vc-ui .chat-settings__icon { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    body.vc-ui .vc-account__switch { display:block; }

    body.vc-ui .vc-shell .vc-nav__links { position:fixed; right:8px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); left:8px; z-index:45; display:flex; flex-wrap:nowrap; gap:2px; padding:6px; border:1px solid var(--a2-glass-edge); border-radius:30px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:var(--a2-glass-blur); backdrop-filter:var(--a2-glass-blur); box-shadow:0 0 0 1px rgba(16,24,40,.05),0 18px 40px -16px rgba(16,24,40,.5); }
    body.vc-ui .vc-shell .vc-nav__links .vc-nav__link { position:relative; flex:1 1 0; flex-direction:column; justify-content:center; gap:3px; min-width:0; min-height:54px; padding:6px 2px; border-radius:24px; color:#475467; font-size:11px; font-weight:700; line-height:13px; }
    body.vc-ui .vc-shell .vc-nav__links .vc-nav__link[aria-current="page"] { background:#fff; color:#1268d3; box-shadow:var(--a2-raised); }
    body.vc-ui .vc-nav__icon { display:block; flex:none; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    body.vc-ui .vc-nav__long { display:none; }
    body.vc-ui .vc-nav__short { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    body.vc-ui .vc-nav__links .vc-count { position:absolute; top:3px; left:calc(50% + 3px); min-width:18px; height:18px; padding:0 5px; border:2px solid #fff; font-size:10px; line-height:14px; }

    /* Room under the page for the tab bar, and the things that sit on the bottom edge above it */
    body.vc-ui #content.vc-main,
    body.vc-ui #content.vc-main.vc-main--wide { padding-bottom:calc(var(--a2-tabbar) + 20px); }
    body.vc-ui .vc-bulk { bottom:calc(var(--a2-tabbar) + 8px); left:8px; right:8px; transform:none; }
    body.vc-ui .vc-bulkbar { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:8px 10px; border-radius:24px; }
    body.vc-ui .vc-bulkbar > span:first-child { flex:1 1 100%; text-align:center; }
    body.vc-ui .ws-bulk { bottom:var(--a2-tabbar); }
    body.vc-ui .vc-preview { bottom:calc(var(--a2-tabbar) + 4px); max-height:calc(100dvh - var(--a2-tabbar) - 88px); }
}
@media (max-width:859px) {
    /* An open ticket or chat is a screen of its own, with Back at the top and the reply box at the bottom */
    body.vc-ui:has(.vc-ticket, .chat-workspace.has-selection) { --a2-tabbar:0px; }
    body.vc-ui:has(.vc-ticket, .chat-workspace.has-selection) .vc-shell .vc-nav__links { display:none; }

    /* Tickets and Support: compact headers, list-owned refresh controls, and filters on a scrolling row. */
    body.vc-ui .ws > .ws-head { flex-wrap:nowrap; gap:10px; }
    body.vc-ui .ws > .ws-head :is(.ws-switch,.ws-head__refresh) { display:none; }
    body.vc-ui .ws > .ws-head .ws-head__end { flex-wrap:nowrap; }

    /* Keep the title, layout switch and New ticket on the same mobile row. */
    body.vc-ui :is(.chat-workspace--shared,.ws--queue,.ws--table) > .ws-head:has(> .ws-switch) { flex-wrap:nowrap; gap:4px; }
    body.vc-ui :is(.chat-workspace--shared,.ws--queue,.ws--table) > .ws-head:has(> .ws-switch) > .ws-head__title { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:clamp(18px,5.6vw,24px); line-height:1.2; white-space:nowrap; }
    /* Give the switch its normal breathing room; compact it only on the narrowest phones. */
    body.vc-ui :is(.chat-workspace--shared,.ws--queue,.ws--table) > .ws-head:has(> .ws-switch) > .ws-switch { order:1; display:flex; flex:none; margin-left:clamp(0px,calc(8vw - 25.6px),6px); gap:clamp(0px,calc(8vw - 25.6px),4px); padding:clamp(2px,calc(2vw - 4.4px),3px); }
    body.vc-ui :is(.chat-workspace--shared,.ws--queue,.ws--table) > .ws-head:has(> .ws-switch) > .ws-switch .vc-tab { min-width:44px; min-height:44px; padding-inline:clamp(4px,calc(12vw - 37px),10px); font-size:clamp(12px,3.6vw,14px); white-space:nowrap; }
    body.vc-ui :is(.chat-workspace--shared,.ws--queue,.ws--table) > .ws-head:has(> .ws-switch) > :is(.vc-btn--primary,.ws-head__end) { order:2; flex:none; margin-left:auto; }
    body.vc-ui :is(.chat-workspace--shared,.ws--queue,.ws--table) > .ws-head:has(> .ws-switch) .vc-btn--primary { min-height:44px; padding-inline:6px; gap:3px; font-size:clamp(12px,3.6vw,14px); white-space:nowrap; }
    body.vc-ui :is(.ws--queue,.ws--table) > .ws-head:has(> .ws-switch) > .ws-head__end > .vc-btn:not(.vc-btn--primary) { display:none; }

    /* Empty conversation panes normally hide on phones; keep action results above the list. */
    body.vc-ui .ws--queue.ws--notice > .ws-body { display:flex; flex-direction:column; }
    body.vc-ui .ws--queue.ws--notice > .ws-body > :is(.ws-list,.support-list) { order:2; }
    body.vc-ui .ws--queue.ws--notice > .ws-body > .ws-convo--none { display:flex; flex:none; order:1; margin-bottom:12px; }
    body.vc-ui .ws--queue.ws--notice .ws-convo--none .ws-state { display:none; }
    body.vc-ui .ws--notice:not(.has-selection) > .chat-columns > [data-chat-external-list] { order:2; }
    body.vc-ui .ws--notice:not(.has-selection) > .chat-columns > [data-chat-native-pane] { flex:none; order:1; margin-bottom:12px; }
    body.vc-ui .ws--notice:not(.has-selection) > .chat-columns > [data-chat-native-pane] > [data-chat-empty] { display:none; }
    body.vc-ui .ws--notice :is(.ws-convo--none,[data-chat-native-pane]) > .ws-alerts > .vc-alert { margin-bottom:12px; }

    body.vc-ui .ws-list .ws-filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    body.vc-ui .ws-list .ws-filters::-webkit-scrollbar { display:none; }
    body.vc-ui .ws-list .ws-filters .ws-filter { flex:0 0 auto; width:auto; max-width:12em; }

    /* A message's head: the avatar, the name over its role, and the time at the end of the line */
    body.vc-ui .ws-thread .vc-message__head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:0 10px; }
    body.vc-ui .ws-thread .vc-message__avatar { grid-row:1 / span 2; }
    body.vc-ui .ws-thread .vc-message__who { grid-column:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    body.vc-ui .ws-thread .vc-message__role { grid-column:2; grid-row:2; }
    body.vc-ui .ws-thread .vc-message__meta { grid-column:3; grid-row:1 / span 2; margin-left:0; }
    body.vc-ui .ws-thread .vc-message--note .vc-message__head { grid-template-columns:minmax(0,1fr) auto; }
    body.vc-ui .ws-thread .vc-message--note :is(.vc-message__who,.vc-message__role) { grid-column:1; }
    body.vc-ui .ws-thread .vc-message--note .vc-message__meta { grid-column:2; }

    /* Live chat: the conversation fills the screen down to the tab bar (or the bottom, once a chat is open) */
    body.vc-ui #content.vc-main:has(.chat-workspace) { padding-bottom:calc(var(--a2-tabbar) + 8px); }
    body.vc-ui .chat-columns { height:calc(var(--chat-height,calc(100dvh - 180px)) - var(--a2-tabbar) - 8px); }
    body.vc-ui .chat-conversation__head { gap:10px; padding:10px 12px; }
    body.vc-ui .chat-conversation__head h2 { font-size:17px; line-height:22px; }
    body.vc-ui .chat-mobile-back { min-height:40px; }
    body.vc-ui .chat-composer { margin:0 8px 8px; }

    /* Server Monitor: each host a card: name and status, its counts, its share of listeners, then its address */
    body.vc-ui .vc-monitor__table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    body.vc-ui .vc-monitor__table,
    body.vc-ui .vc-monitor__table tbody { display:block; }
    body.vc-ui .vc-monitor__table tbody tr:not([hidden]) { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:6px 14px; padding:14px 16px; border-bottom:1px solid rgba(16,24,40,.07); }
    body.vc-ui .vc-monitor__table tbody tr:last-child { border-bottom:0; }
    body.vc-ui .vc-monitor__table tbody td { display:block; min-width:0; padding:0; border:0; background:none; text-align:left; white-space:normal; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-host { grid-column:1 / span 3; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-status { grid-column:4; grid-row:1; justify-self:end; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-count { grid-row:2; font-family:var(--font-sans); font-size:13px; font-weight:800; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-count + .vc-monitor__c-count { grid-column:2; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-count::after { content:" " attr(data-label); color:#5b6577; font-weight:600; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-rate { grid-column:3 / span 2; grid-row:2; justify-self:end; font-size:12.5px; }
    body.vc-ui .vc-monitor__table .vc-monitor__kbps { display:none; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-share { grid-column:1 / -1; grid-row:3; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-ip { grid-column:1 / span 3; grid-row:4; color:#5b6577; font-size:12px; }
    body.vc-ui .vc-monitor__table tr:not(:has(.vc-monitor__c-count)) .vc-monitor__c-ip { grid-row:2; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-stats { grid-column:4; grid-row:4; justify-self:end; font-size:12.5px; }
    body.vc-ui .vc-monitor__table tr:not(:has(.vc-monitor__c-count)) .vc-monitor__c-stats { grid-row:2; }
    body.vc-ui .vc-monitor__table .vc-monitor__c-empty { display:none; }
    body.vc-ui .vc-monitor__table .vc-monitor__raw td { grid-column:1 / -1; }
    body.vc-ui .vc-monitor__name { display:inline; margin-left:6px; font-family:var(--font-mono); font-size:12px; }
    body.vc-ui .vc-monitor__section { margin-top:16px; border:1px solid rgba(255,255,255,.85); border-radius:22px; background:rgba(255,255,255,.72); box-shadow:0 0 0 1px rgba(16,24,40,.05),0 16px 32px -26px rgba(16,24,40,.4); overflow:hidden; }
    body.vc-ui .vc-monitor__head { margin:0; padding:14px 16px 8px; }
    body.vc-ui .vc-monitor .vc-table-wrap { margin:0; border:0; border-top:1px solid rgba(16,24,40,.07); border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
    body.vc-ui .vc-monitor .vc-page__top { flex-wrap:nowrap; align-items:flex-start; }
    body.vc-ui .vc-monitor .vc-page__end .vc-btn--frost { display:none; }
}

/* Login */
body.vc-ui.vc-login .vc-login__card {
    border:1px solid var(--a2-glass-edge);
    border-radius:30px;
    background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.6) 100%);
    -webkit-backdrop-filter:var(--a2-glass-blur);
    backdrop-filter:var(--a2-glass-blur);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(16,24,40,.05),0 40px 80px -36px rgba(16,24,40,.45);
}

/* From 860px wide the page's columns are separate glass panels, 12px apart and from the window's edges. The
 * workspace and chat scripts size them to the window, less this bottom gap. Phones keep their cards. */
@media (min-width:860px) {
    body.vc-ui #content.vc-main.vc-main--wide,
    body.vc-ui #content.vc-main:has(.chat-workspace,.chat-operations) { padding:var(--a2-gap); }
    body.vc-ui .chat-columns { height:calc(var(--chat-height,calc(100dvh - 100px)) - var(--a2-gap)); gap:var(--a2-gap); }
    body.vc-ui :is(.chat-workspace,.chat-operations) { background:transparent; }

    body.vc-ui .ws-body { gap:var(--a2-gap); overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
    body.vc-ui :is(.ws-rail,.ws-list,.ws-convo,.ws-details,.vc-preview,.support-list,.chat-list,.chat-conversation,.chat-context),
    body.vc-ui .vc-main--wide .vc-page {
        border:1px solid var(--a2-glass-edge);
        border-radius:var(--a2-radius);
        background:var(--a2-glass);
        -webkit-backdrop-filter:var(--a2-glass-blur);
        backdrop-filter:var(--a2-glass-blur);
        box-shadow:var(--a2-glass-shadow);
    }
    /* Inside a panel everything is see-through, so nothing squares off its rounded corners */
    body.vc-ui :is(.ws-thread,.chat-transcript,.ws-tablehead,.ws-tablefind,.ws-tablefoot,.chat-topbar,.ws-convo > .ws-bar,.ws-list__top,.ws-list__head,.support-list__head,.support-filters,.support-list__footer,.vc-table-wrap) { background:transparent; }
    body.vc-ui .ws-tableview .vc-table-wrap { border:0; box-shadow:none; }
    body.vc-ui .vc-page .vc-table-wrap { border-color:rgba(16,24,40,.06); background:rgba(255,255,255,.5); box-shadow:none; }
    body.vc-ui .vc-main--wide .vc-page.vc-legacy :is(table.dtable,table.logs,table.tform) { background:transparent; }
    body.vc-ui .vc-main--wide .vc-page.vc-legacy table.tform :is(td,th) { background:transparent; border-top-color:rgba(16,24,40,.07); }

    /* The queue rail: icons in a narrow glass column; the current queue raised in white and blue */
    body.vc-ui .ws-rail { padding:10px 0; }
    body.vc-ui .ws-rail a.ws-queue:hover,
    body.vc-ui .ws-rail__help:hover,
    body.vc-ui .ws-rail__help:focus { background:rgba(255,255,255,.6); }
    body.vc-ui .ws-rail a.ws-queue[aria-current="page"] { border-color:transparent; background:#fff; color:#1062cc; box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(16,98,204,.16),0 6px 16px -10px rgba(16,24,40,.35); }
    body.vc-ui .ws-rail a.ws-queue[aria-current="page"] .ws-queue__count { color:#1062cc; }
    body.vc-ui .ws-rail a.ws-queue--new,
    body.vc-ui .ws-rail a.ws-queue--new:hover { border-color:rgba(16,24,40,.1); background:rgba(255,255,255,.88); color:#1268d3; box-shadow:inset 0 1px 0 #fff,0 6px 16px -10px rgba(16,24,40,.35); }

    /* Details sliding over the conversation (below 1360px) floats as its own panel */
    body.vc-ui .ws-details { box-shadow:var(--a2-glass-shadow); }
    body.vc-ui .vc-preview { box-shadow:var(--a2-glass-shadow); }
}
@media (max-width:859px) {
    /* The queue chips sit straight on the background */
    body.vc-ui .ws-rail { border:0; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
}

/* Plain surfaces for people who ask for less transparency, and for forced colours */
@media (prefers-reduced-transparency:reduce) {
    body.vc-ui { background:var(--bg); }
    body.vc-ui :is(.vc-nav.vc-shell,.ws-rail,.ws-list,.ws-convo,.ws-details,.vc-preview,.support-list,.chat-list,.chat-conversation,.chat-context,.vc-page,.vc-login__card,.vc-message--staff,.chat-message__body) {
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
    body.vc-ui :is(.vc-nav.vc-shell,.ws-rail,.ws-list,.ws-convo,.ws-details,.vc-preview,.support-list,.chat-list,.chat-conversation,.chat-context,.vc-page,.vc-login__card) { background:#fff; }
    body.vc-ui :is(.vc-message--staff,.chat-message--staff .chat-message__body) { background:#0b4fa6; }
}
@media (forced-colors:active) {
    body.vc-ui ::selection { background:Highlight; color:HighlightText; }
    body.vc-ui input[type="checkbox"] { -webkit-appearance:auto; appearance:auto; }
    body.vc-ui :is(.vc-message--staff,.chat-message--staff .chat-message__body) { background:Canvas; color:CanvasText; }
    body.vc-ui .vc-message--staff :is(.vc-message__who,.vc-message__title,.vc-message__body,.vc-message__role,.vc-message__meta,.vc-file__name),
    body.vc-ui .vc-message--staff a,
    body.vc-ui .chat-message--staff .chat-message__body a { color:CanvasText; }
}