/* =============================================================
 * Live Trade page styles
 *
 * The look matches the Cheragh /user/live/forex reference:
 *  - Dark, rounded "stage" container (16:9-ish aspect)
 *  - Centered host badge with star emoji while placeholder shows
 *  - Big blue Join button below the stage
 *  - "LIVE NOW" pulse pill indicator
 *
 * After the user clicks Join, the placeholder is hidden and the
 * Zoom SDK takes over the stage container.
 * ============================================================= */

.brl-live-stage {
    background: #161616;
    border-radius: 18px;
    width: 100%;
    max-width: 1280px;
    margin: 24px auto 0;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* While the SDK is rendering we want a FIXED viewport-relative height
   so the embed never grows tall enough to force the brokersift page
   to scroll. We learnt the hard way in 1.7.14 that `overflow:hidden`
   plus a tight `min-height` on the mount can break the SDK rendering
   on desktop — so instead we set the height here at the STAGE level
   and let the mount inside fill 100% of it. The SDK's internal layout
   math sees a normal-block container and renders inside it correctly.
   `100vh - 220px` reserves room for the brokersift top bar + sidebar
   header on a typical desktop; `min-height` keeps it usable on short
   windows; `max-height` keeps it sensible on very tall windows. */
.brl-live-stage[data-state="in-meeting"],
.brl-live-stage[data-state="joining"] {
    aspect-ratio: auto;
    /* 1.7.37 — tightened from 1.7.31's 260px buffer / 880px cap.
       Ali pointed out the Zoom bottom toolbar (Audio / Video /
       Chat / Reactions / Avatar) wasn't visible. Best guess: on a
       standard 1080p browser viewport (~990px after Chrome chrome)
       the previous 260px buffer let the stage grow to ~730px,
       which ended at y=1020 — about 30px past the visible viewport.
       The toolbar sits in the bottom ~50px of the meeting view,
       so the bottom half of it was clipped by both the viewport
       edge and our `overflow: hidden`. Bumping the buffer to 300px
       and capping at 720px keeps the stage's bottom edge inside
       the viewport on standard 1080p screens, so the toolbar lands
       comfortably above the fold. */
    height: calc(100vh - 300px);
    min-height: 480px;
    max-height: 720px;
    overflow: hidden;
    display: block;
    background: #0f0f0f;
}

.brl-zoom-mount {
    /* Fill the stage exactly. The stage has the height constraint;
       the mount just expands to match. No position:absolute (that
       broke layout in 1.7.13), no separate min-height (the stage
       already enforces one). */
    width: 100%;
    height: 100%;
    background: #1a1a1a;
}

.brl-live-placeholder {
    text-align: center;
    color: #f3f4f6;
    padding: 40px 24px;
    width: 100%;
}

.brl-live-host {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

.brl-live-host .brl-live-star {
    color: #fbbf24;
    margin-left: 4px;
    font-size: 22px;
}

.brl-live-pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 10px;
}

.brl-live-pulse-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: brl-live-pulse 1.4s ease-in-out infinite;
}

@keyframes brl-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(1.4); }
}

.brl-live-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.brl-live-state-icon {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}
.brl-live-state-icon svg { width: 28px; height: 28px; }

.brl-live-state-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #f3f4f6;
}

.brl-live-state-text {
    font-size: 14px;
    color: #9ca3af;
    margin: 0 0 6px;
    max-width: 420px;    line-height: 1.55;
}

/* ----- Join button ----- */
.brl-live-join-btn {
    display: block;
    width: 100%;
    max-width: 1280px;
    margin: 18px auto 0;
    padding: 16px 24px;
    border: 0;
    border-radius: 14px;
    background: #2563eb;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.08s ease;
    position: relative;
}

.brl-live-join-btn:hover:not([disabled]) { background: #1d4ed8; }
.brl-live-join-btn:active:not([disabled]) { transform: translateY(1px); }

.brl-live-join-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.85;
}

.brl-live-join-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    margin-left: 10px;
    vertical-align: middle;
    animation: brl-live-spin 0.8s linear infinite;
}

.brl-live-join-btn.is-loading .brl-live-join-spinner {
    display: inline-block;
}
.brl-live-join-btn.is-loading .brl-live-join-label {
    opacity: 0.85;
}

@keyframes brl-live-spin {
    to { transform: rotate(360deg); }
}

.brl-live-error {
    max-width: 1280px;
    margin: 14px auto 0;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: 10px;
    font-size: 14px;
}

/* ============================================================
 * Viewer Onboarding Guide (1.7.50)
 * ============================================================
 *
 * Three-step card shown to viewers in the READY state, before
 * they click Join. Walks them through: (1) clicking Join, (2)
 * clicking the blue audio-enable button that appears after the
 * meeting loads, (3) using the bottom toolbar. Hidden the moment
 * the meeting actually starts — the same `.brl-live-placeholder`
 * hide rule that the host badge / pulse use takes care of this,
 * because the guide lives inside that placeholder block.
 */
.brl-onboard {
    margin: 28px auto 0;
    max-width: 760px;
    padding: 24px 28px 22px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(77, 171, 247, 0.10), transparent 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(168, 85, 247, 0.08), transparent 55%),
        rgba(15, 18, 26, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    text-align: left;
}

.brl-onboard-head {
    margin-bottom: 18px;
}

.brl-onboard-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #4dabf7;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(77, 171, 247, 0.12);
    border: 1px solid rgba(77, 171, 247, 0.25);
}

.brl-onboard-title {
    margin: 10px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #f3f4f6;
    letter-spacing: 0.2px;
}

.brl-onboard-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.brl-onboard-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.08);
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.brl-onboard-step:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(77, 171, 247, 0.20);
    transform: translateY(-1px);
}

.brl-onboard-num {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #4dabf7, #339af0);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(77, 171, 247, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.brl-onboard-step:nth-child(2) .brl-onboard-num {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    box-shadow: 0 4px 10px rgba(167, 139, 250, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.brl-onboard-step:nth-child(3) .brl-onboard-num {
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 4px 10px rgba(52, 211, 153, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.brl-onboard-body {
    flex: 1;
    min-width: 0;
}
.brl-onboard-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #f3f4f6;
    margin-bottom: 2px;
    letter-spacing: 0.1px;
}
.brl-onboard-body p {
    margin: 0;
    font-size: 13.5px;
    color: #b0b7c3;
    line-height: 1.55;
}
.brl-onboard-body em {
    font-style: normal;
    color: #e5e7eb;
    font-weight: 600;
}

/* Inline "pill" that mimics the look of the real button users
   will see after joining. Helps them recognise it visually. */
.brl-onboard-chip {
    display: inline-block;
    padding: 2px 10px;
    margin: 0 2px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #4dabf7, #339af0);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(77, 171, 247, 0.30);
    vertical-align: 1px;
    white-space: nowrap;
}

.brl-onboard-foot {
    margin: 18px 2px 0;
    padding-top: 14px;
    border-top: 1px dashed rgba(148, 163, 184, 0.16);
    font-size: 12.5px;
    color: #94a3b8;
    display: flex;
    gap: 8px;
    align-items: center;
}
.brl-onboard-foot-icon {
    flex: 0 0 auto;
    font-size: 14px;
    filter: saturate(0.85);
}

/* Mobile: tighten spacing and let the number stay aligned. */
@media (max-width: 600px) {
    .brl-onboard {
        margin: 22px 12px 0;
        padding: 20px 18px 18px;
    }
    .brl-onboard-step {
        padding: 12px 14px;
        gap: 12px;
    }
    .brl-onboard-num {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    .brl-onboard-body p { font-size: 13px; }
    .brl-onboard-foot { font-size: 12px; }
}

/* ============================================================
 * Zoom Component View — layout overrides
 * ============================================================
 *
 * Goal: chat panel on the RIGHT, participant ribbon HIDDEN, share
 * fills the centre. Earlier CSS-only attempts (1.7.15 / 1.7.16)
 * silently failed because the chat dialog is rendered as a Popper
 * directly under <body> (outside our #brl-zoom-mount scope), and
 * because Zoom's class names for the participant ribbon don't
 * match the patterns we guessed.
 *
 * As of 1.7.17 the actual moving + hiding is done from JS — see
 * applyLayoutOverrides() in public/js/livetrade.js. We keep this
 * file deliberately empty here so there are no conflicting CSS
 * rules to debug; everything is JS-driven.
 *
 * EXCEPTION: simple toolbar-button visibility tweaks are done via
 * CSS below — these are global rules that target stable aria-label
 * values on Zoom's bottom toolbar buttons. They don't need DOM
 * walking, so CSS is the right tool.
 */

/* ----- Hide specific bottom-toolbar buttons -----
   Hides Share Screen / Captions / Settings / Participants / More
   from the Zoom bottom toolbar. Viewers don't need any of these:
   - Share Screen: only the host shares.
   - Captions: not configured on our meeting.
   - Settings: viewers can't change much there anyway and the menu
     just adds noise.
   - Participants count: viewers don't need to see / manage who's in.
   - More (⋯): every useful entry there is already a primary button
     or unavailable to viewers.
   We keep Audio, Video, Chat, Reactions, and the safety-warning
   character icon. */
/* 1.7.37 — toolbar button hides DISABLED.
   Ali reported the bottom toolbar (Audio, Video, Chat, Reactions,
   Avatar/Security) wasn't visible after 1.7.36's auto-open-chat
   removal. Suspect: our aria-label substring hides were either
   collapsing the toolbar's flex layout to nothing or matching more
   buttons than intended on this SDK build. To debug, we disable
   every hide rule and let Zoom render its default toolbar in full.
   Ali can confirm the toolbar appears, then we can selectively
   re-add the specific buttons he doesn't want (Share Screen,
   Participants, Settings, Captions, More) one at a time with
   exact-match selectors that won't catch siblings.

   Previous rules preserved as a commented block for easy revert: */
/*
button[aria-label="Start Share"],
button[aria-label="Stop Share"],
button[aria-label="Share Screen"],
button[aria-label="Share screen"],
button[aria-label*="open share" i],
button[aria-label*="screen share" i],
button[aria-label*="start sharing" i],
button[aria-label*="stop sharing" i],
button[aria-label="Caption"],
button[aria-label="Captions"],
button[aria-label*="caption" i],
button[aria-label*="subtitle" i],
button[aria-label*="closed caption" i],
button[aria-label="Settings"],
button[aria-label*="open settings" i],
button[aria-label*="meeting settings" i],
button[aria-label="Participants"],
button[aria-label="Open Participants"],
button[aria-label*="open participants" i],
button[aria-label*="manage participants" i],
button[aria-label*="participants list" i],
button[aria-label="More"],
button[aria-label="More options"],
button[aria-label*="more meeting" i],
button[aria-label*="more options" i],
button[aria-label*="more menu" i] {
    display: none !important;
}
*/

/* ----- Live Trade dashboard card status pill ----- */
.brl-badge-live {
    background: rgba(239, 68, 68, 0.16);
    color: #ef4444;
}
.brl-badge-live .brl-dot {
    background: #ef4444;
    animation: brl-live-pulse 1.4s ease-in-out infinite;
}
.brl-badge-offline {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}
.brl-badge-offline .brl-dot { background: #94a3b8; }

/* Responsive: on smaller screens, drop the 16:9 ratio and let the
   container size naturally so the placeholder stays readable. */
@media (max-width: 720px) {
    .brl-live-stage {
        aspect-ratio: auto;
        min-height: 320px;
    }
    .brl-live-host { font-size: 22px; }
    .brl-live-state-title { font-size: 18px; }
}

/* ============================================================
 * 1.7.29 — CSS-based chat pinning and share-drag lock
 * ============================================================
 *
 * Why CSS instead of JS setProperty (the 1.7.27/1.7.28 approach)?
 * Because the SDK / Popper.js does `setAttribute('style', '...')`
 * which atomically replaces the WHOLE inline style attribute,
 * including any !important flags we set. Our setInterval re-apply
 * lost the race — console showed `position`, `top`, `right`,
 * `left`, `bottom`, `transform`, and even `z-index` getting
 * stripped, while a few unrelated longhands (width, height,
 * border-radius...) survived. Classic race-window symptom.
 *
 * External CSS doesn't have this problem. Stylesheet rules live
 * in a separate place from inline styles; the SDK can rewrite
 * inline all it wants and our rules still match. With !important,
 * external rules beat any non-!important inline value — and
 * Popper.js / react-draggable set their transforms WITHOUT
 * !important, which is exactly the gap we exploit.
 *
 * Specificity note: we anchor every rule with `body` to lift
 * it above any default Zoom CSS that selects by class. With
 * the attribute selectors below it, total specificity is
 * comfortable (0,2,1) and won't accidentally clash. */

/* Chat dialog — pin to right side of viewport, fixed position so
   the share area doesn't shrink to make room. Targets both shapes
   the chat panel can take (popper variant + inline panel).

   1.7.41 — top/height/max-height now SET BY JS to mirror the stage's
   bounding rect (see syncChatToStage). These CSS defaults are just
   the fallback if JS hasn't measured yet — once the JS runs, inline
   !important overrides these values. */
body [role="dialog"][aria-label="Chat"],
body [aria-label="Chat"][data-brl-styled="1"] {
    position:      fixed                              !important;
    top:           120px                              !important;
    right:         20px                               !important;
    bottom:        auto                               !important;
    left:          auto                               !important;
    transform:     none                               !important;
    width:         320px                              !important;
    height:        calc(100vh - 300px)                !important;
    min-height:    480px                              !important;
    max-height:    720px                              !important;
    z-index:       9999                               !important;
    border-radius: 12px                               !important;
    box-shadow:    0 10px 30px rgba(0, 0, 0, 0.4)     !important;
    background:    rgba(15, 15, 15, 0.96)             !important;
}

/* 1.7.40 — kill all "this is draggable" affordances inside the chat
   dialog. The mousedown blocker in styleChatPanel() handles the
   actual event suppression; this is just the visual hint so cursors
   don't show a grab/move icon when hovering the header. */
body [role="dialog"][aria-label="Chat"],
body [role="dialog"][aria-label="Chat"] *:not(button):not(input):not(textarea):not(a):not([contenteditable]):not([role="button"]) {
    cursor: default !important;
}
body [role="dialog"][aria-label="Chat"] {
    user-select: none !important;
    -webkit-user-select: none !important;
}
/* But re-enable selection / cursor inside the actual message editor
   and message list, so viewers can copy text. */
body [role="dialog"][aria-label="Chat"] textarea,
body [role="dialog"][aria-label="Chat"] [contenteditable],
body [role="dialog"][aria-label="Chat"] [role="textbox"] {
    cursor: text !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* 1.7.40 — when chat is open, shrink the stage from the right so
   the chat panel doesn't overlap the share canvas. Toggled by
   body.brl-chat-open via styleChatPanel() / the MutationObserver
   removal branch. The 340px = chat width (320px) + 20px gap. */
body.brl-chat-open .brl-live-stage[data-state="in-meeting"] {
    padding-right: 340px !important;
    box-sizing:    border-box !important;
    transition:    padding-right 180ms ease-out;
}

/* Share content / control bar — react-draggable lets viewers grab
   and pan the screen-share around the viewport, which is awful for
   a one-way broadcast.
   
   1.7.30 had a sweeping rule `.react-draggable:not([role="dialog"])`
   that BROKE Zoom's bottom toolbar.
   1.7.31 narrowed too aggressively — only caught the small "Screen
   share control bar" overlay, missing the actual share viewport
   wrapper, so the share canvas could still be dragged.
   1.7.32 uses :has() to find react-draggables that CONTAIN a
   non-participant canvas. That's the share viewport. The toolbar
   has no canvas inside, so it's unaffected. */

/* Primary lock — by content (modern Chrome/Firefox via :has()). */
body .react-draggable:has(canvas:not([aria-label*="participant" i])) {
    transform: translate(0px, 0px) !important;
    cursor:    default             !important;
}

/* Secondary lock — by aria-label, also covers the floating
   "Screen share control bar" overlay which has no canvas. */
body .react-draggable[aria-label*="screen share" i],
body .react-draggable[aria-label*="screen-share" i] {
    transform: translate(0px, 0px) !important;
    cursor:    default             !important;
}

/* ===========================================================
   1.7.38 — Custom bottom toolbar
   ===========================================================
   Web SDK Component View 3.11.2 ships no default meeting-
   controls toolbar (confirmed in 1.7.37 by disabling every
   one of our hide rules and still seeing nothing rendered
   between the share area and the bottom of the viewport).
   We build a five-button bar in JS (buildAndShowToolbar in
   livetrade.js) and style it here.

   Position: fixed at the bottom-center of the viewport so it
   doesn't get clipped by the stage's overflow: hidden, and
   stays put no matter what the SDK does to its own DOM. The
   stage is sized in calc(100vh - 300px); max-height 720px
   above, which leaves room for this bar in the bottom ~80px
   of the viewport. */
.brl-meeting-toolbar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(15, 18, 24, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    z-index: 9998;          /* below chat (9999) — chat sits above */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.brl-meeting-toolbar[hidden] { display: none !important; }

.brl-tb-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 64px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: #e2e8f0;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}
.brl-tb-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.brl-tb-btn:active {
    background: rgba(255, 255, 255, 0.14);
}
/* Audio / Video states. Off = neutral, on = brand blue,
   muted = warning red so it's obvious at a glance. */
.brl-tb-btn[data-state="on"]    { color: #4dabf7; }
.brl-tb-btn[data-state="muted"] { color: #ef4444; }

.brl-tb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.brl-tb-label {
    font-size: 11px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Popovers (reactions + profile) — positioned by JS using
   getBoundingClientRect of the anchor button, then we style
   appearance only. */
.brl-tb-popover {
    position: fixed;
    z-index: 9999;
    background: rgba(20, 24, 32, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    gap: 4px;
    color: #ffffff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.brl-tb-pop-emoji {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 22px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.12s;
}
.brl-tb-pop-emoji:hover { background: rgba(255, 255, 255, 0.1); }

.brl-tb-popover-profile {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px;
    min-width: 200px;
}
.brl-tb-pop-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}
.brl-tb-pop-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Mobile: tighter spacing, smaller icons */
@media (max-width: 640px) {
    .brl-meeting-toolbar { gap: 2px; padding: 6px 8px; }
    .brl-tb-btn { min-width: 52px; padding: 6px 8px; }
    .brl-tb-label { font-size: 10px; }
}