/* * chat_theme.css — Kisru chat-first shell, visual design only. * * ============================================================================ * HOST WRAPPER CONTRACT (read this before wiring) * ============================================================================ * The product mounts this component's markup inside: * * #app > div.shell > div.main > main.content > div.kisru-chat-workspace * * with header.topbar (.page-heading/.page-title/.eyebrow/.topbar-actions) * and aside.rail (.brand/.brand-mark/.brand-name/.brand-sub, .nav/.nav-link/ * .nav-section, .rail-footer, .user-chip/.avatar) as siblings supplied by * the host, and html[data-theme="dark"] toggling theme. In standalone/ * preview contexts the wrapper may instead sit directly under with * no such chrome — every rule below still applies safely in that case. * * REVISION (post design-test failures + rendered-geometry review): this * revision (a) fixes real geometry so the chat page fills its host column * instead of leaving ~226px of blank chrome below the composer, (b) remaps * the host's OLD green/teal token names explicitly so the topbar/rail * agree visually with the warm chat surface instead of showing a green * strip, (c) nests the agent switcher inside a compact agent-header via a * native

, (d) gives the composer one grouped raised * surface with real placeholder/hint/send affordances, and (e) gives the * empty state an editorial h2 + supporting copy. * * This file targets ONLY: * 1. data-testid hooks emitted by chat_shell.js, and * 2. the parallel class-name fallbacks chat_shell.js assigns. * * The scoped HOST INTEGRATION section below remaps the existing host * design tokens (--bg,--surface,--surface-2,--surface-3,--text,--muted, * --line,--line-strong,--teal,--teal-strong,--teal-soft,--teal-glow) to * warm-paper/charcoal values, and fixes host chrome geometry, both scoped * strictly to `.shell:has(.kisru-chat-workspace)` so no other page is * touched. It never rewrites legacy dashboard layout and never guesses at * undocumented host selectors. * ============================================================================ */ .kisru-chat-workspace, .kisru-chat-workspace * { box-sizing: border-box; } /* --------------------------------------------------------------------- * 1. Design tokens * Stated sRGB contrast pairs (not re-measured here, carried forward * verbatim from the original spec numbers so nothing is invented): * light theme accent: #98502C filled, white (#ffffff) text ≈ 5.97:1 * dark theme accent: #E08A52 filled, dark ink (#201C16) text ≈ 6.40:1 * Muted body text tokens (--kisru-fg-muted on --kisru-bg / * --kisru-bg-raised) are carried forward unchanged from the prior * accepted pass and are intended to clear 4.5:1; see * DESIGN-IMPLEMENTATION.md for the pairs actually shipped. * ------------------------------------------------------------------- */ .kisru-chat-workspace { --kisru-bg: var(--host-bg, #faf8f5); --kisru-bg-raised: var(--host-bg-raised, #ffffff); --kisru-bg-sunken: var(--host-bg-sunken, #f1eee8); --kisru-fg: var(--host-fg, #201c16); --kisru-fg-muted: var(--host-fg-muted, #776f60); --kisru-border: var(--host-border, #e4dfd6); --kisru-accent: var(--host-accent, #98502c); --kisru-accent-fg: var(--host-accent-fg, #ffffff); --kisru-accent-soft: var(--host-accent-soft, #f3e3d6); --kisru-danger: var(--host-danger, #8a3b32); --kisru-danger-bg: var(--host-danger-bg, #f7e9e6); --kisru-focus-ring: var(--host-focus-ring, #98502c); --kisru-serif: var(--host-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif); --kisru-radius-sm: 6px; --kisru-radius-md: 10px; --kisru-radius-lg: 14px; --kisru-radius-xl: 18px; --kisru-space-1: 4px; --kisru-space-2: 8px; --kisru-space-3: 12px; --kisru-space-4: 16px; --kisru-space-5: 24px; --kisru-space-6: 32px; --kisru-space-7: 48px; --kisru-font: var( --host-font, -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif ); --kisru-line-height: 1.55; --kisru-message-max-width: 72ch; --kisru-column-max: 800px; --kisru-transition-fast: 120ms ease; --kisru-transition-medium: 200ms ease; background: var(--kisru-bg); color: var(--kisru-fg); font-family: var(--kisru-font); line-height: var(--kisru-line-height); flex: 1 1 auto; width: 100%; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; } html[data-theme="dark"] .kisru-chat-workspace { --kisru-bg: var(--host-bg-dark, #17150f); --kisru-bg-raised: var(--host-bg-raised-dark, #201c16); --kisru-bg-sunken: var(--host-bg-sunken-dark, #2a2519); --kisru-fg: var(--host-fg-dark, #f4f0e8); --kisru-fg-muted: var(--host-fg-muted-dark, #a79e8d); --kisru-border: var(--host-border-dark, #3a3428); --kisru-accent: var(--host-accent-dark, #e08a52); --kisru-accent-fg: var(--host-accent-fg-dark, #201c16); --kisru-accent-soft: var(--host-accent-soft-dark, #3a2a1c); --kisru-danger: var(--host-danger-dark, #e08a7c); --kisru-danger-bg: var(--host-danger-bg-dark, #3a2622); --kisru-focus-ring: var(--host-focus-ring-dark, #e08a52); } /* --------------------------------------------------------------------- * 1b. HOST INTEGRATION (scoped) — remap OLD green/teal host tokens and * fix real chat-page geometry, both scoped strictly to * `.shell:has(.kisru-chat-workspace)` so no other host page changes. * ------------------------------------------------------------------- */ .shell:has(.kisru-chat-workspace) { /* Old token names the host chrome (topbar/rail) itself reads, remapped to the same warm-paper/charcoal palette as the chat surface so the header/rail visually agree with it instead of showing a leftover green/teal strip. */ --bg: #faf8f5; --surface: #ffffff; --surface-2: #f1eee8; --surface-3: #e8e3d9; --text: #201c16; --muted: #776f60; --line: #e4dfd6; --line-strong: #cfc7b8; --teal: #98502c; --teal-strong: #7a3f23; --teal-soft: #f3e3d6; --teal-glow: rgba(152, 80, 44, 0.22); height: 100dvh; } html[data-theme="dark"] .shell:has(.kisru-chat-workspace) { --bg: #17150f; --surface: #201c16; --surface-2: #2a2519; --surface-3: #332c1f; --text: #f4f0e8; --muted: #a79e8d; --line: #3a3428; --line-strong: #4a422f; --teal: #e08a52; --teal-strong: #c76f3a; --teal-soft: #3a2a1c; --teal-glow: rgba(224, 138, 82, 0.22); } /* Neutralize legacy green/teal brand-mark to the same controlled accent, scoped only where the chat wrapper is present. */ .shell:has(.kisru-chat-workspace) .brand-mark { background: #98502c !important; background-image: none !important; color: #ffffff !important; box-shadow: none !important; } html[data-theme="dark"] .shell:has(.kisru-chat-workspace) .brand-mark { background: #e08a52 !important; background-image: none !important; color: #201c16 !important; box-shadow: none !important; } /* Real geometry fix: .main becomes a full-height flex column, .content (and the chat wrapper inside it) flex to fill whatever height remains below the 64px topbar instead of collapsing to content height and leaving blank app background below the composer. */ .shell:has(.kisru-chat-workspace) .main { display: flex; flex-direction: column; height: 100dvh; min-height: 100dvh; min-width: 0; background: var(--bg); } .shell:has(.kisru-chat-workspace) header.topbar { height: 64px; flex-shrink: 0; } .shell:has(.kisru-chat-workspace) .content { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; align-self: stretch; margin: 0; display: flex; flex-direction: column; padding: 0; } /* --------------------------------------------------------------------- * 2. Reduced motion * ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .kisru-chat-workspace, .kisru-chat-workspace * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------- * 3. Focus visibility (beats generic host button/textarea rules) * ------------------------------------------------------------------- */ .kisru-chat-workspace button:focus, .kisru-chat-workspace textarea:focus { outline: none; } .kisru-chat-workspace button:focus-visible, .kisru-chat-workspace textarea:focus-visible, .kisru-chat-workspace :focus-visible { outline: 2px solid var(--kisru-focus-ring); outline-offset: 2px; border-radius: var(--kisru-radius-sm); } .kisru-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------- * 4. Legacy standalone inner nav (only rendered when hostNavigation * is not set to true by the host) * ------------------------------------------------------------------- */ .kisru-chat-workspace .kisru-nav, .kisru-chat-workspace nav[aria-label="Primary"] { display: flex; align-items: center; gap: var(--kisru-space-2); padding: var(--kisru-space-3) var(--kisru-space-4); border-bottom: 1px solid var(--kisru-border); background: var(--kisru-bg); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; flex-shrink: 0; } .kisru-chat-workspace .kisru-nav button, .kisru-chat-workspace nav[aria-label="Primary"] button { min-height: 44px; min-width: 44px; padding: var(--kisru-space-2) var(--kisru-space-4); border: 1px solid transparent; border-radius: var(--kisru-radius-md); background: transparent; color: var(--kisru-fg-muted); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background var(--kisru-transition-fast), color var(--kisru-transition-fast); } .kisru-chat-workspace .kisru-nav button:hover { background: var(--kisru-accent-soft); color: var(--kisru-fg); } /* --------------------------------------------------------------------- * 5. Page shell / view containers * ------------------------------------------------------------------- */ .kisru-chat-workspace [data-testid="home-view"], .kisru-chat-workspace [data-testid="chat-view"], .kisru-chat-workspace [data-testid="dashboards-view"] { flex: 1 1 auto; width: 100%; max-width: var(--kisru-column-max); margin: 0 auto; padding: var(--kisru-space-5) var(--kisru-space-4) var(--kisru-space-6); min-height: 0; } .kisru-chat-workspace [data-testid="home-view"], .kisru-chat-workspace [data-testid="dashboards-view"] { overflow-y: auto; } /* --------------------------------------------------------------------- * 6. Home * ------------------------------------------------------------------- */ .kisru-chat-workspace [data-testid="home-view"] h2 { font-family: var(--kisru-serif); font-size: 1.5rem; font-weight: 500; color: var(--kisru-fg); margin: 0 0 var(--kisru-space-4); } .kisru-chat-workspace [data-testid="home-view"] ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .kisru-chat-workspace [data-testid="activity-item"] { padding: var(--kisru-space-3) 0; border-bottom: 1px solid var(--kisru-border); color: var(--kisru-fg); font-size: 0.95rem; overflow-wrap: anywhere; } .kisru-chat-workspace [data-testid="activity-item"]:last-child { border-bottom: none; } .kisru-chat-workspace [data-testid="activity-empty"] { color: var(--kisru-fg-muted); font-size: 0.95rem; padding: var(--kisru-space-5) 0; border: 1px dashed var(--kisru-border); border-radius: var(--kisru-radius-md); text-align: center; } /* --------------------------------------------------------------------- * 7. Chat view layout * ------------------------------------------------------------------- */ .kisru-chat-workspace [data-testid="chat-view"] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: var(--kisru-space-3); } /* -- Agent header: compact identity + nested switcher ------------------- */ .kisru-chat-workspace [data-testid="agent-header"] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kisru-space-3); padding-bottom: var(--kisru-space-3); border-bottom: 1px solid var(--kisru-border); } .kisru-chat-workspace .kisru-agent-switcher { position: relative; } .kisru-chat-workspace .kisru-agent-summary { display: flex; align-items: center; gap: var(--kisru-space-2); cursor: pointer; list-style: none; min-block-size: 44px; padding: var(--kisru-space-1) var(--kisru-space-2); border-radius: var(--kisru-radius-md); user-select: none; } .kisru-chat-workspace .kisru-agent-summary::-webkit-details-marker { display: none; } .kisru-chat-workspace .kisru-agent-summary:hover { background: var(--kisru-accent-soft); } .kisru-chat-workspace .kisru-agent-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kisru-accent-soft); color: var(--kisru-accent); font-size: 0.82rem; font-weight: 700; flex-shrink: 0; } .kisru-chat-workspace .kisru-agent-header-name { font-size: 1.02rem; font-weight: 600; color: var(--kisru-fg); } /* The switcher options: a native

already hides this from rendering until opened — no extra JS/CSS visibility state needed. */ .kisru-chat-workspace [data-testid="agent-selector"] { display: flex; flex-direction: column; gap: var(--kisru-space-1); margin-top: var(--kisru-space-2); padding: var(--kisru-space-2); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-md); background: var(--kisru-bg-raised); position: absolute; left: 0; top: 100%; z-index: 15; min-width: 200px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14); } .kisru-chat-workspace [data-testid="agent-selector"] label { font-size: 0.7rem; color: var(--kisru-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 var(--kisru-space-1); } .kisru-chat-workspace [data-testid="agent-selector"] button { min-block-size: 44px; padding: var(--kisru-space-1) var(--kisru-space-2); border: 1px solid transparent; border-radius: var(--kisru-radius-sm); background: transparent; color: var(--kisru-fg); font-size: 0.86rem; text-align: left; cursor: pointer; transition: background var(--kisru-transition-fast); } .kisru-chat-workspace [data-testid="agent-selector"] button:hover { background: var(--kisru-accent-soft); } .kisru-chat-workspace [data-testid="agent-selector"] .kisru-selected { border-color: var(--kisru-accent); font-weight: 600; } .kisru-chat-workspace [data-testid="review-knowledge-link"] { min-block-size: 44px; padding: 2px var(--kisru-space-3); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-md); background: transparent; color: var(--kisru-fg-muted); font-size: 0.85rem; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; } .kisru-chat-workspace [data-testid="review-knowledge-link"]:hover { color: var(--kisru-fg); border-color: var(--kisru-accent); } /* -- Company visibility notice: quiet footer line, not a banner --------- */ .kisru-chat-workspace [data-testid="company-visibility-notice"] { margin: 0; padding-top: var(--kisru-space-2); font-size: 0.78rem; color: var(--kisru-fg-muted); } /* -- Error / pending states ---------------------------------------------- */ .kisru-chat-workspace [data-testid="chat-error"] { display: flex; align-items: flex-start; gap: var(--kisru-space-2); padding: var(--kisru-space-3) var(--kisru-space-4); background: var(--kisru-danger-bg); color: var(--kisru-danger); border: 1px solid var(--kisru-danger); border-radius: var(--kisru-radius-md); font-size: 0.92rem; overflow-wrap: anywhere; } .kisru-chat-workspace [data-testid="pending-indicator"] { display: flex; align-items: center; gap: var(--kisru-space-2); padding: var(--kisru-space-2) 0; color: var(--kisru-fg-muted); font-size: 0.88rem; font-style: italic; } .kisru-chat-workspace [data-testid="cancel-btn"] { min-height: 32px; padding: 2px var(--kisru-space-3); border: 1px solid var(--kisru-danger); border-radius: var(--kisru-radius-sm); background: transparent; color: var(--kisru-danger); font-size: 0.85rem; cursor: pointer; } /* --------------------------------------------------------------------- * 8. Message list * ------------------------------------------------------------------- */ .kisru-chat-workspace [data-testid="message-list"] { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--kisru-space-5); overflow-y: auto; padding: var(--kisru-space-2) 0 var(--kisru-space-4); min-height: 0; } .kisru-chat-workspace [data-testid="load-more"] { align-self: center; min-height: 40px; padding: var(--kisru-space-1) var(--kisru-space-4); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-sm); background: var(--kisru-bg-raised); color: var(--kisru-fg-muted); font-size: 0.85rem; cursor: pointer; } .kisru-chat-workspace [data-testid="load-more"]:hover { color: var(--kisru-fg); border-color: var(--kisru-accent); } /* -- Empty state: editorial welcome, modest and unboxed ------------------ */ .kisru-chat-workspace [data-testid="empty-state"] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kisru-space-3); max-width: var(--kisru-message-max-width); margin: var(--kisru-space-6) auto 0; padding: 0 var(--kisru-space-1); text-align: left; } .kisru-chat-workspace [data-testid="empty-state-heading"] { font-family: var(--kisru-serif); font-weight: 400; font-size: 38px; line-height: 1.12; color: var(--kisru-fg); margin: 0; } @media (max-width: 480px) { .kisru-chat-workspace [data-testid="empty-state-heading"] { font-size: 30px; } } .kisru-chat-workspace [data-testid="empty-state-copy"] { margin: 0; color: var(--kisru-fg-muted); font-size: 0.98rem; line-height: 1.5; max-width: 60ch; } .kisru-chat-workspace [data-testid="starter-prompts"] { display: flex; flex-direction: column; gap: var(--kisru-space-2); width: 100%; margin-top: var(--kisru-space-3); } .kisru-chat-workspace .kisru-starter-prompt { display: flex; align-items: center; min-height: 44px; padding: var(--kisru-space-2) var(--kisru-space-4); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-md); background: var(--kisru-bg-raised); color: var(--kisru-fg); font-size: 0.92rem; text-align: left; cursor: pointer; transition: border-color var(--kisru-transition-fast), background var(--kisru-transition-fast); } .kisru-chat-workspace .kisru-starter-prompt::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: var(--kisru-space-3); border-radius: 50%; border: 1px solid var(--kisru-border); color: var(--kisru-fg-muted); font-size: 0.8rem; flex-shrink: 0; } .kisru-chat-workspace .kisru-starter-prompt:hover { border-color: var(--kisru-accent); background: var(--kisru-accent-soft); } /* -- Messages: unboxed assistant text, subtle bounded user surface ------- */ .kisru-chat-workspace [data-testid="message"] { max-width: var(--kisru-message-max-width); width: 100%; margin: 0 auto; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .kisru-chat-workspace [data-testid="message-author"] { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--kisru-fg-muted); margin-bottom: var(--kisru-space-1); } .kisru-chat-workspace [data-testid="message"] p { margin: 0; font-size: 0.98rem; line-height: 1.65; white-space: pre-wrap; } .kisru-chat-workspace [data-role="user"] p { background: var(--kisru-bg-sunken); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-lg); padding: var(--kisru-space-3) var(--kisru-space-4); max-width: 60ch; margin-left: auto; margin-right: 0; } .kisru-chat-workspace [data-role="assistant"] p { background: transparent; border: none; padding: 0; } .kisru-chat-workspace [data-testid="citations"] { margin-top: var(--kisru-space-1); font-size: 0.78rem; color: var(--kisru-fg-muted); overflow-wrap: anywhere; } .kisru-chat-workspace [data-testid^="propose-memory-btn-"] { margin-top: var(--kisru-space-2); min-block-size: 44px; padding: 2px var(--kisru-space-3); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-sm); background: transparent; color: var(--kisru-fg-muted); font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; } .kisru-chat-workspace [data-testid^="propose-memory-btn-"]:hover { color: var(--kisru-fg); border-color: var(--kisru-accent); } .kisru-chat-workspace [data-testid^="memory-pending-"] { margin-top: var(--kisru-space-1); font-size: 0.78rem; color: var(--kisru-fg-muted); font-style: italic; } /* --------------------------------------------------------------------- * 9. Composer — single grouped raised surface * ------------------------------------------------------------------- */ .kisru-chat-workspace [data-testid="composer"] { position: sticky; bottom: 0; display: flex; flex-direction: column; width: 100%; max-width: var(--kisru-column-max); margin: 0 auto var(--kisru-space-5); background: var(--kisru-bg-raised); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-xl); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04); flex-shrink: 0; } html[data-theme="dark"] .kisru-chat-workspace [data-testid="composer"] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.28); } .kisru-chat-workspace [data-testid="composer"]:focus-within { outline: 2px solid var(--kisru-focus-ring); outline-offset: 2px; } .kisru-chat-workspace .kisru-composer-field { padding: var(--kisru-space-3) var(--kisru-space-4) 0; } .kisru-chat-workspace [data-testid="composer-input"] { width: 100%; min-height: 64px; max-height: 220px; resize: vertical; border: 0; background: transparent; color: var(--kisru-fg); font: inherit; font-size: 16px; line-height: 1.5; padding: var(--kisru-space-2) 0; overflow-wrap: anywhere; } .kisru-chat-workspace [data-testid="composer-input"]::placeholder { color: var(--kisru-fg-muted); } /* Focus-within ring lives on the parent composer surface only; no nested ring/shadow duplicated on the textarea itself. */ .kisru-chat-workspace [data-testid="composer-input"]:focus, .kisru-chat-workspace [data-testid="composer-input"]:focus-visible { outline: none; box-shadow: none; } .kisru-chat-workspace .kisru-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--kisru-space-3); padding: var(--kisru-space-2) var(--kisru-space-3) var(--kisru-space-3) var(--kisru-space-4); } .kisru-chat-workspace [data-testid="composer-hint"] { font-size: 0.72rem; color: var(--kisru-fg-muted); } .kisru-chat-workspace [data-testid="send-btn"] { flex-shrink: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 999px; background: var(--kisru-accent); color: var(--kisru-accent-fg); cursor: pointer; transition: opacity var(--kisru-transition-fast); } .kisru-chat-workspace [data-testid="send-btn"]::before { content: ""; display: block; width: 15px; height: 15px; background: currentColor; clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 0% 65%, 60% 50%, 0% 35%); } .kisru-chat-workspace [data-testid="send-btn"]:hover { opacity: 0.9; } .kisru-chat-workspace [data-testid="send-btn"][disabled] { opacity: 0.5; cursor: default; pointer-events: none; } /* --------------------------------------------------------------------- * 10. Dashboards embed * ------------------------------------------------------------------- */ .kisru-chat-workspace [data-testid="dashboards-view"] { display: flex; flex-direction: column; gap: var(--kisru-space-4); } .kisru-chat-workspace [data-testid="dashboards-view"] p { color: var(--kisru-fg-muted); font-size: 0.95rem; } .kisru-chat-workspace [data-testid="admin-conversation-list"] { display: flex; flex-direction: column; gap: var(--kisru-space-2); } .kisru-chat-workspace [data-testid="admin-conversation-row"] { display: flex; align-items: center; justify-content: space-between; gap: var(--kisru-space-3); padding: var(--kisru-space-2) var(--kisru-space-3); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-md); font-size: 0.9rem; color: var(--kisru-fg); } /* --------------------------------------------------------------------- * 11. Responsive * ------------------------------------------------------------------- */ @media (max-width: 480px) { .kisru-chat-workspace [data-testid="home-view"], .kisru-chat-workspace [data-testid="chat-view"], .kisru-chat-workspace [data-testid="dashboards-view"] { padding: var(--kisru-space-4) var(--kisru-space-4) var(--kisru-space-5); } .kisru-chat-workspace [data-testid="composer"] { margin-bottom: var(--kisru-space-4); } .kisru-chat-workspace [data-testid="empty-state"] { margin-top: var(--kisru-space-5); } } @media (min-width: 1024px) { .kisru-chat-workspace [data-testid="chat-view"] { padding-left: var(--kisru-space-6); padding-right: var(--kisru-space-6); } } .kisru-chat-workspace * { max-width: 100%; } /* -- Work started from the conversation ---------------------------------- */ /* Quiet, bounded cards under the thread: real business state, never louder than the conversation itself. Same tokens, radii and spacing scale as the researched chat surfaces, so the redesign stays intact. */ .kisru-chat-workspace .kisru-work-list { display: flex; flex-direction: column; gap: var(--kisru-space-2); width: 100%; max-width: var(--kisru-message-max-width); margin: var(--kisru-space-4) auto 0; } .kisru-chat-workspace .kisru-work-heading, .kisru-home [data-testid="home-needs-person-heading"] { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kisru-fg-muted); } .kisru-chat-workspace .kisru-work-item { display: flex; flex-direction: column; gap: var(--kisru-space-1); padding: var(--kisru-space-3) var(--kisru-space-4); border: 1px solid var(--kisru-border); border-left: 3px solid var(--kisru-border); border-radius: var(--kisru-radius-md); background: var(--kisru-bg-raised); } .kisru-chat-workspace .kisru-work-item[data-status="executed"] { border-left-color: var(--kisru-accent); } .kisru-chat-workspace .kisru-work-item[data-status="denied"], .kisru-chat-workspace .kisru-work-item[data-status="failed"] { border-left-color: var(--kisru-danger); background: var(--kisru-danger-bg); } .kisru-chat-workspace .kisru-work-title { font-weight: 600; color: var(--kisru-fg); } .kisru-chat-workspace .kisru-work-meta { font-size: 0.82rem; color: var(--kisru-fg-muted); } .kisru-chat-workspace .kisru-work-waiting { font-size: 0.86rem; color: var(--kisru-accent); } .kisru-chat-workspace .kisru-work-reason { margin: 0; font-size: 0.86rem; color: var(--kisru-danger); } .kisru-chat-workspace .kisru-work-open { align-self: flex-start; min-height: 36px; margin-top: var(--kisru-space-1); padding: var(--kisru-space-1) var(--kisru-space-3); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-sm); background: transparent; color: var(--kisru-fg); font-size: 0.84rem; cursor: pointer; transition: border-color var(--kisru-transition-fast), background var(--kisru-transition-fast); } .kisru-chat-workspace .kisru-work-open:hover { border-color: var(--kisru-accent); background: var(--kisru-accent-soft); } /* -- Home: real figures and what is waiting on a person ------------------ */ .kisru-home .kisru-home-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--kisru-space-3); margin-bottom: var(--kisru-space-5); } .kisru-home .kisru-home-metric { padding: var(--kisru-space-4); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-lg); background: var(--kisru-bg-raised); } .kisru-home .kisru-home-metric-value { font-family: var(--kisru-serif); font-size: 1.9rem; line-height: 1.1; color: var(--kisru-fg); } .kisru-home .kisru-home-metric-label { margin-top: var(--kisru-space-1); font-size: 0.82rem; color: var(--kisru-fg-muted); } .kisru-home .kisru-home-attention { display: flex; flex-direction: column; gap: var(--kisru-space-1); padding: var(--kisru-space-3) var(--kisru-space-4); margin-top: var(--kisru-space-2); border: 1px solid var(--kisru-border); border-left: 3px solid var(--kisru-accent); border-radius: var(--kisru-radius-md); background: var(--kisru-bg-raised); } .kisru-home .kisru-home-attention[data-kind="failed"] { border-left-color: var(--kisru-danger); } .kisru-home .kisru-home-attention-title { font-weight: 600; } .kisru-home .kisru-home-attention-label { font-size: 0.85rem; color: var(--kisru-fg-muted); } @media (max-width: 640px) { .kisru-home .kisru-home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kisru-home .kisru-home-attention [data-testid^="home-open-"] { align-self: flex-start; min-height: 36px; margin-top: var(--kisru-space-1); padding: var(--kisru-space-1) var(--kisru-space-3); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-sm); background: transparent; color: var(--kisru-fg); font-size: 0.84rem; cursor: pointer; transition: border-color var(--kisru-transition-fast), background var(--kisru-transition-fast); } .kisru-home .kisru-home-attention [data-testid^="home-open-"]:hover { border-color: var(--kisru-accent); background: var(--kisru-accent-soft); } /* Honest provenance on an assistant message: which provider answered, and whether it was simulated. Quiet by default, never a badge that competes with the reply itself. */ .kisru-chat-workspace .kisru-message-provenance { display: inline-block; margin-top: var(--kisru-space-1); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kisru-fg-muted); } .kisru-chat-workspace .kisru-message-provenance[data-simulated="true"] { padding: 2px var(--kisru-space-2); border: 1px solid var(--kisru-border); border-radius: var(--kisru-radius-sm); color: var(--kisru-fg); background: var(--kisru-bg-sunken); } /* Handing over the file the work is waiting for, inside the thread. */ .kisru-chat-workspace .kisru-work-upload { display: flex; flex-direction: column; gap: var(--kisru-space-1); margin-top: var(--kisru-space-2); font-size: 0.84rem; color: var(--kisru-fg-muted); } .kisru-chat-workspace .kisru-work-upload input[type="file"] { max-width: 100%; font-size: 0.82rem; color: var(--kisru-fg); }