/* Room for conversations in both appearances and both color themes. */
#messages [hidden] { display: none !important; }
html[data-messages-active="true"] .main-content { padding: 12px; }
html[data-messages-active="true"] .container { max-width: none; }
html[data-messages-active="true"] .container > .stats { display: none; }
html[data-messages-active="true"] .main-header { min-height: 60px; padding: 10px 18px; align-items: center; }
html[data-messages-active="true"] .main-header-title p { display: none; }
html[data-messages-active="true"] #apActivityToggle { display: none; }
/* Messages is where the height goes (founder, 2026-09-28: "in messages all
   these banners are taking so much space"). Setup/guide launchers stay on
   every other tab; Messages keeps its own "How replies work". LIVE/DEMO stays,
   and Always skip waits stays visible whenever it is ON. The posting
   allowance is posting guidance: Queue, All Vehicles and every other tab
   still show it; the sign-in, posting-window and recovery banners do show here. */
html[data-messages-active="true"] :is(#easySetupLaunch, #apGuideLaunch) { display: none; }
html[data-messages-active="true"] #alwaysSkipWaitsBtn:not(.posting-timer-policy-toggle--on) { display: none; }
html[data-messages-active="true"] #postingAllowanceBanner { display: none !important; }
html[data-messages-expanded="true"] .app-shell > .app-sidebar,
html[data-messages-expanded="true"] .main-header { display: none; }
#messages.tab-content.active { height: var(--messages-height, calc(100dvh - 96px)); min-height: 420px; gap: 8px; }
#messages .messages-command { flex: 0 0 auto; margin: 0; padding: 10px 16px; }
/* "Who's replying?" is one row. Beats the Refined 16/18px card padding. */
html[data-appearance] #messages .messages-command { padding: 8px 12px; }
#messages .messages-command-head { align-items: center; gap: 6px 12px; }
/* Still the section's accessible name (aria-labelledby), no longer a line. */
#messages .messages-command-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#messages .messages-command > .messages-command-head > div:first-child { flex: 1 1 240px; min-width: 0; }
#messages .messages-command > .messages-command-head .messages-command-sub { display: none; }
.messages-workspace-controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
#messages .messages-workspace-controls > .btn { min-height: 34px; }
.messages-workspace-controls svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#messagesExpandToggle { min-width: 34px; padding: 5px 8px; justify-content: center; }
#messages .reply-mode-explainer { position: relative; margin: 0; }
.reply-mode-explainer > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-0); color: var(--text-muted); cursor: pointer; }
.reply-mode-explainer > summary::-webkit-details-marker { display: none; }
.reply-mode-explainer[open] > summary { color: var(--brand-500); border-color: var(--brand-500); }
.reply-mode-explainer-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(420px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-0); box-shadow: var(--shadow-md); color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.reply-mode-explainer-body p { margin: 0; }
.reply-mode-explainer-body p + p { margin-top: 8px; }
/* One-line status: a routine detail is clipped (hover shows it in full); a
   state that needs the dealer — attention, unavailable, checking — wraps. */
#messages .reply-overview { flex-wrap: nowrap; min-width: 0; }
#messages #replyOverviewTitle { flex: none; white-space: nowrap; }
#messages .messages-command:not([data-reply-state="attention"]):not([data-reply-state="unavailable"]):not([data-reply-state="checking"]) #replyOverviewDetail { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#messages .messages-command:is([data-reply-state="attention"], [data-reply-state="unavailable"], [data-reply-state="checking"]) .reply-overview { flex-wrap: wrap; }
#messagesReplyModes { display:inline-flex; align-items:center; gap:3px; padding:3px 5px; border:1px solid var(--border); border-radius:10px; background:var(--surface-0); }
.messages-reply-mode-label { padding:0 5px; font-size:12px; font-weight:600; color:var(--text-muted); }
#messagesReplyModes button { min-height:34px; padding:6px 12px; border:1px solid transparent; background:transparent; box-shadow:none; color:var(--text-muted); }
#messagesReplyModes button[aria-pressed="true"] { color:var(--brand-500); background:var(--brand-glow-soft); border-color:var(--brand-500); }
#messagesReplyModes button:hover { color:var(--text); border-color:var(--border); }
#messagesReplySetupBackdrop { position:fixed; inset:0; z-index:1050; display:grid; place-items:center; padding:24px; background:rgba(8,20,32,.55); overscroll-behavior:contain; }
#messagesSetupLiveStatus { border:1px solid var(--border); border-left:3px solid var(--brand-500); background:var(--surface-1); border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.5; margin:0 0 18px; }
#messagesSetupLiveStatus[data-state="checking"], #messagesSetupLiveStatus[data-state="unavailable"], #messagesSetupLiveStatus[data-state="attention"] { border-left-color:var(--warning); }
#messagesPane-off p { color:var(--text-muted); line-height:1.6; max-width:65ch; }
.messages-off-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.reply-overview { display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; font-size:13px; }
#replyOverviewDetail { color:var(--text-muted); font-size:12px; line-height:1.45; }
#replyOverviewBadge { width:8px; height:8px; border-radius:50%; background:var(--text-muted); flex:none; font-size:0; }
#replyOverviewBadge[data-state="ai"], #replyOverviewBadge[data-state="first_reply"] { background:var(--brand-500); }
#replyOverviewBadge[data-state="attention"], #replyOverviewBadge[data-state="unavailable"] { background:var(--warning); }
#chatConnectionWarning { margin-top:10px; padding:8px 10px; border-left:3px solid var(--danger); background:var(--danger-bg); color:var(--text); font-size:12px; line-height:1.45; }
#messagesSettingsToggle { background:var(--brand-glow-soft); color:var(--brand-500); border-color:var(--brand-500); min-height:34px; }
#messagesQuickControls { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#messagesQuickControls button { display:inline-flex; gap:8px; align-items:center; min-height:34px; }
#messagesQuickControls button::before { content:''; width:28px; height:16px; border-radius:10px; background:radial-gradient(circle at 8px 8px,#fff 5px,transparent 6px),#718391; }
#messagesQuickControls [aria-checked="true"] { border-color:var(--brand-500); background:var(--brand-glow-soft); color:var(--brand-500); }
#messagesQuickControls [aria-checked="true"]::before { background:radial-gradient(circle at 20px 8px,#fff 5px,transparent 6px),var(--brand-500); }
#messagesQuickControls :disabled { opacity:.65; cursor:wait; }
#messagesQuickNote { color:var(--text-muted); font-size:12px; line-height:1.55; margin:0; }
#messagesNeedsHelp { font-size:12px; min-height:34px; }
#messagesNeedsHelp[data-attention="true"], #messages .chat-row-state[data-needs-help="true"] { color:#85500f; background:#fff0d4; border:1px solid #e9bf81; border-radius:7px; padding:4px 8px; font-weight:600; }
#messagesNeedsHelp[aria-pressed="true"] { outline:2px solid var(--brand-500); outline-offset:2px; }
.messages-view-tabs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:8px 0 0; }
.messages-view-tabs button { display:flex; align-items:flex-start; flex-direction:column; text-align:left; white-space:normal; overflow-wrap:anywhere; min-width:0; padding:14px; font-size:14px; gap:5px; }
.messages-view-tabs small { font-size:11px; font-weight:400; color:var(--text-muted); }
#messages .messages-view-tabs [aria-selected="true"] { color:var(--brand-500); background:var(--brand-glow-soft); border-color:var(--brand-500); box-shadow:inset 0 0 0 1px var(--brand-500); }
.messages-setup-note { font-size:12px; color:var(--text-muted); margin:12px 0 22px; }
.messages-disclosure { margin:14px 0; padding:12px 0; border-top:1px solid var(--border); font-size:12px; }
.messages-disclosure > summary { cursor:pointer; font-weight:600; color:var(--text-muted); margin-bottom:10px; }
.messages-disclosure:not([open]) > summary { margin-bottom:0; }
#messages #messagesInboxRail { grid-column:1; grid-row:1; display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; overflow:hidden; border:1px solid var(--border); border-right:0; border-radius:12px 0 0 12px; background:var(--surface-0); }
.messages-inbox-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:10px 12px 8px; flex:none; border-bottom:1px solid var(--border); }
.messages-inbox-head h3 { flex:none; font-size:16px; margin:0; }
/* Row 1: Inbox · live count · ↻ · Messenger ↗. Row 2: search. Row 3: filters + sort. */
#messages #chatFilters { flex:1 1 100%; gap:6px !important; margin-top:0 !important; }
#messages #chatFilters > .chat-filter-group { order:1; flex:1 1 auto; min-width:0; }
#messages #chatFilters .chat-filter-group button { flex:1; padding:5px 5px; min-height:32px; }
#messages #chatSearch { order:0; width:100%; flex:1 1 100%; min-height:34px; }
/* The Sort label still names the select for assistive tech. */
#messages #chatFilters > label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
#messages #chatSort { order:3; flex:0 1 128px; min-width:96px; max-width:none; width:auto; min-height:32px; }
#messages #chatFiltersHint { order:4; font-size:10.5px; line-height:1.4; }
/* Routine open/closed guidance is a tooltip on the filters; a failed refresh stays visible. */
#messages #chatFiltersHint:not([data-state="error"]) { display:none; }
#messages #chatFiltersHint[data-state="error"] { color:var(--danger); }
/* Beats the generic #messages .messages-toolbar rule and the markup's inline flex-wrap. */
#messages .messages-inbox-head > .messages-inbox-tools { flex:1 1 0; min-width:0; display:flex; flex-wrap:nowrap !important; align-items:center; gap:2px !important; }
#messages .messages-inbox-tools #chatStatus { flex:1 1 auto; min-width:0; font-size:11px !important; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* chatSetStatus paints an error red inline: let that one wrap in full. */
#messages .messages-inbox-tools #chatStatus[style*="--danger"] { white-space:normal; }
#messages .messages-inbox-tools button { flex:none; padding:4px 6px; font-size:12px; min-height:28px; }
#messagesBackToList { display:none; }
.messages-detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
#messages .messages-detail-activity { margin:0 0 10px; }
#messagesSettingsPanel #rspEnableBtn { width:auto; height:auto; padding:9px 14px; border-radius:8px; font:600 12px var(--font-ui, sans-serif); color:var(--text); background:var(--surface-2); box-shadow:none; }
#messagesSettingsPanel #rspEnableBtn::after, #messagesSettingsPanel #rspEnableBtn::before { display:none; }
#messagesSettingsPanel #rspEnableBtn[aria-pressed="true"] { color:var(--brand-500); background:var(--brand-glow-soft); }
#messagesSettingsPanel .ar-control { flex-wrap:wrap; }
#responderFields { margin:0; padding:0; border:0; min-inline-size:0; }
#messages .messages-toolbar { flex: 0 0 auto; margin: 0 !important; gap: 6px !important; }
#messages #aiSetupPrompt { flex: 0 0 auto; max-height: 120px; overflow-y: auto; margin-bottom: 0 !important; }
#messages #messagesWorkspace { order: 3; flex: 1; min-height: 0; min-width: 0; display: flex; gap: 12px; }
#messages #messagesWorkspace > .chat-wrap { order: 0; }
#messagesSettingsPanel { order: 1; }
html[data-appearance] #messages .chat-wrap { flex: 1; grid-template-columns: minmax(265px, 29%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; min-height: 0; min-width: 0; }
html[data-appearance] #messages .chat-rail { flex:1; height:auto; max-height:none; min-height:0; min-width:0; border-radius:0; border:0; overflow-y:auto; }
html[data-appearance] #messages .chat-main { grid-column: 2; grid-row: 1; height: 100%; min-height: 0; max-height: none; min-width: 0; border-radius: 0 12px 12px 0; overflow: hidden; }
html[data-appearance] #messages .chat-row { padding: 13px 12px; }
html[data-appearance] #messages .chat-row .who { display:block; line-height:1.5; }
html[data-appearance] #messages .chat-row .who .listing { display:block; font-size:11px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
html[data-appearance] #messages .chat-row .chat-need { margin-right:6px; }
html[data-appearance] #messages .chat-head { padding: 10px 12px; flex: 0 0 auto; gap: 8px; }
html[data-appearance] #messages .chat-msgs { padding: 16px; min-height: 72px; gap: 10px; overscroll-behavior: contain; }
html[data-appearance] #messages .chat-compose { padding: 10px 12px; flex: 0 0 auto; }
html[data-appearance] #messages .chat-compose textarea { min-height: 60px; max-height: 150px; padding: 10px; }
#messages .chat-compose .row { flex-wrap: wrap; }
#messages .chat-compose .hint { min-width: 160px; }
#messages .chat-vehicle-details { flex: 0 0 auto; border-bottom: 1px solid var(--border); padding: 8px 12px; font-size: 12px; }
#messages .chat-vehicle-details summary { cursor: pointer; color: var(--text-muted); }
#messages #marketplaceVehiclePicker { min-width: 120px !important; }
#messagesSettingsPanel { width:min(960px, 100%); max-height:min(860px, calc(100dvh - 48px)); min-width:0; overflow:auto; overscroll-behavior:contain; padding:16px 24px; border:1px solid var(--border); border-radius:16px; background:var(--surface-0); box-shadow:0 24px 80px rgba(0,0,0,.25); }
#messagesSettingsPanel[hidden] { display: none !important; }
#messagesSettingsPanel > section, #messagesSettingsPanel > .messages-view-tabs, #messagesSettingsPanel > .messages-setup-note, #messagesSettingsPanel > .messages-tools-head { max-width:1000px; margin-left:auto; margin-right:auto; }
#messages[data-reply-view="basic"] #messagesSettingsPanel .ar-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:900px) {
    #messages[data-reply-view="basic"] #messagesSettingsPanel .ar-grid { grid-template-columns:minmax(0,1fr); }
}
.messages-tools-head { display:flex; align-items:center; justify-content:space-between; gap:8px; position:sticky; top:-16px; z-index:1; background:var(--surface-0); padding:12px 0; }
.messages-tools-head h3 { margin:0; font-size:20px; }
#messages #messagesSettingsPanel #aiConversationCard { padding: 12px; margin-top: 12px; }
#messagesSettingsPanel .messages-command-help { padding: 0; border: 0; }
#messagesSettingsPanel .ai-reply-controls { align-items: stretch; }
#messagesSettingsPanel .ai-reply-controls label, #messagesSettingsPanel .ai-reply-controls select { min-width: 0; max-width: 100%; white-space: normal; }
#messagesSettingsPanel .ar-body, #messagesSettingsPanel .ar-grid, #messagesSettingsPanel .ar-layout, #messagesSettingsPanel .settings-grid, #messagesSettingsPanel .pb-sec-fields { grid-template-columns: minmax(0, 1fr); }
#messagesSettingsPanel .ar-summary { flex-wrap: wrap; }
#messagesSettingsPanel .ar-summary-sub { white-space: normal; }
#messagesSettingsPanel #autoReplyCard { border:0; box-shadow:none; background:none; }
#messagesSettingsPanel #autoReplyCard > summary { display:none; }
#messagesSettingsPanel #autoReplyCard .ar-head { padding-bottom:12px; }
#messagesSettingsPanel #autoReplyCard .ar-head { display:flex; flex-flow:row wrap; align-items:center; gap:6px 10px; }
#messagesSettingsPanel #autoReplyCard .ar-head > details { flex-basis:100%; }
#messagesSettingsPanel #autoReplyCard .ar-body { padding:0; }
#messagesSettingsPanel #autoReplyCard .ar-col { gap:8px; padding:14px; }
#messagesSettingsPanel #autoReplyCard .ar-form textarea { min-height:70px; }
#messagesSettingsPanel #autoReplyCard .messages-disclosure { padding:8px 0; margin:8px 0; }
#messagesSettingsPanel #autoReplyCard .control-group { margin-bottom:0; }
#messagesSettingsPanel #rspSaveFeedback:empty { display:none; }
#messagesSettingsPanel #rspActivationNote { margin:4px 0 0; }
#messagesSettingsPanel #playbookCard > summary { display:flex; gap:8px; align-items:center; padding:14px; font-size:12px; }
#messagesSettingsPanel #autoReplyCard .ar-grid { gap:32px; }
#messagesSettingsPanel .ar-actions { gap:10px; }
#messagesSettingsPanel .ar-actions .ar-toggle { margin-left:auto; }
#messagesSettingsPanel .ar-check { flex-basis:100%; order:-1; }
#messagesSettingsPanel #rspEnableBtn { min-height:40px; color:var(--surface-0); background:var(--brand-500); font-size:13px; }
#messagesSettingsPanel #rspEnableBtn[aria-pressed="true"] { color:var(--brand-500); background:var(--brand-glow-soft); }
#messagesSettingsPanel :is(#rspEnableBtn, #aiReplyToggleBtn)[data-action="activate"] { background:#15803d; border-color:#15803d; color:#fff; min-height:42px; }
#messagesSettingsPanel :is(#rspEnableBtn, #aiReplyToggleBtn)[data-action="preview"], #messagesSettingsPanel #aiReplyPreviewBtn { background:#eff6ff; border-color:#2563eb; color:#1d4ed8; min-height:40px; }
#messagesSettingsPanel [data-action="pause"], #messagesSettingsPanel #messagesPauseRepliesBtn { background:#fffbeb; border-color:#b45309; color:#92400e; min-height:40px; }
#messagesSettingsPanel :is(#rspEnableBtn, #aiReplyToggleBtn):disabled { opacity:.55; cursor:not-allowed; }
#messagesReplyModes #messagesReplyMode-basic { border-bottom:2px solid #2563eb; }
#messagesReplyModes #messagesReplyMode-ai { border-bottom:2px solid #7c3aed; }
#messagesReplyModes #messagesReplyMode-off { border-bottom:2px solid #64748b; }
#playbookCard .pb-tone-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#playbookCard .pb-tone-preset { display:flex; flex-direction:column; gap:6px; text-align:left; padding:14px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:var(--surface-1); cursor:pointer; font:inherit; }
#playbookCard .pb-tone-preset strong { font-size:14px; }
#playbookCard .pb-tone-preset span { font-size:12px; color:var(--text-muted); }
#playbookCard .pb-tone-preset q { font-size:12px; line-height:1.5; margin-top:4px; }
#playbookCard .pb-tone-preset[aria-pressed="true"] { border-color:var(--brand-500); box-shadow:inset 0 0 0 1px var(--brand-500); background:var(--brand-glow-soft); }
#playbookCard .pb-tone-preset:disabled { opacity:.6; cursor:not-allowed; }
/* Suggested answers under an empty question (app-main.js pbSuggestionRow).
   Dashed = "an idea, not your answer yet"; the dealer's own values from
   elsewhere in the app get a solid border. Tokens only, all four palettes. */
#playbookCard .pb-suggestions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px; }
#playbookCard .pb-suggestions[hidden] { display:none; }
#playbookCard .pb-suggestions-label { flex-basis:100%; font-size:11.5px; line-height:1.45; color:var(--text-muted); }
#playbookCard .pb-suggestion { min-height:32px; max-width:100%; padding:5px 12px; border:1px dashed var(--border-strong, var(--border)); border-radius:999px; background:var(--surface-1); color:var(--text); font:inherit; font-size:12px; line-height:1.35; text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
#playbookCard .pb-suggestion::before { content:'+ '; color:var(--brand-500); font-weight:700; }
#playbookCard .pb-suggestion.pb-suggestion-own { border-style:solid; }
#playbookCard .pb-suggestion[aria-pressed="true"] { border-style:solid; border-color:var(--brand-500); background:var(--brand-glow-soft); box-shadow:inset 0 0 0 1px var(--brand-500); }
#playbookCard .pb-suggestion[aria-pressed="true"]::before { content:'✓ '; }
#playbookCard .pb-suggestion:hover:not(:disabled) { border-color:var(--brand-500); }
#playbookCard .pb-suggestion:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }
#playbookCard .pb-suggestion:disabled { opacity:.55; cursor:not-allowed; }
.pb-answer-tools { margin:4px 0 18px; }
.pb-answer-tools h4 { font-size:18px; margin:0 0 6px; }
.pb-answer-tools p { color:var(--text-muted); font-size:12px; line-height:1.6; margin:6px 0 12px; }
.pb-answer-filters { display:flex; gap:8px; flex-wrap:wrap; }
.pb-answer-filters input, .pb-answer-filters select { min-height:40px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface-0); font:inherit; font-size:12px; padding:8px 10px; max-width:100%; }
.pb-answer-filters input { flex:1 1 240px; min-width:0; }
.pb-answer-filters select { flex:1 1 150px; }
#playbookCard .pb-answer-row { min-width:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface-0); }
#playbookCard .pb-answer-row > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; padding:15px 16px; cursor:pointer; list-style:none; }
#playbookCard .pb-answer-row > summary::-webkit-details-marker { display:none; }
.pb-answer-question { grid-column:1; font-size:13px; line-height:1.5; }
.pb-answer-question::before { content:'Q  '; color:var(--brand-500); }
.pb-answer-preview { grid-column:1; color:var(--text-muted); font-size:12px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pb-answer-preview::before { content:'A  '; font-weight:600; }
.pb-answer-badge { grid-column:2; grid-row:1 / span 2; align-self:center; border:1px solid var(--border); border-radius:999px; font-size:10px; color:var(--text-muted); padding:5px 8px; }
.pb-answer-badge::after { content:'  ▾'; }
.pb-answer-row[data-answered="true"] .pb-answer-badge { color:var(--brand-500); background:var(--brand-glow-soft); }
.pb-answer-row[open] > summary { background:var(--surface-1); border-bottom:1px solid var(--border); }
.pb-answer-row[open] .pb-answer-preview { white-space:normal; overflow-wrap:anywhere; }
#playbookCard .pb-question-editor { padding:16px; }
#playbookCard .pb-answer-row[hidden], #pbGroups > [hidden] { display:none !important; }
@media (max-width:680px) { .pb-answer-badge { grid-column:1; grid-row:3; justify-self:start; } }
@media (max-width:680px) { #playbookCard .pb-tone-presets { grid-template-columns:minmax(0,1fr); } }
#messagesSettingsPanel .ar-hint, #messagesSettingsPanel .ar-lede { line-height:1.55; }
#messages #messagesSettingsPanel #aiConversationCard { border:0; box-shadow:none; padding:0; margin:16px 0; }
#messages #messagesSettingsPanel #commandStrip { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
#messagesSettingsPanel .cmd-tile { padding: 12px; }
#messages button:focus-visible, #messages summary:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
@media (max-width: 800px) {
    html[data-appearance] #messages .chat-wrap { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
    #messages #messagesInboxRail { border:1px solid var(--border); border-radius:12px; }
    html[data-appearance] #messages .chat-main { grid-column:1; grid-row:1; border-radius:12px; display:none; }
    html[data-appearance] #messages[data-mobile-conversation="true"] .chat-main { display:flex; }
    #messages[data-mobile-conversation="true"] #messagesInboxRail { display:none; }
    #messagesBackToList { display:inline-flex; min-height:36px; }
    #messages.tab-content.active { min-height:420px; }
    #messagesSettingsPanel { padding:12px; }
    #messagesReplySetupBackdrop { padding:10px; }
    #messagesSettingsPanel { max-height:calc(100dvh - 20px); border-radius:12px; }
    .messages-view-tabs { gap:6px; }
    .messages-view-tabs button { padding:10px 8px; font-size:12px; }
    .messages-view-tabs small { display:none; }
    .messages-tools-head h3 { font-size:17px; }
    #messagesSettingsPanel #autoReplyCard .ar-grid { gap:18px; }
    #messages #chatConversationStateLabel { min-width:120px; }
    html[data-appearance] #messages .chat-msgs { min-height: 48px; }
    #messages .bubble { max-width: 90%; }
}
@media (max-width: 680px) {
    html[data-messages-active="true"] .main-header { flex-direction: row; flex-wrap: wrap; padding: 8px 12px; }
    html[data-messages-active="true"] .main-header-title { flex: 1; }
    html[data-messages-active="true"] .main-header-title h1 { font-size: 18px; }
    html[data-messages-active="true"] .main-header-actions { gap: 4px; flex-basis: 100%; }
    html[data-messages-active="true"] .main-content { padding: 8px; }
    #messages .messages-command-title { font-size:10px; }
    #messages .messages-command { padding:10px 12px; }
    #messagesExpandToggle { display:none; }
    #messages .messages-workspace-controls { width:100%; align-items:center; justify-content:flex-start; }
    #messagesReplyModes { flex:1; }
    #messagesReplyModes button { flex:1; min-height:38px; padding:6px 10px; }
    #messages .reply-overview { flex-wrap:wrap; }
    #replyOverviewDetail { flex-basis:100%; }
    /* No room for a popover: the explanation opens in the row instead. */
    .reply-mode-explainer[open] { flex-basis:100%; }
    .reply-mode-explainer-body { position:static; width:auto; margin-top:6px; box-shadow:none; }
    #messages .messages-toolbar #chatStatus { flex-basis: 100%; }
}
/* A compact first-visit handoff from posting setup to the existing Messages tour. */
.messages-first-visit { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; margin: 0 0 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--brand-glow-soft); color: var(--text); }
.messages-first-visit[hidden] { display: none; }
.messages-first-visit h3 { margin: 5px 0 7px; font-size: 18px; color: var(--text); }
.messages-first-visit p { max-width: 760px; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.messages-first-visit p strong { color: var(--text); }
.messages-first-visit-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
@media (max-width: 800px) { .messages-first-visit { align-items: flex-start; flex-direction: column; } }