/* ============================================================================
 *  nahash.co.il  |  public/css/wa-chat.css
 *  💬 מסך השיחות בוואטסאפ (מפלס B) — רשימת שיחות + חלון שיחה + תיבת מענה.
 *
 *  • מבוסס על אותם טוקנים של styles.css (--wa, --line, --surface, --r…),
 *    כדי שהמסך ייראה כמו שאר המערכת ולא כמו רכיב זר.
 *  • RTL: שימוש בתכונות לוגיות (inline-start/end), כדי שהבועות יתהפכו נכון
 *    גם אם הדף יוצג בכיוון אחר.
 *  • המידות במובייל: רשימה **או** שיחה (לא שניהם יחד) — כמו באפליקציות.
 * ========================================================================== */

.wa-chat {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
}

/* ---------------------------------- רשימה --------------------------------- */

.wa-chat__side {
  display: grid;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-4);
}

.wa-chat__side h3 { margin: 0; font-size: var(--fs-md); }

.wa-list { display: grid; gap: 0.4rem; max-height: 62vh; overflow-y: auto; }

.wa-item {
  display: grid;
  gap: 0.15rem;
  text-align: start;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.wa-item:hover { background: var(--row-hover); }
.wa-item.is-active { border-color: var(--wa); background: color-mix(in srgb, var(--wa) 10%, var(--surface)); }

.wa-item__top { display: flex; align-items: center; gap: 0.4rem; justify-content: space-between; }
.wa-item__name { font-weight: 700; font-size: var(--fs-sm); }

.wa-item__meta { font-size: var(--fs-2xs); color: var(--ink-4); opacity: 0.85; }

.wa-item__preview {
  font-size: var(--fs-xs);
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* מונה "לא נקרא" — עם תיאור לקורא מסך */
.wa-unread {
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-full);
  background: var(--wa);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  padding: 0 0.35rem;
}

/* --------------------------------- השיחה --------------------------------- */

.wa-thread {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 62vh;
  overflow: hidden;
}

.wa-thread__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 0.7rem var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.wa-thread__who { display: grid; gap: 0.1rem; }
.wa-thread__name { font-weight: 700; }

/* 🤟 לקוח/ה שביקש/ה כתב בלבד — "אין לחייג" במקום כפתור החיוג */
.wa-textonly-note { color: var(--gold); font-weight: 700; }

.wa-thread__body {
  padding: var(--sp-4);
  overflow-y: auto;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wa) 5%, transparent), transparent 40%);
}

.wa-day {
  text-align: center;
  font-size: var(--fs-2xs);
  opacity: 0.7;
  margin: 0.5rem 0 0.15rem;
}

.wa-msg { display: flex; }
.wa-msg--out { justify-content: flex-end; }
.wa-msg--in { justify-content: flex-start; }

.wa-bubble {
  max-width: min(78%, 34rem);
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  overflow-wrap: anywhere;
}

.wa-msg--out .wa-bubble {
  background: color-mix(in srgb, var(--wa) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--wa) 30%, var(--line));
}

.wa-bubble__text { white-space: pre-wrap; margin: 0; }

.wa-bubble__foot {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
  font-size: var(--fs-2xs);
  opacity: 0.75;
  margin-top: 0.2rem;
}

.wa-bubble__status--read { color: var(--info); font-weight: 700; }
.wa-bubble__status--failed { color: var(--danger); font-weight: 700; }

/* --------------------------------- מענה --------------------------------- */

.wa-composer {
  border-top: 1px solid var(--line-soft);
  padding: var(--sp-3) var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  background: var(--surface-2);
}

.wa-composer__row { display: flex; gap: var(--sp-2); align-items: flex-end; }

.wa-composer textarea {
  flex: 1 1 auto;
  min-height: 2.6rem;
  max-height: 9rem;
  resize: vertical;
  font: inherit;
  color: inherit;
  background: var(--field-bg, var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.6rem;
}

.wa-composer textarea:focus-visible { outline: 2px solid var(--wa); outline-offset: 1px; }

.wa-composer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-2xs);
}

/* אזהרה: אין חלון שירות פתוח ⇒ השליחה מהמערכת חסומה (בכוונה) */
.wa-notice {
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-2);
  background: var(--panel);
}

.wa-notice--ok { border-color: color-mix(in srgb, var(--wa) 40%, var(--line)); }
.wa-notice--warn { border-color: rgba(233, 196, 106, 0.55); background: rgba(233, 196, 106, 0.08); }

.wa-empty {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  opacity: 0.9;
}

/* --------------------------------- מובייל --------------------------------- */
/* במובייל נשאר טור אחד: הרשימה מעל השיחה (בלי כפתור "חזרה" — פשוט גוללים) */

@media (max-width: 860px) {
  .wa-chat { grid-template-columns: minmax(0, 1fr); }
  .wa-list { max-height: 32vh; }
  .wa-thread { min-height: 50vh; }
  .wa-bubble { max-width: 88%; }
}

/* שיחה בתוך מודאל (מרכז הלידים / דשבורד) — בלי רשימת שיחות */
.wa-chat--modal { grid-template-columns: minmax(0, 1fr); }
.wa-chat--modal .wa-chat__side { display: none; }
.wa-chat--modal .wa-thread { min-height: 46vh; }