/* ── ELE WIDGET — PIA Chat ─────────────────────────────────────── */

/* ============================================
   FAB (botón flotante)
   ============================================ */

.ele-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--purple, #691CFF);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(105, 28, 255, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: ele-fab-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ele-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(105, 28, 255, 0.4);
}

.ele-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: #FF4444;
  border-radius: 50%;
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, sans-serif;
}

@keyframes ele-fab-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ============================================
   GREETING POPUP
   ============================================ */

.ele-greeting-popup {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 9997;
  max-width: 320px;
  animation: ele-slide-up 0.3s ease-out;
}

.ele-greeting-content {
  background: var(--white, #FFFFFF);
  border: 1px solid var(--border, #E3E5EC);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  cursor: pointer;
}

.ele-greeting-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.ele-greeting-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1A1A2E);
  margin: 0 0 4px;
  font-family: Inter, sans-serif;
}

.ele-greeting-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--purple, #691CFF);
  background: rgba(105,28,255,0.1);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.ele-greeting-text {
  font-size: 13px;
  color: var(--body, #4D4D4D);
  line-height: 1.4;
  margin: 0;
  font-family: Inter, sans-serif;
}

.ele-greeting-close {
  background: none;
  border: none;
  color: var(--muted, #7A7D8A);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.ele-greeting-close:hover { color: var(--ink, #1A1A2E); }

/* ============================================
   PANEL
   ============================================ */

.ele-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 9999;
  width: 400px;
  max-height: 600px;
  background: var(--white, #FFFFFF);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.9) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom right;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.ele-panel.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   HEADER
   ============================================ */

.ele-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #E3E5EC);
  background: var(--white, #FFFFFF);
  flex-shrink: 0;
}

.ele-back {
  background: none;
  border: none;
  color: var(--muted, #7A7D8A);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: all 0.1s;
}
.ele-back:hover { color: var(--ink, #1A1A2E); background: var(--surface, #F7F8FA); }

.ele-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.ele-header-info { flex: 1; min-width: 0; }

.ele-header-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #1A1A2E);
  display: block;
  font-family: Inter, sans-serif;
}

.ele-header-status {
  font-size: 12px;
  color: var(--muted, #7A7D8A);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: Inter, sans-serif;
}

.ele-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00D6C5;
  display: inline-block;
  flex-shrink: 0;
}

.ele-header-actions { display: flex; gap: 4px; }

.ele-header-actions button {
  background: none;
  border: none;
  color: var(--muted, #7A7D8A);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: all 0.1s;
}
.ele-header-actions button:hover {
  color: var(--ink, #1A1A2E);
  background: var(--surface, #F7F8FA);
}

/* ============================================
   CONTENT AREA
   ============================================ */

.ele-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================
   HOME SPACE
   ============================================ */

.ele-home {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ele-home-greeting {
  font-size: 15px;
  color: var(--body, #4D4D4D);
  line-height: 1.55;
  margin: 0 0 20px;
  font-family: Inter, sans-serif;
}

.ele-home-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.ele-home-input {
  flex: 1;
  border: 1px solid var(--border, #E3E5EC);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 15px;
  font-family: Inter, sans-serif;
  color: var(--ink, #1A1A2E);
  background: var(--white, #FFFFFF);
  resize: none;
  min-height: 40px;
  max-height: 72px;
  line-height: 1.4;
}
.ele-home-input:focus { outline: none; border-color: var(--purple, #691CFF); }

.ele-home-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--purple, #691CFF);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.ele-home-send:hover { opacity: 0.9; }

.ele-home-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ele-home-btn {
  border: 1px solid var(--border, #E3E5EC);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  font-family: Inter, sans-serif;
  color: var(--ink, #1A1A2E);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.ele-home-btn:hover {
  background: var(--surface, #F7F8FA);
  border-color: var(--purple, #691CFF);
}

.ele-home-link {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--purple, #691CFF);
  text-decoration: none;
  margin-top: 4px;
  font-family: Inter, sans-serif;
}
.ele-home-link:hover { text-decoration: underline; }

.ele-home-footer {
  margin-top: auto;
  padding-top: 16px;
  text-align: center;
  font-size: 11px;
  color: var(--muted, #7A7D8A);
  font-family: Inter, sans-serif;
}

/* ============================================
   CHAT
   ============================================ */

.ele-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ele-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  scroll-behavior: smooth;
}

.ele-messages::-webkit-scrollbar { width: 3px; }
.ele-messages::-webkit-scrollbar-thumb { background: var(--border, #E3E5EC); border-radius: 2px; }

.ele-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.ele-msg.ele-msg-new { animation: ele-msg-in 0.2s ease-out; }

.ele-msg-user { justify-content: flex-end; }
.ele-msg-ele  { justify-content: flex-start; }

.ele-bubble {
  max-width: 82%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  font-family: Inter, sans-serif;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.ele-bubble-user {
  background: var(--purple, #691CFF);
  color: white;
  border-radius: 16px 16px 4px 16px;
}

.ele-bubble-ele {
  background: var(--surface, #F7F8FA);
  color: var(--body, #4D4D4D);
  border-radius: 16px 16px 16px 4px;
}

.ele-avatar-small {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.ele-avatar-small img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.ele-avatar-spacer {
  width: 24px;
  flex-shrink: 0;
}

@keyframes ele-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   TYPING INDICATOR
   ============================================ */

.ele-typing {
  display: flex;
  gap: 5px;
  padding: 14px 18px;
  align-items: center;
}

.ele-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted, #7A7D8A);
  animation: ele-bounce 1.4s infinite ease-in-out;
}
.ele-dot:nth-child(2) { animation-delay: 0.2s; }
.ele-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ele-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-6px); }
}

/* ============================================
   COMPOSER
   ============================================ */

.ele-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  border-top: 1px solid var(--border, #E3E5EC);
  background: var(--white, #FFFFFF);
  flex-shrink: 0;
}

.ele-composer-input {
  flex: 1;
  border: 1px solid var(--border, #E3E5EC);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 15px;
  font-family: Inter, sans-serif;
  resize: none;
  min-height: 40px;
  max-height: 72px;
  color: var(--ink, #1A1A2E);
  background: var(--white, #FFFFFF);
  line-height: 1.4;
}
.ele-composer-input:focus { outline: none; border-color: var(--purple, #691CFF); }

.ele-composer-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--purple, #691CFF);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.ele-composer-send:hover { opacity: 0.9; }

/* ============================================
   BOOKING EMBED
   ============================================ */

.ele-booking {
  flex: 1;
  display: flex;
  min-height: 400px;
}

.ele-booking-iframe {
  width: 100%;
  flex: 1;
  border: none;
}

/* ============================================
   MOBILE FULLSCREEN (≤ 768px)
   ============================================ */

@media (max-width: 768px) {
  .ele-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    transform: translateY(100%);
    transform-origin: bottom center;
    transition: transform 0.3s ease;
    opacity: 1;
  }
  .ele-panel.is-open {
    transform: translateY(0);
    opacity: 1;
  }
  .ele-header {
    border-radius: 0;
    padding-top: max(14px, env(safe-area-inset-top, 14px));
  }
  .ele-composer {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }
  .ele-composer-input { font-size: 16px; }
  .ele-home-input     { font-size: 16px; }
  /* Minimum 44×44px tap target on mobile */
  .ele-mic-btn { width: 44px; height: 44px; }
  .ele-greeting-popup {
    max-width: calc(100vw - 32px);
    bottom: 86px;
  }
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .ele-fab {
    background: #8B5CF6;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
  }
  .ele-fab:hover { box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45); }

  .ele-panel {
    background: #0D0D14;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  .ele-header {
    background: #0D0D14;
    border-bottom-color: #2A2A3C;
  }
  .ele-header-name { color: #EEEEF2; }
  .ele-header-status { color: #8888A0; }

  .ele-bubble-ele {
    background: #1A1A28;
    color: #C0C0CC;
    border: 1px solid #2A2A3C;
  }
  .ele-bubble-user { background: #8B5CF6; }

  .ele-composer {
    background: #0D0D14;
    border-top-color: #2A2A3C;
  }
  .ele-composer-input {
    background: #1A1A28;
    border-color: #2A2A3C;
    color: #EEEEF2;
  }
  .ele-composer-input:focus { border-color: #8B5CF6; }

  .ele-home-input {
    background: #1A1A28;
    border-color: #2A2A3C;
    color: #EEEEF2;
  }
  .ele-home-input:focus { border-color: #8B5CF6; }

  .ele-home-greeting { color: #C0C0CC; }
  .ele-home-btn {
    border-color: #2A2A3C;
    color: #EEEEF2;
  }
  .ele-home-btn:hover {
    background: #1A1A28;
    border-color: #8B5CF6;
  }
  .ele-home-send    { background: #8B5CF6; }
  .ele-home-link    { color: #8B5CF6; }
  .ele-home-footer  { color: #8888A0; }

  .ele-greeting-content {
    background: #1A1A28;
    border-color: #2A2A3C;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  }
  .ele-greeting-name  { color: #EEEEF2; }
  .ele-greeting-text  { color: #C0C0CC; }
  .ele-greeting-badge { background: rgba(139,92,246,0.15); color: #8B5CF6; }
  .ele-greeting-close { color: #8888A0; }

  .ele-dot { background: #8888A0; }

  .ele-messages::-webkit-scrollbar-thumb { background: #2A2A3C; }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes ele-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ele-fab, .ele-panel, .ele-msg, .ele-greeting-popup {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   HOME BUTTON ICONS (v3)
   ============================================ */

.ele-home-btn {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ele-home-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(105, 28, 255, 0.08);
  color: var(--purple, #691CFF);
  flex-shrink: 0;
}

.ele-home-btn-icon svg { display: block; }

.ele-btn-link {
  background: none;
  border: none;
  color: var(--purple, #691CFF);
  font-size: 13px;
  font-family: Inter, sans-serif;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.ele-btn-link:hover { opacity: 0.8; }

/* ============================================
   BOOKING / CALENDAR (v3)
   ============================================ */

.ele-booking-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
}

.ele-booking-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #1A1A2E);
  font-family: Inter, sans-serif;
  margin: 0 0 4px;
}

.ele-booking-subtitle {
  font-size: 13px;
  color: var(--muted, #7A7D8A);
  font-family: Inter, sans-serif;
  margin: 0 0 16px;
}

.ele-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ele-cal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1A1A2E);
  font-family: Inter, sans-serif;
  text-transform: capitalize;
}

.ele-cal-arrow {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted, #7A7D8A);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  transition: all 0.1s;
}
.ele-cal-arrow:hover { background: var(--surface, #F7F8FA); color: var(--ink, #1A1A2E); }
.ele-cal-arrow:disabled { opacity: 0.3; cursor: default; }

.ele-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 16px;
}

.ele-cal-header-day {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #7A7D8A);
  font-family: Inter, sans-serif;
  padding: 4px 0;
}

.ele-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-family: Inter, sans-serif;
  cursor: pointer;
  color: var(--ink, #1A1A2E);
  background: none;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.ele-cal-day:hover:not(.ele-cal-day--disabled):not(.ele-cal-day--empty) {
  background: var(--surface, #F7F8FA);
  border-color: var(--purple, #691CFF);
}
.ele-cal-day--disabled {
  color: var(--muted, #7A7D8A);
  cursor: default;
  opacity: 0.4;
}
.ele-cal-day--empty { cursor: default; }
.ele-cal-day--today {
  font-weight: 700;
  border-color: rgba(105,28,255,0.3);
}
.ele-cal-day--selected {
  background: var(--purple, #691CFF);
  color: white;
  border-color: var(--purple, #691CFF);
  font-weight: 600;
}

.ele-slot-wrap {
  margin-bottom: 16px;
}

.ele-slot-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #7A7D8A);
  font-family: Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.ele-slot-btns {
  display: flex;
  gap: 8px;
}

.ele-slot-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border, #E3E5EC);
  border-radius: 10px;
  background: none;
  font-size: 13px;
  font-family: Inter, sans-serif;
  color: var(--ink, #1A1A2E);
  cursor: pointer;
  transition: all 0.15s;
}
.ele-slot-btn:hover { border-color: var(--purple, #691CFF); background: rgba(105,28,255,0.04); }
.ele-slot-btn.is-selected {
  background: var(--purple, #691CFF);
  border-color: var(--purple, #691CFF);
  color: white;
  font-weight: 600;
}

.ele-booking-footer {
  margin-top: auto;
  padding-top: 12px;
}

.ele-booking-confirm {
  width: 100%;
  padding: 12px;
  background: var(--purple, #691CFF);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: Inter, sans-serif;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ele-booking-confirm:hover { opacity: 0.88; }
.ele-booking-confirm:disabled { opacity: 0.4; cursor: default; }

/* ============================================
   AUDIO INPUT (v3)
   ============================================ */

.ele-mic-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--border, #E3E5EC);
  color: var(--muted, #7A7D8A);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}
.ele-mic-btn:hover { border-color: var(--purple, #691CFF); color: var(--purple, #691CFF); }

/* Clip/adjuntar — Fase 3. Existe en DOM, no visible aún. */
.ele-clip-btn { display: none; }

.ele-mic-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: rgba(26,26,46,0.9);
  color: white;
  font-size: 11px;
  font-family: Inter, sans-serif;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.15s;
}
.ele-mic-btn:hover .ele-mic-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* ── Recording mode ─────────────────────────────────── */
.ele-rec-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  border-top: 1px solid var(--border, #E3E5EC);
  border-left: 2px solid rgba(255, 68, 68, 0.3);
  background: var(--surface, #F7F7FB);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease-out;
}

.ele-rec-cancel {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted, #7A7D8A);
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.ele-rec-cancel:hover { color: var(--ink, #1A1A2E); background: rgba(0,0,0,0.05); }

.ele-rec-wave {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 28px;
  min-width: 0;
}

.ele-rec-bar {
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--purple, #691CFF);
  opacity: 0.6;
  transition: height 0.1s ease;
}

.ele-rec-timer {
  font-size: 14px;
  font-weight: 600;
  font-family: Inter, sans-serif;
  color: var(--ink, #1A1A2E);
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
  transition: color 0.2s;
}
.ele-rec-timer--warning { color: #FF4444; }

.ele-rec-send {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--purple, #691CFF);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.ele-rec-send:hover { opacity: 0.85; }

/* ── Audio message bubble ───────────────────────────── */
.ele-audio-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}

.ele-audio-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--purple, #691CFF);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
  padding: 0;
}
.ele-audio-play:hover { opacity: 1; }

.ele-audio-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ele-audio-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  overflow: hidden;
}

.ele-audio-progress-fill {
  height: 100%;
  width: 0%;
  background: white;
  border-radius: 2px;
  transition: width 0.1s linear;
}

.ele-audio-time {
  font-size: 11px;
  font-family: Inter, sans-serif;
  color: rgba(255,255,255,0.8);
}

/* ── Typing text (audio processing) ────────────────── */
.ele-typing-text {
  font-size: 13px;
  color: var(--muted, #7A7D8A);
  font-style: italic;
}

/* ── Audio send error overlay ───────────────────────── */
.ele-audio-error {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding-top: 4px;
  text-decoration: underline;
  width: 100%;
}

/* ============================================
   BOOKING IFRAME (inline Outlook Bookings)
   ============================================ */

.ele-iframe-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ele-iframe-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #E3E5EC);
  flex-shrink: 0;
}

.ele-iframe-back {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--purple, #691CFF);
  font-size: 13px;
  font-weight: 500;
  font-family: Inter, sans-serif;
  cursor: pointer;
  padding: 4px 0;
  transition: opacity 0.15s;
}
.ele-iframe-back:hover { opacity: 0.75; }

.ele-booking-iframe {
  flex: 1;
  border: none;
  width: 100%;
  min-height: 0;
}

.ele-iframe-fallback {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.ele-iframe-fallback p {
  font-size: 14px;
  color: var(--muted, #7A7D8A);
  margin: 0;
}

.ele-iframe-open-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--purple, #691CFF);
  color: white;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: Inter, sans-serif;
  text-decoration: none;
  transition: opacity 0.15s;
}
.ele-iframe-open-btn:hover { opacity: 0.85; }

/* ============================================
   RICH MEDIA (v3)
   ============================================ */

.ele-rich-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.ele-rich-video {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  aspect-ratio: 16/9;
}

.ele-rich-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ele-rich-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  transition: background 0.15s;
}
.ele-rich-video:hover .ele-rich-play-overlay { background: rgba(0,0,0,0.5); }

.ele-rich-play-overlay svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }

.ele-rich-caption {
  font-size: 12px;
  color: var(--muted, #7A7D8A);
  font-family: Inter, sans-serif;
  line-height: 1.4;
}

.ele-rich-image {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  max-width: 100%;
}
.ele-rich-image img {
  width: 100%;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

.ele-rich-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ele-rich-btn {
  padding: 10px 14px;
  border: 1px solid var(--purple, #691CFF);
  border-radius: 10px;
  background: none;
  color: var(--purple, #691CFF);
  font-size: 13px;
  font-weight: 500;
  font-family: Inter, sans-serif;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  text-decoration: none;
  display: block;
}
.ele-rich-btn:hover { background: rgba(105,28,255,0.06); }
.ele-rich-btn--more {
  border-color: var(--border, #E3E5EC);
  color: var(--muted, #7A7D8A);
  font-weight: 400;
  font-size: 12px;
}
.ele-rich-btn--more:hover { border-color: var(--purple, #691CFF); color: var(--purple, #691CFF); background: rgba(105,28,255,0.04); }

.ele-rich-card {
  border: 1px solid var(--border, #E3E5EC);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ele-rich-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1A1A2E);
  font-family: Inter, sans-serif;
}

.ele-rich-card-desc {
  font-size: 13px;
  color: var(--body, #4D4D4D);
  font-family: Inter, sans-serif;
  line-height: 1.4;
}

.ele-rich-card-link {
  font-size: 13px;
  color: var(--purple, #691CFF);
  font-family: Inter, sans-serif;
  text-decoration: none;
  font-weight: 500;
}
.ele-rich-card-link:hover { text-decoration: underline; }

/* ============================================
   MEDIA MODAL (v3)
   ============================================ */

.ele-media-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ele-modal-in 0.2s ease-out;
}

@keyframes ele-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ele-media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  cursor: pointer;
}

.ele-media-box {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 880px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ele-media-close {
  align-self: flex-end;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s;
}
.ele-media-close:hover { background: rgba(255,255,255,0.25); }

.ele-media-iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 10px;
  background: #000;
}

.ele-media-img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 10px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ============================================
   SHARE (v3)
   ============================================ */

/* .ele-share-btn lives in .ele-header-actions — inherits base button styles.
   JS render() controls visibility via display:flex / display:none.          */
.ele-share-btn:hover { color: var(--purple, #691CFF); background: rgba(105,28,255,0.06); }

.ele-share-dropdown {
  /* position/top/right set via inline style (body-appended, fixed) */
  background: var(--white, #FFFFFF);
  border: 1px solid var(--border, #E3E5EC);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
  min-width: 170px;
  animation: ele-slide-up 0.15s ease-out;
}

.ele-share-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: none;
  border: none;
  font-size: 13px;
  font-family: Inter, sans-serif;
  color: var(--ink, #1A1A2E);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}
.ele-share-opt:hover { background: var(--surface, #F7F8FA); }
.ele-share-opt svg { color: var(--muted, #7A7D8A); flex-shrink: 0; }

/* ============================================
   MOBILE — v3 overrides
   ============================================ */

@media (max-width: 768px) {
  .ele-booking-wrap { padding: 14px; }
  .ele-rec-mode {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }
  /* Hide waveform on very narrow screens */
  @media (max-width: 320px) {
    .ele-rec-wave { display: none; }
  }
}

/* ============================================
   DARK MODE — v3 additions
   ============================================ */

@media (prefers-color-scheme: dark) {
  .ele-home-btn-icon {
    background: rgba(139,92,246,0.15);
    color: #8B5CF6;
  }
  .ele-btn-link { color: #8B5CF6; }

  /* Booking */
  .ele-booking-header { color: #EEEEF2; }
  .ele-booking-subtitle { color: #8888A0; }
  .ele-cal-title { color: #EEEEF2; }
  .ele-cal-arrow { color: #8888A0; }
  .ele-cal-arrow:hover { background: #1A1A28; color: #EEEEF2; }
  .ele-cal-header-day { color: #8888A0; }
  .ele-cal-day { color: #EEEEF2; }
  .ele-cal-day:hover:not(.ele-cal-day--disabled):not(.ele-cal-day--empty) {
    background: #1A1A28;
    border-color: #8B5CF6;
  }
  .ele-cal-day--disabled { color: #8888A0; }
  .ele-cal-day--today { border-color: rgba(139,92,246,0.4); }
  .ele-cal-day--selected { background: #8B5CF6; border-color: #8B5CF6; }
  .ele-slot-label { color: #8888A0; }
  .ele-slot-btn { border-color: #2A2A3C; color: #EEEEF2; }
  .ele-slot-btn:hover { border-color: #8B5CF6; background: rgba(139,92,246,0.08); }
  .ele-slot-btn.is-selected { background: #8B5CF6; border-color: #8B5CF6; }
  .ele-booking-confirm { background: #8B5CF6; }
  .ele-booking-wrap { background: #0D0D14; }

  /* Audio */
  .ele-mic-btn { border-color: #2A2A3C; color: #8888A0; }
  .ele-mic-btn:hover { border-color: #8B5CF6; color: #8B5CF6; }
  .ele-rec-mode { background: #0D0D14; border-top-color: #2A2A3C; }
  .ele-rec-cancel { color: #8888A0; }
  .ele-rec-cancel:hover { color: #EEEEF2; background: rgba(255,255,255,0.05); }
  .ele-rec-timer { color: #EEEEF2; }
  .ele-rec-bar { background: #8B5CF6; }
  .ele-rec-send { background: #8B5CF6; }

  /* Rich media */
  .ele-rich-caption { color: #8888A0; }
  .ele-rich-card { border-color: #2A2A3C; }
  .ele-rich-card-title { color: #EEEEF2; }
  .ele-rich-card-desc { color: #C0C0CC; }
  .ele-rich-card-link { color: #8B5CF6; }
  .ele-rich-btn { border-color: #8B5CF6; color: #8B5CF6; }
  .ele-rich-btn:hover { background: rgba(139,92,246,0.1); }
  .ele-rich-btn--more { border-color: #2A2A3C; color: #8888A0; }
  .ele-rich-btn--more:hover { border-color: #8B5CF6; color: #8B5CF6; }

  /* Share */
  .ele-share-btn {
    background: #1A1A28;
    border-color: #2A2A3C;
    color: #8888A0;
  }
  .ele-share-btn:hover { border-color: #8B5CF6; color: #8B5CF6; }
  .ele-share-dropdown {
    background: #1A1A28;
    border-color: #2A2A3C;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }
  .ele-share-opt { color: #EEEEF2; }
  .ele-share-opt:hover { background: #24243A; }
}