:root {
  --paper: #f7f1e4;
  --ink: #3a3226;
  --muted: #7a6f5a;
  --accent: #5a4a32;
  --bubble-user: #e7dcc4;
  --card: #ffffff;
  --line: #d8cfbe;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  direction: rtl;
  font-family: 'Heebo', 'Assistant', 'Segoe UI', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 22px;
  line-height: 1.7;
}
header {
  background: var(--accent);
  color: #f3ead6;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 26px;
  font-weight: 700;
  position: sticky;
  top: 0;
}
#thread {
  max-width: 820px;
  margin: 0 auto;
  padding: 26px 20px 160px;
}
.msg { margin-bottom: 22px; }
.msg.user { display: flex; justify-content: flex-start; }
.msg.user .bubble {
  background: var(--bubble-user);
  border-radius: 16px 16px 4px 16px;
  padding: 14px 20px;
  max-width: 80%;
}
.msg.bot .bubble {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
  padding: 22px 24px;
}
.images { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.images figure { margin: 0; }
.images img {
  width: 220px; height: auto; border-radius: 10px; display: block;
  border: 1px solid var(--line);
}
.images figcaption { font-size: 16px; color: var(--muted); margin-top: 6px; }
.followups { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.chip {
  background: #efe6d2; border: 1px solid var(--line); border-radius: 24px;
  padding: 10px 20px; font-size: 19px; color: var(--accent); cursor: pointer;
}
.chip:hover { background: #e6dabf; }
#composer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, var(--paper) 30%);
  padding: 18px 20px 26px;
}
#composer .inner {
  max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: 14px;
  background: #fff; border: 2px solid #c8bb9c; border-radius: 30px; padding: 8px 10px 8px 24px;
}
#q {
  flex: 1; border: none; outline: none; font: inherit; font-size: 22px;
  background: transparent; color: var(--ink); padding: 12px 0;
}
#send {
  background: var(--accent); color: #f3ead6; border: none; border-radius: 50%;
  width: 56px; height: 56px; font-size: 26px; cursor: pointer; flex: 0 0 auto;
}
#send:disabled { opacity: .5; cursor: default; }
.error { color: #8a3b2e; }
.login-wrap { max-width: 420px; margin: 18vh auto; text-align: center; padding: 0 20px; }
.login-wrap input {
  font: inherit; font-size: 22px; padding: 14px 18px; width: 100%;
  border: 2px solid #c8bb9c; border-radius: 14px; margin: 16px 0; text-align: center;
}
.login-wrap button {
  font: inherit; font-size: 22px; padding: 14px 28px; border: none; border-radius: 14px;
  background: var(--accent); color: #f3ead6; cursor: pointer;
}