/* Who was in the meeting this session came from.
   Rendered by js/ui/sessionAttendees.js, and ONLY when there is something to show — there is no
   empty state here on purpose: an absent attendee document means "nothing to show", never "nobody
   was invited", and a styled empty box would assert the second. */

.session-attendees {
    margin-top: 6px;
    max-width: min(420px, calc(100vw - 32px));
    font-size: 0.75rem;
}

.session-attendees-heading {
    /* Primary text dimmed, matching the nudge card: --text-muted and --text-secondary both miss AA
       against --panel-bg at this size in dark. */
    color: var(--text-primary);
    opacity: 0.72;
    margin-bottom: 4px;
}

.session-attendees-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* A large meeting must not push the header off screen. */
    max-height: 132px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.session-attendees-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.session-attendees-name {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The address is secondary to the name but must stay legible — it is how you tell two people with
   the same display name apart. Truncated for LAYOUT only; the stored value is always whole. */
.session-attendees-email {
    color: var(--text-primary);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.session-attendees-organizer {
    flex: 0 0 auto;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-cta);
    opacity: 0.9;
}

@media (max-width: 768px) {
    /* Shorter on a phone: the header is a bigger share of the viewport. */
    .session-attendees-list { max-height: 96px; }
}