/* * Merdigit AI — Customer Support Agent Workspace. * * Loaded by both workspace shells (app.layouts.agent, for every Agent Workspace page) and the Platform shell * (app.layouts.app, so Company/WhatsApp under Channels can also use the same "cs-*" building blocks). Loading it * unconditionally on both is deliberate: these are plain, inert class definitions - a page that never uses a * "cs-*" class pays only the (small, cached-once-per-session) download cost, never a behavioural one - and it means * one file to keep in sync rather than two. * * Sections: * 1. Agent Workspace sidebar chrome (the workspace header/switcher/business-system chip inside app.layouts.agent - * NOT the shared .sidebar/.nav-item rules, which live in design-system.css and are reused as-is, icons included) * 2. The small presentation kit (cs-page/cs-sec/cs-row/...) shared by Overview, Agent, Company, Knowledge, WhatsApp * 3. The guided Setup wizard + the shared setup checklist * 4. Conversation Workspace (Block 4.1): thread, bubbles, business-context panel * 5. Conversations inbox rows * 6. The Agent configuration page's own small helpers (section jump nav, sticky save bar, test panel) */ /* ── 1. Agent Workspace sidebar chrome ──────────────────────────────────── */ .agent-back { display: flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 12px; font-weight: 600; color: var(--text-3); text-decoration: none; border-bottom: 1px solid var(--border); transition: color var(--transition-fast); } .agent-back:hover { color: var(--text-1); } .agent-back:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .agent-back svg { width: 13px; height: 13px; } .agent-brand { display: block; padding: 10px 18px 2px; text-decoration: none; } .agent-header { padding: 8px 18px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .agent-header > div:last-child { min-width: 0; } .agent-header-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-glow); border: 1px solid rgba(208,46,244,0.25); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .agent-header-name { font-size: 14px; font-weight: 700; color: var(--text-1); } .agent-header-tagline { font-size: 11px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agent-switch { display: block; margin: 10px 18px 0; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-md); font-size: 12px; font-weight: 600; color: var(--text-2); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .agent-switch:hover { background: var(--bg-hover); color: var(--text-1); } .agent-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The current business system, shown as workspace status chrome (not a nav item - it names data, not a destination). */ /* One compact line, so the workspace pages below get the room. */ .cs-provider { margin: 8px 18px 0; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-md); background: var(--bg-elevated); } .cs-provider-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-1); font-weight: 600; min-width: 0; } .cs-provider-label { font-size: 11px; font-weight: 500; color: var(--text-3); white-space: nowrap; } .cs-provider-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cs-provider-row .badge { font-size: 10.5px; padding: 1px 7px; margin-inline-start: auto; } .cs-provider-notice { font-size: 11px; line-height: 1.45; color: var(--text-3); margin-top: 4px; } .cs-provider-manage { display: inline-flex; color: var(--text-3); padding: 2px; border-radius: 6px; } .cs-provider-manage:hover { color: var(--text-1); background: var(--bg-hover); } .cs-provider-manage svg { width: 14px; height: 14px; } /* * ── 2. Presentation kit ───────────────────────────────────────────────── * Shared building blocks: page width, a titled section (a card with a one-line purpose), field groups, choice chips, * read-only key/value rows, and status rows. Every Customer Support page composes these instead of hand-rolling its * own card padding/heading size, which is what PART 9 ("same card treatment, same spacing scale") asks for. */ .cs-page { max-width: 880px; } .cs-page.cs-wide { max-width: 1100px; } .cs-stack { display: flex; flex-direction: column; gap: 14px; } .cs-sec { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); } .cs-sec-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cs-sec-title { font-size: 14px; font-weight: 700; color: var(--text-1); line-height: 1.35; } .cs-sec-desc { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.55; max-width: 78ch; } .cs-sec-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; } .cs-sec-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cs-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; } .cs-field-label .cs-opt { font-weight: 400; color: var(--text-3); } .cs-help { font-size: 11.5px; color: var(--text-3); margin-top: 6px; line-height: 1.55; } .cs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 720px) { .cs-grid-2 { grid-template-columns: minmax(0, 1fr); } } .cs-choices { display: flex; flex-wrap: wrap; gap: 8px; } /* Used both as a