/* Shared by sim/manager.php and sim/client.php. Materialize is loaded too, so
   form controls here reset the bits of it that get in the way. */
:root {
    --sim-ink: #263238; --sim-muted: #607d8b; --sim-line: #dfe5ea; --sim-bg: #f4f6f8;
    --sim-accent: #1565c0; --sim-accent-tint: #e3f2fd; --sim-ok: #2e7d32; --sim-ok-tint: #e8f5e9;
    --sim-agent: #6a1b9a; --sim-agent-tint: #f3e5f5;
}
body { background: var(--sim-bg); color: var(--sim-ink); font-family: Poppins, system-ui, sans-serif; }
[v-cloak] { display: none; }
.sim-page { padding: 12px 16px 32px; max-width: 1600px; margin: 0 auto; }

/* Header */
.sim-head { background: #fff; border: 1px solid var(--sim-line); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px;
            display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: start; }
.sim-head h1 { font-size: 1.4rem; font-weight: 600; margin: 0; }
.sim-head .sim-desc { color: var(--sim-muted); white-space: pre-wrap; margin-top: 2px; }
.sim-head .sim-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sim-url { display: inline-flex; align-items: center; gap: 6px; background: var(--sim-accent-tint); color: var(--sim-accent);
           border-radius: 16px; padding: 3px 10px; font-size: 0.9rem; font-family: ui-monospace, Menlo, monospace; }
.sim-url i { font-size: 16px; cursor: pointer; }
.sim-head input.sim-title-input { font-size: 1.3rem; font-weight: 600; height: auto; margin: 0 0 4px; }
.sim-head textarea { min-height: 54px; }

/* Three columns */
.sim-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
/* Student and demo views: Objective and Shared Resources 2/5 each, Participants 1/5 */
.sim-page.fill > .sim-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .sim-cols, .sim-page.fill > .sim-cols { grid-template-columns: 1fr; } .sim-head { grid-template-columns: 1fr; } }
.sim-col { background: #fff; border: 1px solid var(--sim-line); border-radius: 8px; display: flex; flex-direction: column; min-width: 0; }
.sim-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--sim-line); font-weight: 600; }
.sim-col-head.wrap { flex-wrap: wrap; row-gap: 2px; }
/* A second line under the title (the model badge in Participants), lined up with the icon */
.sim-col-head .sim-col-sub { flex-basis: 100%; }
.sim-col-head > i { color: var(--sim-accent); }
.sim-col-head .sim-spacer { flex: 1; }
.sim-col-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sim-col.scroll .sim-col-body { max-height: 46vh; overflow: auto; }
/* Full height: stretches to the height of its row, with its body (and a submission box in it) taking the slack */
.sim-col.full { align-self: stretch; }
.sim-col.full .sim-col-body { flex: 1; }
.sim-col.full .sim-draft { flex: 1; }
.sim-col.full .sim-draft-text { flex: 1; }
/* ── User status bar: the same strip as the top of agentbox.php / evalbox.php ── */
.user-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 14px;
            background: #f8f9fa; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; position: relative; }
.box-badge { display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px 3px 8px; color: white; background-color: #3949ab;
             border-radius: 4px; font-size: 0.95rem; font-weight: 600; }
.box-badge .material-icons { font-size: 19px; }
.user-bar .user-mid { position: absolute; left: 50%; transform: translateX(-50%); }
.user-bar .user-email { font-size: 0.8em; color: #555; }
.user-bar .user-guest { font-size: 0.8em; color: #e65100; font-weight: bold; }
.user-bar .user-right { display: flex; align-items: center; gap: 10px; }
.user-bar .user-logout { padding: 2px 10px; background: #ff9800; color: white; border-radius: 4px; font-size: 0.85em; font-weight: bold; }
@media (max-width: 600px) { .user-bar .user-mid { display: none; } }

/* Student view on a wide screen: the page is the height of the window, the columns
   fill what the header leaves, the full ones reach the bottom, and each scrolls inside */
@media (min-width: 1001px) {
    .sim-page.fill { height: 100vh; display: flex; flex-direction: column; padding-bottom: 16px; }
    /* With the user bar on top, the page fills what the bar leaves */
    body.sim-shell { height: 100vh; display: flex; flex-direction: column; }
    body.sim-shell > .sim-page.fill { flex: 1 1 0; min-height: 0; height: auto; width: 100%; }
    .sim-page.fill > * { flex: none; }
    .sim-page.fill > .sim-cols { flex: 1 1 0; min-height: 420px; grid-template-rows: minmax(0, 1fr); }
    .sim-page.fill .sim-col { max-height: 100%; }
    .sim-page.fill .sim-col.full { height: 100%; }
    .sim-page.fill .sim-col-body { min-height: 0; overflow: auto; }
    .sim-page.fill .sim-col.scroll .sim-col-body { max-height: none; }
}

/* Cards (resources, agents) */
.sim-card { border: 1px solid var(--sim-line); border-radius: 6px; background: #fafbfc; }
.sim-card-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.sim-card-head .k-ic { color: var(--sim-accent); }
.sim-card-head .ag-ic { color: var(--sim-agent); }
.sim-card-head .t { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-card-head .sub { color: var(--sim-muted); font-size: 0.82rem; font-weight: 400; }
.sim-card-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--sim-line); }
.sim-card.judge { border-color: #f9a825; }
.sim-pill { font-size: 0.72rem; border-radius: 10px; padding: 1px 8px; background: #eceff1; color: var(--sim-muted); white-space: nowrap; }
.sim-pill.judge { background: #fff8e1; color: #8d6e00; }
.sim-pill.hidden { background: #fbe9e7; color: #bf360c; }
.sim-pill.team { background: var(--sim-accent-tint); color: var(--sim-accent); }

/* Plain form controls (Materialize's underline inputs are too heavy here) */
.sim-field { display: flex; flex-direction: column; gap: 3px; }
.sim-field > label { font-size: 0.78rem; color: var(--sim-muted); font-weight: 500; }
.sim-page input.sim-in, .sim-page textarea.sim-in, .sim-page select.sim-in {
    border: 1px solid #cfd8dc; border-radius: 4px; padding: 5px 8px; height: auto; margin: 0; box-sizing: border-box;
    font: inherit; font-size: 0.92rem; background: #fff; width: 100%; box-shadow: none; display: block; }
.sim-page textarea.sim-in { resize: vertical; min-height: 70px; line-height: 1.4; }
.sim-page input.sim-in:focus, .sim-page textarea.sim-in:focus { border-color: var(--sim-accent); box-shadow: 0 0 0 2px var(--sim-accent-tint); }
.sim-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sim-row > .grow { flex: 1; min-width: 120px; }
.sim-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; cursor: pointer; }
.sim-check input { position: static !important; opacity: 1 !important; pointer-events: auto !important; width: 16px; height: 16px; margin: 0; }
.sim-hint { color: var(--sim-muted); font-size: 0.8rem; }

/* Buttons */
.sim-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cfd8dc; background: #fff; color: var(--sim-ink);
           border-radius: 4px; padding: 4px 10px; font: inherit; font-size: 0.85rem; cursor: pointer; line-height: 1.6; white-space: nowrap; }
.sim-btn:hover { background: #f1f4f6; }
.sim-btn i { font-size: 18px; }
.sim-btn.primary { background: var(--sim-accent); border-color: var(--sim-accent); color: #fff; }
.sim-btn.primary:hover { background: #0d47a1; }
.sim-btn.danger { color: #c62828; }
.sim-btn.icon { padding: 2px 5px; border-color: transparent; background: none; }
.sim-btn:disabled { opacity: 0.5; cursor: default; }
.sim-menu-wrap { position: relative; }
.sim-menu { position: absolute; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid var(--sim-line); border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,.12); min-width: 170px; padding: 4px 0; }
.sim-menu a { display: flex; gap: 8px; align-items: center; padding: 6px 12px; color: var(--sim-ink); cursor: pointer; }
.sim-menu a:hover { background: #f1f4f6; }
.sim-menu a i { color: var(--sim-accent); font-size: 18px; }
.sim-menu { max-height: 70vh; overflow: auto; min-width: 320px; }
.sim-menu a span small { display: block; color: var(--sim-muted); font-size: 0.75rem; line-height: 1.2; }
.sim-menu-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--sim-muted); font-weight: 600; padding: 8px 12px 2px; border-top: 1px solid var(--sim-line); margin-top: 4px; }

/* Records inside a resource */
.sim-record { border-left: 3px solid var(--sim-accent-tint); padding-left: 8px; display: flex; flex-direction: column; gap: 4px; }
.sim-record-view { white-space: pre-wrap; font-size: 0.88rem; background: #fff; border: 1px solid var(--sim-line); border-radius: 4px; padding: 6px 8px; max-height: 260px; overflow: auto; }
.sim-record-title { font-weight: 600; font-size: 0.88rem; display: flex; align-items: center; gap: 6px; }

/* Status banners */
.sim-banner { border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
.sim-banner.ok { background: var(--sim-ok-tint); color: var(--sim-ok); border: 1px solid #a5d6a7; }
.sim-banner.warn { background: #fff8e1; color: #6d4c00; border: 1px solid #ffe082; }
.sim-banner i { font-size: 28px; }
.sim-banner.start { background: #fff3e0; color: #4e2600; border: 1px solid #ffb74d; width: 100%; text-align: left;
                    font: inherit; cursor: pointer; }
.sim-banner.start:hover { background: #ffe0b2; }
.sim-banner.start:focus-visible { outline: 2px solid #e65100; outline-offset: 2px; }
.sim-banner.start > .material-icons { color: #e65100; }
.sim-banner.compact { font-size: 0.85rem; padding: 6px 10px; margin: 8px 0 0; gap: 8px; cursor: default; }
.sim-banner.compact i { font-size: 20px; }
.sim-banner.compact:hover { background: #fff3e0; }

/* Lists / tables */
.sim-table { width: 100%; border-collapse: collapse; background: #fff; }
.sim-table th, .sim-table td { padding: 8px 10px; border-bottom: 1px solid var(--sim-line); text-align: left; font-size: 0.92rem; }
.sim-table th { background: #eef2f5; font-weight: 600; }
.sim-table tr.click { cursor: pointer; }
.sim-table tr.click:hover td { background: #f7f9fb; }
.sim-code { font-family: ui-monospace, Menlo, monospace; font-weight: 600; letter-spacing: 1px; }
.sim-tabs { display: flex; gap: 4px; margin: 0 0 10px; }
.sim-tabs button { border: 1px solid var(--sim-line); background: #fff; border-radius: 16px; padding: 4px 14px; cursor: pointer; font: inherit; font-size: 0.9rem; }
.sim-tabs button.on { background: var(--sim-accent); border-color: var(--sim-accent); color: #fff; }

/* People list (client column 3, monitor) */
.sim-person { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.sim-person .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sim-accent-tint); color: var(--sim-accent); font-weight: 600; font-size: 0.8rem; flex-shrink: 0; }
.sim-person .av.agent { background: var(--sim-agent-tint); color: var(--sim-agent); }
.sim-person .who { flex: 1; min-width: 0; }
.sim-person .who div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-person .who .addr { color: var(--sim-muted); font-size: 0.8rem; }
/* Student and demo views: the narrow Participants column wraps the role and email instead of cutting them off */
.sim-page.fill .sim-person .who .addr { white-space: normal; overflow-wrap: anywhere; }
.sim-group-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .5px; color: var(--sim-muted); margin-top: 6px; font-weight: 600; }

/* ── <sim-mail> ─────────────────────────────────────────────────────────── */
.sm { background: #fff; border: 1px solid var(--sim-line); border-radius: 8px; display: flex; flex-direction: column; height: 560px; min-height: 360px; resize: vertical; overflow: hidden; }
.sm-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--sim-line); flex-wrap: wrap; }
.sm-folders { display: flex; gap: 4px; }
.sm-folders button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; font: inherit; font-size: 0.9rem; color: var(--sim-ink); }
.sm-folders button i { font-size: 18px; }
.sm-folders button.on { background: var(--sim-accent-tint); color: var(--sim-accent); font-weight: 600; }
.sm-badge { background: #d32f2f; color: #fff; border-radius: 9px; font-size: 0.72rem; padding: 0 6px; font-weight: 600; }
.sm-me { margin-left: auto; color: var(--sim-muted); font-size: 0.82rem; }
.sm-count { color: var(--sim-muted); font-size: 0.9rem; }
.sm-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cfd8dc; background: #fff; color: var(--sim-ink); border-radius: 4px; padding: 4px 12px; font: inherit; font-size: 0.88rem; cursor: pointer; }
.sm-btn i { font-size: 18px; }
.sm-btn:hover { background: #f1f4f6; }
.sm-btn.sm-primary { background: var(--sim-accent); color: #fff; border-color: var(--sim-accent); }
.sm-btn.sm-primary:hover { background: #0d47a1; }
.sm-btn:disabled { opacity: .6; cursor: default; }
.sm-main { flex: 1; display: grid; grid-template-columns: minmax(220px, 34%) 1fr; min-height: 0; }
.sm-list { border-right: 1px solid var(--sim-line); overflow: auto; }
.sm-item { padding: 8px 12px; border-bottom: 1px solid #eef1f3; cursor: pointer; }
.sm-item:hover { background: #f7f9fb; }
.sm-item.open { background: var(--sim-accent-tint); }
.sm-item.unread .sm-who, .sm-item.unread .sm-subj { font-weight: 700; }
.sm-item.unread { box-shadow: inset 3px 0 0 var(--sim-accent); }
.sm-item-top { display: flex; gap: 6px; font-size: 0.88rem; }
.sm-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.sm-agent-ic { font-size: 15px; color: var(--sim-agent); }
.sm-when { color: var(--sim-muted); font-size: 0.78rem; white-space: nowrap; }
.sm-subj { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-snip { color: var(--sim-muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-pane { overflow: auto; min-width: 0; display: flex; flex-direction: column; }
.sm-empty { color: var(--sim-muted); padding: 16px; font-style: italic; }
.sm-pane-empty { margin: auto; text-align: center; }
.sm-read { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.sm-read-head h3 { font-size: 1.15rem; margin: 0 0 6px; font-weight: 600; }
.sm-meta { color: var(--sim-muted); font-size: 0.82rem; }
.sm-read-body { white-space: pre-wrap; line-height: 1.5; font-size: 0.94rem; }
.sm-read-foot { display: flex; gap: 6px; border-top: 1px solid var(--sim-line); padding-top: 10px; }
.sm-judgement { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 0.85rem; background: #fff8e1; color: #6d4c00; border-radius: 4px; padding: 4px 8px; }
.sm-judgement.met { background: var(--sim-ok-tint); color: var(--sim-ok); }
.sm-judgement i { font-size: 18px; }
.sm-compose { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; flex: 1; min-height: 0; }
.sm-field { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--sim-line); padding: 2px 0; }
.sm-field > label { width: 56px; color: var(--sim-muted); font-size: 0.85rem; flex-shrink: 0; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; }
.sm .sm-field input { border: 0 !important; box-shadow: none !important; margin: 0 !important; height: 30px !important; font: inherit; font-size: 0.92rem; flex: 1; min-width: 140px; outline: none; }
.sm-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--sim-accent-tint); color: var(--sim-accent); border-radius: 12px; padding: 1px 4px 1px 10px; font-size: 0.85rem; }
.sm-chip i { font-size: 15px; cursor: pointer; }
.sm-body-input { flex: 1; min-height: 160px; border: 1px solid var(--sim-line); border-radius: 4px; padding: 8px; font: inherit; font-size: 0.94rem; resize: none; line-height: 1.45; }
.sm-body-input:focus { outline: none; border-color: var(--sim-accent); }
.sm-compose-foot { display: flex; gap: 6px; align-items: center; }
.sm-error { flex: 1; color: #c62828; font-size: 0.85rem; }
@media (max-width: 700px) { .sm-main { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; } .sm-list { border-right: 0; border-bottom: 1px solid var(--sim-line); } }

/* ── Student client: Email button and its drop-down window (as in agentbox.php) ── */
.mail-wrap { position: relative; }
/* The new-email notice: its own row at the end of the header actions, right-aligned under the Email button */
.mail-start-row { flex-basis: 100%; display: flex; justify-content: flex-end; }
.mail-start.sim-banner { margin: 0; width: auto; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); animation: mail-start-pulse 2s ease-in-out infinite; }
@keyframes mail-start-pulse { 50% { border-color: #e65100; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(230, 81, 0, 0.18); } }
@media (prefers-reduced-motion: reduce) { .mail-start.sim-banner { animation: none; } }
.mail-toggle { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cfd8dc; border-radius: 6px; background: #fff;
               color: #546e7a; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; padding: 4px 12px; line-height: 1.6; }
.mail-toggle .material-icons { font-size: 18px; color: #e65100; }
.mail-toggle:hover { background: #fff3e0; }
.mail-toggle.is-open { background: #e65100; border-color: #e65100; color: #fff; }
.mail-toggle.is-open .material-icons { color: #fff; }
.mail-toggle-unread { min-width: 16px; padding: 0 4px; border-radius: 9px; text-align: center; background: #c62828; color: #fff; font-size: 0.68rem; line-height: 16px; }
.mail-toggle .mail-waiting { font-size: 16px; animation: sim-pulse 1.4s ease-in-out infinite; }
.mail-toggle.flash { animation: sim-flash 0.9s ease 2; }
@keyframes sim-flash { 50% { background: #ffe0b2; box-shadow: 0 0 0 4px #ffe0b2; } }
/* Toasts go bottom right: Materialize puts them top right on a wide screen, over the Email button */
#toast-container { top: auto !important; bottom: 16px; right: 16px; left: auto; max-width: min(420px, calc(100vw - 32px)); }
@media (max-width: 600px) { #toast-container { left: 16px; min-width: 0; max-width: none; } }
@keyframes sim-pulse { 50% { opacity: 0.35; } }
.mail-window { position: absolute; top: calc(100% + 8px); right: 0; z-index: 950; width: min(1000px, calc(100vw - 32px));
               border: 2px solid #e65100; border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); background: #fff; text-align: left; }
.mail-window .sm-toolbar { cursor: move; touch-action: none; }
.mail-window .sm-toolbar button { cursor: pointer; }
.mail-window.dragging { user-select: none; }
.sm-compose.nudge { animation: sm-nudge 0.4s ease; }
@keyframes sm-nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .sm-compose.nudge { animation: none; } }
.mail-window .sm { height: min(720px, calc(100vh - 140px)); resize: none; border: 0; }
.mail-window-note { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.82rem; color: #6d4c00;
                    background: #fff8e1; border-bottom: 1px solid #ffe082; border-radius: 8px 8px 0 0; }
.mail-window-note i { font-size: 16px; }
@media (max-width: 700px) { .mail-wrap { position: static; } .mail-start.sim-banner { white-space: normal; } .mail-window { left: 16px; right: 16px; width: auto; top: 70px; position: fixed; } }

/* The objective itself, boxed so it stands out from the notes around it */
.sim-objective-text { white-space: pre-wrap; border: 1px solid #90caf9; border-left: 4px solid var(--sim-accent); border-radius: 6px;
                      background: var(--sim-accent-tint); padding: 8px 12px; }

/* The submission editor in the Objective panel */
.sim-draft { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--sim-line); padding-top: 10px; }
.sim-page textarea.sim-in.sim-draft-text { min-height: 300px; font-size: 0.95rem; line-height: 1.5;
                                          border: 1px solid #90caf9; border-left: 4px solid var(--sim-accent); border-radius: 6px; }
.sim-page textarea.sim-in.sim-draft-text:focus { border-color: var(--sim-accent); }

/* Contact suggestions under To / Cc (drawn by <sim-mail>, see acList) */
.sm-field { position: relative; }
.sm-ac { position: absolute; left: 56px; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid var(--sim-line);
         border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 4px 0; max-height: 280px; overflow: auto; }
.sm-ac-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.88rem; }
.sm-ac-item.on { background: var(--sim-accent-tint); }
.sm-ac-item i { font-size: 18px; color: var(--sim-muted); }
.sm-ac-name { font-weight: 600; white-space: nowrap; }
.sm-ac-sub { color: var(--sim-muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* An agent the student is waiting on: pulsing border in Participants, and a note under the judge button */
.sim-person { border: 2px solid transparent; border-radius: 8px; padding: 4px 6px; margin: 0 -8px; }
.sim-person.waiting { border-color: #e65100; animation: sim-await 1.6s ease-in-out infinite; }
@keyframes sim-await { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.45); border-color: #e65100; }
                       50% { box-shadow: 0 0 0 6px rgba(230, 81, 0, 0); border-color: #ffb74d; } }
.sim-pill.awaiting { background: #fff3e0; color: #e65100; }
.sim-awaiting { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #e65100; }
.sim-awaiting i { font-size: 18px; animation: sim-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sim-person.waiting, .sim-awaiting i, .mail-toggle .mail-waiting { animation: none; } }

/* Close (×) in the mail toolbar */
.sm-close { border: 0; background: none; cursor: pointer; color: var(--sim-muted); width: 32px; height: 32px; border-radius: 50%;
            display: inline-grid; place-items: center; margin-left: 4px; padding: 0; }
.sm-close:hover, .sm-close:focus-visible { background: #eceff1; color: var(--sim-ink); }
.sm-close i { font-size: 20px; }

/* To / Cc participants dropdown */
.sm-chips { cursor: text; }
.sm-drop { border: 0; background: none; cursor: pointer; color: var(--sim-muted); padding: 0 2px; height: 30px; border-radius: 4px; display: grid; place-items: center; }
.sm-drop:hover, .sm-drop.on { background: var(--sim-accent-tint); color: var(--sim-accent); }
.sm-ac { max-height: 340px; }
.sm-ac-group { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--sim-muted); font-weight: 600; padding: 8px 12px 2px; }
.sm-ac-item .sm-ac-check { color: var(--sim-muted); }
.sm-ac-item.chosen .sm-ac-check { color: var(--sim-accent); }
.sm-ac-item.chosen .sm-ac-name { color: var(--sim-accent); }
.sm-ac-empty { padding: 8px 12px; color: var(--sim-muted); font-style: italic; font-size: 0.85rem; }
.sm-ac-foot { position: sticky; bottom: -4px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
              padding: 6px 12px; margin-top: 4px; border-top: 1px solid var(--sim-line); background: #fff; font-size: 0.8rem; color: var(--sim-muted); }
.sm-ac-foot .sm-btn { padding: 2px 12px; }