/* File: assets/chat.css */

/* ===== Fully configurable Chat UI via CSS variables ===== */
:root{
  --eaai-accent: #E20074;

  --eaai-launcher-bg: #E20074;
  --eaai-launcher-icon: #FFFFFF;

  --eaai-panel-bg: #FFFFFF;
  --eaai-header-bg: #FFFFFF;
  --eaai-text: #0F172A;
  --eaai-border-color: #E5E7EB;

  --eaai-bot-bg: #F8FAFC;
  --eaai-user-bg: #FCE7F3;
  --eaai-bot-text: #0F172A;
  --eaai-user-text: #0F172A;

  --eaai-font-size: 14px;
  --eaai-launcher-size: 56px;
  --eaai-panel-width: 360px;
  --eaai-panel-height: 600px;

  --eaai-radius: 18px;
  --eaai-shadow: 0 16px 40px rgba(0,0,0,.18);
}

/* Launcher bubble bottom right */
#ea-ai-chatbot-root .eaai-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: var(--eaai-launcher-size);
  height: var(--eaai-launcher-size);
  border-radius: 999px;
  background: var(--eaai-launcher-bg, var(--eaai-accent));
  color: var(--eaai-launcher-icon, #fff);
  border: 0;
  box-shadow: var(--eaai-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999999;
}

#ea-ai-chatbot-root .eaai-launcher svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* pulse */
#ea-ai-chatbot-root .eaai-launcher::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(226,0,116,.25);
  animation: eaaiPulse 2.2s infinite;
}
@keyframes eaaiPulse{
  0%{ transform: scale(.95); opacity:.9; }
  70%{ transform: scale(1.12); opacity:0; }
  100%{ transform: scale(1.12); opacity:0; }
}

/* Panel container */
#ea-ai-chatbot-root .eaai-panel{
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: var(--eaai-panel-width);
  max-width: calc(100vw - 36px);

  height: min(var(--eaai-panel-height), calc(100vh - 120px));
  min-height: 420px;

  background: var(--eaai-panel-bg);
  border: 1px solid var(--eaai-border-color);
  border-radius: var(--eaai-radius);
  box-shadow: var(--eaai-shadow);
  overflow: hidden;
  z-index: 999999;
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

#ea-ai-chatbot-root .eaai-panel.is-open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Header */
#ea-ai-chatbot-root .eaai-header{
  background: var(--eaai-header-bg);
  border-bottom: 1px solid var(--eaai-border-color);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px 12px 14px;
}
#ea-ai-chatbot-root .eaai-header h4{
  margin:0;
  font-size: 14px;
  color: var(--eaai-text);
  font-weight: 700;
  letter-spacing:.2px;
}
#ea-ai-chatbot-root .eaai-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--eaai-border-color);
  background: #fff;
  cursor:pointer;
  color: var(--eaai-text);
}

/* Header Back Button */
#ea-ai-chatbot-root .eaai-header-left{
  display:flex;
  align-items:center;
  gap: 8px;
}
#ea-ai-chatbot-root .eaai-back{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--eaai-border-color);
  background: #fff;
  cursor: pointer;
  color: var(--eaai-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Body */
#ea-ai-chatbot-root .eaai-body{
  height: calc(100% - 58px);
  overflow:auto;
  padding: 14px 14px 60px; /* mehr bottom */
  background: var(--eaai-panel-bg);
  color: var(--eaai-text);
  will-change: transform, opacity;
}

/* Slide Effect */
#ea-ai-chatbot-root .eaai-body.eaai-slide-in-left{
  animation: eaaiSlideInLeft .18s ease both;
}
#ea-ai-chatbot-root .eaai-body.eaai-slide-in-right{
  animation: eaaiSlideInRight .18s ease both;
}
@keyframes eaaiSlideInLeft{
  from{ transform: translateX(14px); opacity: 0; }
  to  { transform: translateX(0); opacity: 1; }
}
@keyframes eaaiSlideInRight{
  from{ transform: translateX(-14px); opacity: 0; }
  to  { transform: translateX(0); opacity: 1; }
}

/* Messages */
#ea-ai-chatbot-root .eaai-msg{
  display:flex;
  margin: 10px 0;
}
#ea-ai-chatbot-root .eaai-msg.user{ justify-content:flex-end; }

#ea-ai-chatbot-root .eaai-bubble{
  max-width: 84%;
  border-radius: 16px;
  padding: 10px 12px;
  font-size: var(--eaai-font-size);
  line-height: 1.35;
  border: 1px solid var(--eaai-border-color);
  background: var(--eaai-bot-bg);
  color: var(--eaai-bot-text);
}

#ea-ai-chatbot-root .eaai-msg.user .eaai-bubble{
  background: var(--eaai-user-bg);
  color: var(--eaai-user-text);
  border-color: var(--eaai-border-color);
}

/* Actions stacked */
#ea-ai-chatbot-root .eaai-actions{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 18px;
}

#ea-ai-chatbot-root .eaai-chip{
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 14px;
  padding: 12px 12px;
  font-size: var(--eaai-font-size);
  cursor: pointer;
  color: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
  transition: transform .08s ease, filter .12s ease;
}
#ea-ai-chatbot-root .eaai-chip:hover{ filter: brightness(.98); }
#ea-ai-chatbot-root .eaai-chip:active{ transform: translateY(1px); }

/* Contact form */
#ea-ai-chatbot-root .eaai-form{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
#ea-ai-chatbot-root .eaai-input{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--eaai-border-color);
  outline: none;
  font-size: var(--eaai-font-size);
  background:#fff;
  color: var(--eaai-text);
}
#ea-ai-chatbot-root .eaai-btn{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 0;
  background: var(--eaai-accent);
  color:#fff;
  cursor:pointer;
  font-weight:700;
}
#ea-ai-chatbot-root .eaai-small{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(15,23,42,.75);
}

/* Info blocks */
#ea-ai-chatbot-root .eaai-info-title{
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--eaai-text);
}
#ea-ai-chatbot-root .eaai-info-text{
  white-space: normal;
  color: var(--eaai-text);
}
#ea-ai-chatbot-root .eaai-info-list{
  margin: 8px 0 0;
  padding-left: 18px;
}
#ea-ai-chatbot-root .eaai-link{
  color: var(--eaai-accent);
  text-decoration: none;
  font-weight: 700;
}

/* Typing dots */
#ea-ai-chatbot-root .eaai-typing{
  display:inline-flex;
  align-items:center;
  gap: 6px;
}
#ea-ai-chatbot-root .eaai-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.55);
  animation: eaaiDots 1s infinite;
}
#ea-ai-chatbot-root .eaai-dot:nth-child(2){ animation-delay: .15s; }
#ea-ai-chatbot-root .eaai-dot:nth-child(3){ animation-delay: .3s; }
@keyframes eaaiDots{
  0%, 80%, 100%{ transform: translateY(0); opacity:.4; }
  40%{ transform: translateY(-4px); opacity:1; }
}

/* Week nav */
#ea-ai-chatbot-root .eaai-week-nav{
  display:flex;
  gap: 8px;
  margin: 0 0 10px;
}
#ea-ai-chatbot-root .eaai-week-btn{
  border: 1px solid var(--eaai-border-color);
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px;
  cursor:pointer;
  font-weight: 700;
  color: var(--eaai-text);
}
#ea-ai-chatbot-root .eaai-week-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}

/* ===== Launcher Typing Intro ===== */
#ea-ai-chatbot-root .eaai-launcher-typing {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: var(--eaai-launcher-size);
  height: var(--eaai-launcher-size);
  border-radius: 999px;
  background: var(--eaai-launcher-bg, var(--eaai-accent));
  box-shadow: var(--eaai-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .3s ease, transform .3s ease;
  color: var(--eaai-launcher-icon, #fff);
}
#ea-ai-chatbot-root .eaai-launcher-typing.is-visible {
  opacity: 1;
  transform: scale(1);
}
#ea-ai-chatbot-root .eaai-launcher-typing .eaai-dot {
  background: currentColor;
}
#ea-ai-chatbot-root .eaai-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--eaai-border-color);
  border-radius:12px;
  background:#fff;
  font-size: 13px;
  color: var(--eaai-text);
}

#ea-ai-chatbot-root .eaai-consent input[type="checkbox"]{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--eaai-accent);
}

#ea-ai-chatbot-root .eaai-consent-text{
  line-height: 1.3;
}