/* ============================================================================
 * home.css
 * ----------------------------------------------------------------------------
 * Home tab — call carousel, call cards, response button grid.
 * Extracted from /response/pages/home.php inline <style>; restyled in
 * Liquid Glass.
 *
 * Includes the scrubber addition (counter + draggable track that replaces
 * the dot strip when call count > DOTS_MAX). The JS that builds it lives
 * inline in home.php; this is just the styling.
 *
 * Load AFTER liquid-glass.css and index.css.
 * ========================================================================= */


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile carousel layout — clamp the home tab to the viewport so only one
 * card is on screen at a time, scrolling internal to .fn-call-body.
 * ──────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    #fn-page-home.active {
        height: calc(100dvh - var(--fn-safe-top) - var(--fn-top-chrome-h) - var(--fn-tabbar-h) - var(--fn-safe-bottom) - 2rem);
        overflow: hidden;
    }
    #fn-page-home .fn-page-inner {
        height: 100%;
        padding-top: .1rem;
        /* Bottom padding zeroed — was 0.5rem of wasted space below the
           controls. Reclaiming it lets the card grow without pushing
           the controls under the tabbar. */
        padding-bottom: 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    #fn-page-home .fn-carousel {
        /* Was 3.3rem reserved for controls. Reduced to 2.9rem to give
           the call-card more height. Matched against the controls
           block which is now 2.4rem (arrows) + 0.35rem (top margin)
           + 0.15rem (bottom margin) = 2.9rem. */
        height: calc(100% - 2.9rem);
        overflow-x: auto;
        overflow-y: hidden;
        /* Vertical padding trimmed from 4px to 2px — saves 0.25rem of
           slide vertical reserve, going straight into the call card.
           Horizontal padding zeroed — card now sits at page-inner edge,
           aligned with chrome content edges. */
        padding: 2px 0;
        box-sizing: border-box;
    }
    #fn-page-home .fn-carousel-slide {
        height: 100%;
        padding-right: 3px;
        box-sizing: border-box;
    }
    #fn-page-home .fn-call-card {
        height: 100%;
        min-height: 0;
        width: calc(100% - 1px);
        max-width: calc(100% - 1px);
        overflow: hidden;
    }
    #fn-page-home .fn-call-body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pan-x;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #fn-page-home .fn-call-body::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    #fn-page-home .fn-call-section .value.message {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #fn-page-home .fn-call-section .value.message::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Carousel — horizontal scroll-snap container, one slide per call.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-carousel {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: flex-start;
    width: 100%;
    border-radius: var(--lg-r-lg);
    box-sizing: border-box;
    scroll-behavior: auto;
    padding: 4px 0;
}
.fn-carousel::-webkit-scrollbar { display: none; }

.fn-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    box-sizing: border-box;
    padding-right: 1px;
    min-width: 0;
}
.fn-carousel-slide:last-child { padding-right: 0; }


/* ─────────────────────────────────────────────────────────────────────────
 * Carousel controls — Prev/Next arrows flanking either dots OR the
 * scrubber depending on call count.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-carousel-ctrls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    /* Tighter vertical rhythm — was .65rem/.25rem (sum 0.9rem); now
       .35rem/.15rem (sum 0.5rem). Combined with 2.4rem arrows we fit
       cleanly in the 2.9rem carousel reservation. */
    margin: .35rem 0 .15rem;
    padding: 0 .25rem;
}
.fn-carousel-ctrls[hidden] { display: none !important; }

.fn-carousel-arrow {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--lg-edge);
    background-color: var(--lg-surface);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    color: var(--fn-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    box-shadow: var(--lg-shadow);
    transition: transform var(--lg-t-base) var(--lg-spring),
                background-color var(--lg-t-base) var(--lg-ease),
                box-shadow var(--lg-t-base) var(--lg-ease),
                opacity .15s ease;
}
.fn-carousel-arrow:active:not(:disabled) {
    transform: scale(.92);
    background-color: var(--lg-pressed);
}
.fn-carousel-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.fn-carousel-arrow .mdi {
    font-size: 1.3rem;
    line-height: 1;
}

.fn-carousel-arrow.fn-jump {
    background-color: var(--fn-brand);
    background-image: var(--lg-fill-primary);
    color: #fff;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-right: .9rem;
}
.fn-carousel-arrow.fn-jump:active:not(:disabled) {
    filter: brightness(.85);
}
.fn-carousel-arrow.fn-jump .mdi { font-size: 1.2rem; }


/* ─────────────────────────────────────────────────────────────────────────
 * Dots — shown when call count ≤ DOTS_MAX (12). One row, no wrap; the
 * scrubber takes over when there are too many to fit.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
}
.fn-carousel-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    border: 0;
    background: var(--fn-text-muted);
    opacity: .35;
    padding: 0;
    cursor: pointer;
    transition: opacity .2s, transform .2s, width .25s, background .2s;
}
.fn-carousel-dot.active {
    background: var(--fn-brand);
    opacity: 1;
    width: 1.5rem;
    border-radius: .35rem;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Scrubber — shown when call count > DOTS_MAX. Counter on the left, thin
 * track with draggable thumb. Replaces the dot strip; the JS that wires
 * pointer events lives in home.php.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-carousel-scrubber {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: 0 .25rem;
}
.fn-carousel-counter {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    color: var(--fn-text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    user-select: none;
    min-width: 2.8rem;
    text-align: center;
}
.fn-carousel-counter strong {
    color: var(--fn-text);
    font-weight: 800;
}
.fn-carousel-track {
    flex: 1 1 auto;
    position: relative;
    height: 1.5rem;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}
.fn-carousel-track::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: .25rem;
    transform: translateY(-50%);
    background: var(--fn-text-muted);
    opacity: .22;
    border-radius: 999px;
}
.fn-carousel-thumb {
    position: absolute;
    top: 50%;
    width: 1.3rem;
    height: .55rem;
    background: var(--fn-brand);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    transition: left .18s ease, width .15s ease, height .15s ease;
    pointer-events: none;
}
.fn-carousel-track.is-dragging .fn-carousel-thumb {
    transition: none;
    width: 1.6rem;
    height: .7rem;
}


/* ─────────────────────────────────────────────────────────────────────────
 * CALL CARD — the hero element on the home tab. Full Liquid Glass: real
 * blur, frosted-strong surface for readability, specular highlight from
 * the top edge, layered drop shadow.
 *
 * Only one card is visible at a time (carousel snap), so the cost of
 * backdrop-filter is fine — single surface in view.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-call-card {
    position: relative;
    background-color: var(--lg-surface);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: 1px solid var(--lg-edge);
    border-radius: var(--lg-r-lg);
    overflow: hidden;
    box-shadow: var(--lg-shadow);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
    /* Y = 2.0rem (was 1.8; bumped to maintain scrubber clearance from
       tabbar after the hero grew from 3.2rem → 4rem). Slide reserve
       still 3.25rem above Y. X = 2.0 + 3.25 + 0.05 buffer = 5.3rem. */
    height: calc(100vh  - var(--fn-safe-top) - var(--fn-top-chrome-h) - var(--fn-tabbar-h) - var(--fn-safe-bottom) - 5.3rem);
    height: calc(100dvh - var(--fn-safe-top) - var(--fn-top-chrome-h) - var(--fn-tabbar-h) - var(--fn-safe-bottom) - 5.3rem);
    min-height: 16rem;
    isolation: isolate;
}

/* Specular top-edge highlight via ::before */
.fn-call-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--lg-specular);
    pointer-events: none;
    z-index: 0;
}
.fn-call-card > * { position: relative; z-index: 1; }

/* Selected slide — brand-coloured edge + amplified shadow. */
.fn-carousel-slide.is-selected .fn-call-card {
    border-color: var(--fn-brand);
    box-shadow:
        0 0 0 2px var(--fn-brand-soft),
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 14px 36px -8px rgba(49, 58, 70, .28),
        0 4px 12px -4px rgba(0, 0, 0, .10);
}


/* ─────────────────────────────────────────────────────────────────────────
 * Call card header — pulse-dot ACTIVE/CLOSED/EARLIER badge + time.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-call-header {
    padding: .6rem .85rem;
    background: linear-gradient(135deg, rgba(176,58,46,.10), rgba(176,58,46,.03));
    border-bottom: 1px solid var(--lg-divider);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.fn-call-header.older  { background: var(--lg-surface-subtle); }
.fn-call-header.closed { background: var(--lg-surface-subtle); }

.fn-call-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--fn-accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .25rem .55rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.fn-call-badge::before {
    content: '';
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: #fff;
    animation: fnPulse 1.4s infinite;
}
.fn-call-badge.older  { background: var(--fn-text-muted); }
.fn-call-badge.older::before  { animation: none; }
.fn-call-badge.closed { background: var(--fn-text-muted); }
.fn-call-badge.closed::before { animation: none; }

@keyframes fnPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.fn-call-time {
    font-size: .78rem;
    color: var(--fn-text-muted);
    font-weight: 600;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Call body — incident type, address, units, message.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-call-body {
    padding: .85rem .95rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.fn-call-body > * { flex-shrink: 0; }

.fn-call-type {
    /* Scales down on narrow screens. Floor at .95rem, ceiling 1.25rem.
       Final guard: nowrap+ellipsis if it still overflows. */
    font-size: clamp(.95rem, 4.2vw, 1.25rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--fn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Preplan alert banner — solid red CTA at top of call body when a preplan
 * exists for the address. Solid (not glass) because action affordance.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-call-preplan-banner {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    background-image: var(--lg-fill-danger);
    color: #fff;
    border-radius: var(--lg-r-sm);
    padding: .65rem .75rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
                0 6px 16px -6px rgba(176, 58, 46, .55),
                0 2px 6px -2px rgba(0,0,0,.15);
    transition: filter .12s ease, transform .1s ease;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}
.fn-call-preplan-banner.secure-only {
    background-image: linear-gradient(135deg, #0b95ad 0%, #086c80 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
                0 6px 16px -6px rgba(11, 142, 166, .55),
                0 2px 6px -2px rgba(0,0,0,.15);
}
.fn-call-preplan-banner:active {
    transform: scale(.985);
    filter: brightness(.92);
}
.fn-call-preplan-banner-icon {
    font-size: 1.45rem;
    line-height: 1;
    flex-shrink: 0;
    animation: fnPreplanPulse 2.4s ease-in-out infinite;
}
@keyframes fnPreplanPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}
.fn-call-preplan-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.fn-call-preplan-banner-title {
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.1;
}
.fn-call-preplan-banner-sub {
    font-size: .78rem;
    font-weight: 600;
    opacity: .92;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fn-call-preplan-banner-arrow {
    font-size: 1.4rem;
    line-height: 1;
    opacity: .85;
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Section blocks — label (small caps with brand tab) + value.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-call-section {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}
.fn-call-section .label {
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--fn-text-muted);
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.fn-call-section .label::before {
    content: '';
    width: 3px;
    height: 11px;
    background: var(--fn-brand);
    border-radius: 2px;
}
.fn-call-section .value {
    font-size: .92rem;
    font-weight: 600;
    color: var(--fn-text);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.fn-call-section .value.message {
    font-size: .92rem;
    line-height: 1.5;
    font-weight: 500;
    max-height: 5.5em;
    white-space: normal;
    overflow-y: auto;
    overflow-x: hidden;
    text-overflow: clip;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    word-break: break-word;
    overflow-wrap: anywhere;
    background-color: var(--lg-surface-subtle);
    border: 1px solid var(--lg-edge);
    border-radius: var(--lg-r-sm);
    padding: .4rem .55rem;
    flex-shrink: 0;
}
.fn-call-section .value.message::-webkit-scrollbar {
    width: 4px;
}
.fn-call-section .value.message::-webkit-scrollbar-thumb {
    background: var(--lg-edge-strong);
    border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Units list — small brand-coloured pills, horizontally scrollable.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-units-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.fn-units-list::-webkit-scrollbar { display: none; }
.fn-units-list li {
    background-image: var(--lg-fill-primary);
    color: #fff;
    border-radius: .4rem;
    padding: .28rem .6rem;
    font-weight: 800;
    font-size: .82rem;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset,
                0 1px 3px rgba(0,0,0,.1);
}


/* ─────────────────────────────────────────────────────────────────────────
 * "YOUR RESPONSE" SUMMARY BLOCK — replaces the old top-of-screen status
 * bar. Now lives inside .fn-call-response-box together with the response
 * buttons, so the two read as one bordered unit (matches the user's
 * design screenshot). Two-column inner layout:
 *
 *   Left:  person icon  +  heading text  +  subtitle
 *   Right: one circle per response type, count of respondents inside
 *
 * The heading text defaults to "YOUR RESPONSE" (muted) and flips to the
 * selected response's label (coloured to its type) once the user taps
 * a button. Circle counts come from the focused call's data.responses;
 * other carousel slides render with em-dash placeholders so the layout
 * doesn't shift when the user swipes to a different card.
 * ──────────────────────────────────────────────────────────────────────── */

/* Outer wrapper that holds BOTH the summary row and the response grid.
   Owns the soft border + tinted background + outer margin; the children
   now sit transparent on top of it. */
.fn-call-response-box {
    margin: .35rem .85rem .85rem;
    padding: .5rem;
    background-color: var(--lg-surface-subtle);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: var(--lg-r-md);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-shrink: 0;
    box-sizing: border-box;
    /* Subtle inner highlight so the box reads as a single elevated
       surface against the card. Matches the .fn-call-card specular
       treatment, minus the heavy shadow. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.fn-call-myresp {
    padding: .15rem .25rem .15rem .15rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
    min-height: 2.5rem;
    box-sizing: border-box;
    /* No standalone border/background/margin — the .fn-call-response-box
       wrapper handles all of that now. */
}

.fn-call-myresp-left {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 1 1 auto;
    min-width: 0;
}

.fn-call-myresp-icon {
    font-size: 1.2rem;
    color: var(--fn-text-muted);
    flex-shrink: 0;
}

/* Heading: bold, all-caps, slightly tracked. Defaults to muted grey;
   when a response is selected, .fn-call-myresp-heading.<color> swaps
   in the type's accent for instant "I know what I picked" feedback.
   Sits directly next to the icon — no longer wrapped in a column
   layout since the subtitle line was removed. */
.fn-call-myresp-heading {
    font-weight: 800;
    font-size: .92rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fn-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.1;
    transition: color .15s ease;
}
.fn-call-myresp-heading.success { color: #198754; }
.fn-call-myresp-heading.danger  { color: var(--fn-accent); }
.fn-call-myresp-heading.warning { color: #d97706; }
.fn-call-myresp-heading.info    { color: #0d6efd; }
.fn-call-myresp-heading.purple  { color: #7c3aed; }
.fn-call-myresp-heading.teal    { color: #0d9488; }
.fn-call-myresp-heading.pink    { color: #db2777; }
.fn-call-myresp-heading.dark    { color: #1f2937; }
.fn-call-myresp-heading.gray    { color: #6b7280; }

/* Count-circles row. One per response type, coloured by type. The
   circle holds dark-on-tint count text — placeholder "—" for the
   off-screen-card case where data.responses isn't this card's.
   max-width: 60% so a wall of circles can't crowd the heading text. */
.fn-call-myresp-circles {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    max-width: 60%;
    overflow: hidden;
}

.fn-call-myresp-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    color: var(--fn-text);
    flex-shrink: 0;
    /* Soft-tinted background + matching tinted border keeps the circles
       readable on either a light or dark card surface. Each .color
       modifier below sets both. Slightly stronger fill than before
       since the circles now sit on the response-box's tinted backdrop
       — they'd otherwise wash into it. */
    background-color: rgba(255, 255, 255, .85);
    border: 1px solid var(--lg-edge);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.fn-call-myresp-circle.success { background-color: rgba(25, 135, 84,  .22); border-color: rgba(25, 135, 84,  .40); color: #0f5132; }
.fn-call-myresp-circle.danger  { background-color: rgba(176, 58, 46,  .22); border-color: rgba(176, 58, 46,  .40); color: #842029; }
.fn-call-myresp-circle.warning { background-color: rgba(217, 119, 6,  .24); border-color: rgba(217, 119, 6,  .40); color: #7a3e00; }
.fn-call-myresp-circle.info    { background-color: rgba(13, 110, 253, .22); border-color: rgba(13, 110, 253, .40); color: #084298; }
.fn-call-myresp-circle.purple  { background-color: rgba(124, 58, 237, .22); border-color: rgba(124, 58, 237, .40); color: #4a1d96; }
.fn-call-myresp-circle.teal    { background-color: rgba(13, 148, 136, .22); border-color: rgba(13, 148, 136, .40); color: #0b5a52; }
.fn-call-myresp-circle.pink    { background-color: rgba(219, 39, 119, .22); border-color: rgba(219, 39, 119, .40); color: #831843; }
.fn-call-myresp-circle.dark    { background-color: rgba(31, 41, 55,   .18); border-color: rgba(31, 41, 55,   .35); color: #1f2937; }
.fn-call-myresp-circle.gray    { background-color: rgba(107, 114, 128, .18); border-color: rgba(107, 114, 128, .35); color: #374151; }

/* Tight screens: shrink the circles a hair so 4+ response types still
   fit alongside the heading text without crowding. */
@media (max-width: 380px) {
    .fn-call-myresp-circles { gap: .28rem; }
    .fn-call-myresp-circle  { width: 1.75rem; height: 1.75rem; font-size: .78rem; }
    .fn-call-response-box   { padding: .4rem; gap: .4rem; }
    .fn-call-myresp         { gap: .5rem; }
}


/* ─────────────────────────────────────────────────────────────────────────
 * RESPONSE BUTTON GRID — the "tap to respond" buttons. SOLID coloured
 * fills (Liquid Glass keeps action buttons solid for unambiguous
 * affordance), but pressed/is-mine states get spring + inner highlight.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-resp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    /* Padding zeroed out — the .fn-call-response-box wrapper provides
       the outer padding now. */
    padding: 0;
    flex-shrink: 0;
}

.fn-resp-btn {
    border: 0;
    /* Was --lg-r-sm (0.65rem). Bumped to --lg-r-md (1rem) for a
       softer, more pill-like look matching the rest of the redesign. */
    border-radius: var(--lg-r-md);
    color: #fff;
    background: var(--fn-text-muted);
    font-family: inherit;
    font-weight: 800;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .55rem .25rem;
    min-height: 3rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    line-height: 1.05;
    transition: filter .12s, transform .1s, opacity .15s, box-shadow .15s;
    box-shadow: 0 1px 0 rgba(255,255,255,.20) inset,
                0 2px 6px rgba(0,0,0,.18);
    overflow: hidden;
    position: relative;
}
.fn-resp-btn span {
    /* fnFitRespButtons() sets an inline font-size — largest that fits.
       Don't ellipsis here; auto-fit avoids truncation by design. */
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    display: block;
    text-align: center;
}
.fn-resp-btn:active:not(:disabled):not(.is-mine) {
    transform: scale(.96);
    filter: brightness(.92);
}
.fn-resp-btn:disabled { cursor: not-allowed; }
.fn-resp-btn .mdi { font-size: 1.1rem; line-height: 1; }

.fn-resp-btn.success { background: #198754; }
.fn-resp-btn.danger  { background: var(--fn-accent); }
.fn-resp-btn.warning { background: #d97706; }
.fn-resp-btn.info    { background: #0d6efd; }
.fn-resp-btn.purple  { background: #7c3aed; }
.fn-resp-btn.teal    { background: #0d9488; }
.fn-resp-btn.pink    { background: #db2777; }
.fn-resp-btn.dark    { background: #1f2937; }
.fn-resp-btn.gray    { background: #6b7280; }

/* User's own response — dimmed + checkmark badge. */
.fn-resp-btn.is-mine {
    cursor: default;
    opacity: .55;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5),
                0 1px 3px rgba(0,0,0,.1);
}
.fn-resp-btn.is-mine::after {
    content: '';
    position: absolute;
    top: .3rem;
    right: .3rem;
    width: 1.05rem;
    height: 1.05rem;
    background: rgba(255,255,255,.95);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%23222' d='M9,16.17L4.83,12L3.41,13.41L9,19L21,7L19.59,5.59L9,16.17Z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Empty state — "no active calls".
 * ──────────────────────────────────────────────────────────────────────── */
.fn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem 2rem;
    color: var(--fn-text-muted);
}
.fn-empty-icon {
    font-size: 3.5rem;
    line-height: 1;
    opacity: .35;
    color: var(--fn-text);
    margin-bottom: .25rem;
}
.fn-empty-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--fn-text);
    margin: .5rem 0 .35rem;
}
.fn-empty-sub {
    font-size: .85rem;
    color: var(--fn-text-muted);
    line-height: 1.45;
    max-width: 22rem;
}


/* ─────────────────────────────────────────────────────────────────────────
 * In-app confirmation modal — strong frosted glass card on a dim overlay.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.fn-confirm-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.fn-confirm-card {
    background-color: var(--lg-surface-strong);
    backdrop-filter: var(--lg-blur-strong);
    -webkit-backdrop-filter: var(--lg-blur-strong);
    border: 1px solid var(--lg-edge-strong);
    color: var(--fn-text);
    border-radius: var(--lg-r-lg);
    max-width: 22rem;
    width: 100%;
    padding: 1.1rem 1.1rem .85rem;
    box-shadow: var(--lg-shadow-strong);
    transform: scale(.92);
    transition: transform .2s ease;
}
.fn-confirm-overlay.active .fn-confirm-card { transform: scale(1); }

.fn-confirm-title {
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0 0 .5rem;
    line-height: 1.3;
}
.fn-confirm-msg {
    font-size: .92rem;
    line-height: 1.45;
    color: var(--fn-text-muted);
    margin: 0 0 .9rem;
}
.fn-confirm-msg strong {
    color: var(--fn-text);
    font-weight: 800;
}
.fn-confirm-actions {
    display: flex;
    gap: .55rem;
}
.fn-confirm-btn {
    flex: 1;
    padding: .7rem .5rem;
    border: 0;
    border-radius: var(--lg-r-sm);
    font-family: inherit;
    font-weight: 800;
    font-size: .9rem;
    cursor: pointer;
    line-height: 1;
}
.fn-confirm-btn.cancel {
    background-color: var(--lg-surface-subtle);
    color: var(--fn-text);
    border: 1px solid var(--lg-edge);
    backdrop-filter: var(--lg-blur-subtle);
    -webkit-backdrop-filter: var(--lg-blur-subtle);
}
.fn-confirm-btn.confirm {
    background-image: var(--lg-fill-primary);
    color: #fff;
}
.fn-confirm-btn:active { filter: brightness(.92); }