:root {
  --ink: #171717;
  --muted: #777;
  --line: #e8e8e8;
  --paper: #fff;
  --soft: #f6f6f6;
  --accent: #E00182;
  font-family: "DM Sans", "Noto Sans Thai", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", "Noto Sans Thai", sans-serif; }
button, textarea { font: inherit; }
.shell { min-height: 100svh; max-width: 1120px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; }
.topbar { height: 72px; width: 100vw; position: relative; left: 50%; margin-left: -50vw; display: flex; align-items: center; justify-content: space-between; background: #E00182; padding: 0 max(28px, calc((100vw - 1064px) / 2)); }
.brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
.brand img { display: block; width: auto; height: 42px; max-width: min(58vw, 240px); object-fit: contain; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.status { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #fff; display: flex; gap: 7px; align-items: center; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #42b978; display: inline-block; }
.language { border: 1px solid rgba(255,255,255,.8); background: #fff; color: #E00182; border-radius: 20px; min-width: 38px; height: 30px; font-size: 11px; font-weight: 700; cursor: pointer; }
.chat-layout { width: min(100%, 720px); margin: 0 auto; flex: 1; display: flex; flex-direction: column; padding: clamp(54px, 12vh, 120px) 0 26px; }
.intro { margin-bottom: 30px; }
.eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 18px; }
h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.05; letter-spacing: -2.6px; margin: 0 0 10px; font-weight: 600; }
.subhead { margin: 0; color: var(--muted); font-size: 14px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.suggestion { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); background: #fff; border-radius: 5px; color: var(--ink); cursor: pointer; font-size: 12px; transition: background .15s, border-color .15s; }
.suggestion span { color: #888; font-size: 13px; }
.suggestion:hover { background: var(--soft); border-color: #ccc; }
.messages { display: flex; flex-direction: column; gap: 16px; margin: 0 0 18px; }
.assistant-line { display: flex; align-items: flex-start; gap: 10px; max-width: 94%; }
.albert-avatar { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; object-fit: cover; border: 2px solid #E00182; background: #171717; }
.assistant-content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.assistant-name { color: #E00182; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; padding-left: 2px; }
.message { max-width: 88%; padding: 13px 15px; border-radius: 10px; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user { align-self: flex-end; background: var(--ink); color: white; border-bottom-right-radius: 3px; }
.message.assistant { align-self: flex-start; max-width: 100%; background: var(--soft); color: var(--ink); border-bottom-left-radius: 3px; }
.message.error { color: #a22; }
.composer { display: flex; align-items: flex-end; gap: 10px; border: 1px solid #dcdcdc; border-radius: 9px; padding: 8px 9px 8px 15px; box-shadow: 0 4px 18px rgba(0,0,0,.035); background: white; }
.composer:focus-within { border-color: #999; }
textarea { resize: none; flex: 1; border: 0; outline: 0; min-height: 27px; max-height: 120px; padding: 5px 0; color: var(--ink); font-size: 13px; line-height: 1.5; background: transparent; }
textarea::placeholder { color: #999; }
.send { width: 34px; height: 34px; border: 0; border-radius: 6px; background: var(--ink); color: white; cursor: pointer; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.send:disabled { opacity: .4; cursor: wait; }
.footnote { margin: 10px 2px 0; color: #999; font-size: 10px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .shell { padding: 0 18px; }
  .topbar { height: 62px; padding: 0 18px; }
  .brand img { height: 36px; max-width: 58vw; }
  .chat-layout { padding-top: 12vh; }
  .intro { margin-bottom: 24px; }
  .eyebrow { font-size: 8px; letter-spacing: 1px; }
  h1 { letter-spacing: -1.8px; }
  .suggestions { gap: 7px; }
  .suggestion { padding: 9px 10px; font-size: 11px; }
  .message { max-width: 94%; }\n  .assistant-line { max-width: 100%; gap: 8px; }\n  .albert-avatar { width: 40px; height: 40px; flex-basis: 40px; }
}