/* Almaraz brand: colors and fonts from almaraz.ai and the logo files. */
:root {
  --bg:#f1ede3; --paper:#faf8f3; --ink:#1c1a16; --cream:#f1ece0; --muted:#6f6a5f; --line:#ddd6c6;
  --accent:#b46041; --accent-soft:#f3e1d8; --side:#2d2b28; --side-ink:#f0ede4; --side-muted:#a39e93; --side-line:#3e3b37;
  --serif:Newsreader, Georgia, serif; --sans:"Hanken Grotesk", Helvetica, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
  --side-w:290px;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:16px/1.5 var(--sans); }
button { font:inherit; cursor:pointer; }
.label { font:500 10.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; }

#shell { display:flex; height:100dvh; }

/* ---- sidebar ---- */
#side { width:var(--side-w); flex:none; background:var(--side); color:var(--side-ink); display:flex; flex-direction:column; padding:18px 14px 14px; gap:12px; }
.side-top { display:flex; align-items:center; justify-content:space-between; padding:0 4px; }
.logo { height:26px; width:auto; }
.new-chat { background:var(--accent); color:#fdf4ee; border:0; border-radius:100px; padding:10px 14px; font-weight:500; text-align:left; }
#search { background:#262421; border:1px solid var(--side-line); color:var(--side-ink); border-radius:12px; padding:9px 12px; font:14px var(--sans); }
#search::placeholder { color:var(--side-muted); }
#search::-webkit-search-cancel-button { filter:grayscale(1) brightness(1.6); }
#search:focus { outline:none; border-color:var(--accent); }
#threads { flex:1; overflow-y:auto; margin:0 -6px; padding:0 6px; }
.group { color:var(--side-muted); margin:14px 8px 6px; }
.thread { display:block; width:100%; text-align:left; background:none; border:0; color:var(--side-ink); border-radius:10px; padding:9px 10px; }
.thread:hover { background:#36332f; }
.thread.active { background:#403c37; }
.thread .t { font:400 16px/1.25 var(--serif); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread .s { font:12px/1.35 var(--sans); color:var(--side-muted); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.thread .fn { font:500 10.5px var(--mono); letter-spacing:.06em; color:var(--side-muted); }
.empty-note { color:var(--side-muted); font-size:13px; padding:6px 10px; }
.side-foot { display:flex; flex-direction:column; gap:8px; padding:10px 6px 0; border-top:1px solid var(--side-line); }
.side-foot a { color:var(--side-muted); text-decoration:none; }
.side-foot .demo { color:#e2a58c; display:none; }
.icon-btn { background:none; border:0; font-size:22px; line-height:1; padding:6px 8px; color:inherit; }

/* ---- main ---- */
#main { flex:1; display:flex; flex-direction:column; min-width:0; }
#top { display:flex; align-items:center; gap:8px; padding:12px 20px; border-bottom:1px solid var(--line); min-height:62px; }
#titleBox { min-width:0; }
#threadTitle { font:400 21px/1.2 var(--serif); letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#threadTitle em { color:var(--accent); }
#threadSub { color:var(--muted); margin-top:3px; }
#log { flex:1; overflow-y:auto; padding:22px 20px; display:flex; flex-direction:column; gap:14px; }
#log > * { width:100%; max-width:760px; margin-left:auto; margin-right:auto; }
.msg { max-width:92%; padding:11px 15px; border-radius:16px; word-wrap:break-word; }
.row { display:flex; flex-direction:column; }
.row.user { align-items:flex-end; } .row.bot { align-items:flex-start; }
.user .msg { background:var(--ink); color:var(--cream); border-bottom-right-radius:5px; }
.bot .msg { background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:5px; }
.bot ul { margin:6px 0; padding-left:20px; } .bot p { margin:6px 0; } .bot strong { font-weight:600; }
.ref { display:inline-block; font:500 11px/1.6 var(--mono); background:var(--accent-soft); color:var(--accent); border-radius:6px; padding:0 6px; margin:0 1px; text-decoration:none; white-space:nowrap; }
.mk { font-weight:600; margin-right:2px; } .mk-ok { color:var(--accent); } .mk-no { color:#8a2f22; } .mk-q { color:var(--muted); }
.urgent { color:var(--accent); font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.draft { border:1px solid var(--line); background:#fff; border-radius:12px; margin:10px 0; overflow:hidden; }
.draft-head { display:flex; justify-content:space-between; align-items:center; padding:7px 10px 7px 12px; border-bottom:1px solid var(--line); background:var(--bg); }
.draft-head .label { color:var(--muted); }
.draft pre { margin:0; padding:12px; white-space:pre-wrap; font:15px/1.5 var(--sans); }
.pill { background:none; border:1px solid var(--line); border-radius:100px; padding:3px 11px; font:500 12px var(--sans); color:var(--muted); }
.pill.on { border-color:var(--accent); color:var(--accent); }
.pill.primary { background:var(--accent); border-color:var(--accent); color:#fdf4ee; }
.actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.why { margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper); max-width:92%; }
.why .label { color:var(--muted); display:block; margin-bottom:8px; }
.why .opts { display:flex; gap:6px; flex-wrap:wrap; }
.why input { width:100%; margin-top:8px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font:14px var(--sans); background:#fff; }
.notice { color:var(--accent); align-self:center; text-align:center; }
.progress { font:500 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.progress::before { content:""; display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.err { color:#8a2f22; }
#chips { display:flex; gap:8px; overflow-x:auto; padding:0 20px 10px; max-width:800px; width:100%; margin:0 auto; }
#chips button { flex:none; background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:7px 13px; font:14px var(--sans); color:var(--ink); }
#f { display:flex; gap:8px; padding:10px 20px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg); }
#f > * { }
#q { flex:1; resize:none; border:1px solid var(--line); background:var(--paper); border-radius:16px; padding:11px 14px; font:16px var(--sans); color:var(--ink); max-height:160px; }
#q:focus { outline:none; border-color:var(--accent); }
#send { background:var(--accent); color:#fdf4ee; border:0; border-radius:100px; padding:0 22px; font-weight:500; }
#send.stop { background:var(--ink); }
#welcome { margin:auto; padding:0 4px; }
#welcome .label { color:var(--accent); display:block; margin-bottom:10px; }
#welcome h2 { font:400 36px/1.1 var(--serif); letter-spacing:-.7px; margin:0 0 10px; }
#welcome h2 em { color:var(--accent); }
#welcome p { color:var(--muted); margin:0; font-size:15px; }

/* ---- beta notice ---- */
.beta { background:var(--accent-soft); color:var(--ink); font-size:13px; padding:7px 20px; border-bottom:1px solid var(--line); }
.beta .label { color:var(--accent); margin-right:6px; }
@media (max-width: 899px) { .beta { padding:6px 14px; font-size:12.5px; } }

/* ---- elapsed time ---- */
.progress .secs { color:var(--accent); }
.elapsed { color:var(--muted); align-self:center; margin-left:4px; }
button.ref { border:0; cursor:pointer; }
button.ref:hover, button.ref.open { background:var(--accent); color:#fdf4ee; }

/* ---- source panel: right side on desktop, full screen on phones ---- */
#source { position:fixed; top:0; right:0; bottom:0; width:min(460px, 100vw); z-index:30; background:var(--paper);
  border-left:1px solid var(--line); box-shadow:-12px 0 30px rgba(28,26,22,.08); display:flex; flex-direction:column;
  padding:16px 18px calc(16px + env(safe-area-inset-bottom)); gap:10px; }
#source[hidden] { display:none; }
.src-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-top:env(safe-area-inset-top); }
.src-titles { min-width:0; }
#srcKind { color:var(--accent); }
#srcTitle { font:400 20px/1.25 var(--serif); margin-top:4px; overflow-wrap:anywhere; }
.src-meta { color:var(--muted); font-size:13px; display:flex; flex-direction:column; gap:2px; }
#srcOpen { align-self:flex-start; text-decoration:none; color:var(--accent); border-color:var(--accent); }
.src-body { flex:1; overflow-y:auto; white-space:pre-wrap; font:14.5px/1.55 var(--sans); border-top:1px solid var(--line); padding-top:10px; }
.src-body.loading { color:var(--muted); }
.src-body.err { color:#8a2f22; white-space:normal; }
@media (min-width: 900px) {
  /* keep the answer visible beside the panel so other citations stay clickable */
  #shell.src-open #main { margin-right:min(460px, 40vw); }
  #shell.src-open #source { width:min(460px, 40vw); }
}
@media (max-width: 899px) { #source { width:100vw; border-left:0; } }

/* ---- desktop: persistent sidebar; mobile: drawer ---- */
.only-mobile { display:none; }
@media (min-width: 900px) {
  #f, #chips { max-width:none; }
  #f, #chips { padding-left:max(20px, calc((100% - 760px) / 2)); padding-right:max(20px, calc((100% - 760px) / 2)); }
}
@media (max-width: 899px) {
  .only-mobile { display:inline-block; }
  #side { position:fixed; inset:0 auto 0 0; width:min(86vw, 340px); z-index:20; transform:translateX(-102%); transition:transform .2s ease; padding-top:calc(18px + env(safe-area-inset-top)); }
  #shell.open #side { transform:none; }
  #backdrop { position:fixed; inset:0; background:rgba(28,26,22,.35); z-index:10; display:none; }
  #shell.open #backdrop { display:block; }
  #top { padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top)); }
  #log { padding:18px 14px; }
  #f { padding-left:14px; padding-right:14px; }
  #chips { padding:0 14px 10px; }
  #welcome h2 { font-size:32px; }
}

/* ---- sign-in ---- */
#signin { position:fixed; inset:0; z-index:50; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; }
.signin-card { width:100%; max-width:400px; }
.signin-logo { height:30px; margin-bottom:28px; }
.signin-card .label { color:var(--accent); display:block; margin-bottom:8px; }
.signin-card h2 { font:400 38px/1.1 var(--serif); letter-spacing:-.7px; margin:0 0 8px; }
.signin-card p { color:var(--muted); margin:0 0 18px; }
#signinForm { display:flex; flex-direction:column; gap:10px; }
#signinEmail { border:1px solid var(--line); background:var(--paper); border-radius:14px; padding:12px 14px; font:16px var(--sans); }
#signinEmail:focus { outline:none; border-color:var(--accent); }
#signinForm button { background:var(--accent); color:#fdf4ee; border:0; border-radius:100px; padding:12px 18px; font-weight:500; }
.signin-msg { margin-top:14px !important; color:var(--ink) !important; }
.signin-msg.err { color:#8a2f22 !important; }
.side-foot .who { color:var(--side-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-foot .row2 { display:flex; justify-content:space-between; gap:8px; }
.side-foot button.label { background:none; border:0; color:var(--side-muted); padding:0; }