/* The speaker popover (speaker-popover.js): who a transcript passage is said
   by. One column on the 8px grid — the scope row the passage menu adds
   (transcript-passage-menu.js), the name and email, the recording's people as
   a list to pick from, and Cancel / Save. Outside the styles.css split
   manifest. The only blue in it is the one primary button: the chosen scope
   is a raised segment, the list rows are plain, so the eye lands on Save. */

.speaker-rename-popover {
    position: absolute;
    z-index: var(--z-layer-raised);
    display: flex;
    flex-direction: column;
    width: 320px;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-primary);
    animation: speaker-popover-in var(--duration-fast) var(--ease-in-out);
}

/* The note's tab panel sizes its children to a readable line (note-measure.css:
   width 100%, 70ch, centred) — a popover isn't a line of text. */
.note-modal-main > .meeting-tab-panel > .speaker-rename-popover {
    width: 320px;
    max-width: none;
    margin-inline: 0;
}

@keyframes speaker-popover-in {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: none; }
}

.speaker-rename-popover.is-above {
    animation-name: speaker-popover-in-above;
}

@keyframes speaker-popover-in-above {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
}

.speaker-rename-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ─── Scope: Everywhere · This passage · Part of it… ─────────────────────── */

.passage-scope {
    display: flex;
    gap: 2px;
    padding: 2px;
    margin-bottom: var(--space-1);
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
}

.passage-scope-option {
    flex: 1 1 0;
    min-width: 0;
    height: 28px;
    padding: 0 var(--space-1);
    letter-spacing: -0.01em;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: var(--font-primary);
    font-size: var(--font-size-12);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.passage-scope-option:hover {
    color: var(--text-primary);
}

/* The chosen segment is raised, as a segmented control's is — not a blue fill */
.passage-scope-option[aria-checked="true"] {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-1);
}

[data-theme="dark"] .passage-scope-option[aria-checked="true"] {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.passage-scope-option:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 1px;
}

/* ─── Name and email ─────────────────────────────────────────────────────── */

.speaker-rename-input,
.speaker-rename-email {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    outline: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.speaker-rename-input {
    border: 1.5px solid var(--accent-blue);
    font-size: var(--font-size-14);
    font-weight: 600;
}

.speaker-rename-email {
    border: 1px solid var(--border-medium);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--text-secondary);
}

.speaker-rename-email:focus {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.speaker-rename-input:focus-visible,
.speaker-rename-email:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-blue-opacity-15);
}

/* Auto-filled from a resolved attendee / workspace member / self —
   a subtle blue tint signals "we found this for you, edit if wrong". */
.speaker-rename-email--auto {
    border-color: var(--accent-blue);
    background: var(--accent-blue-opacity-8);
}

/* ─── The recording's people: "Same as" / "Move to" ──────────────────────── */

.speaker-people {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.speaker-people[hidden] {
    display: none;
}

.speaker-people-label {
    padding: 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Five and a half rows, then it scrolls: the half row says there are more */
.speaker-people-list {
    display: flex;
    flex-direction: column;
    max-height: 198px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.speaker-person {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    min-height: 36px;
    padding: 0 var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--font-size-14);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.speaker-person[hidden] {
    display: none;
}

.speaker-person:hover,
.speaker-person.is-active {
    background: var(--bg-hover);
}

/* Focus stays in the name field; the row the arrows are on shows it instead */
.speaker-person.is-active {
    box-shadow: inset 0 0 0 1.5px var(--accent-blue);
}

.speaker-person:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: -2px;
}

.speaker-person-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--accent-fill);
    color: #fff;
    font-size: var(--font-size-xs); /* 11px (--font-size-11 is not a defined token) */
    font-weight: 600;
}

/* The transcript row's colours (transcript-full-view.css), so the list's avatars are the transcript's */
.speaker-person[data-speaker-color="0"] .speaker-person-avatar { background: #4A90D9; }
.speaker-person[data-speaker-color="1"] .speaker-person-avatar { background: #8b5cf6; }
.speaker-person[data-speaker-color="2"] .speaker-person-avatar { background: #10B981; }
.speaker-person[data-speaker-color="3"] .speaker-person-avatar { background: #F59E0B; }
.speaker-person[data-speaker-color="4"] .speaker-person-avatar { background: #EF4444; }
.speaker-person[data-speaker-color="5"] .speaker-person-avatar { background: #06B6D4; }

.speaker-person-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.speaker-person-count {
    flex-shrink: 0;
    font-size: var(--font-size-12);
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* ─── Cancel / Save ──────────────────────────────────────────────────────── */

.speaker-rename-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.speaker-rename-cancel,
.speaker-rename-confirm {
    height: 32px;
    padding: 0 var(--space-3);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.speaker-rename-cancel {
    background: transparent;
    color: var(--text-secondary);
}

.speaker-rename-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.speaker-rename-confirm {
    min-width: 72px;
    background: var(--accent-fill);
    color: #fff;
}

.speaker-rename-confirm:hover {
    background: var(--accent-fill-hover);
}

.speaker-rename-confirm:disabled {
    opacity: 0.5;
    cursor: default;
}

.speaker-rename-cancel:focus-visible,
.speaker-rename-confirm:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .passage-scope-option[aria-checked="true"] {
        background: rgba(255, 255, 255, 0.12);
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .speaker-rename-popover {
        animation: none;
    }

    .passage-scope-option,
    .speaker-rename-input,
    .speaker-rename-email,
    .speaker-person,
    .speaker-rename-cancel,
    .speaker-rename-confirm {
        transition: none;
    }
}