/* ============================================================
   Ec Chat Widget  —  public/widget.css
   All rules scoped to .ec-widget or .ec-fab.
   !important used throughout to prevent Elementor/theme bleed.
   ============================================================ */

/* ── CSS variables (set on the widget root; overridden by JS) ── */
.ec-widget,
.ec-fab {
  --ecw-accent: #d2fc52;
  --ecw-ink:    #0a0a0a;
  --ecw-bg:     #f5f5f0;
  --ecw-panel:  #ffffff;
  --ecw-muted:  rgba(255,255,255,0.6);
  --ecw-radius: 20px;
  --ecw-pill:   999px;
  --ecw-shadow: 0 24px 80px -16px rgba(0,0,0,0.45);
  --ecw-body-font: 'DM Sans', system-ui, sans-serif;
  --ecw-brand-font: 'Inter', system-ui, sans-serif;
}

/* ── FAB launcher ──────────────────────────────────────────── */
.ec-fab {
  position:        fixed !important;
  bottom:          24px !important;
  right:           24px !important;
  z-index:         99998 !important;
  width:           60px !important;
  height:          60px !important;
  border-radius:   50% !important;
  background:      var(--ecw-fab-bg, var(--ecw-ink)) !important;
  color:           var(--ecw-fab-icon, var(--ecw-accent)) !important;
  border:          none !important;
  cursor:          pointer !important;
  padding:         14px !important;
  margin:          0 !important;
  box-shadow:      0 8px 32px rgba(0,0,0,0.35) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  transition:      transform .2s ease, box-shadow .2s ease !important;
  -webkit-appearance: none !important;
  appearance:      none !important;
  outline:         none !important;
}
.ec-fab:hover {
  transform:  scale(1.08) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
}
.ec-fab svg {
  width:    100% !important;
  height:   100% !important;
  display:  block !important;
}
.ec-fab--left {
  right: auto !important;
  left:  24px !important;
}
.ec-fab.ec-fab--hidden,
.ec-widget.ec-widget--hidden {
  display: none !important;
}

/* ── Widget shell ──────────────────────────────────────────── */
.ec-widget {
  position:      fixed !important;
  bottom:        24px !important;
  right:         24px !important;
  z-index:       99999 !important;
  width:         380px !important;
  max-width:     calc(100vw - 32px) !important;
  max-height:    600px !important;
  display:       flex !important;
  flex-direction:column !important;
  border-radius: var(--ecw-radius) !important;
  overflow:      hidden !important;
  box-shadow:    var(--ecw-shadow) !important;
  font-family:   var(--ecw-body-font) !important;
  font-size:     15px !important;
  line-height:   1.5 !important;
  margin:        0 !important;
  padding:       0 !important;
  border:        none !important;
  -webkit-font-smoothing: antialiased !important;
  transition:    transform .3s cubic-bezier(.22,1,.36,1),
                 opacity .3s ease !important;
}
.ec-widget--left {
  right: auto !important;
  left:  24px !important;
}
.ec-widget--minimised {
  transform: translateY(calc(100% - 64px)) !important;
}

/* ── Header ────────────────────────────────────────────────── */
.ec-widget__head {
  background:      var(--ecw-ink) !important;
  padding:         16px 18px !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             12px !important;
  flex-shrink:     0 !important;
  cursor:          pointer !important;
  margin:          0 !important;
  border:          none !important;
  box-shadow:      none !important;
}

/* Logo — SVG or uploaded image */
.ec-widget__logo,
.ec-widget__logo--img {
  width:         36px !important;
  height:        36px !important;
  flex-shrink:   0 !important;
  display:       block !important;
  border-radius: 50% !important;
  object-fit:    cover !important;
}

/* FAB with uploaded logo */
.ec-fab--logo {
  padding:  0 !important;
  overflow: hidden !important;
}
.ec-fab--logo img {
  width:         100% !important;
  height:        100% !important;
  object-fit:    cover !important;
  border-radius: 50% !important;
  display:       block !important;
}

.ec-widget__head-text {
  flex:    1 !important;
  display: block !important;
  margin:  0 !important;
  padding: 0 !important;
}

.ec-widget__name {
  font-family:    var(--ecw-brand-font) !important;
  font-weight:    900 !important;
  font-size:      18px !important;
  letter-spacing: -0.04em !important;
  text-transform: lowercase !important;
  color:          white !important;
  line-height:    1 !important;
  margin:         0 !important;
  padding:        0 !important;
  display:        block !important;
  background:     none !important;
  border:         none !important;
}

.ec-widget__status {
  font-family:  var(--ecw-body-font) !important;
  font-weight:  600 !important;
  font-size:    11px !important;
  color:        var(--ecw-accent) !important;
  margin-top:   4px !important;
  display:      flex !important;
  align-items:  center !important;
  gap:          5px !important;
  padding:      0 !important;
  background:   none !important;
  border:       none !important;
}

.ec-widget__dot {
  width:         6px !important;
  height:        6px !important;
  min-width:     6px !important;
  background:    #2db877 !important;
  border-radius: 50% !important;
  display:       inline-block !important;
  animation:     ecw-pulse 2s infinite !important;
  flex-shrink:   0 !important;
}

/* Minimise button */
.ec-widget__toggle {
  background:      none !important;
  border:          none !important;
  color:           rgba(255,255,255,0.7) !important;
  font-size:       22px !important;
  font-weight:     700 !important;
  line-height:     1 !important;
  cursor:          pointer !important;
  padding:         4px 8px !important;
  margin:          0 !important;
  flex-shrink:     0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  -webkit-appearance: none !important;
  appearance:      none !important;
  outline:         none !important;
  border-radius:   4px !important;
  transition:      color .15s ease !important;
}
.ec-widget__toggle:hover { color: white !important; }

/* ── Body (scrollable message area) ────────────────────────── */
.ec-widget__body {
  flex:         1 !important;
  overflow-y:   auto !important;
  padding:      20px 18px !important;
  display:      flex !important;
  flex-direction: column !important;
  gap:          10px !important;
  background:   var(--ecw-bg) !important;
  margin:       0 !important;
  border:       none !important;
  min-height:   200px !important;
  max-height:   420px !important;
  scroll-behavior: smooth !important;
}

/* ── Messages ───────────────────────────────────────────────── */
.ec-msg {
  max-width:     86% !important;
  padding:       11px 16px !important;
  font-family:   var(--ecw-body-font) !important;
  font-weight:   500 !important;
  font-size:     14px !important;
  line-height:   1.55 !important;
  border-radius: 18px !important;
  margin:        0 !important;
  border:        none !important;
  display:       block !important;
  word-break:    break-word !important;
}
.ec-msg--bot {
  background:          var(--ecw-panel) !important;
  color:               var(--ecw-ink) !important;
  align-self:          flex-start !important;
  border-bottom-left-radius: 4px !important;
  box-shadow:          0 1px 3px rgba(0,0,0,0.08) !important;
}
.ec-msg--bot a {
  color:           var(--ecw-ink) !important;
  text-decoration: underline !important;
  font-weight:     600 !important;
}
.ec-msg--user {
  background:           var(--ecw-ink) !important;
  color:                white !important;
  align-self:           flex-end !important;
  border-bottom-right-radius: 4px !important;
}
.ec-msg--bot strong { font-weight: 700 !important; }

/* ── Typing indicator ───────────────────────────────────────── */
.ec-typing {
  display:       flex !important;
  gap:           5px !important;
  align-items:   center !important;
  padding:       14px 18px !important;
  background:    var(--ecw-panel) !important;
  border-radius: 18px !important;
  border-bottom-left-radius: 4px !important;
  align-self:    flex-start !important;
  width:         fit-content !important;
  box-shadow:    0 1px 3px rgba(0,0,0,0.08) !important;
  margin:        0 !important;
}
.ec-typing span {
  width:         7px !important;
  height:        7px !important;
  background:    #aaa !important;
  border-radius: 50% !important;
  display:       inline-block !important;
  animation:     ecw-typing 1.4s infinite !important;
  margin:        0 !important;
  padding:       0 !important;
}
.ec-typing span:nth-child(2) { animation-delay: .18s !important; }
.ec-typing span:nth-child(3) { animation-delay: .36s !important; }

/* ── Suggestion chips ───────────────────────────────────────── */
.ec-chips {
  display:   flex !important;
  flex-wrap: wrap !important;
  gap:       6px !important;
  align-self:flex-start !important;
  margin:    0 !important;
  padding:   0 !important;
}
.ec-chip {
  font-family:     var(--ecw-body-font) !important;
  font-weight:     600 !important;
  font-size:       12px !important;
  padding:         7px 13px !important;
  border:          1.5px solid #e0e0d8 !important;
  background:      var(--ecw-panel) !important;
  color:           var(--ecw-ink) !important;
  border-radius:   var(--ecw-pill) !important;
  cursor:          pointer !important;
  transition:      background .15s ease, border-color .15s ease !important;
  margin:          0 !important;
  -webkit-appearance: none !important;
  appearance:      none !important;
  outline:         none !important;
  line-height:     1 !important;
  text-decoration: none !important;
  white-space:     nowrap !important;
}
.ec-chip:hover {
  background:   var(--ecw-accent) !important;
  border-color: var(--ecw-accent) !important;
  color:        var(--ecw-ink) !important;
}

/* ── Input form ─────────────────────────────────────────────── */
.ec-widget__form {
  display:      flex !important;
  align-items:  center !important;
  gap:          8px !important;
  padding:      12px 14px !important;
  background:   var(--ecw-panel) !important;
  border-top:   1px solid #ebebeb !important;
  flex-shrink:  0 !important;
  margin:       0 !important;
}
.ec-widget__input {
  flex:         1 !important;
  border:       none !important;
  outline:      none !important;
  font-family:  var(--ecw-body-font) !important;
  font-weight:  500 !important;
  font-size:    14px !important;
  color:        var(--ecw-ink) !important;
  padding:      8px 4px !important;
  margin:       0 !important;
  background:   transparent !important;
  box-shadow:   none !important;
  border-radius:0 !important;
  -webkit-appearance: none !important;
  appearance:   none !important;
}
.ec-widget__input::placeholder { color: #b0b0a8 !important; }

/* Send button */
.ec-widget__send {
  width:           38px !important;
  height:          38px !important;
  min-width:       38px !important;
  max-width:       38px !important;
  border-radius:   50% !important;
  background:      var(--ecw-accent) !important;
  color:           var(--ecw-ink) !important;
  border:          none !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  cursor:          pointer !important;
  padding:         0 !important;
  margin:          0 !important;
  flex-shrink:     0 !important;
  transition:      transform .15s ease, box-shadow .15s ease !important;
  -webkit-appearance: none !important;
  appearance:      none !important;
  outline:         none !important;
}
.ec-widget__send:hover {
  transform:  scale(1.08) !important;
  box-shadow: 0 6px 16px rgba(210,252,82,0.45) !important;
}
.ec-widget__send svg {
  width:   18px !important;
  height:  18px !important;
  display: block !important;
}
.ec-widget__send::before,
.ec-widget__send::after { content: none !important; display: none !important; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes ecw-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(1.35); }
}
@keyframes ecw-typing {
  0%,80%,100% { opacity:.3; transform:translateY(0); }
  40%          { opacity:1;  transform:translateY(-4px); }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ec-widget {
    bottom:    0 !important;
    right:     0 !important;
    left:      0 !important;
    width:     100% !important;
    max-width: 100% !important;
    border-radius: var(--ecw-radius) var(--ecw-radius) 0 0 !important;
  }
  .ec-widget--left { left: 0 !important; }
  .ec-fab { bottom: 16px !important; right: 16px !important; }
}