/* ════════════════════════════════════════════════════
   Signal side-panel chat sessions — New Session + Chat History (AB#12663)

   Chrome for the two header controls (chat-session-history.js) and the session
   list they open. Its own stylesheet rather than another section appended to the
   already-2113-line css/apps/signals.css — see .claude/rules/file-size-cap.md;
   the css/controls/ and css/signal-types/ stylesheets set the same precedent.

   Every colour, radius, and font here is a skin token so the controls follow the
   active skin (.claude/rules/ui-design-scope.md). The chat surface is bespoke, so
   this is hand-authored rather than /ui-polish output.
   ════════════════════════════════════════════════════ */

/* Positioning context for the history popover, which anchors under the header's
   right edge. Only the Signals sidebar renders #sidebar-header-detail, so this
   cannot affect another app's header. */
#sidebar-header-detail {
    position: relative;
}

/* The header allots the signal name flex:1, so these must not be squeezed by a
   long name — they keep their icon size and let the name ellipsize instead. */
.signal-chat-session-btn {
    flex-shrink: 0;
}

/* ── The session list ─────────────────────────────────────────────────── */

.signal-chat-history-pop {
    position: absolute;
    top: calc(100% + 4px);
    right: 8px;
    z-index: 40;
    width: 260px;
    /* Never taller than the viewport allows; the rows scroll instead. */
    max-height: min(60vh, 420px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.signal-chat-history-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 8px 6px;
}

.signal-chat-history-empty {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 8px 10px;
}

/* ── One session ──────────────────────────────────────────────────────── */

.signal-chat-history-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    /* Rows are <button>s for the native keyboard and activation behaviour, so the
       UA's button chrome has to be reset back to a plain list row. */
    background: none;
    border: none;
    border-radius: 6px;
    padding: 7px 8px;
    text-align: left;
    font: inherit;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.signal-chat-history-row:hover { background: var(--bg-hover); }
.signal-chat-history-row:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

/* The open session reads as selected without being disabled — clicking it is a
   harmless no-op, and greying it out would suggest it is unavailable. */
.signal-chat-history-row.is-active { background: var(--bg-hover); }
.signal-chat-history-row.is-active .signal-chat-history-meta { color: var(--accent); }

.signal-chat-history-title {
    font-size: 12.5px;
    line-height: 1.3;
    /* Titles are truncated when persisted too, but a narrow side panel can still
       overflow a short one — clip rather than widen the popover. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A session with no message yet has nothing to name it after; its placeholder
   label reads as secondary so it is not mistaken for a real title. */
.signal-chat-history-title.is-untitled {
    color: var(--text-secondary);
    font-style: italic;
}

.signal-chat-history-meta {
    font-size: 10.5px;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .signal-chat-history-row { transition: none; }
}