/* ============================================================
   FLOATING PANEL — lives inside the stack
   No longer position:absolute; it's a flex child of the stack.
   ============================================================ */

.floating-panel {
    position: relative;
    width: 100%;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    /* Entry/exit animation + discrete display so display:none
       does not break the exit transition (Chrome 117+) */
    opacity: 1;
    transform: scale(1);
    transform-origin: right center;
    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow),
        flex-basis 280ms var(--ease-out),
        display var(--transition-slow) allow-discrete;
}

.floating-panel[data-hidden="true"] {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    display: none;
}

/* Initial state for the entry animation */
@starting-style {
    .floating-panel:not([data-hidden="true"]) {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* ===== Estado: 1 panel abierto (sizing to content, capped) ===== */

.panel-stack:not([data-multi]) .floating-panel:not([data-hidden="true"]) {
    /* Does not grow (natural sizing when content is small).
       Can shrink and has a cap: large content → panel capped
       to stack height, internal scroll (overflow-y: auto on
       textarea / settings-body). */
    flex: 0 1 auto;
    min-height: 240px; /* header + min-textarea */
    max-height: 100%;
    pointer-events: auto;
}

/* ===== State: 2+ open panels (equal split modifiable by divider) =====
   Scales to N panels via [data-multi] attribe (set by panelController
   when openCount >= 2). Previously depended on data-open-count="2"/"3" and
   broke at 4+ panels. */

.panel-stack[data-multi] .floating-panel:not([data-hidden="true"]) {
    /* flex-basis: var(--panel-h, 0) → 0 by default (equal-share);
       JS sets --panel-h as inline style on each panel when dragging
       the divider or restoring from localStorage. The shorthand groups
       grow/shrink/basis into a single rule, avoiding per-panel rules. */
    flex: 1 1 var(--panel-h, 0);
    min-height: 140px; /* matches DIVIDER_MIN_PX in panelDivider */
    pointer-events: auto;
}

/* ===== Horizontal divider between panels (visible only when 2+ adjacent panels are open) ===== */

.panel-divider {
    flex: 0 0 8px;
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    user-select: none;
    touch-action: none;
    /* Appears/disappears with the same timing as panels */
    transition:
        opacity var(--transition-slow),
        display var(--transition-slow) allow-discrete;
    pointer-events: auto;
}

.panel-divider[hidden] {
    display: none;
}

@starting-style {
    .panel-divider:not([hidden]) {
        opacity: 0;
    }
}

/* Visible line on hover or during drag */
.panel-divider::before {
    content: "";
    width: 100%;
    height: 2px;
    background: transparent;
    border-radius: 1px;
    transition: background 160ms var(--ease-out);
}

.panel-divider:hover::before,
.panel-divider.is-dragging::before {
    background: var(--color-primary);
}

/* During divider drag, lock cursor and disable selection */
body.is-resizing-divider,
body.is-resizing-divider * {
    cursor: row-resize !important;
    user-select: none;
}

/* No transitions during drag (instant response) */
body.is-resizing-divider .floating-panel,
body.is-resizing-divider .panel-divider {
    transition: none !important;
}

/* ===== Panel header ===== */

.panel-header {
    padding: var(--space-1) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.panel-title {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-search {
    min-width: 40px;
    height: 22px;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
}
.panel-search:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.panel-search::placeholder {
    color: var(--color-text-faint);
}

/* Actions grouped to the right (excluding close — separated by a divider) */
.panel-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    margin-inline-start: auto; /* pushes the first group to the right */
}

/* Second group stays flush next to the divider */
.panel-actions ~ .panel-actions {
    margin-inline-start: 0;
}

.panel-action {
    --btn-fg: var(--color-text-muted);

    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    color: var(--btn-fg);
    background: transparent;
    border: none;
    cursor: pointer;
}

.panel-action[hidden] {
    display: none;
}

.panel-action:hover {
    color: --lighter(var(--btn-fg), 0.24);
    background: --tint(var(--btn-fg), 0.12);
}

/* Close button — always last in the right action group */
.panel-close {
    --btn-fg: var(--color-text-muted);
    height: 28px;
    width: 28px;
    margin-right: -8px;
}
.panel-close:hover {
    --btn-fg: var(--color-danger);

    color: var(--btn-fg);
    background: --tint(var(--btn-fg), 0.12);
}

.panel-actions-divider {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    flex-shrink: 0;
    align-self: center;
}

/* Pretty / eye button with "pressed" state (aria-pressed) */
.panel-action[aria-pressed="true"] {
    --btn-fg: var(--color-primary);

    color: var(--btn-fg);
    background: --tint(var(--btn-fg), 0.12);
}
.panel-action[aria-pressed="true"]:hover {
    color: --lighter(var(--color-primary), 0.2);
    background: --tint(var(--btn-fg), 0.22);
}

/* "Copied" state for the copy button inside the panel */
.panel-action.is-copied {
    --btn-fg: var(--color-success);

    color: var(--btn-fg);
    background: --tint(var(--btn-fg), 0.12);
}

.panel-action.is-copied:hover {
    color: --lighter(var(--color-success), 0.2);
    background: --tint(var(--btn-fg), 0.22);
}

.panel-action-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ===== Panel body ===== */

.panel-body {
    flex: 1;
    min-height: 0;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
}