/* frontend/minimizable_panel_v4.css
 *
 * Shared styles for the MinimizablePanel manager.
 *   .jt-mp-minimize-btn  — ▼ button injected into report headers
 *   .jt-mp-stack         — fixed bottom-right pill container
 *   .jt-mp-pill          — individual minimized-report pill (draggable)
 *
 * Uses --jt-* tokens so light/dark themes work without overrides.
 * Token fallbacks are conservative — defaults look fine on dark surfaces.
 */

/* ── Minimize button injected into panel headers ───────────────────────── */
.jt-mp-minimize-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--jt-text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.35rem 0.55rem;
    margin-right: 0.25rem;
    transition: background 0.15s, color 0.15s;
}
.jt-mp-minimize-btn:hover {
    background: var(--jt-bg-secondary, #1e293b);
    color: var(--jt-text-primary, #f1f5f9);
}
.jt-mp-minimize-btn:focus-visible {
    outline: 2px solid var(--jt-accent-purple, #7c3aed);
    outline-offset: 1px;
}

/* ── Pill stack — anchored bottom-right, stacks upward ─────────────────── */
.jt-mp-stack {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 99999;                 /* above modals — pills must stay reachable */
    display: flex;
    flex-direction: column-reverse;  /* newest pill closest to the corner */
    gap: 0.5rem;
    align-items: flex-end;
    pointer-events: none;            /* container doesn't block clicks behind it */
    max-height: 80vh;
    overflow: visible;
}

/* ── Pill ──────────────────────────────────────────────────────────────── */
.jt-mp-pill {
    pointer-events: auto;            /* re-enable on the pill itself */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem 0.4rem 0.65rem;
    background: var(--jt-bg-deep, #0b1220);
    border: 1px solid var(--jt-border-primary, #1e293b);
    border-radius: 999px;
    color: var(--jt-text-primary, #e2e8f0);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    font-size: 0.85rem;
    user-select: none;
    cursor: grab;
    touch-action: none;              /* our pointer/touch handlers manage panning */
    max-width: 380px;
    /* Subtle slide-in when a pill appears */
    animation: jtMpPillIn 0.18s ease-out;
}
.jt-mp-pill:hover { border-color: var(--jt-border-secondary, #334155); }
.jt-mp-pill--dragging { cursor: grabbing; opacity: 0.92; }

/* Once dragged the pill leaves the stack flow and floats freely */
.jt-mp-pill--floating { position: fixed; }

@keyframes jtMpPillIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.jt-mp-pill-icon {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.jt-mp-pill-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    cursor: pointer;
    min-width: 0;
}
.jt-mp-pill-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jt-mp-pill-sub {
    font-size: 0.72rem;
    color: var(--jt-text-secondary, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jt-mp-pill-restore,
.jt-mp-pill-close {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--jt-text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    transition: background 0.15s, color 0.15s;
}
.jt-mp-pill-restore:hover { color: #34d399; background: var(--jt-bg-secondary, #1e293b); }
.jt-mp-pill-close:hover   { color: #f87171; background: var(--jt-bg-secondary, #1e293b); }

/* ── Mobile: full-width pills so titles + buttons don't overflow ───────── */
@media (max-width: 640px) {
    .jt-mp-stack {
        bottom: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        align-items: stretch;
    }
    .jt-mp-pill { max-width: none; }
}