/* ==========================================================================
   Sooich — Reset, RTL setup, typography
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* The `hidden` attribute must beat any author `display` rule.
   The UA stylesheet's `[hidden] { display: none }` sits in the user-agent
   origin, so ANY author declaration — e.g. `.sheet-host { display: grid }` —
   wins over it and silently un-hides the element. For overlays that is
   catastrophic: a transparent full-viewport box keeps swallowing every click.
   `!important` here is deliberate, not a workaround. */
[hidden] {
  display: none !important;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  color: var(--text);
  background: var(--body-bg);
  direction: inherit;
  text-align: start;
  min-height: 100dvh;
  overflow-x: hidden;
  font-feature-settings: "ss01";
  transition: background var(--dur), color var(--dur);
}

/* Estedad is bundled locally so Persian and Latin stay visually consistent. */
@font-face {
  font-family: "Estedad";
  src: url("../assets/fonts/Estedad-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root[lang="en"] {
  --font: "Estedad", "Segoe UI", "Arial", system-ui, sans-serif;
}

:root[dir="ltr"] [data-back] svg,
:root[dir="ltr"] .row-chevron svg,
:root[dir="ltr"] .faq-chev,
:root[dir="ltr"] .chat-context > .t-faint svg {
  transform: scaleX(-1);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  text-align: inherit;
}

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

ul,
ol {
  list-style: none;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   App shell — full-bleed on phones, centred "device" frame on desktop
   -------------------------------------------------------------------------- */

/* The shell needs a DEFINITE height, not just a minimum. With only
   `min-height`, the shell grows with its content, `.view` never becomes a real
   scroll container (the document scrolls instead), and `.bottom-nav`
   — `position: absolute; bottom: 0` — anchors to the bottom of the whole
   document rather than the viewport, drifting off-screen on long feeds. */
.app-shell {
  position: relative;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 600px) {
  body {
    background:
      radial-gradient(1000px 600px at 50% -10%, rgba(245, 166, 35, 0.08), transparent 60%),
      var(--body-bg);
    padding: 24px 0;
  }
  .app-shell {
    min-height: min(920px, calc(100dvh - 48px));
    height: min(920px, calc(100dvh - 48px));
    border-radius: 28px;
    border: 1px solid var(--border);
    box-shadow: var(--sh-lg);
  }
}

.view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--safe-b) + var(--s-4));
  /* Column flex so `.page` can stretch to the full viewport height without
     relying on percentage heights resolving against an auto-height ancestor. */
  display: flex;
  flex-direction: column;
}

.view.has-nav {
  padding-bottom: calc(var(--nav-h) + var(--safe-b) + var(--s-4));
}

/* Full-bleed pages (splash) drop the view's bottom padding so artwork reaches
   the edge of the screen. */
.view.is-bleed {
  padding-bottom: 0;
}

/* Pages that opt into `fill: true` (chat) are capped to the viewport instead
   of growing, so an inner region can own the scrolling. */
.view.is-fill {
  padding-bottom: 0;
}

.view.is-fill > .page {
  flex: 1 1 0;
  min-height: 0;
}

/* Page enter transition (routed views) */
.page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  animation: page-in var(--dur) var(--ease-out) both;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

.t-muted   { color: var(--text-muted); }
.t-faint   { color: var(--text-faint); }
.t-sm      { font-size: var(--fs-sm); }
.t-xs      { font-size: var(--fs-xs); }
.t-lg      { font-size: var(--fs-lg); }
.t-bold    { font-weight: 700; }
.t-gold    { color: var(--gold-2); }
.t-center  { text-align: center; }
.t-danger  { color: var(--danger); }

.t-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.t-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Numbers rendered as Persian digits are still laid out LTR-internally by the
   shaper; this keeps mixed number+unit strings from flipping. */
.num {
  unicode-bidi: plaintext;
}

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */

.row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.col {
  display: flex;
  flex-direction: column;
}

.grow { flex: 1; min-width: 0; }
.pad { padding-inline: var(--s-4); }
.stack > * + * { margin-top: var(--s-3); }
.hidden { display: none !important; }

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
}

.section {
  padding: var(--s-5) var(--s-4);
}

.section + .section {
  border-top: 8px solid var(--bg-elev);
}

.section-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--s-3);
}

/* Directional icons must mirror in RTL. Back arrows point right in fa. */
.icon-flip {
  transform: scaleX(-1);
}