/* ============================================================
   MLX Media – ChatBot Widget Styles  v3.1
   Matches site design: Bebas Neue + DM Sans, orange dark / teal light.
   Clean additions over v2: header shimmer, bot accent line, badge,
   quick-reply entrance animation, char counter, theme-aware rings.
   ============================================================ */

/* ── CSS variable bridge ── */
#mlx-chat-root {
  --cb-accent:       var(--accent,       #FF8A00);
  --cb-accent-soft:  var(--accent-soft,  rgba(255,138,0,0.12));
  --cb-accent-glow:  var(--accent-glow,  rgba(255,138,0,0.28));
  --cb-bg:           var(--bg-surface,   #111111);
  --cb-bg-card:      var(--bg-card,      #161616);
  --cb-text:         var(--text,         #e8e4de);
  --cb-text-dim:     var(--text-dim,     #8a8580);
  --cb-border:       var(--border,       rgba(255,255,255,0.07));
  --cb-font-display: var(--font-display, 'Bebas Neue', sans-serif);
  --cb-font-body:    var(--font-body,    'DM Sans', sans-serif);
  --cb-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--cb-font-body);
}

/* ── Toggle button ── */
#chat-toggle {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 58px; height: 58px;
  border-radius: 50%; border: none;
  background: var(--cb-accent);
  color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10000;
  box-shadow: 0 0 0 0 var(--cb-accent-glow), 0 4px 20px rgba(0,0,0,0.35);
  transition: transform 0.3s var(--cb-ease), box-shadow 0.3s var(--cb-ease), background 0.4s;
}
#chat-toggle:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 0 0 8px var(--cb-accent-glow), 0 8px 28px rgba(0,0,0,0.4);
}
#chat-toggle.is-open { transform: rotate(90deg) scale(1.05); }

#chat-toggle::before {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--cb-accent);
  opacity: 0; animation: mlx-ring-pulse 2.8s ease-out infinite;
}
@keyframes mlx-ring-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.55); opacity: 0;   }
  100% { transform: scale(1.55); opacity: 0;   }
}
#chat-toggle.is-open::before { animation: none; opacity: 0; }

/* ── Unread badge ── */
#cb-unread-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 19px; height: 19px; border-radius: 10px;
  background: #e83018; color: #fff;
  font-size: 10.5px; font-weight: 700;
  font-family: var(--cb-font-body);
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid var(--cb-bg, #111);
  line-height: 1; pointer-events: none;
  animation: badge-pop 0.32s var(--cb-ease);
  z-index: 10001;
}
#cb-unread-badge.hidden { display: none; }
@keyframes badge-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Main container ── */
#botpress-container {
  position: fixed;
  bottom: 96px; right: 24px;
  width: 360px; height: 520px;
  border-radius: 20px;
  border: 1px solid var(--cb-border);
  background: var(--cb-bg);
  box-shadow: 0 12px 48px rgba(0,0,0,0.48), 0 0 0 1px var(--cb-border);
  display: none; flex-direction: column;
  overflow: hidden; z-index: 9999;
  transform-origin: bottom right;
}
#botpress-container.opening { animation: cb-open  0.38s var(--cb-ease) forwards; }
#botpress-container.closing { animation: cb-close 0.28s var(--cb-ease) forwards; }
@keyframes cb-open  {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
@keyframes cb-close {
  from { opacity: 1; transform: scale(1)    translateY(0);    }
  to   { opacity: 0; transform: scale(0.88) translateY(16px); }
}

/* ── Header ── */
.cb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  background: linear-gradient(
    120deg,
    var(--cb-accent) 0%,
    color-mix(in srgb, var(--cb-accent) 68%, #fff) 100%
  );
  flex-shrink: 0; position: relative; overflow: hidden;
}
/* Subtle shimmer sweep */
.cb-header::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    105deg, transparent 30%,
    rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.10) 52%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: cb-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cb-shimmer {
  0%   { transform: translateX(-100%); }
  25%  { transform: translateX(100%);  }
  100% { transform: translateX(100%);  }
}

.cb-header-left { display: flex; align-items: center; gap: 10px; position: relative; }
.cb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.18); border: 1.5px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.cb-header-text { line-height: 1.2; }
.cb-header-name {
  font-family: var(--cb-font-display);
  font-size: 1.05rem; letter-spacing: 0.08em; color: #fff;
}
.cb-header-status {
  font-size: 0.72rem; color: rgba(255,255,255,0.82);
  display: flex; align-items: center; gap: 5px;
}
.cb-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4fffca; box-shadow: 0 0 6px #4fffca;
  animation: dot-blink 2s ease-in-out infinite;
}
@keyframes dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.cb-close-btn {
  background: rgba(0,0,0,0.2); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; position: relative;
}
.cb-close-btn:hover { background: rgba(0,0,0,0.35); }

/* ── Info bar ── */
.chat-info {
  background: var(--cb-accent-soft); padding: 7px 14px;
  font-size: 0.77rem; color: var(--cb-text-dim);
  border-bottom: 1px solid var(--cb-border);
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.chat-info button#info-toggle {
  background: none; border: none; color: var(--cb-accent);
  font-size: 0.77rem; font-weight: 600; cursor: pointer;
  padding: 0; margin-left: 2px;
  font-family: var(--cb-font-body); transition: opacity 0.2s;
}
.chat-info button#info-toggle:hover { opacity: 0.75; }

.chat-details {
  display: none; font-size: 0.76rem; padding: 10px 14px;
  color: var(--cb-text-dim); line-height: 1.55;
  background: var(--cb-bg-card); border-bottom: 1px solid var(--cb-border);
  flex-shrink: 0;
}
.chat-details p { margin: 3px 0; }
.chat-details p::before { content: '· '; color: var(--cb-accent); }

/* ── Chat area ── */
#chat-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
#chat-log {
  flex: 1; padding: 14px 12px 8px; overflow-y: auto;
  font-size: 13.5px; scrollbar-width: thin;
  scrollbar-color: var(--cb-border) transparent; min-height: 0;
}
#chat-log::-webkit-scrollbar { width: 4px; }
#chat-log::-webkit-scrollbar-thumb { background: var(--cb-border); border-radius: 10px; }

/* ── Messages ── */
.msg {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 7px 0; animation: msg-in 0.32s var(--cb-ease);
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.msg .icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; margin-top: 2px;
}
.msg.user { flex-direction: row-reverse; }
.msg.user .icon { background: var(--cb-border);      color: var(--cb-text-dim); }
.msg.bot  .icon { background: var(--cb-accent-soft); color: var(--cb-accent);   }

.msg .text {
  max-width: 78%; padding: 9px 13px; border-radius: 14px;
  line-height: 1.5; font-size: 13.5px;
}
.msg.user .text {
  background: var(--cb-accent); color: #fff;
  border-bottom-right-radius: 4px;
}
.msg.bot .text {
  background: var(--cb-bg-card); color: var(--cb-text);
  border: 1px solid var(--cb-border);
  border-left: 2px solid var(--cb-accent); /* accent line */
  border-bottom-left-radius: 4px;
}
.msg.bot .text a { color: var(--cb-accent); text-decoration: underline; text-underline-offset: 2px; }

/* Typing indicator */
.msg.typing .text { display: flex; gap: 4px; align-items: center; padding: 13px 16px; }
.msg.typing .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cb-text-dim);
  animation: typing-bounce 1.1s ease-in-out infinite;
}
.msg.typing .dot:nth-child(2) { animation-delay: 0.18s; }
.msg.typing .dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%            { transform: translateY(-6px); opacity: 1;   }
}

/* ── Input row ── */
.cb-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--cb-border);
  background: var(--cb-bg); flex-shrink: 0;
  transition: border-top-color 0.2s;
}
.cb-input-row:focus-within { border-top-color: var(--cb-accent); }

#chat-input {
  flex: 1; border: 1px solid var(--cb-border); border-radius: 10px;
  padding: 9px 13px; font-size: 13.5px; font-family: var(--cb-font-body);
  background: var(--cb-bg-card); color: var(--cb-text); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s; resize: none;
}
#chat-input::placeholder { color: var(--cb-text-dim); }
#chat-input:focus {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px var(--cb-accent-glow);
}

/* ── Character counter ── */
#cb-char-count {
  font-size: 0.63rem; color: var(--cb-text-dim);
  white-space: nowrap; flex-shrink: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.2s, color 0.2s;
}
#cb-char-count.visible  { opacity: 1; }
#cb-char-count.near-max { color: #f59e0b; }
#cb-char-count.at-max   { color: #e8301a; font-weight: 600; }

.cb-send-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--cb-accent); color: #fff; font-size: 15px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.2s, box-shadow 0.2s;
}
.cb-send-btn:hover { transform: scale(1.1); box-shadow: 0 4px 14px var(--cb-accent-glow); }
.cb-send-btn:active { transform: scale(0.95); }

/* ── Quick replies ── */
.cb-quick-wrap {
  padding: 0 12px 10px;
  display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0;
}
.cb-quick {
  font-size: 0.73rem; padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--cb-border);
  background: var(--cb-bg-card); color: var(--cb-text-dim);
  cursor: pointer; font-family: var(--cb-font-body); white-space: nowrap;
  opacity: 0; animation: quick-in 0.35s var(--cb-ease) forwards;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s;
}
.cb-quick:nth-child(1) { animation-delay: 0.10s; }
.cb-quick:nth-child(2) { animation-delay: 0.17s; }
.cb-quick:nth-child(3) { animation-delay: 0.24s; }
.cb-quick:nth-child(4) { animation-delay: 0.31s; }
.cb-quick:nth-child(5) { animation-delay: 0.38s; }
.cb-quick:nth-child(6) { animation-delay: 0.45s; }
@keyframes quick-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cb-quick:hover {
  border-color: var(--cb-accent); color: var(--cb-accent);
  background: var(--cb-accent-soft); transform: translateY(-1px);
}

/* ── Mobile ── */
@media (max-width: 600px) {
  #botpress-container {
    bottom: 0; right: 0; left: 0;
    width: 100%; height: 100dvh;
    border-radius: 0; border: none;
  }
  #chat-toggle { bottom: 16px; right: 16px; width: 52px; height: 52px; font-size: 20px; }
}

/* ── AI action buttons inside messages ── */
.mlx-ai-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 4px 0 0; padding: 5px 13px; border-radius: 999px;
  border: 1.5px solid var(--cb-accent);
  background: var(--cb-accent-soft); color: var(--cb-accent);
  font-size: 12.5px; font-weight: 600;
  font-family: var(--cb-font-body);
  cursor: pointer; text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s, color 0.2s;
}
.mlx-ai-btn:hover {
  background: var(--cb-accent); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--cb-accent-glow);
}
.mlx-ai-btn:active { transform: translateY(0); }
.mlx-ai-btn .mlx-icon { font-size: 1.05em; }

/* ── Highlight rings ── */
/* mlx_highlight.js injects its own ring CSS using CSS variables.
   These rules act as a reinforcement / theme fallback. */
#mlx-nav-ring, #mlx-section-ring {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  opacity: 0; visibility: hidden; border-radius: 18px;
  pointer-events: none; z-index: 9998;
  box-shadow:
    0 0 5px  var(--accent-glow, rgba(255,138,0,0.65)),
    0 0 14px var(--accent-glow, rgba(255,138,0,0.40)),
    0 0 28px var(--accent-glow, rgba(255,138,0,0.20)),
    inset 0 0 10px var(--accent-soft, rgba(255,138,0,0.15));
  transition:
    width  200ms cubic-bezier(.2,.9,.2,1),
    height 200ms cubic-bezier(.2,.9,.2,1),
    border-radius 200ms ease,
    opacity 2.5s ease-out;
  box-sizing: border-box;
}
#mlx-nav-ring     { border: 3px solid var(--accent, #FF8A00); }
#mlx-section-ring { border: 4px solid var(--accent, #FF8A00); }

#mlx-nav-ring.is-visible,
#mlx-section-ring.is-visible { opacity: 1; visibility: visible; }
#mlx-nav-ring.is-fading,
#mlx-section-ring.is-fading  { opacity: 0; visibility: visible; pointer-events: none; }

section[id], footer, #footer, [data-scroll-target] { scroll-margin-top: 80px; }

#mlx-nav-ring::after {
  content: "▲"; position: absolute; display: block;
  left: 50%; bottom: -60px;
  transform: translateX(-50%) scale(1.8);
  color: var(--accent, #FF8A00); font-size: 1.4em;
  opacity: 0; pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: opacity 0.5s ease;
  animation: navArrowBob 1.4s ease-in-out infinite;
}
#mlx-section-ring::after {
  content: "▼"; position: absolute; display: block;
  left: 50%; top: -100px;
  transform: translateX(-50%) scale(2.8);
  color: var(--accent, #FF8A00); font-size: 1.4em;
  opacity: 0; pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: opacity 0.5s ease;
  animation: sectionArrowBob 1.4s ease-in-out infinite;
}
#mlx-nav-ring.is-visible::after,
#mlx-section-ring.is-visible::after { opacity: 1; }
#mlx-nav-ring.is-fading::after,
#mlx-section-ring.is-fading::after  { opacity: 0; transition: opacity 2.5s ease-out; }

@keyframes navArrowBob {
  0%, 100% { transform: translateX(-50%) translateY(0)    scale(1.8); }
  50%       { transform: translateX(-50%) translateY(-16px) scale(1.8); }
}
@keyframes sectionArrowBob {
  0%, 100% { transform: translateX(-50%) translateY(0)   scale(2.8); }
  50%       { transform: translateX(-50%) translateY(32px) scale(2.8); }
}