/* =============================================================================
   CRM+ AI — Floating Chat Assistant
   Self-contained: nothing here leaks into the rest of the page.
   ========================================================================== */

.crm-chat-panel {
  /* Brand tokens, scoped to the panel */
  --crm-lime: #D4FB0A;
  --crm-lime-soft: #E2FF38;
  --crm-ink: #06090E;

  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-ping, 'Alexandria', sans-serif);

  /* A full-height vertical column pinned to the edge of the viewport.
     The launcher is pinned with the physical `left-5`, so the panel matches it
     physically — a logical inset-inline-start would flip to the opposite edge
     in this RTL document.

     Only `.crm-chat-body` scrolls: the header and the composer are flex items
     with `flex: 0 0 auto`, so they stay put while the log moves under them. */
  top: 0;
  bottom: 0;
  left: 0;
  width: min(26rem, 100vw);
  height: 100vh;
  height: 100dvh;
  border-radius: 0;

  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.crm-chat-panel.is-open {
  opacity: 1;
  transform: translateX(0);
}

.crm-chat-panel[hidden] { display: none; }

/* The page behind a full-height panel must not scroll along with it. */
body.crm-chat-open { overflow: hidden; }

/* iOS keeps dvh at full height while the on-screen keyboard covers the bottom
   of the screen, so the composer disappears under it and Safari pans the page
   to compensate — which looks like the whole view zooming. chat-widget.js
   measures visualViewport and adds this class with the real numbers. */
.crm-chat-panel.crm-chat--kb {
  top: var(--crm-chat-top, 0px);
  bottom: auto;
  height: var(--crm-chat-vh, 100dvh);
}

/* --- Dark skin ----------------------------------------------------------- */
.crm-chat--dark {
  color: #F1F5F9;
  background:
    radial-gradient(120% 80% at 50% 105%, rgba(96, 74, 200, 0.38) 0%, transparent 62%),
    radial-gradient(100% 60% at 50% 100%, rgba(212, 251, 10, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #04060A 0%, #080B12 45%, #0B0A1A 100%);
  border: 1px solid rgba(212, 251, 10, 0.22);
  box-shadow:
    0 32px 80px -24px rgba(0, 0, 0, 0.85),
    0 0 60px -30px rgba(212, 251, 10, 0.35);
}

/* --- Light skin ---------------------------------------------------------- */
.crm-chat--light {
  color: #0F172A;
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(148, 163, 255, 0.45) 0%, transparent 60%),
    radial-gradient(90% 55% at 50% 0%, rgba(212, 251, 10, 0.40) 0%, transparent 58%),
    linear-gradient(180deg, #FBFFE8 0%, #FDF4F6 48%, #F1F2FF 100%);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 32px 80px -28px rgba(15, 23, 42, 0.35);
}

/* --- Header -------------------------------------------------------------- */
.crm-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  flex: 0 0 auto;
}

.crm-chat--dark .crm-chat-head {
  background: rgba(4, 6, 10, 0.72);
  border-block-end: 1px solid rgba(255, 255, 255, 0.07);
}

.crm-chat--light .crm-chat-head {
  background: rgba(255, 255, 255, 0.75);
  border-block-end: 1px solid rgba(15, 23, 42, 0.07);
}

.crm-chat-head { backdrop-filter: blur(12px); }

.crm-chat-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.crm-chat-avatar {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: var(--crm-lime);
  flex: 0 0 auto;
}

.crm-chat-avatar img { width: 1.125rem; height: 1.125rem; }

.crm-chat-title {
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.crm-chat-head-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.crm-chat-icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.crm-chat-icon-btn i,
.crm-chat-icon-btn svg { width: 1.0625rem; height: 1.0625rem; }

.crm-chat--dark .crm-chat-icon-btn { border: 1px solid rgba(255, 255, 255, 0.14); color: #E2E8F0; }
.crm-chat--dark .crm-chat-icon-btn:hover { background: rgba(255, 255, 255, 0.09); }
.crm-chat--light .crm-chat-icon-btn { border: 1px solid rgba(15, 23, 42, 0.14); color: #1E293B; }
.crm-chat--light .crm-chat-icon-btn:hover { background: rgba(15, 23, 42, 0.06); }

.crm-chat-reset {
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.crm-chat--dark .crm-chat-reset { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #F1F5F9; }
.crm-chat--dark .crm-chat-reset:hover { background: var(--crm-lime); border-color: var(--crm-lime); color: #06090E; }
.crm-chat--light .crm-chat-reset { border: 1px solid rgba(15, 23, 42, 0.16); background: rgba(255, 255, 255, 0.7); color: #0F172A; }
.crm-chat--light .crm-chat-reset:hover { background: var(--crm-lime); border-color: var(--crm-lime); color: #06090E; }

/* --- Body ---------------------------------------------------------------- */
.crm-chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

/* The lime bar ran the full height of a panel that is obviously scrollable
   anyway, so it read as a design element rather than a control. Hidden in all
   three engines — the scrolling itself is untouched. */
.crm-chat-body {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}

.crm-chat-body::-webkit-scrollbar { width: 0; height: 0; }

/* --- Welcome state ------------------------------------------------------- */
.crm-chat-welcome {
  margin: auto 0;
  text-align: center;
  padding: 1rem 0.25rem;
}

.crm-chat-welcome.is-hidden { display: none; }

.crm-chat-welcome-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.375rem;
}

.crm-chat--dark .crm-chat-welcome-title span { color: var(--crm-lime); }
.crm-chat--light .crm-chat-welcome-title span { color: var(--crm-ink); }

.crm-chat-welcome-sub {
  font-size: 0.875rem;
  margin: 0 0 1.75rem;
  opacity: 0.75;
}

.crm-chat-sugg-label {
  font-size: 0.6875rem;
  font-weight: 700;
  margin: 0 0 0.625rem;
  opacity: 0.55;
}

.crm-chat-sugg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.crm-chat-sugg--inline {
  align-items: flex-start;
  margin: 0.5rem 0 0.25rem;
}

.crm-chat-chip {
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  text-align: center;
  transition: transform 0.15s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.crm-chat-chip:hover { transform: translateY(-1px); }

.crm-chat--dark .crm-chat-chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #E2E8F0;
}
.crm-chat--dark .crm-chat-chip:hover { border-color: var(--crm-lime); color: var(--crm-lime); }

.crm-chat--light .crm-chat-chip {
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.09);
  color: #0F172A;
  box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.2);
}
.crm-chat--light .crm-chat-chip:hover { border-color: var(--crm-ink); }

/* --- Messages ------------------------------------------------------------ */
.crm-chat-log { display: flex; flex-direction: column; }

.crm-chat-msg {
  display: flex;
  flex-direction: column;
  margin-block-end: 0.75rem;
  max-width: 88%;
}

/* Matches the convention already used by the hero chat simulator:
   incoming sits at the reading start, the visitor's own messages opposite. */
.crm-chat-msg--bot { align-self: flex-start; align-items: flex-start; }
.crm-chat-msg--user { align-self: flex-end; align-items: flex-end; }

.crm-chat-bubble {
  padding: 0.75rem 0.9375rem;
  border-radius: 1.125rem;
  font-size: 0.8125rem;
  line-height: 1.85;
  word-break: break-word;
}

.crm-chat-bubble strong { font-weight: 800; }

.crm-chat-msg--user .crm-chat-bubble {
  border-start-end-radius: 0.375rem;
  background: var(--crm-lime);
  color: #06090E;
  font-weight: 600;
}

.crm-chat--dark .crm-chat-msg--bot .crm-chat-bubble {
  border-start-start-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #E8EDF4;
}

.crm-chat--light .crm-chat-msg--bot .crm-chat-bubble {
  border-start-start-radius: 0.375rem;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #1E293B;
  box-shadow: 0 2px 12px -6px rgba(15, 23, 42, 0.25);
}

/* --- Action buttons under a reply ---------------------------------------- */
.crm-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-block-start: 0.5rem;
  justify-content: flex-start;
}

.crm-chat-action {
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
  background: var(--crm-lime);
  color: #06090E;
  transition: background-color 0.18s ease, transform 0.15s ease;
}

.crm-chat-action:hover { background: var(--crm-lime-soft); transform: translateY(-1px); }

/* Buttons that drive a control on the page (currency / billing) read as
   secondary next to the primary lime call-to-action links. */
.crm-chat-action--control {
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
  font-family: inherit;
}

/* Dark keeps the neon accent; light uses ink — green-on-pale read as washed out. */
.crm-chat--dark .crm-chat-action--control { color: var(--crm-lime); }
.crm-chat--light .crm-chat-action--control { color: var(--crm-ink); }

.crm-chat--dark .crm-chat-action--control:hover {
  background: var(--crm-lime);
  border-color: var(--crm-lime);
  color: var(--crm-ink);
}

/* Filling with ink keeps this button distinct from the lime primary action,
   which would otherwise look identical on hover in light mode. */
.crm-chat--light .crm-chat-action--control:hover {
  background: var(--crm-ink);
  border-color: var(--crm-ink);
  color: #FFFFFF;
}

.crm-chat-action--control.is-working {
  opacity: 0.55;
  pointer-events: none;
}

.crm-chat-action--control.is-working::after {
  content: '…';
  margin-inline-start: 0.25rem;
}

/* --- Typing indicator ---------------------------------------------------- */
.crm-chat-typing { display: flex; gap: 0.25rem; align-items: center; }

.crm-chat-typing span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
  animation: crmChatDot 1.1s infinite ease-in-out;
}

.crm-chat-typing span:nth-child(2) { animation-delay: 0.16s; }
.crm-chat-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes crmChatDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-0.25rem); opacity: 1; }
}

/* --- Footer -------------------------------------------------------------- */
.crm-chat-foot {
  flex: 0 0 auto;
  padding: 0.625rem 0.875rem 0.875rem;
}

.crm-chat--dark .crm-chat-foot { background: rgba(4, 6, 10, 0.6); border-block-start: 1px solid rgba(255, 255, 255, 0.07); }
.crm-chat--light .crm-chat-foot { background: rgba(255, 255, 255, 0.6); border-block-start: 1px solid rgba(15, 23, 42, 0.07); }
.crm-chat-foot { backdrop-filter: blur(12px); }

.crm-chat-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0.55;
  margin: 0 0 0.625rem;
}

.crm-chat-powered img { width: 0.875rem; height: 0.875rem; }

.crm-chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.375rem 0.375rem 0.375rem;
  border-radius: 999px;
}

.crm-chat--dark .crm-chat-input-row { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); }
.crm-chat--light .crm-chat-input-row { background: #FFFFFF; border: 1px solid rgba(15, 23, 42, 0.10); }

.crm-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  padding: 0.5rem 0.75rem;
  color: inherit;
}

.crm-chat-input::placeholder { opacity: 0.5; color: inherit; }

/* Safari on iOS zooms the whole page in when a focused field's text is under
   16px, and never zooms back out. 13px reads better on desktop, so the bump
   is scoped to touch pointers — where the field is wider anyway. */
@media (pointer: coarse) {
  .crm-chat-input { font-size: 1rem; }
}

.crm-chat-send {
  flex: 0 0 auto;
  padding: 0.5625rem 1.125rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 800;
  cursor: pointer;
  background: var(--crm-lime);
  color: #06090E;
  border: 0;
  transition: background-color 0.18s ease, opacity 0.18s ease;
}

.crm-chat-send:hover:not(:disabled) { background: var(--crm-lime-soft); }
.crm-chat-send:disabled { opacity: 0.5; cursor: default; }

/* --- Focus visibility ---------------------------------------------------- */
.crm-chat-panel :focus-visible {
  outline: 2px solid var(--crm-lime);
  outline-offset: 2px;
}

/* An outline traces the element's own border-radius, and the text field has
   none — the pill shape lives on the row around it — so the default ring came
   out as a hard rectangle inside a rounded field. Move the ring to the row, the
   thing the user actually reads as "the field", and it follows the pill. */
.crm-chat-input-row:has(.crm-chat-input:focus-visible) {
  outline: 2px solid var(--crm-lime);
  outline-offset: 2px;
}

.crm-chat-panel .crm-chat-input:focus-visible { outline: none; }

/* Fallback for engines without :has() — a matching radius on the field itself
   keeps its own ring rounded rather than square. */
@supports not selector(:has(*)) {
  .crm-chat-panel .crm-chat-input:focus-visible {
    outline: 2px solid var(--crm-lime);
    border-radius: 999px;
  }
}

.crm-chat-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Desktop: soften the trailing edge so it reads as a panel ------------- */
@media (min-width: 641px) {
  .crm-chat-panel {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
  }
}

/* --- Mobile: edge to edge, like the reference ---------------------------- */
@media (max-width: 640px) {
  .crm-chat-panel {
    width: 100%;
    border: 0;
    border-radius: 0;
  }

  .crm-chat-welcome-title { font-size: 1.375rem; }
}

/* --- Respect reduced-motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .crm-chat-panel,
  .crm-chat-chip,
  .crm-chat-action { transition: none; }
  .crm-chat-typing span { animation: none; opacity: 0.6; }
}