:root { --ink:#172235; --navy:#0e2847; --blue:#155e9b; --paper:#f6f8fb; --card:#fff; --line:#d6e0eb; --muted:#5f6f82; --danger:#8a2432; --focus:#ef9b32; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; line-height:1.5; } a { color:var(--blue); } a:focus, button:focus, select:focus, textarea:focus { outline:3px solid var(--focus); outline-offset:2px; } .container { width:min(960px, calc(100% - 2rem)); margin:auto; } .site-header { background:var(--navy); color:#fff; padding:1rem 0; } .header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { font-size:1.25rem; font-weight:800; color:white; text-decoration:none; } nav { display:flex; gap:1.25rem; } nav a { color:#e9f3ff; } main { padding-bottom:3rem; } .hero { padding:4.5rem 0 2rem; max-width:720px; } .eyebrow { color:var(--blue); font-size:.85rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; margin:0 0 .6rem; } h1 { font-size:clamp(2rem,6vw,3.4rem); line-height:1.1; margin:.1rem 0 1rem; } h2 { margin-top:0; } .lede,.muted { color:var(--muted); } .card,.notice,.message,.diagnostics { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.4rem; } .start-card { max-width:620px; } label { display:block; font-weight:700; margin:.9rem 0 .35rem; } select,textarea { width:100%; color:var(--ink); background:#fff; border:1px solid #94a8bc; border-radius:6px; padding:.7rem; font:inherit; } button,.button-link { display:inline-block; background:var(--blue); color:white; border:0; border-radius:6px; cursor:pointer; font:inherit; font-weight:700; padding:.7rem 1rem; margin-top:1rem; text-decoration:none; } button:disabled { opacity:.55; cursor:not-allowed; } .button-secondary { background:#fff; color:var(--danger); border:1px solid var(--danger); margin:0; } .notice { margin:1.5rem 0; } .notice p { margin:.2rem 0; } .notice-error { border-color:#d49ca5; background:#fff4f5; color:#6d1724; } .notice-success { border-color:#9cc8a9; background:#f2fff5; } .section-heading,.page-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:3rem 0 1rem; } .section-heading h2,.section-heading p { margin:0; } .conversation-list { padding:0; margin:0; list-style:none; border-top:1px solid var(--line); } .conversation-list li { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); } .conversation-list a { display:grid; gap:.2rem; color:var(--ink); text-decoration:none; } .conversation-list a:hover strong { color:var(--blue); } .conversation-list span,.conversation-list small { color:var(--muted); } .status { margin-top:2rem; color:var(--muted); } .messages { display:grid; gap:1rem; margin:1.5rem 0; } .message { max-width:850px; } .message.user { background:#eaf4fd; margin-left:auto; } .message h2 { font-size:1rem; margin-bottom:.45rem; } .message p { white-space:pre-wrap; margin:0; } .sources { border-top:1px solid var(--line); margin-top:1rem; padding-top:.8rem; } .sources h3 { font-size:.95rem; margin:0; } .sources ul { margin:.35rem 0 0; padding-left:1.2rem; } .chat-form { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem; } .form-row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; } .form-row button { margin:.75rem 0 0; } .form-error { color:var(--danger); margin:.75rem 0 0; } .empty { text-align:center; padding:5rem 0; } .diagnostics { display:grid; grid-template-columns:max-content 1fr; gap:.7rem 1.5rem; } .diagnostics dt { font-weight:700; } .diagnostics dd { margin:0; overflow-wrap:anywhere; } .site-footer { border-top:1px solid var(--line); padding:1.5rem 0; color:var(--muted); }
@media (max-width:600px) { .header-inner,.page-heading,.section-heading { align-items:flex-start; flex-direction:column; } nav { gap:.8rem; } .hero { padding-top:2.5rem; } .conversation-list li { align-items:flex-start; flex-direction:column; } .diagnostics { grid-template-columns:1fr; gap:.2rem; } .diagnostics dd { margin-bottom:.7rem; } }