/* =============================================================================
   ui/home.css — the Android home screen, pixel for pixel.

   Every number here is the dp value from HomeScreen.kt / DailyGoalCard.kt /
   TopStudiers.kt read as a px value, which is what the Compose layout actually
   produces on the phones this app targets. Colours come only from the theme
   variables, so the six palettes and the day/night switch keep working.
   ========================================================================== */

.hs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  margin-inline: auto;
  padding: 6px 2px 10px;
}

/* ---------------------------------- header --------------------------------- */

.hs-head { display: flex; align-items: center; gap: 2px; }
.hh-txt { flex: 1 1 auto; min-width: 0; }
.hh-txt h1 { margin: 0; font-size: 1.45rem; font-weight: 800; line-height: 1.35; }
.hh-date { font-size: 0.78rem; color: var(--on-surface-v); margin-top: 1px; }
.hh-status {
  margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--on-surface-v); opacity: 0.75; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hh-status.set { color: var(--primary); opacity: 1; }

.hh-mood {
  width: 40px; height: 40px; flex: none; border: 0; cursor: pointer;
  border-radius: 999px; font-size: 17px; line-height: 1;
  background: rgba(var(--secondary-rgb) / 0.55);
  display: grid; place-items: center;
  transition: transform 140ms var(--e-spring);
}
.hh-mood:active { transform: scale(0.92); }

.hh-streak {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  margin-inline-start: 8px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--tertiary-rgb) / 0.22);
  border: 1px solid rgba(var(--tertiary-rgb) / 0.35);
  color: var(--tertiary, var(--amber)); font-size: 0.86rem; font-weight: 700;
  transition: transform 140ms var(--e-spring);
}
.hh-streak > span { font-size: 0.72rem; opacity: 0.72; font-weight: 600; }
.hh-streak:active { transform: scale(0.9); }
.hh-streak.alive svg { animation: hhFlicker 1.1s var(--e-standard) infinite alternate; }
@keyframes hhFlicker { from { transform: scale(1); } to { transform: scale(1.16); } }

.hh-bell {
  position: relative; width: 42px; height: 42px; flex: none; margin-inline-start: 2px;
  border: 0; background: none; color: var(--on-bg); cursor: pointer;
  display: grid; place-items: center; border-radius: 999px;
}
.hh-bell:active { background: var(--surface-v); }
.hh-dot {
  position: absolute; top: 8px; inset-inline-end: 8px;
  width: 10px; height: 10px; border-radius: 999px; background: #EF4444;
}

/* ----------------------------------- hero ---------------------------------- */

.an-hero {
  border-radius: 28px; padding: 16px 18px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--grad-a), var(--primary) 52%, var(--secondary));
  box-shadow: var(--sh-md);
}
.ah-top { display: flex; align-items: center; gap: 10px; }
.ah-l { flex: 1 1 auto; min-width: 0; }
.ah-cap { font-size: 0.84rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.ah-num { display: flex; align-items: flex-end; gap: 6px; margin-top: 2px; }
.ah-num > b { font-size: 40px; font-weight: 900; line-height: 1.05; }
.ah-unit { font-size: 0.95rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); padding-bottom: 7px; }
.ah-orb {
  width: 62px; height: 62px; flex: none; border-radius: 999px;
  background: rgba(255, 255, 255, 0.2); display: grid; place-items: center;
  animation: ahPulse 1.6s var(--e-standard) infinite alternate;
}
@keyframes ahPulse { from { transform: scale(1); } to { transform: scale(1.09); } }

.ah-bars:not(:empty) { margin-top: 12px; }
.ah-bar { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.ab-ic { font-size: 13px; }
.ab-name {
  width: 88px; flex: none; font-size: 0.78rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ab-track {
  flex: 1 1 auto; height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22); overflow: hidden;
}
.ab-track > i { display: block; height: 5px; border-radius: 999px; background: #fff; }
.ab-val { flex: none; margin-inline-start: 8px; font-size: 0.72rem; font-weight: 700; }

.ah-act { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.ah-cta {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 0; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #06231A; font-size: 0.95rem; font-weight: 800;
  transition: transform 140ms var(--e-spring);
}
.ah-ghost {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 12px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff; font-size: 0.92rem; font-weight: 700;
  transition: transform 140ms var(--e-spring);
}
.ah-cta:active, .ah-ghost:active { transform: scale(0.96); }

/* --------------------------------- app card -------------------------------- */

.an-card {
  background: var(--surface); border-radius: 22px; padding: 17px;
  border: 1px solid var(--outline-v);
}

/* ------------------------------- daily goal -------------------------------- */

.an-goal { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.ag-row { display: flex; align-items: center; gap: 8px; }
.ag-row > b { flex: 1 1 auto; font-size: 0.95rem; font-weight: 700; }
.ag-val { font-size: 0.82rem; font-weight: 600; color: var(--on-surface-v); }
.ag-track { height: 9px; border-radius: 6px; background: rgba(var(--primary-rgb) / 0.18); overflow: hidden; }
.ag-track > i {
  display: block; height: 9px; border-radius: 6px; background: var(--primary);
  transition: width 700ms var(--e-decel);
}
.ag-sub { font-size: 0.8rem; color: var(--on-surface-v); }

/* ------------------------------ wakeup banner ------------------------------ */

.an-wake {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 22px;
  background: rgba(var(--tertiary-rgb) / 0.18);
  border: 1px solid rgba(var(--tertiary-rgb) / 0.25);
}
.aw-ic { color: var(--tertiary, var(--rose)); display: grid; place-items: center; }
.aw-t { flex: 1 1 auto; font-size: 0.88rem; }
.aw-btn {
  flex: none; padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tertiary, var(--rose)); color: #fff; font-size: 0.86rem; font-weight: 700;
}
.aw-btn:active { transform: scale(0.95); }

/* -------------------------------- shortcuts -------------------------------- */

.an-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.aq-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 4px; border-radius: 22px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--outline-v);
  transition: transform 160ms var(--e-spring);
}
.aq-tile:active { transform: scale(0.93); }
.aq-ic { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; }
.aq-ic.tone-p { color: var(--primary); background: linear-gradient(140deg, rgba(var(--primary-rgb) / 0.26), rgba(var(--primary-rgb) / 0.1)); }
.aq-ic.tone-s { color: var(--secondary); background: linear-gradient(140deg, rgba(var(--secondary-rgb) / 0.26), rgba(var(--secondary-rgb) / 0.1)); }
.aq-ic.tone-t { color: var(--tertiary, var(--rose)); background: linear-gradient(140deg, rgba(var(--tertiary-rgb) / 0.26), rgba(var(--tertiary-rgb) / 0.1)); }
.aq-lb {
  font-size: 0.76rem; font-weight: 600; color: var(--on-surface); text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --------------------------- flashcard / telegram -------------------------- */

.an-banner {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px; border: 0; border-radius: 28px; cursor: pointer;
  color: #fff; text-align: start; box-shadow: var(--sh-sm);
  transition: transform 160ms var(--e-spring);
}
.an-banner:active { transform: scale(0.98); }
.an-banner.fc { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.an-banner.tg { background: linear-gradient(135deg, #38BDF8, #2563EB); }
.ab-orb {
  width: 46px; height: 46px; flex: none; border-radius: 999px; font-size: 22px;
  background: rgba(255, 255, 255, 0.22); display: grid; place-items: center;
}
.ab-orb.pulse { animation: ahPulse 1.4s var(--e-standard) infinite alternate; }
.ab-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ab-txt > b { font-size: 1rem; font-weight: 800; }
.ab-txt > span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.85); }
.ab-chev { font-size: 20px; line-height: 1; }

/* ------------------------------ section title ------------------------------ */

.an-sec { display: flex; flex-direction: column; gap: 10px; }
.an-title { display: flex; align-items: center; gap: 9px; }
.an-title > i {
  width: 4px; height: 17px; border-radius: 999px; flex: none;
  background: linear-gradient(180deg, var(--grad-a), var(--primary), var(--secondary));
}
.an-title > b { font-size: 1rem; font-weight: 800; flex: 1 1 auto; }
.an-more {
  border: 0; background: none; cursor: pointer; padding: 4px 6px;
  font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--primary);
}

/* horizontal scrollers, LazyRow style */
.an-row {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.an-row::-webkit-scrollbar { display: none; }
.an-row > * { scroll-snap-align: start; }

/* empty-state invite card, shared by friends and groups */
.an-invite {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px; cursor: pointer; text-align: start; color: var(--on-bg);
}
.ai-ic { color: var(--primary); display: grid; place-items: center; flex: none; }
.ai-t { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.ai-t > b { font-size: 0.95rem; font-weight: 700; }
.ai-t > span { font-size: 0.76rem; color: var(--on-surface-v); }
.ai-chev { font-size: 20px; color: var(--on-surface-v); }

/* --------------------------------- friends --------------------------------- */

.af-card {
  width: 128px; flex: none; padding: 11px; border-radius: 22px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--outline-v);
  display: flex; flex-direction: column; align-items: center;
  transition: transform 160ms var(--e-spring);
}
.af-card:active { transform: scale(0.97); }
.af-name {
  margin-top: 7px; font-size: 0.9rem; font-weight: 700; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-min { margin-top: 3px; font-size: 0.8rem; font-weight: 700; color: var(--primary); }
.af-track {
  width: 100%; height: 4px; margin-top: 7px; border-radius: 999px;
  background: rgba(var(--on-surface-rgb) / 0.07); overflow: hidden;
}
.af-track > i { display: block; height: 4px; border-radius: 999px; background: var(--primary); }
.af-dm {
  margin-top: 9px; display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(var(--primary-rgb) / 0.12); color: var(--primary);
  font-size: 0.74rem; font-weight: 700;
}
.af-dm:active { transform: scale(0.94); }

/* ---------------------------------- groups --------------------------------- */

.ag-tile {
  width: 142px; height: 118px; flex: none; padding: 12px; border-radius: 22px;
  cursor: pointer; background: var(--surface);
  border: 1px solid var(--outline-v);
  display: flex; flex-direction: column; text-align: start; color: var(--on-bg);
  transition: transform 160ms var(--e-spring);
}
.ag-tile:active { transform: scale(0.97); }
.agt-av { position: relative; display: inline-block; }
.agt-badge {
  position: absolute; top: -4px; inset-inline-start: -4px;
  min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: #EF4444; color: #fff; font-size: 0.68rem; font-weight: 800;
  font-style: normal; text-align: center;
}
.agt-name {
  margin-top: 8px; font-size: 0.92rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agt-sub { margin-top: 2px; font-size: 0.74rem; color: var(--on-surface-v); }
.ag-tile.new {
  align-items: center; justify-content: center; gap: 6px;
  background: rgba(var(--primary-rgb) / 0.08);
  border: 1px solid rgba(var(--primary-rgb) / 0.28);
  color: var(--primary); font-size: 0.82rem; font-weight: 700;
}

/* ------------------------------- leaderboard ------------------------------- */

.an-top { display: flex; flex-direction: column; gap: 12px; }
.at-head { display: flex; align-items: center; gap: 8px; }
.at-head > svg { color: var(--tertiary, var(--amber)); flex: none; }
.at-h { flex: 1 1 auto; display: grid; gap: 1px; min-width: 0; }
.at-h > b { font-size: 0.95rem; font-weight: 700; }
.at-h > span { font-size: 0.74rem; color: var(--on-surface-v); }
.at-all {
  flex: none; padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(var(--primary-rgb) / 0.12); color: var(--primary);
  font-size: 0.8rem; font-weight: 700;
}

.at-hero {
  border-radius: 22px; padding: 14px 16px; color: #fff;
  background: linear-gradient(135deg, var(--grad-a), var(--primary) 52%, var(--secondary));
}
.ath-row { display: flex; align-items: center; gap: 11px; }
.ath-l { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.ath-cap { font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.ath-num {
  font-size: 26px; font-weight: 900; line-height: 32px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ath-rank {
  flex: none; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22); font-size: 0.84rem; font-weight: 700;
}
.ath-track {
  display: block; height: 7px; margin-top: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.24); overflow: hidden;
}
.ath-track > i { display: block; height: 7px; border-radius: 999px; background: #fff; }
.ath-cap2 { margin-top: 8px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.9); }

.at-rows { display: flex; flex-direction: column; }
.at-row { padding: 7px 8px; border-radius: 14px; cursor: pointer; }
.at-row.me { background: rgba(var(--primary-rgb) / 0.1); }
.atr-top { display: flex; align-items: center; gap: 6px; }
.atr-badge {
  width: 26px; flex: none; text-align: center; font-size: 0.8rem; font-weight: 700;
  color: var(--on-surface-v);
}
.atr-badge.m1, .atr-badge.m2, .atr-badge.m3 {
  width: 22px; height: 22px; line-height: 22px; border-radius: 999px;
  color: #1F2937; font-weight: 900;
}
.atr-badge.m1 { background: #FBBF24; }
.atr-badge.m2 { background: #CBD5E1; }
.atr-badge.m3 { background: #D8A47F; }
.atr-name {
  flex: 1 1 auto; margin-inline-start: 3px; font-size: 0.88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.at-row.me .atr-name { font-weight: 800; }
.atr-min { flex: none; font-size: 0.8rem; font-weight: 700; color: var(--primary); }
.atr-track {
  display: block; height: 5px; margin-top: 5px; border-radius: 999px;
  background: rgba(var(--on-surface-rgb) / 0.06); overflow: hidden;
}
.atr-track > i { display: block; height: 5px; border-radius: 999px; background: var(--primary); }
.at-empty { font-size: 0.82rem; color: var(--on-surface-v); }

/* mood sheet grid */
.mood-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mood-b {
  padding: 12px 0; border-radius: 18px; border: 1px solid var(--outline-v);
  background: var(--surface-v); font-size: 24px; cursor: pointer;
}
.mood-b:active { transform: scale(0.94); }

/* wider screens keep the exact phone column, centred — the Android layout has
   no desktop variant, so neither does this screen. */
@media (min-width: 900px) {
  .hs { max-width: 600px; }
}

/* ============================ header overlays =============================
   The Android home opens three surfaces from its header: the mood sheet
   (عمومی / کتاب‌ها tabs + labelled emoji chips + ذخیره), the notification
   sheet, and the streak celebration dialog. All three exist here now.
   ======================================================================== */

/* ---- mood sheet ---- */
.md-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.md-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--outline);
  color: var(--on-bg); font: inherit; font-size: 0.86rem; font-weight: 600;
}
.md-tab.on {
  background: rgba(var(--primary-rgb) / 0.16);
  border-color: rgba(var(--primary-rgb) / 0.45);
  color: var(--primary);
}
.md-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.md-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 74px; padding: 8px 12px; border-radius: 16px; cursor: pointer;
  border: 1px solid transparent; font: inherit;
  background: rgba(var(--surface-rgb) / 0.6);
  color: var(--on-bg);
  transition: transform 140ms var(--e-spring), background 140ms linear;
}
.md-chip:active { transform: scale(0.94); }
.md-chip.on {
  background: rgba(var(--primary-rgb) / 0.2);
  border-color: rgba(var(--primary-rgb) / 0.4);
}
.md-e { font-size: 22px; line-height: 1.2; }
.md-l { font-size: 0.72rem; font-weight: 600; }
.hs-count { margin-top: 6px; font-size: 0.72rem; color: var(--on-surface-v); text-align: end; }

/* ---- notification sheet ---- */
.nf-list { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.nf-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.nf-t { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.nf-t > b { font-size: 0.88rem; font-weight: 500; }
.nf-row.unread .nf-t > b { font-weight: 800; }
.nf-t > span {
  font-size: 0.74rem; color: var(--on-surface-v);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nf-d { flex: none; font-size: 0.72rem; color: var(--on-surface-v); }
.nf-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 0; }
.nf-empty > span { font-size: 30px; }
.nf-empty > b { font-size: 0.9rem; color: var(--on-surface-v); font-weight: 600; }

/* ---- streak celebration ---- */
.cel-wrap {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); opacity: 0;
  transition: opacity 200ms var(--e-standard);
}
.cel-wrap.open { opacity: 1; }
.cel-card {
  position: relative; z-index: 2; width: min(330px, 86vw);
  padding: 28px; border-radius: 34px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--grad-a), var(--primary) 52%, var(--secondary));
  display: grid; justify-items: center; gap: 6px;
  transform: scale(0.6);
  transition: transform 420ms var(--e-spring);
}
.cel-wrap.open .cel-card { transform: scale(1); }
.cel-orb { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.cel-ring {
  position: absolute; inset: 0; border-radius: 999px;
  background: conic-gradient(rgba(255,255,255,0), rgba(255,255,255,.30), rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  animation: celSpin 9s linear infinite;
}
@keyframes celSpin { to { transform: rotate(360deg); } }
.cel-fire { font-size: 78px; line-height: 1; animation: celPulse 760ms var(--e-standard) infinite alternate; }
@keyframes celPulse { from { transform: scale(1); } to { transform: scale(1.2); } }
.cel-n { margin-top: 10px; font-size: 1.7rem; font-weight: 900; }
.cel-msg { font-size: 1rem; color: rgba(255, 255, 255, 0.92); }
.cel-btn {
  margin-top: 12px; padding: 12px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #06231A; font: inherit; font-size: 0.95rem; font-weight: 800;
}
.cel-btn:active { transform: scale(0.96); }
.cel-burst { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cel-burst > i {
  position: absolute; top: 50%; left: 50%; width: var(--s); height: var(--s);
  border-radius: 999px; background: var(--c);
  animation: celFly 2200ms linear var(--dl) forwards;
}
@keyframes celFly {
  from { transform: rotate(var(--a)) translateX(0) rotate(calc(-1 * var(--a))); opacity: 1; }
  to   { transform: rotate(var(--a)) translateX(var(--d)) rotate(calc(-1 * var(--a))) translateY(260px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cel-burst { display: none; }
  .cel-fire, .cel-ring { animation: none; }
}

/* overflow guards */
.hm-row > *, .hm-main { min-width: 0; }
.hm-title, .hm-sub { overflow-wrap: anywhere; }