/*
 * agent-mention-dropdown.css — styles for the shared @-tagging dropdown
 * (frontend/chat_page/js/agent-mention-dropdown.js).
 *
 * Component-scoped under .amd-dropdown so it is portable across chat surfaces
 * (Teams now; chat page / widget later) without depending on any surface's
 * design tokens. Distinct badge colours make AI Agents vs Chat participants
 * instantly distinguishable (C1); section headers separate the two groups (C2).
 */

.amd-dropdown {
    position: absolute;
    bottom: 100%;
    left: 16px;
    width: 320px;
    max-width: calc(100% - 32px);
    margin-bottom: 6px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    padding: 4px;
    z-index: 60;
    max-height: 280px;
    overflow-y: auto;
    font-family: inherit;
}

/* Section header ("AI Agents" / "Chat participants") — the divider between groups. */
.amd-dropdown .amd-section {
    padding: 8px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8f98;
}
.amd-dropdown .amd-section:not(:first-child) {
    margin-top: 2px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 8px;
}

.amd-dropdown .amd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    background: none;
    border-radius: 7px;
    cursor: pointer;
    color: #1f2328;
    text-align: left;
    font-size: 13.5px;
    font-family: inherit;
}
.amd-dropdown .amd-item--active,
.amd-dropdown .amd-item:hover { background: rgba(0, 0, 0, 0.05); }

.amd-dropdown .amd-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
/* AI agents: violet. People: blue. Everyone: amber. */
.amd-dropdown .amd-icon--agent { background: rgba(109, 92, 231, 0.14); color: #6d5ce7; }
.amd-dropdown .amd-icon--person { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.amd-dropdown .amd-icon--everyone { background: rgba(217, 119, 6, 0.14); color: #d97706; }

.amd-dropdown .amd-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.amd-dropdown .amd-badge {
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 8px;
    flex-shrink: 0;
}
.amd-dropdown .amd-badge--agent { color: #6d5ce7; background: rgba(109, 92, 231, 0.14); }
.amd-dropdown .amd-badge--person { color: #2563eb; background: rgba(37, 99, 235, 0.12); }
.amd-dropdown .amd-badge--everyone { color: #d97706; background: rgba(217, 119, 6, 0.14); }

/* Dark mode (chat page toggles a body/root class; match on prefers-color-scheme too). */
@media (prefers-color-scheme: dark) {
    .amd-dropdown {
        background: #23262b;
        border-color: rgba(255, 255, 255, 0.10);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    }
    .amd-dropdown .amd-item { color: #e8eaed; }
    .amd-dropdown .amd-item--active,
    .amd-dropdown .amd-item:hover { background: rgba(255, 255, 255, 0.07); }
    .amd-dropdown .amd-section { color: #9aa0a6; }
    .amd-dropdown .amd-section:not(:first-child) { border-top-color: rgba(255, 255, 255, 0.08); }
}