/* ════════════════════════════════════════════════════════════════════
   ForexBro Live Chat Widget — floating launcher + popup panel.
   Light/dark agnostic, RTL-aware, isolates from page styles.
   v3: modern polish + history list + closed banner + typing dots.
   ════════════════════════════════════════════════════════════════════ */

@keyframes fb-lc-fade-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes fb-lc-msg-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fb-lc-launcher-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Hide the entire widget when the dashboard SPA is on the Support tab
   — support has its own ticket system, the floating bubble is redundant
   and visually competes with the send button. The body class is toggled
   by showPage() in dashboard.js. */
body.fb-on-support #fb-lc-launcher,
body.fb-on-support #fb-lc-panel { display: none !important; }

/* FB Space: replace the live-chat bubble with the in-space "compose post" FAB
   (customers couldn't tell where to write posts). Toggled by showPage(). */
body.fb-on-space #fb-lc-launcher,
body.fb-on-space #fb-lc-panel,
body.fb-on-space .fb-lc-teaser { display: none !important; }

/* ── Launcher button (floating bubble) ───────────────────────────── */
/* ── Proactive teaser bubble (above the launcher) ─────────────────── */
.fb-lc-teaser {
  position: fixed;
  bottom: 96px;
  inset-inline-end: 22px;
  max-width: 280px;
  background: #ffffff;
  color: #0A0E1A;
  padding: 12px 36px 12px 16px;
  border-radius: 16px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.16);
  font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  z-index: 99997;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fb-lc-teaser-in 0.32s cubic-bezier(0.18, 1.2, 0.56, 1.05);
  transform-origin: bottom right;
}
[dir="rtl"] .fb-lc-teaser,
.fb-lc-teaser:dir(rtl) {
  padding: 12px 16px 12px 36px;
  transform-origin: bottom left;
}
.fb-lc-teaser::after {
  /* Little pointer tail pointing toward the launcher */
  content: "";
  position: absolute;
  bottom: -6px;
  inset-inline-end: 28px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  transform: rotate(45deg);
  border-bottom-right-radius: 3px;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.06);
}
.fb-lc-teaser:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.34),
    0 4px 10px rgba(0, 0, 0, 0.20);
}
.fb-lc-teaser-text {
  flex: 1;
  pointer-events: none;
}
.fb-lc-teaser-close {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.fb-lc-teaser-close:hover {
  background: rgba(0,0,0,0.06);
  color: #475569;
}
.fb-lc-teaser-leaving {
  animation: fb-lc-teaser-out 0.22s ease-in forwards;
}
@keyframes fb-lc-teaser-in {
  0%   { opacity: 0; transform: translateY(12px) scale(0.86); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fb-lc-teaser-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8px) scale(0.92); }
}
/* On narrow screens the teaser sticks closer to the launcher */
@media (max-width: 480px) {
  .fb-lc-teaser {
    max-width: calc(100vw - 90px);
    bottom: 92px;
    font-size: 13px;
  }
}
/* Hide teaser when admin overlay is on or panel is open */
body.fb-on-support .fb-lc-teaser { display: none !important; }

#fb-lc-launcher {
  position: fixed;
  bottom: 22px;
  inset-inline-end: 22px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #FFB800 0%, #F59E0B 50%, #d97706 100%);
  color: #0A0E1A;
  box-shadow:
    0 10px 30px rgba(255, 184, 0, 0.5),
    0 2px 6px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.4);
  cursor: pointer;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  animation: fb-lc-launcher-bob 3.4s ease-in-out infinite;
}
#fb-lc-launcher:hover {
  transform: translateY(-3px) scale(1.07);
  box-shadow:
    0 16px 38px rgba(255, 184, 0, 0.65),
    0 4px 12px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.5);
  animation: none;
}
#fb-lc-launcher.fb-lc-active {
  transform: scale(0.92);
  animation: none;
}
#fb-lc-launcher svg {
  width: 26px; height: 26px;
  color: #0A0E1A;
}
#fb-lc-launcher-badge {
  display: none;
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #EF4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-family: 'Inter', system-ui, sans-serif;
  align-items: center;
  justify-content: center;
  border: 2px solid #0A0E1A;
  line-height: 1;
  animation: fb-lc-pulse 2s infinite;
}
@keyframes fb-lc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
  50%      { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* ── Panel ───────────────────────────────────────────────────────── */
#fb-lc-panel {
  position: fixed;
  bottom: 96px;
  inset-inline-end: 22px;
  width: 380px;
  max-width: calc(100vw - 24px);
  height: 560px;
  max-height: calc(100vh - 130px);
  background: #0B0F1E;
  border: 1px solid rgba(255,184,0,0.18);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,184,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #E8ECF2;
  /* Match site typography — Inter (Latin) then Tajawal (Arabic) — so
     the chat panel doesn't read as a foreign component. */
  font-family: 'Inter', 'Tajawal', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  animation: fb-lc-fade-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Header ──────────────────────────────────────────────────────── */
#fb-lc-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 14px;
  background: linear-gradient(135deg, #1a1f33 0%, #0F1424 100%);
  border-bottom: 1px solid rgba(255,184,0,0.12);
  flex-shrink: 0;
}
#fb-lc-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding-inline-start: 6px;
  min-width: 0;
}
#fb-lc-title {
  font-size: 15px;
  font-weight: 800;
  color: #FFB800;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#fb-lc-title::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #00FF87;
  box-shadow: 0 0 0 3px rgba(0,255,135,0.18);
}
#fb-lc-subtitle { font-size: 11.5px; color: #8A92A6; }
#fb-lc-close, #fb-lc-back, #fb-lc-new, #fb-lc-history {
  background: transparent;
  border: none;
  color: #8A92A6;
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
#fb-lc-close { font-size: 24px; line-height: 1; padding: 4px 9px; }
#fb-lc-new   { color: #FFB800; }
#fb-lc-close:hover, #fb-lc-back:hover, #fb-lc-history:hover {
  color: #E8ECF2;
  background: rgba(255,255,255,0.08);
  transform: scale(1.08);
}
#fb-lc-new:hover {
  color: #FFB800;
  background: rgba(255,184,0,0.12);
  transform: scale(1.08);
}
[dir="rtl"] #fb-lc-back svg { transform: scaleX(-1); }

/* ── Body ────────────────────────────────────────────────────────── */
#fb-lc-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at top right, rgba(255,184,0,0.04) 0%, transparent 50%),
    radial-gradient(circle at bottom left, rgba(0,255,135,0.025) 0%, transparent 50%),
    #0B0F1E;
}
#fb-lc-body::-webkit-scrollbar { width: 6px; }
#fb-lc-body::-webkit-scrollbar-thumb { background: rgba(255,184,0,0.25); border-radius: 3px; }
.fb-lc-loading {
  text-align: center;
  color: #8A92A6;
  font-size: 28px;
  margin: auto;
  animation: fb-lc-blink 1.2s infinite;
}

/* Empty / login-required state */
.fb-lc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 30px 12px;
  gap: 10px;
}
.fb-lc-empty-icon  { font-size: 38px; }
.fb-lc-empty-title { font-size: 16px; font-weight: 700; color: #FFB800; }
.fb-lc-empty-desc  { font-size: 13px; color: #8A92A6; line-height: 1.6; max-width: 240px; }
.fb-lc-cta {
  margin-top: 8px;
  background: #FFB800;
  color: #0A0E1A;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.2s;
}
.fb-lc-cta:hover { background: #F59E0B; }

/* Choose screen */
.fb-lc-choose { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.fb-lc-choose-title {
  font-size: 14px;
  font-weight: 600;
  color: #E8ECF2;
  margin-bottom: 4px;
  text-align: center;
}
.fb-lc-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #16192D;
  border: 1px solid #252A3A;
  border-radius: 12px;
  cursor: pointer;
  color: #E8ECF2;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
  text-align: start;
}
.fb-lc-choice:hover {
  border-color: #FFB800;
  background: #1a1f33;
  transform: translateY(-1px);
}
.fb-lc-choice-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.fb-lc-choice-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fb-lc-choice .fb-lc-choice-title { font-size: 14px; font-weight: 700; color: #FFB800; }
.fb-lc-choice-desc { font-size: 12px; color: #8A92A6; line-height: 1.5; }

/* Messages */
.fb-lc-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  border-radius: 14px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
  animation: fb-lc-msg-in 0.18s ease-out;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.fb-lc-msg-meta {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.fb-lc-msg-body { color: inherit; }
.fb-lc-msg-customer {
  align-self: flex-end;
  background: linear-gradient(135deg, #FFB800 0%, #F59E0B 100%);
  color: #0A0E1A;
  border-bottom-right-radius: 4px;
}
[dir="rtl"] .fb-lc-msg-customer { border-bottom-right-radius: 12px; border-bottom-left-radius: 4px; }
.fb-lc-msg-customer .fb-lc-msg-meta { color: rgba(10,14,26,0.7); }
.fb-lc-msg-agent {
  align-self: flex-start;
  background: linear-gradient(180deg, #1c2238 0%, #16192D 100%);
  border: 1px solid #2a3050;
  color: #E8ECF2;
  border-bottom-left-radius: 4px;
}
[dir="rtl"] .fb-lc-msg-agent { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.fb-lc-msg-ai {
  align-self: flex-start;
  background: #1a2440;
  border: 1px solid #2c3a66;
  color: #C5D2F0;
  border-bottom-left-radius: 4px;
}
.fb-lc-msg-system {
  align-self: center;
  background: transparent;
  border: 1px dashed #3a4060;
  color: #8A92A6;
  font-size: 12px;
  font-style: italic;
  max-width: 90%;
  text-align: center;
}

.fb-lc-inline-error {
  align-self: center;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.35);
  color: #fca5a5;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-top: 8px;
}

/* Closed-conversation banner */
.fb-lc-closed-banner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-top: 12px;
  padding: 16px 14px;
  background: rgba(255,184,0,0.06);
  border: 1px dashed rgba(255,184,0,0.4);
  border-radius: 12px;
}
.fb-lc-closed-icon  { font-size: 26px; }
.fb-lc-closed-title { font-size: 14px; font-weight: 700; color: #FFB800; }
.fb-lc-closed-desc  { font-size: 12px; color: #8A92A6; line-height: 1.5; }
.fb-lc-closed-cta {
  margin-top: 8px;
  background: #FFB800;
  color: #0A0E1A;
  border: none;
  padding: 9px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.fb-lc-closed-cta:hover { background: #F59E0B; }

/* Typing indicator dots (customer & admin sides) */
.fb-lc-typing {
  background: #16192D !important;
  border: 1px solid #252A3A;
  color: #8A92A6 !important;
  padding: 9px 14px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 2px;
  max-width: max-content !important;
}
.fb-lc-typing > .fb-lc-msg-meta,
.fb-lc-typing > .fb-lc-msg-body { display: none !important; }
@keyframes fb-lc-blink {
  0%, 80%, 100% { opacity: 0.2; }
  40%           { opacity: 1; }
}
@keyframes lc-blink {
  0%, 80%, 100% { opacity: 0.2; }
  40%           { opacity: 1; }
}

/* ── History list (previous conversations) ────────────────────── */
.fb-lc-history-list { display: flex; flex-direction: column; gap: 6px; }
.fb-lc-history-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8A92A6;
  padding: 4px 4px 8px;
  border-bottom: 1px solid #252A3A;
  margin-bottom: 6px;
}
.fb-lc-history-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px;
  background: #16192D;
  border: 1px solid #252A3A;
  border-radius: 10px;
  cursor: pointer;
  text-align: start;
  color: #E8ECF2;
  font-family: inherit;
  transition: border-color 0.16s, transform 0.16s, background 0.16s;
}
.fb-lc-history-row:hover {
  border-color: #FFB800;
  background: #1a1f33;
  transform: translateY(-1px);
}
.fb-lc-history-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.fb-lc-history-row-subject {
  font-size: 13px;
  font-weight: 600;
  color: #E8ECF2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.fb-lc-history-row-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
  flex-shrink: 0;
}
.fb-lc-history-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #8A92A6;
}
.fb-lc-history-row-status { color: #FFB800; font-weight: 600; }
.fb-lc-history-new {
  margin-top: 8px;
  background: linear-gradient(135deg, #FFB800 0%, #F59E0B 100%);
  color: #0A0E1A;
  border: none;
  padding: 11px 16px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.16s;
}
.fb-lc-history-new:hover { transform: translateY(-1px); }

/* ── Input area ──────────────────────────────────────────────────── */
#fb-lc-input-area {
  display: flex;
  gap: 8px;
  padding: 11px 12px 13px;
  border-top: 1px solid rgba(255,184,0,0.12);
  background: linear-gradient(180deg, #0F1424 0%, #0B0F1E 100%);
  flex-shrink: 0;
  align-items: flex-end;
}
#fb-lc-textarea {
  flex: 1;
  background: #16192D;
  border: 1px solid #252A3A;
  border-radius: 10px;
  color: #E8ECF2;
  padding: 9px 12px;
  font-size: 13.5px;
  resize: none;
  outline: none;
  font-family: inherit;
  min-height: 38px;
  max-height: 120px;
  line-height: 1.5;
}
#fb-lc-textarea:focus { border-color: #FFB800; box-shadow: 0 0 0 3px rgba(255,184,0,0.12); }
#fb-lc-send {
  background: linear-gradient(135deg, #FFB800 0%, #F59E0B 100%);
  color: #0A0E1A;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255,184,0,0.4);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
#fb-lc-send:hover {
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 8px 18px rgba(255,184,0,0.55);
}
#fb-lc-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* RTL: mirror the send button SVG arrow */
[dir="rtl"] #fb-lc-send svg { transform: scaleX(-1); }

/* ── Mobile / small screens ─────────────────────────────────────
   Position the panel CENTERED on the viewport rather than docked
   above the launcher (which was pushing it too high on phones).
   Smaller height (70vh, capped at 520px) so it doesn't overwhelm
   the screen — easy to scan, easy to close.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Mobile: dock the panel BOTTOM-SHEET style (snug to the bottom of
     the viewport above the launcher). No centering transforms, no
     conflict with the desktop fade-in animation. */
  #fb-lc-panel {
    /* Reset everything that the desktop block sets, then re-anchor. */
    position: fixed !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 86px !important;
    inset-inline-start: 12px !important;
    inset-inline-end: 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: 70vh !important;
    max-height: 520px !important;
    border-radius: 16px !important;
    animation: fb-lc-fade-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  #fb-lc-launcher {
    bottom: 16px;
    inset-inline-end: 16px;
    width: 54px;
    height: 54px;
  }
  #fb-lc-launcher svg { width: 24px; height: 24px; }
}

/* ════════════════════════════════════════════════════════════════════
   v3 additions (2026-05-25): emoji picker, attachment preview, date
   dividers, message timestamps + read receipts, agent status dot,
   rating modal.
   ════════════════════════════════════════════════════════════════════ */

/* ── Agent / team status dot in the panel header ─────────────────── */
.fb-lc-status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-inline-end: 8px;
  vertical-align: middle;
  background: #6b7280;
  box-shadow: 0 0 0 2px rgba(11,15,30,0.9);
  flex-shrink: 0;
}
.fb-lc-status-online  { background: #22c55e; box-shadow: 0 0 0 2px rgba(11,15,30,0.9), 0 0 8px rgba(34,197,94,0.65); }
.fb-lc-status-busy    { background: #f59e0b; box-shadow: 0 0 0 2px rgba(11,15,30,0.9); }
.fb-lc-status-offline { background: #6b7280; }

/* ── Day dividers between message groups ─────────────────────────── */
.fb-lc-day-divider {
  text-align: center;
  margin: 14px 0 10px;
  font-size: 11px;
  color: rgba(232,236,242,0.50);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  position: relative;
}
.fb-lc-day-divider::before,
.fb-lc-day-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: rgba(255,184,0,0.10);
}
.fb-lc-day-divider::before { left: 5%; }
.fb-lc-day-divider::after  { right: 5%; }
.fb-lc-day-divider span {
  display: inline-block;
  background: #0B0F1E;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

/* ── Per-message footer (time + receipt) ─────────────────────────── */
.fb-lc-msg-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 10.5px;
  color: rgba(232,236,242,0.55);
}
.fb-lc-msg-customer .fb-lc-msg-foot { justify-content: flex-end; }
.fb-lc-msg-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.fb-lc-receipt {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: rgba(232,236,242,0.45);
}
.fb-lc-receipt-sending  { color: rgba(232,236,242,0.40); }
.fb-lc-receipt-sent     { color: rgba(232,236,242,0.55); }
.fb-lc-receipt-delivered{ color: rgba(232,236,242,0.75); }
.fb-lc-receipt-read     { color: #FFB800; }

/* ── Attachment images inside bubbles ────────────────────────────── */
.fb-lc-att-spacer { height: 6px; }
.fb-lc-att-link {
  display: block;
  margin-top: 4px;
  border-radius: 10px;
  overflow: hidden;
  max-width: 100%;
}
.fb-lc-att-img {
  display: block;
  max-width: 240px;
  max-height: 240px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}

/* ── Attachment preview row above textarea ───────────────────────── */
#fb-lc-attach-preview {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.fb-lc-att-thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.fb-lc-att-meta {
  flex: 1;
  min-width: 0;
  font-size: 12px;
}
.fb-lc-att-name {
  color: #E8ECF2;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-lc-att-size {
  color: rgba(232,236,242,0.50);
  font-size: 11px;
}
.fb-lc-att-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #E8ECF2;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.fb-lc-att-remove:hover { background: rgba(255,255,255,0.16); }

/* ── Icon buttons in the input row (attach / emoji) ──────────────── */
.fb-lc-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: rgba(232,236,242,0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.fb-lc-icon-btn:hover { background: rgba(255,255,255,0.06); color: #FFB800; }
.fb-lc-icon-btn:active { transform: scale(0.96); }

/* ── Emoji picker grid ───────────────────────────────────────────── */
#fb-lc-emoji-panel {
  display: none;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 10px;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(0,0,0,0.30);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.fb-lc-emoji-cell {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.fb-lc-emoji-cell:hover { background: rgba(255,255,255,0.08); }
.fb-lc-emoji-cell:active { transform: scale(0.92); }

/* ── Rating modal (overlay on the page, NOT inside the chat panel) ─ */
.fb-lc-rating-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fb-lc-fade-in 0.2s ease;
}
.fb-lc-rating-card {
  background: #0F1320;
  border: 1px solid rgba(255,184,0,0.20);
  border-radius: 18px;
  padding: 28px 22px 22px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  position: relative;
  color: #E8ECF2;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.fb-lc-rating-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #E8ECF2;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.fb-lc-rating-close:hover { background: rgba(255,255,255,0.12); }
.fb-lc-rating-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #FFFFFF;
}
.fb-lc-rating-desc {
  font-size: 13px;
  color: rgba(232,236,242,0.65);
  margin-bottom: 18px;
}
.fb-lc-rating-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  direction: ltr;
}
.fb-lc-star {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: rgba(255,255,255,0.18);
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.12s ease, transform 0.12s ease;
}
.fb-lc-star:hover { transform: scale(1.10); }
.fb-lc-star-on { color: #FFB800; }
.fb-lc-rating-thanks {
  margin-top: 14px;
  color: #22c55e;
  font-size: 13px;
  font-weight: 700;
}

/* Customer's own bubbles use a gold gradient — ensure the read-receipt
   stays legible there (dark colour on gold instead of gold-on-gold). */
.fb-lc-msg-customer .fb-lc-receipt-read     { color: #0A0E1A; }
.fb-lc-msg-customer .fb-lc-receipt-delivered{ color: rgba(10,14,26,0.65); }
.fb-lc-msg-customer .fb-lc-receipt-sent     { color: rgba(10,14,26,0.55); }
.fb-lc-msg-customer .fb-lc-receipt-sending  { color: rgba(10,14,26,0.50); }
.fb-lc-msg-customer .fb-lc-msg-time         { color: rgba(10,14,26,0.65); }

/* Admin layout responsive — the 3-column grid is desktop-only. On
   narrower screens (≤1300px) we drop the customer side panel so the
   conversation has room to breathe. On phones we stack everything. */
@media (max-width: 1300px) {
  .lc-adm-grid {
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }
  .lc-adm-grid #lcAdmCustomerPanel { display: none !important; }
}
@media (max-width: 760px) {
  .lc-adm-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
  }
  .lc-adm-grid #lcAdmList {
    border-inline-end: none !important;
    border-bottom: 1px solid var(--border-subtle);
    max-height: 280px;
  }
}

/* ── Inline rating block (replaces the popup modal) ─────────────── */
.fb-lc-rating-inline {
  background: linear-gradient(135deg, rgba(255,184,0,0.08) 0%, rgba(255,184,0,0.02) 100%);
  border: 1px solid rgba(255,184,0,0.22);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 10px 0;
  text-align: center;
}
.fb-lc-rating-inline-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.fb-lc-rating-inline-desc {
  font-size: 12px;
  color: rgba(232,236,242,0.60);
  margin-bottom: 10px;
}
.fb-lc-rating-inline-stars {
  display: inline-flex;
  gap: 4px;
  direction: ltr;
}
.fb-lc-star-btn {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: rgba(255,255,255,0.18);
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.12s ease, transform 0.12s ease;
}
.fb-lc-star-btn:hover { transform: scale(1.10); color: rgba(255,184,0,0.55); }
.fb-lc-star-btn.fb-lc-star-on { color: #FFB800; }
.fb-lc-star-btn:disabled { cursor: default; }
.fb-lc-star-inline {
  font-size: 22px;
  line-height: 1;
  color: rgba(255,255,255,0.18);
  margin: 0 1px;
}
.fb-lc-star-inline.fb-lc-star-on { color: #FFB800; }
.fb-lc-rating-done { padding-top: 10px; padding-bottom: 12px; }
.fb-lc-rating-inline-thanks {
  font-size: 13px;
  font-weight: 700;
  color: #22c55e;
  margin-bottom: 6px;
}

/* ── Home screen layout (choose + history + nudge banner) ─────── */
.fb-lc-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(255,184,0,0.16), rgba(255,184,0,0.06));
  border: 1px solid rgba(255,184,0,0.45);
  border-radius: 12px;
  cursor: pointer;
  text-align: start;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  width: 100%;
  transition: transform 160ms, box-shadow 160ms;
  position: relative;
}
.fb-lc-nudge::after {
  content: "";
  position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF3B5C; box-shadow: 0 0 0 0 rgba(255,59,92,0.5);
  animation: fb-lc-nudge-pulse 1.4s ease-out infinite;
}
@keyframes fb-lc-nudge-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,59,92,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(255,59,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); }
}
.fb-lc-nudge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255,184,0,0.25);
}
.fb-lc-nudge-icon { font-size: 28px; flex-shrink: 0; }
.fb-lc-nudge-text { min-width: 0; flex: 1; }
.fb-lc-nudge-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; color: #FFB800; }
.fb-lc-nudge-desc  { font-size: 12.5px; color: #C5C9D4; }

.fb-lc-home-choose { margin-bottom: 16px; }
.fb-lc-home-choose-grid {
  display: flex; flex-direction: column; gap: 10px;
}
.fb-lc-home-history { display: flex; flex-direction: column; gap: 6px; }

/* ── Home hero (rebuilt 2026-05-26 — clean, scannable, no blob) ── */
.fb-lc-hero {
  padding: 20px 18px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #13182A;
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fb-lc-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,184,0,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.fb-lc-hero-icon svg {
  width: 26px;
  height: 26px;
  color: #FFB800;
  display: block;
}
.fb-lc-hero-title {
  font-size: 17px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  line-height: 1.3;
}
.fb-lc-hero-desc {
  font-size: 13px;
  color: #B8BFD0;
  max-width: 280px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.fb-lc-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 22px;
  background: linear-gradient(135deg, #FFB800 0%, #FF8A00 100%);
  color: #0A0E1A;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,184,0,0.25);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.fb-lc-hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255,184,0,0.38);
}
.fb-lc-hero-cta:active { transform: translateY(0); }
.fb-lc-hero-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fb-lc-hero-cta-icon svg {
  width: 16px;
  height: 16px;
}
/* RTL: flip the right-arrow so it points to the start. */
[dir="rtl"] .fb-lc-hero-cta-icon svg { transform: scaleX(-1); }

.fb-lc-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 11.5px;
  color: #8A92A6;
}
.fb-lc-hero-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: fb-lc-hero-dot-pulse 1.8s ease-out infinite;
}
@keyframes fb-lc-hero-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0); }
}
.fb-lc-nudge-icon svg { width: 26px; height: 26px; color: #FFB800; }