/* Palette taken from shamela.ws: teal titles, bronze accents, green quoted text, the
   light-blue notice strip, slate; a Kufi face for the interface and a Naskh face for
   reading, as on its book pages. */
:root {
  --bg: #ffffff;
  --surface: #f9f9f9;
  --line: #e3e3e3;
  --text: #2b2b2b;
  --muted: #666666;
  --primary: #005c81;
  --primary-ink: #004966;
  --blue: #245580;
  --soft: #d9edf7;
  --soft-line: #bce8f1;
  --bronze: #ab8b64;
  --bronze-ink: #7d6240;        /* the bronze darkened until it passes AA as text on white */
  --quote: #005300;
  --danger: #a94442;
  --shadow: 0 6px 24px rgba(31, 38, 45, .14);
  --ui: "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
  --read: Georgia, "Noto Naskh Arabic", "Traditional Arabic", serif;   /* Latin from Georgia, Arabic from the Naskh */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161b20;
    --surface: #1f262d;           /* shamela.ws's slate */
    --line: #313b45;
    --text: #e8e3da;
    --muted: #9aa5ae;
    --primary: #5fb3d4;
    --primary-ink: #8fcbe3;
    --blue: #8db5d8;
    --soft: #12303d;
    --soft-line: #1d4a5c;
    --bronze: #c9a87c;
    --bronze-ink: #d6b98f;
    --quote: #86c986;
    --danger: #e08b89;
    --shadow: 0 6px 24px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); font: 15px/1.7 var(--ui);
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* ── top bar ── */
.bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .55rem max(1rem, calc((100vw - 820px) / 2)); background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--primary); text-decoration: none; }
.brand b { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; }
.brand small { display: block; font-size: 11.5px; color: var(--bronze-ink); line-height: 1.4; }
nav { display: flex; gap: .4rem; }
.ghost {
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .85rem;
  font-size: 13px; color: var(--primary); white-space: nowrap;
}
.ghost:hover { background: var(--soft); border-color: var(--soft-line); }

/* ── conversation ── */
#chat { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }
#welcome { text-align: center; padding: 9vh 0 2rem; }
#welcome h1 { margin: 0 0 .6rem; font-size: clamp(22px, 4vw, 30px); color: var(--primary); font-weight: 700; }
#welcome p { margin: 0 auto 1.8rem; max-width: 34rem; color: var(--muted); }
#suggestions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
#suggestions button {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .5rem .9rem;
  font-size: 14px; text-align: start; max-width: 100%;
}
#suggestions button:hover { border-color: var(--bronze); background: var(--bg); }

/* the user's message sits on the right in both languages (physical, not inline, margin) */
.user {
  width: fit-content; max-width: 85%; margin: 1.6rem 0 .9rem auto; padding: .55rem 1rem;
  background: var(--soft); border: 1px solid var(--soft-line); border-radius: 16px 16px 4px 16px;
  color: var(--primary-ink); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* research activity */
.steps { margin: 0 0 .5rem; font-size: 13px; color: var(--muted); }
.steps summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; width: fit-content; max-width: 100%; }
.steps summary::-webkit-details-marker { display: none; }
.steps summary::after { content: "‹"; transition: transform .15s; color: var(--bronze); font-size: 15px; }
.steps[open] summary::after { transform: rotate(-90deg); }
.steps summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spinner {
  flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--soft-line);
  border-top-color: var(--primary); animation: spin .8s linear infinite;
}
.steps.done .spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps ol { margin: .4rem 0 .2rem; padding: .5rem .9rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.steps li { padding: .12rem 0; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.steps li b { color: var(--blue); font-weight: 500; }
.steps li q { quotes: "«" "»"; color: var(--text); font-family: var(--read); font-size: 15px; }
.steps li .tag { border: 1px solid var(--line); border-radius: 999px; padding: 0 .5rem; font-size: 11.5px; }
.steps li .n { margin-inline-start: auto; color: var(--bronze-ink); font-size: 12px; }
.steps li.note { color: var(--muted); font-style: italic; }

/* the reply: a reading page */
.reply { font: 19px/2.05 var(--read); overflow-wrap: anywhere; }
.reply:lang(en), .reply[dir="ltr"] { font-size: 17px; line-height: 1.75; }
.reply > :first-child { margin-top: 0; }
.reply p { margin: 0 0 .9em; }
.reply h1, .reply h2, .reply h3, .reply h4 { font-family: var(--ui); color: var(--primary); line-height: 1.5; margin: 1.5em 0 .5em; font-weight: 700; }
.reply h1 { font-size: 21px; } .reply h2 { font-size: 18px; } .reply h3, .reply h4 { font-size: 16px; color: var(--blue); }
.reply h2 { padding-bottom: .25em; border-bottom: 1px solid var(--line); }
.reply strong { font-weight: 700; color: var(--primary-ink); }
.reply ul, .reply ol { margin: 0 0 .9em; padding-inline-start: 1.5em; }
.reply li { margin: .2em 0; } .reply li::marker { color: var(--bronze); }
.reply blockquote { margin: 0 0 .9em; padding: .1em 1em; border-inline-start: 3px solid var(--bronze); background: var(--surface); border-radius: 4px; }
.reply hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }
.reply code { font: 14px ui-monospace, Consolas, monospace; background: var(--surface); padding: .1em .35em; border-radius: 4px; }
.reply .q { color: var(--quote); }                     /* «quoted words», green as on shamela.ws */
.reply .adapted { color: var(--muted); font: 12.5px var(--ui); }
.table { overflow-x: auto; margin: 0 0 1em; }
.reply table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.8; }
.reply th, .reply td { border: 1px solid var(--line); padding: .35em .6em; text-align: start; vertical-align: top; }
.reply th { background: var(--surface); font-family: var(--ui); font-size: 13.5px; color: var(--primary); }
.cursor::after { content: "▍"; color: var(--bronze); animation: blink 1s steps(2) infinite; font-size: .8em; }
@keyframes blink { 50% { opacity: 0; } }

/* citations */
.cite {
  display: inline-block; min-width: 1.55em; margin: 0 .12em; padding: 0 .35em; vertical-align: .35em;
  font: 500 11px/1.55 var(--ui); text-align: center; color: var(--bronze-ink); background: none;
  border: 1px solid var(--bronze); border-radius: 999px; text-decoration: none; direction: ltr;
}
button.cite:hover, .cite[aria-expanded="true"] { background: var(--bronze); color: #fff; }
.sources { margin: .6rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--line); font-size: 13px; }
.sources h5 { margin: 0 0 .3rem; font-size: 12px; font-weight: 500; color: var(--muted); }
.sources ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.sources li { display: flex; gap: .5rem; align-items: baseline; border-radius: 6px; padding: .05rem .3rem; }
.sources li.hit { background: var(--soft); }
.sources li i { flex: none; min-width: 1.6em; font-style: normal; color: var(--bronze-ink); text-align: center; font-size: 11.5px; }
.sources a { color: var(--primary); text-decoration: none; }
.sources a:hover { text-decoration: underline; }
.sources .by { color: var(--muted); }

#pop {
  position: absolute; z-index: 10; width: min(22rem, calc(100vw - 2rem)); padding: .7rem .9rem; background: var(--bg);
  border: 1px solid var(--line); border-top: 3px solid var(--bronze); border-radius: 10px; box-shadow: var(--shadow);
  font-size: 13.5px;
}
#pop b { display: block; color: var(--primary); font-weight: 700; }
#pop span { display: block; color: var(--muted); margin: .1rem 0 .4rem; }
#pop a { color: var(--bronze-ink); text-decoration: none; font-weight: 500; }
#pop a:hover { text-decoration: underline; }

#gate { border: 1px solid var(--line); border-top: 3px solid var(--bronze); border-radius: 12px; padding: 1.4rem 1.6rem;
        width: min(22rem, calc(100vw - 2rem)); background: var(--bg); color: var(--text); box-shadow: var(--shadow); text-align: center; }
#gate::backdrop { background: rgba(31, 38, 45, .55); }
#gate h2 { margin: 0 0 .3rem; font-size: 18px; color: var(--primary); }
#gate p { margin: 0 0 .8rem; font-size: 13.5px; color: var(--muted); }
#gate input { width: 100%; padding: .55rem .7rem; font: 16px ui-monospace, Consolas, monospace; text-align: center;
              border: 1px solid #ccc; border-radius: 8px; background: var(--bg); color: inherit; }
#gate input:focus { outline: none; border-color: var(--primary); }
#gate-error { min-height: 1.4em; margin: .4rem 0 .6rem !important; color: var(--danger) !important; }
#gate button { width: 100%; padding: .5rem; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 500; }

.notice {
  margin: .6rem 0; padding: .45rem .8rem; border-radius: 8px; font-size: 13.5px;
  background: var(--soft); border: 1px solid var(--soft-line); color: var(--primary-ink);
}
.notice.error { background: none; border-color: var(--danger); color: var(--danger); }

/* ── composer ── */
.composer { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 1.2rem); padding: 1.2rem 1rem max(1rem, env(safe-area-inset-bottom)); }
#form {
  display: flex; align-items: flex-end; gap: .5rem; max-width: 820px; margin: 0 auto; padding: .45rem .5rem .45rem .45rem;
  background: var(--bg); border: 1px solid #ccc; border-radius: 22px; box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark) { #form { border-color: var(--line); } }
#form:focus-within { border-color: var(--primary); }
#q {
  flex: 1; border: 0; outline: 0; resize: none; background: none; color: inherit; padding: .4rem .7rem;
  font: 16px/1.7 var(--ui); max-height: 9.5rem;
}
#q::placeholder { color: var(--muted); }
/* dir="auto" makes an empty box left-to-right; while empty it follows the page instead */
[dir="rtl"] #q:placeholder-shown { direction: rtl; }
[dir="ltr"] #q:placeholder-shown { direction: ltr; }
#send, #stop {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff;
}
@media (prefers-color-scheme: dark) { #send, #stop { color: #10222b; } }
#send:hover { background: var(--primary-ink); }
#send:disabled { background: var(--line); color: var(--muted); cursor: default; }
#stop { background: var(--bronze); }
#send[hidden], #stop[hidden] { display: none; }

@media (max-width: 560px) {
  .brand small { display: none; }
  .brand b { font-size: 15px; white-space: nowrap; }
  .ghost { padding: .2rem .65rem; font-size: 12px; }
  .reply { font-size: 18px; line-height: 2; }
  .user { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) { .spinner, .cursor::after { animation: none; } }