/* Family Call — minimal UI.
 *
 * Spacing: a 4/8pt scale (--s-*); 16pt screen margins. Type: five sizes, two weights
 * (400, 600). Grouped lists separated by hairlines, not cards and borders. Green is
 * reserved for calling; primary buttons use the text colour. Light and dark follow the
 * system. Logical properties (inline/block) keep the Persian RTL layout mirrored. */

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --margin: 16px;

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;

  /* type: weight size/line-height */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --t-large: 600 32px/40px var(--font);
  --t-title: 600 24px/32px var(--font);
  --t-body: 400 17px/24px var(--font);
  --t-body-strong: 600 17px/24px var(--font);
  --t-sub: 400 15px/20px var(--font);
  --t-caption: 400 13px/16px var(--font);
  --t-caption-strong: 600 13px/16px var(--font);

  /* light */
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-pressed: #e5e5ea;
  --fill: rgba(118, 118, 128, 0.12);
  --fill-strong: rgba(118, 118, 128, 0.2);
  --segment-on: #ffffff;
  --separator: rgba(60, 60, 67, 0.14);
  --text: #000000;
  --text-2: rgba(60, 60, 67, 0.62);
  --text-3: rgba(60, 60, 67, 0.36);
  --inverse: #ffffff;
  --green: #34c759;
  --green-text: #248a3d;
  --red: #ff3b30;
  --red-text: #d70015;
  --orange: #c93400;
  --bar: rgba(249, 249, 249, 0.86);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-pressed: #2c2c2e;
    --fill: rgba(118, 118, 128, 0.24);
    --fill-strong: rgba(118, 118, 128, 0.36);
    --segment-on: #636366;
    --separator: rgba(84, 84, 88, 0.6);
    --text: #ffffff;
    --text-2: rgba(235, 235, 245, 0.6);
    --text-3: rgba(235, 235, 245, 0.32);
    --inverse: #000000;
    --green: #30d158;
    --green-text: #30d158;
    --red: #ff453a;
    --red-text: #ff6961;
    --orange: #ffb340;
    --bar: rgba(22, 22, 24, 0.84);
    --shadow: none;
    color-scheme: dark;
  }
}

html[lang="fa"] { --font: "Vazirmatn", system-ui, -apple-system, sans-serif; }

/* ---- base --------------------------------------------------------------------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { opacity: 0.4; cursor: default; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: var(--r-sm); }

.title-1 { font: var(--t-title); }
.body { font: var(--t-body); }
.caption { font: var(--t-caption); }
.secondary { color: var(--text-2); }
.tertiary { color: var(--text-3); }
.danger { color: var(--red-text); }
.warning { color: var(--orange); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.grow { flex: 1; }

/* ---- buttons ------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 50px; padding: 0 var(--s-5); border-radius: var(--r-md);
  font: var(--t-body-strong); text-decoration: none; white-space: nowrap;
  transition: opacity 0.15s;
}
.btn:active { opacity: 0.7; }
.btn-primary { background: var(--text); color: var(--inverse); width: 100%; }
.btn-google { background: var(--surface); color: var(--text); width: 100%; box-shadow: inset 0 0 0 1px var(--separator); }
.btn-google svg { width: 20px; height: 20px; }
.btn-small { min-height: 32px; padding: 0 var(--s-3); border-radius: 999px; font: var(--t-caption-strong); background: var(--fill); color: var(--text); }
.btn-text { font: var(--t-sub); color: var(--text-2); padding: var(--s-2); min-height: 44px; }

.icon-btn {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fill); color: var(--text);
}
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
.icon-btn.call { color: var(--green-text); }
.icon-btn.danger { color: var(--red-text); }
.icon-btn:active { background: var(--fill-strong); }

/* ---- segmented control -------------------------------------------------------- */

.segmented {
  display: flex; padding: 2px; gap: 2px; border-radius: 9px; background: var(--fill);
}
.segmented button {
  flex: 1; min-height: 32px; padding: 0 var(--s-2); border-radius: 7px;
  font: var(--t-caption-strong); color: var(--text); white-space: nowrap;
  transition: background-color 0.15s;
}
.segmented button[aria-checked="true"],
.segmented button[aria-pressed="true"] { background: var(--segment-on); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .segmented button, .btn { transition: none; } }

/* ---- welcome screens (sign in, invite code) ----------------------------------- */

.screen { display: none; }
body[data-screen="signin"] #screen-signin,
body[data-screen="invite"] #screen-invite { display: flex; }
body[data-screen="app"] #screen-app { display: block; }

.welcome {
  min-height: 100vh; min-height: 100dvh;
  flex-direction: column; align-items: center; justify-content: space-between; gap: var(--s-6);
  padding: calc(var(--s-7) + env(safe-area-inset-top)) var(--margin) calc(var(--s-5) + env(safe-area-inset-bottom));
  text-align: center;
}
.welcome-body {
  flex: 1; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4);
}
.welcome-body .logo { border-radius: 18px; margin-bottom: var(--s-2); }
.welcome-body .title-1 + .body { margin-top: calc(-1 * var(--s-2)); }
.welcome-body .btn, .welcome-body form { margin-top: var(--s-4); }
.welcome .lang-switch { width: 100%; max-width: 220px; }

.code-input {
  width: 100%; height: 56px; border: 0; border-radius: var(--r-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--separator);
  text-align: center; font: 600 24px/32px var(--font); letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
}
.code-input::placeholder { color: var(--text-3); }
.code-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--text); }

/* ---- app shell ---------------------------------------------------------------- */

#screen-app {
  max-width: 640px; margin: 0 auto;
  padding-bottom: calc(49px + env(safe-area-inset-bottom) + var(--s-6));
}

.large-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: calc(var(--s-4) + env(safe-area-inset-top)) var(--margin) var(--s-3);
}
.large-title h1 { font: var(--t-large); }

.tab { display: none; }
body[data-tab="contacts"] #tab-contacts,
body[data-tab="recents"] #tab-recents,
body[data-tab="invites"] #tab-invites,
body[data-tab="settings"] #tab-settings { display: block; }

.search-wrap { position: relative; margin: 0 var(--margin) var(--s-4); }
.search-icon {
  position: absolute; inset-inline-start: var(--s-2); top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; fill: var(--text-2); pointer-events: none;
}
.search {
  width: 100%; height: 36px; border: 0; border-radius: 10px; background: var(--fill);
  padding-inline: 34px var(--s-3); font: var(--t-body);
}
.search::placeholder { color: var(--text-2); }
.search:focus { outline: none; }
.search::-webkit-search-cancel-button { display: none; }

/* ---- grouped lists ------------------------------------------------------------ */

.group {
  list-style: none; margin: 0 var(--margin); padding: 0;
  background: var(--surface); border-radius: var(--r-md); overflow: hidden;
}
.group:empty { display: none; }
.group.spaced { margin-top: var(--s-6); }

.group-header {
  font: var(--t-caption); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.02em;
  padding: var(--s-6) calc(var(--margin) * 2) var(--s-2);
}
html[lang="fa"] .group-header { text-transform: none; letter-spacing: 0; }
.tab > .group-header:first-child, form > .group-header:first-child { padding-top: var(--s-2); }
.group-footer { font: var(--t-caption); color: var(--text-2); padding: var(--s-2) calc(var(--margin) * 2) 0; }
.group-actions { margin: var(--s-4) var(--margin) 0; }

.row {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: var(--s-3) var(--margin);
  width: 100%; text-align: start;
}
/* Hairline between rows, inset to the text column. */
.row + .row::before {
  content: ""; position: absolute; top: 0; inset-inline: var(--margin) 0;
  border-top: 0.5px solid var(--separator);
}
.row.has-avatar + .row.has-avatar::before { inset-inline-start: calc(var(--margin) + 40px + var(--s-3)); }
.row.tappable { cursor: pointer; }
.row.tappable:active { background: var(--surface-pressed); }

.row-main { flex: 1; min-width: 0; }
.row-title { font: var(--t-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title.strong { font: var(--t-body-strong); }
.row-title.missed { color: var(--red-text); }
.row-sub {
  font: var(--t-sub); color: var(--text-2); margin-top: 2px;
  display: flex; align-items: center; gap: var(--s-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-sub.wrap { white-space: normal; display: block; margin-top: 0; }
.row-sub .dir { flex: none; width: 14px; height: 14px; fill: currentColor; }
html[dir="rtl"] .row-sub .dir { transform: scaleX(-1); }
.row-trail { flex: none; font: var(--t-sub); color: var(--text-2); }
.row-actions { flex: none; display: flex; gap: var(--s-2); }

.row-stack { flex-direction: column; align-items: stretch; gap: var(--s-2); }
.row-label { font: var(--t-sub); color: var(--text-2); }
.row-input { flex: 1; border: 0; background: none; font: var(--t-body); padding: 0; min-height: 24px; }
.row-input::placeholder { color: var(--text-3); }
.row-input:focus { outline: none; }
.row-button { justify-content: center; font: var(--t-body); }
.row-button.danger { color: var(--red-text); }
.row-button:active { background: var(--surface-pressed); }

.code { font: var(--t-body-strong); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; direction: ltr; unicode-bidi: isolate; }

.empty { font: var(--t-sub); color: var(--text-2); text-align: center; padding: var(--s-7) var(--s-6); }

/* ---- avatars ------------------------------------------------------------------ */

.avatar {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font: 600 17px/1 var(--font);
  background: var(--fill-strong);
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar.online::after {
  content: ""; position: absolute; inset-block-end: -1px; inset-inline-end: -1px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2px solid var(--surface);
}
.profile .avatar { width: 56px; height: 56px; font-size: 22px; }
.profile .row-title { font: var(--t-body-strong); }
.avatar.xl { width: 96px; height: 96px; font-size: 40px; }

/* ---- tab bar ------------------------------------------------------------------ */

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  height: calc(49px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--bar); border-top: 0.5px solid var(--separator);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.tabbar button {
  position: relative; flex: 1; max-width: 140px; color: var(--text-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 600 10px/12px var(--font);
}
.tabbar svg { width: 26px; height: 26px; fill: currentColor; }
.tabbar button[aria-current="page"] { color: var(--text); }
.badge {
  position: absolute; top: 3px; inset-inline-start: calc(50% + 4px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red); color: #fff; font: 600 11px/18px var(--font); text-align: center;
}

/* ---- ringing ------------------------------------------------------------------ */

.ring-screen {
  display: none; position: fixed; inset: 0; z-index: 30;
  flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(15vh + env(safe-area-inset-top)) var(--margin) calc(var(--s-7) + env(safe-area-inset-bottom));
  background: var(--bg); text-align: center;
}
body[data-call="outgoing"] .ring-screen,
body[data-call="incoming"] .ring-screen { display: flex; }
.ring-who { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.ring-who .avatar { margin-bottom: var(--s-4); animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .ring-who .avatar { animation: none; } }

.ring-actions { display: none; gap: 80px; }
body[data-call="outgoing"] .ring-actions.out,
body[data-call="incoming"] .ring-actions.in { display: flex; }
.round { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); font: var(--t-caption); color: var(--text-2); }
.round-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; }
.round-icon svg { width: 32px; height: 32px; fill: #fff; }
.round-icon.end { background: var(--red); }
.round-icon.answer { background: var(--green); }
.round:active .round-icon { opacity: 0.8; }

/* ---- in call ------------------------------------------------------------------ */

.stage { display: none; position: fixed; inset: 0; z-index: 40; background: #000; color: #fff; }
body[data-call="active"] .stage { display: block; }

#remote { width: 100%; height: 100%; object-fit: cover; background: #000; }
@media (orientation: landscape), (min-width: 800px) { #remote { object-fit: contain; } }

#local {
  position: absolute; top: calc(var(--s-4) + env(safe-area-inset-top)); inset-inline-end: var(--margin);
  width: 28vw; max-width: 180px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-md); background: #1c1c1e;
}
#local.mirror { transform: scaleX(-1); }
#local.off { visibility: hidden; }

.stage-top {
  position: absolute; top: calc(var(--s-4) + env(safe-area-inset-top));
  inset-inline: var(--margin) calc(var(--margin) * 2 + min(28vw, 180px));
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.stage-name { font: var(--t-body-strong); }
.stage-status { font: var(--t-sub); opacity: 0.8; font-variant-numeric: tabular-nums; }

.controls {
  position: absolute; inset-inline: 0; bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
  display: flex; justify-content: center; gap: var(--s-5);
}
.ctl {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.ctl svg { width: 24px; height: 24px; fill: #fff; }
.ctl[aria-pressed="true"] { background: #fff; }
.ctl[aria-pressed="true"] svg { fill: #000; }
.ctl.end { background: #ff453a; }

/* "Wants to talk" sits above search; give the search room below it. */
#pages:not(:empty) { margin-bottom: var(--s-5); }

/* ---- toast -------------------------------------------------------------------- */

.toast {
  position: fixed; z-index: 50; inset-inline: var(--margin);
  bottom: calc(49px + env(safe-area-inset-bottom) + var(--s-4));
  margin: 0 auto; max-width: 400px; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: var(--text); color: var(--inverse);
  font: var(--t-sub); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap;
}
.toast-action {
  font: var(--t-caption-strong); color: var(--inverse);
  padding: var(--s-2) var(--s-3); border-radius: 999px; background: rgba(127, 127, 127, 0.35);
}
.group.flush { margin: 0; }