/* chat-ui.css — shared chat components for Intelligence app + Kriyā app (22 Jul 2026) * * One design language for both chat products, on web and in the Play Store * wrappers. Namespaced .cui-* so it can layer onto each app's existing DOM * without collisions. chat-ui.js attaches the behaviours. * * Tokens: each app sets these on :root (or falls back to the defaults here), * so the same components render in Intelligence's dark palette and Kriyā's * warm paper palette. */ :root { --cui-ink: #1a1410; --cui-surface: #ffffff; --cui-line: rgba(0, 0, 0, .12); --cui-muted: #8a8177; --cui-accent: #e8650a; --cui-radius: 10px; } /* ── Message actions (copy / retry) ───────────────────────────────────────── Injected by chat-ui.js after every assistant bubble. Hidden until hover on desktop; always visible at reduced opacity on touch devices. */ .cui-actions { display: flex; gap: .25rem; margin-top: .3rem; opacity: 0; transition: opacity .15s; } .cui-msg-wrap:hover .cui-actions, .cui-actions:focus-within { opacity: 1; } @media (hover: none) { .cui-actions { opacity: .55; } } .cui-act { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--cui-line); background: var(--cui-surface); color: var(--cui-muted); font: 600 .6875rem/1 'DM Sans', 'Inter', sans-serif; padding: .3rem .55rem; border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s; } .cui-act:hover { color: var(--cui-ink); border-color: var(--cui-muted); } .cui-act svg { width: 12px; height: 12px; stroke: currentColor; } .cui-act.cui-done { color: var(--cui-accent); border-color: var(--cui-accent); } /* ── Drawer polish (applies to each app's existing sidebar) ──────────────── chat-ui.js adds .cui-drawer to the app's sidebar element so both drawers share scroll behaviour, safe-area padding (for the app wrappers), and a consistent session-row treatment. */ .cui-drawer { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0); } .cui-drawer .cui-session-active { position: relative; } .cui-drawer .cui-session-active::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 3px; border-radius: 2px; background: var(--cui-accent); } /* ── Input row consistency ──────────────────────────────────────────────── */ .cui-input-focus { outline: none; box-shadow: 0 0 0 2px var(--cui-accent) inset; border-radius: var(--cui-radius); } .cui-send-busy { opacity: .5; pointer-events: none; } /* App-wrapper (TWA/WebView) safe areas: chat-ui.js adds .cui-standalone to when running installed/standalone, so fixed bars clear the notch. */ .cui-standalone .cui-topbar-pad { padding-top: env(safe-area-inset-top, 0); } .cui-standalone .cui-inputrow-pad { padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0)); }