/* Fonts are loaded via <link> in base.html (preconnect + non-blocking). */

/* Doran / Thmanyah Sans are commercial faces. To activate them, drop the
   licensed files at chat/static/chat/fonts/doran.woff2 and
   thmanyah-sans.woff2, then add @font-face rules for 'Doran' (weight
   400-700) and 'Thmanyah Sans' (weight 400-600) here — until then the
   --font-display stack falls back to Amiri/Almarai. (Kept as prose, not
   commented-out code: ManifestStaticFilesStorage resolves url() tokens
   even inside comments and fails on missing files.) */

:root {
  --radius: 1rem;
  --white: #fff;
  --background: #f5f2ea;
  --foreground: #1d2a26;
  --card: #fffdf8;
  --card-foreground: #1d2a26;
  --primary: #14453a;
  --primary-foreground: #f2e7cf;
  --secondary: #f0ebdd;
  --secondary-foreground: #2c3a34;
  --muted: #f0ebdd;
  --muted-foreground: #6f6a5c;
  --accent: #eaf2ee;
  --accent-foreground: #14453a;
  --gold: #b98a2f;
  --gold-foreground: #6b4d16;
  --success: #2e7d5b;
  --destructive: #c0483a;
  --destructive-foreground: #fffdf8;
  --border: #e6dfcd;
  --ring: #14453a;
  --sidebar: #fffdf8;
  --sidebar-foreground: #1d2a26;
  --sidebar-accent: #f0ebdd;
  --sidebar-accent-foreground: #14453a;
  --sidebar-border: #eee7d6;
  --primary-deep: #0e352d;
  --gold-soft: #fdf3e0;
  --gold-border: #d9b96a;
  --gold-border-soft: #e0c68a;
  --cream-ink: #f2e7cf;
  --shadow-soft: 0 12px 34px rgba(29, 42, 38, 0.07);
  --shadow-elegant: 0 14px 38px rgba(29, 42, 38, 0.12);
  --font-sans: 'Almarai', 'Tajawal', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Doran', 'Amiri', 'Almarai', serif;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes blinkDot {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}
@keyframes redPulse {
  0% { box-shadow: 0 0 0 0 rgba(192, 72, 58, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(192, 72, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 72, 58, 0); }
}
/* Same pulse with a fixed red ring (for boxes that have no border of
   their own, so no layout shift when the class toggles). */
@keyframes redPulseRing {
  0% { box-shadow: 0 0 0 1.5px var(--destructive), 0 0 0 0 rgba(192, 72, 58, 0.5); }
  70% { box-shadow: 0 0 0 1.5px var(--destructive), 0 0 0 12px rgba(192, 72, 58, 0); }
  100% { box-shadow: 0 0 0 1.5px var(--destructive), 0 0 0 0 rgba(192, 72, 58, 0); }
}
/* Gold variant of the ring pulse (--gold #b98a2f). */
@keyframes goldPulseRing {
  0% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 0 rgba(185, 138, 47, 0.5); }
  70% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 12px rgba(185, 138, 47, 0); }
  100% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 0 rgba(185, 138, 47, 0); }
}
@keyframes nudgeX {
  0%, 25%, 40%, 100% { transform: translateX(0); }
  5%, 15% { transform: translateX(-6px); }
  10%, 20% { transform: translateX(6px); }
  45%, 55% { transform: translateX(-6px); }
  50%, 60% { transform: translateX(6px); }
  65% { transform: translateX(0); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea { font: inherit; }

.app-shell {
  display: flex;
  height: 100dvh;
  overflow: hidden;
  background: var(--background);
}

/* Collapsed sidebar: a slim icon rail instead of an empty strip. */
.sidebar-rail {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  width: 3.25rem;
  padding: 0.875rem 0;
  background: var(--sidebar);
  border-inline-start: 1px solid var(--sidebar-border);
}

.rail-logo {
  display: flex;
  margin-bottom: 0.25rem;
}

.rail-logo img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  object-fit: contain;
}

.rail-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  color: var(--muted-foreground);
  transition: background 0.15s, color 0.15s;
}

.rail-btn:hover,
.rail-btn.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.rail-btn svg { width: 1.25rem; height: 1.25rem; }

.rail-sep {
  width: 1.5rem;
  height: 1px;
  background: var(--sidebar-border);
  margin: 0.25rem 0;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(14, 33, 29, 0.45);
  backdrop-filter: blur(4px);
}

.sidebar-overlay.open { display: block; }

.sidebar-wrap {
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

.sidebar-wrap.open { width: 18rem; }

.sidebar-inner {
  width: 18rem;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.sidebar-wrap.open .sidebar-inner { transform: translateX(0); }

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 18rem;
  border-inline-start: 1px solid var(--sidebar-border);
  background: var(--sidebar);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 1.75rem;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sidebar-foreground);
}

.logo-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  object-fit: contain;
}

.sidebar-tools {
  display: flex;
  gap: 0.25rem;
  color: var(--muted-foreground);
}

.icon-btn {
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  padding: 0.375rem;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover { background: var(--sidebar-accent); }

/* ── New-chat CTA + conversation search ──────────────────────────────── */
.sidebar-cta { padding: 0.25rem 1rem 0.625rem; }

.new-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  /* +1px/-1px: recenters Tajawal glyphs, which sit above the middle. */
  padding: calc(0.625rem + 1px) 0.75rem calc(0.625rem - 1px);
  border-radius: 0.875rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  transition: opacity 0.15s, transform 0.1s;
}

.new-chat-btn:hover { opacity: 0.92; }

.new-chat-btn:active { transform: scale(0.99); }

.new-chat-btn svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* Section buttons under the CTA: same dark-green pill language, slightly
   smaller, start-aligned like nav entries. */
.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: 0 1rem 0.625rem;
}

.sidebar-menu-btn {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  /* +1px/-1px: recenters Tajawal glyphs, which sit above the middle. */
  padding: calc(0.5625rem + 1px) 0.8125rem calc(0.5625rem - 1px);
  border-radius: 0.875rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  transition: opacity 0.15s, transform 0.1s;
}

.sidebar-menu-btn:hover { opacity: 0.92; }

.sidebar-menu-btn:active { transform: scale(0.99); }

/* The button of the page currently open: deeper green + gold inner ring. */
.sidebar-menu-btn.is-current {
  background: var(--primary-deep);
  box-shadow: inset 0 0 0 1.5px var(--gold-border), var(--shadow-soft);
}

.sidebar-menu-btn.is-current svg { color: var(--gold-border); }

.sidebar-menu-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.85;
}

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--sidebar-border);
  margin: 0.5rem 1rem 1rem;
}

.conv-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem 0.375rem;
  padding: calc(0.5rem + 1px) 0.75rem calc(0.5rem - 1px);
  border: 1px solid var(--sidebar-border);
  border-radius: 0.75rem;
  background: var(--card);
  color: var(--muted-foreground);
  transition: border-color 0.15s;
}

.conv-search:focus-within { border-color: rgba(20, 69, 58, 0.4); }

.conv-search svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.conv-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--foreground);
}

.conv-search input::placeholder { color: var(--muted-foreground); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.75rem 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 5px; }

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--sidebar-border);
  border-radius: 9999px;
}

.nav-section-label,
p.nav-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 0.5rem 0.5rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted-foreground);
  transform: none;
}

.nav-section-label svg {
  width: 0.8125rem;
  height: 0.8125rem;
  flex-shrink: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--sidebar-foreground);
  transition: background 0.15s;
}

/* Tajawal glyphs sit above the middle of their line box; nudge only the
   label down so the icon stays truly centered. */
.nav-label {
  transform: translateY(2px);
}

.sidebar-logo span {
  transform: translateY(1px);
}

.nav-link:hover { background: var(--sidebar-accent); }

.nav-link.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.nav-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

.conv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 1.75rem 0.75rem;
  text-align: center;
  color: var(--muted-foreground);
}

.conv-empty svg { width: 1.75rem; height: 1.75rem; opacity: 0.5; margin-bottom: 0.25rem; }

.conv-empty p { margin: 0; font-size: 0.875rem; font-weight: 500; }

.conv-empty span { font-size: 0.75rem; opacity: 0.8; }

.conv-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  margin-bottom: 1px;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: var(--sidebar-foreground);
  transition: background 0.15s;
}

.conv-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--muted-foreground);
}

.conv-row:hover, .conv-row.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-foreground);
}

.conv-row.active { font-weight: 600; }

.conv-row.active .conv-icon { color: var(--primary); }

.conv-row a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.conv-actions {
  display: none;
  gap: 0.125rem;
}

.conv-row:hover .conv-actions,
.conv-row:focus-within .conv-actions { display: flex; }

.conv-row:hover .pin-icon,
.conv-row:focus-within .pin-icon { display: none; }

.pin-icon { width: 0.75rem; height: 0.75rem; color: var(--primary); flex-shrink: 0; }

.sidebar-status {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: end;
}

.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #22c55e;
  margin-inline-start: 0.5rem;
}

.sidebar-user {
  border-top: 1px solid var(--sidebar-border);
  padding: 0.75rem;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 0.75rem;
  background: var(--card);
  text-align: right;
}

.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.main-panel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Top navbar ──────────────────────────────────────────────────────── */
.top-navbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.navbar-brand { display: flex; flex-shrink: 0; }

.navbar-brand img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  object-fit: contain;
}

.navbar-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.navbar-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Cairo/Tajawal glyphs sit above the middle; nudge down. */
  transform: translateY(1px);
}

.navbar-title-wrap .badge { flex-shrink: 0; }

.navbar-tools {
  display: flex;
  gap: 0.25rem;
  color: var(--muted-foreground);
}

.chat-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Advanced search (browse) panel ──────────────────────────────────── */
.browse-section {
  display: flex;
  flex-direction: column;
  max-width: 72rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  margin: 1rem auto;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  /* Re-runs on every open: the element leaves display:none. */
  animation: browse-in 0.3s ease-out;
}

.browse-head,
.browse-status,
.browse-loading { flex-shrink: 0; }

/* Only the results area scrolls; the filters stay fixed above it. */
.browse-results-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.125rem 0.125rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.browse-results-scroll::-webkit-scrollbar { width: 5px; }

.browse-results-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 9999px;
}

@keyframes browse-in {
  from { opacity: 0; transform: translateY(-1.25rem); }
  to { opacity: 1; transform: none; }
}

.browse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.browse-head h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 800;
}

.browse-head h2 svg { width: 1.125rem; height: 1.125rem; color: var(--primary); }

/* Searchable language combobox */
.lang-combo { position: relative; }

.lang-combo > input[type='text'] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--card);
  color: var(--foreground);
  /* +1px/-1px: recenters Tajawal glyphs, which sit above the middle. */
  padding: calc(0.5rem + 1px) 0.75rem calc(0.5rem - 1px);
  padding-inline-end: 2rem;
  font-size: 0.875rem;
}

.lang-combo > input[type='text']:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.lang-combo-chevron {
  position: absolute;
  inset-inline-end: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

.lang-combo-list {
  position: absolute;
  top: calc(100% + 0.25rem);
  inset-inline: 0;
  z-index: 20;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  box-shadow: var(--shadow-elegant);
  padding: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.lang-option {
  display: block;
  width: 100%;
  text-align: right;
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  padding: calc(0.4375rem + 1px) 0.625rem calc(0.4375rem - 1px);
  font-size: 0.875rem;
  color: var(--foreground);
  cursor: pointer;
}

.lang-option:hover,
.lang-option:focus-visible {
  background: var(--accent);
  color: var(--accent-foreground);
  outline: none;
}

.lang-option.selected {
  color: var(--primary);
  font-weight: 700;
}

.browse-status {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.browse-loading {
  display: flex;
  justify-content: center;
  padding: 1.5rem;
}

.browse-books {
  display: grid;
  gap: 0.75rem;
}

/* Cards fade in as they are inserted (first load and every «عرض المزيد»);
   JS staggers each batch via animation-delay. `backwards` keeps delayed
   cards invisible until their turn. */
.browse-books > .result-card {
  animation: card-fade-in 0.35s ease-out backwards;
}

@keyframes card-fade-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
  .browse-books { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .browse-books { grid-template-columns: 1fr 1fr 1fr; }
}

.browse-more {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.browse-more .btn { padding-inline: 2rem; }

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  padding: 1rem;
  text-align: center;
  max-width: 58rem;
  margin: 0 auto;
}

.chat-empty .logo-big {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  object-fit: contain;
  margin-bottom: 1.5rem;
}

.composer-home { width: 100%; }

.chat-empty .composer-wrap { padding: 0; }

.chat-empty h1 {
  font-size: 1.875rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.chat-empty p {
  color: var(--muted-foreground);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Example prompts on the empty screen (like the reference design) */
.examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.example-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card);
  color: var(--foreground);
  /* Tajawal's metrics reserve extra ascent (diacritics), so glyphs sit
     above the middle; slightly heavier top padding recenters them. */
  padding: 0.7rem 1.25rem 0.55rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.example-chip:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  transform: translateY(-1px);
}

/* Clarify-question language options (country → its languages). */
.clarify-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.clarify-options .clarify-chip {
  font-size: 0.8125rem;
  /* Tajawal's high-sitting glyphs: heavier top padding recenters them. */
  padding: 0.55rem 1rem 0.4rem;
}

.clarify-options .clarify-chip[disabled] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
  transform: none;
}

.clarify-options .clarify-chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  opacity: 1;
}

.messages {
  max-width: 58rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.msg-user {
  display: flex;
  justify-content: flex-start;
}

.msg-user .bubble {
  max-width: 80%;
  padding: 0.625rem 1rem;
  border-radius: 1rem;
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.msg-assistant { text-align: right; }

.msg-assistant .reply-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
  margin-bottom: 1rem;
}

.results-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.results-grid {
  display: grid;
  gap: 0.75rem;
}

.results-stack + .results-grid { margin-top: 0.75rem; }

@media (min-width: 640px) {
  .results-grid.books,
  .results-grid.cards { grid-template-columns: 1fr 1fr; }
}

.results-grid + .results-grid { margin-top: 0.75rem; }

.results-panel-summary {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.result-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  padding: 1rem;
  text-align: right;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.result-card:hover {
  border-color: rgba(20, 69, 58, 0.4);
  box-shadow: var(--shadow-elegant);
}

.result-card h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

.result-card .desc {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.6875rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
}

.badge-primary { background: rgba(20, 69, 58, 0.1); color: var(--primary); }
.badge-success { background: rgba(46, 125, 91, 0.12); color: var(--success); }
.badge-muted { background: var(--muted); color: var(--muted-foreground); }
.badge-type { background: rgba(20, 69, 58, 0.1); color: var(--primary); }
.badge-pdf { background: rgba(192, 72, 58, 0.1); color: var(--destructive); }
.badge-level-high { background: rgba(46, 125, 91, 0.15); color: var(--success); }
.badge-level-mid { background: rgba(185, 138, 47, 0.18); color: var(--gold-foreground); }
.badge-level-low { background: var(--muted); color: var(--muted-foreground); }

.result-actions {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* تحميل: content-sized instead of stretching, so the buttons group at the
   inline start (right in RTL) with التفاصيل beside it. */
.result-actions .btn-primary {
  flex: 0 0 auto;
  max-width: 11rem;
  padding-inline: 1.5rem;
}

/* Share button alone at the inline end (left in RTL). */
.result-actions .btn-icon { margin-inline-start: auto; }

/* ── Book card (ported from the reference design) ─────────────────────── */
.book-card {
  display: flex;
  flex-direction: column;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.pill svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.pill-lang {
  font-size: 0.75rem;
  background: rgba(20, 69, 58, 0.1);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(20, 69, 58, 0.15);
}

.pill-success {
  background: rgba(46, 125, 91, 0.12);
  color: var(--success);
  box-shadow: inset 0 0 0 1px rgba(46, 125, 91, 0.2);
}

.pill-gold {
  background: rgba(185, 138, 47, 0.15);
  color: var(--gold-foreground);
  box-shadow: inset 0 0 0 1px rgba(185, 138, 47, 0.25);
}

.book-title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5rem;
  min-height: 3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-card .desc,
.share-preview .desc {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5rem;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.6875rem;
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
}

.meta-badge svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.meta-pdf { background: rgba(192, 72, 58, 0.1); color: var(--destructive); }
.meta-type { background: rgba(20, 69, 58, 0.1); color: var(--primary); }
.meta-muted { background: var(--muted); color: var(--muted-foreground); font-weight: 500; }

.book-card .result-actions { margin-top: 0.75rem; }

/* ── Encyclopedia card footer badges (like the reference design) ──────── */
.enc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  font-size: 0.6875rem;
}

.enc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.audience-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 11.5px;
  font-weight: 500;
  gap: 0.25rem;
}

.enc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  /* background: var(--card); */
  /* color: var(--muted-foreground); */
  white-space: nowrap;
  font-size: 11.5px;
  background: rgba(15, 23, 42, 0.06);
  color: rgb(100, 116, 139);
  font-weight: 500;
}

.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ── Share dialog ─────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* Above the desktop sidebar (91), below the toast (100) so the
     «تم النسخ» confirmation still shows over an open dialog. */
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(14, 33, 29, 0.5);
  backdrop-filter: blur(4px);
}

.share-modal {
  position: relative;
  width: 100%;
  max-width: 28rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-elegant);
  animation: modal-in 0.15s ease-out;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  color: var(--muted-foreground);
}

.modal-close svg { width: 1.125rem; height: 1.125rem; }

.share-head h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.share-head h3 svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }

.share-head p {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.share-preview {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}

.share-preview .book-title { min-height: 0; }

.share-preview .card-meta { margin-top: 0.75rem; }

.share-native {
  width: 100%;
  justify-content: center;
  padding-block: 0.625rem;
  font-size: 0.875rem;
}

.share-native svg { width: 1rem; height: 1rem; }

.social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 26%;
  color: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s;
}

.social-btn:hover { transform: scale(1.08); }

.social-btn svg { width: 1.25rem; height: 1.25rem; }

.copy-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--muted);
  padding: 0.375rem;
}

.copy-row input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  border: none;
  border-radius: 0.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.copy-btn:hover { opacity: 0.9; }

.copy-btn svg { width: 1rem; height: 1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}

.btn-primary {
  flex: 1;
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover { opacity: 0.9; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--card-foreground);
}

.btn-outline:hover { background: var(--accent); color: var(--primary); }

.btn-icon {
  flex: 0 0 auto;
  width: 2.25rem;
  padding: 0.5rem;
  color: var(--muted-foreground);
}

.btn-icon svg { width: 1rem; height: 1rem; }

.card-text-body {
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-line;
  margin-top: 0.5rem;
}

.card-text-body.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.expand-btn {
  margin-top: 0.5rem;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.expand-btn:hover { text-decoration: underline; }

/* «اقرأ المزيد» popup: full encyclopedia-card text. */
.reader-modal {
  position: relative;
  width: 100%;
  max-width: 52rem;
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-elegant);
  animation: modal-in 0.15s ease-out;
}

.reader-modal h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  /* Clear the floating close button. */
  padding-inline-end: 2rem;
}

.reader-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Only the text scrolls; title and tags stay put. */
.reader-body {
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.8;
  white-space: pre-line;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Reference fields (المصدر، المراجع والمصادر، ملاحظات…) read muted so
   the answer text keeps the focus — label and value alike. */
.reader-body .muted-field,
.reader-body .muted-field strong {
  color: var(--muted-foreground);
}

/* Share/copy row under the text; the actions sit at the inline-end
   (left in RTL), like the icons in the card footer. Stays put while
   the body scrolls. */
.reader-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.reader-act {
  font-size: 0.8125rem;
  /* Tajawal sits high; nudge the text down to centre it. */
  padding: calc(0.5rem + 1px) 0.875rem calc(0.5rem - 1px);
}

/* ── Card page (/card/<id>/) ──────────────────────────────────────────── */
.card-page {
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 1.25rem clamp(0.75rem, 4vw, 1.75rem) 3rem;
}

/* The card itself: the «اقرأ المزيد» dialog laid out on the page, with
   the encyclopedia section (same markup as the chat page) below it. */
.card-sheet {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.card-sheet-head {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.card-sheet-head h1 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
}

/* No max-height here, so nothing to scroll. */
.card-sheet .reader-body { overflow: visible; }

/* Each field value sits in its own block, indented (~a tab) under its
   bold field name — in the enc cards and the reader dialog alike. */
.field-text {
  display: block;
  padding-inline-start: 1.25em;
}

/* Hadith cards: بادئة/متن values are shown without their labels, so they
   lose the under-label indent, and the متن (the hadith) reads bold. */
.field-bare { padding-inline-start: 0; }
.field-strong {
  font-weight: 700;
  color: #006400;
}

.msg-browse-all {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.msg-browse-all .btn { padding-inline: 1.5rem; }

.msg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.75rem;
  color: var(--muted-foreground);
}

.composer-wrap {
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 1rem 1rem;
  width: 100%;
}

/* Audience chips above the composer + content-type chips inside it */
/* One bordered container around all the chat filters. */
.filter-bar {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.5rem;
}

/* Inner groups sit inside an already-bordered bar: keep them flat. */
.filter-bar .audience-segments {
  border: none;
  box-shadow: none;
  background: var(--muted);
  padding: 0.1875rem;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.audience-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Source chips row (كتب + encyclopedias), under the audience bar. */
.source-bar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
}

/* Individually bordered options instead of one boxed group. */
.source-segments {
  flex-wrap: wrap;
  gap: 0.375rem;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.source-segments .chip {
  font-size: 0.75rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--border);
  background: var(--background);
}

.source-segments .chip:hover {
  border-color: rgba(20, 69, 58, 0.4);
}

.source-segments .chip.active {
  border-color: var(--primary);
}

/* Chat language pin: compact combo at the inline end (left in RTL);
   the list opens upward because the bar sits near the bottom. */
.chat-lang-combo { width: 10.5rem; flex-shrink: 0; }

.chat-lang-combo > input[type='text'] { font-size: 0.8125rem; }

/* Set by JS when there is no room below the combo. */
.lang-combo-list.drop-up {
  top: auto;
}

.chip-group {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 0.625rem;
  padding: 0.25rem;
  box-shadow: var(--shadow-soft);
}

.chip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  border-radius: 0.375rem;
  /* +1px/-1px: recenters Tajawal glyphs, which sit above the middle. */
  padding: calc(0.375rem + 1px) 1rem calc(0.375rem - 1px);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.chip:hover { color: var(--foreground); }

/* Active segment: filled with the platform's primary blue. */
.chip.active {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

.chip svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.composer {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  padding: 0.75rem;
  box-shadow: var(--shadow-soft);
}

.composer:focus-within { border-color: rgba(20, 69, 58, 0.4); }

.composer textarea {
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--foreground);
  max-height: 10rem;
  padding: 0.25rem;
}

.composer textarea::placeholder { color: var(--muted-foreground); }

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.composer-footer .chip-group { background: var(--background); }

.composer-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mic-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.mic-btn:hover { background: var(--accent); }

.mic-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.mic-btn svg { width: 1.25rem; height: 1.25rem; }

.mic-btn .icon-stop { width: 1rem; height: 1rem; }

.mic-btn.recording {
  background: var(--destructive);
  color: var(--destructive-foreground);
  animation: mic-pulse 1.5s ease-in-out infinite;
}

@keyframes mic-pulse {
  50% { opacity: 0.6; }
}

.send-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  border: none;
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.send-btn svg { width: 1.25rem; height: 1.25rem; }

.loading-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  max-width: 48rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem 1rem;
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--foreground);
  color: var(--background);
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  box-shadow: var(--shadow-elegant);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.toast.show { opacity: 1; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.hidden { display: none !important; }

@media (max-width: 767px) {
  .sidebar-wrap {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 40;
    width: min(18rem, 85vw) !important;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .sidebar-wrap.open { transform: translateX(0); }
  .sidebar-wrap .sidebar-inner { transform: none; width: 100%; }
  .sidebar { width: 100%; }
}

/* Phones: iOS-zoom guards + safe-area for the sticky composer. */
@media (max-width: 639px) {
  /* 16px floor stops iOS Safari from zooming the page on input focus. */
  .smart-composer textarea,
  .lang-search { font-size: 1rem; }

  /* Keep the stuck composer above the iPhone home indicator. */
  .thread-active .smart-composer {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Smart-search redesign (إلزام ١ — الشريط الأفقي)
   Everything below is scoped to the chat page; /manage/ keeps the shared
   tokens and legacy components above untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shell: drawer becomes a fixed overlay, page scrolls as one column ── */
.chat-app .main-panel {
  overflow-y: auto;
  /* Column so .site-footer can sit at the bottom of short pages; the
     content blocks (.chat-scroll) stay plain blocks inside it. */
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f0ebdf 0%, var(--background) 340px);
}

.chat-app .sidebar-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  z-index: 91;
  overflow: hidden;
  transition: width 0.25s ease;
}

.chat-app .sidebar-wrap.open {
  width: min(18rem, 85vw);
  box-shadow: -18px 0 44px rgba(29, 42, 38, 0.2);
}

.chat-app .sidebar-inner { width: min(18rem, 85vw); }

.chat-app .sidebar { width: 100%; height: 100%; border-inline-start: none; }

.chat-app .sidebar-overlay { z-index: 90; }

/* Desktop: the drawer starts open (no class) and reserves its own column,
   so the page stays readable and clickable with no dimming scrim over it.
   `.closed` — set by the close button — collapses it back. */
@media (min-width: 768px) {
  .chat-app .sidebar-wrap {
    width: min(18rem, 85vw);
    box-shadow: -18px 0 44px rgba(29, 42, 38, 0.2);
  }

  .chat-app .sidebar-wrap.closed { width: 0; box-shadow: none; }

  .chat-app .sidebar-inner { transform: translateX(0); }
  .chat-app .sidebar-wrap.closed .sidebar-inner { transform: translateX(100%); }

  /* Content sits beside the drawer instead of underneath it. */
  .chat-app .main-panel {
    padding-inline-start: min(18rem, 85vw);
    transition: padding-inline-start 0.25s ease;
  }

  .chat-app .sidebar-wrap.closed ~ .main-panel { padding-inline-start: 0; }
}

/* ── Utility top bar (dark green) ─────────────────────────────────────── */
.utility-bar {
  /* Pinned while .main-panel (the page scroller) scrolls; above page
     content and open combo lists (40), below the drawer (90+). */
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0.75rem 0;
  background: var(--primary-deep);
  color: var(--cream-ink);
  font-size: 0.8125rem;
}

/* Same max-width + side padding as .search-page / .about-page, so the
   menu button and the login link sit flush with the content's edges. */
.utility-inner {
  max-width: 68.75rem;
  margin: 0 auto;
  padding-inline: clamp(0.75rem, 4vw, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.utility-menu-btn { color: var(--cream-ink); border-radius: 0.5rem; }

.utility-menu-btn:hover { background: var(--primary); }

.utility-login {
  color: #e3c47c;
  font-weight: 700;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.utility-login:hover { color: var(--gold-border); }

/* Start (right in RTL) group: menu button, platform name, page links.
   No divider rules between them — the gap alone separates them, and the
   brand takes a little more air than the links do. */
.utility-start {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

/* Brand lockup: the platform name and the QR mark. The end margin adds
   to the 1rem gap so the page links keep clear of the mark instead of
   reading as part of the lockup. */
.utility-brand-lockup {
  display: flex;
  align-items: center;
  gap: 1.625rem;
  min-width: 0;
  margin-inline-end: 0.5rem;
}

.utility-qr {
  flex-shrink: 0;
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  color: var(--cream-ink);
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s, color 0.15s;
}

.utility-qr:hover { opacity: 1; color: #fff; }

.utility-qr .qr-code { width: 2rem; height: 2rem; }

/* Pull the icon's own padding back so it lines up with the content edge. */
.utility-menu-btn { margin-inline-start: -0.375rem; }

.utility-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cream-ink);
  transition: color 0.15s;
}

.utility-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Arabic glyphs sit high in the bar: nudge down 1px. */
  transform: translateY(1px);
}

.utility-brand:hover { color: #e3c47c; }

/* End (left in RTL) group: login / user name. */
.utility-end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.utility-link {
  position: relative;
  color: var(--cream-ink);
  font-weight: 700;
  font-size: 0.8125rem;
  opacity: 0.88;
  transition: color 0.15s, opacity 0.15s;
  /* Narrow bars shrink the brand (it ellipsizes) instead of wrapping
     these onto a second line. */
  white-space: nowrap;
}

.utility-link:hover { opacity: 1; color: #e3c47c; }

.utility-link.is-current { opacity: 1; color: #e3c47c; }

.utility-link.is-current::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -0.3125rem;
  height: 2px;
  border-radius: 999px;
  background: var(--gold-border);
}

/* Below this the mark's width starts clipping the platform name (the
   drawer still holds its column down to 768px), so the mark steps out.
   No loss: a phone is the thing that would scan it, not the thing that
   would show it. */
@media (max-width: 800px) {
  .utility-qr { display: none; }
  .utility-brand-lockup { margin-inline-end: 0; }
}

/* Phones: the bar keeps only the drawer button, the name and the login
   link; the two page links move into the drawer (see _sidebar.html). */
@media (max-width: 767px) {
  .utility-start > .utility-link { display: none; }
}

@media (max-width: 480px) {
  .utility-brand { font-size: 0.9375rem; }
  .utility-start { gap: 0.75rem; }
}

/* A dialog trigger that reads as one of the bar's links. */
.utility-link-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* ── QR dialog (utility-bar mark) ─────────────────────────────────────── */
/* The code is drawn ink-on-white here, whatever the surrounding card:
   a plain dark-on-light code is the one every scanner reads. */
.qr-modal {
  position: relative;
  width: 100%;
  max-width: 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--gold-border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-elegant);
  animation: modal-in 0.15s ease-out;
}

.qr-plate {
  display: flex;
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem;
}

.qr-plate .qr-code {
  width: 12rem;
  height: 12rem;
  color: #1c1c1c;
}

.qr-caption {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* ── Contact dialog (utility-bar link + drawer button) ────────────────── */
/* Above the drawer (91) so it stays the top layer when opened from it. */
.contact-overlay { z-index: 100; }

.contact-modal {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  text-align: center;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--gold-border);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-elegant);
  animation: modal-in 0.15s ease-out;
}

.contact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.contact-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold-border);
  color: var(--gold-foreground);
}

.contact-badge svg { width: 1.375rem; height: 1.375rem; }

.contact-head h3 {
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--primary);
}

.contact-lead {
  margin: 0;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.contact-body { margin-top: 1.25rem; }

/* Placeholder frame: the contact channels UI drops in here later. */
.contact-placeholder {
  border: 1.5px dashed var(--gold-border-soft);
  border-radius: 1rem;
  background: var(--secondary);
  padding: 1.5rem 1rem 1.375rem;
}

.contact-placeholder .gate-diamonds { margin-bottom: 0.75rem; }

.contact-placeholder-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}

.contact-placeholder-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* ── Site footer (every page: chat shell, login, /manage/) ────────────── */
.site-footer {
  flex-shrink: 0;
  /* Bottom of the panel when the content is shorter than the viewport. */
  margin-top: auto;
  background: var(--primary-deep);
  border-top: 1px solid rgba(242, 231, 207, 0.16);
  color: rgba(242, 231, 207, 0.72);
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  padding: 1.125rem clamp(0.75rem, 4vw, 1.75rem) max(1.125rem, env(safe-area-inset-bottom));
}

.site-footer-link { color: inherit; transition: color 0.15s; }

.site-footer-link:hover { color: #e3c47c; }

/* Flat variant inside the cream manage panel. */
.site-footer--light {
  background: transparent;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  padding: 1rem 0 0;
}

.site-footer--light .site-footer-link:hover { color: var(--primary); }

/* ── Page column ──────────────────────────────────────────────────────── */
.chat-app .chat-scroll { display: block; overflow: visible; }

.search-page {
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 1rem clamp(0.75rem, 4vw, 1.75rem) 6rem;
}

/* ── Brand header ─────────────────────────────────────────────────────── */
.brand-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0 1rem;
}

.brand-logo {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  object-fit: contain;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--primary);
}

.brand-tagline { font-size: 0.75rem; color: var(--muted-foreground); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  text-align: center;
  margin-bottom: 3rem;
}

.hero-dots {
  position: absolute;
  inset: -20px 0 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(#c9bd9c 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 0%, black, transparent);
  mask-image: radial-gradient(ellipse 60% 90% at 50% 0%, black, transparent);
}

.hero-title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.625rem);
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.625rem;
}

.hero-sub {
  position: relative;
  margin: 0 auto;
  max-width: 38.75rem;
  font-size: 1rem;
  color: #5d6660;
  line-height: 1.9;
}

/* ── Mandatory customization bar ──────────────────────────────────────── */
.mandatory-bar {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.125rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.step {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: 0.8125rem;
  padding: 0.4375rem 0.75rem;
}

.step-pill {
  flex-shrink: 0;
  font-size: 0.78125rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  color: #3c4a44;
  border: 1.5px solid transparent;
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
}

.step-pill.pulse {
  color: var(--destructive);
  border-color: var(--destructive);
  animation: redPulse 1.5s infinite;
}

/* The whole step box shakes when a language gets picked before المستهدف. */
.step.shake { animation: nudgeX 1.3s ease 1; }

.step-tip {
  pointer-events: none;
  position: absolute;
  bottom: calc(100% + 14px);
  right: 8px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-border-soft);
  color: var(--gold-foreground);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.65;
  padding: 0.5625rem 0.9375rem;
  border-radius: 0.8125rem;
  box-shadow: 0 10px 26px rgba(185, 138, 47, 0.22);
  z-index: 5;
  max-width: 270px;
  white-space: nowrap;
  animation: fadeUp 0.3s ease both;
}

.tip-arrow {
  position: absolute;
  top: 100%;
  right: 24px;
  border: 7px solid transparent;
  border-top-color: var(--gold-soft);
}

/* Segmented control: the design's pill-in-track look. */
.audience-segments {
  position: relative;
  background: var(--muted);
  border-radius: 0.6875rem;
  padding: 3px;
  gap: 2px;
  border: none;
}

/* The المستهدف hint is anchored to the choices (الكل / مسلم / غير مسلم)
   and centered above them. Centering uses auto margins, not transform,
   because the fadeUp animation owns the transform property. */
.audience-segments .step-tip {
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
}

.audience-segments .tip-arrow { right: calc(50% - 7px); }

/* Until المستهدف is picked, the choices pulse in step with the pill. */
.audience-segments.pulse { animation: goldPulseRing 1.5s infinite; }

.audience-segments .chip {
  padding: 0.4375rem 1rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.78125rem;
  font-weight: 800;
  white-space: nowrap;
}

.audience-segments .chip.active {
  background: var(--primary);
  color: var(--cream-ink);
}

/* Language combo: pill trigger button + dropdown panel with its own
   search input (the design's «اختر اللغة…» → «ابحث عن لغة…» pattern). */
.lang-trigger {
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.9375rem;
  border-radius: 100px;
  border: 1.5px solid #ddd5c0;
  background: #fff;
  font-size: 0.78125rem;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}

.lang-trigger:hover { border-color: var(--primary); }

.chat-lang-combo.unset .lang-trigger { color: var(--muted-foreground); }

/* The اللغة hint is anchored to the select button and centered above it
   (same pattern as the المستهدف choices). .lang-anchor shrink-wraps the
   button because the combo itself is wider than the button. */
.lang-anchor {
  position: relative;
  display: inline-flex;
  vertical-align: top;
}

.lang-anchor .step-tip {
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
}

.lang-anchor .tip-arrow { right: calc(50% - 7px); }

/* Until a language is picked, the select pulses gold in step with the
   pill. The border goes transparent so the ring reads as a single 1.5px
   gold border hugging the white box. */
.lang-trigger.pulse {
  border-color: transparent;
  animation: goldPulseRing 1.5s infinite;
}

.lang-arrow { font-size: 0.5625rem; color: var(--muted-foreground); }

.chat-lang-combo .lang-combo-list {
  top: calc(100% + 8px);
  /* Anchor the inline-end edge (left in RTL): the step sits near the
     page edge, so the 250px panel must grow toward the page center. */
  inset-inline: auto;
  inset-inline-end: 0;
  z-index: 40;
  width: min(250px, calc(100vw - 40px));
  max-height: none;
  overflow: hidden;
  border: 1px solid #e0d8c4;
  border-radius: 0.8125rem;
  box-shadow: 0 18px 44px rgba(29, 42, 38, 0.16);
  padding: 0;
  animation: fadeUp 0.2s ease both;
}

.lang-search-wrap { padding: 9px; }

.lang-search {
  width: 100%;
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid #e0d8c4;
  outline: none;
  background: #faf8f2;
  color: var(--foreground);
}

.lang-search::placeholder { color: var(--muted-foreground); }

.lang-options {
  max-height: 210px;
  overflow-y: auto;
  padding: 0 7px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.chat-lang-combo .lang-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 0.84375rem;
  color: var(--secondary-foreground);
}

.chat-lang-combo .lang-option:hover,
.chat-lang-combo .lang-option:focus-visible,
.chat-lang-combo .lang-option.selected {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.lang-option .lang-count {
  font-size: 0.6875rem;
  color: #a09880;
}

/* No language matched the search: hand off to the assistant instead. */
.lang-not-found {
  margin: 5px 0 3px;
  padding: 12px 13px;
  border-radius: 10px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-border-soft);
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: center;
}

.lang-not-found-text {
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--gold-foreground);
  line-height: 1.7;
}

.lang-go-assistant {
  cursor: pointer;
  font-family: inherit;
  padding: 9px 0;
  border: none;
  border-radius: 9px;
  background: var(--gold);
  color: #fff;
  font-size: 0.78125rem;
  font-weight: 800;
}

.lang-go-assistant:hover { background: #a1761f; }

.gate-done {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--primary);
  animation: fadeUp 0.3s ease both;
}

.gate-done.hidden { display: none; }

.gate-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--cream-ink);
  font-size: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Gate empty state ─────────────────────────────────────────────────── */
.gate-empty {
  margin-top: 2.125rem;
  text-align: center;
  padding: 2.875rem 1.875rem;
  border: 1.5px dashed #ddd3ba;
  border-radius: 1.125rem;
  background: var(--card);
}

.gate-diamonds {
  display: inline-flex;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.gate-diamonds span {
  width: 12px;
  height: 12px;
  background: var(--primary);
  transform: rotate(45deg);
  display: inline-block;
  opacity: 0.25;
}

.gate-diamonds span:nth-child(2) { background: var(--gold); opacity: 1; }

.gate-empty-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.3125rem;
}

.gate-empty-hint { font-size: 0.8125rem; color: var(--muted-foreground); }

/* ── Results region: source chips row ─────────────────────────────────── */
.results-region { animation: fadeUp 0.4s ease backwards; }

.source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4375rem;
  margin-bottom: 1.25rem;
}

.source-row-label {
  font-size: 0.78125rem;
  font-weight: 700;
  color: #3c4a44;
}

.source-chip {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 100px;
  border: 1.5px solid #ddd5c0;
  background: #fff;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 700;
}

.source-chip.active {
  border-color: var(--primary);
  background: var(--accent);
  color: var(--primary);
}

.link-btn {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.71875rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-btn.link-muted { color: var(--muted-foreground); }

/* Desktop: the chips wrapper is layout-transparent — chips and الكل/مسح
   stay direct flex items of .source-row next to the label. */
.source-chips { display: contents; }

.source-toggle { display: none; }

/* Mobile: a green pill button collapses/expands the sources. */
@media (max-width: 767px) {
  .source-row-label { display: none; }

  .source-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    cursor: pointer;
    font-family: inherit;
    border: none;
    border-radius: 100px;
    background: var(--primary);
    color: var(--cream-ink);
    font-size: 0.78125rem;
    font-weight: 700;
    padding: 0.5rem 1.0625rem;
  }

  .source-toggle .source-toggle-arrow {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s ease;
  }

  .source-toggle[aria-expanded='true'] .source-toggle-arrow {
    transform: rotate(180deg);
  }

  /* Expanded: the chips group takes its own full-width wrapping rows
     under the button (flex: 0 0 100% forces the wrap; width alone would
     just shrink beside the button). */
  .source-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4375rem;
    flex: 0 0 100%;
  }

  .source-chips.collapsed { display: none; }
}

/* ── Lookup filter combos (التصنيفات) under the sources row ──────────── */
.lookup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4375rem;
  margin: -0.625rem 0 1.25rem;
}

/* Triggers size to their label instead of the language combo's width. */
.lookup-combo { width: auto; }

.lookup-combo .lang-trigger {
  font-size: 0.75rem;
  padding: calc(0.375rem + 1px) 0.75rem calc(0.375rem - 1px);
}

/* Long item names truncate inside the pill. */
.lookup-combo .lookup-label {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An active filter reads like a selected source chip. */
.lookup-combo:not(.unset) .lang-trigger {
  border-color: var(--primary);
  background: var(--accent);
}

/* The panel anchors to the combo's inline-start edge so it opens toward
   the page center from either end of the wrapping row. */
.lookup-combo .lang-combo-list {
  inset-inline: auto;
  inset-inline-start: 0;
  width: min(18.75rem, calc(100vw - 40px));
}

/* Selection count on the trigger pill. */
.lookup-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--cream-ink);
  font-size: 0.65625rem;
  font-weight: 800;
}

/* ── Checkbox tree inside the lookup combos ──
   Reference layout per row (RTL): chevron (or a leaf dot), then the
   checkbox, then the name. Depth indents the whole cluster from the
   inline-start edge, and a dashed connector fills the indent. */
.lookup-tree { gap: 0; }

.tree-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.375rem;
  padding-inline-start: calc(0.375rem + var(--tree-depth, 0) * 1.375rem);
  border-radius: 7px;
}

.tree-row:hover { background: var(--secondary); }

/* Dotted connector: fills the indentation up to the chevron/dot. */
.tree-row[data-parent]::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: 0.5rem;
  width: calc(var(--tree-depth, 1) * 1.375rem - 0.375rem);
  border-top: 2px dotted #d8cfb8;
  pointer-events: none;
}

.tree-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.3125rem 0.25rem;
}

.tree-name {
  font-size: 0.84375rem;
  color: var(--secondary-foreground);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Rows that hold a subtree read as headings (like the reference). */
.tree-row:has(> .tree-toggle) .tree-name {
  font-weight: 800;
  color: var(--foreground);
}

.tree-check {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.0625rem;
  height: 1.0625rem;
  margin: 0;
  border: 1.5px solid #d9d0ba;
  border-radius: 5px;
  background: #fff center / 0.75rem no-repeat;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tree-check:hover { border-color: var(--primary); }

.tree-check:checked {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2e7cf' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Parent with only part of its subtree checked. */
.tree-check:indeterminate {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2e7cf' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.tree-toggle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  color: var(--muted-foreground);
  transition: transform 0.15s ease, background 0.15s ease;
}

.tree-toggle:hover { background: var(--border); color: var(--foreground); }

.tree-toggle svg { width: 0.875rem; height: 0.875rem; }

/* Chevron points inline-start (◀ in RTL) when collapsed, down when open. */
.tree-row.open .tree-toggle svg { transform: rotate(-90deg); }

/* Leaf rows carry a small dot where parents show the chevron. */
.tree-toggle-spacer {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  display: grid;
  place-items: center;
}

.tree-toggle-spacer::before {
  content: '';
  width: 0.28125rem;
  height: 0.28125rem;
  border-radius: 50%;
  background: #cdc4a9;
}

.tree-clear {
  cursor: pointer;
  font-family: inherit;
  display: block;
  width: calc(100% - 14px);
  margin: 0 7px 7px;
  padding: calc(0.4375rem + 1px) 0 calc(0.4375rem - 1px);
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--destructive);
  font-size: 0.78125rem;
  font-weight: 700;
}

.tree-clear:hover { color: #99392e; }

/* ── Smart box: assistant thread + composer ───────────────────────────── */
.smart-box {
  position: relative;
  margin-bottom: 1.25rem;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-elegant);
  transition: border-color 0.25s ease;
  /* clip (not hidden): keeps the rounded-corner clipping without making
     this box the containing scrollport — the sticky header/composer
     inside must stick against the page scroller. */
  overflow: clip;
}

.smart-box.gold { border-color: var(--gold-border); }

/* backwards (not both): a persisted translateY(0) on an ancestor can
   break the sticky children below. */
.assistant-thread { animation: fadeUp 0.3s ease backwards; }

.thread-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(90deg, var(--gold-soft), var(--card));
  padding: 0.625rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  border-bottom: 1px solid #f0e4c8;
}

.thread-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  flex-shrink: 0;
}

.thread-title {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--gold-foreground);
}

.thread-close {
  cursor: pointer;
  font-family: inherit;
  margin-inline-start: auto;
  font-size: 0.71875rem;
  font-weight: 700;
  padding: 0.3125rem 0.875rem;
  border-radius: 100px;
  border: 1.5px solid var(--gold-border);
  background: #fff;
  color: #8a6420;
  white-space: nowrap;
  flex-shrink: 0;
}

.thread-close:hover { background: var(--gold-soft); }

.round { border-top: 1px solid #f0e4c8; }

.round:first-child { border-top: none; }

/* Clearance under the sticky thread header when a question is pinned. */
.round-q {
  padding: 0.75rem 1rem 0;
  scroll-margin-top: 3.5rem;
}

.round-q .q-pill {
  display: inline-block;
  background: var(--primary);
  color: var(--cream-ink);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3125rem 0.875rem;
  border-radius: 100px;
}

.round-body {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.round-reply {
  margin: 0;
  font-size: 0.84375rem;
  line-height: 1.9;
  color: #4c5a55;
}

.round .section-head { margin-bottom: 0.625rem; }

.round .section-head h3 { font-size: 0.875rem; }

.thread-typing {
  padding: 0.75rem 1rem;
  display: flex;
  gap: 5px;
}

.thread-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  animation: blinkDot 1.2s infinite;
}

.thread-typing span:nth-child(2) { animation-delay: 0.2s; }

.thread-typing span:nth-child(3) { animation-delay: 0.4s; }

/* Clarify chips inside a round. */
.clarify-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.clarify-chip {
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78125rem;
  font-weight: 700;
  padding: 0.4375rem 0.9375rem;
  border-radius: 100px;
  border: 1.5px solid #ddd5c0;
  background: #fff;
  color: var(--secondary-foreground);
}

.clarify-chip:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }

.clarify-chip:disabled { opacity: 0.55; cursor: default; }

.clarify-chip.selected {
  border-color: var(--primary);
  background: var(--accent);
  color: var(--primary);
  opacity: 1;
}

/* ── Composer row inside the smart box ────────────────────────────────── */
.smart-composer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.thread-active .smart-composer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid #dbe5df;
  background: #eef3f0;
  padding: 0.75rem 1rem;
}

.smart-composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.90625rem;
  color: var(--foreground);
  max-height: 10rem;
  padding: 0.625rem 0.5rem;
}

.smart-composer .send-btn {
  width: auto;
  height: auto;
  padding: 0.625rem 1.625rem;
  border-radius: 0.6875rem;
  font-size: 0.875rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.25s ease;
}

.smart-composer .send-btn.gold {
  background: var(--gold);
  color: #16211d;
}

.smart-composer .send-btn.arrow {
  padding: 0.5rem 1rem;
  font-size: 1.125rem;
}

/* ── Filter notice + source hint ──────────────────────────────────────── */
.filter-notice {
  font-size: 0.78125rem;
  color: #8a6420;
  font-weight: 700;
  margin: 0 0 0.75rem;
  animation: fadeUp 0.2s ease both;
}

.sources-empty-hint {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0 0 0.75rem;
}

/* ── Browse sections ──────────────────────────────────────────────────── */
.browse-block { margin-bottom: 1.375rem; }

.section-head {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  margin-bottom: 0.75rem;
}

.section-bar {
  width: 4px;
  height: 20px;
  border-radius: 4px;
  background: var(--gold);
}

.section-head h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.03125rem;
  font-weight: 700;
  color: var(--secondary-foreground);
}

.section-count { font-size: 0.75rem; color: var(--muted-foreground); }

.browse-more { margin-top: 0.75rem; text-align: center; }

/* Material cards. */
.mats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.625rem;
}

.round .mats-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.mat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.8125rem;
  padding: 0.8125rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 0.15s;
}

.round .mat-card { background: #fff; }

.mat-card:hover { box-shadow: 0 10px 22px rgba(29, 42, 38, 0.1); }

.mat-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.375rem;
}

.mat-tag {
  font-size: 0.65625rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--muted);
  color: #5d6660;
  white-space: nowrap;
}

.mat-tag.tag-pdf { background: #f4e8cf; color: #8a6420; }
.mat-tag.tag-mp4 { background: #e4efe9; color: var(--primary); }
.mat-tag.tag-mp3 { background: #ece5f2; color: #5b3f78; }
.mat-tag.tag-doc { background: #e8eef4; color: #2c4a68; }

.mat-src {
  font-size: 0.65625rem;
  color: #a09880;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mat-title {
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
  color: var(--foreground);
}

.mat-desc {
  font-size: 0.71875rem;
  color: #8b8471;
  line-height: 1.7;
  flex: 1;
  margin: -6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mat-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mat-download {
  cursor: pointer;
  font-size: 0.71875rem;
  font-weight: 700;
  padding: 0.375rem 1rem;
  border-radius: 0.5rem;
  border: none;
  background: var(--primary);
  color: var(--cream-ink);
  /* Push the icon buttons (عرض + مشاركة) together to the far left. */
  margin-inline-end: auto;
}

.mat-download:hover { background: var(--primary-deep); color: var(--cream-ink); }

.mat-icon-btn {
  cursor: pointer;
  font-family: inherit;
  padding: 0.3125rem;
  border-radius: 0.5rem;
  border: none;
  background: none;
  color: #3c4a44;
  display: inline-flex;
}

.mat-icon-btn:hover { color: var(--primary); background: var(--secondary); }

.mat-icon-btn svg { width: 1rem; height: 1rem; }

/* Q&A cards (the reference design): cream header with a gold diamond
   and the question in dark ink, clamped snippet + «اقرأ المزيد», then a
   footer with the share/copy icon actions. */
.enc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.enc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.8125rem;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.round .enc-card { background: #fff; }

.enc-card-head {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  /* Cream header (same value as --cream-ink) with dark ink. */
  background: var(--muted);
  padding: 0.75rem 0.875rem;
}

.qa-diamond {
  /* The richer gold reads better on the light header. */
  color: var(--gold);
  font-size: 0.5rem;
  flex-shrink: 0;
}

/* Single line only: long questions truncate with an ellipsis (the full
   title is in the «اقرأ المزيد» reader). */
.enc-card-head h4 {
  margin: 0;
  font-size: 0.8375rem;
  font-weight: 700;
  line-height: 1.55;
  /* One ink across the card: title, snippet, and «اقرأ المزيد». */
  color: #4c5a55;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enc-card-body {
  flex: 1;
  padding: 0.25rem 0.875rem 0;
}

.enc-card-text {
  margin: 0 0 0.5rem;
  font-size: 0.84375rem;
  line-height: 1.9;
  color: #4c5a55;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qa-read-more {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  /* Same ink as the snippet above it, only bolder. */
  color: #8a6420;
}

.qa-read-more:hover { color: var(--primary); }

.enc-card-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem 0.5rem
}

/* Icons sit at the inline-end (left in RTL). */
.enc-card-actions {
  display: flex;
  gap: 0.275rem;
  margin-inline-start: auto;
}

.qa-act {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  border: 1.5px solid #ddd5c0;
  background: #fff;
  color: var(--muted-foreground);
}

.qa-act:hover { color: var(--primary); border-color: var(--primary); }

.qa-act svg { width: 0.9375rem; height: 0.9375rem; }

.browse-status { font-size: 0.8125rem; color: var(--muted-foreground); }

.browse-loading { display: flex; justify-content: center; padding: 1rem; }

/* ── Sidebar (drawer) restyle ─────────────────────────────────────────── */
.chat-app .new-chat-btn {
  background: var(--gold-soft);
  color: var(--gold-foreground);
  border: 1.5px solid var(--gold-border);
  box-shadow: none;
  font-size: 0.84375rem;
  font-weight: 700;
}

.chat-app .new-chat-btn:hover { background: #f8e9c8; opacity: 1; }

.new-chat-star { font-size: 0.875rem; }

.sidebar-login-btn {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--cream-ink);
  background: var(--primary);
  font-size: 0.84375rem;
  font-weight: 700;
  padding: 0.6875rem 0.75rem;
  border-radius: 0.625rem;
}

.sidebar-login-btn:hover { background: var(--primary-deep); color: var(--cream-ink); }

/* Contact trigger at the drawer's foot: its own block between the
   conversation list and the account card. Side padding matches
   .sidebar-user's, so the pill lines up with the card below it. */
/* The drawer's copy of the page links. Desktop has them in the utility
   bar, so the block only shows on phones — the same breakpoint at which
   the bar drops them (see .utility-start > .utility-link). */
.sidebar-contact {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 0.75rem;
}

@media (max-width: 767px) {
  .sidebar-contact { display: flex; }
}

/* Light pill, so it reads as the quiet counterpart to the dark login
   button under it. */
.sidebar-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  /* +1px/-1px: recenters Tajawal glyphs, which sit above the middle. */
  padding: calc(0.6875rem + 1px) 0.75rem calc(0.6875rem - 1px);
  border: 1px solid var(--gold-border-soft);
  border-radius: 0.625rem;
  background: var(--gold-soft);
  color: var(--gold-foreground);
  font-size: 0.84375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sidebar-contact-btn:hover {
  background: #fff8ea;
  border-color: var(--gold-border);
}

.sidebar-contact-btn.is-current {
  border-color: var(--gold-border);
  box-shadow: inset 0 0 0 1px var(--gold-border);
}

.sidebar-contact-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mandatory-bar { padding: 0.625rem; gap: 0.625rem; }
  .step { width: 100%; }
  /* Chips share the pill's row (instead of wrapping under it) so the
     hint above them never covers the pill; they stretch to fill it. */
  .audience-segments { flex: 1 1 auto; min-width: 0; }
  .audience-segments .chip { flex: 1 1 auto; justify-content: center; padding-inline: 0.5rem; }
}

/* Very narrow phones: the chips still wrap under the pill, so lift the
   hint above the pill row (pill height + row gap) instead of over it. */
@media (max-width: 340px) {
  .audience-segments .step-tip { bottom: calc(100% + 14px + 37px); }
  .smart-composer .send-btn { padding-inline: 1rem; }
  .search-page { padding-bottom: 3rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Informational pages (sidebar sections): المسلم الجديد / الإرشادات /
   الأدوات / التأهيل. Markup uses dw-* classes; everything is scoped under
   .dw-page and styled with the platform palette (light-only, like the
   rest of the redesign). Cards follow the enc-card look: cream header
   with a gold diamond, one ink (#4c5a55) for title and body.
   ═══════════════════════════════════════════════════════════════════════ */
.dw-page {
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 1.25rem clamp(0.75rem, 4vw, 1.75rem) 5rem;
  color: var(--foreground);
  line-height: 1.85;
}

/* ── Hero ── */
.dw-hero {
  background: var(--card);
  border-top: 3px solid var(--gold-border);
  border-radius: 0 0 1rem 1rem;
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.875rem 1.75rem;
  margin-bottom: 2rem;
}

.dw-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-foreground);
  background: var(--gold-soft);
  border: 1px solid var(--gold-border-soft);
  border-radius: 999px;
  /* Arabic glyphs sit high in pills: +1px top / -1px bottom. */
  padding: 0.3125rem 0.875rem 0.1875rem;
  margin-bottom: 0.875rem;
}

.dw-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.125rem);
  line-height: 1.5;
  margin: 0 0 0.75rem;
  color: var(--primary);
  font-weight: 700;
}

.dw-hero p {
  margin: 0;
  font-size: 1rem;
  color: var(--muted-foreground);
  max-width: 68ch;
}

/* ── Opening ayah ── */
.dw-ayah {
  border-inline-start: 4px solid var(--gold-border);
  background: var(--gold-soft);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin: 1.625rem 0 2.125rem;
  font-family: 'Amiri', var(--font-display);
  font-size: 1.125rem;
  color: var(--foreground);
}

.dw-ayah span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-top: 0.375rem;
}

/* ── Section headings ── */
.dw-page h2 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--primary);
  margin: 2.75rem 0 0.5rem;
}

.dw-page h2::before {
  content: '';
  flex-shrink: 0;
  width: 0.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--primary);
}

.dw-page h2 + .dw-lede { margin-top: 0.625rem; }

.dw-lede { color: var(--muted-foreground); margin: 0.625rem 0 1.375rem; }

/* ── Card grid (enc-card look) ── */
.dw-grid { display: grid; gap: 1rem; margin: 1.375rem 0; align-items: stretch; }
.dw-grid.dw-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dw-grid.dw-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .dw-grid.dw-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .dw-grid.dw-2, .dw-grid.dw-3 { grid-template-columns: 1fr; }
}

.dw-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.8125rem;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.dw-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  margin: 0;
  background: #f2e7cf;
  color: #4c5a55;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 0.75rem 0.875rem;
}

/* Gold diamond, same as the encyclopedia cards. */
.dw-card h3::before {
  content: '◆';
  color: var(--gold);
  font-size: 0.5rem;
  flex-shrink: 0;
}

.dw-card p,
.dw-card ul {
  margin: 0.75rem 0 0;
  padding-inline: 1rem;
  color: #4c5a55;
  font-size: 0.9375rem;
}

.dw-card ul { padding-inline-start: 2.25rem; }
.dw-card li { margin-bottom: 0.3125rem; }
.dw-card > :last-child { padding-bottom: 1rem; }

/* Keeps the buttons row aligned across cards of different lengths. */
.dw-card > .dw-actions {
  margin-top: auto;
  padding: 0.875rem 1rem 0;
}

/* ── Numbered stage cards ── */
.dw-stage {
  position: relative;
  background: var(--card);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-soft);
  padding: 1.375rem 1.625rem 1.25rem;
  margin: 0 0.875rem 1rem 0;
}

.dw-stage::before {
  content: attr(data-step);
  position: absolute;
  top: 1.25rem;
  inset-inline-start: -0.875rem;
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--cream-ink);
  border-radius: 50%;
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: 0 0 0 4px var(--background);
}

.dw-stage h3 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  color: var(--primary);
  font-weight: 800;
}

.dw-stage ul { margin: 0 0 0.875rem; padding-inline-start: 1.25rem; }
.dw-stage li { margin-bottom: 0.375rem; }

.dw-meta {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0 0 0.75rem;
}

.dw-meta strong { color: var(--primary); }

/* ── Link buttons ── */
.dw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.dw-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: var(--cream-ink);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 700;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem 0.3125rem;
  margin-bottom: 1rem;
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
}

.dw-btn:hover { background: var(--primary-deep); color: var(--cream-ink); }

.dw-btn--ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.dw-btn--ghost:hover { background: var(--primary); color: var(--cream-ink); }

/* ── Do / don't lists ── */
.dw-do-dont {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  margin: 1.375rem 0;
}

.dw-do,
.dw-dont {
  background: var(--card);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-soft);
  padding: 1.25rem 1.375rem;
}

.dw-do { border-inline-start: 4px solid var(--success); }
.dw-dont { border-inline-start: 4px solid var(--destructive); }
.dw-do h3, .dw-dont h3 { margin: 0 0 0.625rem; font-size: 1rem; font-weight: 800; }
.dw-do h3 { color: var(--success); }
.dw-dont h3 { color: var(--destructive); }
.dw-do ul, .dw-dont ul { margin: 0; padding-inline-start: 1.25rem; font-size: 0.9375rem; }
.dw-do li, .dw-dont li { margin-bottom: 0.4375rem; }

/* ── Indicator table ── */
.dw-table-wrap {
  overflow-x: auto;
  margin: 1.375rem 0;
  background: var(--card);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-soft);
}

.dw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 32.5rem;
}

.dw-table th,
.dw-table td {
  border: 1px solid var(--border);
  padding: 0.6875rem 0.875rem;
  text-align: right;
  vertical-align: top;
}

.dw-table th { background: #f2e7cf; color: #4c5a55; font-weight: 800; }
.dw-table td { color: #4c5a55; }

/* ── Note ── */
.dw-note {
  background: var(--accent);
  border-radius: 0.75rem;
  padding: 1.125rem 1.375rem;
  margin: 1.875rem 0 0;
  font-size: 0.9375rem;
  color: var(--secondary-foreground);
}

.dw-note strong { color: var(--primary); }
.dw-note a { color: var(--primary); font-weight: 700; text-decoration: underline; }

/* ── Closing CTA ── */
.dw-cta {
  margin-top: 2.875rem;
  border-top: 3px solid var(--gold-border);
  background: var(--primary);
  border-radius: 1rem;
  box-shadow: var(--shadow-elegant);
  padding: 1.875rem 1.875rem 1.75rem;
  color: var(--cream-ink);
  text-align: center;
}

.dw-cta h2 { color: var(--cream-ink); margin: 0 0 0.5rem; justify-content: center; }
.dw-cta h2::before { background: var(--gold-border); }
.dw-cta p { color: rgba(242, 231, 207, 0.82); margin: 0 0 1.125rem; }
.dw-cta .dw-actions { justify-content: center; }
.dw-cta .dw-btn { background: var(--gold); color: #fffdf8; }
.dw-cta .dw-btn:hover { background: #a67b28; color: #fffdf8; }

@media (max-width: 620px) {
  .dw-hero { padding: 1.625rem 1.25rem 1.5rem; }
  .dw-stage { padding-inline-end: 1.125rem; }
}

/* ── Section-card attachments (dynamic pages) ── */
.dw-files { padding: 0 1rem 1rem; }

.dw-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  max-width: 100%;
  padding: 0.375rem 0.75rem 0.3125rem;
  margin-bottom: 1rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  color: var(--gold-foreground);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.dw-file:hover { background: var(--gold); color: #fffdf8; }
.dw-file svg { width: 15px; height: 15px; flex-shrink: 0; }

.dw-file-name {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dw-file-ext {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.75;
}

.dw-empty {
  text-align: center;
  color: var(--muted-foreground);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 0.875rem;
  padding: 2.5rem 1rem;
  margin: 1.5rem 0;
}

/* Section-card external-link button: pinned to the inline-end (left in
   RTL) of the attachments row via the auto start margin. */
.dw-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-inline-start: auto;
  padding-block: calc(0.375rem + 1px) calc(0.375rem - 1px);
  font-size: 0.8125rem;
}

.dw-card-link svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   About page (عن المنصة) — /about/. Markup uses about-* classes, scoped
   under .about-page. Same palette and light-only rules as the redesign;
   the hero and closing CTA carry an inline-SVG girih (8-point star)
   lattice in faint gold over deep green.
   ═══════════════════════════════════════════════════════════════════════ */
.about-page {
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 1.25rem clamp(0.75rem, 4vw, 1.75rem) 4rem;
  color: var(--foreground);
  line-height: 1.85;
}

.about-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Star lattice (shared by hero + CTA) ── */
.about-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gold-border);
  opacity: 0.22;
  pointer-events: none;
  /* Fade the lattice out behind the centered copy. */
  -webkit-mask-image: radial-gradient(ellipse 58% 78% at 50% 48%, transparent 30%, black 100%);
  mask-image: radial-gradient(ellipse 58% 78% at 50% 48%, transparent 30%, black 100%);
}

/* ── Hero ── */
.about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: var(--cream-ink);
  background: radial-gradient(120% 140% at 50% -20%, #1b5b4c 0%, var(--primary) 46%, var(--primary-deep) 100%);
  border-top: 3px solid var(--gold-border);
  border-radius: 0 0 1.25rem 1.25rem;
  box-shadow: var(--shadow-elegant);
  padding: 3rem 1.5rem 2.75rem;
}

.about-hero > :not(.about-pattern) { position: relative; }

.about-hero-logo {
  width: 5.25rem;
  height: 5.25rem;
  padding: 0.75rem;
  border-radius: 1.25rem;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(217, 185, 106, 0.35);
  object-fit: contain;
  margin-bottom: 1.125rem;
}

.about-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #e3c47c;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(217, 185, 106, 0.55);
  border-radius: 999px;
  /* Arabic glyphs sit high in pills: +1px top / -1px bottom. */
  padding: 0.3125rem 0.875rem 0.1875rem;
  margin-bottom: 0.875rem;
}

.about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.125rem);
  line-height: 1.35;
  font-weight: 700;
  color: #fffdf8;
  margin: 0 0 0.375rem;
}

.about-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2.6vw, 1.375rem);
  color: #e3c47c;
  margin: 0 0 1rem;
}

.about-lead {
  max-width: 42rem;
  margin: 0 auto 1.625rem;
  font-size: 1.0625rem;
  color: rgba(242, 231, 207, 0.86);
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ── Buttons ── */
.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.about-btn svg { width: 1.0625rem; height: 1.0625rem; flex-shrink: 0; }

.about-btn:hover { transform: translateY(-1px); }

.about-btn--gold {
  background: var(--gold);
  color: #fffdf8;
  border-color: var(--gold-border);
  box-shadow: 0 8px 20px rgba(185, 138, 47, 0.35);
}

.about-btn--gold:hover { background: #a67b28; color: #fffdf8; }

.about-btn--outline {
  color: var(--cream-ink);
  border-color: rgba(242, 231, 207, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

.about-btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--cream-ink);
  color: #fffdf8;
}

/* ── Opening ayah ── */
.about-ayah {
  max-width: 46rem;
  margin: 2rem auto 0;
  padding: 0.25rem 1rem;
  text-align: center;
}

.about-ayah p {
  margin: 0.375rem 0 0;
  font-family: 'Amiri', var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  line-height: 2;
  color: var(--primary);
}

.about-ayah cite {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.about-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.about-ornament::before,
.about-ornament::after {
  content: '';
  height: 1px;
  width: clamp(2rem, 12vw, 6rem);
  background: linear-gradient(90deg, transparent, var(--gold-border));
}

.about-ornament::after { background: linear-gradient(270deg, transparent, var(--gold-border)); }

.about-ornament span {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--primary);
  opacity: 0.3;
  transform: rotate(45deg);
}

.about-ornament span:nth-child(2) { background: var(--gold); opacity: 1; }

/* ── Live numbers ── */
.about-stats-wrap { position: relative; margin-top: 2.25rem; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.about-stat {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
  padding: 1.125rem 1rem 1rem;
}

.about-stat::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-border), var(--gold));
}

.about-stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.about-stat-label {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #4c5a55;
}

.about-stats-note {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ── Sections ── */
.about-section { margin-top: 3rem; }

.about-section h2 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.5rem;
}

.about-section h2::before {
  content: '';
  flex-shrink: 0;
  width: 0.25rem;
  height: 1.375rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--primary));
}

.about-lede {
  max-width: 60ch;
  margin: 0.25rem 0 1.5rem;
  color: var(--muted-foreground);
}

/* Body headings inside cards use the sans face (display face is for h1/h2). */
.about-page h3 { font-family: var(--font-sans); }

/* ── Why: prose + pillars ── */
.about-split {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.25rem;
}

.about-prose {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.625rem;
  font-size: 1.0625rem;
  color: #3d4a45;
}

.about-prose p { margin: 0 0 1rem; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose strong { color: var(--primary); }

.about-pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.about-pillar {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
}

.about-pillar-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold-border-soft);
  color: var(--gold);
  font-size: 0.625rem;
}

.about-pillar h3 {
  margin: 0 0 0.125rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}

.about-pillar p { margin: 0; font-size: 0.9rem; color: #4c5a55; }

/* ── How it works: three numbered steps on a dashed line ── */
.about-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Dashed connector through the centers of the three number badges. */
.about-steps::before {
  content: '';
  position: absolute;
  top: calc(1.75rem - 1px);
  inset-inline: 16.66%;
  border-top: 2px dashed var(--gold-border-soft);
}

.about-step {
  position: relative;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
  padding: 2.5rem 1.25rem 1.375rem;
}

.about-step-num {
  position: absolute;
  top: -1.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--cream-ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 0 0 5px var(--background), 0 0 0 6px var(--gold-border-soft);
}

.about-step h3 {
  margin: 0.25rem 0 0.375rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--primary);
}

.about-step p { margin: 0; font-size: 0.9375rem; color: #4c5a55; }

/* ── Features ── */
.about-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.about-feature {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem 1.25rem 1.125rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.about-feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elegant);
  border-color: var(--gold-border-soft);
}

.about-feature-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: var(--accent);
  color: var(--primary);
  margin-bottom: 0.875rem;
}

.about-feature-icon svg { width: 1.375rem; height: 1.375rem; }

.about-feature h3 {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--primary);
}

.about-feature p { margin: 0; font-size: 0.9375rem; color: #4c5a55; }

.about-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Encyclopedia names (database-driven) in one strip under the grid. */
.about-encs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.875rem;
  margin-top: 1rem;
  padding: 0.875rem 1.125rem;
  background: var(--card);
  border: 1px dashed var(--gold-border-soft);
  border-radius: 0.875rem;
}

.about-encs-label {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--primary);
}

.about-chip {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-foreground);
  background: var(--gold-soft);
  border: 1px solid var(--gold-border-soft);
  border-radius: 999px;
  padding: 0.25rem 0.625rem 0.125rem;
}

/* ── Sidebar sections (dynamic) ── */
.about-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.about-page-card {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
  padding: 1.125rem 1.25rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.about-page-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elegant); }

.about-page-icon {
  flex-shrink: 0;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: var(--primary);
  color: var(--cream-ink);
}

.about-page-icon svg { width: 1.5rem; height: 1.5rem; }

/* Column so the button can sit at the bottom whatever the text length. */
.about-page-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.about-page-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--primary);
}

.about-page-card p { margin: 0 0 0.875rem; font-size: 0.9rem; color: #4c5a55; }

/* Gold "go" button pinned to the bottom inline-end (left in RTL). */
.about-page-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: auto;
  align-self: flex-end;
  /* Arabic glyphs sit high in pills: +1px top / -1px bottom. */
  padding: 0.4375rem 0.875rem 0.3125rem;
  border-radius: 999px;
  background: var(--gold);
  border: 1px solid var(--gold-border);
  color: #fffdf8;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(185, 138, 47, 0.28);
  transition: background 0.18s ease, transform 0.18s ease;
}

.about-page-more svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.about-page-card:hover .about-page-more { background: #a67b28; }

/* Arrow nudges in the reading direction (left in RTL) on hover. */
.about-page-card:hover .about-page-more svg { transform: translateX(-3px); }

/* ── Audiences ── */
/* Flex (not grid) so a short last row is centered: 3 per row, then
   2 per row on tablets, 1 on phones. */
.about-audiences {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.about-audience {
  flex: 0 1 calc((100% - 2rem) / 3 - 0.5px);
  text-align: center;
  background: linear-gradient(180deg, #f2e7cf 0%, var(--card) 40%);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem 1.25rem 1.125rem;
}

.about-audience-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--gold-border-soft);
  box-shadow: var(--shadow-soft);
  color: var(--primary);
}

.about-audience-icon svg { width: 1.375rem; height: 1.375rem; }

.about-audience h3 {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--primary);
}

.about-audience p { margin: 0; font-size: 0.9375rem; color: #4c5a55; }

/* ── Principles ── */
.about-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.about-value {
  background: var(--white);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--gold);
  border-radius: 0.875rem;
  padding: 1rem 1.125rem;
}

.about-value h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

.about-value p { margin: 0; font-size: 0.875rem; color: #4c5a55; }

/* ── Closing CTA ── */
.about-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  margin-top: 3rem;
  background: var(--primary);
  color: var(--cream-ink);
  border-top: 3px solid var(--gold-border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-elegant);
  padding: 2.25rem 1.5rem 2rem;
}

.about-cta > :not(.about-pattern) { position: relative; }

.about-cta h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: #fffdf8;
}

.about-cta p {
  max-width: 40rem;
  margin: 0 auto 1.25rem;
  color: rgba(242, 231, 207, 0.85);
}

.about-footer {
  margin: 2rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .about-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; }
  .about-stats,
  .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-audience { flex-basis: calc((100% - 1rem) / 2 - 0.5px); }
}

@media (max-width: 767px) {
  .about-steps { grid-template-columns: 1fr; gap: 2.25rem; }
  .about-steps::before { display: none; }
}

@media (max-width: 620px) {
  .about-hero { padding: 2.5rem 1.125rem 2.25rem; }
  .about-hero-logo { width: 4.5rem; height: 4.5rem; }
  .about-features,
  .about-pages,
  .about-values { grid-template-columns: 1fr; }
  .about-audience { flex-basis: 100%; }
  .about-stats { gap: 0.75rem; }
  .about-stat { padding: 0.875rem 0.625rem 0.75rem; }
  .about-prose { padding: 1.25rem 1.25rem; font-size: 1rem; }
}