/* PartyLine layout overrides (PartyLine Step 3).
   Load order: character-studio.css (design tokens, buttons) →
   character-player.css (the app shell PartyLine shares: header, library
   grid, .char-card vocabulary, dialogs — §11 CSS-sharing note) → this file.
   Only PartyLine-specific rules live here. */

/* App root — mirrors character-player.css #player-app (that rule is keyed to
   the Player's root id; PartyLine has its own). */
#partyline-app
{
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Party home container — mirrors #library-home's layout for our own id. */
#party-home
{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.partyline-party-card { cursor: pointer; }

/* Home page as a character-zip drop target (Step 5.1) */
#party-home.drop-active
{
    outline: 2px dashed var(--accent);
    outline-offset: -6px;
    background: var(--surface2);
}

/* ── Party configuration view (§6.2b) ─────────────────────── */

#party-config
{
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Sticky header: party name + Done button stay pinned while the body scrolls */
#party-config > .library-home-header
{
    padding: 12px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

/* Scrollable body: everything below the sticky header */
#party-config-body
{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The body scrolls; its sections don't shrink. Without this, flex-shrink
   "fits" the pane by crushing children (the search list first — it has its
   own internal scroll, so its min-content is a sliver) and overflow-y never
   engages: no scrollbar, vanished list (Scott's Step 9 smoke find). This
   view only grows from here — every section keeps natural height and the
   PANE is the thing that scrolls. Same guard for the home page. */
#party-config-body > *,
#party-home > * { flex-shrink: 0; }

/* The one deliberate exception: the search-results list keeps its own cap
   and inner scrollbar (set below), so it never dominates the pane. */

.party-name-input
{
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17px;
    color: var(--accent);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 4px 8px;
    flex: 1;
    min-width: 0;
}

.party-name-input:hover,
.party-name-input:focus
{
    border-color: var(--border);
    background: var(--surface2);
    outline: none;
}

.party-config-actions
{
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

#party-config-search-row
{
    display: flex;
    gap: 8px;
}

/* Filter row under the character search (Step 14 polish) — laid out as the
   boolean it evaluates: (Studio or Zip) and Uses agents and Custom agents.
   The bordered pill group plays the parenthesis; the serif-italic "or"/"and"
   tokens are the operators (Scott's structure, prettified). */
#party-config-filters
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    align-items: center;
}
#party-config-filters .filter-group
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}
#party-config-filters .filter-op
{
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--accent);
}
#party-config-filters label
{
    display: inline-flex;
    gap: 5px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 3px 8px;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
}
#party-config-filters label:hover { background: var(--surface); }
#party-config-filters .filter-group label:hover { background: var(--bg, rgba(255,255,255,0.05)); }
#party-config-filters label:has(input:checked) { color: var(--text); }
#party-config-filters input[type="checkbox"] { accent-color: var(--accent); }

#party-config-search
{
    flex: 1;
    min-width: 0;
}

#party-config-search-results
{
    max-height: 180px;
    overflow-y: auto;
}

#party-config-search-results .item-row { cursor: pointer; }

/* Empty grid slots — the mockup's dashed "Click to add a character" */
.partyline-empty-slot
{
    border-style: dashed;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    text-align: center;
    font-size: 12px;
}

.partyline-empty-slot:hover { border-color: var(--accent-dim); color: var(--accent); }

/* Drag & drop feedback: insertion edge + lifted card */
.partyline-member-card { cursor: grab; }

.partyline-member-card.dragging,
#party-config-search-results .item-row.dragging { opacity: 0.5; }

.partyline-member-card.drop-before { box-shadow: inset 3px 0 0 var(--accent); }
.partyline-member-card.drop-after  { box-shadow: inset -3px 0 0 var(--accent); }

.partyline-member-card .member-eagerness-row
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.partyline-member-card .member-eagerness-row input[type="range"]
{
    flex: 1;
    min-width: 0;
}

#party-config-chat-settings
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.party-setting
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.party-stepper
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#party-cap-value
{
    min-width: 2.4em;
    text-align: center;
    font-family: var(--font-mono);
}

#party-config-model { min-width: 16rem; }

/* Shared Agents checklist (§5, Step 7) */
#party-config-shared-agents
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.partyline-shared-agent-row { cursor: pointer; }

.partyline-shared-agent-row input[type="checkbox"] { accent-color: var(--accent); }

/* Party cards use a compact emoji badge where character cards show portraits */
.partyline-party-badge
{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    width: 64px;
    flex-shrink: 0;
}

.partyline-character-card { opacity: 0.92; }

/* Roster strip — who's on the line (Step 5) */
#party-roster-strip
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.roster-chip
{
    font-size: 12px;
    font-family: inherit;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--accent);
    cursor: pointer;               /* Step 9: chips are nudge buttons */
}

.roster-chip:hover:not(:disabled)
{
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--accent-dim);
}

.roster-chip.asleep,
.roster-chip:disabled
{
    color: var(--text-dim);
    opacity: 0.7;
    cursor: default;
}

/* ── Chat (Step 9 — §7 attribution: avatar-per-bubble) ────────── */

.partyline-system-line
{
    align-self: center;
    font-size: 12px;
    font-style: italic;
    color: var(--text-dim);
    padding: 2px 10px;
}

.partyline-member-header
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* Step 17: Studio-style chat avatars — .message-avatar-row / .message-avatar
   ship in character-studio.css; this is the PartyLine-only initial-letter
   fallback for members with no cached image (the member ring is inline). */
.message-avatar.placeholder
{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface2);
    color: var(--text-dim);
    font-size: 16px;
    font-weight: 600;
}

.partyline-member-name
{
    font-size: 12.5px;
    font-weight: 600;
}

/* Whisper (§6.1b): the human sees their own whispers, distinctly */
.message.partyline-whisper .message-bubble
{
    border-style: dashed;
    font-style: italic;
    opacity: 0.85;
}

.partyline-whisper-label
{
    font-size: 11.5px;
    color: var(--text-dim);
    margin-bottom: 2px;
}

/* Members dialog */
#dlg-party-members { min-width: min(26rem, 92vw); }

/* Create-party dialog */
#create-party-dialog { min-width: min(22rem, 92vw); }

#create-party-dialog input[type="text"]
{
    width: 100%;
    box-sizing: border-box;
    margin: 0.5rem 0 1rem;
}

#create-party-dialog .dialog-buttons
{
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ── Vertical density (Scott, Step 9 smoke): party rounds produce MANY
   bubbles per prompt, so the Player's roomy spacing spreads a round over
   several screens. Tighten PartyLine only — overrides, shared CSS untouched. */
#chat-history { gap: 4px; padding: 10px 12px; }

.message-bubble { padding: 7px 12px; }

.partyline-member-header { margin-bottom: 2px; gap: 6px; }

/* Step 17 avatars, tightened to match: Studio's row gap is 10px. */
.message-avatar-row { gap: 8px; }

.partyline-system-line { padding: 1px 10px; }

/* ── Whisper autocomplete (Step 10, §6.1b) ─────────────────────────────── */
#chat-input-area { position: relative; }

#whisper-autocomplete
{
    position: absolute;
    bottom: 100%;
    left: 12px;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    max-height: 40vh;
    overflow-y: auto;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.35);
    z-index: 30;
}

.whisper-ac-item
{
    background: none;
    border: none;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    padding: 6px 12px;
    cursor: pointer;
}

.whisper-ac-item:hover:not([disabled]),
.whisper-ac-item.selected { background: var(--surface); color: var(--text-bright); }

.whisper-ac-item[disabled] { color: var(--text-dim); cursor: default; opacity: 0.6; }

/* Markdown bubbles bring their own block layout — without this, the newlines
   between rendered <p> blocks render as extra blank lines under the bubble's
   inherited pre-wrap (Scott's smoke finding: "a TON of space between lines"). */
.message-bubble.md-rendered { white-space: normal; }

/* And tighten the paragraph rhythm inside party bubbles a notch. */
.message-bubble.md-rendered p { margin: 0 0 0.35em; }
.message-bubble.md-rendered p:last-child { margin-bottom: 0; }