@font-face{font-family:Cairo;font-style:normal;font-weight:200 1000;font-display:block;src:url(https://cdn.jsdelivr.net/npm/@fontsource-variable/cairo@5.3.0/files/cairo-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Cairo;font-style:normal;font-weight:200 1000;font-display:block;src:url(https://cdn.jsdelivr.net/npm/@fontsource-variable/cairo@5.3.0/files/cairo-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cairo;font-style:normal;font-weight:200 1000;font-display:block;src:url(https://cdn.jsdelivr.net/npm/@fontsource-variable/cairo@5.3.0/files/cairo-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root,[data-theme="light"]{--bg:#ffffff;--surface:#f5f6f8;--ink:#141414;--ink-muted:#5c5f66;--line:#e3e5e8;--line-strong:#8a8f98;--accent:#2b59ff;--accent-hover:#1e45e0;--accent-text:#2b59ff;--accent-soft:#eaf0ff;--on-accent:#ffffff;--danger:#d12f2f;--focus:var(--accent-text);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141414;--surface:#1e1f22;--ink:#f5f6f8;--ink-muted:#a1a4ab;--line:#2c2e33;--line-strong:#6b7079;--accent-text:#6e8bff;--accent-soft:#1a2550;--danger:#ff6b6b;--focus:var(--accent-text);color-scheme:dark}}
[data-theme="dark"]{--bg:#141414;--surface:#1e1f22;--ink:#f5f6f8;--ink-muted:#a1a4ab;--line:#2c2e33;--line-strong:#6b7079;--accent-text:#6e8bff;--accent-soft:#1a2550;--danger:#ff6b6b;--focus:var(--accent-text);color-scheme:dark}
:root{--font-sans:Cairo,sans-serif;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-round:9999px;--container:1120px;--measure:680px;--header-height:72px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/24px var(--font-sans)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{opacity:.5;cursor:wait}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.logo{display:block;width:auto;color:var(--ink)}
.logo .dot{fill:var(--accent)}
.primary,.secondary{min-height:44px;padding:0 20px;border-radius:var(--radius-md);font-size:15px;font-weight:600;line-height:20px}
.primary{background:var(--accent);color:var(--on-accent)}
.primary:hover{background:var(--accent-hover)}
.primary.large{min-height:52px;padding:0 28px;font-size:17px}
.secondary{border:1.5px solid var(--ink);color:var(--ink)}
.secondary:hover{background:var(--surface)}
.text{color:var(--accent-text);font-size:15px;font-weight:600;text-align:left}
.text:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.nav-link{font-size:15px;font-weight:500;color:var(--ink-muted)}
.nav-link:hover{color:var(--ink)}
input,textarea{border:1.5px solid var(--line-strong);border-radius:var(--radius-md);background:var(--bg);color:var(--ink);font-size:16px}
input::placeholder,textarea::placeholder{color:var(--ink-muted)}
input:focus-visible,textarea:focus-visible{outline-offset:2px}
.login{min-height:100dvh;display:grid;place-items:center;padding:var(--space-12) var(--space-6)}
.login form{width:380px;max-width:100%}
.login .logo{margin-bottom:var(--space-12)}
.login h1{font-size:44px;line-height:50px;font-weight:700;letter-spacing:-.015em;margin:0 0 var(--space-8)}
.login label{display:block;margin-bottom:var(--space-3)}
.login input{display:block;width:100%;height:44px;padding:0 14px}
.login .primary{width:100%;margin-top:var(--space-3)}
#login-error{color:var(--danger);font-size:14px;line-height:20px;font-weight:500;min-height:20px;margin:var(--space-3) 0 0}
#mode{display:block;margin-top:var(--space-2)}
.login small{display:block;margin-top:var(--space-8);font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted)}
#app{display:flex;flex-direction:column;height:100dvh}
header.site{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);padding:var(--space-3) var(--space-12);border-bottom:1px solid var(--line)}
header nav{display:flex;align-items:center;gap:var(--space-6)}
#user-name{font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted)}
#conversation{flex:1;overflow-y:auto;padding:var(--space-12) var(--space-12) var(--space-6)}
#welcome,#messages{max-width:var(--measure);margin:0 auto}
#welcome{padding-top:8vh}
#welcome h1{font-size:44px;line-height:50px;font-weight:700;letter-spacing:-.015em;margin:0}
.message{white-space:pre-wrap;overflow-wrap:anywhere}
.message.user{font-size:18px;line-height:28px;font-weight:600;margin-top:var(--space-12)}
.message.user:first-child{margin-top:0}
.message.assistant{font-size:16px;line-height:26px;margin-top:var(--space-3)}
footer{padding:var(--space-4) var(--space-12) var(--space-6)}
#composer{max-width:var(--measure);margin:0 auto;display:flex;align-items:flex-end;gap:var(--space-3)}
textarea{flex:1;min-width:0;min-height:44px;max-height:180px;resize:none;padding:9px 14px;line-height:24px}
#send{width:44px;padding:0;display:grid;place-items:center;flex-shrink:0}
#status{max-width:var(--measure);margin:var(--space-3) auto 0;font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted)}
@media (max-width:760px){header.site{padding:var(--space-3) var(--space-6)}#user-name{display:none}#conversation{padding:var(--space-8) var(--space-6) var(--space-4)}footer{padding:var(--space-3) var(--space-6) var(--space-4)}.login h1,#welcome h1{font-size:34px;line-height:40px}#welcome{padding-top:4vh}}