:root { --ink:#20201e; --muted:#77746d; --paper:#f3f1eb; --line:#dedbd3; --red:#b84c3d; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; }
body { margin:0; min-height:100vh; min-height:100dvh; overflow:hidden; background:var(--paper); color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.shell { width:min(720px,100%); height:100vh; height:100dvh; min-height:0; margin:auto; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:32px 24px 24px; position:relative; }
header { display:flex; align-items:center; gap:13px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.mark { width:42px; height:42px; background:var(--red); color:white; display:grid; place-items:center; border-radius:50% 50% 48% 52% / 45% 48% 52% 55%; font-family:Georgia,serif; font-size:21px; }
h1 { font:500 20px/1.1 Georgia,serif; margin:0 0 5px; }
header p { margin:0; color:var(--muted); font-size:11px; letter-spacing:.03em; }
header p span { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#628568; }
.clear-chat { margin-left:auto; border:0; border-bottom:1px solid transparent; padding:3px 0; background:transparent; color:var(--muted); font:500 10px/1.2 Manrope,sans-serif; letter-spacing:.03em; cursor:pointer; transition:.2s; }
.clear-chat:hover { color:var(--red); border-bottom-color:currentColor; }
.pipeline-switch { margin-left:auto; display:flex; padding:2px; border:1px solid var(--line); border-radius:8px; }
.pipeline-switch[hidden] { display:none; }
.pipeline-switch button { border:0; border-radius:6px; padding:5px 7px; background:transparent; color:var(--muted); font:500 9px/1 Manrope,sans-serif; cursor:pointer; }
.pipeline-switch button.active { background:var(--ink); color:var(--paper); }
.pipeline-switch + .clear-chat { margin-left:8px; }
.chat { min-height:0; overflow-y:auto; display:flex; flex-direction:column; padding:32px 4px 20px; scrollbar-width:thin; }
.empty { margin:auto; max-width:430px; text-align:center; padding:70px 0; }
.symbol { color:var(--red); opacity:.65; font:34px Georgia,serif; letter-spacing:.12em; margin-bottom:22px; }
.empty h2 { font:400 clamp(27px,5vw,38px)/1.2 Georgia,serif; margin:0 0 14px; }
.empty p { color:var(--muted); font-size:14px; line-height:1.7; margin:0; }
.message { max-width:82%; margin:0 0 18px; animation:appear .25s ease both; }
.message.user { align-self:flex-end; background:#dedbd2; border-radius:18px 18px 4px 18px; padding:12px 15px; }
.message.assistant { align-self:flex-start; padding-left:18px; border-left:2px solid var(--red); }
.message .label { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.message .text { white-space:pre-wrap; font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.typing { display:flex; gap:5px; padding:9px 0; }
.typing i { width:5px; height:5px; border-radius:50%; background:var(--muted); animation:pulse 1.1s infinite; }
.typing i:nth-child(2) { animation-delay:.15s }.typing i:nth-child(3) { animation-delay:.3s }
form { position:relative; border:1px solid #cbc7bd; border-radius:16px; background:rgba(255,255,255,.48); padding:13px 56px 28px 16px; box-shadow:0 8px 30px rgba(45,40,30,.06); }
textarea { display:block; width:100%; max-height:130px; resize:none; border:0; outline:0; background:transparent; color:var(--ink); font:14px/1.5 Manrope,sans-serif; }
textarea::placeholder { color:#969189; }
form button { position:absolute; right:12px; top:10px; width:38px; height:38px; padding:9px; border:0; border-radius:12px; background:var(--red); cursor:pointer; transition:.2s; }
form button:hover { transform:translateY(-1px); background:#a94234; } form button:disabled { opacity:.45; cursor:wait; transform:none; }
form button svg { fill:none; stroke:white; stroke-width:1.8; width:100%; height:100%; }
.hint { position:absolute; bottom:8px; left:16px; color:#9a968e; font-size:9px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@keyframes pulse { 0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)} }
@keyframes appear { from{opacity:0;transform:translateY(6px)} }
@media(max-width:600px){
  .shell { padding:calc(14px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  header { gap:10px; padding-bottom:14px; }
  .mark { width:36px; height:36px; font-size:18px; flex:0 0 auto; }
  h1 { font-size:18px; }
  header p { font-size:9px; }
  .clear-chat { max-width:70px; font-size:9px; text-align:right; }
  .pipeline-switch button { padding:5px; font-size:8px; }
  .chat { padding:18px 2px 10px; overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none; }
  .chat::-webkit-scrollbar { display:none; width:0; height:0; }
  .empty { padding:24px 10px; }
  .symbol { margin-bottom:14px; font-size:29px; }
  .empty h2 { font-size:28px; }
  .empty p { font-size:13px; line-height:1.6; }
  .message { max-width:94%; margin-bottom:14px; }
  .message.user { padding:10px 13px; }
  .message.assistant { padding-left:13px; }
  .message .text { font-size:14px; line-height:1.55; }
  form { border-radius:14px; padding:12px 52px 12px 14px; }
  textarea { font-size:16px; }
  form button { right:9px; top:8px; width:36px; height:36px; }
  .hint { display:none; }
}