/* ===========================================================================
   v2 icon set — Phase 2 Day 17 (Aug 17, 2026)
   1.5px-stroke SVG icons. Active under body.meeting-room (v2 is now the
   default room chrome) and on the prejoin page (:where(body.meeting-room, body.pj-page), which is
   also always v2).

   Mechanism
   ---------
   Each icon is a 24x24 viewBox SVG with stroke="#000" fill="none" stroke-width=1.5.
   The CSS uses `mask-image` so the icon inherits its color from the element's
   `color` (via `background-color: currentColor`). Where Font Awesome icons
   appear inside v1 surface containers, they are hidden (font-size:0) and a
   mask-image paints the SVG on the same element. Zero markup change required.

   Out of scope
   ------------
   Font Awesome is NOT removed — it still ships for out-of-scope surfaces
   (lobby, login, landing). v1 surfaces are visually FA-free under the
   default room chrome.
   =========================================================================== */

/* Base class — every v2 icon element becomes a fixed-size square with a
   masked SVG. Color flows from `color` of the parent so hover/active
   states work.

   IMPORTANT: use FIXED pixel sizes, NOT `em`. The element has
   `font-size: 0` set below to hide the FA glyph text, which would
   make any `1em` resolve to 0px. The icon size is governed by
   `--v2-icon-size` (defaults to 20px) so individual surfaces can
   override it without touching this file. */
/* Default icon size — set on body so all icon descendants inherit it. */
:where(body.meeting-room, body.pj-page) {
    --v2-icon-size: 20px;
}

/* Base icon class — every FA `<i>` becomes a fixed-size square with a
   masked SVG. Color flows from `color` of the parent so hover/active
   states work. */
body.meeting-room i.fas,
body.meeting-room i.far,
body.meeting-room i.fa-solid,
body.meeting-room i.fa-brands,
body.meeting-room i.fa,
body.meeting-room i.fab,
:where(body.meeting-room, body.pj-page) i.fas,
:where(body.meeting-room, body.pj-page) i.far,
:where(body.meeting-room, body.pj-page) i.fa-solid,
:where(body.meeting-room, body.pj-page) i.fa-brands,
:where(body.meeting-room, body.pj-page) i.fa,
:where(body.meeting-room, body.pj-page) i.fab {
    background-color: currentColor;
    background-image: none !important;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--v2-icon-url, none);
    mask-image: var(--v2-icon-url, none);
    /* CRITICAL: SVG masks default to `luminance` mode in some browsers,
       which renders black strokes (stroke="#000") as transparent. Force
       `alpha` so the stroke pixels paint the icon's background-color. */
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    width: var(--v2-icon-size);
    height: var(--v2-icon-size);
    display: inline-block;
    /* Hide the FA glyph entirely (FA library loaded after this file
       can re-assert font-size via cascade). The ::before pseudoelement
       is what carries the FA character — nullify it explicitly. */
    font-size: 0 !important;
    line-height: 1;
    vertical-align: middle;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}
body.meeting-room i.fas::before,
body.meeting-room i.far::before,
body.meeting-room i.fa-solid::before,
body.meeting-room i.fa-brands::before,
body.meeting-room i.fa::before,
body.meeting-room i.fab::before,
:where(body.meeting-room, body.pj-page) i.fas::before,
:where(body.meeting-room, body.pj-page) i.far::before,
:where(body.meeting-room, body.pj-page) i.fa-solid::before,
:where(body.meeting-room, body.pj-page) i.fa-brands::before,
:where(body.meeting-room, body.pj-page) i.fa::before,
:where(body.meeting-room, body.pj-page) i.fab::before {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px;
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
    content: none !important;
}

/* ----- Top bar ----- */
:where(body.meeting-room, body.pj-page) i.fa-shield-halved {
    --v2-icon-url: url(/icons/shield-halved.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-clock {
    --v2-icon-url: url(/icons/clock.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-circle {
    --v2-icon-url: url(/icons/circle.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-cog {
    --v2-icon-url: url(/icons/cog.svg);
}

/* ----- Top-bar account menu ----- */
/* Open-settings row uses a gear (cog) icon — the universal affordance
   for settings, more recognizable than the filter/sliders glyph which
   reads as "audio mixer" or "equalizer" to most users. */
:where(body.meeting-room, body.pj-page) .mr-account-menu-item i.fa-sliders {
    --v2-icon-url: url(/icons/cog.svg);
}
/* Leave-meeting row mirrors the v2 dock's coral phone-hangup icon (see
   .mr-dock-cell-leave below) so the gesture is recognizable. */
:where(body.meeting-room, body.pj-page) .mr-account-menu-item i.fa-phone-hangup {
    --v2-icon-url: url(/icons/phone-hangup.svg);
}
/* Account menu icons inherit the FA base rules; force currentColor so the
   mask renders and matches the row text colour, and size to 18px so the
   icon matches the row hit-target set in MeetingRoom.css. */
:where(body.meeting-room, body.pj-page) .mr-account-menu-item i.fa-sliders,
:where(body.meeting-room, body.pj-page) .mr-account-menu-item i.fa-phone-hangup {
    background-color: currentColor !important;
    background-image: none !important;
    width: 18px !important;
    height: 18px !important;
}

/* Canonical briefing aliases (same SVG, briefing naming) */
:where(body.meeting-room, body.pj-page) .mr-dock-cell i.fa-microphone,
:where(body.meeting-room, body.pj-page) .mr-icon-btn i.fa-microphone {
    --v2-icon-url: url(/icons/mic.svg);
}
:where(body.meeting-room, body.pj-page) .mr-dock-cell i.fa-microphone-slash {
    --v2-icon-url: url(/icons/mic-off.svg);
}
:where(body.meeting-room, body.pj-page) .mr-dock-cell i.fa-comments {
    --v2-icon-url: url(/icons/comments.svg);
}
:where(body.meeting-room, body.pj-page) .mr-dock-cell i.fa-users {
    --v2-icon-url: url(/icons/users.svg);
}
:where(body.meeting-room, body.pj-page) .mr-dock-cell i.fa-square-check,
:where(body.meeting-room, body.pj-page) .mr-dock-cell i.fa-check-square {
    --v2-icon-url: url(/icons/check.svg);
}
/* v2 dock whiteboard button uses the dedicated check-square.svg
   (Flaticon #11546357) — a rounded square with a checkmark inside —
   instead of the bare checkmark glyph. The `.mr-dock-cell` rule above
   already maps fa-square-check to check.svg, so this higher-specificity
   rule overrides only for the whiteboard button. */
:where(body.meeting-room, body.pj-page) #meetingDockWhiteboard i.fa-square-check {
    --v2-icon-url: url(/icons/check-square.svg);
}
:where(body.meeting-room, body.pj-page) .mr-dock-cell i.fa-ellipsis {
    --v2-icon-url: url(/icons/ellipsis.svg);
}
:where(body.meeting-room, body.pj-page) .mr-dock-cell-leave i.fa-phone-hangup,
:where(body.meeting-room, body.pj-page) i.fa-phone-hangup,
:where(body.meeting-room, body.pj-page) i.fa-phone-slash,
:where(body.meeting-room, body.pj-page) .mr-dock-cell-leave i {
    --v2-icon-url: url(/icons/phone-hangup.svg);
}

/* ----- Empty state ----- */
:where(body.meeting-room, body.pj-page) .mr-empty-icon i.fa-video {
    --v2-icon-url: url(/icons/video.svg);
}
:where(body.meeting-room, body.pj-page) .mr-empty-icon i.fa-user {
    /* v2 — "alone in call" soft waiting icon */
    --v2-icon-url: url(/icons/user.svg);
}

/* ----- Side rail ----- */
:where(body.meeting-room, body.pj-page) .mr-rail-btn i.fa-comments {
    --v2-icon-url: url(/icons/comments.svg);
}
:where(body.meeting-room, body.pj-page) .mr-rail-btn i.fa-users {
    --v2-icon-url: url(/icons/users.svg);
}

/* ----- Dock (control bar) ----- */
:where(body.meeting-room, body.pj-page) i.fa-microphone {
    --v2-icon-url: url(/icons/mic.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-microphone-slash {
    --v2-icon-url: url(/icons/mic-off.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-video {
    --v2-icon-url: url(/icons/video.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-video-slash {
    --v2-icon-url: url(/icons/video-off.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-display {
    --v2-icon-url: url(/icons/display.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-chalkboard,
:where(body.meeting-room, body.pj-page) i.fa-chalkboard-teacher {
    --v2-icon-url: url(/icons/whiteboard.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-face-smile {
    --v2-icon-url: url(/icons/face-smile.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-hand-paper {
    --v2-icon-url: url(/icons/hand-paper.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-record-vinyl {
    --v2-icon-url: url(/icons/record-vinyl.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-phone-slash {
    --v2-icon-url: url(/icons/phone-slash.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-chevron-up {
    --v2-icon-url: url(/icons/chevron-up.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-chevron-right,
:where(body.meeting-room, body.pj-page) .fa-chevron-right {
    --v2-icon-url: url(/icons/chevron-right.svg);
}
/* Generic global mappings — apply anywhere under v2 chrome. */
:where(body.meeting-room, body.pj-page) i.fa-comments,
:where(body.meeting-room, body.pj-page) i.fa-comment {
    --v2-icon-url: url(/icons/comments.svg);
}
:where(body.meeting-room, body.pj-page) i.fa-desktop {
    --v2-icon-url: url(/icons/display.svg);
}

/* ----- Tile actions / peer menu (in video tiles) ----- */
:where(body.meeting-room, body.pj-page) .mr-tile-actions i,
:where(body.meeting-room, body.pj-page) .mr-tile-footer i {
    --v2-icon-size: 16px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    font-size: 0 !important;
    width: var(--v2-icon-size);
    height: var(--v2-icon-size);
    display: inline-block;
    text-indent: 100%;
    overflow: hidden;
}
:where(body.meeting-room, body.pj-page) i[id$='__audio'].fa-microphone,
:where(body.meeting-room, body.pj-page) i[id$='__audio'].fa-microphone-slash {
    -webkit-mask-image: url(/icons/mic-off.svg);
    mask-image: url(/icons/mic-off.svg);
}
:where(body.meeting-room, body.pj-page) i[id$='__video'].fa-video,
:where(body.meeting-room, body.pj-page) i[id$='__video'].fa-video-slash {
    -webkit-mask-image: url(/icons/video-off.svg);
    mask-image: url(/icons/video-off.svg);
}
:where(body.meeting-room, body.pj-page) i[id$='__screen'].fa-display {
    -webkit-mask-image: url(/icons/display.svg);
    mask-image: url(/icons/display.svg);
}

/* ----- Peer menu (host controls in tile footer) ----- */
:where(body.meeting-room, body.pj-page) .mr-peer-menu i.fa-microphone-slash {
    --v2-icon-url: url(/icons/mic-off.svg);
}
:where(body.meeting-room, body.pj-page) .mr-peer-menu i.fa-user-minus {
    --v2-icon-url: url(/icons/user-minus.svg);
}

/* ----- People modal (rendered by MeetingRoom.js) ----- */
:where(body.meeting-room, body.pj-page) .mr-people-action i.fa-hand-paper {
    --v2-icon-url: url(/icons/hand-paper.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-action i.fa-comments {
    --v2-icon-url: url(/icons/comments.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-close-x i.fa-times {
    --v2-icon-url: url(/icons/times.svg);
}
/* People modal search icon — temporarily disabled.
:where(body.meeting-room, body.pj-page) .mr-people-search i.fa-search {
    --v2-icon-url: url(/icons/search.svg);
}
*/
:where(body.meeting-room, body.pj-page) .mr-people-avatar i {
    -webkit-mask-image: url(/icons/user.svg);
    mask-image: url(/icons/user.svg);
    -webkit-mask-size: 60%;
    mask-size: 60%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--v2-accent);
    width: 60%;
    height: 60%;
    font-size: 0 !important;
    text-indent: 100%;
    overflow: hidden;
    display: inline-block;
}
:where(body.meeting-room, body.pj-page) .mr-people-icons i.fa-microphone {
    --v2-icon-url: url(/icons/mic.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-icons i.fa-microphone-slash,
:where(body.meeting-room, body.pj-page) .mr-people-icons i.fa-microphone-slash.is-off {
    --v2-icon-url: url(/icons/mic-off.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-icons i.fa-video {
    --v2-icon-url: url(/icons/video.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-icons i.fa-video-slash,
:where(body.meeting-room, body.pj-page) .mr-people-icons i.fa-video-slash.is-off {
    --v2-icon-url: url(/icons/video-off.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-icons i.fa-display {
    --v2-icon-url: url(/icons/display.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-icons i.fa-comment,
:where(body.meeting-room, body.pj-page) .mr-people-icons i.fa-comments,
:where(body.meeting-room, body.pj-page) .mr-people-row-btn i.fa-comment,
:where(body.meeting-room, body.pj-page) .mr-people-row-btn i.fa-comments {
    --v2-icon-url: url(/icons/comments.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-row-menu i.fa-ellipsis-vertical {
    --v2-icon-url: url(/icons/ellipsis-vertical.svg);
}

/* ----- Peer tile menu (host-only kebab) — Phase 3 polish ----- */
:where(body.meeting-room, body.pj-page) .mr-peer-menu .mr-peer-menu-item i.fa-envelope {
    --v2-icon-url: url(/icons/envelope.svg);
}
:where(body.meeting-room, body.pj-page) .mr-peer-menu .mr-peer-menu-item i.fa-microphone-slash {
    --v2-icon-url: url(/icons/mic-off.svg);
}
:where(body.meeting-room, body.pj-page) .mr-peer-menu .mr-peer-menu-item i.fa-user-minus {
    --v2-icon-url: url(/icons/user-minus.svg);
}

/* ----- Chat panel ----- */
:where(body.meeting-room, body.pj-page) .chat .chat-header .public-chat-avatar i.fa-users,
:where(body.meeting-room, body.pj-page) .public-chat-avatar i.fa-users {
    -webkit-mask-image: url(/icons/users.svg);
    mask-image: url(/icons/users.svg);
    -webkit-mask-size: 60%;
    mask-size: 60%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--v2-accent);
    width: 60%;
    height: 60%;
    font-size: 0 !important;
    text-indent: 100%;
    overflow: hidden;
    display: inline-block;
}

/* Chat send button (paper plane) */
:where(body.meeting-room, body.pj-page) .chat-send-btn i.fa-paper-plane {
    --v2-icon-url: url(/icons/paper-plane.svg);
    width: 16px;
    height: 16px;
}

/* v2 — Chat "Saved automatically" pill icon */
:where(body.meeting-room, body.pj-page) .chat-saved-pill i.fa-circle-check {
    --v2-icon-url: url(/icons/check.svg);
}

/* v2 — Empty chat illustration (CSS-rendered icon, replaces legacy SVG) */
:where(body.meeting-room, body.pj-page) .empty-chat-icon i.fa-comments {
    --v2-icon-url: url(/icons/comments.svg);
}

/* v2 — People modal empty state ("No participants with unread messages") */
:where(body.meeting-room, body.pj-page) .mr-people-empty i.fa-comments {
    --v2-icon-url: url(/icons/comments.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-empty i.fa-comment-slash {
    --v2-icon-url: url(/icons/comment-slash.svg);
}
:where(body.meeting-room, body.pj-page) .mr-people-empty i.fa-hand-paper {
    --v2-icon-url: url(/icons/hand-paper.svg);
}

/* Chat toolbar (input area) buttons */
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i {
    width: 16px;
    height: 16px;
}
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i.fa-smile,
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i.fa-face-smile {
    --v2-icon-url: url(/icons/face-smile.svg);
}
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i.fa-users {
    --v2-icon-url: url(/icons/users.svg);
}
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i.fa-markdown {
    --v2-icon-url: url(/icons/markdown.svg);
}
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i.fa-paperclip,
:where(body.meeting-room, body.pj-page) .mr-chat-file i.fa-paperclip {
    --v2-icon-url: url(/icons/paperclip.svg);
}
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i.fa-microphone {
    --v2-icon-url: url(/icons/mic.svg);
}
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i.fa-stop {
    --v2-icon-url: url(/icons/stop.svg);
}
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i.fa-paste {
    --v2-icon-url: url(/icons/paste.svg);
}
:where(body.meeting-room, body.pj-page) .chat-toolbar-btn i.fa-trash {
    --v2-icon-url: url(/icons/trash.svg);
}
:where(body.meeting-room, body.pj-page) .chat-option-buttons i.fa-times {
    --v2-icon-url: url(/icons/times.svg);
}
:where(body.meeting-room, body.pj-page) .chat-option-buttons i.fa-map-pin {
    --v2-icon-url: url(/icons/thumbtack.svg);
}
:where(body.meeting-room, body.pj-page) .chat-option-buttons i.fa-expand {
    --v2-icon-url: url(/icons/display.svg);
}
:where(body.meeting-room, body.pj-page) .chat-option-buttons i.fa-compress {
    --v2-icon-url: url(/icons/display.svg);
}
:where(body.meeting-room, body.pj-page) .chat-option-buttons i.fa-bars {
    --v2-icon-url: url(/icons/ellipsis-vertical.svg);
}

/* Chat options dropdown items */
:where(body.meeting-room, body.pj-page) #chatOptionsMenu i.fa-circle-half-stroke {
    --v2-icon-url: url(/icons/half-stroke.svg);
}
:where(body.meeting-room, body.pj-page) #chatOptionsMenu i.fa-volume-high {
    --v2-icon-url: url(/icons/volume-high.svg);
}
:where(body.meeting-room, body.pj-page) #chatOptionsMenu i.fa-save {
    --v2-icon-url: url(/icons/save.svg);
}
:where(body.meeting-room, body.pj-page) #chatOptionsMenu i.fa-trash {
    --v2-icon-url: url(/icons/trash.svg);
}
:where(body.meeting-room, body.pj-page) .transcription-switch-row i.fa-eye {
    --v2-icon-url: url(/icons/eye.svg);
}

/* Peer menu pitchBar / mic-lines indicator */
:where(body.meeting-room, body.pj-page) i.fa-microphone-lines {
    --v2-icon-url: url(/icons/mic-lines.svg);
}

/* Settings drawer tabs (settings-v2 redesign) — touch only v1 surfaces.
   The settings drawer is NOT in v1 scope, so we leave its icons as FA. */

/* People modal close x (used inside .mr-people-close-x) — already covered. */

/* ----- Search field prefix in chat panel ----- */
:where(body.meeting-room, body.pj-page) .input-group-text i.fa-search {
    --v2-icon-url: url(/icons/search.svg);
}

/* ----- Avatar / verified checkmark (already SVG inline) ----- */
/* Tile footer verified badge — inline SVG already in MeetingRoom.js — no swap needed. */

/* ----- Modals (init, schedule, share) ----- */
:where(body.meeting-room, body.pj-page) .mr-modal-icon i.fa-link {
    --v2-icon-url: url(/icons/link.svg);
}
:where(body.meeting-room, body.pj-page) .mr-modal-icon i.fa-envelope {
    --v2-icon-url: url(/icons/envelope.svg);
}

/* ----- Leave meeting modal — coral phone-hangup icon ----- */
:where(body.meeting-room, body.pj-page) .mr-leave-icon i.fa-phone-slash {
    --v2-icon-url: url(/icons/phone-hangup.svg);
}
:where(body.meeting-room, body.pj-page) .mr-modal-actions i {
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    width: 16px;
    height: 16px;
    font-size: 0 !important;
    display: inline-block;
    text-indent: 100%;
    overflow: hidden;
}

/* Init screen (pre-call) — keep clean under v2 too */
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-video,
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-microphone,
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-desktop,
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-rotate,
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-arrow-right-arrow-left,
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-image,
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-smile,
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-sign-out-alt,
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-eye,
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-stop-circle {
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    font-size: 0 !important;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-indent: 100%;
    overflow: hidden;
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-video {
    -webkit-mask-image: url(/icons/video.svg);
    mask-image: url(/icons/video.svg);
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-microphone {
    -webkit-mask-image: url(/icons/mic.svg);
    mask-image: url(/icons/mic.svg);
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-desktop {
    -webkit-mask-image: url(/icons/display.svg);
    mask-image: url(/icons/display.svg);
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-rotate {
    -webkit-mask-image: url(/icons/refresh.svg);
    mask-image: url(/icons/refresh.svg);
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-arrow-right-arrow-left {
    -webkit-mask-image: url(/icons/swap.svg);
    mask-image: url(/icons/swap.svg);
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-image {
    -webkit-mask-image: url(/icons/image.svg);
    mask-image: url(/icons/image.svg);
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-smile {
    -webkit-mask-image: url(/icons/face-smile.svg);
    mask-image: url(/icons/face-smile.svg);
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-sign-out-alt {
    -webkit-mask-image: url(/icons/phone-slash.svg);
    mask-image: url(/icons/phone-slash.svg);
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-eye {
    -webkit-mask-image: url(/icons/video.svg);
    mask-image: url(/icons/video.svg);
}
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-stop-circle {
    -webkit-mask-image: url(/icons/circle.svg);
    mask-image: url(/icons/circle.svg);
}

/* Ensure tile name verified icon (already SVG) renders correctly */
:where(body.meeting-room, body.pj-page) .mr-verified svg.mr-icon-svg {
    color: var(--v2-ok);
}

/* ===========================================================================
   v2 icon coverage — added in iteration to cover remaining v1 surfaces.
   Each FA class maps to a 1.5px-stroke SVG via mask-image.
   =========================================================================== */

/* ----- Whiteboard toolbar ----- */
:where(body.meeting-room, body.pj-page) #whiteboardPencilBtn,
:where(body.meeting-room, body.pj-page) .fa-pencil-alt {
    --v2-icon-url: url(/icons/pencil.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardVanishingBtn,
:where(body.meeting-room, body.pj-page) .fa-highlighter {
    --v2-icon-url: url(/icons/highlighter.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardObjectBtn,
:where(body.meeting-room, body.pj-page) .fa-mouse-pointer {
    --v2-icon-url: url(/icons/mouse-pointer.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardEraserBtn,
:where(body.meeting-room, body.pj-page) .fa-eraser {
    --v2-icon-url: url(/icons/eraser.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardUndoBtn,
:where(body.meeting-room, body.pj-page) .fa-undo {
    --v2-icon-url: url(/icons/undo.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardRedoBtn,
:where(body.meeting-room, body.pj-page) .fa-redo {
    --v2-icon-url: url(/icons/redo.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardGridBtn,
:where(body.meeting-room, body.pj-page) .fa-table-cells-large {
    --v2-icon-url: url(/icons/grid.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardGhostButton,
:where(body.meeting-room, body.pj-page) .fa-circle-half-stroke {
    --v2-icon-url: url(/icons/half-stroke.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardLockBtn,
:where(body.meeting-room, body.pj-page) .fa-lock {
    --v2-icon-url: url(/icons/lock.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardUnlockBtn,
:where(body.meeting-room, body.pj-page) .fa-lock-open {
    --v2-icon-url: url(/icons/lock-open.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardCloseBtn,
:where(body.meeting-room, body.pj-page) .fa-times {
    --v2-icon-url: url(/icons/times.svg);
}
/* Whiteboard dropdown items */
:where(body.meeting-room, body.pj-page) #whiteboardDropDownMenu .fa-bars {
    --v2-icon-url: url(/icons/ellipsis-vertical.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardImgFileBtn .fa-image,
:where(body.meeting-room, body.pj-page) .fa-image {
    --v2-icon-url: url(/icons/image.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardImgUrlBtn .fa-link,
:where(body.meeting-room, body.pj-page) .fa-link {
    --v2-icon-url: url(/icons/link.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardPdfFileBtn .fa-file-pdf,
:where(body.meeting-room, body.pj-page) .fa-file-pdf {
    --v2-icon-url: url(/icons/file-pdf.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardTextBtn .fa-spell-check,
:where(body.meeting-room, body.pj-page) .fa-spell-check {
    --v2-icon-url: url(/icons/spell-check.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardStickyNoteBtn .fa-sticky-note,
:where(body.meeting-room, body.pj-page) .fa-sticky-note {
    --v2-icon-url: url(/icons/sticky-note.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardLineBtn .fa-slash,
:where(body.meeting-room, body.pj-page) .fa-slash {
    --v2-icon-url: url(/icons/slash.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardRectBtn .fa-square,
:where(body.meeting-room, body.pj-page) .fa-square {
    --v2-icon-url: url(/icons/square.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardCircleBtn .fa-circle {
    --v2-icon-url: url(/icons/circle.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardSaveBtn .fa-save,
:where(body.meeting-room, body.pj-page) .fa-save {
    --v2-icon-url: url(/icons/save.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardCleanBtn .fa-trash,
:where(body.meeting-room, body.pj-page) .fa-trash,
:where(body.meeting-room, body.pj-page) .fa-trash-can {
    --v2-icon-url: url(/icons/trash.svg);
}
:where(body.meeting-room, body.pj-page) #whiteboardShortcutsBtn .fa-keyboard,
:where(body.meeting-room, body.pj-page) .fa-keyboard {
    --v2-icon-url: url(/icons/keyboard.svg);
}

/* ----- Breakout toolbar ----- */
:where(body.meeting-room, body.pj-page) #breakoutToolbar .fa-object-ungroup,
:where(body.meeting-room, body.pj-page) .breakout-accent {
    --v2-icon-url: url(/icons/object-ungroup.svg);
}
:where(body.meeting-room, body.pj-page) #breakoutToolbar .fa-clock {
    --v2-icon-url: url(/icons/clock.svg);
}
:where(body.meeting-room, body.pj-page) #breakoutToolbar .fa-hand-paper {
    --v2-icon-url: url(/icons/hand-paper.svg);
}
:where(body.meeting-room, body.pj-page) #breakoutHelpBtn .fa-hand-paper,
:where(body.meeting-room, body.pj-page) #breakoutReturnBtn .fa-arrow-rotate-left,
:where(body.meeting-room, body.pj-page) .fa-arrow-rotate-left {
    --v2-icon-url: url(/icons/arrow-rotate-left.svg);
}

/* ----- Breakout panel ----- */
:where(body.meeting-room, body.pj-page) #breakoutPanelCloseBtn,
:where(body.meeting-room, body.pj-page) .fa-times {
    --v2-icon-url: url(/icons/times.svg);
}
:where(body.meeting-room, body.pj-page) #breakoutTogglePin .fa-map-pin {
    --v2-icon-url: url(/icons/thumbtack.svg);
}
:where(body.meeting-room, body.pj-page) #breakoutRefreshBtn .fa-sync-alt {
    --v2-icon-url: url(/icons/refresh.svg);
}
:where(body.meeting-room, body.pj-page) .fa-bars {
    --v2-icon-url: url(/icons/ellipsis-vertical.svg);
}

/* ----- Share room modal ----- */
:where(body.meeting-room, body.pj-page) #shareRoomCloseBtn .fa-times {
    --v2-icon-url: url(/icons/times.svg);
}
:where(body.meeting-room, body.pj-page) .fa-share-alt,
:where(body.meeting-room, body.pj-page) .fa-share-nodes {
    --v2-icon-url: url(/icons/share.svg);
}

/* ----- Received file modal ----- */
:where(body.meeting-room, body.pj-page) #receivedFileModal .fa-file-arrow-down,
:where(body.meeting-room, body.pj-page) .fa-file-arrow-down,
:where(body.meeting-room, body.pj-page) .fa-file-download {
    --v2-icon-url: url(/icons/file-arrow-down.svg);
}

/* ----- File share send/receive ----- */
:where(body.meeting-room, body.pj-page) #receiveHideBtn .fa-eye-slash,
:where(body.meeting-room, body.pj-page) .fa-eye-slash {
    --v2-icon-url: url(/icons/eye-slash.svg);
}
:where(body.meeting-room, body.pj-page) #sendAbortBtn .fa-stop-circle,
:where(body.meeting-room, body.pj-page) #receiveAbortBtn .fa-stop-circle,
:where(body.meeting-room, body.pj-page) .fa-stop-circle {
    --v2-icon-url: url(/icons/circle.svg);
}
:where(body.meeting-room, body.pj-page) #sendAbortBtn i,
:where(body.meeting-room, body.pj-page) #receiveAbortBtn i {
    background-color: var(--v2-live);
    -webkit-mask-image: url(/icons/circle.svg);
    mask-image: url(/icons/circle.svg);
}

/* ----- Polls panel ----- */
:where(body.meeting-room, body.pj-page) #pollButton .fa-square-poll-horizontal,
:where(body.meeting-room, body.pj-page) .fa-square-poll-horizontal {
    --v2-icon-url: url(/icons/square-poll-horizontal.svg);
}
:where(body.meeting-room, body.pj-page) #pollTogglePin .fa-map-pin {
    --v2-icon-url: url(/icons/thumbtack.svg);
}
:where(body.meeting-room, body.pj-page) #pollMaxButton .fa-expand {
    --v2-icon-url: url(/icons/display.svg);
}
:where(body.meeting-room, body.pj-page) #pollMinButton .fa-compress {
    --v2-icon-url: url(/icons/display.svg);
}
:where(body.meeting-room, body.pj-page) #pollPanelCloseBtn i,
:where(body.meeting-room, body.pj-page) .pls-container .fa-times {
    --v2-icon-url: url(/icons/times.svg);
}

/* Status icons used by shim-rendered modals (Swal.fire with icon: 'info' /
   'success' / 'warning' / 'error' / 'question'). Without these the base
   rule hides the FA glyph and falls through to mask-image: none, so the
   icon vanishes. The .mr-toast__icon block below overrides these for
   toasts only. */
:where(body.meeting-room, body.pj-page) .mr-modal-icon .fa-info-circle {
    --v2-icon-url: url(/icons/circle.svg);
}
:where(body.meeting-room, body.pj-page) .mr-modal-icon .fa-check-circle {
    --v2-icon-url: url(/icons/check.svg);
}
:where(body.meeting-room, body.pj-page) .mr-modal-icon .fa-exclamation-triangle {
    --v2-icon-url: url(/icons/bell.svg);
}
:where(body.meeting-room, body.pj-page) .mr-modal-icon .fa-times-circle {
    --v2-icon-url: url(/icons/times.svg);
}
:where(body.meeting-room, body.pj-page) .mr-modal-icon .fa-question-circle {
    --v2-icon-url: url(/icons/question.svg);
}
/* Lost-connection modals — showReconnectAlert / showMaxAttemptsAlert */
:where(body.meeting-room, body.pj-page) .mr-modal-icon .fa-wifi {
    --v2-icon-url: url(/icons/wifi.svg);
}
/* Set Room password modal — lock-room action when no password is set */
:where(body.meeting-room, body.pj-page) .mr-modal-icon .fa-lock {
    --v2-icon-url: url(/icons/lock.svg);
}
:where(body.meeting-room, body.pj-page) .mr-modal-icon .fa-ban {
    --v2-icon-url: url(/icons/ban.svg);
}

/* Toast icons — shim-rendered toasts (Swal.fire with toast:true) */
:where(body.meeting-room, body.pj-page) .mr-toast__icon .fa-info-circle {
    --v2-icon-url: url(/icons/envelope.svg);
}
:where(body.meeting-room, body.pj-page) .mr-toast__icon .fa-check-circle {
    --v2-icon-url: url(/icons/check.svg);
}
:where(body.meeting-room, body.pj-page) .mr-toast__icon .fa-exclamation-triangle {
    --v2-icon-url: url(/icons/bell.svg);
}
:where(body.meeting-room, body.pj-page) .mr-toast__icon .fa-times-circle {
    --v2-icon-url: url(/icons/times.svg);
}
:where(body.meeting-room, body.pj-page) .mr-toast__icon .fa-question-circle {
    --v2-icon-url: url(/icons/question.svg);
}

/* ----- Init screen extras ----- */
:where(body.meeting-room, body.pj-page) #initUser .initComands i.fa-camera-rotate,
:where(body.meeting-room, body.pj-page) .fa-camera-rotate {
    --v2-icon-url: url(/icons/swap.svg);
}
:where(body.meeting-room, body.pj-page) .fa-ban {
    --v2-icon-url: url(/icons/ban.svg);
}

/* ----- Settings sidebar (used inside the settings drawer; not v1 scope,
       but rule harmless — drawer surfaces still get icons by default) ----- */
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-door-open,
:where(body.meeting-room, body.pj-page) .fa-door-open,
:where(body.meeting-room, body.pj-page) i.fa-door-open {
    --v2-icon-url: url(/icons/home.svg);
}
/* Dock leave button uses door-open icon (not home) — overrides the
   generic fa-door-open mapping above for the leave context only. */
:where(body.meeting-room, body.pj-page) .mr-dock-cell-leave i.fa-door-open {
    --v2-icon-url: url(/icons/door-open.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-shield-halved {
    --v2-icon-url: url(/icons/shield-halved.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-record-vinyl {
    --v2-icon-url: url(/icons/record-vinyl.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-video {
    --v2-icon-url: url(/icons/video.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-microphone {
    --v2-icon-url: url(/icons/mic.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-image {
    --v2-icon-url: url(/icons/image.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-user {
    --v2-icon-url: url(/icons/user.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-keyboard {
    --v2-icon-url: url(/icons/keyboard.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-globe {
    --v2-icon-url: url(/icons/globe.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-bell {
    --v2-icon-url: url(/icons/bell.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-robot {
    --v2-icon-url: url(/icons/robot.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-display {
    --v2-icon-url: url(/icons/display.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-satellite-dish {
    --v2-icon-url: url(/icons/satellite.svg);
}
:where(body.meeting-room, body.pj-page) .settings-nav-icon.fa-palette {
    --v2-icon-url: url(/icons/palette.svg);
}

/* Force the v2 mask to render inside the settings drawer. SettingsPanel.css
   sets a higher-specificity rule (1,4,2) on `.tablinks .settings-nav-icon`
   for layout (width/flex) and re-asserts font-family for the FA glyph. The
   mask-image + background-color + font-size: 0 chain is what actually paints
   the SVG, so we re-assert all four here with !important — without this,
   any future drawer-specific override (e.g. background-color: transparent)
   would silently blank every sidebar icon. */
body.meeting-room #mySettings .settings-nav-icon {
    background-color: currentColor !important;
    background-image: none !important;
    -webkit-mask-image: var(--v2-icon-url, none) !important;
    mask-image: var(--v2-icon-url, none) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-mode: alpha !important;
    mask-mode: alpha !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: inline-block !important;
    text-indent: 100%;
    white-space: nowrap;
}
/* ::before is the FA glyph carrier — nullify it so the FA library
   (loaded later in the cascade) cannot redraw a tofu on top of the mask. */
body.meeting-room #mySettings .settings-nav-icon::before {
    font-size: 0 !important;
    color: transparent !important;
    content: none !important;
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Same defensive override for meta-item icons (e.g. fa-user, fa-id-badge
   on the Profile tab) and any other settings-drawer icons that rely on
   the v2 mask. SettingsPanel.css sets font-family/font-weight inline-flex
   on these icons at higher specificity (1,1,2) without re-asserting the
   v2 background-color / mask chain, so without this override a stray
   `background-color: transparent` or future mask-image tweak would blank
   the icons. */
body.meeting-room #mySettings .settings-meta-item i,
body.meeting-room #mySettings .settings-input-action-btn i {
    background-color: currentColor !important;
    background-image: none !important;
    -webkit-mask-image: var(--v2-icon-url, none) !important;
    mask-image: var(--v2-icon-url, none) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-mode: alpha !important;
    mask-mode: alpha !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-indent: 100%;
    white-space: nowrap;
}
/* Explicit square render box — without height, font-size:0 collapses
   line-height to 0 and the mask has nowhere to paint. SettingsPanel.css
   only sets width on .settings-meta-item i, so we re-assert both here. */
body.meeting-room #mySettings .settings-meta-item i {
    width: 16px !important;
    height: 16px !important;
}
/* The save-display-name action button lives inside a 28×28 inline-flex
   wrapper centred in a 38px-tall input. The mask needs an explicit
   square render box (font-size:0 collapses line-height to 0); the
   button's `display: inline-flex; align-items: center; justify-content:
   center` then centres the 16×16 box both axes. No translateY nudge is
   needed any more — the original -1px compensated for the FA glyph's
   built-in top margin, but the SVG mask is already centred inside its
   own viewBox. */
body.meeting-room #mySettings .settings-input-action-btn i {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 auto;
}
body.meeting-room #mySettings .settings-meta-item i::before,
body.meeting-room #mySettings .settings-input-action-btn i::before {
    font-size: 0 !important;
    color: transparent !important;
    content: none !important;
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
}
:where(body.meeting-room, body.pj-page) .fa-globe {
    --v2-icon-url: url(/icons/globe.svg);
}
:where(body.meeting-room, body.pj-page) .fa-bell {
    --v2-icon-url: url(/icons/bell.svg);
}
:where(body.meeting-room, body.pj-page) .fa-robot {
    --v2-icon-url: url(/icons/robot.svg);
}
:where(body.meeting-room, body.pj-page) .fa-satellite-dish {
    --v2-icon-url: url(/icons/satellite.svg);
}
:where(body.meeting-room, body.pj-page) .fa-palette {
    --v2-icon-url: url(/icons/palette.svg);
}
:where(body.meeting-room, body.pj-page) .fa-cogs {
    --v2-icon-url: url(/icons/cog.svg);
}
:where(body.meeting-room, body.pj-page) .fa-floppy-disk,
:where(body.meeting-room, body.pj-page) .fa-save {
    --v2-icon-url: url(/icons/save.svg);
}
:where(body.meeting-room, body.pj-page) .fa-camera-retro {
    --v2-icon-url: url(/icons/video.svg);
}
:where(body.meeting-room, body.pj-page) .fa-microphone-alt {
    --v2-icon-url: url(/icons/mic.svg);
}
:where(body.meeting-room, body.pj-page) .fa-eye {
    --v2-icon-url: url(/icons/eye.svg);
}
:where(body.meeting-room, body.pj-page) .fa-question {
    --v2-icon-url: url(/icons/question.svg);
}
:where(body.meeting-room, body.pj-page) .fa-pen-to-square {
    --v2-icon-url: url(/icons/pencil.svg);
}
:where(body.meeting-room, body.pj-page) .fa-chalkboard-teacher {
    --v2-icon-url: url(/icons/whiteboard.svg);
}
:where(body.meeting-room, body.pj-page) .fa-images {
    --v2-icon-url: url(/icons/images.svg);
}
:where(body.meeting-room, body.pj-page) .fa-folder-open {
    --v2-icon-url: url(/icons/folder.svg);
}
:where(body.meeting-room, body.pj-page) .fa-expand-alt {
    --v2-icon-url: url(/icons/expand.svg);
}
:where(body.meeting-room, body.pj-page) .fa-person-shelter {
    --v2-icon-url: url(/icons/home.svg);
}
:where(body.meeting-room, body.pj-page) .fa-closed-captioning {
    --v2-icon-url: url(/icons/caption.svg);
}
:where(body.meeting-room, body.pj-page) .fa-circle-dot {
    --v2-icon-url: url(/icons/circle.svg);
}

/* ----- Top-10 unmapped FA classes (added Aug 13, 2026) -----
   Ranked by frequency across the codebase. Each maps an FA class to the
   closest matching v2 SVG. New SVGs were created for the ones with no
   existing v2 equivalent. */
:where(body.meeting-room, body.pj-page) .fa-play {
    --v2-icon-url: url(/icons/play.svg);
}
:where(body.meeting-room, body.pj-page) .fa-circle-play {
    --v2-icon-url: url(/icons/circle-play.svg);
}
:where(body.meeting-room, body.pj-page) .fa-heart {
    --v2-icon-url: url(/icons/heart.svg);
}
:where(body.meeting-room, body.pj-page) .fa-check {
    --v2-icon-url: url(/icons/check.svg);
}
:where(body.meeting-room, body.pj-page) .fa-id-badge,
:where(body.meeting-room, body.pj-page) i.fa-id-badge {
    --v2-icon-url: url(/icons/id-badge.svg);
}
:where(body.meeting-room, body.pj-page) .fa-arrows-rotate {
    --v2-icon-url: url(/icons/arrows-rotate.svg);
}
:where(body.meeting-room, body.pj-page) .fa-wifi {
    --v2-icon-url: url(/icons/wifi.svg);
}
:where(body.meeting-room, body.pj-page) .fa-user-shield {
    --v2-icon-url: url(/icons/user-shield.svg);
}
:where(body.meeting-room, body.pj-page) .fa-user-plus {
    --v2-icon-url: url(/icons/user.svg);
}
:where(body.meeting-room, body.pj-page) .fa-circle-info {
    --v2-icon-url: url(/icons/circle-info.svg);
}
:where(body.meeting-room, body.pj-page) .fa-calendar-check {
    --v2-icon-url: url(/icons/calendar-check.svg);
}
:where(body.meeting-room, body.pj-page) .fa-rocket {
    --v2-icon-url: url(/icons/rocket.svg);
}

/* ----- Dead-SVG wiring (Aug 13, 2026) -----
   These SVGs already existed in /icons/ but had no FA mapping. Wiring them
   up removes 5 dead files without adding any new ones. */
:where(body.meeting-room, body.pj-page) .fa-chevron-down {
    --v2-icon-url: url(/icons/chevron-down.svg);
}
:where(body.meeting-room, body.pj-page) .fa-hand-pointer {
    --v2-icon-url: url(/icons/hand-pointer.svg);
}
:where(body.meeting-room, body.pj-page) .fa-microphone-alt {
    --v2-icon-url: url(/icons/mic-alt.svg);
}
:where(body.meeting-room, body.pj-page) .fa-hand,
:where(body.meeting-room, body.pj-page) .fa-hand-back-fist {
    --v2-icon-url: url(/icons/hand.svg);
}
:where(body.meeting-room, body.pj-page) .fa-circle-live,
.mr-rec-dot,
:where(body.meeting-room, body.pj-page) .recording-indicator {
    --v2-icon-url: url(/icons/live.svg);
}

/* Catch-all fallback for any icon still using FA inside v2 surfaces —
   provides a square placeholder so the layout doesn't collapse on
   unfamiliar classes. Visual is intentionally subtle.

   IMPORTANT: `:where()` zeroes out selector specificity so this rule
   does NOT override specific icon mappings above (which set
   `--v2-icon-url` and rely on the base rule's
   `mask-image: var(--v2-icon-url, none)`). Without `:where()`, the
   `:not([attr])` + `body.meeting-room` selector would outrank mappings
   like `:where(body.meeting-room, body.pj-page) i.fa-microphone` and force every icon to show
   the square. */
:where(:where(body.meeting-room, body.pj-page))
:where(i.fas, i.far, i.fa-solid, i.fa-brands, i.fa, i.fab):not([data-v2-icon-mapped]) {
    background-color: var(--v2-text-tertiary);
    -webkit-mask-image: url(/icons/square.svg);
    mask-image: url(/icons/square.svg);
}

/* ----- Prejoin v2 (added Aug 13, 2026) -----
   Icons used by the new 2-col prejoin layout (Join now → CTA, Devices
   quick rows, Your name row). All generic so they work in any v2
   context. */
:where(body.meeting-room, body.pj-page) .fa-arrow-right,
:where(body.meeting-room, body.pj-page) i.fa-arrow-right {
    --v2-icon-url: url(/icons/arrow-right.svg);
}
:where(body.meeting-room, body.pj-page) .fa-volume-high,
:where(body.meeting-room, body.pj-page) i.fa-volume-high {
    --v2-icon-url: url(/icons/volume-high.svg);
}
:where(body.meeting-room, body.pj-page) .fa-user,
:where(body.meeting-room, body.pj-page) i.fa-user {
    --v2-icon-url: url(/icons/user.svg);
}

/* ----- Prejoin background action icons (added Aug 13, 2026) -----
   Prejoin.js renders these in the background grid (.pj-background-option
   is-action buttons): NONE, BLUR, STRONG, CUTOUT, URL, Upload.
   fa-user was already mapped above (used by NONE + CUTOUT). */
:where(body.meeting-room, body.pj-page) .fa-droplet,
:where(body.meeting-room, body.pj-page) i.fa-droplet {
    --v2-icon-url: url(/icons/droplet.svg);
}
:where(body.meeting-room, body.pj-page) .fa-water,
:where(body.meeting-room, body.pj-page) i.fa-water {
    --v2-icon-url: url(/icons/water.svg);
}
:where(body.meeting-room, body.pj-page) .fa-arrow-up-from-bracket,
:where(body.meeting-room, body.pj-page) i.fa-arrow-up-from-bracket {
    --v2-icon-url: url(/icons/upload.svg);
}