— 44x44 tap target. */
.task-detail-back {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 10px 14px 10px 8px;
border-radius: 8px;
color: var(--muted);
text-decoration: none;
font-size: 14px;
line-height: 1;
transition: background 0.15s, color 0.15s;
}
.task-detail-back:hover { background: var(--surface); color: var(--text); }
/* P-3: New session composer used a code font ('SF Mono'…) on the board.
Switch to the system stack — this is natural-language input, not a
command prompt. Keeps monospace for actual terminals/consoles. */
#session-input {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
/* P-5: Run MC Review button overflowed on 360-375px viewports. Reduce
horizontal padding on mobile so the row never clips. */
@media (max-width: 480px) {
#run-mc-review-btn { padding: 10px 8px !important; font-size: 12px !important; }
.board-search-bar > a[href="/runtime-workbench"] { font-size: 12px !important; padding: 10px 8px !important; }
}
/* ===================================================================
DESIGN SYSTEM (MC-3663) — Wingman-parity F0
Shared component classes consumed by templates/partials/design_system.html.
View-layer only. All classes namespaced `ds-`. Reuses :root palette.
=================================================================== */
:root {
--ds-gap: 12px;
--ds-radius: 10px;
--ds-eyebrow-size: 11px;
--ds-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
/* --- eyebrow: monospace "/ LABEL" kicker --- */
.ds-eyebrow {
display: inline-block;
font-family: var(--ds-mono);
font-size: var(--ds-eyebrow-size);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
/* --- kpi_card --- */
.ds-kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--ds-radius);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.ds-kpi-headline { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--text); }
.ds-kpi-substate { font-size: 12px; color: var(--muted); font-family: var(--ds-mono); }
.ds-accent-green { color: var(--green); }
.ds-accent-red { color: var(--red); }
.ds-accent-amber { color: var(--amber); }
.ds-accent-blue { color: var(--blue); }
.ds-accent-purple { color: var(--purple); }
.ds-accent-gold { color: var(--gold); }
/* --- status_pill --- */
.ds-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
font-family: var(--ds-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--muted);
}
.ds-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ds-pill-online, .ds-pill-done { color: var(--green); background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.3); }
.ds-pill-running { color: var(--blue); background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.3); }
.ds-pill-error { color: var(--red); background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.3); }
.ds-pill-warning { color: var(--amber); background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.3); }
.ds-pill-offline, .ds-pill-idle { color: var(--muted); background: var(--surface2); border-color: var(--border); }
/* dot-only state colours (used by tool_call_row) */
.ds-dot-online, .ds-dot-done { color: var(--green); }
.ds-dot-running { color: var(--blue); }
.ds-dot-error { color: var(--red); }
.ds-dot-warning { color: var(--amber); }
.ds-dot-offline, .ds-dot-idle { color: var(--muted); }
/* --- panel shell --- */
.ds-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--ds-radius);
overflow: hidden;
margin-bottom: var(--ds-gap);
}
.ds-panel-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--surface2);
border-bottom: 1px solid var(--border);
}
.ds-panel-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-panel-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.ds-panel-action { flex-shrink: 0; }
.ds-panel-body { padding: 14px; }
/* --- collapsible tool-call row --- */
.ds-tool-row { border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); margin-bottom: 6px; }
.ds-tool-row > summary { list-style: none; }
.ds-tool-row > summary::-webkit-details-marker { display: none; }
.ds-tool-row-summary {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
font-size: 13px;
}
.ds-tool-row-chevron { color: var(--muted); font-size: 10px; transition: transform 0.15s; }
.ds-tool-row[open] .ds-tool-row-chevron { transform: rotate(90deg); }
.ds-tool-row-label { font-weight: 600; color: var(--text); }
.ds-tool-row-meta { margin-left: auto; color: var(--muted); font-size: 11px; font-family: var(--ds-mono); }
.ds-tool-row-body {
padding: 10px 12px;
border-top: 1px solid var(--border);
font-family: var(--ds-mono);
font-size: 12px;
color: var(--muted);
white-space: pre-wrap;
word-break: break-word;
}
/* --- file-action chip --- */
.ds-file-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 6px;
background: var(--surface2);
border: 1px solid var(--border);
font-size: 12px;
max-width: 100%;
}
.ds-file-chip-verb { font-weight: 600; font-size: 11px; font-family: var(--ds-mono); }
.ds-file-chip-created .ds-file-chip-verb { color: var(--green); }
.ds-file-chip-edited .ds-file-chip-verb { color: var(--amber); }
.ds-file-chip-viewed .ds-file-chip-verb { color: var(--muted); }
.ds-file-chip-deleted .ds-file-chip-verb { color: var(--red); }
.ds-file-chip-path { font-family: var(--ds-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --- command chip --- */
.ds-cmd-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 6px;
background: var(--surface2);
border: 1px solid var(--border);
font-size: 12px;
max-width: 100%;
}
details.ds-cmd-chip { display: inline-block; vertical-align: top; }
.ds-cmd-chip-summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.ds-cmd-chip-summary::-webkit-details-marker { display: none; }
.ds-cmd-tick { color: var(--green); font-weight: 700; }
.ds-cmd-fail .ds-cmd-tick { color: var(--red); }
.ds-cmd-text { font-family: var(--ds-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-cmd-output {
margin: 8px 0 0;
padding: 8px 10px;
background: var(--bg);
border-radius: 6px;
font-family: var(--ds-mono);
font-size: 11px;
color: var(--muted);
white-space: pre-wrap;
word-break: break-word;
}
/* --- instructive empty state --- */
/* MC-3668 WS-E followup: defensive layout. Tessa flagged `.ds-empty` collapsing
to height:0 when a previous render placed it inside a . The macro is now
always sited outside , but harden the rule so an accidental future
placement (panel using `display:table`, td colspan empty row, flex container
that doesn't stretch children) cannot zero-collapse the block. */
.ds-empty {
display: block;
text-align: center;
padding: 28px 18px;
color: var(--muted);
min-height: 140px;
box-sizing: border-box;
}
td > .ds-empty,
table .ds-empty {
display: block;
width: 100%;
}
.ds-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.7; }
.ds-empty-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ds-empty-hint { font-size: 13px; color: var(--muted); max-width: 360px; margin: 0 auto; line-height: 1.5; }
/* --- tab-filter bar with inline counts --- */
.ds-tab-bar {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: var(--ds-gap);
}
.ds-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--muted);
font-size: 12px;
font-weight: 600;
text-decoration: none;
font-family: var(--ds-mono);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.ds-tab:hover { color: var(--text); text-decoration: none; }
.ds-tab-active { background: var(--blue); border-color: var(--blue); color: #000; }
.ds-tab-count {
background: var(--surface2);
color: var(--muted);
border-radius: 999px;
padding: 1px 7px;
font-size: 11px;
}
.ds-tab-active .ds-tab-count { background: rgba(0,0,0,0.2); color: #000; }
/* --- connection card grid (MC-3667 — WS-D) --- */
.ds-conn-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--ds-gap);
}
.ds-conn-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--ds-radius);
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ds-conn-head { display: flex; align-items: center; gap: 8px; }
.ds-conn-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.ds-conn-name {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 700;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.03em;
overflow-wrap: anywhere;
}
.ds-conn-head .ds-pill { flex-shrink: 0; }
.ds-conn-detail { margin: 0; font-size: 12px; color: var(--muted); }
.ds-conn-foot {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.ds-conn-synced {
font-family: var(--ds-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.ds-conn-scope { font-family: var(--ds-mono); font-size: 11px; color: var(--muted); }
@media (max-width: 480px) {
.ds-conn-grid { grid-template-columns: 1fr; }
}
/* END DESIGN SYSTEM (MC-3663) */
/* ===================================================================
WS-A (MC-3664) — Worker log glass-box. View-layer only.
Upgrades the ticket Live activity panel. Tool rows / chips reuse the
F0 ds- classes; this block adds only the group panel, milestone
divider, and live banner.
=================================================================== */
.la-group {
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 8px;
margin: 4px 0;
overflow: hidden;
}
.la-group > summary {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px; font-size: 11px; color: var(--muted);
cursor: pointer; user-select: none; list-style: none;
}
.la-group > summary::-webkit-details-marker { display: none; }
.la-group > summary::before {
content: '\25B6'; font-size: 8px; transition: transform 0.15s; flex-shrink: 0;
}
.la-group[open] > summary::before { transform: rotate(90deg); }
.la-group-icon { opacity: 0.6; }
.la-group-text { font-weight: 600; color: var(--text); }
.la-group-inner { padding: 4px 8px 8px; }
.la-group-inner .ds-tool-row:last-child { margin-bottom: 0; }
.la-group-inner .ds-tool-row-summary { font-size: 12px; }
/* file / command chip inside a tool-row summary — sit flush, no wrap.
Scoped to .la-group so other ds-tool-row consumers are untouched. */
.la-group-inner .ds-tool-row-summary .ds-file-chip,
.la-group-inner .ds-tool-row-summary .ds-cmd-chip {
border: none; background: none; padding: 0; min-width: 0;
}
.la-group-inner .ds-tool-row-body .la-io-label {
display: block; font-weight: 700; color: var(--text);
font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
margin: 6px 0 2px;
}
.la-group-inner .ds-tool-row-body .la-io-label:first-child { margin-top: 0; }
.la-group-inner .ds-tool-row-body pre {
margin: 0; padding: 6px 8px; background: var(--surface);
border-radius: 4px; max-height: 200px; overflow: auto;
font-size: 11px; white-space: pre-wrap; word-break: break-word;
}
.la-io-pending { color: var(--muted); font-style: italic; }
/* milestone divider — "Worker Finished" + timestamp */
.la-milestone {
display: flex; align-items: center; gap: 10px;
margin: 10px 2px; color: var(--muted);
font-size: 11px; font-family: var(--ds-mono);
letter-spacing: 0.05em; text-transform: uppercase;
}
.la-milestone::before, .la-milestone::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.la-milestone-label { font-weight: 700; color: var(--text); }
.la-milestone-time { opacity: 0.7; }
.la-milestone-error .la-milestone-label { color: var(--red, #ef4444); }
/* pinned "Worker is running" live banner */
.la-banner {
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; gap: 8px;
padding: 7px 10px; margin: -8px -12px 8px;
background: rgba(34,197,94,0.08);
border-bottom: 1px solid var(--border);
font-size: 12px; font-weight: 600; color: var(--text);
}
/* ===================================================================
WS-E (MC-3668) — Lists & tasks polish. View-layer only.
=================================================================== */
/* --- quick-action chips under composers --- */
.ds-quick {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
margin: 8px 0 2px;
}
.ds-quick-label {
font-family: var(--ds-mono);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-right: 2px;
}
.ds-quick-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--muted);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ds-quick-chip:hover { color: var(--text); border-color: var(--blue); background: var(--surface); }
.ds-quick-chip-icon { font-size: 13px; opacity: 0.8; }
/* --- recurring-task chips (next-run + run-count) --- */
.ds-task-chips { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.ds-task-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface2);
font-size: 10px;
font-family: var(--ds-mono);
color: var(--muted);
white-space: nowrap;
}
.ds-task-chip-icon { opacity: 0.7; }
.ds-task-chip-runs { color: var(--text); }
/* END WS-E (MC-3668) */
/* ===================================================================
DASHBOARD CONSOLE (MC-3666 — WS-C single-viewport operator console)
Hero instrument panel: greeting + live clock, status pills, KPI grid.
View-layer only.
=================================================================== */
.ds-console {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--ds-radius);
padding: 16px;
margin-bottom: 18px;
}
.ds-console-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.ds-console-id { min-width: 0; }
.ds-console-greeting {
margin: 6px 0 0;
font-size: 22px;
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: normal;
}
.ds-console-clock { text-align: right; flex-shrink: 0; }
.ds-console-clock-time {
font-family: var(--ds-mono);
font-size: 24px;
font-weight: 700;
color: var(--text);
line-height: 1.15;
}
.ds-console-clock-date {
font-family: var(--ds-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.ds-console-pills {
display: flex;
align-items: center;
gap: 8px 14px;
flex-wrap: wrap;
margin: 12px 0 14px;
}
.ds-console-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
gap: var(--ds-gap);
}
@media (max-width: 560px) {
.ds-console { padding: 14px; }
.ds-console-greeting { font-size: 17px; }
.ds-console-clock-time { font-size: 20px; }
.ds-console-kpis { grid-template-columns: repeat(2, 1fr); }
.ds-console-kpis .ds-kpi-headline { font-size: 22px; }
}
/* END DASHBOARD CONSOLE (MC-3666) */
/* ===================================================================
MX-GLOBAL (MC-3689) — global mobile tap-target + contrast sweep.
Keystone of the MC mobile-UX remediation. View-layer only; every rule
gated behind max-width:768px so desktop is untouched. The 9 page
tickets build on these globals.
=================================================================== */
@media (max-width: 768px) {
/* --- Tap targets: every interactive control >=44x44px ---
Native `button` catches all icon-only buttons regardless of class. */
button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
summary {
min-height: 44px;
}
button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* summary keeps its native disclosure marker — pad instead of flex */
summary {
padding-top: 10px;
padding-bottom: 10px;
}
/* Filter / action rows: ensure tappable rows clear the floor */
.filter-row,
.filters,
[class*="filter-row"] {
min-height: 44px;
}
/* --- Contrast: lift small secondary text to WCAG AA ---
#aab0c4 = 7.7:1 on --surface, 6.9:1 on --surface2 (both AA+).
Previous #8b8fa3 was a borderline 5.2:1 and failed on tinted rows. */
:root {
--muted: #aab0c4;
}
/* --- Font floor: secondary descriptive text >=13px --- */
.stat-label,
.ds-kpi-substate,
.header-right,
.output-preview,
.output-cell,
.ds-conn-detail,
.ds-conn-synced,
.ds-empty-hint {
font-size: 13px;
}
}
/* MX-APPS: compact app list + section divider */
.mx-apps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
.mx-app-card {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 64px;
padding: 10px 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s;
}
.mx-app-card:hover { border-color: var(--accent); }
.mx-app-card-name {
font-size: 15px;
font-weight: 600;
color: var(--text);
line-height: 1.2;
}
.mx-app-card-desc {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
line-height: 1.3;
}
.mx-apps-section-divider {
margin: 28px 0 20px;
border-top: 2px solid var(--border);
}
@media (max-width: 600px) {
.mx-apps-grid {
grid-template-columns: repeat(2, 1fr);
}
.mx-app-card {
min-height: 64px;
padding: 10px 12px;
}
}
/* END MX-GLOBAL (MC-3689) */
/* ===================================================================
MC-3754 P1 — chat-first shell. The landing surface (`/`) is now the
persistent-Luci chat. KPI strip is collapsed to a compact status bar;
runtime / Larry / team / health panels live behind the Settings sheet.
Scoped to body[data-page="dashboard"] so /board's composer is untouched.
=================================================================== */
.mc-chat-shell {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 12px;
min-height: 0;
overflow: hidden;
padding-top: 12px;
}
.mc-status-bar {
display: flex;
align-items: center;
gap: 8px 14px;
flex-wrap: nowrap;
overflow-x: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 14px;
scrollbar-width: none;
}
.mc-status-bar::-webkit-scrollbar { display: none; }
.mc-status-greeting {
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.mc-status-count {
font-size: 13px;
color: var(--muted);
}
.mc-status-count strong { color: var(--text); }
.mc-status-spacer { flex: 1 1 auto; }
.mc-status-settings-btn {
font-size: 13px;
font-weight: 600;
padding: 8px 14px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
cursor: pointer;
}
.mc-status-settings-btn:hover { border-color: var(--blue); }
.mc-status-settings-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Chat fills the shell — composer becomes a flex column that grows. */
body[data-page="dashboard"] .session-composer {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
margin-bottom: 0;
}
body[data-page="dashboard"] #session-chat-panel {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overscroll-behavior: contain;
}
body[data-page="dashboard"] .session-chat-log {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
}
/* Settings sheet — full-viewport overlay holding the demoted panels. */
.mc-settings-sheet {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 260;
overflow-y: auto;
padding: 16px 16px calc(var(--bottom-nav-height) + var(--safe-bottom) + 24px);
}
.mc-settings-sheet-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px;
position: sticky;
top: 0;
background: var(--bg);
padding: 4px 0 10px;
z-index: 1;
}
.mc-settings-sheet-head h2 { margin: 0; }
.mc-settings-close {
font-size: 13px;
font-weight: 600;
padding: 8px 16px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
cursor: pointer;
flex-shrink: 0;
}
.mc-settings-close:hover { border-color: var(--blue); }
@media (max-width: 768px) {
/* MC-3841 Phase E — keyboard-safe viewport. visualViewport-driven
--vv-height shrinks the shell as the iOS keyboard opens so the
composer stays sticky and the chat log fills what's left. */
body[data-page="dashboard"] .container {
display: flex;
flex-direction: column;
min-height: calc(var(--vv-height, 100dvh) - var(--bottom-nav-height) - var(--safe-bottom));
padding-bottom: 0;
}
body[data-page="dashboard"] .session-composer {
position: sticky;
bottom: 0;
flex: 0 0 auto;
background: var(--bg);
z-index: 50;
}
body[data-page="dashboard"] .session-chat-log {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
max-height: none;
padding: 8px 12px 56px;
}
/* MC-3844: prevent right-edge clipping of message text on narrow viewports. */
body[data-page="dashboard"] .session-chat-log .session-chat-msg,
body[data-page="dashboard"] .session-chat-log .chat-bubble {
max-width: calc(100% - 8px);
word-wrap: break-word;
overflow-wrap: anywhere;
}
}
/* END MC-3754 P1 */
/* ===================================================================
MC-3754 P2 — chat thread list + persistence. Desktop: a 240px left rail
of threads beside the chat. Mobile (<=1024px): the rail collapses; a
[≡] header button opens a full-height thread sheet instead.
=================================================================== */
.mc-chat-body {
display: flex;
gap: 12px;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
body[data-page="dashboard"] .mc-chat-body .session-composer {
min-width: 0;
}
.mc-thread-rail {
width: 240px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.mc-thread-rail-head,
.mc-thread-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 700;
color: var(--text);
flex-shrink: 0;
}
.mc-thread-new-btn {
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
min-height: 44px;
border-radius: 8px;
border: 1px solid var(--accent);
background: transparent;
color: var(--accent);
cursor: pointer;
}
.mc-thread-new-btn:hover { background: var(--accent); color: #000; }
.mc-thread-list {
flex: 1 1 auto;
overflow-y: auto;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mc-thread-item {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid transparent;
background: var(--surface2);
cursor: pointer;
min-height: 44px;
}
.mc-thread-item:hover { border-color: var(--border); }
.mc-thread-item.active { border-color: var(--accent); background: var(--surface); }
.mc-thread-item-main { flex: 1 1 auto; min-width: 0; }
.mc-thread-item-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mc-thread-item-meta {
font-size: 13px;
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mc-thread-item-system .mc-thread-item-title::before {
content: "\1F4AC\00a0";
}
.mc-thread-item-active-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
flex-shrink: 0;
animation: mcChatPulse 1s ease-in-out infinite;
}
.mc-thread-item-archive {
flex-shrink: 0;
font-size: 13px;
line-height: 1;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
color: var(--text-dim);
cursor: pointer;
opacity: 0;
}
.mc-thread-item:hover .mc-thread-item-archive { opacity: 1; }
.mc-thread-item-archive:hover { border-color: var(--red); color: var(--red); }
/* MC-3841 N15 (Tessa POLISH-1): never show the active thread's ✕ —
user archives the open chat via the chat-panel toolbar instead. */
.mc-thread-item.active .mc-thread-item-archive { display: none; }
/* MC-3841 N19: Archive toggle on rail + restore-flavored row button */
.mc-thread-rail-toolbar {
padding: 6px 8px 6px;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 6px;
}
.mc-thread-search {
width: 100%;
box-sizing: border-box;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-family: inherit;
}
.mc-thread-search:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.mc-thread-item-snippet {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.4;
}
.mc-thread-archive-toggle {
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mc-thread-archive-toggle:hover,
.mc-thread-archive-toggle.active {
background: var(--surface2);
color: var(--accent);
border-color: var(--accent);
}
.mc-thread-item-restore {
opacity: 1 !important;
color: var(--accent) !important;
border-color: var(--border) !important;
}
/* MC-3841 N20b (Tessa BUG-04): ✎ rename icon on each thread row — mobile-
only affordance since touch double-tap was unreliable. Desktop has the
native dblclick. */
.mc-thread-item-rename {
flex-shrink: 0;
padding: 4px;
border-radius: 4px;
border: 1px solid transparent;
background: transparent;
color: var(--muted);
cursor: pointer;
display: none; /* hidden on desktop — dblclick handles it */
align-items: center;
justify-content: center;
margin-left: 4px;
}
.mc-thread-item-rename:hover { color: var(--accent); border-color: var(--border); }
@media (max-width: 768px) {
.mc-thread-item-rename { display: inline-flex; }
}
.mc-thread-item-restore:hover {
background: rgba(37, 99, 235, 0.15) !important;
border-color: var(--accent) !important;
}
/* Archive button in chat panel header bar */
.session-chat-actions-bar {
display: flex;
gap: 6px;
padding: 4px 8px;
margin-bottom: 4px;
flex: 0 0 auto;
justify-content: flex-end;
}
.session-chat-actions-btn {
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--muted);
cursor: pointer;
}
.session-chat-actions-btn:hover { border-color: var(--red); color: var(--red); }
/* MC-3841 N22: hide the standalone Archive bar on mobile. The thread
row's ✕ archive icon (and now also the rename ✎ icon) cover this
need; the bar just eats vertical space above the chat log. */
@media (max-width: 768px) {
.session-chat-actions-bar { display: none !important; }
}
.mc-thread-rail-empty {
padding: 16px 12px;
font-size: 13px;
color: var(--text-dim);
text-align: center;
}
/* [≡] threads toggle — mobile only. */
.mc-thread-toggle {
font-size: 13px;
font-weight: 600;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
cursor: pointer;
display: none;
}
.mc-thread-toggle:hover { border-color: var(--blue); }
/* Mobile thread sheet — full-height overlay holding the same thread list. */
.mc-thread-sheet {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 270;
display: flex;
flex-direction: column;
}
.mc-thread-sheet[hidden] { display: none; }
.mc-thread-sheet-close {
font-size: 15px;
line-height: 1;
padding: 8px 14px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
cursor: pointer;
}
@media (max-width: 1024px) {
.mc-thread-rail { display: none; }
.mc-thread-toggle { display: inline-block; }
}
@media (min-width: 1025px) {
.mc-thread-sheet { display: none !important; }
}
/* MC-3841 Phase E — keep last thread row clear of the bottom nav / safe area. */
.mc-thread-sheet .mc-thread-list {
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 8px);
}
@media (max-width: 768px) {
/* The composer collapses to a header-only widget on the board page; on the
chat-first dashboard it IS the surface, so the form must always show. */
body[data-page="dashboard"] .session-composer #session-form {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
}
}
/* END MC-3754 P2 */
/* ===================================================================
MC-3758 (MC-3754 P4) — inline secondary panels. Desktop-only resizable right
panel that loads the board or runtime workbench beside the chat via
an HTMX partial swap. Mobile (<=1024px) keeps the separate nav pages:
the peek buttons and panel are hidden, board/workbench stay full pages.
=================================================================== */
:root { --mc-side-panel-w: 460px; }
/* Keep the peek + settings buttons grouped so they never split across rows. */
.mc-status-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.mc-peek-btn {
font-size: 13px;
font-weight: 600;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
cursor: pointer;
}
.mc-peek-btn:hover { border-color: var(--blue); }
.mc-peek-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mc-peek-btn.active { border-color: var(--blue); color: var(--blue); }
.mc-side-panel {
position: fixed;
top: 0;
right: 0;
bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
width: var(--mc-side-panel-w);
display: flex;
flex-direction: column;
background: var(--bg);
border-left: 1px solid var(--border);
box-shadow: -8px 0 28px rgba(0, 0, 0, 0.38);
z-index: 240;
}
.mc-side-panel[hidden] { display: none; }
/* Chat reflows into the remaining width — panel sits alongside, not over. */
body.mc-side-panel-open .container {
max-width: none;
margin-left: 0;
margin-right: var(--mc-side-panel-w);
transition: margin-right 0.15s ease;
}
/* MC-3841 N9 (Tessa BUG-1): when the side panel is open the .container
width drops to ~752px and the status-bar action buttons (Board /
Workbench / More / Settings) flow off to the right at x=809-916.
Drop the duplicate Board/Workbench toggles since the same control
lives in the panel header; keep More + Settings tight. */
body.mc-side-panel-open .mc-status-bar .mc-peek-btn[data-mc-peek="board"],
body.mc-side-panel-open .mc-status-bar .mc-peek-btn[data-mc-peek="workbench"] {
display: none;
}
/* MC-3841 N17 (Tessa F-01/F-02): when side panel narrows the container
from 1280→752px, the @media (max-width:768px) rules don't fire
because viewport is still 1280, so the narrow-hide pills never
hide and the greeting truncates. Trigger the narrow rules via the
body class instead. */
body.mc-side-panel-open .mc-status-greeting {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.mc-side-panel-open .mc-status-bar [data-mc-hide-narrow="1"] { display: none; }
.mc-side-panel-resizer {
position: absolute;
left: -4px;
top: 0;
bottom: 0;
width: 9px;
cursor: col-resize;
background: transparent;
}
.mc-side-panel-resizer:hover,
.mc-side-panel-resizer:focus-visible {
background: var(--blue);
opacity: 0.45;
outline: none;
}
.mc-side-panel-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.mc-side-panel-title {
font-size: 14px;
font-weight: 700;
color: var(--text);
flex: 1 1 auto;
}
.mc-side-panel-open {
font-size: 13px;
color: var(--muted);
text-decoration: none;
}
.mc-side-panel-open:hover { color: var(--blue); }
.mc-side-panel-close {
font-size: 14px;
line-height: 1;
padding: 6px 9px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
cursor: pointer;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.mc-side-panel-close:hover { border-color: var(--blue); }
.mc-side-panel-body {
flex: 1 1 auto;
overflow: auto;
padding: 14px;
}
/* Iframe content (workbench) fills the panel edge-to-edge, no host padding. */
.mc-side-panel-body--frame {
padding: 0;
overflow: hidden;
}
.mc-side-panel-frame {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.mc-side-panel-empty {
color: var(--muted);
font-size: 13px;
padding: 16px 4px;
}
/* Mobile / narrow desktop — feature off; board & workbench stay nav pages. */
@media (max-width: 1024px) {
.mc-peek-btn { display: none; }
.mc-side-panel { display: none !important; }
body.mc-side-panel-open .container { margin-right: auto; max-width: 1200px; }
}
/* END MC-3758 (MC-3754 P4) */
/* ===================================================================
MC-3841 — Chat-first polish phases A+B+C (2026-05-20)
See reports/mc-chat-first-simplification.md for spec.
Dashboard-scoped (body[data-page="dashboard"]) to keep other pages
(board, ticket, workbench) untouched.
=================================================================== */
/* --- Phase A — Header + status bar cleanup --- */
/* A.1: hide Health / Disk / task-fail / unattended pills on mobile;
force the bar to stay on a single row. Greeting + clock + Luci pill + open-count remain. */
@media (max-width: 768px) {
body[data-page="dashboard"] .mc-status-bar { flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; gap: 6px 10px; }
body[data-page="dashboard"] .mc-status-bar [data-mc-hide-narrow="1"] { display: none; }
/* MC-3846 C: collapse status-bar items to a single row.
Without these, .mc-status-greeting / .mc-status-count / .ds-pill shrink horizontally
under flex pressure and wrap their text vertically — bar grows from 44px to ~98px. */
body[data-page="dashboard"] .mc-status-bar > * {
flex: 0 0 auto;
white-space: nowrap;
}
body[data-page="dashboard"] .mc-status-spacer { flex: 1 1 auto; min-width: 8px; }
/* MC-3846 C: tap targets — ensure ≥44px on chat shell buttons. */
.mc-status-settings-btn,
.mc-thread-toggle,
body[data-page="dashboard"] .mc-status-bar button { min-height: 44px; }
}
/* A.2: hide the "+ New Session" composer header on dashboard (always-expanded, non-functional) */
body[data-page="dashboard"] .session-composer-header { display: none; }
/* --- Phase B — Composer dead-weight removal (dashboard scope) --- */
body[data-page="dashboard"] .session-mode-pick:not([data-mode="plan"]) { display: none; }
body[data-page="dashboard"] .session-composer-hints { display: none; }
body[data-page="dashboard"] #session-chat-console { display: none; }
body[data-page="dashboard"] .ds-quick { display: none; }
/* --- Phase C — Chat bubble unification --- */
/* C.1: user bubble = blue accent fill, matching ticket.html .chat-bubble-human */
.session-chat-user {
background: var(--accent);
color: #fff;
border-bottom-right-radius: 3px;
}
/* C.2: light theme fix — accent on light backgrounds needs dark text */
/* MC-3841 N15 (Tessa MAJOR-1): keep white text on the saturated-blue
user bubble in light theme. Was color:#000 which gave black-on-blue
— near-unreadable. */
html[data-theme="light"] .session-chat-user { color: #fff; }
/* C.3: bubble font 13px → 14px (Apple readability) */
.session-chat-msg,
.chat-bubble { font-size: 14px; }
/* END MC-3841 phases A+B+C */
/* ═══════════════════════════════════════════════════════════════════════
MC-3841 Tessa mobile bug-hunt fixes (2026-05-20)
- BUG-01/02: FAB safe-bottom (handled above on .fab + ticket-list padding)
- BUG-02/04/05: horizontal-scroll fade indicator on shortcuts/presets/tools
- BUG-03: defensive containing-block reset so .bottom-nav fixed positioning
is always relative to the viewport, never a transformed ancestor.
═══════════════════════════════════════════════════════════════════════ */
/* Console preset row + quickkeys row: convert to horizontal scrollers. JS in
app.js (refreshScrolledEnd) auto-binds any element carrying
[data-scrolled-end] so the shared MC-4200 affordance drops at the end. */
.console-presets {
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.console-presets::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
.console-quickkeys {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.console-quickkeys::-webkit-scrollbar { display: none; }
.console-quickkeys button { flex: 0 0 auto; }
}
/* BUG-03: ticket-detail bottom-nav was reported at right:658 on a 375px
viewport, meaning some ancestor was creating a containing block for the
fixed-positioned nav. Defensively reset any layout-effect properties on
the nav wrapper so .bottom-nav's `position: fixed` is always relative to
the viewport, never a transformed/filtered/contain'd ancestor. */
.bottom-nav-wrap {
position: static;
transform: none;
-webkit-transform: none;
filter: none;
-webkit-filter: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
perspective: none;
will-change: auto;
contain: none;
}
/* END MC-3841 Tessa fixes */
/* ── MC-3841 Phase G: workbench-as-chat shell (Chat default, Raw fallback) ───
Activation: body.wb-chat-mode (set by JS in ticket_runtime_workbench.html).
Goal: workbench *looks* like an ongoing chat thread, not a terminal.
No SSE/renderer refactor — pure CSS reskin of the existing feed rows.
*/
/* Header toggle styling — mirrors the wb-density-toggle look. */
.wb-view-mode-toggle {
display: inline-flex;
align-items: center;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
flex: 0 0 auto;
}
.wb-view-mode-toggle button {
min-height: 28px !important;
padding: 0 10px !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--surface2) !important;
color: var(--muted) !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer;
white-space: nowrap;
transition: background .12s, color .12s;
}
.wb-view-mode-toggle button + button {
border-left: 1px solid var(--border) !important;
}
.wb-view-mode-toggle button.active,
.wb-view-mode-toggle button[aria-pressed="true"] {
background: rgba(96, 165, 250, .18) !important;
color: var(--blue, #60a5fa) !important;
font-weight: 700 !important;
}
/* Active-session chip row in header (chat mode only). */
.wb-session-chips {
flex: 1 1 auto;
display: flex;
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
min-width: 0;
padding: 0 6px;
scrollbar-width: none;
}
.wb-session-chips::-webkit-scrollbar { display: none; }
.wb-session-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface2);
color: var(--muted);
font-size: 11px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
}
.wb-session-chip.active {
background: rgba(96, 165, 250, .18);
color: var(--blue, #60a5fa);
border-color: var(--blue, #60a5fa);
}
.wb-session-chip-more {
cursor: default;
background: transparent;
color: var(--muted);
}
/* CHAT MODE: hide rail / status strip / feed toolbar. */
body.wb-chat-mode .wb-rail { display: none !important; }
body.wb-chat-mode .wb-status-strip,
body.wb-chat-mode #runtime-status-strip { display: none !important; }
body.wb-chat-mode .runtime-feed-tools { display: none !important; }
/* Raw-mode hides the chip row; chat-mode shows it (JS toggles `hidden` too). */
body:not(.wb-chat-mode) .wb-session-chips { display: none !important; }
/* Chat thread frame: centred column on desktop, full width on mobile. */
body.wb-chat-mode .wb-feed {
background: var(--bg);
padding: 14px 16px 80px;
overflow-y: auto;
}
body.wb-chat-mode .runtime-history-wrap,
body.wb-chat-mode .runtime-transcript-wrap,
body.wb-chat-mode .runtime-live-wrap {
max-width: 760px;
margin: 0 auto;
background: transparent;
}
body.wb-chat-mode .runtime-history-list {
background: transparent;
padding: 0;
}
/* The SSE renderer emits .chat-activity-line rows. Re-skin them as agent bubbles. */
body.wb-chat-mode .chat-activity-line,
body.wb-chat-mode .runtime-history-list > div,
body.wb-chat-mode .runtime-history-list > article {
display: block;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 12px;
border-bottom-left-radius: 3px;
padding: 10px 14px;
margin: 8px 0;
max-width: 90%;
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.45;
white-space: normal;
word-wrap: break-word;
}
/* Keep monospace inside code blocks. */
body.wb-chat-mode .chat-activity-line pre,
body.wb-chat-mode .chat-activity-line code,
body.wb-chat-mode .runtime-history-list pre,
body.wb-chat-mode .runtime-history-list code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
white-space: pre-wrap;
}
body.wb-chat-mode .chat-activity-line pre,
body.wb-chat-mode .runtime-history-list pre {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 10px;
margin: 6px 0;
overflow-x: auto;
}
/* Empty-state in chat mode = friendly, centred. */
body.wb-chat-mode .runtime-empty {
background: transparent !important;
border: 0 !important;
color: var(--muted);
text-align: center;
padding: 24px 12px;
font-size: 13px;
}
/* Mobile: full-width column, slightly tighter padding. */
@media (max-width: 720px) {
body.wb-chat-mode .wb-feed { padding: 10px 10px 100px; }
body.wb-chat-mode .runtime-history-wrap,
body.wb-chat-mode .runtime-transcript-wrap { max-width: 100%; }
body.wb-chat-mode .chat-activity-line,
body.wb-chat-mode .runtime-history-list > div { max-width: 100%; font-size: 14px; }
.wb-session-chips { padding: 0 4px; }
.wb-session-chip { font-size: 11px; padding: 0 8px; max-width: 140px; }
}
/* END MC-3841 Phase G chat shell */
/* ── MC-3841 Phase D: Settings sheet gut (CSS-only quick slice) ────────────
Hide heavy ops sections inside #mc-settings-sheet. Keep Appearance picker
+ #persistent-luci-card. Heavier ops content moves to /status + /settings
routes (follow-up). Pure view-layer hide — markup stays intact so existing
wiring on those routes can lift the same DOM later. */
#mc-settings-sheet #usage-widget,
#mc-settings-sheet #server-card,
#mc-settings-sheet #df-grid,
#mc-settings-sheet .ds-conn-grid,
#mc-settings-sheet .ticket-list,
#mc-settings-sheet .activity-feed,
#mc-settings-sheet .stats,
#mc-settings-sheet .larry-provider-section { display: none !important; }
/* END MC-3841 Phase D */
/* ── MC-3841 Phase I: Mobile composer overflow fix ───────────────────────
BUG: on a 375px viewport, .session-chat-msg bubbles containing long URLs
or unbroken strings grew to ~2700px, stretching their flex parent
(.session-chat-log) which is a flex sibling of the composer in the same
column. The composer inherited the same intrinsic min-width, pushing the
send button to x≈2848 — completely off-screen. .mc-chat-body is
overflow:hidden so the user can't even scroll to find it.
Fix: force every flex-column descendant of .mc-chat-body to min-width:0
so children don't expand the parent, and word-break inside bubbles. */
.mc-chat-body,
.mc-chat-body > *,
.session-composer,
.session-composer > *,
#session-chat-panel,
.session-chat-log,
#session-form,
.session-input-wrap,
.session-mode-row { min-width: 0; max-width: 100%; }
.session-chat-msg,
.session-chat-msg * {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.session-chat-msg pre,
.session-chat-msg code {
white-space: pre-wrap;
overflow-x: auto;
max-width: 100%;
}
#session-input { max-width: 100%; min-width: 0; }
/* Mobile: make the chat shell viewport-tall + scroll internally so the input
row stays visible while messages scroll within the chat-log. Phase E's
min-height + sticky failed because the composer's parent had no height
constraint, so sticky:bottom:0 stuck to the bottom of a 23k-tall element. */
@media (max-width: 768px) {
body[data-page="dashboard"] .container {
height: calc(var(--vv-height, 100dvh) - var(--bottom-nav-height) - var(--safe-bottom));
min-height: 0;
overflow: hidden;
}
body[data-page="dashboard"] .mc-chat-shell,
body[data-page="dashboard"] .mc-chat-body {
height: 100%;
min-height: 0;
flex: 1 1 auto;
}
body[data-page="dashboard"] .session-composer {
height: 100%;
min-height: 0;
position: static;
display: flex;
flex-direction: column;
overflow: hidden;
}
body[data-page="dashboard"] #session-chat-panel {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
body[data-page="dashboard"] .session-chat-log {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
max-height: none;
padding-bottom: 8px;
}
body[data-page="dashboard"] #session-form,
body[data-page="dashboard"] .session-mode-row,
body[data-page="dashboard"] .session-composer-header {
flex: 0 0 auto;
}
body[data-page="dashboard"] #session-form {
background: var(--bg);
border-top: 1px solid var(--border);
}
}
/* END MC-3841 Phase I */
/* ── MC-3841 Phase J: Desktop polish + cross-page composer slim ──────────
Hide bottom-nav on desktop ≥1024px (use top-of-page nav instead). Cap
status-bar at one row; demote the "Board / Workbench / Settings"
in-card buttons since the side rail + status-bar settings cog cover it.
Apply Phase B simplifications (no mode chips, no Quick-start chips, no
composer-header, no hints row, no console-link) to ALL pages — not just
the dashboard — so /board, /tasks, /reports, /workbench keep the same
slim chat composer.
*/
@media (min-width: 1024px) {
.bottom-nav { display: none !important; }
body { padding-bottom: 0 !important; }
}
.mc-status-bar { flex-wrap: nowrap; }
/* Reverted Phase J hide — bring nav buttons back so desktop users have
a way to reach Board / Workbench / Tasks (bottom-nav is hidden on
≥1024px and the chat shell had no other nav surface). MC-3841 N. */
/* MC-3841 N7 (Tessa M2): mobile keeps only Threads + Settings in the
status bar; Board / Workbench / More are reachable via the bottom-nav
so duplicating them just pushed Threads off-screen at x=509 on a
375-wide viewport. Also collapses the greeting + clock pair to a
tiny single line so the action buttons fit within the 375 viewport
without horizontal-scroll. */
/* MC-3841 N9 (Tessa M1 redux): status-bar greeting should always be a
single-line ellipsis (mobile and desktop) so the container never
needs to grow to two lines and clip content. */
.mc-status-bar .mc-status-greeting {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
.mc-status-bar { min-height: 44px; }
@media (max-width: 768px) {
.mc-status-bar .mc-peek-btn[data-mc-peek="board"],
.mc-status-bar .mc-peek-btn[data-mc-peek="workbench"],
.mc-status-bar #mc-status-more-btn { display: none !important; }
/* MC-3841 N23: hide the greeting on mobile entirely. It ate ~170px of
a 375px viewport, forcing the bar to wrap to 2 rows. Mobile knows
it is logged in as Elmar already; the greeting is dashboard chrome. */
.mc-status-bar .mc-status-greeting { display: none; }
/* MC-3841 N20 (Tessa BUG-02): Health pill stays visible on mobile —
degraded server health was unreachable otherwise. Compact label
so it fits next to LUCI ONLINE without pushing other elements off. */
.mc-status-bar [data-mc-hide-narrow="1"][onclick*="mcToggleHealthDetail"] {
display: inline-flex !important;
}
.mc-status-bar [data-mc-hide-narrow="1"][onclick*="mcToggleHealthDetail"] .status-pill {
font-size: 10px;
padding: 2px 6px;
}
.mc-status-bar #ds-clock,
.mc-status-bar #ds-date { display: none; }
.mc-status-bar .mc-status-count { font-size: 11px; }
/* MC-3841 N23: icon-only action buttons on mobile (Threads / Settings).
The text labels pushed the bar to 2 rows. SVG icons are now the
full button content; native tooltip preserves the affordance. */
.mc-thread-toggle, .mc-status-settings-btn {
font-size: 0;
padding: 8px;
min-width: 36px;
min-height: 36px;
}
.mc-thread-toggle svg, .mc-status-settings-btn svg {
width: 18px;
height: 18px;
}
/* MC-3841 N23: force the status bar back to a single row. The N7 wrap
rule split it into two rows (~96px total); with greeting hidden and
icon-only buttons the remaining items fit on one ~44px line. */
.mc-status-bar {
flex-wrap: nowrap !important;
overflow-x: auto !important;
min-height: 44px;
position: relative;
}
/* MC-3841 N23b (Elmar screenshot 20:00): actions were getting scrolled
off-screen inside overflow-x:auto. Pin them sticky-right with the
surface background so they remain reachable regardless of how wide
the pill/count strip is. */
.mc-status-actions {
flex-shrink: 0;
margin-left: auto;
gap: 4px;
position: sticky;
right: 0;
background: var(--surface);
padding-left: 8px;
z-index: 2;
box-shadow: -8px 0 8px -4px var(--surface);
}
.mc-status-spacer { display: none; }
}
/* Swipe-reveal panels render as always-visible shouty red "ARCHIVE" labels
when the parent row doesn't fully occlude them (thread sheet on mobile,
any surface on desktop). Hide them by default and only paint during an
active swipe — JS adds `.swiping` to the front card on touchstart and
removes it on touchend. */
.swipe-reveal { display: none; }
.swipe-container:has(.swiping) .swipe-reveal { display: flex; z-index: 0; }
/* In a flex column thread list, the .swipe-container collapses below its
.mc-thread-item child (overflow:hidden + intrinsic-height mismatch).
Force the container to hold the item's natural height. */
.mc-thread-list .swipe-container { flex: 0 0 auto; min-height: 44px; }
/* Cross-page composer slim — only "Chat with Luci" mode. */
.session-composer .session-mode-pick[data-mode="implement_now"],
.session-composer .session-mode-pick[data-mode="quick_ticket"] { display: none !important; }
.session-composer-header { display: none !important; }
.session-composer-hints { display: none !important; }
.ds-quick-actions,
.ds-quick-chips,
.ds-quick-chip,
[class*="ds-quick"] { display: none !important; }
#session-chat-console { display: none !important; }
.session-mode-row { display: none !important; }
/* Workbench session chips: horizontal scroll on mobile. */
@media (max-width: 768px) {
.wb-session-chips {
overflow-x: auto;
flex-wrap: nowrap !important;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.wb-session-chip { flex: 0 0 auto; }
}
/* END MC-3841 Phase J */
/* ── MC-3841 Phase M: fine-grain visual polish ───────────────────────────
Concrete refinements to bring MC's chat shell closer to Claude Code /
Cursor / Replit AI agent aesthetics:
- Tighter bubble spacing (was 14px row gap, now 10px so a long thread
scans faster)
- Subtle depth shadow on user bubbles (1-pixel soft) so accent blue
doesn't feel like a flat tile
- Muted timestamp / meta color, slightly smaller
- Composer field gets a quiet focus ring matching the accent
- Threads rail entry hover is a touch more contrasty
*/
.session-chat-log .session-chat-msg { margin-bottom: 8px; }
.session-chat-log .session-chat-msg + .session-chat-msg { margin-top: 0; }
.session-chat-user {
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
}
.session-chat-luci {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.session-chat-meta,
.session-chat-elapsed,
.session-chat-queued { color: var(--muted); font-size: 11px; }
#session-form:focus-within {
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.20);
border-radius: 12px;
transition: box-shadow 0.15s ease;
}
.mc-thread-item:hover { background: var(--surface); border-color: var(--accent); }
/* END MC-3841 Phase M */
/* ── MC-3841 Phase N: desktop chat scroll + nav fly-out ─────────────────
1. Desktop chat-log scrolls internally (was page-scroll). Container is
viewport-tall minus status-bar/composer; only chat-log scrolls.
2. Larger composer focus ring, subtle ".session-chat-msg" hover for
affordance.
3. .mc-status-quick-btn / .mc-status-settings-btn group: add a Nav
button that opens the secondary side-panel (Tasks / Apps / Reports /
Console / Workbench). Wired in JS via data-mc-peek="nav".
*/
@media (min-width: 769px) {
body[data-page="dashboard"] .container {
height: calc(100dvh - 16px);
overflow: hidden;
display: flex;
flex-direction: column;
}
body[data-page="dashboard"] .mc-chat-shell {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
body[data-page="dashboard"] .mc-chat-body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
body[data-page="dashboard"] .session-composer {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
body[data-page="dashboard"] #session-chat-panel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
body[data-page="dashboard"] .session-chat-log {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
scroll-behavior: smooth;
}
body[data-page="dashboard"] #session-form,
body[data-page="dashboard"] .session-mode-row,
body[data-page="dashboard"] .session-composer-header {
flex: 0 0 auto;
}
}
/* MC-3841 N9 (Tessa BUG-2): a short reply like "4" rendered as a tiny
33×37 bubble looks identical to the working-indicator "4s" pill. Give
luci bubbles a meaningful min width and a leading "Luci ·" marker so
the eye can disambiguate the reply from the indicator instantly. */
.session-chat-luci { min-width: 100px; }
/* Highlight unread / latest message subtly so the eye lands on it. */
.session-chat-msg.session-chat-unread {
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.30), 0 1px 2px rgba(0,0,0,0.05);
}
/* More menu dropdown — opens from status-bar "More" button. */
.mc-more-menu {
position: absolute;
top: 56px;
right: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 6px 24px rgba(0,0,0,0.10);
z-index: 220;
min-width: 220px;
padding: 6px;
}
.mc-more-menu a {
display: block;
padding: 8px 12px;
color: var(--text);
text-decoration: none;
border-radius: 6px;
font-size: 13px;
}
.mc-more-menu a:hover { background: var(--surface2); color: var(--accent); }
/* MC-3841 N14: thread-row ticket-id badge + unread indicator */
.mc-thread-item-ticket-ref {
font-size: 11px;
font-weight: 700;
color: var(--accent);
background: rgba(37, 99, 235, 0.10);
padding: 1px 6px;
border-radius: 4px;
margin-right: 4px;
}
/* MC-3841 N15 (Tessa IMPROVEMENT): widen the unread/read weight gap and
tint title text muted when read, full-text when unread. */
.mc-thread-item-title { font-weight: 500; }
.mc-thread-item:not(.mc-thread-item-unread):not(.active) .mc-thread-item-title { color: var(--muted); }
.mc-thread-item-unread .mc-thread-item-title { font-weight: 700; color: var(--text); }
.mc-thread-item-unread-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
margin-left: 4px;
vertical-align: middle;
}
/* Ticket header card above chat log when thread bound to MC-XXXX */
.mc-chat-ticket-header {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 8px;
flex: 0 0 auto;
}
.mc-tch-row {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
}
.mc-tch-id {
font-weight: 700;
color: var(--accent);
text-decoration: none;
background: rgba(37, 99, 235, 0.10);
padding: 2px 8px;
border-radius: 4px;
}
.mc-tch-status {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
}
.mc-tch-status-todo, .mc-tch-status-inbox { background: rgba(96, 165, 250, 0.2); color: var(--blue); }
.mc-tch-status-in_progress { background: rgba(251, 191, 36, 0.2); color: var(--amber); }
.mc-tch-status-needs_input, .mc-tch-status-waiting { background: rgba(251, 191, 36, 0.2); color: var(--amber); }
.mc-tch-status-in_review { background: rgba(167, 139, 250, 0.2); color: var(--purple); }
.mc-tch-status-done { background: rgba(74, 222, 128, 0.2); color: var(--green); }
.mc-tch-status-cancelled, .mc-tch-status-blocked { background: rgba(248, 113, 113, 0.2); color: var(--red); }
.mc-tch-project, .mc-tch-assignee { font-size: 11px; color: var(--muted); }
.mc-tch-title { font-size: 14px; font-weight: 600; margin-top: 6px; color: var(--text); }
.mc-tch-desc { margin-top: 6px; font-size: 12px; color: var(--muted); }
/* MC-3841 N23: aggressive mobile collapse. The N22b card still ate ~30% of
the viewport (Elmar screenshot 2026-05-21). On <=768px collapse the
ticket header to a single ~36px row: just the MC-XXXX badge + status +
single-line title (title clicks open the full ticket). Description
and the actions row are hidden — tap the MC- badge or use the
chat to drive the ticket. The whole card is tap-to-expand: tapping it
adds .expanded which un-hides desc + actions. */
@media (max-width: 768px) {
.mc-chat-ticket-header {
padding: 6px 10px;
margin-bottom: 4px;
cursor: pointer;
}
.mc-chat-ticket-header .mc-tch-row { gap: 6px; }
.mc-chat-ticket-header .mc-tch-project,
.mc-chat-ticket-header .mc-tch-assignee { display: none; }
.mc-chat-ticket-header .mc-tch-title {
font-size: 12px;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--muted);
font-weight: 500;
}
.mc-chat-ticket-header .mc-tch-desc,
.mc-chat-ticket-header .mc-tch-actions { display: none; }
.mc-chat-ticket-header.expanded {
cursor: default;
}
.mc-chat-ticket-header.expanded .mc-tch-project,
.mc-chat-ticket-header.expanded .mc-tch-assignee,
.mc-chat-ticket-header.expanded .mc-tch-desc,
.mc-chat-ticket-header.expanded .mc-tch-actions { display: revert; }
.mc-chat-ticket-header.expanded .mc-tch-actions { display: flex; }
.mc-chat-ticket-header.expanded .mc-tch-title {
white-space: normal;
color: var(--text);
font-size: 13px;
font-weight: 600;
}
.mc-tch-btn { padding: 4px 8px; font-size: 11px; }
}
.mc-tch-desc summary { cursor: pointer; user-select: none; }
.mc-tch-desc pre { white-space: pre-wrap; word-break: break-word; margin-top: 4px; font-family: inherit; }
.mc-tch-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mc-tch-btn {
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
text-decoration: none;
cursor: pointer;
}
.mc-tch-btn:hover { border-color: var(--accent); color: var(--accent); }
.mc-tch-btn:disabled { opacity: 0.6; cursor: default; }
.mc-tch-btn-done { color: var(--green); border-color: rgba(74, 222, 128, 0.3); }
.mc-tch-btn-done:hover { background: rgba(74, 222, 128, 0.15); }
.mc-tch-loading { font-size: 12px; color: var(--muted); padding: 4px 0; }
.mc-more-menu-group {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
padding: 10px 12px 4px;
}
/* Context menu on luci chat bubbles. ⋯ button visible on hover; click
opens a small popover with Copy / Reply / Create ticket actions. */
.session-chat-luci { position: relative; }
.session-chat-ctx-btn {
position: absolute;
top: 6px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--muted);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s;
font-size: 16px;
line-height: 1;
}
.session-chat-luci:hover .session-chat-ctx-btn,
.session-chat-ctx-btn:focus { opacity: 1; }
.session-chat-ctx-btn:hover { background: var(--surface2); color: var(--text); }
.mc-chat-msg-menu {
position: fixed;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 6px 24px rgba(0,0,0,0.12);
z-index: 300;
padding: 4px;
min-width: 180px;
}
.mc-chat-msg-menu button {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: none;
color: var(--text);
padding: 8px 10px;
cursor: pointer;
border-radius: 6px;
font-size: 13px;
}
.mc-chat-msg-menu button:hover { background: var(--surface2); color: var(--accent); }
/* MC-3841 N6: hide the legacy base.html .header (H1 + "Luci · Always On"
subheading + time) on the chat-first dashboard. Status bar already
shows greeting + time. The empty H1 was pushing the chat shell down,
clipping the status bar on viewports where the container is set to
100dvh - 16px. */
body[data-page="dashboard"] > .container > .header { display: none; }
/* MC-3841 N7 (Tessa B1): the board page is completely empty on mobile
because board.html includes the same session-composer partial, and the
composer's flex-column layout + the cross-page mode-row hide collapses
the rendered area to ~0px. Force the composer's children to a sane
block layout on /board so the board panel underneath actually shows. */
body[data-page="board"] .session-composer {
display: block;
height: auto;
}
body[data-page="board"] #session-chat-panel { display: none; }
body[data-page="board"] .container { height: auto; overflow: visible; }
/* MC-3841 N22 (mobile mess): the offline cloud FAB overlapped luci chat
bubbles and the composer on small screens. Hide on mobile — the
offline path is for desktop/Wi-Fi users; mobile users get the live
chat. The status-bar pills also cover online/offline state. */
@media (max-width: 768px) {
#offline-fab { display: none !important; }
}
/* Chat-app order: chat-log fills the space, composer sits at the bottom
(AI chat default). Document order has the form first; flex order
reverses it visually. */
body[data-page="dashboard"] .session-composer {
flex-direction: column;
}
body[data-page="dashboard"] #session-chat-panel { order: 1 !important; flex: 1 1 auto; }
body[data-page="dashboard"] #session-form { order: 2 !important; flex: 0 0 auto; }
body[data-page="dashboard"] .session-mode-row { order: 3 !important; flex: 0 0 auto; }
body[data-page="dashboard"] .session-composer-header { order: 0 !important; flex: 0 0 auto; }
/* END MC-3841 Phase N */
/* ── Home v2 shell tokens ──────────────────────────────────────────────
MC-4345 rebuilt Home as a chat/session workspace. These older mc4123
selectors remain the compatibility namespace for the sessions rail,
chips, buttons, modal, and nav primitives used by the newer workspace.
──────────────────────────────────────────────────────────────────── */
.mc4123-shell {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
align-items: flex-start;
/* min-height removed — page scrolls naturally (UA fix 1) */
}
@media (max-width: 768px) {
.mc4123-shell { grid-template-columns: 1fr; gap: 16px; }
}
.mc4123-rail {
position: sticky;
top: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 16px;
max-height: calc(100vh - 32px);
overflow-y: auto;
}
@media (max-width: 768px) {
.mc4123-rail { position: static; max-height: none; }
}
.mc4123-rail-section { display: flex; flex-direction: column; gap: 8px; }
.mc4123-rail-section--chats { flex: 1 1 auto; min-height: 0; }
.mc4123-rail-eyebrow {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 11px;
font-weight: 600;
color: var(--muted);
padding: 0 4px;
}
.mc4123-rail-eyebrow-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.mc4123-rail-newbtn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-transform: none;
letter-spacing: 0;
min-height: 32px;
}
.mc4123-rail-newbtn:hover { filter: brightness(1.1); }
.mc4123-rail-newbtn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.mc4123-rail-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.mc4123-rail-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
position: relative;
border-left: 3px solid transparent;
text-decoration: none;
color: var(--text);
cursor: pointer;
min-height: 44px;
}
.mc4123-rail-row:hover { background: var(--surface2); text-decoration: none; }
.mc4123-rail-row.is-active {
background: var(--surface2);
border-left-color: var(--accent);
}
.mc4123-rail-row.is-empty { opacity: 0.7; cursor: default; }
.mc4123-rail-row-main {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
color: inherit;
text-decoration: none;
}
.mc4123-rail-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--muted);
flex-shrink: 0;
}
.mc4123-rail-dot-live { background: var(--green); box-shadow: 0 0 6px rgba(74,222,128,0.6); }
.mc4123-rail-dot-idle { background: var(--muted); }
.mc4123-rail-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mc4123-rail-title {
font-size: 13px;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mc4123-rail-meta {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mc4123-rail-kebab {
background: transparent;
border: none;
color: var(--muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mc4123-rail-kebab:hover { background: var(--border); color: var(--text); }
.mc4123-rail-empty {
font-size: 12px;
color: var(--muted);
padding: 12px 8px;
border: 1px dashed var(--border);
border-radius: 8px;
}
.mc4123-rail-empty kbd {
font-family: inherit;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0 4px;
}
.mc4123-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mc4123-page-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
flex-wrap: wrap;
}
.mc4123-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc4123-eyebrow {
font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.mc4123-h1 {
font-size: 28px;
font-weight: 600;
color: var(--text);
margin-top: 4px;
}
.mc4123-status-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: var(--surface2);
border: 1px solid var(--border);
font-size: 12px;
color: var(--text);
}
.mc4123-zones {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 900px) { .mc4123-zones { grid-template-columns: minmax(0, 1fr); } }
.mc4123-zone {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 160px;
min-width: 0;
}
.mc4123-zone-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.mc4123-zone-title {
font-size: 16px;
font-weight: 600;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 8px;
text-transform: none;
letter-spacing: 0;
margin: 0;
}
.mc4123-zone-count {
font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
font-size: 12px;
color: var(--muted);
}
.mc4123-zone-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.mc4123-zone-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
min-height: 44px;
min-width: 0;
}
.mc4123-zone-row:hover { background: var(--surface2); }
.mc4123-zone-row-link {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 8px;
color: inherit;
text-decoration: none;
min-width: 0;
}
.mc4123-zone-row-link:hover { text-decoration: none; }
.mc4123-zone-row-title {
font-size: 13px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mc4123-zone-row-meta { font-size: 11px; color: var(--muted); }
.mc4123-zone-empty {
font-size: 13px;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 0;
}
.mc4123-mono {
font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
font-size: 12px;
color: var(--muted);
background: var(--surface2);
padding: 2px 6px;
border-radius: 4px;
}
.mc4123-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.mc4123-dot-live { background: var(--green); box-shadow: 0 0 6px rgba(74,222,128,0.6); animation: mc4123-pulse 1.6s ease-in-out infinite; }
.mc4123-dot-warn { background: var(--amber); }
.mc4123-dot-done { background: var(--green); }
.mc4123-dot-danger { background: var(--red); }
.mc4123-dot-idle { background: var(--muted); }
.mc4123-dot-review { background: var(--purple); }
@keyframes mc4123-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.mc4123-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 11px;
color: var(--muted);
}
.mc4123-chip-needs_input { color: var(--amber); border-color: rgba(251,191,36,0.4); }
.mc4123-chip-in_review { color: var(--purple); border-color: rgba(167,139,250,0.4); }
.mc4123-chip-waiting { color: var(--amber); border-color: rgba(251,191,36,0.4); }
.mc4123-chip-done { color: var(--green); border-color: rgba(74,222,128,0.4); }
.mc4123-honesty {
font-size: 12px;
color: var(--muted);
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 10px;
padding: 12px 16px;
}
.mc4123-honesty code {
font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
font-size: 11px;
background: var(--surface2);
padding: 1px 4px;
border-radius: 3px;
}
.mc4123-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
min-height: 36px;
text-decoration: none;
}
.mc4123-btn-primary { background: var(--accent); color: #fff; }
html[data-theme="dark"] .mc4123-btn-primary { color: #0f172a; }
.mc4123-btn-primary:hover { filter: brightness(1.08); }
.mc4123-btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.mc4123-btn-ghost:hover { color: var(--text); background: var(--surface2); }
.mc4123-modal {
position: fixed;
inset: 0;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
z-index: 3000;
background: transparent;
}
.mc4123-modal[hidden] { display: none; }
.mc4123-modal-scrim {
position: fixed;
inset: -120px;
background: rgba(0, 0, 0, 0.58);
}
.mc4123-modal-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 24px 28px;
width: min(480px, 92vw);
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.mc4123-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.mc4123-modal-head h2 { font-size: 18px; font-weight: 600; margin: 0; }
.mc4123-modal-foot {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 6px;
}
.mc4123-field { display: flex; flex-direction: column; gap: 4px; }
.mc4123-field-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.mc4123-field-hint {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
min-height: 15px;
}
.mc4123-field input,
.mc4123-field select,
.mc4123-field textarea {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
color: var(--text);
font-size: 14px;
font-family: inherit;
min-height: 36px;
}
.mc4123-field input:focus,
.mc4123-field select:focus,
.mc4123-field textarea:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
}
.mc4123-field-note {
font-size: 11px;
color: var(--muted);
line-height: 1.5;
background: var(--surface2);
border-radius: 8px;
padding: 10px 12px;
}
.mc4123-field-note code {
font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
font-size: 11px;
}
.mc4123-advanced {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
background: var(--bg);
}
.mc4123-advanced summary {
cursor: pointer;
color: var(--text);
font-size: 12px;
font-weight: 700;
}
.mc4123-advanced[open] {
gap: 10px;
}
/* END MC-4123 Home v2 */
/* ── MC-4123 Home v2 — Slice 2: mobile breakpoint + polish ──────────────
QA verdict (2026-05-24): desktop "promising/conditional pass", mobile
"blocking fail" — sidebar didn't collapse, header overflowed, recent
chats bled into Live now / Needs you cards, ticket rows collided.
Root cause: the v1 chat-shell rules at
`body[data-page="dashboard"] .container` set `height: 100dvh -
bottom-nav` + `overflow: hidden;` so the v2 grid couldn't grow past
the viewport and the rail/main flowed under each other.
Fix: when `.mc4123-shell` is present, opt out of those constraints,
restore document scroll, add bottom-nav clearance, and polish empty
states + chip wrap + row truncation. */
body[data-page="dashboard"]:has(.mc4123-shell) > .container {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
display: block !important;
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 24px);
}
@media (min-width: 769px) {
/* Desktop: no bottom-nav, normal page-padding is fine. */
body[data-page="dashboard"]:has(.mc4123-shell) > .container {
padding-bottom: 24px;
}
}
@media (max-width: 768px) {
body[data-page="dashboard"]:has(.mc4123-shell) > .container {
padding-left: 12px;
padding-right: 12px;
}
.mc4123-shell { gap: 12px; min-height: 0; }
.mc4123-page-head { gap: 8px; align-items: flex-start; }
.mc4123-h1 { font-size: 22px; }
.mc4123-page-actions { gap: 6px; }
.mc4123-zones { gap: 12px; }
.mc4123-zone { padding: 14px; min-height: 0; }
.mc4123-zone-row { padding: 10px 8px; }
/* Rail collapses to a single card on mobile; cap its height so a long
chat list doesn't push the zones off-screen. */
.mc4123-rail {
max-height: 50vh;
padding: 12px 10px;
}
.mc4123-rail-list { gap: 2px; }
/* Kill the v1 offline FAB on v2 too — it floated behind the cards. */
body[data-page="dashboard"]:has(.mc4123-shell) #offline-fab { display: none !important; }
}
/* Chips must never wrap to a second line — the `in_review` status text
was breaking across two lines on narrow rows. */
.mc4123-chip { white-space: nowrap; flex-shrink: 0; }
/* Zone rows: keep the link/title from being pushed off by trailing chips.
The chip is fixed-width; the link claims the remaining space and
ellipsises. */
.mc4123-zone-row > .mc4123-zone-row-link { min-width: 0; }
.mc4123-zone-row > .mc4123-zone-row-meta { flex-shrink: 0; margin-left: auto; }
/* Empty state polish: centred, soft, no flat-grey wall of text. */
.mc4123-zone-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 8px;
border: 1px dashed var(--border);
border-radius: 10px;
background: var(--surface2);
color: var(--muted);
text-align: center;
}
/* Rail row title needs the same min-width:0 trick so the ellipsis kicks
in instead of pushing the kebab off the row. */
.mc4123-rail-row { min-width: 0; }
.mc4123-rail-row-main { min-width: 0; }
/* Hide the bottom-nav-clearance FAB on v2 desktop too — it doesn't add
value here and the QA verdict called out a "detached floating control". */
@media (min-width: 769px) {
body[data-page="dashboard"]:has(.mc4123-shell) #offline-fab { display: none !important; }
}
/* ── MC-4123 UA Round 1 fixes ─────────────────────────────────────── */
/* Top navigation bar — visible desktop navigation (UA fix #2) */
.mc4123-topnav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 16px;
margin: 0 -16px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0;
position: sticky;
top: 0;
z-index: 90;
}
.mc4123-topnav-left,
.mc4123-topnav-right {
display: flex;
align-items: center;
gap: 8px;
}
.mc4123-topnav-brand {
font-size: 14px;
font-weight: 700;
color: var(--text);
text-decoration: none;
padding-right: 8px;
border-right: 1px solid var(--border);
margin-right: 4px;
white-space: nowrap;
}
.mc4123-topnav-brand:hover { text-decoration: none; color: var(--accent); }
.mc4123-topnav-link {
font-size: 13px;
color: var(--muted);
text-decoration: none;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
}
.mc4123-topnav-link:hover { color: var(--text); background: var(--surface2); text-decoration: none; }
.mc4123-topnav-link.active { color: var(--accent); }
.mc4123-topnav-divider {
width: 1px;
height: 20px;
background: var(--border);
flex-shrink: 0;
}
.mc4123-topnav-settings {
font-size: 16px;
line-height: 1;
padding: 4px 8px !important;
}
/* Mobile navigation (simplified top bar + dropdown menu) */
.mc4123-mobile-nav {
display: none;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0;
margin: 0 -12px 12px;
position: sticky;
top: 0;
z-index: 90;
}
.mc4123-mobile-nav-brand {
font-size: 14px;
font-weight: 700;
color: var(--text);
text-decoration: none;
}
.mc4123-mobile-chip { font-size: 11px; }
.mc4367-nav-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--muted);
font-size: 11px;
font-weight: 760;
line-height: 1;
}
.mc4123-mobile-menu {
display: flex;
flex-direction: column;
gap: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0 0 12px 12px;
margin: -12px -12px 12px;
padding: 8px 0;
position: sticky;
top: 44px;
z-index: 89;
}
.mc4123-mobile-menu[hidden] { display: none; }
.mc4123-mobile-menu a {
display: block;
padding: 10px 16px;
color: var(--text);
text-decoration: none;
font-size: 14px;
}
.mc4123-mobile-menu a:hover { background: var(--surface2); text-decoration: none; }
.mc4123-mobile-menu-status {
display: block;
padding: 10px 16px;
color: var(--muted);
font-size: 13px;
border-top: 1px solid var(--border);
margin-top: 4px;
}
/* Hide topnav on mobile, show mobile-nav */
@media (max-width: 768px) {
.mc4123-topnav { display: none; }
.mc4123-mobile-nav { display: flex; }
}
/* Hide mobile-nav on desktop */
@media (min-width: 769px) {
.mc4123-mobile-nav { display: none; }
.mc4123-mobile-menu { display: none !important; }
}
/* MC-4607: Home (dashboard_v2) has its own topnav at >=769px, so the fixed
bottom tab bar duplicated navigation in the 769-1023px band (the global
.bottom-nav rule only hides it at >=1024px). Hide it on Home there — SCOPED to
the dashboard page, because every OTHER page relies on the bottom-nav as its
desktop nav surface below 1024px. Do not make this global. */
@media (min-width: 769px) {
body[data-page="dashboard"] .bottom-nav-wrap { display: none; }
body[data-page="dashboard"] { padding-bottom: 0; }
}
/* MC-4607: Home ops status strip — one-line steering summary above the composer. */
.mc4607-ops-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
margin: 0 0 14px;
font-size: 13px;
color: var(--muted);
}
.mc4607-ops-seg {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
color: var(--text);
text-decoration: none;
border: 1px solid transparent;
transition: background .12s ease, border-color .12s ease;
}
.mc4607-ops-seg:hover {
background: var(--surface2);
border-color: var(--border);
text-decoration: none;
}
.mc4607-ops-sep { color: var(--border); user-select: none; }
.mc4607-ops-seg-danger { color: var(--danger, #d85b5b); }
/* MC-4917: Home first-viewport control surface — health, budget, review/input/unattended. */
.mc4917-home-brief {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.mc4917-signal-card {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--border) 74%, transparent 26%);
border-radius: 18px;
background: color-mix(in srgb, var(--surface) 88%, var(--surface2) 12%);
color: var(--text);
text-decoration: none;
box-shadow: 0 14px 34px -28px rgba(15, 23, 42, 0.42);
}
.mc4917-signal-card:hover,
.mc4917-signal-card:focus-visible {
border-color: color-mix(in srgb, var(--accent) 36%, var(--border) 64%);
text-decoration: none;
}
.mc4917-signal-kicker,
.mc4917-action-kicker {
color: var(--muted);
font-size: 11px;
font-weight: 760;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mc4917-signal-card strong {
font-size: 17px;
line-height: 1.15;
}
.mc4917-signal-card > span:last-child {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* MC-4942 U5a: ledger data-freshness line on the Home budget chip */
.mc4942-budget-freshness {
color: var(--muted);
font-size: 10px;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mc4917-signal-warn,
.mc4917-budget-warn,
.mc4917-budget-throttle {
border-color: color-mix(in srgb, var(--amber) 34%, var(--border) 66%);
background: color-mix(in srgb, var(--amber) 7%, var(--surface) 93%);
}
.mc4917-budget-block {
border-color: color-mix(in srgb, var(--danger) 42%, var(--border) 58%);
background: color-mix(in srgb, var(--danger) 8%, var(--surface) 92%);
}
.mc4917-action-board {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
border-radius: 22px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent 94%), transparent 48%),
color-mix(in srgb, var(--surface) 94%, var(--surface2) 6%);
}
.mc4917-action-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.mc4917-action-head > div {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
}
.mc4917-action-head strong {
color: var(--text);
font-size: 16px;
}
.mc4917-action-head a {
flex: 0 0 auto;
color: var(--accent);
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
.mc4917-action-lanes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.mc4917-action-lane {
min-width: 0;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
border-radius: 16px;
background: color-mix(in srgb, var(--surface2) 42%, transparent 58%);
}
.mc4917-action-lane h2 {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 8px;
color: var(--text);
font-size: 13px;
}
.mc4917-action-lane h2 span {
min-width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--surface);
color: var(--muted);
font-size: 11px;
}
.mc4917-action-lane ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
}
.mc4917-action-link {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
padding: 8px;
border-radius: 12px;
color: var(--text);
text-decoration: none;
}
.mc4917-action-link:hover,
.mc4917-action-link:focus-visible {
background: var(--surface);
text-decoration: none;
}
.mc4917-action-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mc4917-action-title {
color: var(--text);
font-size: 12.5px;
font-weight: 700;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mc4917-action-meta {
display: block;
overflow: hidden;
color: var(--muted);
font-size: 11px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.mc4917-action-meta span { display: inline; }
.mc4917-action-meta span + span::before { content: " \00B7 "; }
.mc4917-action-empty {
padding: 8px;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
/* MC-4607: micro-label before the assistant routing chips. */
.mc4607-assistant-label {
font-size: 12px;
color: var(--muted);
margin-right: 2px;
align-self: center;
}
/* Rail aligned with content after topnav (UA fix #3) — already handled by
removing min-height and using natural flow. Rail sticky works fine. */
/* Ticket card metadata — assigned_to + runtime liveness (UA fix #5) */
.mc4123-ticket-meta {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
margin-left: auto;
flex-wrap: wrap;
}
.mc4123-chip-assignee {
background: rgba(96, 165, 250, 0.1);
color: var(--blue);
font-size: 11px;
}
.mc4123-chip-liveness {
font-size: 11px;
text-transform: capitalize;
}
.mc4123-chip-liveness-live { background: rgba(74, 222, 128, 0.15); color: var(--green); }
.mc4123-chip-liveness-idle { background: rgba(139, 143, 163, 0.12); color: var(--muted); }
.mc4123-chip-liveness-stale { background: rgba(251, 191, 36, 0.15); color: var(--amber); }
.mc4123-chip-liveness-unknown { background: rgba(139, 143, 163, 0.08); color: var(--muted); }
/* Provider/model muted label */
.mc4123-meta-muted {
color: var(--muted);
opacity: 0.7;
}
/* Page head: removed old page-actions (now in topnav) */
.mc4123-page-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
/* END MC-4123 UA Round 1 fixes */
/* ── MC-4322 Home redesign feedback: chip-soup cleanup, message-first hero,
collapsible session history, truncation forgiveness ────────────────── */
.mc4322-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
margin: 12px 0 16px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(96,165,250,0.10), rgba(167,139,250,0.08));
border: 1px solid rgba(96,165,250,0.18);
}
.mc4322-hero-title {
margin: 0 0 4px;
font-size: 18px;
font-weight: 600;
color: var(--text, #e9ecf3);
}
.mc4322-hero-sub {
margin: 0;
color: var(--muted);
font-size: 13px;
}
.mc4322-hero-cta {
flex-shrink: 0;
white-space: nowrap;
}
/* Owner as subdued inline text, not a competing chip */
.mc4123-ticket-owner {
color: var(--muted);
font-size: 11px;
opacity: 0.85;
}
.mc4123-chip-muted {
background: rgba(139, 143, 163, 0.08);
color: var(--muted);
font-size: 11px;
}
/* Collapsible session history in the rail */
.mc4123-rail-recents { margin-top: 6px; }
.mc4123-rail-recents > .mc4123-rail-recents-summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 4px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
}
.mc4123-rail-recents > .mc4123-rail-recents-summary::-webkit-details-marker { display: none; }
.mc4123-rail-recents > .mc4123-rail-recents-summary::before {
content: "▸";
display: inline-block;
margin-right: 6px;
transition: transform 0.15s ease;
font-size: 9px;
}
.mc4123-rail-recents[open] > .mc4123-rail-recents-summary::before {
transform: rotate(90deg);
}
.mc4123-rail-recents-count {
background: rgba(139, 143, 163, 0.15);
border-radius: 8px;
padding: 1px 6px;
font-size: 10px;
color: var(--muted);
}
.mc4345-session-filters {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
margin: 4px 0 8px;
padding: 3px;
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 10px;
background: rgba(255,255,255,0.025);
}
.mc4345-session-filter {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 28px;
border-radius: 7px;
color: var(--muted);
font-size: 11px;
text-decoration: none;
}
.mc4345-session-filter:hover,
.mc4345-session-filter.is-active {
background: var(--surface2, rgba(255,255,255,0.06));
color: var(--text, #e9ecf3);
}
.mc4345-session-filter span { opacity: 0.72; }
.mc4123-rail-newbtn-primary {
width: 100%;
justify-content: center;
font-weight: 600;
}
/* Zone row title: ellipsis with min-width so it isn't squeezed by chips */
.mc4123-zone-row-link { min-width: 0; flex: 1 1 auto; }
.mc4123-zone-row-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* END MC-4322 */
/* ── MC-4124 Board + Ticket Detail UX reset ───────────────────────────── */
:root {
--mc-color-scheme: dark;
--mc-card-radius: 8px;
--mc-chip-radius: 7px;
}
html[data-theme="light"] { --mc-color-scheme: light; }
.mc-context-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
min-width: 0;
margin: -2px 0 10px;
color: var(--muted);
font-size: 13px;
line-height: var(--lh-normal);
}
.mc-breadcrumb-path {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.mc-breadcrumb-link,
.mc-breadcrumb-label,
.mc-breadcrumb-current {
flex: 0 0 auto;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.mc-breadcrumb-middle {
display: block;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mc-breadcrumb-middle .mc-breadcrumb-link,
.mc-breadcrumb-middle .mc-breadcrumb-label {
display: inline;
}
.mc-breadcrumb-link {
color: var(--muted);
text-decoration: none;
}
.mc-breadcrumb-link:hover {
color: var(--text);
text-decoration: none;
}
.mc-breadcrumb-current {
color: var(--text);
font-weight: 720;
}
.mc-context-separator { color: var(--border); }
.mc-context-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex: 0 0 auto;
min-width: 0;
}
.mc-context-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 5px 9px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.mc-context-action:hover {
color: var(--text);
border-color: var(--border);
background: color-mix(in srgb, var(--surface) 72%, transparent);
text-decoration: none;
}
.mc-context-spacer { flex: 1; }
.inbox-header-badge {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 2px 10px;
margin-left: 6px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font-size: 12px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.inbox-header-badge:hover {
color: var(--text);
border-color: var(--blue);
text-decoration: none;
}
.filter-tab.inbox-header-badge {
min-height: 38px;
margin-left: 0;
padding: 8px 14px;
border-radius: 7px;
background: var(--surface);
color: var(--muted);
font-size: 13px;
font-weight: 600;
}
.filter-tab.inbox-header-badge.active {
background: var(--surface2);
color: var(--text);
border-color: var(--muted);
}
.board-search-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 8px 0 10px;
}
.board-search-input,
.board-toolbar-link,
.board-toolbar-button,
.board-toolbar-select {
min-height: 38px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-family: inherit;
font-size: 13px;
padding: 8px 11px;
}
.board-search-input {
flex: 1;
min-width: min(280px, 100%);
font-size: 14px;
outline: none;
}
.board-search-input:focus {
border-color: var(--blue);
}
.board-toolbar-link {
display: inline-flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.board-toolbar-link:hover {
border-color: var(--muted);
text-decoration: none;
}
.board-toolbar-button,
.board-toolbar-select {
cursor: pointer;
flex-shrink: 0;
}
.board-toolbar-select {
appearance: auto;
color-scheme: var(--mc-color-scheme);
}
.board-status-tabs {
position: sticky;
top: 0;
z-index: 50;
margin-bottom: 10px;
padding: 8px 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.filter-tab {
border-radius: 7px;
letter-spacing: 0;
}
.filter-tab.active {
background: var(--surface2);
color: var(--text);
border-color: var(--muted);
box-shadow: inset 0 -2px 0 var(--blue);
}
html[data-theme="light"] .filter-tab.active {
background: var(--bg);
}
.ticket-list {
gap: 8px;
}
.ticket-list .ticket-card {
position: relative;
border: 0;
border-radius: var(--mc-card-radius);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--state-color, var(--blue)) 4%), var(--surface));
padding: 0;
overflow: hidden;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--border) 72%, transparent),
0 1px 2px rgba(0,0,0,0.08);
transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.ticket-list .ticket-card::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 999px 999px 0;
background: var(--state-color, var(--blue));
}
.ticket-list .ticket-card:hover {
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--state-color, var(--blue)) 44%, var(--border)),
0 8px 22px rgba(0,0,0,0.12);
transform: translateY(-1px);
text-decoration: none;
}
.ticket-list .ticket-card-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: start;
padding: 8px 12px 6px 14px;
}
.ticket-list .ticket-card-main {
min-width: 0;
}
.ticket-list .ticket-card-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 8px;
margin-bottom: 0;
}
.ticket-list .priority-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: var(--muted);
margin-top: 8px;
}
.priority-critical { background: var(--red); }
.priority-high { background: var(--amber); }
.priority-medium { background: var(--blue); }
.priority-low { background: var(--muted); }
.ticket-card-identity {
min-width: 0;
}
.ticket-card-kicker {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.ticket-list .ticket-card-id {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
color: color-mix(in srgb, var(--state-color, var(--blue)) 80%, var(--muted));
font-weight: 760;
white-space: nowrap;
}
.ticket-card-project {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--muted);
font-size: 11px;
}
.ticket-card-project::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
margin: 0 6px 2px 0;
background: color-mix(in srgb, var(--muted) 70%, transparent);
}
.ticket-list .ticket-card-title {
font-size: 15px;
font-weight: 720;
line-height: 1.28;
color: var(--text);
overflow: visible;
display: block;
max-height: none;
-webkit-line-clamp: unset;
-webkit-box-orient: initial;
overflow-wrap: anywhere;
margin-top: 1px;
}
.ticket-state-pill {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 22px;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--state-color, var(--blue)) 12%, transparent);
color: color-mix(in srgb, var(--state-color, var(--blue)) 88%, var(--text));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-color, var(--blue)) 34%, transparent);
font-size: 11px;
font-weight: 720;
white-space: nowrap;
}
.state-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--state-color, var(--blue));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-color, var(--blue)) 14%, transparent);
}
.state-label,
.next-action-label {
color: var(--muted);
font-size: 9px;
font-weight: 760;
text-transform: uppercase;
letter-spacing: 0;
}
.ticket-state-pill strong {
color: inherit;
font-size: 11px;
font-weight: 760;
}
.ticket-list .ticket-card-intent {
margin-top: 4px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ticket-list .ticket-next-action {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 18px;
padding: 2px 0;
border: 0;
border-radius: 0;
color: color-mix(in srgb, var(--text) 78%, var(--state-color, var(--blue)));
background: transparent;
font-size: 11px;
font-weight: 650;
}
.ticket-list .ticket-card-quick-actions {
justify-content: flex-end;
}
.ticket-list .ticket-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 5px 12px 7px 14px;
border-top: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
background: color-mix(in srgb, var(--surface2) 22%, transparent);
font-size: 11px;
}
.ticket-meta-group,
.ticket-meta-extras {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.ticket-meta-group {
flex: 1 1 auto;
}
.ticket-meta-extras {
flex: 0 1 auto;
gap: 6px;
justify-content: flex-end;
margin-left: auto;
}
.ticket-meta-extras:empty {
display: none;
}
.ticket-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 22px;
color: var(--muted);
font-size: 11px;
text-decoration: none;
white-space: nowrap;
}
.ticket-meta-item[role="link"],
.workflow-phases-badge[role="link"] {
cursor: pointer;
}
.ticket-meta-item[role="link"]:focus-visible,
.workflow-phases-badge[role="link"]:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
.ticket-meta-item:hover {
text-decoration: none;
color: var(--text);
}
.ticket-meta-copy {
display: inline-flex;
align-items: baseline;
gap: 4px;
min-width: 0;
}
.ticket-owner-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: color-mix(in srgb, var(--surface2) 72%, var(--state-color, var(--blue)) 10%);
color: var(--text);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 72%, transparent);
font-size: 10px;
font-weight: 760;
}
.ticket-meta-chip,
.tag-project-sm,
.unread-badge,
.workflow-phases-badge {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 22px;
padding: 2px 7px;
border-radius: var(--mc-chip-radius);
border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
background: color-mix(in srgb, var(--surface) 70%, transparent);
color: var(--muted);
font-size: 11px;
font-weight: 600;
white-space: normal;
text-decoration: none;
}
.ticket-meta-item strong,
.ticket-meta-chip strong {
font-size: 11px;
font-weight: 650;
color: var(--text);
}
.ticket-meta-label {
color: var(--muted);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
}
.ticket-meta-runtime.runtime-liveness,
.ticket-meta-runtime {
line-height: 1.2;
margin-left: 0;
}
.ticket-meta-runtime:hover {
text-decoration: none;
color: var(--text);
}
.runtime-dot {
line-height: 1;
font-size: 8px;
}
.runtime-liveness-live .runtime-dot,
.runtime-liveness-live .runtime-liveness-label,
.runtime-liveness-live strong { color: var(--green); }
.runtime-liveness-stale .runtime-dot,
.runtime-liveness-stale .runtime-liveness-label,
.runtime-liveness-stale strong { color: var(--amber); }
.runtime-liveness-orphan .runtime-dot,
.runtime-liveness-orphan .runtime-liveness-label,
.runtime-liveness-orphan strong { color: var(--red); }
.runtime-liveness-unknown .runtime-dot,
.runtime-liveness-unknown .runtime-liveness-label,
.runtime-liveness-unknown strong,
.runtime-liveness-idle strong,
.runtime-liveness-pending strong,
.runtime-liveness-paused strong,
.runtime-liveness-closed strong { color: var(--muted); }
.review-snippet {
display: inline;
max-width: none;
margin-top: 0;
white-space: normal;
overflow: visible;
text-overflow: clip;
color: var(--muted);
font-style: normal;
}
/* MC-4376: first-class artifact link on pending board cards + detail. */
.pending-cta-link {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 8px;
font-size: 12px;
font-weight: 600;
color: var(--accent, #2563eb);
cursor: pointer;
white-space: nowrap;
}
.pending-cta-link:hover { text-decoration: underline; }
.pending-cta-link-hero {
display: inline-block;
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: var(--accent, #2563eb);
}
.pending-cta-link-hero:hover { text-decoration: underline; }
/* MC-4124 gate follow-up: state rail + stronger operational hierarchy. */
.ticket-status-inbox { --state-color: var(--blue); }
.ticket-status-todo { --state-color: var(--muted); }
.ticket-status-in_progress { --state-color: var(--amber); }
.ticket-status-needs_input { --state-color: var(--purple); }
.ticket-status-in_review { --state-color: var(--blue); }
.ticket-status-waiting { --state-color: var(--amber); }
.ticket-status-blocked { --state-color: var(--red); }
.ticket-status-done { --state-color: var(--green); }
.ticket-status-cancelled { --state-color: var(--red); }
/* MC-4472: was display:none (desktop icon-only). Show on all viewports so the
action row reads "→ Todo / z Snooze / ✓ Done / ✗ Cancel". */
.quick-btn-label { display: inline; }
.quick-btn-icon { line-height: 1; }
@media (max-width: 768px) {
.mc-context-nav {
margin-bottom: 8px;
overflow: hidden;
flex-wrap: nowrap;
}
.mc-breadcrumb-path {
flex: 1 1 auto;
}
.mc-breadcrumb-middle {
flex: 0 1 auto;
max-width: 34vw;
}
.mc-context-actions {
flex-shrink: 0;
}
.mc-context-action {
min-height: 32px;
padding: 5px 8px;
}
.board-search-bar {
gap: 6px !important;
}
.board-search-bar .board-search-input {
flex: 1 0 100% !important;
min-width: 0;
}
.board-toolbar-link,
.board-toolbar-button,
.board-toolbar-select,
.board-filters-toggle {
flex: 1 1 calc(50% - 6px);
justify-content: center;
}
.board-status-tabs {
top: 0;
padding: 6px 0;
}
.ticket-list .ticket-card {
padding: 0;
}
.ticket-list .ticket-card-grid {
grid-template-columns: 1fr;
gap: 8px;
padding: 10px 12px 8px 14px;
}
.ticket-list .ticket-card-header {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"dot identity"
"state state";
align-items: start;
column-gap: 8px;
row-gap: 6px;
}
.ticket-list .priority-dot {
grid-area: dot;
margin-top: 8px;
}
.ticket-card-identity {
grid-area: identity;
}
.ticket-state-pill {
grid-area: state;
justify-self: start;
}
.ticket-list .ticket-card-id {
font-size: 11px;
}
.ticket-list .ticket-card-title {
order: initial;
font-size: 14px;
line-height: 1.32;
max-height: none;
display: block;
-webkit-line-clamp: unset;
overflow: visible;
overflow-wrap: anywhere;
}
.ticket-list .ticket-card-quick-actions {
order: 0;
justify-content: flex-start;
flex-wrap: wrap;
gap: 6px;
margin-top: 0;
}
.quick-btn {
width: auto;
min-width: 66px;
height: 38px;
padding: 0 9px;
gap: 5px;
border-radius: 8px;
font-size: 13px;
}
.quick-btn-label {
display: inline;
font-size: 11px;
font-weight: 750;
}
.quick-btn-done {
margin-left: 0;
}
.ticket-list .ticket-card-meta {
padding: 9px 12px 12px;
gap: 6px;
align-items: flex-start;
}
.ticket-meta-group,
.ticket-meta-extras { gap: 6px; }
.ticket-meta-extras {
flex-basis: 100%;
justify-content: flex-start;
margin-left: 0;
}
.ticket-meta-item { flex: 0 1 auto; }
.ticket-meta-chip,
.tag-project-sm,
.unread-badge,
.workflow-phases-badge {
min-height: 30px;
font-size: 12px;
}
body[data-page="board"] .fab {
display: none;
}
}
/* ── MC-4283: page-level Back / Home / Board nav strip ───────────────
Sits at the top of every page that extends base.html (except the
home/cockpit dashboard). Desktop has no bottom-nav (hidden ≥1024px,
see MC-3841 Phase J), so without this strip a page like /reports is
a navigational dead-end. On mobile the bottom-nav still covers Home
and Board, but the strip is kept visible to expose the Back button,
which the bottom-nav does not provide.
*/
.page-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 12px;
}
.page-nav-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
padding: 6px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
transition: background 0.12s, border-color 0.12s, color 0.12s;
min-height: 34px;
}
.page-nav-btn:hover {
background: var(--surface2, var(--surface));
border-color: var(--blue);
color: var(--text);
text-decoration: none;
}
.page-nav-btn:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
.page-nav-btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.page-nav-btn.is-active {
border-color: var(--blue);
color: var(--blue);
}
@media (max-width: 480px) {
/* Mobile: bottom-nav already has Home / Board, so hide those links
and keep only the Back button to reduce nav clutter. */
.page-nav { gap: 6px; margin-bottom: 8px; }
.page-nav-btn:not(.page-nav-back) { display: none; }
.page-nav-back { padding: 5px 10px; font-size: 12px; min-height: 44px; min-width: 44px; }
.page-nav-back svg { width: 14px; height: 14px; }
}
/* MC-4322 part 2 — inline conversation pane on Home v2. Mirrors AionUI /
Codex / Claude Code: a chat thread takes over the main column with a
message log and composer, while the rail keeps session history accessible. */
.mc4322-hero-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.mc4322-hero-link {
background: transparent; border: 0; color: var(--accent, #60a5fa);
font-size: 13px; cursor: pointer; padding: 6px 4px;
}
.mc4322-hero-link:hover { text-decoration: underline; }
.mc4322-pane {
display: flex; flex-direction: column;
min-height: calc(100vh - 220px);
margin: 8px 0 16px;
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 14px;
background: var(--surface, rgba(255,255,255,0.02));
overflow: hidden;
}
.mc4322-pane-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 12px 16px;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
background: rgba(255,255,255,0.02);
}
.mc4322-pane-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text, #e9ecf3); }
.mc4322-pane-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mc4322-pane-meta-dim { opacity: 0.7; }
.mc4322-pane-actions { display: flex; align-items: center; gap: 8px; }
.mc4322-end-session { color: var(--muted); }
.mc4322-end-session:hover { color: var(--red, #f87171); border-color: rgba(248,113,113,0.35); }
.mc4322-session-ended {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 9px;
border-radius: 9px;
background: rgba(139,143,163,0.12);
color: var(--muted);
font-size: 12px;
}
.mc4322-pane-log {
flex: 1 1 auto; min-height: 320px;
overflow-y: auto;
padding: 14px 16px 10px;
display: flex; flex-direction: column; gap: 6px;
}
.mc4322-pane-empty {
color: var(--muted); font-style: italic; text-align: center;
padding: 40px 16px;
}
.mc4322-msg {
width: fit-content;
max-width: min(72%, 720px);
display: flex;
flex-direction: column;
gap: 1px;
}
.mc4322-msg-user {
align-self: flex-end;
}
.mc4322-msg-luci, .mc4322-msg-assistant {
align-self: flex-start;
}
.mc4322-msg-system {
align-self: flex-start;
max-width: min(68%, 620px);
}
.mc4322-msg-pending { opacity: 0.65; }
.mc4322-msg-failed .mc4322-msg-body { border-color: var(--red, #f87171); opacity: 0.85; }
.mc4322-msg-note { font-size: 11px; color: var(--red, #f87171); margin-top: 2px; }
/* MC-UX-POLISH: compact content-height bubbles — body owns background/padding */
.mc4322-msg-body {
padding: 6px 11px;
border-radius: 16px;
font-size: 14px;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
.mc4322-msg-user .mc4322-msg-body {
background: #f1edff;
color: var(--text);
border: 1px solid color-mix(in srgb, var(--purple) 18%, var(--border) 82%);
border-bottom-right-radius: 5px;
}
.mc4322-msg-luci .mc4322-msg-body,
.mc4322-msg-assistant .mc4322-msg-body {
background: color-mix(in srgb, var(--surface2) 80%, #ffffff 20%);
color: var(--text);
border: 1px solid color-mix(in srgb, var(--surface2) 60%, var(--border) 40%);
border-bottom-left-radius: 5px;
}
.mc4322-msg-system .mc4322-msg-body {
color: color-mix(in srgb, var(--green) 72%, var(--text) 28%);
background: color-mix(in srgb, var(--green) 10%, var(--surface) 90%);
border: 1px solid color-mix(in srgb, var(--green) 28%, var(--border) 72%);
font-size: 12px;
font-style: normal;
border-radius: 12px;
}
/* MC-UX-POLISH: message role labels (outside bubble) + debug content styling */
.mc4322-msg-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.7;
padding: 0 2px;
}
.mc4322-msg-user .mc4322-msg-label { color: var(--purple); text-align: right; }
.mc4322-msg-luci .mc4322-msg-label,
.mc4322-msg-assistant .mc4322-msg-label { color: var(--accent); }
.mc4322-msg-system .mc4322-msg-label { color: var(--green); }
.mc4322-msg-debug {
opacity: 0.55;
font-size: 12px;
}
.mc4322-msg-debug .mc4322-msg-label {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mc4322-msg-debug .mc4322-msg-body {
background: transparent;
border: 0;
padding: 0;
font-size: 12px;
}
/* MC-UX-POLISH fix 2: TUI spinner status lines render as a muted centered chip */
.mc4322-msg-status {
align-self: center;
max-width: none;
width: auto;
}
.mc4322-status-chip {
display: inline-block;
font-size: 11px;
color: var(--muted);
background: color-mix(in srgb, var(--surface2) 60%, transparent);
border-radius: 10px;
padding: 2px 10px;
letter-spacing: 0.03em;
}
/* MC-UX-POLISH: hide repeated role labels in same-role runs for visual density.
Only applies to non-failed messages so error notes remain attributable. */
.mc4322-msg-user + .mc4322-msg-user:not(.mc4322-msg-failed) .mc4322-msg-label,
.mc4322-msg-luci + .mc4322-msg-luci:not(.mc4322-msg-failed) .mc4322-msg-label,
.mc4322-msg-assistant + .mc4322-msg-assistant:not(.mc4322-msg-failed) .mc4322-msg-label {
display: none;
}
.mc4322-composer-ended-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
background: color-mix(in srgb, var(--surface2) 60%, var(--bg) 40%);
border-bottom: 1px solid var(--border);
}
.mc4322-composer-send:disabled {
opacity: 0.35;
cursor: not-allowed;
filter: grayscale(0.6);
}
.mc4322-composer {
display: flex; gap: 8px; padding: 10px 12px;
border-top: 1px solid var(--border, rgba(255,255,255,0.08));
background: rgba(255,255,255,0.02);
}
.mc4322-composer-input {
flex: 1 1 auto; resize: none; min-height: 38px; max-height: 220px;
padding: 9px 12px; border-radius: 10px;
border: 1px solid var(--border, rgba(255,255,255,0.12));
background: var(--bg, #0e1117); color: var(--text, #e9ecf3);
font-family: inherit; font-size: 14px; line-height: 1.45;
}
.mc4322-composer-input:focus { outline: none; border-color: var(--accent, #60a5fa); }
.mc4322-composer-send { flex-shrink: 0; align-self: flex-end; }
.mc4322-pane-status {
padding: 6px 16px 10px; font-size: 12px; color: var(--muted);
}
.mc4322-pane-status.is-error { color: var(--red, #f87171); }
@media (max-width: 720px) {
.mc4322-pane { min-height: calc(100vh - 260px); }
.mc4322-pane-log {
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 28px);
scroll-padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 28px);
}
.mc4322-composer {
margin-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
}
.mc4322-msg { max-width: 92%; }
}
/* ── MC-4345 Home: AionUi-style chat/session workspace ─────────────── */
body[data-page="dashboard"]:has(.mc4123-shell) > .container {
max-width: 1200px;
}
.mc4123-shell {
grid-template-columns: minmax(270px, 300px) minmax(0, 1fr);
gap: 16px;
align-items: stretch;
min-height: calc(100dvh - 112px);
}
.mc4123-main {
min-height: 0;
}
.mc4123-rail {
top: 72px;
max-height: calc(100dvh - 92px);
border-radius: 8px;
padding: 12px;
gap: 12px;
}
.mc4123-rail-scrim,
.mc4123-rail-mobile-head {
display: none;
}
.mc4123-rail-newbtn {
min-height: 38px;
font-size: 13px;
}
.mc4345-active-sessions {
display: flex;
flex-direction: column;
gap: 6px;
padding: 2px 0 8px;
border-bottom: 1px solid var(--border);
}
.mc4345-sessions-module {
display: flex;
flex-direction: column;
gap: 6px;
padding: 2px 0 8px;
}
.mc4345-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 28px;
color: var(--muted);
font-size: 11px;
font-weight: 760;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mc4345-session-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
padding: 0;
margin: 0;
}
.mc4345-session-row {
min-width: 0;
}
.mc4345-session-row-ticket {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 4px;
}
.mc4345-session-link {
display: flex;
align-items: flex-start;
gap: 9px;
min-height: 46px;
padding: 8px 9px;
border: 1px solid transparent;
border-radius: 7px;
color: var(--text);
text-decoration: none;
min-width: 0;
}
.mc4345-session-link:hover,
.mc4345-session-link:focus-visible {
background: var(--surface2);
border-color: var(--border);
text-decoration: none;
}
.mc4345-session-copy {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
flex: 1 1 auto;
}
.mc4345-session-title {
color: var(--text);
font-size: 13px;
font-weight: 650;
line-height: 1.28;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mc4345-session-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 7px;
color: var(--muted);
font-size: 11px;
line-height: 1.25;
}
.mc4345-session-ticket-chip {
align-self: start;
margin-top: 8px;
padding: 3px 7px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface2);
color: var(--accent);
font-size: 11px;
font-weight: 760;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.mc4345-session-ticket-chip:hover,
.mc4345-session-ticket-chip:focus-visible {
border-color: color-mix(in srgb, var(--accent) 42%, var(--border) 58%);
background: color-mix(in srgb, var(--accent) 10%, var(--surface2) 90%);
text-decoration: none;
}
.mc4345-session-row-controller .mc4345-session-title {
color: color-mix(in srgb, var(--text) 88%, var(--accent) 12%);
}
.mc4345-session-empty {
padding: 8px 9px;
color: var(--muted);
font-size: 12px;
}
.mc4367-mobile-session-surface {
display: none;
}
.mc4123-rail-row {
align-items: flex-start;
gap: 10px;
padding: 9px 9px;
border-radius: 7px;
}
.mc4123-rail-title {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.28;
}
.mc4123-rail-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 7px;
white-space: normal;
line-height: 1.25;
}
.mc4123-rail-state {
font-weight: 700;
}
.mc4123-rail-state-live { color: var(--green); }
.mc4123-rail-state-failed { color: var(--red); }
.mc4123-rail-state-history { color: var(--muted); }
.mc4123-rail-state-ended { color: var(--muted); }
.mc4123-rail-state-archived { color: var(--muted); opacity: 0.8; }
.mc4123-rail-state-idle { color: var(--text-dim); }
.mc4123-rail-dot-danger { background: var(--red); }
.mc4322-home,
.mc4322-pane {
min-height: calc(100dvh - 132px);
margin: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
overflow: hidden;
}
.mc4322-home {
display: flex;
flex-direction: column;
}
.mc4322-home-inner {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.mc4322-workspace-head,
.mc4322-pane-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--surface) 88%, var(--surface2) 12%);
}
.mc4322-workspace-title-wrap,
.mc4322-pane-title-wrap {
min-width: 0;
}
.mc4322-workspace-kicker {
display: block;
margin-bottom: 3px;
color: var(--muted);
font-size: 11px;
font-weight: 760;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mc4322-home-greeting {
margin: 0;
color: var(--text);
font-size: 18px;
font-weight: 680;
line-height: 1.25;
letter-spacing: 0;
}
.mc4322-pane-title {
text-transform: none;
letter-spacing: 0;
}
.mc4322-home-sub {
margin: 3px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.mc4322-workspace-chats {
display: none;
}
.mc4322-workspace-log {
flex: 1 1 auto;
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--bg);
}
.mc4322-start-state {
max-width: 520px;
text-align: center;
color: var(--muted);
}
.mc4322-start-state-label {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 2px 8px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font-size: 12px;
font-weight: 700;
}
.mc4322-start-state p {
margin: 10px 0 0;
font-size: 15px;
line-height: 1.4;
}
.mc4322-home-composer {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.mc4322-home-composer:focus-within {
box-shadow: inset 0 2px 0 var(--accent);
}
.mc4327-runtime-picker {
display: flex;
flex-direction: column;
gap: 8px;
}
.mc4327-provider-strip {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 1px;
}
.mc4327-provider-pill {
flex: 0 0 auto;
min-height: 32px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface2);
color: var(--muted);
font: inherit;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.mc4327-provider-pill.is-active {
color: var(--text);
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, var(--surface) 84%);
}
.mc4327-runtime-selects {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.85fr);
gap: 8px;
}
.mc4327-runtime-selects select {
width: 100%;
min-height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--bg);
color: var(--text);
font: inherit;
font-size: 13px;
}
.mc4322-home-input {
width: 100%;
min-height: 92px;
max-height: 280px;
resize: none;
padding: 10px 11px;
border: 1px solid var(--border);
border-radius: 8px;
outline: none;
background: var(--bg);
color: var(--text);
font: inherit;
font-size: 15px;
line-height: 1.45;
}
.mc4322-home-input:focus {
border-color: var(--accent);
}
.mc4322-home-composer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mc4322-home-side-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.mc4322-home-link {
min-height: 32px;
padding: 5px 8px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.mc4322-home-link:hover {
color: var(--text);
border-color: var(--border);
background: var(--surface2);
}
.mc4322-home-send {
min-width: 112px;
justify-content: center;
}
.mc4322-home-send[disabled] {
opacity: 0.65;
cursor: progress;
}
.mc4322-runtime-help {
color: var(--muted);
font-size: 12px;
}
.mc4322-runtime-help summary {
width: max-content;
cursor: pointer;
font-weight: 650;
}
.mc4322-runtime-help p {
margin: 6px 0 0;
line-height: 1.45;
}
.mc4322-home-status {
padding: 0 14px 12px;
color: var(--muted);
font-size: 12px;
}
.mc4322-home-status.is-error {
color: var(--red);
}
.mc4322-pane {
display: flex;
flex-direction: column;
}
.mc4322-pane-log {
flex: 1 1 auto;
min-height: 0;
background: var(--bg);
}
/* MC-4370: professional AionUI-quality Home launcher. */
.mc4370-hero-shell {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: min(100%, 1040px);
margin: 0 auto;
padding: 12px 28px;
gap: 12px;
}
.mc4370-hero-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 0;
border: 0;
background: transparent;
}
.mc4370-eyebrow {
margin: 0;
color: color-mix(in srgb, var(--accent) 74%, var(--muted) 26%);
letter-spacing: 0.12em;
}
.mc4370-hero-head .mc4322-home-greeting {
font-size: clamp(28px, 4vw, 46px);
font-weight: 760;
letter-spacing: -0.045em;
line-height: 1.05;
}
.mc4370-hero-head .mc4322-home-sub {
max-width: 560px;
margin: 0;
font-size: 15px;
line-height: 1.55;
}
.mc4370-hero-actions {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}
.mc4370-hero-actions .mc4324-campaign-action {
border-color: color-mix(in srgb, var(--accent) 30%, var(--border) 70%);
background: color-mix(in srgb, var(--accent) 9%, var(--surface) 91%);
color: var(--text);
}
.mc4370-hero-sessions-btn {
gap: 8px;
border-color: color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
background: color-mix(in srgb, var(--surface2) 70%, #f3efff 30%);
color: var(--text);
}
.mc4370-hero-sessions-btn span {
min-width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--surface);
color: var(--muted);
font-size: 12px;
font-weight: 760;
}
.mc4324-campaign-hint {
max-width: 520px;
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.mc4370-active-surface {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
border-radius: 20px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent 93%), transparent 44%),
color-mix(in srgb, var(--surface) 96%, var(--surface2) 4%);
box-shadow: 0 14px 34px -24px rgba(15, 23, 42, 0.42);
}
.mc4370-active-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mc4370-active-head > div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mc4370-active-kicker {
color: var(--muted);
font-size: 11px;
font-weight: 760;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mc4370-active-head strong {
color: var(--text);
font-size: 16px;
line-height: 1.2;
}
.mc4370-active-all {
flex: 0 0 auto;
min-height: 36px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.mc4370-active-all:hover,
.mc4370-active-all:focus-visible {
border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
background: var(--surface2);
}
.mc4370-active-list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px;
margin: 0;
padding: 0;
}
.mc4370-active-list .mc4345-session-row-ticket {
grid-template-columns: minmax(0, 1fr) auto;
}
.mc4370-active-list .mc4345-session-link {
min-height: 56px;
padding: 10px;
border-color: color-mix(in srgb, var(--border) 78%, transparent 22%);
background: var(--surface);
}
.mc4370-active-list .mc4345-session-row-controller .mc4345-session-link {
opacity: 0.78;
background: transparent;
}
.mc4370-active-list .mc4345-session-row-controller {
order: 20;
}
.mc4370-active-list .mc4345-session-ticket-chip {
margin-top: 10px;
}
.mc4370-active-list .mc4345-session-empty {
padding: 10px 0 2px;
}
.mc4370-hero-shell .mc4322-home-composer {
gap: 10px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
border-radius: 24px;
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 8%, transparent 92%), transparent 34%),
var(--surface);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 4px 12px rgba(15, 23, 42, 0.06),
0 20px 44px -12px rgba(15, 23, 42, 0.24);
}
.mc4370-hero-shell .mc4322-home-composer:focus-within {
border-color: color-mix(in srgb, var(--accent) 32%, var(--border) 68%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 34px 80px -24px rgba(15, 23, 42, 0.36),
0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent 84%);
}
.mc4370-assistant-rail,
.mc4327-provider-strip {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
padding: 8px;
border: 1px solid var(--border);
border-radius: 18px;
background: color-mix(in srgb, var(--surface2) 68%, #f3efff 32%);
scrollbar-width: thin;
}
.mc4370-assistant-chip,
.mc4370-assistant-add,
.mc4327-provider-pill {
flex: 0 0 auto;
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 720;
white-space: nowrap;
cursor: pointer;
}
.mc4370-assistant-chip:hover,
.mc4370-assistant-chip:focus-visible {
color: var(--text);
border-color: color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
background: color-mix(in srgb, var(--surface) 84%, transparent 16%);
}
.mc4370-assistant-chip.is-active,
.mc4327-provider-pill.is-active {
background: var(--surface);
border-color: color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
color: var(--text);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}
.mc4370-assistant-add {
width: 34px;
padding: 0;
cursor: pointer;
background: color-mix(in srgb, var(--surface) 82%, transparent 18%);
}
/* AionUI segmented pill: centered, content-width, quiet — not a full-width tab strip. */
.mc4370-hero-shell .mc4370-assistant-rail {
align-self: center;
width: max-content;
max-width: 100%;
padding: 5px;
gap: 4px;
border-color: transparent;
background: color-mix(in srgb, var(--surface2) 66%, #efeaff 34%);
}
.mc4370-hero-shell .mc4370-assistant-chip {
min-height: 32px;
padding: 0 14px;
font-size: 12.5px;
}
.mc4370-hero-shell .mc4370-assistant-chip:not(.is-active) {
color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%);
}
.mc4370-hero-shell .mc4370-assistant-chip.is-active {
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.mc4370-hero-shell .mc4327-runtime-picker {
gap: 10px;
}
.mc4370-hero-shell .mc4327-runtime-selects {
grid-template-columns: minmax(0, 1fr) minmax(140px, 0.55fr);
}
.mc4370-hero-shell .mc4327-runtime-selects select,
.mc4370-ticket-grid select,
.mc4370-ticket-grid input {
border-radius: 999px;
background: var(--surface);
}
.mc4370-ticket-runtime-field {
grid-column: 1 / -1;
}
.mc4370-ticket-runtime-field select {
width: 100%;
}
.mc4370-hero-shell .mc4322-home-input {
min-height: 72px;
padding: 12px 14px;
border-radius: 18px;
background: color-mix(in srgb, var(--bg) 74%, var(--surface) 26%);
border-color: color-mix(in srgb, var(--border) 86%, transparent 14%);
font-size: 16px;
line-height: 1.55;
}
.mc4370-context-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mc4370-context-chip {
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 11px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface2);
color: var(--text);
font: inherit;
font-size: 12px;
font-weight: 660;
text-decoration: none;
}
button.mc4370-context-chip { cursor: pointer; }
.mc4370-hero-shell .mc4322-home-composer-row {
align-items: center;
}
.mc4370-hero-shell .mc4322-home-send,
.mc4370-new-ticket-top,
.mc4370-mobile-ticket-btn {
border-radius: 999px;
background: #111827;
border-color: #111827;
color: #fff;
}
.mc4370-suggestions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 4px;
}
.mc4370-suggestion-card {
min-height: 74px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
padding: 13px 14px;
border: 1px solid color-mix(in srgb, var(--border) 80%, transparent 20%);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 94%, var(--surface2) 6%);
color: var(--text);
text-align: left;
text-decoration: none;
font: inherit;
cursor: pointer;
}
.mc4370-suggestion-card:hover,
.mc4370-suggestion-card:focus-visible {
border-color: color-mix(in srgb, var(--accent) 35%, var(--border) 65%);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
text-decoration: none;
}
.mc4370-suggestion-card strong {
font-size: 13px;
font-weight: 760;
}
.mc4370-suggestion-card span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.mc4370-campaign-suggestion {
border-color: color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
background: color-mix(in srgb, var(--accent) 7%, var(--surface) 93%);
}
/* MC-4370: collapse provider/model controls into one quiet model chip. */
.mc4327-home-profile-hidden {
display: none !important;
}
.mc4370-hero-ticket-btn {
min-width: 168px;
}
.mc4370-hero-shell .mc4322-home-composer-row {
gap: 12px;
flex-wrap: wrap;
}
.mc4370-context-chips {
flex: 1 1 auto;
}
.mc4370-model-chip {
gap: 5px;
padding-right: 8px;
cursor: pointer;
}
.mc4370-model-chip select {
max-width: 220px;
padding: 0 2px;
border: 0;
background: transparent;
color: var(--text);
font: inherit;
font-size: 12px;
font-weight: 660;
cursor: pointer;
outline: none;
}
.mc4370-context-chip-ghost {
background: transparent;
border-color: transparent;
color: var(--muted);
cursor: pointer;
}
.mc4370-context-chip-ghost:hover,
.mc4370-context-chip-ghost:focus-visible {
color: var(--text);
border-color: var(--border);
background: var(--surface2);
}
.mc4370-hero-shell .mc4322-home-send {
min-width: 120px;
gap: 6px;
}
/* Quiet the sessions rail failed-state — amber, not alarming red. */
.mc4123-rail-state-failed {
color: color-mix(in srgb, #b45309 78%, var(--muted) 22%);
font-weight: 600;
}
.mc4123-rail-dot-danger,
.mc4123-dot-danger {
background: color-mix(in srgb, #f59e0b 70%, var(--muted) 30%);
box-shadow: none;
}
.mc4370-ticket-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.mc4123-mobile-menu button {
width: 100%;
min-height: 38px;
border: 0;
border-radius: 8px;
background: var(--surface2);
color: var(--text);
font: inherit;
text-align: left;
padding: 8px 10px;
}
.mc4322-composer {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px 12px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.mc4322-composer-context {
display: flex;
flex-wrap: wrap;
gap: 6px;
color: var(--muted);
font-size: 12px;
}
.mc4322-composer-context span {
min-height: 24px;
padding: 2px 7px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface2);
}
.mc4322-composer-row {
display: flex;
gap: 8px;
align-items: flex-end;
}
.mc4322-composer-input {
background: var(--bg);
}
@media (max-width: 768px) {
body[data-page="dashboard"]:has(.mc4123-shell) > .container {
padding-left: 10px;
padding-right: 10px;
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 16px);
}
.mc4123-mobile-nav {
gap: 8px;
margin-left: -10px;
margin-right: -10px;
}
.mc4123-mobile-chip {
margin-left: auto;
padding: 4px 9px;
}
.mc4123-mobile-chats-btn {
min-height: 44px;
padding: 5px 10px;
gap: 7px;
color: var(--text);
background: var(--surface2);
}
.mc4123-mobile-menu {
margin-left: -10px;
margin-right: -10px;
}
.mc4123-btn {
min-height: 44px;
}
.mc4123-shell {
display: block;
min-height: calc(100dvh - var(--bottom-nav-height) - var(--safe-bottom) - 68px);
}
.mc4123-main {
min-height: inherit;
}
.mc4123-rail-scrim {
position: fixed;
inset: 0;
display: block;
z-index: 210;
background: rgba(0, 0, 0, 0.45);
}
.mc4123-rail-scrim[hidden] {
display: none;
}
.mc4123-rail {
position: fixed;
inset: 0 auto 0 0;
z-index: 220;
width: min(336px, calc(100vw - 34px));
height: 100dvh;
max-height: none;
border-radius: 0 8px 8px 0;
border-left: 0;
padding: 12px;
transform: translateX(calc(-100% - 18px));
transition: transform 0.18s ease;
box-shadow: 16px 0 40px rgba(0, 0, 0, 0.28);
}
body.mc4123-rail-open .mc4123-rail {
transform: translateX(0);
}
.mc4123-rail-mobile-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 0 8px;
border-bottom: 1px solid var(--border);
}
.mc4123-rail-mobile-head .mc4123-btn {
min-width: 44px;
min-height: 44px;
}
.mc4123-rail-newbtn {
min-height: 44px;
}
.mc4345-session-list,
.mc4123-rail-list {
gap: 8px;
}
.mc4123-rail .mc4345-session-row-ticket {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
.mc4345-session-link {
min-height: 56px;
padding: 11px 10px;
}
.mc4345-session-title,
.mc4123-rail-title {
font-size: 13px;
-webkit-line-clamp: 2;
}
.mc4345-session-meta,
.mc4123-rail-meta {
font-size: 12px;
line-height: 1.3;
}
.mc4345-session-ticket-chip {
min-height: 32px;
display: inline-flex;
align-items: center;
justify-self: start;
margin-top: 0;
}
.mc4123-rail-row {
min-height: 58px;
padding: 11px 8px;
}
.mc4123-rail-row-main {
align-items: flex-start;
}
.mc4123-rail-kebab {
width: 44px;
height: 44px;
flex: 0 0 44px;
margin: -4px -6px -4px 0;
}
.mc4123-rail-recents > .mc4123-rail-recents-summary {
min-height: 44px;
align-items: center;
}
.mc4322-home,
.mc4322-pane {
min-height: calc(100dvh - var(--bottom-nav-height) - var(--safe-bottom) - 88px);
}
.mc4345-active-sessions {
padding-bottom: 10px;
}
.mc4345-sessions-module {
padding-bottom: 10px;
}
.mc4367-mobile-session-surface {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px 12px;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--surface) 92%, var(--surface2) 8%);
}
.mc4367-mobile-session-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.mc4367-mobile-session-kicker {
display: block;
color: var(--text);
font-size: 12px;
font-weight: 760;
line-height: 1.2;
}
.mc4367-mobile-session-count {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 11px;
line-height: 1.2;
}
.mc4367-mobile-session-all {
flex: 0 0 auto;
min-height: 34px;
padding: 5px 9px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.mc4367-mobile-session-all:hover,
.mc4367-mobile-session-all:focus-visible {
border-color: var(--accent);
background: var(--surface2);
}
.mc4367-mobile-session-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
padding: 0;
margin: 0;
}
.mc4367-mobile-session-list .mc4345-session-row-ticket {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
.mc4367-mobile-session-list .mc4345-session-link {
min-height: 42px;
padding: 7px 8px;
border-color: var(--border);
background: var(--surface);
}
.mc4367-mobile-session-list .mc4345-session-title {
-webkit-line-clamp: 1;
font-size: 12px;
}
.mc4367-mobile-session-list .mc4345-session-meta {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mc4367-mobile-session-list .mc4345-session-meta span {
display: inline;
}
.mc4367-mobile-session-list .mc4345-session-meta span + span::before {
content: " \00B7 ";
}
.mc4367-mobile-session-list .mc4345-session-ticket-chip {
justify-self: start;
margin-top: 0;
min-height: 30px;
display: inline-flex;
align-items: center;
}
.mc4322-workspace-head,
.mc4322-pane-head {
padding: 12px;
}
.mc4322-workspace-chats {
display: inline-flex;
}
.mc4322-home-greeting {
font-size: 17px;
}
.mc4370-hero-shell {
width: 100%;
padding: 14px 10px 18px;
gap: 12px;
justify-content: flex-start;
}
.mc4917-home-brief,
.mc4917-action-lanes {
grid-template-columns: 1fr;
}
.mc4917-signal-card {
padding: 10px 12px;
border-radius: 16px;
}
.mc4917-action-board {
padding: 10px;
border-radius: 18px;
}
.mc4917-action-lane {
padding: 8px;
}
.mc4917-action-lane h2 {
margin-bottom: 4px;
}
.mc4917-action-row:nth-child(n+3) {
display: none;
}
.mc4370-hero-head .mc4322-home-greeting {
font-size: 25px;
}
.mc4370-hero-head .mc4322-home-sub {
font-size: 14px;
}
.mc4370-hero-actions {
width: 100%;
justify-content: center;
}
.mc4370-hero-actions .mc4123-btn {
flex: 1 1 calc(50% - 5px);
min-width: 0;
justify-content: center;
}
.mc4370-hero-ticket-btn {
min-width: 0;
}
.mc4370-active-surface {
padding: 12px;
border-radius: 18px;
gap: 9px;
}
.mc4370-active-head {
align-items: flex-start;
}
.mc4370-active-head strong {
font-size: 15px;
}
.mc4370-active-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.mc4370-active-list .mc4345-session-link {
min-height: 44px;
padding: 8px;
}
.mc4370-active-list .mc4345-session-title {
-webkit-line-clamp: 1;
font-size: 12.5px;
}
.mc4370-active-list .mc4345-session-meta {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mc4370-active-list .mc4345-session-meta span {
display: inline;
}
.mc4370-active-list .mc4345-session-meta span + span::before {
content: " \00B7 ";
}
.mc4370-hero-shell .mc4322-home-composer {
padding: 12px;
border-radius: 18px;
gap: 10px;
}
.mc4370-hero-shell .mc4327-runtime-selects,
.mc4370-ticket-grid {
grid-template-columns: 1fr;
}
.mc4370-hero-shell .mc4322-home-input {
min-height: 84px;
font-size: 15px;
padding: 12px;
}
.mc4370-suggestions {
grid-template-columns: 1fr 1fr;
}
.mc4370-suggestion-card {
min-height: 84px;
padding: 12px;
}
.mc4322-workspace-log {
display: none;
}
.mc4322-start-state p {
display: none;
}
.mc4327-provider-pill,
.mc4327-runtime-selects select {
min-height: 44px;
}
.mc4327-runtime-selects {
grid-template-columns: 1fr;
}
.mc4322-home-input {
min-height: 92px;
}
.mc4322-home-composer-row,
.mc4322-composer-row {
flex-direction: column;
align-items: stretch;
}
.mc4322-home-side-actions {
width: 100%;
justify-content: space-between;
}
.mc4322-home-send,
.mc4322-composer-send {
width: 100%;
min-height: 38px;
justify-content: center;
}
.mc4322-msg {
max-width: 86%;
}
}
/* MC-4412 Home signoff fixes: make Home a chat-first workspace, not a squeezed ops launcher. */
body[data-page="dashboard"]:has(.mc4123-shell) > .container {
max-width: 1380px;
}
.mc4123-shell {
grid-template-columns: minmax(300px, 330px) minmax(0, 1fr);
}
.mc4123-rail-highlight {
outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent 66%);
outline-offset: 3px;
box-shadow: 0 18px 42px -26px color-mix(in srgb, var(--accent) 54%, transparent 46%);
}
.mc4322-home {
border-color: transparent;
background: transparent;
}
.mc4370-hero-shell {
width: min(100%, 860px);
padding-top: clamp(24px, 5vh, 58px);
gap: 16px;
}
.mc4370-hero-head .mc4322-home-greeting {
font-size: clamp(32px, 4.6vw, 54px);
}
.mc4370-hero-actions {
margin-top: 0;
opacity: 0.82;
}
.mc4370-hero-actions .mc4123-btn {
min-height: 34px;
padding: 5px 12px;
font-size: 12px;
}
.mc4370-hero-ticket-btn {
min-width: 0;
background: transparent;
border-color: var(--border);
color: var(--muted);
}
.mc4370-suggestions {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.mc4370-suggestion-card {
min-height: 56px;
border-radius: 999px;
padding: 10px 14px;
justify-content: center;
}
.mc4370-suggestion-card strong {
font-size: 12px;
}
.mc4370-suggestion-card span {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mc4123-modal-card {
gap: 18px;
}
.mc4123-modal-card form {
display: flex;
flex-direction: column;
gap: 12px;
}
.mc4123-field {
gap: 6px;
}
.mc4123-field-hint {
min-height: 0;
margin-bottom: 2px;
}
@media (max-width: 768px) {
body[data-page="dashboard"]:has(.mc4123-shell) > .container {
padding: 0 10px calc(var(--bottom-nav-height) + var(--safe-bottom) + 28px);
}
.mc4123-mobile-nav {
margin: 0 -10px 8px;
padding: 8px 10px;
position: sticky;
top: 0;
z-index: 150;
background: color-mix(in srgb, var(--bg) 94%, transparent 6%);
backdrop-filter: blur(10px);
}
.mc4370-mobile-ticket-btn,
.mc4123-mobile-chip {
display: none !important;
}
.mc4123-mobile-chats-btn {
margin-left: auto;
}
.mc4123-home-lock,
body.mc4123-rail-open .bottom-nav,
body[data-page="dashboard"]:has(.mc4322-pane) .bottom-nav {
display: none !important;
}
.mc4123-rail {
width: 100vw;
inset: 0;
border-radius: 0;
border-right: 0;
padding: 14px 14px calc(var(--bottom-nav-height) + var(--safe-bottom) + 18px);
transform: translateX(-104%);
}
body.mc4123-rail-open .mc4123-rail {
transform: translateX(0);
}
.mc4123-rail-mobile-head strong {
font-size: 18px;
}
.mc4123-rail-mobile-head .mc4123-btn {
border-radius: 999px;
font-size: 22px;
}
.mc4345-session-title,
.mc4123-rail-title {
font-size: 14px;
}
.mc4345-session-meta,
.mc4123-rail-meta {
font-size: 12px;
}
.mc4322-home {
min-height: auto;
border: 0;
border-radius: 0;
background: transparent;
overflow: visible;
}
.mc4370-hero-shell {
padding: 8px 0 calc(var(--bottom-nav-height) + var(--safe-bottom) + 18px);
gap: 12px;
}
.mc4370-hero-head {
order: 2;
align-items: flex-start;
text-align: left;
gap: 8px;
padding: 0 2px;
}
.mc4370-hero-head .mc4322-home-greeting {
font-size: 25px;
letter-spacing: -0.035em;
}
.mc4370-hero-head .mc4322-home-sub {
font-size: 13px;
line-height: 1.45;
}
.mc4370-hero-actions,
.mc4324-campaign-hint {
display: none;
}
.mc4370-hero-shell .mc4322-home-composer {
order: 1;
padding: 12px;
border-radius: 22px;
gap: 10px;
box-shadow: 0 18px 44px -24px rgba(15, 23, 42, 0.42);
}
.mc4370-hero-shell .mc4370-assistant-rail {
align-self: stretch;
width: auto;
justify-content: flex-start;
overflow-x: auto;
}
.mc4370-context-chips .mc4370-context-chip:first-child,
.mc4370-context-chips .mc4370-context-chip:nth-child(2) {
display: none;
}
.mc4370-context-chips {
flex-wrap: nowrap;
overflow-x: auto;
}
.mc4370-model-chip select {
max-width: 180px;
}
.mc4370-suggestions {
order: 3;
grid-template-columns: 1fr;
gap: 8px;
padding-bottom: 8px;
}
.mc4370-suggestion-card {
min-height: 48px;
border-radius: 14px;
padding: 10px 12px;
}
.mc4370-suggestion-card span {
white-space: normal;
}
.mc4123-modal {
align-items: flex-end;
}
.mc4123-modal-card {
width: 100vw;
max-height: calc(100dvh - 18px);
border-radius: 18px 18px 0 0;
padding: 18px;
}
.mc4123-modal-foot {
flex-direction: column-reverse;
}
.mc4123-modal-foot .mc4123-btn {
width: 100%;
justify-content: center;
}
}
|