:root { color-scheme: dark; --bg:#0e131a; --ink:#f7f9fc; --muted:#aab7c5; --line:#33404f; --accent:#62e8ff; --button-ink:#071018; --bubble:#192330; }
[data-theme="light"] { color-scheme:light; --bg:#fff; --ink:#101820; --muted:#53616e; --line:#ccd5dc; --accent:#006a78; --button-ink:#fff; --bubble:#eef3f7; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 system-ui,sans-serif; } button,input { font:inherit; } button { cursor:pointer; min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); } button:hover { border-color:var(--accent); } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; } .chat { max-width:850px; margin:auto; min-height:100vh; display:flex; flex-direction:column; padding:20px; gap:16px; } header { display:flex; gap:16px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:16px; } header small { display:block; margin-top:4px; color:var(--muted); } .dot { display:inline-block; width:8px; height:8px; background:var(--accent); border-radius:50%; margin-right:8px; } #messages { flex:1; min-height:140px; max-height:340px; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:4px; } .message { padding:14px 18px; border-radius:14px; background:var(--bubble); max-width:90%; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; } .message.user { align-self:flex-end; border:1px solid var(--line); background:transparent; } #suggestions { display:flex; gap:8px; flex-wrap:wrap; } form > label { display:block; margin-bottom:8px; font-weight:600; } .composer { display:flex; gap:8px; } input[type=text], input:not([type]) { min-width:0; flex:1; min-height:48px; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--bg); color:var(--ink); } #send { background:var(--accent); color:var(--button-ink); border-color:var(--accent); font-weight:600; } .attachments { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); font-size:12px; } input[type=file] { max-width:100%; font-size:12px; } #file-status { width:100%; } @media(max-width:420px) { .chat { padding:14px; } .composer { flex-wrap:wrap; } .composer input { width:100%; flex-basis:100%; } #send { width:100%; } } @media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }