/* =============================================================================
   Amby Teams — teams.css
   Styles for the Teams tab (#panel-teams) and its modals.
   Loaded alongside main-chat.css; ALL selectors are namespaced under the
   top-level containers .teams-panel (in-panel UI) or .teams-modal-overlay
   (body-appended modals). No generic/global class names — the `teams-` /`tm-`
   prefixes prevent cross-stylesheet conflicts (CLAUDE.md CSS rule).
   Created: 2026-07-13
   ============================================================================= */

/* ── Design tokens (scoped to the Teams containers) ───────────────────────────
 * .teams-switcher and .teams-new-convo-fab live inside .sidebar (not .teams-panel),
 * so they MUST also receive the tokens or var(--tm-accent) resolves to nothing and
 * the buttons render invisibly (light-on-light). */
.teams-panel,
.teams-modal-overlay,
.teams-switcher,
.teams-new-convo-fab {
    --tm-bg:            #ece9e2;
    --tm-bg-alt:        #f0ede6;
    --tm-surface:       #f8f5f0;
    --tm-white:         #ffffff;
    --tm-border:        #d8d3c8;
    --tm-border-strong: #b0ab9f;

    --tm-text-1:        #1c1914;
    --tm-text-2:        #5c5750;
    --tm-text-3:        #9a9488;

    --tm-accent:        #2d5f84;
    --tm-accent-hover:  #245070;
    --tm-accent-subtle: rgba(45, 95, 132, 0.09);

    --tm-agent:         #6b4fa0;
    --tm-agent-bg:      #f2eef9;
    --tm-agent-border:  rgba(107, 79, 160, 0.28);

    --tm-danger:        #c0392b;
    --tm-danger-bg:     #fdecea;

    --tm-r:             8px;
    --tm-r-lg:          12px;
    --tm-shadow-sm:     0 1px 3px rgba(28,25,20,0.08), 0 1px 2px rgba(28,25,20,0.05);
    --tm-shadow-md:     0 8px 28px rgba(28,25,20,0.16), 0 2px 6px rgba(28,25,20,0.08);
    --tm-t:             0.18s ease;

    --tm-font-ui:       'Figtree', system-ui, sans-serif;
    --tm-font-display:  'Syne', system-ui, sans-serif;
}

body.dark-theme .teams-panel,
body.dark-theme .teams-modal-overlay,
body.dark-theme .teams-switcher,
body.dark-theme .teams-new-convo-fab {
    --tm-bg:            #1a1a1a;
    --tm-bg-alt:        #1e1e1e;
    --tm-surface:       #242424;
    --tm-white:         #2a2a2a;
    --tm-border:        #3a3a3a;
    --tm-border-strong: #555;
    --tm-text-1:        #f0f0f0;
    --tm-text-2:        #b0b0b0;
    --tm-text-3:        #707070;
    --tm-accent:        #71a4df;
    --tm-accent-hover:  #5a90cc;
    --tm-accent-subtle: rgba(113, 164, 223, 0.12);
    --tm-agent:         #b79be6;
    --tm-agent-bg:      #2c2540;
    --tm-agent-border:  rgba(183, 155, 230, 0.35);
    --tm-danger:        #e57373;
    --tm-danger-bg:     #3a2422;
}

/* ── Panel shell ──────────────────────────────────────────────────────────── */
/* Match the sizing of #panel-chat/#panel-tasks (flex child of .chat-area) so the
 * fixed-height chat header is never squeezed when switching to Teams. */
#panel-teams {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.teams-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--tm-font-ui);
    color: var(--tm-text-1);
    background: var(--tm-bg);
    overflow: hidden;
}

/* ── Loading / spinner / states (shared across panel, modal, and switcher) ──── */
.teams-panel .teams-loading,
.teams-modal-overlay .teams-loading,
.teams-switcher .teams-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px;
    color: var(--tm-text-2);
    font-size: 14px;
    justify-content: center;
}

.teams-panel .teams-spinner,
.teams-modal-overlay .teams-spinner,
.teams-switcher .teams-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--tm-border);
    border-top-color: var(--tm-accent);
    border-radius: 50%;
    animation: teams-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes teams-spin { to { transform: rotate(360deg); } }

.teams-panel .teams-error,
.teams-modal-overlay .teams-error,
.teams-switcher .teams-error {
    padding: 28px;
    text-align: center;
    color: var(--tm-text-2);
}
.teams-panel .teams-error p,
.teams-switcher .teams-error p { margin: 0 0 12px; }

.teams-panel .teams-empty,
.teams-modal-overlay .teams-empty,
.teams-switcher .teams-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--tm-text-2);
    gap: 6px;
}
.teams-panel .teams-empty__icon,
.teams-switcher .teams-empty__icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--tm-accent-subtle);
    color: var(--tm-accent);
    font-size: 22px;
    margin-bottom: 8px;
}
.teams-panel .teams-empty h3,
.teams-switcher .teams-empty h3 { margin: 0; font-size: 16px; color: var(--tm-text-1); }
.teams-panel .teams-empty p,
.teams-switcher .teams-empty p { margin: 0; font-size: 13px; max-width: 320px; }
.teams-panel .teams-empty--sidebar,
.teams-switcher .teams-empty--sidebar { padding: 28px 8px; }
.teams-panel .teams-empty-inline,
.teams-modal-overlay .teams-empty-inline,
.teams-switcher .teams-empty-inline {
    padding: 16px; text-align: center; color: var(--tm-text-3); font-size: 13px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.teams-panel .teams-btn,
.teams-modal-overlay .teams-btn,
.teams-switcher .teams-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--tm-border);
    background: var(--tm-white);
    color: var(--tm-text-1);
    font-family: var(--tm-font-ui);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--tm-r);
    cursor: pointer;
    transition: all var(--tm-t);
}
.teams-panel .teams-btn:hover,
.teams-modal-overlay .teams-btn:hover,
.teams-switcher .teams-btn:hover { border-color: var(--tm-accent); color: var(--tm-accent); }
.teams-panel .teams-btn:disabled,
.teams-modal-overlay .teams-btn:disabled,
.teams-switcher .teams-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.teams-panel .teams-btn--sm,
.teams-modal-overlay .teams-btn--sm,
.teams-switcher .teams-btn--sm { padding: 5px 10px; font-size: 12px; }
.teams-panel .teams-btn--primary,
.teams-modal-overlay .teams-btn--primary,
.teams-switcher .teams-btn--primary {
    background: var(--tm-accent); border-color: var(--tm-accent); color: #fff;
}
.teams-panel .teams-btn--primary:hover,
.teams-modal-overlay .teams-btn--primary:hover,
.teams-switcher .teams-btn--primary:hover {
    background: var(--tm-accent-hover); border-color: var(--tm-accent-hover); color: #fff;
}
.teams-panel .teams-btn--danger,
.teams-modal-overlay .teams-btn--danger { color: var(--tm-danger); }
.teams-panel .teams-btn--danger:hover,
.teams-modal-overlay .teams-btn--danger:hover {
    border-color: var(--tm-danger); background: var(--tm-danger-bg); color: var(--tm-danger);
}
.teams-panel .teams-btn--ghost,
.teams-modal-overlay .teams-btn--ghost,
.teams-switcher .teams-btn--ghost { background: transparent; }

/* ── Avatars ──────────────────────────────────────────────────────────────── */
.teams-panel .teams-avatar,
.teams-modal-overlay .teams-avatar {
    width: 30px; 
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tm-accent-subtle);
    color: var(--tm-accent);
    font-weight: 600;
    font-size: 13px;
    margin-right: 8px;
}
.teams-panel .teams-avatar--team { border-radius: var(--tm-r); }
.teams-panel .teams-avatar--agent { background: var(--tm-agent-bg); color: var(--tm-agent); }

/* ── Promo page (no permission) ───────────────────────────────────────────── */
.teams-panel--promo { align-items: center; overflow-y: auto; }
.teams-panel .teams-promo {
    max-width: 90%;
    margin: 0 auto;
    padding: 56px 28px 72px;
    text-align: center;
}
.teams-panel .teams-promo__badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tm-accent);
    background: var(--tm-accent-subtle);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.teams-panel .teams-promo__title {
    font-family: var(--tm-font-display);
    font-size: clamp(34px, 6vw, 54px);
    line-height: 1.05;
    margin: 0 0 16px;
    color: var(--tm-text-1);
}
.teams-panel .teams-promo__subtitle {
    font-size: 17px;
    color: var(--tm-text-2);
    max-width: 540px;
    margin: 0 auto 40px;
    line-height: 1.55;
}
.teams-panel .teams-promo__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    text-align: left;
}
.teams-panel .teams-promo__feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 24px;
    min-height: 168px;
    background: var(--tm-white);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r-lg);
    box-shadow: var(--tm-shadow-sm);
    transition: transform var(--tm-t), box-shadow var(--tm-t), border-color var(--tm-t);
}
.teams-panel .teams-promo__feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow-md);
    border-color: var(--tm-border-strong);
}
.teams-panel .teams-promo__feature-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: var(--tm-r-lg);
    display: flex; align-items: center; justify-content: center;
    background: var(--tm-accent-subtle);
    color: var(--tm-accent);
    font-size: 20px;
}
.teams-panel .teams-promo__feature-text { display: flex; flex-direction: column; gap: 6px; }
.teams-panel .teams-promo__feature-title { font-weight: 600; font-size: 16px; color: var(--tm-text-1); }
.teams-panel .teams-promo__feature-body { font-size: 13.5px; color: var(--tm-text-2); line-height: 1.5; }
.teams-panel .teams-promo__footnote {
    margin: 40px auto 0;
    font-size: 13px;
    color: var(--tm-text-3);
}

/* ── Real panel: the panel holds ONE full-width child (conversation | config |
 *    empty). The Teams list/conversations live in the sidebar (.teams-sidebar). */
.teams-panel--real { flex-direction: column; }
.teams-panel--real > * { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; }
.teams-panel--real > .teams-empty { flex-direction: column; }

/* ── Teams mode sidebar swap ──────────────────────────────────────────────────
 * Teams reuses the existing two-part sidebar (widgets slot + real Recent Sessions
 * + the real #sidebarSeparator divider). In teams mode we swap the widgets slot
 * for the Teams switcher and hide the Projects group — the Recent Sessions list
 * and divider are the platform's own, not a reconstruction. */
.sidebar[data-mode="teams"] #workflowsList > .workflow-item,
.sidebar[data-mode="teams"] #workflowsList > .workflows-skeleton-loader { display: none !important; }
.sidebar[data-mode="teams"] #projectsSidebarContainer { display: none !important; }
.sidebar:not([data-mode="teams"]) .teams-switcher { display: none !important; }

/* Hide the header "New Chat" action while the Teams tab is active — Teams has its
 * own "New conversation" button (body.teams-tab-active set by header-tabs.js). */
body.teams-tab-active #newSessionContainer { display: none !important; }

/* Collapsed sidebar: show icons/avatars only (mirrors widgets/tasks collapse). */
.sidebar.collapsed .teams-switcher__list { padding: 4px 0; overflow: visible; }
.sidebar.collapsed .teams-switcher .teams-sb-team__meta,
.sidebar.collapsed .teams-switcher .teams-sb-team__gear,
.sidebar.collapsed .teams-switcher .teams-sb-unread,
.sidebar.collapsed .teams-switcher .teams-empty h3,
.sidebar.collapsed .teams-switcher .teams-empty p { display: none !important; }
.sidebar.collapsed .teams-switcher .teams-sb-team { gap: 0; }
.sidebar.collapsed .teams-switcher .teams-sb-team__main { justify-content: center; padding: 6px 0; }
.sidebar.collapsed .teams-switcher .teams-empty { padding: 16px 0; }
.sidebar.collapsed .teams-switcher .teams-empty__icon { margin-bottom: 0; }
/* Don't stretch the switcher in collapsed mode, so the create button sits right
 * under the team icons instead of dropping to the bottom (behind the FAB). */
.sidebar.collapsed .teams-switcher { height: auto; min-height: 0; }
.sidebar.collapsed .teams-switcher__list { flex: 0 1 auto; }
.sidebar.collapsed .teams-switcher__create {
    font-size: 0;              /* hide label, keep the icon */
    margin: 8px 6px;
    padding: 9px 0;
    gap: 0;
}
.sidebar.collapsed .teams-switcher__create i { font-size: 13px; }

/* Promo path (no teams.can_manage_and_use): expose no Team data in the sidebar. */
.sidebar.teams-locked #workflowsList,
.sidebar.teams-locked #sidebarSeparator,
.sidebar.teams-locked #sessionsListContainer,
.sidebar.teams-locked .teams-new-convo-fab { display: none !important; }

/* Teams switcher (injected as a child of #workflowsList, shown only in teams mode) */
.teams-switcher {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-family: var(--tm-font-ui);
    color: var(--tm-text-1);
}
.teams-switcher .teams-switcher__list { 
    flex: 1 1 auto; 
    overflow-y: auto; 
    padding: 6px 0; 
}

.teams-switcher .teams-switcher__create:hover {
    opacity: 1;
}

.teams-switcher .teams-switcher__create {
    flex-shrink: 0;
    justify-content: center;
    margin: 8px 6px 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    opacity: 0.4;
}

.teams-switcher .teams-sb-team {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border-radius: var(--tm-r);
    margin-bottom: 2px;
}
.teams-switcher .teams-sb-team--active { background: var(--tm-white); box-shadow: inset 0 0 0 1px var(--tm-accent); }
.teams-switcher .teams-sb-team__main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    min-width: 0;
    border-radius: var(--tm-r);
}
.teams-switcher .teams-sb-team:hover { background: var(--tm-white); }
.teams-switcher .teams-sb-team__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.teams-switcher .teams-sb-team__label {
    font-weight: 600; font-size: 14px; color: var(--tm-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.teams-switcher .teams-sb-team__sub { font-size: 12px; color: var(--tm-text-3); }
.teams-switcher .teams-sb-team__gear {
    flex-shrink: 0;
    width: 30px;
    border: none;
    background: transparent;
    color: var(--tm-text-3);
    cursor: pointer;
    border-radius: var(--tm-r);
    opacity: 0;
    transition: opacity var(--tm-t), color var(--tm-t);
}
.teams-switcher .teams-sb-team:hover .teams-sb-team__gear,
.teams-switcher .teams-sb-team--active .teams-sb-team__gear { opacity: 1; }
.teams-switcher .teams-sb-team__gear:hover { color: var(--tm-accent); }
.teams-switcher .teams-sb-unread {
    flex-shrink: 0;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--tm-accent); color: #fff;
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.teams-switcher .teams-avatar {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: var(--tm-r);
    display: flex; align-items: center; justify-content: center;
    background: var(--tm-accent-subtle); color: var(--tm-accent);
    font-weight: 600; font-size: 13px;
}

/* Floating "New conversation" button pinned to the sidebar bottom (teams mode) */
.sidebar[data-mode="teams"] { 
    position: relative; 
}

/* .sidebar[data-mode="teams"] #sessionsListContainer { padding-bottom: 58px; } */

.sidebar[data-mode="teams"] .teams-new-convo-fab:hover { 
    background: var(--tm-accent-hover); 
    opacity: 1;
}

.sidebar[data-mode="teams"] .teams-new-convo-fab {
    position: absolute;
    bottom: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px;
    border: none;
    border-radius: 30px;
    background: var(--tm-accent);
    color: #fff;
    font-family: var(--tm-font-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--tm-shadow-md);
    transition: background var(--tm-t);
    opacity: 0.4;
    align-self: anchor-center;
}
.sidebar:not([data-mode="teams"]) .teams-new-convo-fab { display: none !important; }
.sidebar[data-mode="teams"] .teams-new-convo-fab:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Full-panel Team config ─────────────────────────────────────────────────── */
.teams-panel .teams-config { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; background: var(--tm-bg); }
.teams-panel .teams-config__header {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--tm-border);
    background: var(--tm-surface);
    flex-shrink: 0;
}
.teams-panel .teams-config__back {
    border: 1px solid var(--tm-border); background: var(--tm-white);
    color: var(--tm-text-2); border-radius: var(--tm-r);
    padding: 6px 11px; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.teams-panel .teams-config__back:hover { border-color: var(--tm-accent); color: var(--tm-accent); }
.teams-panel .teams-config__title { margin: 0; font-size: 19px; font-family: var(--tm-font-display); color: var(--tm-text-1); flex: 1; }
.teams-panel .teams-config__readonly { font-size: 12px; color: var(--tm-text-3); border: 1px solid var(--tm-border); padding: 3px 9px; border-radius: 999px; }
.teams-panel .teams-config__scroll { flex: 1 1 auto; overflow-y: auto; padding: 24px; max-width: 720px; width: 100%; margin: 0 auto; }
.teams-panel .teams-config__section { margin-bottom: 32px; }
.teams-panel .teams-config__section-title { font-size: 14px; font-weight: 600; color: var(--tm-text-1); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--tm-border); }
.teams-panel .teams-config__actions { margin-top: 6px; }
.teams-panel .teams-config__section--danger .teams-config__section-title { color: var(--tm-danger); border-color: var(--tm-danger-bg); }
.teams-panel .teams-config__danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.teams-panel .teams-config__danger-title { font-weight: 600; font-size: 14px; }
.teams-panel .teams-config__danger-body { font-size: 13px; color: var(--tm-text-2); margin-top: 2px; max-width: 440px; }
.teams-panel .teams-config .teams-members-list { display: flex; flex-direction: column; }

/* ── Form fields (config + create modal) ────────────────────────────────────── */
.teams-panel .teams-field,
.teams-modal-overlay .teams-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.teams-panel .teams-field__label,
.teams-modal-overlay .teams-field__label { font-size: 13px; font-weight: 600; color: var(--tm-text-1); }
.teams-panel .teams-field__req,
.teams-modal-overlay .teams-field__req { color: var(--tm-danger); }
.teams-panel .teams-field__hint,
.teams-modal-overlay .teams-field__hint { font-size: 12px; color: var(--tm-text-3); }
.teams-panel .teams-field__hint strong,
.teams-modal-overlay .teams-field__hint strong { color: var(--tm-agent); }
.teams-panel .teams-field__input,
.teams-modal-overlay .teams-field__input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r);
    background: var(--tm-white);
    font-family: var(--tm-font-ui);
    font-size: 14px;
    color: var(--tm-text-1);
    outline: none;
    transition: border-color var(--tm-t), box-shadow var(--tm-t);
}
.teams-panel .teams-field__input:focus,
.teams-modal-overlay .teams-field__input:focus { border-color: var(--tm-accent); box-shadow: 0 0 0 3px var(--tm-accent-subtle); }
.teams-panel .teams-field__textarea,
.teams-modal-overlay .teams-field__textarea { resize: vertical; min-height: 74px; line-height: 1.45; }
.teams-panel .teams-field__input:disabled,
.teams-modal-overlay .teams-field__input:disabled { background: var(--tm-bg-alt); color: var(--tm-text-2); cursor: not-allowed; }

/* Member chips (create modal) */
.teams-modal-overlay .teams-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.teams-modal-overlay .teams-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 10px;
    background: var(--tm-accent-subtle); color: var(--tm-accent);
    border-radius: 999px; font-size: 12px; font-weight: 500;
}
.teams-modal-overlay .teams-chip button {
    border: none; background: transparent; color: var(--tm-accent); cursor: pointer;
    width: 16px; height: 16px; border-radius: 50%; font-size: 10px;
}
.teams-modal-overlay .teams-chip button:hover { background: var(--tm-accent); color: #fff; }

/* Create-modal form chrome */
.teams-modal-overlay .teams-modal--form { max-width: 560px; }
.teams-modal-overlay .teams-form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.teams-modal-overlay .teams-modal__footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--tm-border);
    background: var(--tm-surface);
}

/* ── Conversation view ────────────────────────────────────────────────────── */
.teams-panel .teams-conversation {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 60rem;
    margin: 0 auto;
}

.teams-panel .teams-conversation__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid var(--tm-border);
    flex-shrink: 0;
    position: relative;
}
.teams-panel .teams-conversation__heading { min-width: 0; }
.teams-panel .teams-conversation__title {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 15px; color: var(--tm-text-1);
}
.teams-panel .teams-conversation__name {
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    max-width: 46ch;
    font-size: 1.2rem;
}

/* Pencil: hidden until the title is hovered. */
.teams-panel .teams-conversation__rename {
    border: none; background: none; cursor: pointer; padding: 3px;
    color: var(--tm-text-3); border-radius: 5px; line-height: 1;
    opacity: 0; transition: opacity 0.12s ease, background 0.12s ease;
    font-size: 12px;
}
.teams-panel .teams-conversation__title:hover .teams-conversation__rename { opacity: 1; }
.teams-panel .teams-conversation__rename:hover { background: var(--tm-accent-subtle); color: var(--tm-text-1); }
/* Video call: a primary header action pinned to the far right of the header. */
.teams-panel .teams-conversation__video {
    flex-shrink: 0; margin-left: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--tm-border); background: var(--tm-accent-subtle);
    color: var(--tm-accent); cursor: pointer; font-size: 14px; line-height: 1;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.teams-panel .teams-conversation__video:hover {
    background: var(--tm-accent); color: #fff; border-color: var(--tm-accent);
}

/* ── Video call overlay ─────────────────────────────────────────────────────── */
.teams-video-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0, 0, 0, 0.62);
    display: flex; align-items: center; justify-content: center;
}
.teams-video-overlay .teams-video-modal {
    width: min(1280px, 96vw); height: min(820px, 90vh);
    display: flex; flex-direction: column;
    background: var(--tm-surface-1, #1a1d24); color: var(--tm-text-1, #e6e9ef);
    border: 1px solid var(--tm-border, #2a2f3a); border-radius: 12px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.teams-video-overlay .teams-video-header {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid #2a2f3a; flex-shrink: 0;
}
.teams-video-overlay .teams-video-title { font-weight: 600; font-size: 14px; }
.teams-video-overlay .teams-video-status { font-size: 12px; color: #9aa3b2; margin-left: auto; }
.teams-video-overlay .teams-video-chattoggle {
    border: 1px solid #2a2f3a; background: transparent; color: #e6e9ef;
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.teams-video-overlay .teams-video-chattoggle:hover { background: rgba(255, 255, 255, 0.08); }
.teams-video-overlay .teams-video-close {
    border: none; background: none; color: #9aa3b2;
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.teams-video-overlay .teams-video-close:hover { color: #e6e9ef; }

/* Body: video stage (left) + optional collapsible chat panel (right). */
.teams-video-overlay .teams-video-main { 
    flex: 1; 
    display: flex; 
    min-height: 0; 
}

.teams-video-overlay .teams-video-stage { 
    flex: 1; 
    min-width: 0; 
    display: flex; 
    flex-direction: column; 
}

.teams-video-overlay .teams-video-grid {
    flex: 1; 
    overflow: auto; 
    padding: 16px; 
    display: grid; 
    gap: 14px;
    /* auto-fit collapses empty tracks so 1 participant fills the row (large);
       2 → two columns, 3+ → wrap. Large min keeps tiles big for small calls. */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    grid-auto-rows: 1fr; align-content: center;
    background: #0b0d11;
}
.teams-video-overlay .teams-video-tile {
    position: relative; 
    background: #000; 
    border: 1px solid #2a2f3a;
    border-radius: 10px; 
    overflow: hidden; 
    aspect-ratio: 16 / 9; 
    min-height: 220px; 
    align-self: anchor-center;
}
.teams-video-overlay .teams-video-tile.local { 
    border-color: #4f8cff; 

}
.teams-video-overlay .teams-video-tile video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.teams-video-overlay .teams-video-label {
    position: absolute; 
    left: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.6);
    color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px;
}

/* Connecting overlay — shown over the (black) stage until media arrives. */
.teams-video-overlay .teams-video-loading {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: #cdd3dc; font-size: 14px; background: #0b0d11;
}
.teams-video-overlay .teams-video-loading[hidden] { display: none; }
.teams-video-overlay .teams-video-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: #4f8cff;
    animation: teams-spin 0.8s linear infinite;
}
/* The stage is the positioning context for the loading overlay. */
.teams-video-overlay .teams-video-stage { position: relative; }

/* Icon controls: icon on top, label underneath. */
.teams-video-overlay .teams-video-controls {
    display: flex; gap: 12px; justify-content: center; padding: 14px;
    border-top: 1px solid #2a2f3a; flex-shrink: 0;
}
.teams-video-overlay .teams-video-ctrl {
    display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
    min-width: 70px; padding: 8px 10px; cursor: pointer;
    border: 1px solid #2a2f3a; border-radius: 10px;
    background: #252a34; color: #e6e9ef; font-size: 11px; font-weight: 600; line-height: 1;
}
.teams-video-overlay .teams-video-ctrl i { font-size: 16px; }
.teams-video-overlay .teams-video-ctrl:hover { background: rgba(255, 255, 255, 0.08); }
.teams-video-overlay .teams-video-ctrl.is-off { background: #3a2422; border-color: #e5484d; color: #f0a5a5; }
.teams-video-overlay .teams-video-ctrl--danger { background: #e5484d; border-color: #e5484d; color: #fff; }
.teams-video-overlay .teams-video-ctrl--danger:hover { background: #d33f43; }

/* In-call side chat. */
.teams-video-overlay .teams-video-chat {
    width: 330px; flex-shrink: 0; display: flex; flex-direction: column;
    border-left: 1px solid #2a2f3a; background: #14171d;
}
/* The [hidden] attribute must win over display:flex, or the panel can never be
   closed (default-closed + the toggle/× buttons rely on this). */
.teams-video-overlay .teams-video-chat[hidden] { display: none; }
.teams-video-overlay .teams-video-chat__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-bottom: 1px solid #2a2f3a; font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.teams-video-overlay .teams-video-chat__close {
    border: none; background: none; color: #9aa3b2; font-size: 20px; line-height: 1; cursor: pointer;
}
.teams-video-overlay .teams-video-chat__list {
    flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px;
}
.teams-video-overlay .teams-video-chat__msg {
    display: flex; flex-direction: column; gap: 2px; max-width: 92%; align-self: flex-start;
}
.teams-video-overlay .teams-video-chat__msg.me { align-self: flex-end; text-align: right; }
.teams-video-overlay .teams-video-chat__who { font-size: 10.5px; color: #9aa3b2; }
.teams-video-overlay .teams-video-chat__msg.agent .teams-video-chat__who { color: #b79be6; }
.teams-video-overlay .teams-video-chat__text {
    background: #252a34; color: #e6e9ef; padding: 6px 10px; border-radius: 10px;
    font-size: 13px; white-space: pre-wrap; word-break: break-word; display: inline-block;
}
.teams-video-overlay .teams-video-chat__msg.me .teams-video-chat__text { background: #2d5f84; color: #fff; }
.teams-video-overlay .teams-video-chat__composer {
    display: flex; gap: 8px; padding: 10px; border-top: 1px solid #2a2f3a; flex-shrink: 0;
}
.teams-video-overlay .teams-video-chat__composer input {
    flex: 1; min-width: 0; background: #11141a; border: 1px solid #2a2f3a; color: #e6e9ef;
    border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.teams-video-overlay .teams-video-chat__composer button {
    border: none; background: #2d5f84; color: #fff; border-radius: 8px; padding: 0 13px; cursor: pointer;
}
/* Header roster: participant chips (dot + name) + an always-visible people pill. */
.teams-panel .teams-conversation__participants {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px;
    font-size: 12px; color: var(--tm-text-3); margin-top: 3px; min-width: 0;
}
.teams-panel .teams-participant-chip {
    display: inline-flex; align-items: center; gap: 5px; color: var(--tm-text-2); white-space: nowrap;
}
.teams-panel .teams-people-pill {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    border: 1px solid var(--tm-border); background: var(--tm-white); color: var(--tm-text-2);
    border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600;
    font-family: inherit; line-height: 1.6; transition: all var(--tm-t);
}
.teams-panel .teams-people-pill:hover { border-color: var(--tm-accent); color: var(--tm-accent); }
.teams-panel .teams-people-pill i { font-size: 11px; }

/* Presence dot — shared by the header roster and the participants modal. */
.teams-presence-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #b0ab9f; flex-shrink: 0;
}
.teams-presence-dot--online { background: #37b24d; }   /* green  — viewing/active <15m */
.teams-presence-dot--away { background: #f59f00; }     /* amber  — active 15m–24h ago */
.teams-presence-dot--offline { background: #b0ab9f; }  /* grey   — inactive >24h / none */
.teams-presence-dot--on_call { background: #e5484d; }  /* red    — in the video call */

/* Participants modal (opened from the people pill). Reuses the shared
   .teams-modal chrome; only the row layout is bespoke. */

.teams-participants-modal.teams-modal-overlay .teams-modal__header { 
    padding: 0 20px; 
}

.teams-participants-modal .teams-modal {
    width: min(420px, 92vw); min-height: 500px; max-height: 85vh;
    display: flex; flex-direction: column;
}
/* Body grows so the footer stays pinned to the bottom and the (short) list is
   allowed to leave whitespace beneath it rather than looking crowded. */
.teams-participants-modal .teams-modal__body { flex: 1 1 auto; }
/* Non-clickable "+N more" hint in the header roster (the exact count also lives
   in the people pill; this just signals the inline list is truncated). */
.teams-panel .teams-participant-more {
    color: var(--tm-text-3); font-size: 12px; white-space: nowrap;
}
.teams-participants-modal .teams-people-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 4px;
    border-bottom: 1px solid var(--tm-border);
}
.teams-participants-modal .teams-people-row:last-child { border-bottom: none; }
.teams-participants-modal .teams-people-row__name { flex: 1; font-size: 14px; color: var(--tm-text-1); }
.teams-participants-modal .teams-people-row__you { color: var(--tm-text-3); font-size: 12px; }
.teams-participants-modal .teams-people-row__status { font-size: 11.5px; color: var(--tm-text-3); }
.teams-participants-modal .teams-people-row__status--online { color: #2f9e44; }
.teams-participants-modal .teams-people-row__status--away { color: #b8860b; }
.teams-participants-modal .teams-people-row__status--on_call { color: #c0392b; }

.teams-panel .teams-conversation__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px 100px 20px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.teams-panel .teams-conversation__load-older { 
    text-align: center; margin-bottom: 12px; 
}

/* ── Messages ─────────────────────────────────────────────────────────────── */
.teams-panel .teams-msg {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-start;
    position: relative; /* anchors the hover Reply action */
}
.teams-panel .teams-msg__body { min-width: 0; flex: 1; }
.teams-panel .teams-msg__meta {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap;
}
.teams-panel .teams-msg__sender { font-weight: 600; font-size: 13px; color: var(--tm-text-1); }
.teams-panel .teams-msg__agent { font-weight: 600; font-size: 13px; color: var(--tm-agent); }
.teams-panel .teams-msg__time { font-size: 11px; color: var(--tm-text-3); }
.teams-panel .teams-msg__asked {
    font-size: 11px; color: var(--tm-agent);
    background: var(--tm-agent-bg);
    padding: 1px 7px; border-radius: 999px;
}
.teams-panel .teams-msg__bubble {
    display: inline-block;
    padding: 9px 13px;
    background: var(--tm-white);
    border: 1px solid var(--tm-border);
    border-radius: 4px 12px 12px 12px;
    font-size: 1em;
    line-height: 1.5;
    color: var(--tm-text-1);
    word-break: break-word;
    max-width: 100%;
}
/* Only the message TEXT preserves author whitespace/newlines. The bubble is now
 * a container (quote + text), so pre-wrap must NOT live on it — otherwise the
 * indentation between the child elements in the template renders as blank lines
 * and inflates the bubble height. */
.teams-panel .teams-msg__text {
    white-space: pre-wrap;
    word-break: break-word;
}

.teams-conversation__scroll .message-container-bot {
    padding: 0;
}

.teams-panel .teams-msg__bubble--assistant {
    background: var(--tm-agent-bg);
    border-color: var(--tm-agent-border);
    background: transparent;
    border-color: transparent;
    border: none;
}
.teams-panel .teams-msg--mine .teams-msg__bubble {
    background: var(--tm-accent-subtle);
    border-color: var(--tm-accent-subtle);
}
.teams-panel .teams-msg--ai_request .teams-msg__bubble {
    border-style: dashed;
    border-color: var(--tm-agent-border);
}
.teams-panel .teams-msg--failed { opacity: 0.7; }
.teams-panel .teams-msg--failed .teams-msg__bubble { border-color: var(--tm-danger); }
.teams-panel .teams-msg__retry { margin-top: 6px; }

/* ── Inline reply / quote ──────────────────────────────────────────────────────
 * Flat single-level quote (Slack / MS-Teams style). Two pieces here: the hover
 * ACTIONS TOOLBAR (a small rounded pill that overlaps the top of the message and
 * has room to grow into reactions) and the QUOTED-PARENT PREVIEW rendered inside
 * the message bubble, above the reply text. Composer chip is defined below. All
 * scoped to .teams-panel and token-driven (no global selectors). */

/* Content column: anchors the floating actions toolbar to the bubble. */
.teams-panel .teams-msg__content {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
}

/* Hover actions toolbar — overlaps the top-right of the message (MS-Teams-like),
 * appears on hover of the message, and is a pill so more actions/reactions can
 * be added later without shifting layout. */
.teams-panel .teams-msg__actions {
    position: absolute;
    top: -15px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-white);
    box-shadow: var(--tm-shadow-md);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity var(--tm-t), transform var(--tm-t);
}
.teams-panel .teams-msg:hover .teams-msg__actions,
.teams-panel .teams-msg-repliable:hover .teams-msg__actions,
.teams-panel .teams-msg__actions:focus-within {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.teams-panel .teams-msg__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--tm-text-2);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--tm-t), color var(--tm-t);
}
.teams-panel .teams-msg__action:hover { background: var(--tm-accent-subtle); color: var(--tm-accent); }
/* Assistant answers render in a bot container; anchor + nudge their toolbar. */
.teams-panel .teams-msg-repliable { position: relative; }
.teams-panel .teams-msg-repliable .teams-msg__actions { top: -12px; right: 4px; }

/* Quoted-parent preview INSIDE the bubble, above the reply text. Neutral inset
 * overlay so it reads on both the white and the "mine" (accent) bubble and in
 * dark mode without a per-theme override. */
.teams-panel .teams-msg__reply-quote,
.teams-panel .teams-msg__reply-quote--missing {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 340px;      /* cap so a long snippet ellipsizes instead of widening the bubble */
    margin-bottom: 6px;
    padding: 4px 8px;
    text-align: left;
    border: none;
    border-left: 3px solid var(--tm-accent);
    border-radius: 3px;
    background: rgba(128, 128, 128, 0.15);
    font: inherit;
    cursor: pointer;
    transition: background var(--tm-t);
}
.teams-panel .teams-msg__reply-quote:hover { background: rgba(128, 128, 128, 0.24); }
.teams-panel .teams-msg__reply-quote-sender {
    font-size: 11px;
    font-weight: 600;
    color: var(--tm-accent);
}
.teams-panel .teams-msg__reply-quote-snippet {
    min-width: 0;          /* allow the flex child to shrink so ellipsis engages */
    font-size: 12px;
    color: var(--tm-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.teams-panel .teams-msg__reply-quote--missing {
    border-left-color: var(--tm-border-strong);
    color: var(--tm-text-3);
    font-size: 12px;
    font-style: italic;
    cursor: default;
}

/* Composer chip: "Replying to <name>: <snippet>" above the adopted input. */
.teams-panel .teams-composer-reply-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px 6px;
    padding: 6px 10px;
    border: 1px solid var(--tm-border);
    border-left: 3px solid var(--tm-accent);
    border-radius: var(--tm-r);
    background: var(--tm-surface);
}
.teams-panel .teams-composer-reply-chip__icon { color: var(--tm-accent); font-size: 12px; }
.teams-panel .teams-composer-reply-chip__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.teams-panel .teams-composer-reply-chip__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-text-1);
}
.teams-panel .teams-composer-reply-chip__snippet {
    font-size: 12px;
    color: var(--tm-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.teams-panel .teams-composer-reply-chip__cancel {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--tm-r);
    background: transparent;
    color: var(--tm-text-3);
    cursor: pointer;
    transition: background var(--tm-t), color var(--tm-t);
}
.teams-panel .teams-composer-reply-chip__cancel:hover { background: var(--tm-bg-alt); color: var(--tm-danger); }

/* Flash the parent when a quote is clicked (scroll-to + highlight). */
.teams-panel .teams-msg--flash .teams-msg__bubble,
.teams-panel .teams-msg-repliable.teams-msg--flash {
    animation: teams-msg-flash 1.6s ease;
}
@keyframes teams-msg-flash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    15% { box-shadow: 0 0 0 3px var(--tm-accent); }
    50% { box-shadow: 0 0 0 3px var(--tm-accent-subtle); }
}
@media (prefers-reduced-motion: reduce) {
    .teams-panel .teams-msg--flash .teams-msg__bubble,
    .teams-panel .teams-msg-repliable.teams-msg--flash { animation: none; outline: 2px solid var(--tm-accent); }
}

/* ── Composer slot — hosts the ADOPTED shared chat input (#inputContainer) ─────
 * Teams reuses the platform chat input rather than a separate composer (#6), so
 * this slot only provides the surrounding chrome (border, hint). The input keeps
 * its own styles from main-chat.css. */
.teams-panel .teams-conversation__composer-slot {
    flex-shrink: 0;
    /* border-top: 1px solid var(--tm-border);
    background: var(--tm-surface); */
    padding: 8px 0 6px;
}
.teams-panel .teams-conversation__composer-slot #inputContainer {
    /* The shared #inputContainer is normally laid out inside #panel-chat (which
     * is display:none while Teams is active) and may carry chat-panel-scoped
     * absolute positioning / hidden state. When ADOPTED into this slot, force it
     * back to a plain in-flow, visible block so the field always appears. Scoped
     * to the composer slot so the real chat input is never affected. */
    display: flex !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    padding: 5px 20px;
}
.teams-panel .teams-conversation__composer-slot #inputContainer .input-row {
    display: flex !important;
    width: 100%;
}
.teams-panel .teams-conversation__composer-slot #userInput {
    display: block !important;
    visibility: visible !important;
}
.teams-panel .teams-conversation__hint {
    padding-left: 40px;
    font-size: 12px;
    color: var(--tm-text-3);
}
.teams-panel .teams-conversation__hint strong { color: var(--tm-agent); }

/* File upload isn't supported by the human-first send endpoint — hide the
 * paperclip + attachments while the input is adopted by Teams. */
/* .teams-panel .teams-conversation__composer-slot .file-upload-button,
.teams-panel .teams-conversation__composer-slot .file-attachments-container {
    display: none !important;
} */

/* ── Modal (member management — appended to body) ─────────────────────────── */
.teams-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(20, 18, 14, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: var(--tm-font-ui);
}
/* The shared agent combobox (.at-agent-body-dropdown) is appended to <body> at
 * z-index 9999 — below the Teams modal (10000), so it rendered hidden behind it.
 * Raise it above the modal so the agent list is visible inside Create/Edit forms. */
.at-agent-body-dropdown { z-index: 10050 !important; }
.teams-modal-overlay .teams-modal {
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    background: var(--tm-white);
    border-radius: var(--tm-r-lg);
    box-shadow: var(--tm-shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--tm-text-1);
}
.teams-modal-overlay .teams-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tm-border);
}
.teams-modal-overlay .teams-modal__title { margin: 0; font-size: 16px; font-weight: 600; }
.teams-modal-overlay .teams-modal__close {
    border: none; background: transparent; cursor: pointer;
    color: var(--tm-text-3); font-size: 16px;
    width: 32px; height: 32px; border-radius: var(--tm-r);
}
.teams-modal-overlay .teams-modal__close:hover { background: var(--tm-bg-alt); color: var(--tm-text-1); }
.teams-modal-overlay .teams-modal__add { padding: 14px 20px; border-bottom: 1px solid var(--tm-border); position: relative; }
.teams-modal-overlay .teams-modal__search-wrap { position: relative; }
.teams-modal-overlay .teams-modal__search-wrap i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--tm-text-3); font-size: 12px; pointer-events: none;
}
.teams-modal-overlay .teams-modal__search {
    width: 100%;
    padding: 9px 12px 9px 32px;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r);
    background: var(--tm-surface);
    font-family: var(--tm-font-ui);
    font-size: 13px;
    color: var(--tm-text-1);
    outline: none;
}
.teams-modal-overlay .teams-modal__search:focus { border-color: var(--tm-accent); box-shadow: 0 0 0 3px var(--tm-accent-subtle); }
.teams-modal-overlay .teams-modal__search-results { margin-top: 8px; max-height: 180px; overflow-y: auto; }
.teams-modal-overlay .teams-modal__search-result {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 8px 10px;
    border: 1px solid transparent; border-radius: var(--tm-r);
    background: transparent; cursor: pointer; text-align: left; font-size: 13px;
    color: var(--tm-text-1);
}
.teams-modal-overlay .teams-modal__search-result:hover { background: var(--tm-bg-alt); border-color: var(--tm-border); }
.teams-modal-overlay .teams-modal__body { padding: 8px 12px 16px; overflow-y: auto; }
/* Member rows are used by both the modal and the full-panel config, so scope
 * under both top-level containers. */
.teams-modal-overlay .teams-members-list,
.teams-panel .teams-members-list { display: flex; flex-direction: column; }

.teams-modal-overlay .teams-member-row,
.teams-panel .teams-member-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 8px;
    border-bottom: 1px solid var(--tm-border);
}
.teams-modal-overlay .teams-member-row:last-child,
.teams-panel .teams-member-row:last-child { border-bottom: none; }
.teams-modal-overlay .teams-member-name,
.teams-panel .teams-member-name {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
    font-size: 14px; font-weight: 500;
}
.teams-modal-overlay .teams-member-you,
.teams-panel .teams-member-you { font-weight: 400; color: var(--tm-text-3); font-size: 12px; }
.teams-modal-overlay .teams-member-handle,
.teams-panel .teams-member-handle { font-size: 12px; color: var(--tm-text-3); font-weight: 400; }
.teams-modal-overlay .teams-member-role,
.teams-panel .teams-member-role {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 8px; border-radius: 999px;
}
.teams-modal-overlay .teams-member-role--admin,
.teams-panel .teams-member-role--admin { background: var(--tm-accent-subtle); color: var(--tm-accent); }
.teams-modal-overlay .teams-member-role--member,
.teams-panel .teams-member-role--member { background: var(--tm-bg-alt); color: var(--tm-text-3); }
.teams-modal-overlay .teams-member-actions,
.teams-panel .teams-member-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Add-member search box also appears inside the config page. */
.teams-panel .teams-modal__search-wrap { position: relative; margin-bottom: 8px; }
.teams-panel .teams-modal__search-wrap i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--tm-text-3); font-size: 12px; pointer-events: none;
}
.teams-panel .teams-modal__search {
    width: 100%; padding: 9px 12px 9px 32px;
    border: 1px solid var(--tm-border); border-radius: var(--tm-r);
    background: var(--tm-surface); font-family: var(--tm-font-ui);
    font-size: 13px; color: var(--tm-text-1); outline: none;
}
.teams-panel .teams-modal__search:focus { border-color: var(--tm-accent); box-shadow: 0 0 0 3px var(--tm-accent-subtle); }
.teams-panel .teams-modal__search-results { margin-bottom: 10px; }
.teams-panel .teams-modal__search-result {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 8px 10px;
    border: 1px solid transparent; border-radius: var(--tm-r);
    background: transparent; cursor: pointer; text-align: left; font-size: 13px;
    color: var(--tm-text-1);
}
.teams-panel .teams-modal__search-result:hover { background: var(--tm-bg-alt); border-color: var(--tm-border); }

/* ── Participant-picker pop-over ───────────────────────────────────────────────
 * The Create-team modal and the Team-settings add box render their suggestions
 * as an absolutely-positioned pop-over anchored to the search input, so the
 * results overlay whatever sits below (chips, member list, footer) instead of
 * pushing it down as the user types. Scoped under both top-level containers. */
.teams-modal-overlay .teams-picker,
.teams-panel .teams-picker { position: relative; }

.teams-modal-overlay .teams-picker .teams-modal__search-results,
.teams-panel .teams-picker .teams-modal__search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
/* Collapse entirely when there are no suggestions so no empty box floats. */
.teams-modal-overlay .teams-picker .teams-modal__search-results:empty,
.teams-panel .teams-picker .teams-modal__search-results:empty { display: none; }

/* The Create-team modal's "Add members" is the last field, hard against the
 * modal's clipped bottom edge — open its pop-over UPWARD so it stays fully
 * visible over the Team Prompt area instead of being cut off. */
.teams-modal-overlay .teams-modal--form .teams-picker .teams-modal__search-results {
    top: auto;
    bottom: calc(100% + 6px);
}

/* The create-modal search input reuses .teams-field__input (no icon padding),
 * so reserve space for the leading user-plus icon like the settings box does. */
.teams-modal-overlay .teams-member-search { padding-left: 32px; }

/* Stacked name + team·office in a picker result row. */
.teams-modal-overlay .teams-modal__search-result-main,
.teams-panel .teams-modal__search-result-main {
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.teams-modal-overlay .teams-org-line,
.teams-panel .teams-org-line,
.teams-panel .teams-newchat__row-org,
.teams-modal-overlay .teams-newchat__row-org {
    font-size: 11px; color: var(--tm-text-3); font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Responsive / small-screen behaviour ──────────────────────────────────── */
@media (max-width: 768px) {
    .teams-panel .teams-promo { padding: 36px 18px 56px; }
    .teams-panel .teams-promo__features { grid-template-columns: minmax(0, 1fr); }
    .teams-panel .teams-promo__feature { min-height: 0; }
    .teams-panel .teams-config__danger-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .teams-modal-overlay .teams-member-actions,
    .teams-panel .teams-member-actions { flex-direction: column; }
}

/* ── New-conversation modal (teams-new-chat-modal.js) ─────────────────────── */
.teams-modal-overlay .teams-modal--newchat {
    width: 520px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.teams-modal-overlay .teams-newchat__search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin: 4px 0 10px;
    border: 1px solid var(--tm-border);
    border-radius: 8px;
    background: var(--tm-bg-alt);
    color: var(--tm-text-1);
    font-size: 14px;
}
.teams-modal-overlay .teams-newchat__search:focus {
    outline: none;
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-subtle);
}
.teams-modal-overlay .teams-newchat__selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.teams-modal-overlay .teams-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    background: var(--tm-accent-subtle);
    color: var(--tm-accent);
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 600;
}
.teams-modal-overlay .teams-chip__x {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}
.teams-modal-overlay .teams-newchat__scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 180px;
    margin: 0 -4px;
    padding: 0 4px;
}
.teams-modal-overlay .teams-newchat__section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tm-text-3);
    font-weight: 700;
    padding: 10px 4px 4px;
}
.teams-modal-overlay .teams-newchat__hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--tm-text-3);
}
.teams-modal-overlay .teams-newchat__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 8px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--tm-text-1);
}
.teams-modal-overlay .teams-newchat__row:hover { background: var(--tm-bg-alt); }
.teams-modal-overlay .teams-newchat__row[disabled] { opacity: 0.45; cursor: not-allowed; }
.teams-modal-overlay .teams-newchat__row--selected { background: var(--tm-accent-subtle); }
.teams-modal-overlay .teams-newchat__row-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.teams-modal-overlay .teams-newchat__row-label {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.teams-modal-overlay .teams-newchat__row-label mark {
    background: rgba(45, 95, 132, 0.22);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
.teams-modal-overlay .teams-newchat__row-sub { font-size: 12px; color: var(--tm-text-3); }
.teams-modal-overlay .teams-newchat__check { color: var(--tm-accent); width: 18px; text-align: center; }
.teams-modal-overlay .teams-newchat__more {
    padding: 8px 4px;
    font-size: 12px;
    color: var(--tm-text-3);
    text-align: center;
}
.teams-modal-overlay .teams-badge {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}
.teams-modal-overlay .teams-badge--team    { background: var(--tm-agent-bg); color: var(--tm-agent); }
.teams-modal-overlay .teams-badge--native  { background: rgba(45, 95, 132, 0.12); color: var(--tm-accent); }
.teams-modal-overlay .teams-badge--widget  { background: rgba(120, 120, 120, 0.15); color: var(--tm-text-2); }
.teams-modal-overlay .teams-badge--sso     { background: rgba(180, 120, 40, 0.16); color: #9a6a1a; }
.teams-modal-overlay .teams-newchat__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--tm-border);
}
.teams-modal-overlay .teams-newchat__count { font-size: 12.5px; color: var(--tm-text-3); }

/* ── Teams tab unread badge (count of chat SESSIONS with unread activity) ───── */
.header-tab[data-panel="teams"] { position: relative; }
.header-tab[data-panel="teams"] .teams-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 8px;
    background: #e5484d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* ── Composer @mention anchor (shared agent-mention-dropdown renders here) ──── */
/* The shared dropdown is component-scoped in agent-mention-dropdown.css; this
   only provides the positioning context it anchors to (bottom: 100%). */
.teams-panel .teams-conversation__composer-slot { position: relative; }

/* Lighter placeholder for the adopted chat input while in Teams (the shared
   #userInput inherits a darker main-chat placeholder colour otherwise). */
.teams-input-adopted #userInput::placeholder {
    color: var(--tm-text-3);
    opacity: 1;
}

/* ── Sent/received message enter animation (slide up from the composer) ────── */
@keyframes teams-msg-enter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.teams-panel .teams-msg--enter { animation: teams-msg-enter 0.22s ease both; }
@media (prefers-reduced-motion: reduce) {
    .teams-panel .teams-msg--enter { animation: none; }
}

/* ── "All conversations" switcher row (clears the team filter) ─────────────── */
.teams-switcher .teams-sb-team--all { margin-bottom: 4px; }
.teams-switcher .teams-avatar--all {
    background: var(--tm-accent-subtle);
    color: var(--tm-accent);
}

/* ── Self messages on the right; others (incl. AI) on the left ─────────────── */
.teams-panel .teams-msg--mine { flex-direction: row-reverse; }
.teams-panel .teams-msg--mine .teams-msg__body { align-items: flex-end; display: flex; flex-direction: column; }
.teams-panel .teams-msg--mine .teams-msg__meta { flex-direction: row-reverse; }
.teams-panel .teams-msg--mine .teams-msg__bubble { border-radius: 12px 4px 12px 12px; }
.teams-panel .teams-msg--mine .teams-avatar { display: none; } /* your own avatar is redundant */

/* ── @mention highlight inside message bubbles ────────────────────────────── */
.teams-panel .teams-mention {
    color: var(--tm-accent);
    font-weight: 600;
    background: var(--tm-accent-subtle);
    border-radius: 4px;
    padding: 0 3px;
}
.teams-panel .teams-mention--agent {
    color: var(--tm-agent);
    background: var(--tm-agent-bg);
    font-size: 0.95em;
}

/* ── Typing indicator (above the composer) ────────────────────────────────── */
.teams-panel .teams-conversation__typing {
    min-height: 18px;
    padding: 2px 20px 0;
    font-size: 12px;
    color: var(--tm-text-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.teams-panel .teams-conversation__typing:empty { display: none; }
.teams-panel .teams-typing-dots { display: inline-flex; gap: 3px; }
.teams-panel .teams-typing-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--tm-text-3);
    animation: teams-typing-bounce 1.2s infinite ease-in-out;
}
.teams-panel .teams-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.teams-panel .teams-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes teams-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Team Prompt: label row + Expand affordance ───────────────────────────── */
.teams-panel .teams-field__label-row,
.teams-modal-overlay .teams-field__label-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.teams-panel .teams-field__label-note,
.teams-modal-overlay .teams-field__label-note {
    font-weight: 400; color: var(--tm-text-3); font-size: 12px;
}
.teams-panel .teams-field__expand,
.teams-modal-overlay .teams-field__expand {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; font-size: 12px; font-weight: 600;
    font-family: var(--tm-font-ui);
    color: var(--tm-accent); background: transparent;
    border: 1px solid var(--tm-border); border-radius: var(--tm-r);
    cursor: pointer; white-space: nowrap;
}
.teams-panel .teams-field__expand:hover,
.teams-modal-overlay .teams-field__expand:hover {
    border-color: var(--tm-accent); background: var(--tm-accent-subtle);
}
.teams-panel .teams-field__expand i,
.teams-modal-overlay .teams-field__expand i { font-size: 11px; }

/* ── Team Prompt editor modal (EasyMDE) ───────────────────────────────────── */
.teams-prompt-editor-overlay .teams-prompt-editor {
    max-width: 760px; width: 100%; max-height: 86vh;
}
.teams-prompt-editor-overlay .teams-prompt-editor__body {
    display: flex; flex-direction: column; gap: 14px;
    padding: 16px 20px 18px; overflow-y: auto;
}
.teams-prompt-editor-overlay .teams-prompt-editor__guide {
    background: var(--tm-agent-bg); border: 1px solid var(--tm-agent-border);
    border-radius: var(--tm-r); padding: 12px 14px;
    font-size: 12.5px; color: var(--tm-text-2); line-height: 1.5;
}
.teams-prompt-editor-overlay .teams-prompt-editor__guide-title {
    font-weight: 700; color: var(--tm-agent); font-size: 13px; margin-bottom: 6px;
}
.teams-prompt-editor-overlay .teams-prompt-editor__guide-title i { margin-right: 5px; }
.teams-prompt-editor-overlay .teams-prompt-editor__guide-lead { margin: 0 0 8px; }
.teams-prompt-editor-overlay .teams-prompt-editor__guide-list {
    margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px;
}
.teams-prompt-editor-overlay .teams-prompt-editor__guide-warn {
    margin: 0; padding-top: 8px; border-top: 1px dashed var(--tm-agent-border);
    color: var(--tm-text-2);
}
.teams-prompt-editor-overlay .teams-prompt-editor__guide-warn i { color: var(--tm-danger); margin-right: 4px; }

.teams-prompt-editor-overlay .teams-prompt-editor__counter {
    align-self: flex-end; font-size: 12px; color: var(--tm-text-3);
}
.teams-prompt-editor-overlay .teams-prompt-editor__counter--warn { color: #b7791f; font-weight: 600; }
.teams-prompt-editor-overlay .teams-prompt-editor__counter--over { color: var(--tm-danger); font-weight: 600; }

.teams-prompt-editor-overlay .teams-prompt-editor__area--fallback {
    width: 100%; min-height: 300px; resize: vertical;
    padding: 12px 14px; line-height: 1.5;
    border: 1px solid var(--tm-border); border-radius: var(--tm-r);
    background: var(--tm-surface); color: var(--tm-text-1);
    font-family: var(--tm-font-ui); font-size: 13.5px; outline: none;
}
.teams-prompt-editor-overlay .teams-prompt-editor__area--fallback:focus {
    border-color: var(--tm-accent); box-shadow: 0 0 0 3px var(--tm-accent-subtle);
}

/* EasyMDE chrome inside the modal — constrain height + match Teams theming. */
.teams-prompt-editor-overlay .EasyMDEContainer { display: flex; flex-direction: column; }
.teams-prompt-editor-overlay .editor-toolbar {
    border-color: var(--tm-border); border-top-left-radius: var(--tm-r); border-top-right-radius: var(--tm-r);
    background: var(--tm-surface);
}
.teams-prompt-editor-overlay .editor-toolbar button { color: var(--tm-text-2) !important; }
.teams-prompt-editor-overlay .editor-toolbar button:hover,
.teams-prompt-editor-overlay .editor-toolbar button.active {
    background: var(--tm-bg-alt); border-color: var(--tm-border);
}
.teams-prompt-editor-overlay .CodeMirror {
    border-color: var(--tm-border); border-bottom-left-radius: var(--tm-r); border-bottom-right-radius: var(--tm-r);
    background: var(--tm-white); color: var(--tm-text-1);
    min-height: 260px; max-height: 46vh;
    font-family: var(--tm-font-ui); font-size: 13.5px;
}
.teams-prompt-editor-overlay .CodeMirror-cursor { border-left-color: var(--tm-text-1); }
.teams-prompt-editor-overlay .editor-preview,
.teams-prompt-editor-overlay .editor-preview-side {
    background: var(--tm-surface); color: var(--tm-text-1);
}