:root{--bg: #fafaf8;--surface: #ffffff;--ink: #1e262c;--ink-muted: #6b7680;--brand-red: #ff1616;--accent: #c81010;--accent-soft: #fdecec;--brand-yellow: #ffcf00;--bubble-customer: #fff8e1;--success: #2e7d32;--warning: #b26a00;--danger: #c62828;--radius: 12px;--radius-bubble: 16px;--radius-control: 10px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-6: 24px;--sp-8: 32px;--shadow-header: 0 1px 0 rgba(0, 0, 0, .06);--font-body: 16px;--font-aux: 13px}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/notosans-vietnamese-400.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Noto Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/notosans-vietnamese-600.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Noto Sans Devanagari;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/notosansdevanagari-devanagari-400.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--ink);font-family:Noto Sans,Noto Sans Devanagari,system-ui,-apple-system,sans-serif;font-size:var(--font-body);font-weight:400;line-height:1.5}#app{height:100%}.app{display:flex;flex-direction:column;height:100%;max-width:640px;margin:0 auto;background:var(--surface)}.header{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-header);position:sticky;top:0;background:var(--surface);z-index:2}.header__logo{width:28px;height:28px;flex:none}.header__title{font-weight:600;font-size:15px}.header__status{color:var(--ink-muted);font-size:var(--font-aux)}.header__spacer{flex:1}.lang-pill{border:1px solid var(--accent-soft);background:var(--surface);color:var(--accent);border-radius:999px;padding:4px 10px;font-size:var(--font-aux);cursor:pointer;min-height:32px}.btn{font:inherit;border-radius:var(--radius-control);border:1px solid transparent;padding:10px 16px;min-height:44px;cursor:pointer}.btn--primary{background:var(--accent);color:#fff;font-weight:600}.btn--primary:hover{filter:brightness(.95)}.btn--ghost{background:var(--surface);border-color:var(--accent-soft);color:var(--accent)}.btn:focus-visible,.tile:focus-visible,.chip:focus-visible,.lang-pill:focus-visible,.lang-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.language{padding:var(--sp-6) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);justify-content:center;flex:1}.language h1{font-size:20px;font-weight:600;text-align:center;margin:0 0 var(--sp-4)}.lang-btn{display:block;width:100%;text-align:left;padding:16px;min-height:44px;border:1px solid var(--accent-soft);border-radius:var(--radius);background:var(--surface);font-size:17px;cursor:pointer}.scroll{flex:1;overflow-y:auto;padding:var(--sp-4)}.category__prompt{font-weight:600;margin:0 0 var(--sp-3)}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}.tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-4);min-height:88px;border:1px solid var(--accent-soft);border-radius:var(--radius);background:var(--surface);cursor:pointer;text-align:left}.tile__icon{width:24px;height:24px;color:var(--accent)}.tile__label{font-size:14px}.btn--change-topic{margin-bottom:var(--sp-3);padding:6px 12px;min-height:36px;font-size:var(--font-aux)}.messages{display:flex;flex-direction:column;gap:var(--sp-3)}.msg{max-width:85%;padding:10px 14px;border-radius:var(--radius-bubble);font-size:var(--font-body);white-space:pre-wrap;word-break:break-word}.msg--customer{align-self:flex-end;background:var(--bubble-customer)}.msg--ai,.msg--staff{align-self:flex-start;background:var(--bg);border:1px solid var(--accent-soft)}.msg__by{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted);margin-bottom:4px}.msg__by-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-yellow)}.msg--system{align-self:center;color:var(--ink-muted);font-size:var(--font-aux);background:transparent}.linkcard{display:inline-block;margin-top:var(--sp-2);color:var(--accent);text-decoration:underline;word-break:break-all}.typing{display:inline-flex;gap:4px;align-self:flex-start;padding:12px 14px}.typing span{width:7px;height:7px;border-radius:50%;background:var(--ink-muted);animation:blink 1.2s infinite both}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.3}40%{opacity:1}}.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}.chip{border:1px solid var(--accent-soft);background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:8px 14px;min-height:44px;font:inherit;cursor:pointer}.feedback{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}.composer{display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--accent-soft);background:var(--surface)}.composer input{flex:1;font:inherit;padding:10px 12px;min-height:44px;border:1px solid var(--accent-soft);border-radius:var(--radius-control)}.escalation{margin-top:var(--sp-3);padding:var(--sp-4);border:1px solid var(--accent-soft);border-radius:var(--radius);background:var(--bg)}.escalation h2{font-size:15px;margin:0 0 var(--sp-2)}.escalation input{width:100%;font:inherit;padding:10px 12px;min-height:44px;border:1px solid var(--accent-soft);border-radius:var(--radius-control);margin-bottom:var(--sp-2)}.banner{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);font-size:var(--font-aux)}.banner--offline{background:var(--warning);color:#fff}.banner--replied{background:var(--accent-soft);color:var(--accent)}.state{padding:var(--sp-6);text-align:center;color:var(--ink-muted)}.state__icon{width:28px;height:28px;margin-bottom:var(--sp-2)}.error-note{display:flex;align-items:center;gap:var(--sp-2);color:var(--danger);font-size:var(--font-aux);margin-top:var(--sp-2)}@media (prefers-reduced-motion: reduce){.typing span{animation:none}}