/* ============================================
   LIVE BREAK — THREE-COLUMN LAYOUT
   ============================================
   This stylesheet controls the live break page — a full-viewport,
   three-column layout used during active card-breaking sessions.

   Layout (desktop):
     LEFT (300px)  — break info, auction panel, featured store items, spots list
     CENTER (1fr)  — embedded live stream (YouTube/Twitch/Restream iframe)
     RIGHT (280px) — embedded chat iframe

   The page is designed to fill the viewport below the site header and
   above the footer, using calc(100vh - 220px) to account for Astra
   theme header, nav bar, body padding, and footer. At 1920x1080 all
   elements (header, nav, live content, footer) remain visible without
   scrolling.

   Z-index layers:
     1    — breaks accordion (base stacking)
     20   — featured store items (dropdown overlays spots list)
     100  — store search results dropdown
     9998 — mobile chat FAB (floating action button)
     9999 — mobile chat bottom sheet (overlay)
     10000 — batch summary modal
   ============================================ */

/* ============================================
   ASTRA THEME OVERRIDES
   ============================================
   Strip all default content-area padding and margins that the Astra
   theme applies to single post pages. This is necessary so the live
   break wrapper (.mc-live-wrap) can fill the full width and calculated
   height edge-to-edge, touching the header above and footer below
   with no gaps or scrollbars.

   Targets:
   - #content / .ast-container — Astra's outer content wrappers
   - .entry-content — WordPress default content margin
   - .ast-article-single — Astra's single-post article wrapper
   ============================================ */
.single-mercer_break #content {
    padding-top: 0;
    padding-bottom: 0;
}
.single-mercer_break #content > .ast-container {
    padding-top: 0;
    padding-bottom: 0;
}
.single-mercer_break .entry-content {
    margin-top: 0;
    margin-bottom: 0;
}
.single-mercer_break .ast-article-single {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* ============================================
   MAIN CONTAINER — .mc-live-wrap
   ============================================
   The outermost wrapper for the live break page. Uses a viewport-
   height calculation to fill exactly the space between header and
   footer. The 220px subtraction accounts for:
     - Astra header height (~80px)
     - Nav bar (~40px)
     - Body top/bottom margins
     - Footer height (~100px)

   overflow:hidden prevents any content from leaking outside the
   calculated height. The flex column layout allows the grid columns
   to fill all remaining vertical space via flex:1.
   ============================================ */
.mc-live-wrap {
    width: 100%;
    height: calc(100vh - 220px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ============================================
   THREE-COLUMN GRID — .mc-live-columns
   ============================================
   CSS Grid creates the three-column layout:
     - Left panel:  300px fixed (spots + auction controls)
     - Center:      1fr flexible (stream fills remaining space)
     - Right panel: 280px fixed (chat)

   flex:1 makes this grid expand to fill all vertical space in
   the flex parent (.mc-live-wrap).
   min-height:0 is required for flex children that contain overflow
   content — without it, the grid would expand beyond its container
   instead of allowing internal scrolling.
   ============================================ */
.mc-live-columns {
    display: grid;
    grid-template-columns: 360px 1fr 340px;
    flex: 1;
    min-height: 0;
    gap: 0;
}

/* ============================================
   LEFT PANEL — Spots & Auction
   ============================================
   Contains (top to bottom):
     1. Break info header (title, type badge, spots count)
     2. Auction panel (timer, bids, bid form)
     3. Featured store items (WC products the runner is selling)
     4. Spots list or breaks accordion (scrollable)

   Uses flex column layout so the spots list at the bottom can
   scroll independently while headers stay pinned via flex-shrink:0.
   ============================================ */

.mc-live-left {
    background: var(--mc-bg-secondary);
    border-right: 1px solid var(--mc-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Break Info Header ---
   Shows the break title (truncated with ellipsis if too long),
   break type badge (PYT/Random), and spots count (e.g., "8/32 sold").
   flex-shrink:0 keeps this pinned at the top of the left panel.
   ------------------------------------------- */

.mc-live-break-info {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mc-border);
    flex-shrink: 0;
}

.mc-live-break-title {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 4px;
    /* Truncate long break titles with ellipsis instead of wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-live-break-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Break type badge (e.g., "PYT", "RANDOM") — colored pill label */
.mc-live-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}

/* Spots counter text (e.g., "8/32 sold") */
.mc-live-spots-count {
    color: var(--mc-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* ============================================
   AUCTION PANEL
   ============================================
   The mini-auction UI shown in the left panel during live sessions.
   Displays one of three states:
     1. Waiting — animated dots while no auction is active
     2. Active  — countdown timer, current bid, bid form
     3. Sold    — winner announcement with pop animation

   flex-shrink:0 keeps the panel from collapsing when the spots
   list below needs scroll space.
   ============================================ */

.mc-auction-panel {
    border-bottom: 1px solid var(--mc-border);
    flex-shrink: 0;
    padding: 8px 12px;
}

/* --- Waiting State ---
   Shown when no auction is currently running. Displays "Waiting
   for auction..." with three animated dots that pulse in sequence.
   Each dot is offset by 0.2s to create a wave effect.
   ------------------------------------------- */

.mc-auction-waiting {
    text-align: center;
    padding: 8px;
    color: var(--mc-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.mc-auction-waiting .mc-waiting-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--mc-text-secondary);
    border-radius: 50%;
    margin: 0 2px;
    animation: mc-dot-pulse 1.4s infinite ease-in-out;
}

/* Staggered animation delays create a sequential pulse wave */
.mc-auction-waiting .mc-waiting-dot:nth-child(2) { animation-delay: 0.2s; }
.mc-auction-waiting .mc-waiting-dot:nth-child(3) { animation-delay: 0.4s; }

/* --- Active Auction Layout ---
   Vertical flex column containing: slot name, timer, bid display,
   bid form, and recent bids — all spaced with a 12px gap.
   ------------------------------------------- */

.mc-auction-active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The team/spot name being auctioned (e.g., "SLOT #5 — RANDOM") */
.mc-auction-slot-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

/* --- Countdown Timer ---
   Large, prominent countdown display. Uses tabular-nums for
   consistent digit widths so the timer doesn't jump horizontally
   as numbers change. Color transitions smoothly between states
   via the timer color classes below.
   ------------------------------------------- */

.mc-auction-timer-wrap {
    text-align: center;
}

.mc-auction-timer {
    font-size: 3rem;
    font-weight: 800;
    /* tabular-nums ensures all digits occupy equal width,
       preventing layout shifts as the countdown changes */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: color 0.3s ease;
}

/* Timer color classes — applied dynamically by JS based on remaining time:
   - normal:   green (plenty of time remaining)
   - warning:  orange/amber (time getting low, ~10 seconds)
   - critical: red with pulse animation (final seconds, urgency)
   - paused:   gray (auction paused by runner)
*/
.mc-timer-normal { color: var(--mc-success); }
.mc-timer-warning { color: var(--mc-accent-secondary); }
.mc-timer-critical { color: var(--mc-accent); animation: mc-timer-pulse 0.5s ease-in-out infinite; }
.mc-timer-paused { color: var(--mc-text-secondary); }

/* Small label below the timer (e.g., "TIME REMAINING") */
.mc-auction-timer-label {
    font-size: 0.7rem;
    color: var(--mc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

/* --- Current Bid Display ---
   Card showing the current highest bid amount, bidder name,
   and total bid count. Centered in a rounded card background.
   ------------------------------------------- */

.mc-auction-bid-display {
    text-align: center;
    padding: 10px;
    background: var(--mc-bg-card);
    border-radius: 8px;
}

/* Current bid amount — large green text for high visibility */
.mc-auction-current-bid {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mc-success);
}

/* Leading bidder's display name — orange/amber for distinction */
.mc-auction-bidder-name {
    font-size: 0.8rem;
    color: var(--mc-accent-secondary);
    font-weight: 600;
    margin-top: 2px;
}

/* Total number of bids placed on this auction */
.mc-auction-bid-count {
    font-size: 0.7rem;
    color: var(--mc-text-secondary);
    margin-top: 2px;
}

/* --- Bid Form ---
   Contains quick-bid buttons (preset increments), a custom
   bid input row (text field + submit), and a Buy Now button.
   Laid out as a vertical flex column with 8px gaps.
   ------------------------------------------- */

.mc-bid-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Quick bid buttons row — preset bid amounts (e.g., +$1, +$5, +$10).
   Each button takes equal width via flex:1. */
.mc-bid-quick-btns {
    display: flex;
    gap: 6px;
}

.mc-bid-quick-btn {
    flex: 1;
    padding: 8px 4px;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    color: var(--mc-text-primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mc-bid-quick-btn:hover {
    background: var(--mc-bg-hover);
    border-color: var(--mc-success);
    color: var(--mc-success);
}

/* Custom bid amount row — input field + submit button side by side */
.mc-bid-custom-row {
    display: flex;
    gap: 6px;
}

/* Custom bid dollar input field.
   min-width:0 prevents flex items from overflowing their container
   (flex items default to min-width:auto which can cause overflow). */
.mc-bid-input {
    flex: 1;
    padding: 10px 12px;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    color: var(--mc-text-primary);
    font-size: 1rem;
    font-weight: 600;
    min-width: 0;
}

/* Focus ring uses a semi-transparent green glow matching the success color */
.mc-bid-input:focus {
    border-color: var(--mc-success);
    outline: none;
    box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.2);
}

/* Submit bid button — green (success) colored, doesn't shrink */
.mc-bid-submit {
    padding: 10px 20px;
    background: var(--mc-success);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.mc-bid-submit:hover {
    background: #33b8a7;
    box-shadow: 0 2px 12px rgba(42, 157, 143, 0.3);
}

.mc-bid-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Buy Now button — full-width red (accent) button for instant purchase
   at the runner's set Buy Now price, bypassing the auction timer */
.mc-buy-now-btn {
    width: 100%;
    padding: 10px;
    background: var(--mc-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mc-buy-now-btn:hover {
    background: var(--mc-accent-hover);
    box-shadow: 0 2px 12px rgba(230, 57, 70, 0.3);
}

/* --- Bid Feedback ---
   Inline feedback message shown after a bid attempt. Hidden by default
   (display:none), then shown with success (green) or error (red) styling
   when the appropriate class is added by JS after an AJAX bid response.
   ------------------------------------------- */

.mc-bid-proxy-info {
    text-align: center;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #a0a0a0;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
}

.mc-bid-feedback {
    text-align: center;
    padding: 6px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: none;
}

.mc-bid-feedback.mc-bid-success {
    display: block;
    background: rgba(42, 157, 143, 0.15);
    color: var(--mc-success);
    border: 1px solid var(--mc-success);
}

.mc-bid-feedback.mc-bid-error {
    display: block;
    background: rgba(230, 57, 70, 0.15);
    color: var(--mc-accent);
    border: 1px solid var(--mc-accent);
}

/* --- SOLD Display ---
   Shown when an auction completes. The "SOLD!" label uses a pop
   animation (scale 0.5→1.2→1) for dramatic effect. Shows winner
   name in orange and final price in green.
   ------------------------------------------- */

.mc-auction-sold {
    text-align: center;
    padding: 20px 16px;
}

.mc-sold-label {
    font-size: 2rem;
    font-weight: 800;
    color: var(--mc-accent);
    animation: mc-sold-pop 0.5s ease;
}

.mc-sold-winner {
    font-size: 1rem;
    color: var(--mc-accent-secondary);
    font-weight: 700;
    margin-top: 4px;
}

.mc-sold-amount {
    font-size: 1.2rem;
    color: var(--mc-success);
    font-weight: 700;
    margin-top: 4px;
}

/* --- Recent Bids List ---
   Scrollable mini-list showing the last few bids on the current
   auction. Capped at 80px height with thin custom scrollbar.
   The most recent bid (first-child) is highlighted with primary
   text color and bold weight.
   ------------------------------------------- */

.mc-recent-bids {
    max-height: 80px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mc-border) transparent;
}

.mc-recent-bid {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.75rem;
    color: var(--mc-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* Highlight the most recent (top) bid with brighter text */
.mc-recent-bid:first-child {
    color: var(--mc-text-primary);
    font-weight: 600;
}

.mc-recent-bid-amount {
    color: var(--mc-success);
    font-weight: 600;
}

/* ============================================
   FEATURED STORE ITEMS
   ============================================
   WooCommerce products that the break runner has pinned to
   the live break page for direct sale during the stream.

   Each item can be in either "Buy Now" mode (standard WC
   add-to-cart) or "Auction" mode (mini-auction engine with
   real-time bidding).

   z-index:20 ensures the store section sits above the spots
   list, and overflow:visible allows the search dropdown to
   extend beyond the container boundaries.
   ============================================ */

.mc-live-store-items {
    flex-shrink: 0;
    border-bottom: 1px solid var(--mc-border);
    position: relative;
    z-index: 20;
    overflow: visible;
}

.mc-store-list {
}

/* --- Store Header ---
   Collapsible section header. Clicking toggles visibility of
   the store items list. Shows chevron indicator for expand/collapse.
   user-select:none prevents text selection when clicking rapidly.
   ------------------------------------------- */

.mc-store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    user-select: none;
}

.mc-store-header:hover {
    background: rgba(255,255,255,0.03);
}

/* Chevron arrow — rotates via transform when collapsed/expanded */
.mc-store-chevron {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

/* Store items list container */
.mc-store-list {
    padding: 4px 0;
}

/* --- Store Card ---
   Individual featured product card. Compact vertical layout with
   product name, price, action buttons, and optional auction controls.
   Subtle border separates cards; last card has no bottom border.
   ------------------------------------------- */

.mc-store-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s ease;
}

.mc-store-card:last-child {
    border-bottom: none;
}

.mc-store-card:hover {
    background: rgba(255,255,255,0.03);
}

/* Product thumbnail — hidden by default (display:none) to save space
   in the compact left panel layout. Could be enabled for wider panels. */
.mc-store-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    display: none;
}

/* Product info row — name and price side by side */
.mc-store-card-info {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Product name — truncated with ellipsis; cursor:help shows
   full name on hover via browser tooltip (title attribute) */
.mc-store-card-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mc-text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

/* Product price — green to match the success/money color scheme */
.mc-store-card-price {
    font-size: 0.75rem;
    color: var(--mc-success);
    font-weight: 700;
}

/* Hide the static price when auction controls or auction badge are
   showing, since the auction has its own dynamic price display.
   Uses :has() selector for parent-aware conditional hiding. */
.mc-store-card:has(.mc-store-auction-controls) .mc-store-card-price,
.mc-store-card:has(.mc-store-auction-badge) .mc-store-card-price {
    display: none;
}

/* "Buy Now" / "Add to Cart" button on store cards */
.mc-store-add-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    background: var(--mc-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.mc-store-add-btn:hover {
    background: var(--mc-accent-hover);
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3);
}

/* --- Store Card Actions Wrapper ---
   Flex container for action buttons (mode toggle, buy/auction
   buttons, remove button). Wraps on narrow panels.
   ------------------------------------------- */

.mc-store-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

/* --- Mode Toggle Pill ---
   Two-option segmented control letting the runner switch a
   featured product between "Buy Now" (WC add-to-cart) and
   "Auction" (mini-auction engine) modes. The active option
   gets the red accent background.
   ------------------------------------------- */

.mc-store-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mc-toggle-opt {
    padding: 3px 8px;
    cursor: pointer;
    color: var(--mc-text-secondary);
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

.mc-toggle-opt:hover {
    background: rgba(255,255,255,0.05);
}

/* Active toggle option — filled red background */
.mc-toggle-opt.mc-toggle-active {
    background: var(--mc-accent);
    color: #fff;
}

/* --- Auction State Badges ---
   Small pill badges showing the auction lifecycle state for
   each featured product. Applied dynamically by JS based on
   the auction's current status in the database.

   States:
   - ready:   orange — auction configured but not yet started
   - active:  red with pulse — auction currently running
   - pending: gray — auction ended, awaiting claim/payment
   - won:     green — auction completed and claimed
   ------------------------------------------- */

.mc-store-auction-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

.mc-badge-ready {
    background: rgba(244, 162, 97, 0.15);
    color: var(--mc-accent-secondary);
    border: 1px solid rgba(244, 162, 97, 0.3);
}

/* Active badge pulses to draw attention to the live auction */
.mc-badge-active {
    background: rgba(230, 57, 70, 0.15);
    color: var(--mc-accent);
    border: 1px solid rgba(230, 57, 70, 0.3);
    animation: mc-dot-pulse 1.5s ease-in-out infinite;
}

.mc-badge-pending {
    background: rgba(160, 160, 160, 0.15);
    color: var(--mc-text-secondary);
    border: 1px solid rgba(160, 160, 160, 0.3);
}

.mc-badge-won {
    background: rgba(42, 157, 143, 0.15);
    color: var(--mc-success);
    border: 1px solid rgba(42, 157, 143, 0.3);
}

/* ============================================
   STORE SEARCH (Runner-Only)
   ============================================
   Allows the break runner to search their WooCommerce products
   and add them to the featured store items during a live session.
   Only visible to users with the break_runner role.

   The search results dropdown uses z-index:100 to appear above
   all other left-panel content, and position:absolute to overlay
   without pushing content below it.
   ============================================ */

.mc-store-search-wrap {
    padding: 6px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
}

.mc-store-search-input {
    width: 100%;
    padding: 7px 10px;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    color: var(--mc-text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    box-sizing: border-box;
}

.mc-store-search-input:focus {
    border-color: var(--mc-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.15);
}

.mc-store-search-input::placeholder {
    color: var(--mc-text-secondary);
    font-weight: 400;
}

/* --- Search Results Dropdown ---
   Absolute-positioned dropdown that appears below the search input.
   Hidden by default (display:none), shown by JS when results exist.
   z-index:100 ensures it overlays spots list and other panel content.
   Heavy box-shadow provides visual separation from background.
   ------------------------------------------- */

.mc-store-search-results {
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    top: 100%;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    scrollbar-width: thin;
    scrollbar-color: var(--mc-border) transparent;
}

/* Individual search result row — product thumbnail, name, price, add button */
.mc-store-search-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.12s ease;
}

.mc-store-search-result:last-child {
    border-bottom: none;
}

.mc-store-search-result:hover {
    background: rgba(255,255,255,0.05);
}

/* Search result product thumbnail */
.mc-store-search-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Search result info column — product name and price stacked */
.mc-store-search-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mc-store-search-result-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-store-search-result-price {
    font-size: 0.7rem;
    color: var(--mc-success);
    font-weight: 600;
}

/* "Add" button in search results — green (success) to differentiate
   from the red store card buttons */
.mc-store-search-add-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    background: var(--mc-success);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.mc-store-search-add-btn:hover {
    background: #33b8a7;
}

.mc-store-search-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empty state message when search returns no products */
.mc-store-search-empty {
    padding: 12px;
    text-align: center;
    color: var(--mc-text-secondary);
    font-size: 0.78rem;
}

/* --- Store Card Remove Button (Runner-Only) ---
   Small "x" button to remove a featured product from the live
   break page. Only visible to the break runner. Turns red on hover.
   ------------------------------------------- */

.mc-store-remove-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: var(--mc-text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.mc-store-remove-btn:hover {
    background: rgba(230, 57, 70, 0.15);
    border-color: var(--mc-accent);
    color: var(--mc-accent);
}

.mc-store-remove-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Store Card Inline Auction Controls (Runner-Only) ---
   When a product is in Auction mode, the runner sees inline
   controls to set start price, Buy Now price, timer duration,
   and start/end buttons — all within the compact store card.
   ------------------------------------------- */

.mc-store-auction-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
}

.mc-store-auction-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.mc-store-auction-label {
    font-size: 0.7rem;
    color: var(--mc-text-secondary);
    white-space: nowrap;
    min-width: 40px;
}

/* Price input for auction start/BuyNow values — full width */
.mc-store-auction-price,
.mc-store-buy-now-price {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    background: var(--mc-bg-primary);
    color: var(--mc-text-primary);
    font-size: 0.8rem;
    text-align: right;
}

.mc-store-auction-price:focus,
.mc-store-buy-now-price:focus {
    outline: none;
    border-color: var(--mc-accent);
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.15);
}

/* Start auction button for a featured product */
.mc-store-start-btn {
    flex-shrink: 0;
    padding: 3px 8px;
    background: var(--mc-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.mc-store-start-btn:hover {
    background: #c5303b;
}

.mc-store-start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* End/close auction button for a featured product */
.mc-store-end-btn {
    flex-shrink: 0;
    padding: 3px 8px;
    background: #e63946;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.mc-store-end-btn:hover {
    background: #b52d37;
}

.mc-store-end-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Store Card Active Auction Glow ---
   When a featured product's auction is currently running, its
   card gets a subtle red glow, left border accent, and inset
   shadow to visually distinguish it from other store cards.
   ------------------------------------------- */

.mc-store-card.mc-store-auction-active {
    background: rgba(230, 57, 70, 0.06);
    border-left: 3px solid var(--mc-accent);
    box-shadow: inset 0 0 12px rgba(230, 57, 70, 0.08);
}

/* --- Store Card Won State ---
   After a product auction is won and claimed, the card is
   dimmed (opacity 0.65) to indicate it's no longer available.
   ------------------------------------------- */

.mc-store-card.mc-store-won {
    opacity: 0.65;
}

/* ============================================
   SPOTS LIST (Left Panel, Compact)
   ============================================
   Scrollable list of all spots/teams in the current break.
   Each spot row shows: spot number, team name, and status
   info (winner name, bid amount, or "Available").

   The list scrolls independently within the left panel,
   using a thin custom scrollbar for the dark theme.
   ============================================ */

.mc-live-spots {
    scrollbar-width: thin;
    scrollbar-color: var(--mc-border) transparent;
}

/* Individual spot row — horizontal flex layout */
.mc-live-spot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s ease;
    font-size: 0.78rem;
}

.mc-live-spot:hover {
    background: rgba(255,255,255,0.03);
}

/* Active auction highlight — when this spot is currently being
   auctioned, it gets a red left border and tinted background to
   make it immediately identifiable in the spots list */
.mc-live-spot.mc-spot-active-auction {
    background: rgba(230, 57, 70, 0.08);
    border-left: 3px solid var(--mc-accent);
}

/* Won state — dimmed to show this spot has been sold/claimed */
.mc-live-spot.mc-spot-won {
    opacity: 0.6;
}

/* Spot number (e.g., "#1", "#2") — fixed-width for alignment */
.mc-live-spot-num {
    color: var(--mc-text-secondary);
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    font-size: 0.75rem;
}

/* Team/spot name — takes remaining space, truncates with ellipsis.
   min-width:0 is required for text-overflow:ellipsis to work
   correctly inside a flex container. */
.mc-live-spot-name {
    flex: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Spot status info container — right-aligned, doesn't shrink */
.mc-live-spot-info {
    text-align: right;
    flex-shrink: 0;
}

/* Winner display name — orange for visual distinction */
.mc-live-spot-winner {
    color: var(--mc-accent-secondary);
    font-weight: 600;
    font-size: 0.75rem;
}

/* Winning bid amount — green (money color) */
.mc-live-spot-bid {
    color: var(--mc-success);
    font-weight: 700;
    font-size: 0.75rem;
}

/* Assigned team name (for PYT breaks) */
.mc-live-spot-team {
    color: var(--mc-accent);
    font-weight: 600;
    font-size: 0.7rem;
}

/* "Available" or pending status text */
.mc-live-spot-pending {
    color: var(--mc-text-secondary);
    font-size: 0.75rem;
}

/* ============================================
   BREAKS ACCORDION
   ============================================
   Used in multi-break sessions where a runner streams multiple
   breaks in one sitting. Each break gets a collapsible accordion
   section showing its spots list. Only one section is expanded at
   a time.

   flex:1 makes the accordion fill remaining vertical space in the
   left panel after the fixed-height headers and auction panel.
   min-height:0 enables proper overflow scrolling within the flex
   container.
   z-index:1 keeps the accordion below the store items (z-index:20)
   so the store search dropdown can overlay it.
   ============================================ */

.mc-breaks-accordion {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--mc-border) transparent;
    position: relative;
    z-index: 1;
}

/* Each accordion section wraps one break's header + spots */
.mc-accordion-section {
    border-bottom: 1px solid var(--mc-border);
}

/* Accordion section header — clickable to expand/collapse.
   min-height ensures a consistent touch/click target.
   user-select:none prevents text selection on rapid clicking. */
.mc-accordion-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    cursor: pointer;
    min-height: 32px;
    user-select: none;
    transition: background 0.15s ease;
}

.mc-accordion-header:hover {
    background: rgba(255,255,255,0.04);
}

/* Solo mode — when there's only one break in the session,
   the header is non-interactive (no pointer, no hover effect) */
.mc-accordion-header.mc-accordion-solo {
    cursor: default;
}

.mc-accordion-header.mc-accordion-solo:hover {
    background: transparent;
}

/* Break title in accordion — truncated with ellipsis */
.mc-accordion-title {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Break type badge inside accordion header (e.g., "PYT", "RANDOM") */
.mc-accordion-type-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
    color: var(--mc-text-secondary);
    flex-shrink: 0;
}

/* Spots count in accordion header (e.g., "5/32") */
.mc-accordion-count {
    font-size: 0.72rem;
    color: var(--mc-text-secondary);
    font-weight: 600;
    flex-shrink: 0;
}

/* Chevron indicator for expand/collapse state.
   Rotates -90deg when collapsed (pointing right),
   default rotation (0deg) when expanded (pointing down). */
.mc-accordion-chevron {
    font-size: 0.6rem;
    transition: transform 0.2s ease;
    color: var(--mc-text-secondary);
    flex-shrink: 0;
}

.mc-chevron-collapsed {
    transform: rotate(-90deg);
}

/* Active break indicator — the break currently being streamed
   gets a red left border on its accordion header */
.mc-active-break .mc-accordion-header {
    border-left: 3px solid var(--mc-accent);
}

/* Collapsed accordion body is hidden */
.mc-accordion-body.mc-collapsed {
    display: none;
}

/* ============================================
   CENTER PANEL — Stream
   ============================================
   The main content area showing the embedded live stream.
   Uses black background so the stream blends seamlessly.

   The stream container uses position:relative with the iframe
   set to position:absolute to fill the entire container,
   regardless of aspect ratio. This technique (sometimes called
   "absolute fill") ensures the iframe stretches to fill all
   available space without creating scrollbars.
   ============================================ */

.mc-live-center {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #000;
}

/* --- Status Bar ---
   Thin bar above the stream showing the session title and
   a live indicator dot. flex-shrink:0 keeps it from collapsing.
   ------------------------------------------- */

.mc-live-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    background: var(--mc-bg-secondary);
    border-bottom: 1px solid var(--mc-border);
    flex-shrink: 0;
}

.mc-live-status-bar h2 {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Live status indicator — green/red dot + "LIVE" text */
.mc-live-status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Animated pulsing dot indicating the stream is live */
.mc-live-dot {
    width: 8px;
    height: 8px;
    background: var(--mc-accent);
    border-radius: 50%;
    animation: mc-dot-pulse 1.5s ease-in-out infinite;
}

/* --- Stream Container ---
   Fills all remaining vertical space in the center column.
   Uses relative positioning so the iframe child can be
   absolutely positioned to fill the container completely.
   min-height:0 prevents flex item from refusing to shrink.
   ------------------------------------------- */

.mc-stream-container {
    flex: 1;
    position: relative;
    min-height: 0;
}

/* Stream iframe — absolutely positioned to fill the entire
   container. Works with YouTube, Twitch, and Restream embeds.
   The URL parsing and embed format is handled by PHP/JS. */
.mc-stream-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Placeholder shown when no stream URL is set */
.mc-stream-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--mc-text-secondary);
    font-size: 1.1rem;
    font-weight: 600;
}

/* ============================================
   RIGHT PANEL — Chat
   ============================================
   Embedded chat panel (typically Twitch/YouTube chat iframe).
   Same flex column structure as left panel: fixed header,
   flexible chat body that fills remaining space.

   On tablet (<1024px) this panel is hidden and replaced
   with a floating action button (FAB) that opens a bottom
   sheet overlay for chat.
   ============================================ */

.mc-live-right {
    background: var(--mc-bg-secondary);
    border-left: 1px solid var(--mc-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================
   TEAM BOARD — grid of team tiles in right panel
   ============================================ */
.mc-team-board {
    flex: 0 0 auto;
    max-height: 45%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--mc-border);
    overflow: hidden;
}

.mc-team-board-header {
    padding: 6px 12px;
    border-bottom: 1px solid var(--mc-border);
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--mc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mc-team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    overflow-y: auto;
    align-content: flex-start;
}

.mc-team-tile {
    width: 48px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-bg-primary, #1a1a1a);
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--mc-text-primary, #eee);
    text-align: center;
    line-height: 1.1;
    padding: 3px;
    transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease;
    overflow: hidden;
    word-break: break-word;
    position: relative;
    cursor: default;
}

.mc-team-tile-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Floating tooltip (appended to body by JS) */
.mc-team-tooltip {
    position: fixed;
    background: #fff;
    color: #111;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10001;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
}

.mc-team-tile.mc-team-assigned {
    opacity: 0.2;
    border-color: transparent;
}

.mc-team-tile.mc-team-assigned .mc-team-tile-logo {
    filter: grayscale(1);
}

.mc-team-tile.mc-team-active {
    border-color: var(--mc-accent, #e63946);
    box-shadow: 0 0 10px rgba(230, 57, 70, 0.6);
    animation: mc-team-pulse 1.5s ease-in-out infinite;
}

@keyframes mc-team-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(230, 57, 70, 0.6); }
    50% { box-shadow: 0 0 18px rgba(230, 57, 70, 0.9); }
}

/* Chat section header label (e.g., "LIVE CHAT") */
.mc-live-chat-header {
    padding: 6px 12px;
    border-bottom: 1px solid var(--mc-border);
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--mc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Chat iframe container — fills remaining vertical space.
   min-height:0 enables proper scrolling within flex layout. */
.mc-live-chat-container {
    flex: 1;
    min-height: 0;
}

.mc-live-chat-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Placeholder shown when no chat iframe is configured */
.mc-chat-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--mc-text-secondary);
    font-size: 0.9rem;
    padding: 20px;
    text-align: center;
}

/* ============================================
   RANDOMIZER ANIMATION
   ============================================
   Shown when the runner randomizes team assignments for
   Random-type breaks. Displays a slot-machine-style cycling
   animation through team names before landing on the final
   assignment.

   The display element cycles through team names via JS
   (rapid text updates), then applies .mc-randomizer-final
   class when the final team is selected — triggering a
   "pop" scale animation and color change to green.
   ============================================ */

.mc-randomizer,
.mc-randomizer-result {
    text-align: center;
    padding: 24px 16px;
}

.mc-randomizer-label {
    font-size: 0.85rem;
    color: var(--mc-text-secondary);
    margin-bottom: 12px;
    font-weight: 600;
}

/* The main display area where team names cycle during randomization */
.mc-randomizer-display {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--mc-accent-secondary);
    padding: 16px;
    background: var(--mc-bg-card);
    border: 2px solid var(--mc-border);
    border-radius: 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* Final state — applied when randomization stops on the chosen team.
   Changes color to green and plays a satisfying pop animation. */
.mc-randomizer-display.mc-randomizer-final {
    color: var(--mc-success);
    border-color: var(--mc-success);
    animation: randomizer-pop 0.4s ease;
}

/* Pop animation: scales up to 108% then back to 100% for emphasis */
@keyframes randomizer-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ============================================
   BREAKER CONTROLS — Bottom Bar
   ============================================
   Control bar pinned to the bottom of the left panel, visible
   only to the break runner. Contains spot selection dropdown,
   price inputs, auction start/pause/resume/complete buttons,
   and toggle options (e.g., auto-advance).

   flex-shrink:0 keeps the controls bar from being compressed
   by the scrollable content above it. The red top border visually
   separates controls from the spots list.
   ============================================ */

.mc-breaker-controls {
    background: var(--mc-bg-secondary);
    border-top: 2px solid var(--mc-accent);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.mc-breaker-controls label {
    font-size: 0.75rem;
    color: var(--mc-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Control group — label stacked above its input */
.mc-breaker-control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Shared styles for select dropdowns and text inputs in breaker controls */
.mc-breaker-select,
.mc-breaker-input {
    padding: 6px 10px;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    color: var(--mc-text-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.mc-breaker-select:focus,
.mc-breaker-input:focus {
    border-color: var(--mc-accent);
    outline: none;
}

/* Base button style for all breaker control actions */
.mc-breaker-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

/* --- Breaker Button Variants ---
   Each auction action has a distinct color:
   - Start:    red (accent) — begins the auction
   - Pause:    orange (accent-secondary) — temporarily halts timer
   - Resume:   green (success) — resumes paused auction
   - Complete: gray — manually ends the auction
   ------------------------------------------- */

.mc-breaker-btn-start {
    background: var(--mc-accent);
    color: #fff;
}

.mc-breaker-btn-start:hover {
    background: var(--mc-accent-hover);
    box-shadow: 0 2px 12px rgba(230, 57, 70, 0.3);
}

.mc-breaker-btn-pause {
    background: var(--mc-accent-secondary);
    color: #fff;
}

.mc-breaker-btn-resume {
    background: var(--mc-success);
    color: #fff;
}

.mc-breaker-btn-complete {
    background: #666;
    color: #fff;
}

.mc-breaker-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toggle switch wrapper (e.g., "Auto-advance" checkbox) */
.mc-breaker-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-breaker-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--mc-accent);
}

.mc-breaker-toggle span {
    font-size: 0.8rem;
    color: var(--mc-text-secondary);
    font-weight: 600;
}

/* ============================================
   MOBILE CHAT FAB (Floating Action Button)
   ============================================
   On tablet/mobile viewports where the right chat panel is hidden,
   a floating circular button appears in the bottom-right corner.
   Tapping it opens a bottom sheet overlay containing the chat iframe.

   Hidden by default (display:none), shown via media queries at
   <1024px breakpoint. z-index:9998 keeps it above page content
   but below the bottom sheet (9999).
   ============================================ */

.mc-chat-fab {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: var(--mc-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.4);
    z-index: 9998;
    transition: transform 0.2s ease;
}

.mc-chat-fab:hover {
    transform: scale(1.1);
}

/* --- Chat Bottom Sheet ---
   Slides up from the bottom of the viewport when the FAB is tapped.
   Takes 60% of viewport height. Rounded top corners create a
   native-app-like sheet appearance.

   Hidden by default. The .mc-sheet-open class changes display to
   flex, making the sheet visible.
   z-index:9999 keeps it above the FAB and all page content.
   ------------------------------------------- */

.mc-chat-bottom-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60vh;
    background: var(--mc-bg-secondary);
    border-top: 2px solid var(--mc-accent);
    border-radius: 16px 16px 0 0;
    z-index: 9999;
    flex-direction: column;
}

.mc-chat-bottom-sheet.mc-sheet-open {
    display: flex;
}

/* Bottom sheet header — title + close button */
.mc-chat-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mc-border);
}

.mc-chat-sheet-close {
    background: none;
    border: none;
    color: var(--mc-text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
}

/* Bottom sheet body — chat iframe fills remaining space */
.mc-chat-sheet-body {
    flex: 1;
    min-height: 0;
}

.mc-chat-sheet-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================
   ANIMATIONS — @keyframes
   ============================================
   All reusable keyframe animations used throughout the live
   break interface:

   mc-dot-pulse:   Pulsing opacity + scale for loading dots and
                   live indicators. Used by waiting dots, live dot,
                   active auction badge.

   mc-timer-pulse: Rapid opacity flash for the critical timer state
                   (final seconds). Creates urgency.

   mc-sold-pop:    Entrance animation for the "SOLD!" label. Scales
                   from 50% to 120% then settles at 100% with a
                   fade-in for dramatic effect.

   mc-snipe-flash: Brief orange background flash triggered by
                   anti-snipe timer extensions. Flashes 3 times
                   to alert bidders that more time was added.
   ============================================ */

@keyframes mc-dot-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

@keyframes mc-timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes mc-sold-pop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes mc-snipe-flash {
    0%, 100% { background: transparent; }
    50% { background: rgba(244, 162, 97, 0.15); }
}

/* ============================================
   RESPONSIVE — Tablet (< 1024px)
   ============================================
   At tablet widths:
   - Grid switches from 3 columns to 2 (left panel + stream)
   - Right chat panel is hidden entirely
   - Chat FAB becomes visible so users can access chat via
     the bottom sheet overlay
   - Left panel width increases slightly (300px → 320px) to
     use the freed-up horizontal space
   ============================================ */

@media (max-width: 1023px) {
    .mc-live-columns {
        grid-template-columns: 320px 1fr;
    }

    /* Hide the right chat panel — chat moves to bottom sheet */
    .mc-live-right {
        display: none;
    }

    /* Show the floating chat button */
    .mc-chat-fab {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   RESPONSIVE — Mobile (< 768px)
   ============================================
   At mobile widths the layout switches from side-by-side grid
   to a single stacked column:
   - Viewport-height constraint is removed (height:auto) so
     the page scrolls naturally
   - Grid becomes single column (1fr)
   - Stream moves to top (order:1), spots panel below (order:2)
   - Stream gets a 16:9 aspect ratio instead of flex-fill
   - Accordion and spots list get max-height caps to prevent
     them from pushing content too far down
   - Breaker controls stack vertically for touch usability
   - Session controls adapt to narrower layout
   ============================================ */

@media (max-width: 767px) {
    /* Remove the fixed viewport height — allow natural scrolling */
    .mc-live-wrap {
        height: auto;
        overflow: visible;
    }

    /* Single column stacked layout */
    .mc-live-columns {
        grid-template-columns: 1fr;
        height: auto;
    }

    /* Left panel moves below the stream and loses its right border */
    .mc-live-left {
        border-right: none;
        border-bottom: 1px solid var(--mc-border);
        order: 2;
    }

    /* Stream moves to the top of the stack */
    .mc-live-center {
        order: 1;
    }

    /* Stream uses 16:9 aspect ratio instead of filling flex space,
       since the viewport-height constraint is removed on mobile */
    .mc-stream-container {
        aspect-ratio: 16 / 9;
        min-height: auto;
    }

    /* Chat panel remains hidden on mobile (use FAB instead) */
    .mc-live-right {
        display: none;
    }

    /* Cap accordion height to prevent the spots list from
       consuming the entire mobile viewport */
    .mc-breaks-accordion {
        max-height: 400px;
    }

    .mc-live-spots {
        max-height: 300px;
    }

    /* Reduce timer size for narrower screens */
    .mc-auction-timer {
        font-size: 2.2rem;
    }

    /* Stack breaker controls vertically for touch-friendly layout */
    .mc-breaker-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .mc-breaker-controls > * {
        width: 100%;
    }

    /* Session active bar wraps its contents on narrow screens */
    .mc-session-active-bar {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Stack session start row (stream input + button) vertically */
    .mc-session-start-row {
        flex-direction: column;
    }

    /* Session buttons take full width for easy touch targets */
    .mc-session-btn {
        width: 100%;
    }

    /* Ensure chat FAB is visible on mobile */
    .mc-chat-fab {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   ANTI-SNIPE FLASH
   ============================================
   When a bid is placed in the final seconds of an auction,
   the anti-snipe system extends the timer. This class is
   applied briefly to the timer element, causing it to flash
   orange 3 times (via mc-snipe-flash keyframes) to visually
   alert all viewers that additional time has been added.
   ============================================ */

.mc-anti-snipe-flash {
    animation: mc-snipe-flash 0.5s ease 3;
}

/* ============================================
   SESSION CLAIM BUTTONS
   ============================================
   During a live session with batch ordering enabled, won spots
   and featured items show "Claim" buttons instead of standard
   WooCommerce add-to-cart. Claiming adds the item to a batch
   order (one WC order per buyer per session) that gets created
   when the session ends.

   Two button types:
   - .mc-claim-spot-btn    — claim a won auction spot
   - .mc-claim-featured-btn — claim a won featured product

   After claiming, the .mc-claimed class grays out the button
   and disables further interaction.
   ============================================ */

.mc-claim-spot-btn,
.mc-claim-featured-btn {
    padding: 4px 12px;
    background: var(--mc-success);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.mc-claim-spot-btn:hover,
.mc-claim-featured-btn:hover {
    background: #33b8a7;
    box-shadow: 0 2px 8px rgba(42, 157, 143, 0.3);
}

.mc-claim-spot-btn:disabled,
.mc-claim-featured-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Claimed state — button becomes gray and non-interactive */
.mc-claim-spot-btn.mc-claimed,
.mc-claim-featured-btn.mc-claimed {
    background: var(--mc-text-secondary);
    cursor: default;
    opacity: 0.7;
}

/* ============================================
   BANNED USER NOTICE
   ============================================
   Warning banner shown to users who have been banned from
   this break runner's sessions. Displayed at the top of the
   left panel. Uses red accent color with a semi-transparent
   background to match the error/warning pattern used elsewhere.
   ============================================ */

.mc-banned-notice {
    background: rgba(230, 57, 70, 0.15);
    color: var(--mc-accent);
    border: 1px solid rgba(230, 57, 70, 0.3);
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--mc-border);
}

/* ============================================
   SESSION CONTROLS
   ============================================
   Controls for managing break sessions, shown at the bottom of
   the left panel for break runners. Handles the full session
   lifecycle: selecting breaks, entering stream URL, starting
   the session, switching between breaks, and ending the session.

   Two main states:
   1. Start Panel — shown before a session begins (break checklist,
      stream URL input, start button)
   2. Active Session Bar — shown during an active session (live
      indicator, break tabs, end button)
   ============================================ */

.mc-session-controls {
    flex-shrink: 0;
    border-top: 1px solid var(--mc-border);
    background: var(--mc-bg-secondary);
}

/* --- Start Session Panel ---
   Pre-session setup interface where the runner selects which
   breaks to include in the session, enters their stream URL,
   and starts the session.
   ------------------------------------------- */

.mc-session-start-panel {
    padding: 10px 12px;
}

.mc-session-start-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* --- Break Checklist ---
   Scrollable list of the runner's breaks with checkboxes.
   The runner checks which breaks to include in this session.
   Max-height with overflow-y keeps the list from growing too tall.
   ------------------------------------------- */

.mc-session-break-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mc-border) transparent;
    margin-bottom: 8px;
}

/* Individual break checkbox row */
.mc-session-break-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s ease;
    font-size: 0.8rem;
}

.mc-session-break-check:hover {
    background: rgba(255,255,255,0.04);
}

.mc-session-break-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--mc-success);
    flex-shrink: 0;
}

.mc-session-break-name {
    flex: 1;
    font-weight: 600;
    color: var(--mc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Break type badge in checklist (e.g., "PYT", "RANDOM") */
.mc-session-break-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    color: var(--mc-text-secondary);
    flex-shrink: 0;
}

/* Stream URL input + start button row */
.mc-session-start-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Stream URL text input (accepts YouTube, Twitch, or Restream URLs).
   The URL is parsed server-side to generate the appropriate embed. */
.mc-session-stream-input {
    flex: 1;
    padding: 7px 10px;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    color: var(--mc-text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    min-width: 0;
}

.mc-session-stream-input:focus {
    border-color: var(--mc-success);
    outline: none;
    box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.15);
}

.mc-session-stream-input::placeholder {
    color: var(--mc-text-secondary);
    font-weight: 400;
}

/* --- Session Buttons ---
   Shared base styles for session start and end buttons.
   Start is green (success), end is red (accent).
   ------------------------------------------- */

.mc-session-btn {
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.mc-session-btn-start {
    background: var(--mc-success);
    color: #fff;
}

.mc-session-btn-start:hover {
    background: #33b8a7;
    box-shadow: 0 2px 10px rgba(42, 157, 143, 0.3);
}

.mc-session-btn-end {
    background: var(--mc-accent);
    color: #fff;
}

.mc-session-btn-end:hover {
    background: var(--mc-accent-hover);
    box-shadow: 0 2px 10px rgba(230, 57, 70, 0.3);
}

.mc-session-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Active Session Bar ---
   Shown at the top of session controls during a live session.
   Green-tinted background with a bottom border indicates active state.
   Contains: live dot indicator, "SESSION LIVE" label, break tabs
   for switching between breaks, and an end session button.
   ------------------------------------------- */

.mc-session-active-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(42, 157, 143, 0.08);
    border-bottom: 2px solid var(--mc-success);
}

.mc-session-active-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mc-success);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Pulsing green dot next to the "SESSION LIVE" label */
.mc-session-live-dot {
    width: 7px;
    height: 7px;
    background: var(--mc-success);
    border-radius: 50%;
    animation: mc-dot-pulse 1.5s ease-in-out infinite;
}

/* --- Break Tabs ---
   Horizontal tab bar for switching between breaks in a multi-break
   session. Scrolls horizontally if there are more tabs than fit.
   Scrollbar is hidden for a cleaner appearance.
   ------------------------------------------- */

.mc-session-break-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

/* Hide scrollbar in WebKit browsers (Chrome, Safari, Edge) */
.mc-session-break-tabs::-webkit-scrollbar {
    display: none;
}

/* Individual break tab button */
.mc-session-break-tab {
    padding: 4px 10px;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    color: var(--mc-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

/* Hover state — slightly brighter, but not for active or disabled tabs */
.mc-session-break-tab:hover:not(.active):not(:disabled) {
    background: rgba(255,255,255,0.06);
    border-color: var(--mc-text-secondary);
    color: var(--mc-text-primary);
}

/* Active break tab — green fill indicates which break is currently shown */
.mc-session-break-tab.active {
    background: var(--mc-success);
    border-color: var(--mc-success);
    color: #fff;
    cursor: default;
}

/* --- Live Offer Button (on won spots in accordion) --- */
.mc-live-spot-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.mc-live-offer-btn {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    display: block;
    color: #fff;
}
.mc-live-offer-btn:hover { opacity: 0.85; }
/* Make Offer — orange (call to action) */
.mc-offer-btn-make { background: #f4a261; }
/* View Offers — blue (owner reviewing incoming) */
.mc-offer-btn-view { background: #4a90d9; }
/* Review Counter — red accent (urgent, needs attention) */
.mc-offer-btn-counter { background: var(--mc-accent, #e63946); }

.mc-live-offer-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
    white-space: nowrap;
    display: block;
}
/* You Own This — teal */
.mc-offer-owned { background: #2a9d8f; color: #fff; }
/* Offer Sent — gold/amber to stand out */
.mc-offer-pending { background: #d4a017; color: #fff; }
/* Trade-Back Requested — purple to distinguish from offers */
.mc-offer-tradeback-pending { background: #7b68ee; color: #fff; }
/* Trade Back button — subtle purple outline */
.mc-trade-back-btn {
    background: transparent !important;
    border: 1px solid #7b68ee !important;
    color: #7b68ee !important;
    font-size: 0.65rem !important;
    padding: 1px 6px !important;
}
.mc-trade-back-btn:hover { background: #7b68ee !important; color: #fff !important; }

/* ============================================
   LIVE ALERT — center-screen announcements
   for auction events and status changes
   ============================================ */
.mc-live-alert-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: none;
    animation: mc-alert-fade 3.5s ease forwards;
}
.mc-live-alert {
    background: rgba(0, 0, 0, 0.88);
    border: 2px solid var(--mc-accent, #e63946);
    border-radius: 16px;
    padding: 28px 48px;
    text-align: center;
    box-shadow: 0 0 60px rgba(230, 57, 70, 0.4), 0 8px 32px rgba(0, 0, 0, 0.6);
    animation: mc-alert-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    max-width: 500px;
}
.mc-live-alert-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    animation: mc-alert-bounce 0.6s ease 0.2s;
}
.mc-live-alert-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
}
.mc-live-alert-title.mc-alert-sold { color: var(--mc-accent, #e63946); }
.mc-live-alert-title.mc-alert-new { color: #4a90d9; }
.mc-live-alert-title.mc-alert-offer { color: #f4a261; }
.mc-live-alert-title.mc-alert-no-sale { color: #888; }
.mc-live-alert-detail {
    font-size: 1.1rem;
    color: #ccc;
    margin-top: 4px;
}
.mc-live-alert-detail strong {
    color: #fff;
}

@keyframes mc-alert-pop {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes mc-alert-fade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes mc-alert-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* --- Add Break to Session (live page) --- */
.mc-session-add-break {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--mc-bg-tertiary, #1a1a2e);
    border-radius: 6px;
    margin-top: 6px;
}
.mc-add-break-select {
    flex: 1;
    padding: 6px 10px;
    background: var(--mc-bg-secondary);
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    color: var(--mc-text-primary);
    font-size: 0.8rem;
    min-width: 0;
}
.mc-session-btn-add {
    white-space: nowrap;
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    background: var(--mc-success) !important;
}
.mc-session-btn-add:hover {
    opacity: 0.85;
}

/* --- Dashboard Start Session Form --- */
.mc-session-start-form {
    background: var(--mc-bg-secondary, #16213e);
    border: 1px solid var(--mc-border, #333);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

/* ============================================
   BATCH SUMMARY MODAL
   ============================================
   Fixed-position modal shown when a session ends, summarizing
   the batch orders created. Displays stats (total orders, revenue,
   items sold) in a centered overlay.

   Uses fixed positioning with transform centering technique
   (top:50% + left:50% + translate(-50%,-50%)) for viewport-
   centered placement regardless of scroll position.

   z-index:10000 — highest in the stack, above everything else.
   The overlay backdrop (.mc-batch-overlay) sits at z-index:9999.
   ============================================ */

.mc-batch-summary {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--mc-bg-secondary);
    border: 2px solid var(--mc-success);
    border-radius: 12px;
    padding: 24px 32px;
    z-index: 10000;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.mc-batch-summary h3 {
    font-size: 1.2rem;
    color: var(--mc-success);
    margin: 0 0 12px;
}

/* Stats row — centered flex layout showing key session metrics */
.mc-batch-summary-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
}

.mc-batch-stat {
    text-align: center;
}

.mc-batch-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--mc-text-primary);
}

.mc-batch-stat-label {
    font-size: 0.75rem;
    color: var(--mc-text-secondary);
}

/* Close/dismiss button for the batch summary modal */
.mc-batch-summary-close {
    padding: 8px 24px;
    background: var(--mc-success);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}

/* Semi-transparent dark overlay behind the batch summary modal.
   Covers the entire viewport to focus attention on the modal.
   z-index:9999 — sits below the modal (10000) but above everything else. */
.mc-batch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* ============================================
   QUICK SALE — Ad-hoc card sales form
   ============================================ */

.mc-quick-sale-form {
    padding: 6px 8px;
    border-bottom: 1px solid var(--mc-border);
}

.mc-quick-sale-input {
    width: 100%;
    padding: 5px 8px;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    color: var(--mc-text);
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.mc-quick-sale-input:focus {
    outline: none;
    border-color: var(--mc-accent);
}

.mc-quick-sale-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mc-quick-sale-dollar {
    color: var(--mc-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.mc-quick-sale-price {
    width: 70px;
    padding: 4px 6px;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    color: var(--mc-text);
    font-size: 0.8rem;
}

.mc-quick-sale-price:focus {
    outline: none;
    border-color: var(--mc-accent);
}

.mc-quick-sale-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mc-quick-sale-auction-btn {
    background: var(--mc-accent);
    color: #fff;
}

.mc-quick-sale-auction-btn:hover {
    opacity: 0.9;
}

.mc-quick-sale-buynow-btn {
    background: #2a9d8f;
    color: #fff;
}

.mc-quick-sale-buynow-btn:hover {
    opacity: 0.9;
}

.mc-quick-sale-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Quick Sale card modifier — no thumbnail, uses tag icon */
.mc-store-card-quick {
    border-left: 2px solid var(--mc-accent);
}

.mc-store-card-quick-icon {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    padding: 0 2px;
}

.mc-quick-remove-btn {
    background: none;
    border: none;
    color: var(--mc-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.mc-quick-remove-btn:hover {
    color: var(--mc-accent);
}

.mc-claim-quick-btn {
    background: #2a9d8f;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.mc-claim-quick-btn:hover {
    opacity: 0.9;
}

.mc-claim-quick-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mc-claim-quick-btn.mc-claimed {
    background: var(--mc-accent);
}

/* ============================================
   HLS PLAYER — Self-hosted stream video element
   ============================================ */

#mc-hls-player {
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
}

/* ============================================
   GO LIVE — Browser-based streaming controls
   ============================================ */

.mc-go-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: var(--mc-accent, #e63946);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.2s;
}

.mc-go-live-btn:hover {
    opacity: 0.9;
}

.mc-go-live-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mc-go-live-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
}
.mc-go-live-status-overlay {
    position: absolute;
    top: calc(50% + 40px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    background: rgba(0,0,0,0.6);
    padding: 4px 12px;
    border-radius: 4px;
}

.mc-go-live-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    z-index: 10;
}

.mc-go-live-buttons {
    display: flex;
    gap: 10px;
}

.mc-go-live-control-btn {
    padding: 8px 18px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.mc-go-live-control-btn:hover {
    background: rgba(255,255,255,0.25);
}

.mc-go-live-control-stop {
    background: var(--mc-accent, #e63946);
    border-color: var(--mc-accent, #e63946);
}

.mc-go-live-control-stop:hover {
    opacity: 0.9;
}

.mc-go-live-status {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding: 4px 12px;
    border-radius: 4px;
}

.mc-go-live-status-live {
    background: var(--mc-accent, #e63946);
    animation: mc-live-pulse 1.5s ease-in-out infinite;
}

@keyframes mc-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.mc-stream-container {
    position: relative;
}

.mc-stream-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* ============================================
   LIVE CHAT WIDGET — Built-in chat for
   self-hosted streams and restream
   ============================================ */

.mc-chat-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mc-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-chat-msg {
    font-size: 0.85rem;
    line-height: 1.3;
    padding: 2px 0;
    word-break: break-word;
    position: relative;
}

.mc-chat-msg-name {
    font-weight: 700;
    color: var(--mc-text-primary, #f0f0f0);
}

.mc-chat-msg-name.mc-chat-runner {
    color: var(--mc-accent, #e63946);
}

.mc-chat-msg-text {
    color: var(--mc-text-secondary, #ccc);
}

.mc-chat-input-bar {
    display: flex;
    border-top: 1px solid #333;
    padding: 6px;
    gap: 6px;
    align-items: center;
}

.mc-chat-input {
    flex: 1;
    padding: 8px 10px;
    background: #1a1a1a;
    border: none;
    border-radius: 4px;
    color: #f0f0f0;
    font-size: 0.85rem;
    outline: none;
}

.mc-chat-input:focus {
    background: #222;
}

.mc-chat-send-btn {
    background: var(--mc-accent, #e63946);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.mc-chat-send-btn:hover {
    opacity: 0.9;
}

.mc-chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mc-chat-delete-btn {
    display: none;
    position: absolute;
    right: 4px;
    top: 0;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    line-height: 1;
}

.mc-chat-msg:hover .mc-chat-delete-btn {
    display: inline-block;
}

.mc-chat-delete-btn:hover {
    color: var(--mc-accent, #e63946);
}

.mc-chat-banned {
    padding: 8px;
    color: #999;
    font-size: 0.8rem;
    text-align: center;
}

.mc-chat-login {
    padding: 8px;
    text-align: center;
    font-size: 0.85rem;
}

.mc-chat-login a {
    color: var(--mc-accent, #e63946);
    text-decoration: underline;
}