/* SIMON DRAWER (V2 P1, 2026-09-19) — the global slide-out opened from the top-nav 🧭.
   Mounts on <body> and reuses the board's .ds-slideout frame (body-global by design);
   everything of its own is scoped under .simon-drawer. */
.simon-drawer { width: 456px; box-sizing: border-box; max-width: 92vw; } /* Ed 2026-09-19: 20 % wider than the board's 380px slide-out */
.simon-drawer[data-width=slim] { width: 360px; }
.simon-view-settings { position: relative; margin-left: auto; }
.simon-view-settings > summary { display: grid; place-items: center; width: 30px; height: 30px; cursor: pointer; list-style: none; border-radius: 6px; }
.simon-view-settings > summary::-webkit-details-marker { display: none; }
.simon-view-menu { position: absolute; right: 0; top: 100%; z-index: 3; width: 260px; box-sizing: border-box; padding: 12px; display: grid; gap: 8px; border: 1px solid var(--emr-border); border-radius: 0; background: var(--emr-card-bg); color: var(--emr-text); box-shadow: 0 8px 24px #0003; font-size: 12px; }
.simon-view-menu [aria-pressed=true] { border-color: var(--emr-gold); background: var(--emr-bg-subtle); }
.simon-view-menu small { color: var(--emr-text-muted); line-height: 1.4; }
@media (min-width: 1000px) {
  body.simon-docked .app-body { margin-right: var(--simon-dock-width, 456px); }
  body.simon-docked .main-panel { min-width: 0; }
  body.simon-docked .simon-drawer { right: 0; max-width: none; }
}
.simon-drawer .simon-card, .simon-drawer .simon-review-card, .simon-drawer .simon-review-clarify { background: var(--emr-card-bg); color: var(--emr-text); border-color: var(--emr-border); }
.simon-drawer .simon-card :is(textarea,input), #panel-simon .simon-card :is(textarea,input), .simon-review-card textarea { background: var(--emr-bg); color: var(--emr-text); border-color: var(--emr-border); }
.simon-drawer .simon-card-why, .simon-drawer .simon-review-result { color: var(--emr-text-muted); }
.simon-drawer .ds-bx-close { background: transparent; border: none; color: var(--emr-text-dim, #94a3b8); font-size: 16px; cursor: pointer; padding: 2px 6px; }
.simon-drawer .simon-drawer-title { font-weight: 700; }
[data-emr-icon="simon"] { display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; flex:none; vertical-align:-.15em; color:inherit; }
[data-emr-icon="simon"] > svg { width:100%; height:100%; }
#topbar-simon-icon [data-emr-icon="simon"] { width:23px; height:23px; }
.simon-drawer .simon-drawer-sub { margin-left: 8px; font-size: 11px; opacity: .75; }
.simon-drawer .simon-alerts { list-style: none; margin: 0 0 8px; padding: 0; }
.simon-drawer .simon-alert { padding: 4px 6px; margin-bottom: 4px; border-radius: 0; font-size: 12px; background: rgba(255,255,255,.06); }
.simon-drawer .simon-alert-warn { background: rgba(212,160,23,.18); }
.simon-drawer .simon-alert-error { background: rgba(220,53,69,.22); }
.simon-drawer .simon-drawer-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: 6px 0; }
.simon-drawer .simon-drawer-empty { font-size: 12px; opacity: .7; padding: 6px 0; }
.simon-drawer .simon-card.simon-passing .simon-pass-box { display: block; }
.simon-drawer .simon-chat-log { max-height: 34vh; overflow: auto; margin-bottom: 6px; font-size: 12px; }
.simon-drawer .simon-chat-line { margin: 4px 0; }
.simon-drawer .simon-chat-who { font-weight: 700; margin-right: 4px; opacity: .8; }
.simon-drawer .simon-chat-simon .simon-chat-who { color: var(--emr-gold, #d4a017); }
.simon-drawer .simon-chat-meta { font-size: 10px; opacity: .6; }
.simon-drawer .simon-drawer-reply { display: flex; flex-direction: column; }
.simon-drawer .simon-chat-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-top: 6px; } /* symmetric buttons (Ed 2026-09-19) */
.simon-drawer .simon-chat-actions .ds-btn { width: 100%; text-align: center; }
.simon-drawer .simon-chat-actions .simon-ptt-state { grid-column: 1 / -1; text-align: center; }

/* V2 P6 (Ed 2026-09-19): Ed Bot lives at the top with SIMON — the bottom bubble and its speech balloon are retired,
   the panel opens under the top bar (its DOM, JS and tests are untouched: only where it sits and who opens it). */
#edbot-fab, #edbot-speech { display: none !important; }
#edbot-panel { bottom: auto !important; top: 56px !important; right: 12px !important; max-height: calc(100vh - 72px) !important; }
.simon-drawer .simon-drawer-tabs { display: inline-flex; gap: 4px; margin-left: 10px; }
.simon-drawer .simon-drawer-tab { padding: 2px 8px; font-size: 12px; }
.simon-drawer .simon-drawer-tab.on { background: var(--emr-gold, #d4a017); color: #111; border-color: var(--emr-gold, #d4a017); }

/* Shared hierarchy and interaction treatment, without changing panel layouts. */
.simon-drawer :is(button,input,textarea):focus-visible,
#panel-simon :is(button,input,textarea,select):focus-visible,
#edbot-panel :is(button,input,textarea,select,summary):focus-visible { outline:2px solid var(--emr-accent,#a78bfa); outline-offset:3px; }
.simon-drawer button:disabled,#panel-simon button:disabled,#edbot-panel button:disabled { opacity:.5; cursor:not-allowed; }
.simon-drawer .simon-chat-line { padding:8px 10px; border:1px solid var(--emr-border,#334155); border-radius:0; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.simon-drawer .simon-chat-user { background:rgba(148,163,184,.08); }
.simon-drawer .simon-chat-meta { opacity:1; color:var(--emr-text-muted,#94a3b8); line-height:1.4; margin-top:5px; }
.simon-drawer .simon-drawer-empty { opacity:1; color:var(--emr-text-muted,#94a3b8); padding:12px 0; }
#edbot-panel .edbot-tab { min-height:34px; }
#edbot-panel .edbot-bubble-bot,#edbot-panel .edbot-bubble-user { line-height:1.55; overflow-wrap:anywhere; }
#edbot-panel .edbot-work { color:var(--emr-text,#0b1220); font-size:12px; line-height:1.5; }
#edbot-panel .edbot-work-actions { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
#edbot-panel .edbot-work-card { padding:12px; margin:10px 0; border:1px solid var(--emr-border,#334155); border-radius:0; background:rgba(148,163,184,.05); }
#edbot-panel .edbot-work-card pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:200px; overflow:auto; font-size:11px; }
#edbot-panel .edbot-work-card button { display:block; margin-top:10px; }
#edbot-panel .edbot-work-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--emr-border,#334155); }
#edbot-panel .edbot-work-row small { display:block; color:var(--emr-text-muted,#94a3b8); }
#edbot-panel .edbot-work-error { color:var(--emr-status-red,#f87171); padding:8px 0; }
#edbot-panel .edbot-work [aria-pressed=true] { border-color:var(--emr-accent,#a78bfa); background:rgba(167,139,250,.12); }
@media (prefers-reduced-motion: reduce) { #edbot-panel *, .simon-drawer *, #panel-simon * { animation:none !important; transition:none !important; } }
.simon-premium-badge { display:inline-flex; padding:2px 6px; margin-left:6px; border:1px solid rgba(212,160,23,.45); border-radius:0; background:rgba(212,160,23,.1); color:var(--emr-gold,#d4a017); font-size:10px; font-weight:700; white-space:nowrap; }
#topbar-simon-icon { position:relative; }
.simon-live-count { position:absolute; top:-4px; right:-6px; min-width:16px; padding:1px 4px; border-radius:0; background:var(--emr-gold,#d4a017); color:#111827; font-size:10px; font-weight:800; text-align:center; }
.ds-simon-change { display:inline-flex; margin-left:4px; border-radius:0; padding:1px 4px; color:var(--emr-status-blue,#60a5fa); border:1px solid currentColor; font-size:10px; font-weight:600; }
/* Internal work remains legible inside Ed Bot's existing dark frame in either theme. */
#edbot-panel .edbot-work { padding:10px; background:var(--emr-bg); border-radius:0; }
#edbot-panel .edbot-work-card { color:var(--emr-text); background:var(--emr-card-bg); border-color:var(--emr-card-border); }

.simon-drawer .ds-slideout-head { flex-wrap: wrap; gap: 6px; }
.simon-drawer .simon-drawer-sub { order: 5; width: 100%; margin: 0; }
.simon-drawer .simon-drawer-sub:empty { display: none; }
.simon-drawer .simon-drawer-title, .simon-drawer .simon-drawer-tabs { flex-shrink: 0; }
.simon-drawer .simon-shortcuts { flex-shrink: 0; padding: 4px; margin: 0; gap: 0; }
.simon-drawer .simon-shortcuts button { padding: 7px 9px; }
.simon-view-settings > summary:focus-visible { outline:2px solid var(--emr-accent); outline-offset:2px; }

/* Keep response correction controls compact and readable on all chat surfaces. */
.simon-answer-feedback { margin-top:6px; font-size:12px; }
.simon-answer-feedback summary { cursor:pointer; color:var(--emr-text-muted); }
.simon-answer-feedback textarea { display:block; width:100%; box-sizing:border-box; margin:6px 0; padding:8px; border:1px solid var(--emr-border); border-radius:0; background:var(--emr-bg); color:var(--emr-text); }
/* SIMON multiple choice (Ed 2026-09-23): answer buttons under SIMON's question. */
.simon-drawer .simon-choices { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.simon-drawer .simon-choice { font-size:11.5px; padding:4px 9px; white-space:normal; text-align:left; }
.simon-drawer .simon-choice[aria-pressed="true"] { border-color:var(--emr-accent,#3b82f6); }

/* SIMON IMPORTANT DECISIONS (Ed 2026-10-05: pay blockers "pop up and blink" until acknowledged; simonImportant.js).
 * The dock icon blinks while anything is unacknowledged; under reduced motion it holds a solid outline instead. The
 * panel is non-modal: fixed in a corner, never covers the page centre, never takes focus. Skin B tokens. */
@keyframes simon-attn-blink { 0%, 100% { box-shadow: 0 0 0 2px var(--ink-bad, #c62828); } 50% { box-shadow: 0 0 0 2px transparent; } }
#topbar-simon-icon.simon-attn { animation: simon-attn-blink 1.1s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { #topbar-simon-icon.simon-attn { animation: none !important; box-shadow: 0 0 0 2px var(--ink-bad, #c62828); } }
.simon-important-count { position:absolute; top:-4px; left:-6px; min-width:16px; padding:1px 4px; border-radius:0; background:var(--ink-bad, #c62828); color:var(--bg, #fff); font-size:10px; font-weight:800; text-align:center; line-height:14px; }
/* Bottom-LEFT: the bottom-right corner belongs to Ed Bot (#edbot-fab / speech / panel, z 10000–10001); above them so a
 * phone never hides a pay blocker behind the round button; below the broker reply cards (10060). */
.simon-important { position:fixed; left:16px; bottom:16px; z-index:10002; width:min(380px, calc(100vw - 32px)); max-height:min(70vh, 560px); overflow:auto; background:var(--bg, #fff); color:var(--text, #111); border:1px solid var(--border2, #999); border-left:4px solid var(--ink-bad, #c62828); box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:12.5px; }
.simon-important.is-hidden { width:auto; max-height:none; border:0; background:transparent; box-shadow:none; overflow:visible; }
.simon-imp-head { display:flex; align-items:baseline; gap:8px; padding:8px 10px 6px; border-bottom:1px solid var(--border, #ddd); }
.simon-imp-head b { color:var(--ink-bad, #c62828); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.simon-imp-head span { color:var(--text2, #444); font-size:12px; }
.simon-imp-x { margin-left:auto; min-width:24px; min-height:24px; background:transparent; border:0; color:var(--text2, #444); font-size:16px; line-height:1; cursor:pointer; }
.simon-imp-list { list-style:none; margin:0; padding:0; }
.simon-imp-item { padding:8px 10px; border-bottom:1px solid var(--border, #ddd); display:grid; gap:4px; }
.simon-imp-title { font-weight:700; color:var(--text, #111); }
.simon-imp-when { font-weight:400; color:var(--text2, #444); font-size:11px; }
.simon-imp-reason { margin:0; color:var(--text, #111); line-height:1.4; }
.simon-imp-actions { display:flex; gap:6px; flex-wrap:wrap; }
.simon-imp-more { display:block; width:100%; min-height:28px; background:var(--bg2, #f4f4f4); color:var(--text, #111); border:0; border-top:1px solid var(--border, #ddd); font-weight:700; cursor:pointer; }
.simon-imp-notice { margin:0; padding:6px 10px; color:var(--text2, #444); font-size:11.5px; }
.simon-imp-chip { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px; background:var(--bg, #fff); color:var(--text, #111); border:1px solid var(--ink-bad, #c62828); font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.simon-imp-dot { width:8px; height:8px; background:var(--ink-bad, #c62828); }
#panel-simon .simon-ap-decision.is-important { border-left:4px solid var(--ink-bad, #c62828); }
#panel-simon .simon-ap-decision.is-important.is-acked { border-left-color:var(--border2, #999); }
#panel-simon .simon-ap-important { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px; }
#panel-simon .simon-ap-imp-label { display:inline-block; padding:1px 6px; border:1px solid var(--ink-bad, #c62828); color:var(--ink-bad, #c62828); font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
#panel-simon .simon-ap-acked { color:var(--text2, #444); font-size:11.5px; }
/* The panel lives outside the panels that style .run-btn, so its two buttons carry their own Skin B look (24 px target). */
.simon-imp-actions .run-btn { min-height:24px; padding:0 10px; border:1px solid var(--text, #111); border-radius:0; background:var(--text, #111); color:var(--bg, #fff); font:inherit; font-size:11.5px; font-weight:700; line-height:22px; cursor:pointer; }
.simon-imp-actions .run-btn.secondary { background:var(--bg, #fff); color:var(--text, #111); }
.simon-imp-actions .run-btn:disabled { opacity:.6; cursor:default; }
.simon-imp-actions .run-btn:focus-visible, .simon-imp-more:focus-visible, .simon-imp-x:focus-visible, .simon-imp-chip:focus-visible { outline:2px solid var(--ink-info, #1d4ed8); outline-offset:1px; }
