/* ==========================================================
   Dreamolizer — עיצוב בסיס: שמי לילה רגועים, Mobile First, RTL
   ========================================================== */

:root {
  --night-deep: #070b1c;
  --night: #0b1026;
  --night-mid: #141c3d;
  --night-soft: #1a2151;

  --text: #dde3f5;
  --text-dim: #8b95bd;
  --moonlight: #f2f5ff;

  --accent: #9b8ce8;
  --accent-soft: rgba(155, 140, 232, 0.16);

  --ok: #6fcf97;
  --warn: #f2c94c;
  --err: #eb5757;

  --radius: 18px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: 10px;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family:
    "Heebo",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--night-deep);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- שכבת השמיים ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
}

/* שתי מסכות אור גדולות מאוד שנעות בקצב שונה זו מזו. כשהמחזורים
   אינם כפולה זה של זה הצירוף לעולם לא חוזר על עצמו, וזה מה שנותן
   לרקע תחושה של נשימה במקום של לולאה */
.sky::before,
.sky::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.sky::before {
  background: radial-gradient(
    ellipse 62% 44% at 50% 12%,
    var(--night-soft) 0%,
    transparent 62%
  );
  animation: sky-swell-a 71s ease-in-out infinite alternate;
}

.sky::after {
  background: radial-gradient(
    ellipse 48% 34% at 20% 88%,
    #1b1740 0%,
    transparent 66%
  );
  animation: sky-swell-b 97s ease-in-out infinite alternate;
}

@keyframes sky-swell-a {
  from {
    transform: translate3d(-2.5%, -1.6%, 0) scale(1);
  }
  to {
    transform: translate3d(3.2%, 2.2%, 0) scale(1.14);
  }
}

@keyframes sky-swell-b {
  from {
    transform: translate3d(2.8%, 1.4%, 0) scale(1.1);
  }
  to {
    transform: translate3d(-3.4%, -2%, 0) scale(1);
  }
}

/* עננים — כתמים מטושטשים שנעים לאט מאוד לרוחב */
.clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0;
  will-change: transform, opacity;
}

.cloud--1 {
  width: 60vw;
  height: 26vh;
  top: 12%;
  right: -25vw;
  background: radial-gradient(
    circle,
    rgba(124, 128, 200, 0.34),
    transparent 70%
  );
  --cloud-alpha: 0.46;
  animation: drift 96s linear infinite;
}

.cloud--2 {
  width: 75vw;
  height: 30vh;
  top: 48%;
  right: -40vw;
  background: radial-gradient(
    circle,
    rgba(92, 104, 178, 0.28),
    transparent 70%
  );
  --cloud-alpha: 0.4;
  animation: drift 132s linear infinite -22s;
}

.cloud--3 {
  width: 50vw;
  height: 22vh;
  bottom: 6%;
  right: -30vw;
  background: radial-gradient(
    circle,
    rgba(150, 126, 200, 0.24),
    transparent 70%
  );
  --cloud-alpha: 0.36;
  animation: drift 156s linear infinite -61s;
}

/* ה-X מתקדם באופן ליניארי, אבל ה-Y וקנה המידה נודדים סביבו —
   ענן שנע בקו ישר מושלם קורא כשקופית שנגררת. השקיפות עולה
   ויורדת בקצוות כדי שהקפיצה בסוף המחזור לא תיראה */
@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0;
  }
  14% {
    opacity: var(--cloud-alpha, 0.42);
  }
  25% {
    transform: translate3d(40vw, -2.2vh, 0) scale(1.07);
  }
  50% {
    transform: translate3d(80vw, 1.4vh, 0) scale(0.96);
  }
  75% {
    transform: translate3d(120vw, -1.1vh, 0) scale(1.05);
  }
  86% {
    opacity: var(--cloud-alpha, 0.42);
  }
  100% {
    transform: translate3d(160vw, 0, 0) scale(1);
    opacity: 0;
  }
}

/* קנבס השמיים — ניצוצות צפים וכוכבים נופלים, מצוירים ב-sky.js */
.sky__canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

/* שדה הכוכבים נודד לאט מאוד ובאמפליטודה זעירה. הוא רחוק יותר
   מהעננים, ולכן זז פחות מהם — זו כל הפרלקסה */
.stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  will-change: transform;
  animation: star-parallax 124s ease-in-out infinite alternate;
}

@keyframes star-parallax {
  from {
    transform: translate3d(0.9vw, 0.5vh, 0) scale(1);
  }
  to {
    transform: translate3d(-1.2vw, -0.7vh, 0) scale(1.035);
  }
}

/* כוכבים — נוצרים ב-app.js */
.star {
  position: absolute;
  border-radius: 50%;
  background: var(--moonlight);
  animation: twinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
  0%,
  100% {
    opacity: var(--min, 0.25);
    transform: scale(1);
  }
  50% {
    opacity: var(--max, 0.95);
    transform: scale(1.25);
  }
}

/* ירח — הפנים עצמן מצוירות ב-moon.js. כאן רק המיקום, ההילה
   העמומה, והריחוף */
.moon {
  position: absolute;
  top: calc(7vh + var(--safe-top));
  left: 12vw;
  width: 72px;
  height: 72px;
  z-index: 4;
  border-radius: 50%;
  will-change: transform;
  animation: moon-float-y 23s ease-in-out infinite alternate;
}

/* הדיסק נע בציר השני ובמחזור אחר, וההילה נשארת מאחור לרגע —
   תנועה משנית קטנה שמונעת את המראה של אלמנט אחד שמחליק */
.moon__disc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  will-change: transform;
  animation: moon-float-x 31s ease-in-out infinite alternate;
}

@keyframes moon-float-y {
  from {
    transform: translate3d(0, 4px, 0);
  }
  to {
    transform: translate3d(0, -5px, 0);
  }
}

@keyframes moon-float-x {
  from {
    transform: translate3d(-3px, 0, 0) rotate(-0.5deg);
  }
  to {
    transform: translate3d(3px, 0, 0) rotate(0.7deg);
  }
}

/* ההילה נושמת סביב גוף ירח יציב. עמומה בכוונה: הירח מחזיר אור,
   הוא לא פנס */
.moon::before {
  content: "";
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(214, 222, 250, 0.1) 0%,
    rgba(155, 140, 232, 0.05) 46%,
    transparent 74%
  );
  animation: halo-breathe 13s ease-in-out infinite;
}

@keyframes halo-breathe {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* ---------- מעטפת האפליקציה ---------- */

.app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: rise 0.45s var(--ease) both;
}

.screen--center {
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: calc(var(--safe-top) + 16px) 20px calc(var(--safe-bottom) + 16px);
}

/* אזור גלילה פנימי — הכותרת והניווט נשארים במקומם */
.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 45px 20px calc(var(--safe-bottom) + 110px);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--safe-top) + 18px) 20px 14px;
}

.topbar--modal {
  justify-content: space-between;
}

.topbar__eyebrow {
  margin: 0 0 2px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.topbar__title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--moonlight);
}

.topbar__title--center {
  flex: 1;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-dim);
}

.topbar__spacer {
  min-width: 52px;
}

.linkbtn {
  min-width: 52px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: start;
}

.linkbtn--accent {
  color: var(--accent);
  font-weight: 500;
  text-align: end;
}

.linkbtn:disabled {
  opacity: 0.5;
}

[data-screen][hidden] {
  display: none;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- מיתוג ---------- */

.brand {
  text-align: center;
}

.brand__mark {
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  color: var(--moonlight);
  filter: drop-shadow(0 0 24px rgba(155, 140, 232, 0.45));
  animation: float 7s ease-in-out infinite;
}

.brand__mark svg {
  width: 100%;
  height: 100%;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

.brand__name {
  margin: 0;
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--moonlight);
  text-shadow: 0 0 34px rgba(155, 140, 232, 0.4);
}

.brand__tagline {
  margin: 12px 0 0;
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* ---------- מחוון סטטוס ---------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  font-size: 0.875rem;
  color: var(--text-dim);
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
  transition:
    background-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.status__dot[data-state="loading"] {
  animation: pulse 1.4s ease-in-out infinite;
}

.status__dot[data-state="ok"] {
  background: var(--ok);
  box-shadow: 0 0 12px rgba(111, 207, 151, 0.6);
  animation: none;
}

.status__dot[data-state="warn"] {
  background: var(--warn);
  box-shadow: 0 0 12px rgba(242, 201, 76, 0.6);
  animation: none;
}

.status__dot[data-state="err"] {
  background: var(--err);
  box-shadow: 0 0 12px rgba(235, 87, 87, 0.6);
  animation: none;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- כרטיס זכוכית ---------- */

.card {
  width: 100%;
  max-width: 400px;
  padding: 26px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
}

/* ---------- מתג התחברות/הרשמה ---------- */

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.26);
}

.segmented__btn {
  padding: 10px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

.segmented__btn.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--moonlight);
}

/* ---------- שדות טופס ---------- */

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-dim);
}

.field input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* אימייל וסיסמה נקראים משמאל לימין גם בממשק RTL */
.input--ltr {
  direction: ltr;
  text-align: left;
}

.field__hint {
  margin: 7px 2px 0;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.form-error {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(235, 87, 87, 0.12);
  border: 1px solid rgba(235, 87, 87, 0.28);
  color: #ffb4b4;
  font-size: 0.875rem;
  animation: rise 0.3s var(--ease) both;
}

/* ---------- כפתורים ---------- */

.btn {
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    opacity 0.2s var(--ease),
    box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.btn--primary {
  background: linear-gradient(135deg, #8f7fe0, #6e7bd8);
  color: #fff;
  box-shadow: 0 10px 30px rgba(124, 107, 216, 0.3);
}

.btn--primary:active:not(:disabled) {
  transform: scale(0.985);
}

/* קישור בתחפושת כפתור (למשל "לוח ניהול" בהגדרות) */
a.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.btn--ghost {
  width: auto;
  padding: 12px 26px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
}

.btn--ghost:active {
  background: rgba(255, 255, 255, 0.09);
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---------- מיתוג מוקטן ---------- */

.brand--compact .brand__mark {
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
}

.brand--compact .brand__name {
  font-size: 1.6rem;
}

.btn--danger {
  color: #ffa9a9;
  border-color: rgba(235, 87, 87, 0.28);
  background: rgba(235, 87, 87, 0.08);
}

/* ---------- יומן ---------- */

.date-group {
  margin-bottom: 26px;
}

.date-group__label {
  margin: 0 2px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

.dream-card {
  width: 100%;
  display: block;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.028)
  );
  box-shadow: 0 8px 22px rgba(4, 7, 20, 0.3);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease),
    transform 0.2s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.dream-card:hover {
  border-color: rgba(155, 140, 232, 0.3);
  box-shadow: 0 10px 28px rgba(4, 7, 20, 0.42);
}

.dream-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dream-card:active {
  transform: scale(0.99);
  background: rgba(255, 255, 255, 0.07);
}

.dream-card--thumbed {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.dream-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* התמונה היא הגיבורה של הכרטיס — גדלה עם רוחב המסך אך נשארת ריבועית */
.dream-card__thumb {
  width: clamp(88px, 27vw, 116px);
  aspect-ratio: 1 / 1;
  height: auto;
  flex-shrink: 0;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 4px 14px rgba(4, 7, 20, 0.35);
}

.dream-card__text {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dream-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* בכרטיס עם תמונה — התגיות נצמדות לתחתית, בקו אחד עם התמונה */
.dream-card--thumbed .dream-card__foot {
  margin-top: auto;
  padding-top: 10px;
}

.pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
}

/* ---------- מצב ריק ---------- */

.empty {
  margin-top: 18vh;
  text-align: center;
  animation: rise 0.6s var(--ease) both;
}

.empty__glyph {
  font-size: 2.4rem;
  color: var(--accent);
  opacity: 0.75;
  margin-bottom: 14px;
}

.empty__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--moonlight);
}

.empty__text {
  margin: 0 auto;
  max-width: 280px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-dim);
}

/* ---------- עורך החלום ---------- */

.field--grow {
  display: flex;
  flex-direction: column;
}

.field textarea {
  width: 100%;
  min-height: 220px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.7;
  resize: none;
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.field textarea::placeholder {
  color: rgba(139, 149, 189, 0.55);
}

/* בורר התאריך הנייטיב כהה מדי כברירת מחדל בחלק מהדפדפנים */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  cursor: pointer;
}

/* ---------- תמונת החלום ---------- */

.dreamimg {
  margin: 0 0 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  animation: rise 0.6s var(--ease) both;
}

.dreamimg[hidden] {
  display: none;
}

.dreamimg__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.dreamimg__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 12px;
}

.dreamimg__label {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.dreamimg__regen {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.3s var(--ease);
}

.dreamimg__regen:hover {
  color: var(--accent);
  border-color: rgba(155, 140, 232, 0.4);
}

.dreamimg__regen:active {
  transform: rotate(-90deg);
}

.dreamimg__regen[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* מצב המתנה — ריבוע בגובה התמונה עם אור נושם, כדי שהמסך לא יקפוץ */
.dreamimg--waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 40%,
      rgba(155, 140, 232, 0.12),
      transparent 70%
    ),
    rgba(255, 255, 255, 0.03);
}

.dreamimg__orb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fffdf4, #9b8ce8 70%, #6e7bd8);
  box-shadow: 0 0 30px rgba(155, 140, 232, 0.45);
  animation: breathe 2.6s ease-in-out infinite;
}

.dreamimg__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* ---------- פירוט חלום ---------- */

.dream-full {
  padding: 20px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

.dream-full__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text);
  white-space: pre-wrap;
}

/* ---------- מצב ניתוח ---------- */

.analyzing {
  padding: 34px 20px;
  text-align: center;
  animation: rise 0.5s var(--ease) both;
}

.analyzing__orb {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fffdf4, #9b8ce8 70%, #6e7bd8);
  box-shadow: 0 0 34px rgba(155, 140, 232, 0.5);
  animation: breathe 2.6s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(0.86);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.analyzing__title {
  margin: 0;
  font-size: 1.02rem;
  color: var(--moonlight);
}

.analyzing__hint {
  margin: 7px 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ---------- הודעת מצב ---------- */

.notice {
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--radius);
  text-align: center;
}

.notice--error {
  background: rgba(235, 87, 87, 0.09);
  border: 1px solid rgba(235, 87, 87, 0.24);
}

.notice__text {
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: #ffb4b4;
}

.notice .btn {
  width: auto;
  padding: 10px 24px;
}

/* ---------- הניתוח ---------- */

.analysis {
  margin-top: 18px;
  padding: 20px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(155, 140, 232, 0.2);
  background: linear-gradient(
    160deg,
    rgba(155, 140, 232, 0.09),
    rgba(255, 255, 255, 0.035)
  );
  animation: rise 0.6s var(--ease) both;
}

.analysis__title,
.section-label {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.analysis__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  white-space: pre-wrap;
}

/* ---------- תגיות ---------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.tags:empty {
  display: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text);
  background: color-mix(in srgb, var(--tag-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-color) 38%, transparent);
}

.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tag-color);
}

.tag--sm {
  padding: 3px 9px 3px 7px;
  font-size: 0.7rem;
}

/* תגית שטרם אושרה — נוכחת אך עמומה, עד שהחולם מאשר (SPEC §8.2) */
.tag--pending {
  opacity: 0.55;
}

/* ---------- אישור תגיות ---------- */

.approve {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: rise 0.4s var(--ease) both;
}

.approve[hidden] {
  display: none;
}

.approve__question {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
}

.approve__actions {
  display: flex;
  gap: 10px;
}

.approve__actions .btn {
  flex: 1;
}

.approve--working {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.approve--working .approve__question {
  margin: 0;
}

.approve__pulse {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fffdf4, #9b8ce8 70%, #6e7bd8);
  box-shadow: 0 0 22px rgba(155, 140, 232, 0.45);
  animation: breathe 2.6s ease-in-out infinite;
}

.approve__confirmed {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
  color: var(--ok);
  text-align: center;
}

.approve__confirmed[hidden] {
  display: none;
}

/* ---------- בורר תגיות בדיאלוג הדיוק ---------- */

.dialog--tall {
  max-width: 400px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}

.dialog--tall .dialog__text {
  margin-bottom: 16px;
}

.dialog--tall .field label {
  font-size: 0.78rem;
}

.dialog--tall .field textarea {
  min-height: 0;
  padding: 12px 14px;
  font-size: 0.94rem;
}

.tagpicker {
  display: flex;
  flex-direction: column;
  max-height: 38vh;
  margin-bottom: 18px;
  padding: 0 12px;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.2);
  overscroll-behavior: contain;
}

/* כותרת הקבוצה נדבקת לראש הבורר כדי שלא לאבד את ההקשר בגלילה.
   ה-padding האנכי יושב על הילדים ולא על המכל — אחרת תוכן נגלל מציץ מעל הכותרת. */
.tagpicker__title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -12px;
  padding: 11px 14px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  background: #12162b;
}

.tagpicker__row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 7px;
}

.tagpicker__row:last-child {
  padding-bottom: 12px;
}

.tag--pick {
  padding: 8px 13px 8px 11px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0.45;
  transition:
    opacity 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.tag--pick.is-picked {
  opacity: 1;
  background: color-mix(in srgb, var(--tag-color) 30%, transparent);
}

.detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.detail-actions .btn {
  flex: 1;
}

/* ---------- הגרף הנוירוני ---------- */

.graph {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* הבד תופס את כל המסך עד לניווט התחתון */
  margin-bottom: calc(var(--safe-bottom) + 64px);
}

.graph__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* ה-pan וה-zoom מנוהלים בקוד, לא בדפדפן */
  cursor: grab;
}

.graph__canvas:active {
  cursor: grabbing;
}

.graph__canvas[hidden] {
  display: none;
}

.graph__legend {
  position: absolute;
  inset-inline: 0;
  bottom: 14px;
  z-index: 2;
  margin: 0 auto;
  width: fit-content;
  max-width: 84%;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 21, 45, 0.78);
  backdrop-filter: blur(8px);
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  transition:
    color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.graph__legend.is-active {
  color: var(--moonlight);
  border-color: rgba(155, 140, 232, 0.45);
}

.graph__legend[hidden] {
  display: none;
}

.graph .empty {
  margin-top: 0;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* display:flex גובר על [hidden] — צריך להחזיר אותו במפורש */
.graph .empty[hidden] {
  display: none;
}

/* ---------- שורות הגדרות ---------- */

.card--flat {
  max-width: none;
  padding: 4px 18px;
  margin-bottom: 18px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.row:last-child {
  border-bottom: 0;
}

.row__label {
  font-size: 0.9rem;
  color: var(--text-dim);
}

.row__value {
  font-size: 0.95rem;
  color: var(--text);
}

.row__value--ltr {
  direction: ltr;
}

/* כפתורי פעולה בהגדרות — רשת אחידה */
.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.settings-actions .btn {
  width: 100%;
  padding: 14px 20px;
  text-align: center;
}

/* display:inline-block של a.btn גובר על [hidden] — מחזירים במפורש */
.settings-actions .btn[hidden] {
  display: none;
}

@media (min-width: 520px) {
  .settings-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .settings-actions .btn {
    flex: 1 1 150px;
    width: auto;
  }
}

/* ---------- כפתור צף ---------- */

.fab {
  position: fixed;
  inset-inline-end: 20px;
  bottom: calc(var(--safe-bottom) + 86px);
  z-index: 20;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #8f7fe0, #6e7bd8);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(124, 107, 216, 0.42);
  transition: transform 0.2s var(--ease);
}

.fab:active {
  transform: scale(0.94);
}

.fab svg {
  width: 26px;
  height: 26px;
}

.fab[hidden] {
  display: none;
}

/* ---------- ניווט תחתון ---------- */

.bottomnav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px 8px calc(var(--safe-bottom) + 8px);
  background: rgba(11, 16, 38, 0.82);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.bottomnav[hidden] {
  display: none;
}

.bottomnav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.bottomnav__btn svg {
  width: 23px;
  height: 23px;
}

.bottomnav__btn.is-active {
  color: var(--accent);
}

/* ---------- דיאלוג ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 7, 20, 0.66);
  backdrop-filter: blur(6px);
  animation: fade 0.25s var(--ease) both;
}

.overlay[hidden] {
  display: none;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dialog {
  width: 100%;
  max-width: 340px;
  padding: 24px 22px 20px;
  border-radius: 22px;
  background: #161c36;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  animation: rise 0.3s var(--ease) both;
}

.dialog__title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--moonlight);
}

.dialog__text {
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.dialog__actions {
  display: flex;
  gap: 10px;
}

.dialog__actions .btn {
  flex: 1;
}

/* ---------- חיווי אופליין ---------- */

/* יושב בזרימת האפליקציה ולא מעליה — אחרת הוא מכסה את כותרת המסך */
.offline-bar {
  flex-shrink: 0;
  padding: 7px 16px;
  background: rgba(255, 167, 38, 0.14);
  border-bottom: 1px solid rgba(255, 167, 38, 0.28);
  backdrop-filter: blur(8px);
  color: #ffcc80;
  font-size: 0.78rem;
  text-align: center;
}

.offline-bar[hidden] {
  display: none;
}

/* ---------- הודעה צפה ---------- */

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--safe-bottom) + 96px);
  z-index: 50;
  margin: 0 auto;
  width: fit-content;
  max-width: 84vw;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(22, 28, 54, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 0.88rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  animation: rise 0.3s var(--ease) both;
}

.toast[hidden] {
  display: none;
}

/* ---------- דסקטופ ---------- */

@media (min-width: 1024px) {
  .app,
  .bottomnav {
    max-width: 640px;
    margin-inline: auto;
  }

  .bottomnav {
    inset-inline: 0;
    border-radius: 20px 20px 0 0;
    border-inline: 1px solid rgba(255, 255, 255, 0.07);
  }

  .fab {
    inset-inline-end: max(20px, calc(50vw - 300px));
  }

  .moon {
    left: 8vw;
    width: 96px;
    height: 96px;
  }
}

/* ---------- נגישות: כיבוד העדפת תנועה מופחתת ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .star {
    opacity: 0.6;
  }
}