/* ============================================================
   Message Sending Progress Overlay
   ============================================================ */
#msgSendingOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 10, 25, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
}
#msgSendingOverlay.active {
    display: flex;
    animation: sendingOverlayIn 0.25s ease;
}
@keyframes sendingOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#msgSendingCard {
    background: var(--color-card);
    border-radius: 28px;
    padding: 44px 52px 40px;
    width: 320px;
    text-align: center;
    box-shadow: 0 32px 80px rgba(74, 51, 96, 0.22), 0 4px 16px rgba(0,0,0,0.12);
    animation: sendingCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sendingCardIn {
    from { opacity: 0; transform: scale(0.86) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.sending-plane {
    color: var(--color-primary);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sendingFloat 2.4s ease-in-out infinite;
}
@keyframes sendingFloat {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%       { transform: translateY(-7px) rotate(2deg); }
}
.sending-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 20px;
}
.sending-bar-track {
    height: 6px;
    background: var(--color-border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 28px;
}
.sending-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-light));
    width: 0%;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.sending-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    animation: sendingShimmer 1.6s ease-in-out infinite;
}
@keyframes sendingShimmer {
    from { transform: translateX(-200%); }
    to   { transform: translateX(200%); }
}
/* Item 7 (orion_motion Part B, broadcast only): row holds the existing
   linear bar ALONGSIDE the new conic-ring, ported primitive
   css/style-08.css .motion-conic-ring. Scoped to #msgrBcSendingCard so the
   plain single-message sending overlay (#msgSendingOverlay, further below)
   keeps its unmodified .sending-bar-track spacing. */
#msgrBcSendingCard .sending-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
#msgrBcSendingCard .sending-bar-track {
    flex: 1;
    margin-bottom: 0;
}
#msgrBcSendingCard .sending-ring-wrap {
    position: relative;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    --ring-color: var(--color-primary);
}
#msgrBcSendingCard .sending-ring-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 700;
    color: var(--color-text);
}
.sending-count-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}
.sending-count-done {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary-dark);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    transition: transform 0.15s ease;
}
.sending-count-done.bump {
    transform: scale(1.12);
}
.sending-count-sep {
    font-size: 24px;
    font-weight: 400;
    color: var(--color-border);
    line-height: 1;
}
.sending-count-total {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-light);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sending-sublabel {
    font-size: 0.75rem;
    color: var(--color-text-light);
    font-weight: 500;
}
.sending-name-ticker {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    height: 1.3em;
    overflow: hidden;
    text-align: center;
    margin-bottom: 20px;
    opacity: 0;
}
.sending-name-ticker.flash {
    animation: sendingNameFlash 0.55s ease forwards;
}
@keyframes sendingNameFlash {
    0%   { opacity: 0; transform: translateY(5px); }
    25%  { opacity: 1; transform: translateY(0); }
    65%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-5px); }
}
.sending-action-btn {
    margin-top: 20px;
    padding: 9px 36px;
    border-radius: 99px;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-text-light);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.sending-action-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
}
.sending-action-btn:active {
    transform: scale(0.96);
}
.sending-action-btn.done-btn {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.sending-action-btn.done-btn:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}
#msgSendingOverlay.done .sending-bar-fill {
    background: linear-gradient(90deg, var(--color-success), #2ecc71);
}
#msgSendingOverlay.done .sending-count-done {
    color: var(--color-success);
}

/* ============================================================
   Messenger Context Menu + Reactions
   ============================================================ */

@keyframes msgrCtxIn {
    from { opacity: 0; transform: scale(0.92) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.msgr-ctx-menu {
    position: fixed;
    z-index: 1100;
    min-width: 200px;
    max-width: calc(100vw - 24px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    padding: 6px;
    animation: msgrCtxIn 120ms var(--ease-out);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.msgr-ctx-emoji-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 4px 6px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
    overflow-x: auto;
}
.msgr-ctx-emoji-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.msgr-ctx-emoji-btn:hover { background: var(--color-bg); transform: scale(1.15); }
.msgr-ctx-emoji-btn.is-mine { background: var(--color-primary-soft); }
.msgr-ctx-emoji-more { font-size: 14px; color: var(--color-text-light); }

.msgr-ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-size-body);
    color: var(--color-text);
    user-select: none;
}
.msgr-ctx-item:hover { background: var(--color-bg); }
.msgr-ctx-item i { width: 16px; text-align: center; color: var(--color-text-light); }
.msgr-ctx-item.is-danger { color: var(--color-danger); }
.msgr-ctx-item.is-danger i { color: var(--color-danger); }
.msgr-ctx-item.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.msgr-ctx-item.is-disabled:hover { background: transparent; }

/* Context menu info rows (reactions count + seen-by) */
.msgr-ctx-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 6px;
}
.msgr-ctx-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-size-body);
    color: var(--color-text-light);
    user-select: none;
}
.msgr-ctx-info-row:hover { background: var(--color-bg); }
.msgr-ctx-info-row i { width: 16px; text-align: center; font-size: 13px; flex: 0 0 16px; }
.msgr-ctx-info-label { flex: 1; }
.msgr-ctx-avatar-stack {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.msgr-ctx-mini-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--color-surface);
    margin-left: -6px;
    flex: 0 0 20px;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    color: var(--color-text-light);
}
.msgr-ctx-avatar-stack .msgr-ctx-mini-avatar:last-child { margin-left: 0; }
.msgr-ctx-mini-fallback { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.msgr-ctx-mini-overflow { background: var(--color-bg); color: var(--color-text-light); }

/* Reactions pills under a bubble */
.msgr-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    justify-content: flex-start; /* reactions always sit on the LEFT, even on own messages (Telegram) */
}
.msgr-reactions:empty { display: none; }

/* Borderless pills (Telegram-style). A subtle fill gives contrast against the
   chat background and the incoming bubble; outgoing coloured bubbles get a
   translucent-white pill instead (below). */
/* Reaction-pill system — borderless, with ONE consistent idea across all 4 states:
   a reaction someone ELSE made recedes (quiet neutral tint); a reaction I made
   stands out via the background's natural accent direction. Never a glaring white
   block, and the count is legible in every state + theme. */
.msgr-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(0,0,0,0.07);   /* not-mine on a light surface: quiet, recedes */
    border: none;
    font-size: var(--font-size-small);
    cursor: pointer;
    line-height: 1.4;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 100ms var(--ease-out);
}
.msgr-reaction-pill:hover { transform: scale(1.05); }
.msgr-reaction-pill.is-mine {
    background: var(--color-primary-soft);   /* mine on a light surface: teal accent */
}
.msgr-reaction-pill .msgr-reaction-pill-emoji { font-size: 14px; }
.msgr-reaction-pill .msgr-reaction-pill-count { color: var(--color-text-light); font-weight: 500; }
.msgr-reaction-pill.is-mine .msgr-reaction-pill-count { color: var(--color-primary); }
/* On the dark-teal outgoing fill a white pill glares, so others' reactions recede
   into a soft DARK tint while MY reaction reads as a light frost - distinct, calm. */
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-reaction-pill {
    background: rgba(0,0,0,0.18);
}
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-reaction-pill .msgr-reaction-pill-count {
    color: rgba(255,255,255,0.72);
}
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-reaction-pill.is-mine {
    background: rgba(255,255,255,0.26);
}
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-reaction-pill.is-mine .msgr-reaction-pill-count {
    color: #fff;
}

/* Flying emoji clone (reaction-commit choreography). Outer holds the fixed
   destination + centring; the inner glyph carries the fly-to primitive so its
   animated transform never fights the centring transform. */
.msgr-reaction-fly {
    position: fixed;
    z-index: 9999;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.msgr-reaction-fly-glyph {
    font-size: 22px;
    line-height: 1;
    will-change: transform, opacity;
}

/* Who-reacted popover */
.msgr-who-reacted {
    position: fixed;
    z-index: 1200;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    max-height: 50vh;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    padding: 6px;
    animation: msgrCtxIn 120ms var(--ease-out);
    user-select: none;
    -webkit-user-select: none;
}
.msgr-who-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
}
.msgr-who-row:hover { background: var(--color-bg); }
.msgr-who-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 28px;
    background: var(--color-bg);
}
.msgr-who-name {
    flex: 1;
    font-size: var(--font-size-body);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msgr-who-time {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}
.msgr-who-emoji { font-size: 16px; }

/* Full emoji picker */
.msgr-emoji-picker {
    position: fixed;
    z-index: 1150;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    padding: 8px;
    animation: msgrCtxIn 120ms var(--ease-out);
}

/* Item 3 (orion_motion, ported from canopy commit 24000252): CSS anchor
   positioning for the reaction picker, with today's JS coordinate math
   (_msgrOpenFullEmojiPicker) kept as the else-branch fallback for engines
   without it. The "+" button that opens the picker is a stable DOM anchor
   (unlike the context menu, which is positioned from a raw pointer x/y
   with no persistent element - mirroring canopy's decision to leave that
   one on JS positioning). Only one context menu / picker instance exists
   at a time, so a single anchor-name on the reused .msgr-ctx-emoji-more
   class is safe. */
@supports (anchor-name: --a) {
    .msgr-ctx-emoji-more { anchor-name: --msgr-emoji-anchor; }
    .msgr-emoji-picker--anchored {
        position-anchor: --msgr-emoji-anchor;
        position-area: bottom;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        margin-block-start: 4px;
        inset: auto;
        left: auto;
        top: auto;
    }
}
.msgr-emoji-cell {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    transition: background 100ms var(--ease-out);
}
.msgr-emoji-cell:hover { background: var(--color-bg); }

[data-theme="dark"] .msgr-ctx-menu,
[data-theme="dark"] .msgr-emoji-picker,
[data-theme="dark"] .msgr-who-reacted,
[data-theme="dark"] #msgrSeenBy {
    background: #1a1e1e;
    border-color: #4a5555;
}
[data-theme="dark"] .msgr-ctx-item:hover,
[data-theme="dark"] .msgr-ctx-emoji-btn:hover,
[data-theme="dark"] .msgr-emoji-cell:hover,
[data-theme="dark"] .msgr-who-row:hover {
    background: #2a3232;
}
[data-theme="dark"] .msgr-reaction-pill {
    background: rgba(255,255,255,0.10);
}
[data-theme="dark"] .msgr-reaction-pill.is-mine {
    background: var(--color-primary-soft);
}
/* In dark mode --color-primary is pinned to the (dark) brand teal by org branding,
   which would be illegible on the dark teal-tint is-mine pill. Use the light text
   token for the count instead; the teal-tint fill still carries the "mine" signal. */
[data-theme="dark"] .msgr-reaction-pill.is-mine .msgr-reaction-pill-count {
    color: var(--color-text);
}

/* ============================================================ */
/* STAFF SCHEDULE                                               */
/* ============================================================ */

.ss-section-title {
    font-size: var(--font-size-body);
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--color-text);
}
.ss-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shift-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
}
.shift-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.shift-card-title {
    font-weight: 600;
    font-size: var(--font-size-body);
}
.shift-card-meta {
    color: var(--color-text-light);
    font-size: var(--font-size-small);
    margin-top: 2px;
}
.shift-card-body {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.shift-card-foot {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
.shift-time-pill {
    display: inline-block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .shift-time-pill {
    background: #2a3232;
}
.shift-capacity-bar {
    height: 4px;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}
.shift-capacity-bar > span {
    display: block;
    height: 100%;
    background: var(--color-primary);
}

/* Apply modal radio rows + date chips */
.ss-radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ss-radio-row:hover { border-color: var(--color-primary); }
.ss-radio-row.ss-disabled { opacity: 0.5; cursor: not-allowed; }
.ss-radio-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.ss-shift-radio-list { display: flex; flex-direction: column; gap: 0; }
.ss-date-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.ss-date-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}
.ss-date-chip:hover { border-color: var(--color-primary); }
.ss-date-chip input[type="checkbox"] { margin: 0; }
.ss-date-chip.ss-disabled { opacity: 0.45; cursor: not-allowed; }
.ss-date-cap { margin-left: auto; }

/* Manager - filter row + groups */
.ss-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.ss-chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-chip {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ss-chip:hover { border-color: var(--color-primary); }
.ss-chip--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
[data-theme="dark"] .ss-chip--active { color: #1a2222; }
.ss-filter-select {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card);
    color: var(--color-text);
    font-size: 13px;
}

.ss-group { margin-bottom: 18px; }
.ss-group-head {
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--color-text);
}
.ss-group-body { display: flex; flex-direction: column; gap: 8px; }

.shift-application-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-card);
}
.ss-row-main { flex: 1; min-width: 0; }
.ss-row-name { font-weight: 600; font-size: var(--font-size-body); }
.ss-row-meta { color: var(--color-text-light); font-size: var(--font-size-small); margin-top: 2px; }
.ss-row-actions { display: flex; gap: 6px; }
.ss-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ss-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border);
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--font-size-body);
}

/* Manager - schedules pane */
.ss-sched-head { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.ss-sched-list { display: flex; flex-direction: column; gap: 8px; }
.ss-sched-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-card);
}
.ss-sched-main { flex: 1; min-width: 0; }
.ss-sched-title { font-weight: 600; font-size: var(--font-size-body); }
.ss-sched-meta { color: var(--color-text-light); font-size: var(--font-size-small); margin-top: 2px; }

/* Schedule modal - shift row builder */
.ss-shifts-builder { display: flex; flex-direction: column; gap: 8px; }
.ss-shift-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 12px 1fr 80px 36px;
    align-items: center;
    gap: 8px;
}
.ss-shift-dash { text-align: center; color: var(--color-text-light); }
.ss-shift-row input { padding: 8px 10px; }

/* ============================================================
   Shift model v2 - cards, calendar, drawer, swap chips
   ============================================================ */

/* Shift card */
.ss-shift-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), transform 0.05s cubic-bezier(0.22, 1, 0.36, 1);
}
.ss-shift-card[onclick] { cursor: pointer; }
.ss-shift-card[onclick]:hover { border-color: var(--color-primary); }
.ss-shift-card[onclick]:active { transform: scale(0.997); }
.ss-shift-card-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.ss-shift-title { font-weight: 600; font-size: var(--font-size-body); color: var(--color-text); }
.ss-shift-card-past { opacity: 0.7; }

.ss-meta { font-size: var(--font-size-small); color: var(--color-text-light); margin-top: 2px; }
.ss-meta-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ss-meta-mode {
    font-size: var(--font-size-small); text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-light);
}

.ss-badge {
    display: inline-block;
    background: var(--color-surface-alt);
    color: var(--color-text-light);
    font-size: var(--font-size-small); font-weight: 500;
    padding: 3px 8px 2px; border-radius: 10px;
    margin-left: 6px;
}
.ss-badge-muted { background: var(--color-surface-alt); color: var(--color-text-light); }

/* Calendar grid */
.ss-cal-nav {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0; margin-bottom: 8px;
}
.ss-cal-nav-title { font-weight: 600; font-size: var(--font-size-body); flex: 1; text-align: center; }
.ss-cal-add-btn { margin-left: auto; }

.ss-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.ss-cal-head {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    font-size: var(--font-size-small); text-transform: uppercase;
    color: var(--color-text-light); text-align: center;
    padding: 6px 0; letter-spacing: 0.04em;
}
.ss-cal-cell {
    min-height: 64px;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px;
    background: var(--color-surface);
    font-size: var(--font-size-small);
    display: flex; flex-direction: column;
    cursor: default;
}
.ss-cal-cell-empty { border: none; background: transparent; }
.ss-cal-cell-date { font-weight: 600; font-size: var(--font-size-small); color: var(--color-text-light); margin-bottom: 4px; }
.ss-cal-chip {
    display: block;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--color-primary-soft);
    color: var(--color-text);
    font-size: var(--font-size-small);
    margin-top: 2px;
    cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-cal-chip:hover { filter: brightness(0.95); }
.ss-cal-chip-vacant { background: var(--color-surface-alt); color: var(--color-text-light); }
.ss-cal-chip-swapped { outline: 1px dashed var(--color-warning, #d69e2e); }

/* Pool chips (manager modal) */
.ss-pool-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    font-size: var(--font-size-small);
    margin: 0 6px 6px 0;
}
.ss-pool-num {
    background: var(--color-primary); color: var(--color-bg);
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600;
}
.ss-pool-remove {
    background: transparent; border: none; cursor: pointer;
    color: var(--color-text-light); font-size: var(--font-size-body); padding: 0;
    line-height: 1;
}
.ss-pool-remove:hover { color: var(--color-error); }

/* Day-of-week picker */
.ss-dow-btn {
    min-width: 44px; height: 40px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 8px;
    font-size: var(--font-size-small); font-weight: 500;
    cursor: pointer;
    color: var(--color-text);
}
.ss-dow-btn.ss-dow-btn-active {
    background: var(--color-primary); color: var(--color-bg);
    border-color: var(--color-primary);
}

/* Swap chip (staff shift card) */
.ss-swap-chip {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: var(--font-size-small);
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
}
.ss-swap-chip-incoming {
    background: var(--color-error-bg, #fdecea);
    color: var(--color-error, #c53030);
}
[data-theme="dark"] .ss-swap-chip-incoming { background: #3a1a1a; color: #ff8a8a; }
.ss-swap-chip-outgoing {
    background: var(--color-surface-alt);
    color: var(--color-text-light);
}
.ss-swap-chip-response {
    background: var(--color-warning-bg, #fff7e6);
    color: var(--color-warning, #b8860b);
}
[data-theme="dark"] .ss-swap-chip-response { background: #3a2d0f; color: #ffd27a; }

/* Occurrence drawer actions */
.ss-drawer-actions { display: flex; flex-direction: column; gap: 8px; }
.ss-drawer-actions .btn { min-height: 44px; justify-content: center; }

/* Picker rows (assignee / pool / swap target) */
.ss-picker-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    margin-bottom: 6px;
    background: var(--color-surface);
}
.ss-picker-row .btn { width: auto; flex-shrink: 0; }
.ss-picker-row:hover { border-color: var(--color-primary); }
.ss-picker-row-selected { border-color: var(--color-primary); background: var(--color-primary-light, #e6f0ff); }

/* Bids section */
.ss-bids-section { margin-top: 20px; }
.ss-bid-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--color-surface);
}
.ss-bid-row-main { flex: 1; min-width: 0; }
.ss-bid-row-actions { display: flex; gap: 6px; }

.ss-detail-row { padding: 6px 0; font-size: var(--font-size-body); color: var(--color-text); display: flex; gap: 8px; }
.ss-detail-row .text-label { flex-shrink: 0; color: var(--color-text-light); }

/* Saturday shift cards (v3) */
.ss-card {
    position: relative;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), transform 0.05s cubic-bezier(0.22, 1, 0.36, 1);
}
.ss-card-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ss-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ss-card-date {
    font-weight: 700;
    font-size: var(--font-size-body);
    color: var(--color-text);
}
.ss-card-time,
.ss-card-name {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}
.ss-card-action { position: relative; }
.ss-card-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-danger, #e53935);
    margin-left: 6px;
    vertical-align: middle;
}
.ss-card-past { opacity: 0.7; }
/* Wrapper around the Review button (the in-card pulse dots it used to sit beside
   were removed with the red-dot system). */
.ss-review-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ss-swap-note {
    margin: 0;
    font-size: var(--font-size-body);
    color: var(--color-text);
    white-space: pre-wrap;
}
.ss-outcome-header {
    text-align: center;
    padding: 8px 0 20px;
}
.ss-outcome-actions {
    margin-top: 20px;
    text-align: center;
}
.ss-swap-response-status {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1.1rem;
}
.ss-status-accepted {
    background: rgba(30, 107, 61, 0.12);
    color: var(--color-success);
}
.ss-status-rejected {
    background: rgba(192, 57, 43, 0.1);
    color: var(--color-error);
}
[data-theme="dark"] .ss-status-accepted {
    background: rgba(46, 158, 94, 0.2);
    color: var(--color-success);
}
[data-theme="dark"] .ss-status-rejected {
    background: rgba(192, 57, 43, 0.2);
    color: var(--color-error);
}
.ss-pending-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.ss-card-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    flex-shrink: 0;
}
.ss-input-locked,
.flatpickr-input.ss-input-locked {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.ss-past-toggle-btn {
    background: transparent;
    border: none;
    color: var(--color-text-light);
    font-size: var(--font-size-small);
    cursor: pointer;
    padding: 6px 0;
}
.ss-past-toggle-btn:hover { color: var(--color-text); }
.ss-you { color: var(--color-primary); font-weight: 500; }
.ss-empty { text-align: center; padding: 24px 0; }

.ss-rotation-list {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 32px; margin-bottom: 8px;
}
.ss-rotation-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 999px; padding: 4px 8px 4px 6px; font-size: var(--font-size-small);
}
.ss-rotation-idx {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-primary); color: var(--color-bg); font-size: 11px; font-weight: 600;
}
.ss-rotation-remove {
    background: none; border: none; cursor: pointer; color: var(--color-text-light);
    font-size: var(--font-size-body); line-height: 1; padding: 0 0 0 2px;
}
.ss-rotation-remove:hover { color: var(--color-danger, #c00); }

.ss-swap-preview {
    background: var(--color-surface);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: var(--font-size-small);
    color: var(--color-text);
}
.ss-offer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ss-offer-item { transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.ss-offer-item:hover { border-color: var(--color-primary); }
.ss-offer-item-disabled { opacity: 0.5; cursor: not-allowed; }
.ss-offer-item-body { flex: 1; }

/* ── Batch Family Chats modal ── */
#msgrBatchSelectedStaffSection { margin-bottom: 12px; }
.msgr-batch-dup-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: var(--font-size-small);
    font-weight: 500;
    margin-bottom: 8px;
}
.msgr-batch-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.msgr-batch-select-all-label {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
}
.msgr-batch-preview {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 6px;
    background: var(--color-surface);
}
.msgr-batch-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}
.msgr-batch-row:hover { background: var(--color-surface-alt); }
.msgr-batch-row.duplicate { background: var(--color-warning-bg); }
.msgr-batch-row.duplicate .msgr-batch-name-input { color: var(--color-text-muted, #777); }
.msgr-batch-row.error { background: rgba(192, 57, 43, 0.08); }
.msgr-batch-row.created { opacity: 0.7; }
.msgr-batch-name-input {
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    font-size: var(--font-size-body);
    border-radius: 6px;
    min-width: 0;
}
.msgr-batch-name-input:focus {
    outline: none;
    border-color: var(--color-border);
    background: var(--color-surface);
}
.msgr-batch-summary {
    font-size: var(--font-size-label);
    color: var(--color-text-muted, #777);
    white-space: nowrap;
}
.msgr-batch-row .badge { white-space: nowrap; }
.msgr-batch-choice-btn .fi { color: var(--color-primary); }
[data-theme="dark"] .msgr-batch-row.duplicate .msgr-batch-name-input:focus { background: transparent; }
#messengerBatchModal .modal { max-height: 85vh; overflow-y: auto; }
#messengerBatchModal .msgr-member-picker { max-height: none; overflow-y: unset; }
.msgr-batch-staff-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--color-text-light);
    font-size: var(--font-size-body);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    text-align: left;
}
.msgr-batch-staff-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.msgr-batch-staff-toggle.has-staff {
    border-style: solid;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.msgr-batch-staff-picker-body { margin-top: 8px; }

/* ── Messenger Broadcast ───────────────────────────────────── */
.msgr-broadcast-choice-btn .fi { color: var(--color-primary); }

/* ── Messenger New WhatsApp ────────────────────────────────── */
.msgr-whatsapp-choice-btn .fi { color: var(--color-primary); }
.msgr-new-wa-fail-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, #DC2626 12%, var(--color-bg));
    color: var(--color-text);
    font-size: var(--font-size-small);
    border: 1px solid color-mix(in srgb, #DC2626 40%, transparent);
}
.msgr-new-wa-fail-banner .fi { color: #DC2626; flex-shrink: 0; }


.msgr-bc-recipient-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--color-surface-alt);
    border-radius: 8px;
    margin-top: 4px;
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-text);
}
.msgr-bc-exclude-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-label);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.msgr-bc-exclude-toggle:hover { background: var(--color-hover); }
.msgr-bc-exclude-toggle .fi { transition: transform 0.2s; font-size: 0.75rem; }

.msgr-bc-exclude-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-top: 4px;
}
.msgr-bc-exclude-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-body);
}
.msgr-bc-exclude-row:last-child { border-bottom: none; }
.msgr-bc-exclude-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}

/* Custom recipient picker rows (flat searchable list, tap whole row to add) */
.msgr-bc-custom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    min-height: 44px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-body);
    cursor: pointer;
    transition: background-color var(--dur-micro) var(--ease-out);
}
.msgr-bc-custom-row:last-child { border-bottom: none; }
.msgr-bc-custom-row.is-selected { background: var(--color-primary-soft); }
@media (hover: hover) {
    .msgr-bc-custom-row:hover { background: var(--color-hover); }
    .msgr-bc-custom-row.is-selected:hover { background: var(--color-primary-soft); }
}
.msgr-bc-custom-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}
.msgr-bc-custom-row.is-selected .msgr-bc-custom-name {
    color: var(--color-primary);
    font-weight: 600;
}
.msgr-bc-custom-remove {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* 44px tap target without inflating the 44px row: negative margins absorb
       the row's padding so the visual layout is unchanged. */
    min-width: 44px;
    min-height: 44px;
    margin: -10px -12px -10px 0;
    border-radius: 4px;
    color: var(--color-primary);
    font-size: var(--font-size-body);
    transition: background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
    .msgr-bc-custom-remove:hover { background: var(--color-hover); }
}
/* Selected-recipients list: cap at 3 visible rows (44px row + 1px separator),
   scroll for the rest so a large selection never pushes the compose area down.
   The count bar above always shows the true total. */
.msgr-bc-selected-list {
    max-height: 134px;
}

.msgr-bc-progress {
    position: absolute;
    inset: 0;
    background: rgba(var(--color-surface-rgb, 255,255,255), 0.85);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.msgr-bc-progress-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-body);
    color: var(--color-text-light);
    font-weight: 500;
}
.msgr-bc-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Messenger Broadcast - full-screen sending overlay (mirrors #msgSendingOverlay) */
#msgrBcSendingOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 19999;
    background: rgba(15, 10, 25, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
}
#msgrBcSendingOverlay.active {
    display: flex;
    animation: sendingOverlayIn 0.25s ease;
}
#msgrBcSendingCard {
    background: var(--color-card);
    border-radius: 28px;
    padding: 44px 52px 40px;
    width: 320px;
    text-align: center;
    box-shadow: 0 32px 80px rgba(74, 51, 96, 0.22), 0 4px 16px rgba(0,0,0,0.12);
    animation: sendingCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Plane → checkmark crossfade swap (Tier B4) */
#msgrBcSendingCard .sending-plane {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
#msgrBcSendingCard .sending-plane-icon,
#msgrBcSendingCard .sending-check-icon {
    position: absolute;
    inset: 0;
    transition: opacity 220ms ease;
}
#msgrBcSendingCard .sending-check-icon {
    color: var(--color-success);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 220ms ease, transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#msgrBcSendingOverlay.done .sending-plane-icon { opacity: 0; }
#msgrBcSendingOverlay.done .sending-check-icon { opacity: 1; transform: scale(1); }
#msgrBcSendingOverlay.done .sending-plane { animation: none; }

/* Plane "throw" cue when an RPC fires (Tier B2) */
#msgrBcSendingCard .sending-plane.throwing {
    transform: translateX(4px) rotate(6deg);
}

/* Predictive bar fill - 1s linear matches the inter-tick cadence so the
   bar appears to flow continuously rather than snapping in 1s steps (Tier A1) */
#msgrBcSendingCard .sending-bar-fill {
    transition: width 1000ms linear, background 240ms ease;
}
#msgrBcSendingOverlay.done .sending-bar-fill {
    background: linear-gradient(90deg, var(--color-success), #2ecc71);
    transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1), background 240ms ease;
}
/* Mirror the bar's done-state colour swap on the ring (item 7). */
#msgrBcSendingOverlay.done .sending-ring-wrap {
    --ring-color: var(--color-success);
}

/* Bar leading-edge spark (Tier B3) */
.sending-bar-spark {
    position: absolute;
    right: -2px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 8px 2px rgba(255,255,255,0.55);
    transform: translateY(-50%);
    animation: sendingSparkPulse 1.1s ease-in-out infinite;
    pointer-events: none;
}
@keyframes sendingSparkPulse {
    0%, 100% { transform: translateY(-50%) scale(0.7); opacity: 0.55; }
    50%      { transform: translateY(-50%) scale(1.1); opacity: 1; }
}
#msgrBcSendingOverlay.done .sending-bar-spark { opacity: 0; animation: none; }

/* Persistent crossfade name ticker (Tier A2) */
#msgrBcSendingCard .sending-name-ticker {
    position: relative;
    overflow: hidden;
    height: 1.3em;
    margin-bottom: 20px;
    animation: none;            /* override the legacy .flash keyframe */
    opacity: 1;
}
#msgrBcSendingCard .sending-name-slot {
    position: absolute;
    inset: 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}
#msgrBcSendingCard .sending-name-current {
    opacity: 1;
    transform: translateY(0);
}
#msgrBcSendingCard .sending-name-incoming {
    opacity: 0;
    transform: translateY(8px);
}
#msgrBcSendingCard .sending-name-ticker.swapping .sending-name-current {
    opacity: 0;
    transform: translateY(-8px);
}
#msgrBcSendingCard .sending-name-ticker.swapping .sending-name-incoming {
    opacity: 1;
    transform: translateY(0);
}

/* Counter roll-up (Tier B1) */
#msgrBcSendingCard .sending-count-done-wrap {
    position: relative;
    display: inline-block;
    height: 52px;
    line-height: 1;
    overflow: hidden;
    vertical-align: bottom;
    min-width: 1ch;
}
#msgrBcSendingCard .sending-count-done {
    display: inline-block;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
    will-change: transform, opacity;
}
#msgrBcSendingCard .sending-count-current {
    position: relative;
    transform: translateY(0);
    opacity: 1;
}
#msgrBcSendingCard .sending-count-incoming {
    position: absolute;
    inset: 0;
    transform: translateY(100%);
    opacity: 0;
}
#msgrBcSendingCard .sending-count-done-wrap.rolling .sending-count-current {
    transform: translateY(-100%);
    opacity: 0;
}
#msgrBcSendingCard .sending-count-done-wrap.rolling .sending-count-incoming {
    transform: translateY(0);
    opacity: 1;
}

/* Done celebration on count (Tier B4) */
#msgrBcSendingOverlay.done .sending-count-done {
    color: var(--color-success);
    animation: sendingCountCelebrate 460ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes sendingCountCelebrate {
    0%   { transform: scale(1); }
    55%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Live sublabel - "Delivering…" with animated dots (Tier A3) */
#msgrBcSendingCard .sending-sublabel {
    transition: color 240ms ease;
}
#msgrBcSendingCard .sending-dots span {
    opacity: 0.2;
    animation: sendingDot 1.2s ease-in-out infinite;
}
#msgrBcSendingCard .sending-dots span:nth-child(2) { animation-delay: 0.2s; }
#msgrBcSendingCard .sending-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sendingDot {
    0%, 80%, 100% { opacity: 0.2; }
    40%           { opacity: 1; }
}
#msgrBcSendingOverlay.done .sending-dots { display: none; }
#msgrBcSendingOverlay.done .sending-sublabel { color: var(--color-success); }

/* Transient per-recipient failure notice in the sublabel */
#msgrBcSendingCard .sending-sublabel-fail {
    color: #f59e0b;
}

@media (prefers-reduced-motion: reduce) {
    #msgrBcSendingCard *,
    #msgrBcSendingCard *::before,
    #msgrBcSendingCard *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Section heading inside messenger modals */
.msgr-section-heading { font-size: var(--font-size-heading); font-weight: 600; margin: 0 0 6px 0; }

/* Conversation notes */
.msgr-note-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
}
.msgr-note-item:last-child { border-bottom: none; }
.msgr-note-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    gap: 8px;
}
.msgr-note-body {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-text);
    font-size: 0.92em;
    line-height: 1.5;
}

/* POC view state */
.msgr-poc-view {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Name edit row (below modal h2, above details) */
.msgr-name-edit-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

/* Lightweight section label replacing h3+p in modals */
.msgr-modal-section-label {
    font-size: var(--font-size-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #888);
    margin: 0 0 10px 0;
}

/* ── Media subtab (Telegram-style "all media in this conversation" grid) ──
   Members/Media tab strip inside the WhatsApp conv-info modal and the internal-group
   member modal (Media subtab, 2026-07-26, port of chatbox 775c353). See
   js/admin-messenger-media.js for the fetch/render/pagination logic. */
.msgr-info-tabs {
    display: flex;
    gap: 4px;
    margin: 16px 0 14px;
    border-bottom: 1px solid var(--color-border);
}
.msgr-info-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 4px;
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-text-light);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s var(--ease-out, ease), border-color 0.15s var(--ease-out, ease);
}
.msgr-info-tab:hover { color: var(--color-text); }
.msgr-info-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* The Media panel owns its own scroll region (bounded height + overflow-y), so an
   infinite-scroll grid scrolls WITHIN the modal without the page body scrolling, same
   containment the modal itself already gives the Members panel, just scoped tighter
   so the tab strip stays put while the grid pages. */
.msgr-media-panel {
    max-height: 56vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.msgr-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.msgr-media-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface-alt);
    cursor: pointer;
}
.msgr-media-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msgr-media-tile-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-text-light);
    font-size: 22px;
}
.msgr-media-tile-placeholder span {
    font-size: var(--font-size-label);
    text-align: center;
    padding: 0 4px;
}
.msgr-media-tile-archived { color: var(--color-text-muted, #888); cursor: default; }
.msgr-media-tile:has(.msgr-media-tile-archived) { cursor: default; }

.msgr-media-tile-video-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
}
.msgr-media-tile-video-badge i { font-size: 10px; }

.msgr-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--color-text-light);
    grid-column: 1 / -1;
}
.msgr-media-empty i { font-size: 30px; opacity: 0.6; }

.msgr-media-loading-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
}
.msgr-media-loading-row .spinner { width: 18px; height: 18px; }
.msgr-media-retry-link { color: var(--color-primary); text-decoration: underline; font-size: var(--font-size-label); }

/* Compact list rows for non-visual media (documents, voice notes, audio) below the
   grid: reachable, never dropped, but not forced into a 3-col photo/video grid. */
.msgr-media-file-list { margin-top: 10px; }
.msgr-media-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    cursor: pointer;
    border-radius: 8px;
}
.msgr-media-file-row:hover { background: var(--color-hover); }
.msgr-media-file-row-archived { cursor: default; opacity: 0.6; }
.msgr-media-file-row-archived:hover { background: none; }
.msgr-media-file-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    color: var(--color-text-light);
    font-size: 16px;
}
.msgr-media-file-info { flex: 1; min-width: 0; }
.msgr-media-file-name {
    font-size: var(--font-size-body);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msgr-media-file-meta { font-size: var(--font-size-label); color: var(--color-text-light); }
.msgr-media-file-download { color: var(--color-text-light); font-size: 15px; flex-shrink: 0; }
/* A voice/audio row's player fills the row (same look as a thread bubble's player,
   just without the bubble background/max-width). */
.msgr-media-file-voice {
    flex: 1;
    background: none !important;
    padding: 0 !important;
}

[data-theme="dark"] .msgr-media-tile { background: var(--color-surface-alt); }
[data-theme="dark"] .msgr-media-file-row:hover { background: var(--color-hover); }

/* ============================================================
   Messenger Schedule Send (long-press send -> "Schedule message")
   ============================================================ */

/* The little one-item menu floated above the send button */
.msgr-send-menu {
    min-width: 0;
    width: max-content;
}

/* The send button is now long-pressable: suppress the iOS callout / text
   selection so a held press opens our menu cleanly instead of the OS magnifier. */
.msgr-send-btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* "N scheduled" chip above the composer */
.msgr-scheduled-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-bottom: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-muted, #888);
    font-size: var(--font-size-label);
    cursor: pointer;
    user-select: none;
}
.msgr-scheduled-chip:hover { background: rgba(0, 0, 0, 0.08); }
.msgr-scheduled-chip i { font-size: 12px; }

/* Quick presets in the schedule modal */
.msgr-sched-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.msgr-sched-preset {
    flex: 1 1 auto;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-label);
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.msgr-sched-preset:hover {
    background: var(--color-primary-soft, rgba(0, 0, 0, 0.04));
    border-color: var(--color-primary);
}

/* Scheduled-messages review list */
.msgr-scheduled-list { display: flex; flex-direction: column; gap: 8px; }
.msgr-sched-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.msgr-sched-item-main { flex: 1 1 auto; min-width: 0; }
.msgr-sched-item-text {
    font-size: var(--font-size-body);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.msgr-sched-item-time {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: var(--font-size-label);
    color: var(--color-text-muted, #888);
}
.msgr-sched-item-time i { font-size: 11px; }
.msgr-sched-cancel {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-danger, #d23);
    cursor: pointer;
}
.msgr-sched-cancel:hover { background: rgba(210, 40, 40, 0.10); }
.msgr-sched-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; vertical-align: middle; margin-right: 6px; }
.msgr-sched-media-label { opacity: .85; }
.msgr-sched-media-label i { margin-right: 4px; }

/* Confirmation toast */
.msgr-toast {
    position: fixed;
    left: 50%;
    bottom: calc(90px + max(env(safe-area-inset-bottom, 0px), var(--sab-floor, 0px)));
    transform: translateX(-50%) translateY(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--color-text, #222);
    color: var(--color-surface, #fff);
    font-size: var(--font-size-body);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.msgr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.msgr-toast i { font-size: 13px; }