/* ============================================================================
 * activity-dock.css — the FFV Activity Dock (Modal Renaissance S6, Track B4).
 *
 * A shelf of minimized-activity chips at the bottom-right of the App Panel.
 * Desktop-only chrome: hidden on mobile and under pane-maximized (story
 * playback owns the whole frame). Themed on the vessel-satellite tokens —
 * the dock is family too: same glass, same rim energy, corners slightly
 * irregular like every renaissance container.
 *
 * z 12000 — the DESKTOP Activity Dock band (Z_INDEX_HIERARCHY.md). The mobile
 * hamburger drawer shares the number but the two never co-exist: the drawer
 * is mobile-only, the dock desktop-only.
 * ========================================================================== */

.ffa-activity-dock {
    position: fixed;
    right: 18px;
    /* + the home-indicator strip (Greg M-4, 2026-10-01): on the iPad Home Screen
       app the minimized-window chips (Restore / Close) sat in the 25px swipe-up
       zone, where a finger reaching for Restore drags iOS's home gesture instead.
       0 on every desktop. */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-activity-dock, 12000);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    max-width: min(72vw, 980px);
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    pointer-events: none;   /* chips re-enable — empty dock never eats clicks */
}

.ffa-dock-chip {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    background: var(--ffv-glass-bg, linear-gradient(160deg,
        rgba(34, 22, 44, 0.97), rgba(16, 14, 34, 0.985)));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(239, 63, 165, 0.34);
    /* the family corner-irregularity, dock-sized */
    border-radius: 13px 10px 14px 11px;
    box-shadow:
        0 0 0 1px rgba(157, 95, 224, 0.12),
        0 10px 30px rgba(6, 4, 16, 0.55),
        0 0 22px rgba(239, 63, 165, 0.10);
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15),
        box-shadow 0.2s ease, border-color 0.2s ease;
}
.ffa-dock-chip.is-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.ffa-dock-chip.is-leaving {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
}
.ffa-dock-chip:hover {
    border-color: rgba(239, 63, 165, 0.55);
    box-shadow:
        0 0 0 1px rgba(157, 95, 224, 0.2),
        0 12px 34px rgba(6, 4, 16, 0.6),
        0 0 30px rgba(239, 63, 165, 0.18);
}

.ffa-dock-restore {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px 9px 13px;
    background: none;
    border: none;
    cursor: pointer;
    color: #efe6f5;
    font-family: var(--ffv-body-font, 'Source Sans 3', 'Inter', sans-serif);
    font-size: calc(0.86rem * var(--type-scale, 1));
    font-weight: 600;
    letter-spacing: 0.01em;
    max-width: 260px;
}
.ffa-dock-restore:hover .ffa-dock-title { color: #ffffff; }

.ffa-dock-glyph {
    font-size: calc(1.02rem * var(--type-scale, 1));
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(157, 95, 224, 0.45));
}

.ffa-dock-title {
    color: #d9cfe6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.ffa-dock-badge {
    background: linear-gradient(135deg, #ef3fa5, #9d5fe0);
    color: #ffffff;
    font-size: calc(0.68rem * var(--type-scale, 1));
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

.ffa-dock-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-left: 1px solid rgba(239, 63, 165, 0.18);
    cursor: pointer;
    color: rgba(217, 207, 230, 0.6);
    transition: color 0.15s ease, background 0.15s ease;
}
.ffa-dock-x:hover {
    color: #ffffff;
    background: rgba(239, 63, 165, 0.28);
}

/* ── THE GRIP (LS-5, Joe /listen 2026-08-17: "the minimize dock needs to be
   movable/draggable") ──────────────────────────────────────────────────────
   The dock's own furniture, sitting to the LEFT of the chips: a chip is a
   button whose whole body restores a surface, so the shelf cannot be dragged
   by its content without fighting that click. Quiet at rest — it is chrome for
   a chrome shelf — and it earns its contrast on hover, focus and drag.

   `flex-wrap: wrap-reverse` on the shelf puts the FIRST child at the bottom
   -right of the wrapped rows, which is where a hand reaches for it. */
.ffa-dock-grip {
    pointer-events: auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    min-height: 34px;
    background: linear-gradient(160deg, rgba(34, 22, 44, 0.9), rgba(16, 14, 34, 0.94));
    border: 1px solid rgba(239, 63, 165, 0.22);
    border-radius: 11px 8px 12px 9px;
    color: rgba(239, 230, 245, 0.42);
    cursor: grab;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.ffa-dock-grip svg { fill: currentColor; }
.ffa-dock-grip:hover,
.ffa-dock-grip:focus-visible {
    color: rgba(239, 230, 245, 0.92);
    border-color: rgba(239, 63, 165, 0.55);
    background: linear-gradient(160deg, rgba(46, 28, 58, 0.95), rgba(22, 18, 42, 0.98));
}
.ffa-dock-grip:focus-visible { outline: 2px solid rgba(239, 63, 165, 0.7); outline-offset: 2px; }
.ffa-activity-dock.is-dragging .ffa-dock-grip { cursor: grabbing; color: #ffffff; }

/* While the shelf is being dragged, its chips must not animate under the
   pointer or swallow the gesture — the same discipline the window layer uses
   (pause ambient work under the drag class the engine already sets). */
.ffa-activity-dock.is-dragging .ffa-dock-chip {
    transition: none;
    pointer-events: none;
}
/* A moved dock is translated off its CSS corner; the corner itself is never
   rewritten, so a reset is simply the removal of the inline transform. */
.ffa-activity-dock.is-moved { will-change: transform; }

/* Story playback owns the frame; the shelf yields. Mobile is inert. */
body.pane-maximized .ffa-activity-dock { display: none; }
@media (max-width: 768px) {
    .ffa-activity-dock { display: none; }
    /* No dock on a phone, so no "Step window smaller" either (Greg G-149, FergiPhone 2026-10-24). The biography
       folio was the one phone surface still drawing the step pair: ⊟ parked it in this hidden dock — the folio
       vanished, unreachable, while its Discard · Commit · More bar stayed over Portraits acting on a biography the
       member could no longer see. Every other phone surface already omits the pair; this makes it the rule. */
    .ffw-step[data-ffw-step] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ffa-dock-chip,
    .ffa-dock-chip.is-in,
    .ffa-dock-chip.is-leaving {
        transition-duration: 0.01ms;
    }
}