/* ============================================================================ SAKR — modern theme (light + dark). Participant chat + shared primitives. Theme is switched via . All colors are CSS variables. ============================================================================ */ :root { --bg: #f6f8fc; --bg-soft: #eef1f7; --card: #ffffff; --ink: #0f172a; --muted: #64748b; --line: #e7ebf3; --brand: #3b6ef6; --brand-2: #6ea0ff; --brand-ink: #ffffff; --agent-bg: #eff3fb; --agent-ink: #1c2533; --user-bg: linear-gradient(135deg, #3b6ef6, #5b8bff); --user-ink: #ffffff; --ok: #16a34a; --warn: #b45309; --danger: #dc2626; --shadow: 0 8px 30px rgba(15, 23, 42, 0.07); --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.05); --radius: 18px; --radius-sm: 12px; --topbar-h: 56px; --maxw: 760px; color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } :root[data-theme="dark"] { --bg: #0e1320; --bg-soft: #131a29; --card: #161d2c; --ink: #e8edf7; --muted: #93a1b8; --line: #273248; --brand: #5b8bff; --brand-2: #7aa6ff; --brand-ink: #0b1020; --agent-bg: #1b2436; --agent-ink: #dde5f2; --user-bg: linear-gradient(135deg, #3f72f0, #6e9bff); --user-ink: #ffffff; --ok: #34d399; --warn: #fbbf24; --danger: #f87171; --shadow: 0 10px 34px rgba(0, 0, 0, 0.45); --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35); color-scheme: dark; } * { box-sizing: border-box; } /* min-height (not height) so a tall admin page can grow and its sticky top bar keeps sticking; a fixed height: 100% would confine sticky to the first viewport and let the bar scroll away. The chat uses 100dvh units, so it is unaffected. */ html, body { min-height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background 0.2s ease, color 0.2s ease; } /* topbar always on top; .main is the scroll area; chat header/composer stick inside it */ .wrap { min-height: 100dvh; } .topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .brand { font-weight: 700; letter-spacing: 0.2px; display: flex; align-items: center; gap: 9px; } .brand::before { content: ""; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow-sm); } .main { height: calc(100dvh - var(--topbar-h)); overflow-y: auto; width: 100%; max-width: var(--maxw); margin: 0 auto; /* No padding-top: a sticky child sticks inside the padding box, so any top padding here leaves a strip above .chat-head through which scrolling messages peek. The breathing room lives inside .chat-head instead. */ padding: 0 16px; } /* --- theme toggle --- */ .theme-btn { appearance: none; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); width: 38px; height: 38px; border-radius: 11px; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.1s ease; } .theme-btn:hover { background: var(--bg-soft); } .theme-btn:active { transform: scale(0.94); } /* --- cards (landing / done / error) --- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px; margin: 8px 0; } .card.center { text-align: center; } .card h1 { margin: 0 0 12px; font-size: 1.6rem; letter-spacing: -0.01em; } .lead { color: var(--muted); font-size: 1.04rem; } .big-emoji { font-size: 2.6rem; margin: 0 0 8px; } .disclaimer { list-style: none; margin: 20px 0 26px; padding: 0; } .disclaimer li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line); color: var(--ink); } .disclaimer .dot { position: absolute; left: 2px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .provisional { background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 0.9rem; margin: 0 0 16px; } .provisional.small { font-size: 0.8rem; padding: 6px 10px; margin: 6px 0 0; } /* role-context intake */ .card.intake { max-width: 560px; } .intake-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .field { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--muted); } .field select, .field input { font: inherit; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; } .field select:focus, .field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; } .field .hint { font-size: 0.8rem; color: var(--muted); } .intake-form .btn { margin-top: 6px; } /* --- buttons --- */ .btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink); padding: 12px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: filter 0.15s ease, transform 0.08s ease, opacity 0.15s ease; } .btn:hover { filter: brightness(1.05); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.45; cursor: default; filter: none; } .btn.big { width: 100%; padding: 15px; font-size: 1.05rem; } .btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); box-shadow: none; } /* --- chat: DeepL-style two columns (desktop) / stacked (mobile) --- */ /* Only the chat page turns .main into a non-scrolling flex frame; the dialog column scrolls internally so the input column can stay put. Other pages keep the normal scrolling .main. */ .main:has(.chat) { overflow: hidden; display: flex; flex-direction: column; max-width: 1100px; padding: 0 14px; } .chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 0 12px; } .dialog-col { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; } /* progress + current question pinned at the top of the dialog column */ .chat-head { position: sticky; top: 0; z-index: 6; background: var(--bg); display: flex; flex-direction: column; gap: 8px; padding: 2px 0 12px; box-shadow: 0 6px 8px -6px rgba(15, 23, 42, 0.12); } .progress { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width 0.45s cubic-bezier(.4,0,.2,1); } .meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; } .badge { font-size: 0.82rem; font-weight: 600; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--card)); border-radius: 999px; padding: 5px 13px; } .progress-text { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; } .current-q { font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.45; } .current-q:empty { display: none; } .resume-note { color: var(--muted); font-size: 0.9rem; margin: 0; } .log { display: flex; flex-direction: column; gap: 10px; padding: 12px 2px 8px; } .bubble { max-width: 86%; padding: 12px 16px; border-radius: 18px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; animation: pop 0.18s ease; } @keyframes pop { from { transform: translateY(5px); opacity: 0; } to { transform: none; opacity: 1; } } .bubble.agent { align-self: flex-start; background: var(--agent-bg); color: var(--agent-ink); border-bottom-left-radius: 6px; } .bubble.user { align-self: flex-end; background: var(--user-bg); color: var(--user-ink); border-bottom-right-radius: 6px; position: relative; } .bubble.user .msg { white-space: pre-wrap; word-wrap: break-word; } .bubble.thinking { color: var(--muted); font-style: italic; animation: pulse 1.3s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } /* edit pencil — shown only on the latest participant answer */ .edit-btn { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; font-size: 0.74rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); opacity: 0.6; transition: opacity .15s ease, transform .08s ease; } .bubble.user:hover .edit-btn { opacity: 1; } .edit-btn:hover { background: var(--bg-soft); } .edit-btn:active { transform: scale(0.92); } /* input column (DeepL-style big box); fixed at the bottom on mobile, left column on desktop */ .input-col { flex: none; min-width: 0; display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); } .input-col.editing { outline: 2px solid var(--brand); outline-offset: 1px; } .input-col textarea { resize: none; border: 0; outline: none; font: inherit; color: var(--ink); background: transparent; padding: 6px; min-height: 84px; } .input-col textarea::placeholder { color: var(--muted); } .input-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .counter { font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .counter.red { color: var(--danger); } .counter.black { color: var(--ink); } .counter.green { color: var(--ok); } .counter-hint { font-size: 0.78rem; color: var(--danger); margin: 2px 0 0; display: none; } .input-actions { display: flex; align-items: center; gap: 14px; } .skiplink { color: var(--muted); font-size: 0.85rem; text-decoration: underline; cursor: pointer; } .skiplink:hover { color: var(--ink); } .pausenote { color: var(--muted); font-size: 0.78rem; margin: 0; } @media (min-width: 820px) { .chat { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; padding: 14px 0; } .input-col { order: -1; height: 100%; } .input-col textarea { flex: 1; } .dialog-col { height: 100%; } } .check { width: 68px; height: 68px; line-height: 68px; margin: 0 auto 14px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, var(--card)); color: var(--ok); font-size: 2rem; font-weight: 700; } @media (max-width: 480px) { .main { padding: 14px 12px; } .card { padding: 22px 18px; } .bubble { max-width: 92%; } }