/* Theme variables */
:root{ --radius:12px }
html[data-theme='dark']{
  --bg:#0b0c0f;           /* natural mac-like dark */
  --panel:#111318;
  --text:#ececec;
  --muted:#a7a7a7;
  --border:#1a1c22;
  --surface:#0f1115;
  --btn:#1a1c22;
  --btn-text:#f6f6f6;
}
html[data-theme='light']{
  --bg:#fafafa;
  --panel:#ffffff;
  --text:#111111;
  --muted:#5e5e5e;
  --border:#e5e5e5;
  --surface:#ffffff;
  --btn:#111111;
  --btn-text:#ffffff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
}

a{color:inherit;text-decoration:underline dotted}
a:hover{opacity:.85}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10
}
.brand{font-weight:700;letter-spacing:.5px}
.nav-actions{display:flex;gap:8px;align-items:center}

.container{max-width:960px;margin:24px auto;padding:0 16px}

.flash-wrap{margin-bottom:14px}
.flash{padding:10px;border-radius:8px;background:#121520;border:1px solid var(--border)}
.flash.success{border-color:#2ac3de}
.flash.error{border-color:#f7768e}

.card{ background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:18px }
.center{max-width:480px;margin:12vh auto}

h2,h3{margin:0 0 10px}

input,textarea,button{ width:100%;padding:14px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text); font-size:16px }
input,textarea{ background: #0d0f14; }
html[data-theme='light'] input, html[data-theme='light'] textarea{ background:#fff }
textarea{resize:vertical}
button.btn{ background: var(--btn); color: var(--btn-text); border: none; font-weight:600; cursor:pointer }
button.btn:hover{ opacity:.95 }
button.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border); cursor:pointer }
button.btn-ghost:hover{ background:rgba(255,255,255,0.03) }
button.small{ padding:8px 10px; width:auto }

.checkbox{display:flex;align-items:center;gap:8px;margin:10px 0}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:860px){.grid{grid-template-columns:1fr}}

.list{list-style:none;padding:0;margin:0}
.list li{padding:8px 0;border-bottom:1px dashed var(--border)}
.chat-link{display:flex;align-items:center;justify-content:space-between}
.badge{font-size:12px;background:#1f2635;border:1px solid var(--border);padding:2px 6px;border-radius:999px;color:var(--muted)}

.profile{display:flex;gap:16px}
.avatar{width:64px;height:64px;border-radius:50%;border:2px solid var(--border);object-fit:cover}
.profile .profile-fields{flex:1}

.chat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.chat-actions form{display:inline-block;margin-left:8px}

.messages{
  height:64vh;overflow-y:auto;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--radius);padding:18px;margin-bottom:14px;
  display:flex;flex-direction:column;gap:18px
}
.msg{display:flex;gap:12px;align-items:flex-start}
.msg .avatar{flex:0 0 32px;height:32px;width:32px;border-radius:8px;background:#1c1f26;color:#fafafa;display:flex;align-items:center;justify-content:center;font-weight:700}
html[data-theme='light'] .msg .avatar{ background:#111; color:#fff }
.msg .bubble{max-width:72%;padding:16px 18px;border-radius:14px}
.msg .meta{font-size:13px;color:var(--muted);margin-bottom:10px}
.msg .text{white-space:pre-wrap;word-break:break-word; line-height:1.7; font-size:16px}

/* User (left) */
.msg.user{flex-direction:row}
.msg.user .bubble{background:#14171d;border:1px solid var(--border)}
html[data-theme='light'] .msg.user .bubble{ background:#f5f5f5 }

/* Assistant (right) */
.msg.assistant{flex-direction:row-reverse}
.msg.assistant .bubble{background:#0f1217;border:1px solid var(--border)}
html[data-theme='light'] .msg.assistant .bubble{ background:#ffffff }

.chat-actions-wrap{display:flex;justify-content:flex-end;margin-bottom:8px}
.chatgpt .composer{display:flex;gap:12px;align-items:flex-end}
.chatgpt .composer textarea{flex:1}

.muted{color:var(--muted)}
.chatgpt{max-width:860px;margin:0 auto}
.chat-title{font-weight:700;margin:6px 6px 12px}
.chatgpt .composer{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:0}
.chatgpt .composer textarea{flex:1}
.chatgpt .composer button{max-width:220px}

/* Auth pages */
.auth-header{margin-bottom:16px}
.password-wrap{display:flex;gap:8px}
.password-wrap input{flex:1}
.auth-form label{display:block;margin:10px 0 6px;font-weight:600}
.auth .muted{margin-top:10px}
/* Space the submit button away from the password field */
.auth-form button[type="submit"]{ margin-top:14px }