/* ═══════════════════════════════════════════════
   AURA PATH — AI AGENT CHAT WIDGET
   Uses tokens from design-system.css
   ═══════════════════════════════════════════════ */

#aura-agent { font-family: var(--font, 'Inter', sans-serif); }

#aura-agent *, #aura-agent *::before, #aura-agent *::after { box-sizing: border-box; }

/* ── Bubble (collapsed) ─────────────────────────── */
.ap-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--copper, #B5651D);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(30,27,23,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  padding: 0;
}
.ap-bubble:hover { transform: scale(1.08); background: var(--copper-d, #9A5518); }
.ap-bubble:active { transform: scale(0.96); }
.ap-bubble svg { width: 24px; height: 24px; fill: var(--coconut, #F7F3EC); }

.ap-bubble.is-open .ap-icon-chat { display: none; }
.ap-bubble:not(.is-open) .ap-icon-close { display: none; }

.ap-bubble-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E04444;
  border: 2px solid var(--coconut, #F7F3EC);
  animation: ap-dot-pulse 1.6s ease-in-out infinite;
}
.ap-bubble.seen .ap-bubble-dot { display: none; }

@keyframes ap-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

/* ── Panel (expanded) ───────────────────────────── */
.ap-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 9999;
  width: 360px;
  height: 540px;
  max-height: calc(100vh - 120px);
  background: var(--coconut, #F7F3EC);
  border: 1px solid rgba(30,27,23,.1);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(30,27,23,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .3s cubic-bezier(0.16,1,0.3,1), transform .3s cubic-bezier(0.16,1,0.3,1);
}
.ap-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Header ─────────────────────────────────────── */
.ap-header {
  flex: 0 0 auto;
  height: 60px;
  background: var(--copper, #B5651D);
  color: var(--coconut, #F7F3EC);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}
.ap-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--coconut, #F7F3EC);
  color: var(--copper, #B5651D);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  flex: 0 0 auto;
}
.ap-avatar svg {
  width: 22px;
  height: 22px;
  display: block;
}
.ap-avatar::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2BB673;
  border: 2px solid var(--copper, #B5651D);
}
.ap-header-info { flex: 1; min-width: 0; line-height: 1.2; }
.ap-header-info .ap-name { font-size: 14px; font-weight: 600; }
.ap-header-info .ap-status { font-size: 11px; opacity: 0.8; }
.ap-header-actions { display: flex; gap: 4px; }
.ap-header-btn {
  background: transparent;
  border: none;
  color: var(--coconut, #F7F3EC);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: background .15s ease, opacity .15s ease;
}
.ap-header-btn:hover { background: rgba(255,255,255,.15); opacity: 1; }
.ap-header-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ── Messages area ──────────────────────────────── */
.ap-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--coconut, #F7F3EC);
  scroll-behavior: smooth;
}
.ap-messages::-webkit-scrollbar { width: 6px; }
.ap-messages::-webkit-scrollbar-thumb { background: rgba(30,27,23,.15); border-radius: 3px; }
.ap-messages::-webkit-scrollbar-track { background: transparent; }

.ap-msg {
  max-width: 85%;
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 14px;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: ap-msg-in .25s ease both;
}
@keyframes ap-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ap-msg.agent {
  align-self: flex-start;
  background: #FFFFFF;
  border: 1px solid rgba(30,27,23,.08);
  border-radius: 4px 16px 16px 16px;
  color: var(--carbon, #1E1B17);
}
.ap-msg.user {
  align-self: flex-end;
  background: var(--copper, #B5651D);
  color: var(--coconut, #F7F3EC);
  border-radius: 16px 16px 4px 16px;
}

.ap-time {
  font-size: 11px;
  color: var(--gold, #9A7B4B);
  align-self: center;
  margin: 4px 0;
}

/* ── Typing indicator ───────────────────────────── */
.ap-typing {
  align-self: flex-start;
  background: #FFFFFF;
  border: 1px solid rgba(30,27,23,.08);
  border-radius: 4px 16px 16px 16px;
  padding: 12px 14px;
  display: inline-flex;
  gap: 4px;
}
.ap-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold, #9A7B4B);
  animation: ap-bounce 1.2s infinite ease-in-out;
}
.ap-typing span:nth-child(2) { animation-delay: .15s; }
.ap-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ap-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ── Quick reply chips ──────────────────────────── */
.ap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px;
  margin-top: 2px;
  animation: ap-msg-in .3s ease both;
}
.ap-chip {
  background: transparent;
  border: 1px solid var(--copper, #B5651D);
  color: var(--copper, #B5651D);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.ap-chip:hover { background: var(--copper, #B5651D); color: var(--coconut, #F7F3EC); }

/* ── CTA card (booking) ─────────────────────────── */
.ap-cta-card {
  background: rgba(181,101,29,.08);
  border: 1px solid rgba(181,101,29,.3);
  border-radius: 12px;
  padding: 14px;
  margin-top: 4px;
  animation: ap-msg-in .3s ease both;
}
.ap-cta-btn {
  display: block;
  width: 100%;
  background: var(--copper, #B5651D);
  color: var(--coconut, #F7F3EC);
  text-align: center;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}
.ap-cta-btn:hover { background: var(--copper-d, #9A5518); }
.ap-cta-note {
  font-size: 12px;
  color: var(--gold, #9A7B4B);
  margin-top: 8px;
  text-align: center;
}

/* ── Lead form ──────────────────────────────────── */
.ap-lead-form {
  background: #FFFFFF;
  border: 1px solid rgba(30,27,23,.1);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: ap-msg-in .3s ease both;
}
.ap-lead-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(30,27,23,.15);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--carbon, #1E1B17);
  background: var(--coconut, #F7F3EC);
}
.ap-lead-form input:focus {
  outline: none;
  border-color: var(--copper, #B5651D);
}
.ap-lead-form button {
  background: var(--copper, #B5651D);
  color: var(--coconut, #F7F3EC);
  border: none;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}
.ap-lead-form button:hover { background: var(--copper-d, #9A5518); }
.ap-lead-form button:disabled { opacity: 0.6; cursor: default; }

.ap-lead-confirm {
  background: rgba(43,182,115,.1);
  border: 1px solid rgba(43,182,115,.3);
  color: var(--carbon, #1E1B17);
  font-size: 13px;
  border-radius: 12px;
  padding: 12px 14px;
  animation: ap-msg-in .3s ease both;
}

/* ── Error fallback ─────────────────────────────── */
.ap-error {
  background: rgba(224,68,68,.08);
  border: 1px solid rgba(224,68,68,.3);
  color: var(--carbon, #1E1B17);
  font-size: 13px;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ap-error a {
  color: #25D366;
  font-weight: 600;
  text-decoration: none;
}

/* ── Input area ─────────────────────────────────── */
.ap-input-area {
  flex: 0 0 auto;
  border-top: 1px solid rgba(30,27,23,.08);
  padding: 10px 12px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #FFFFFF;
}
.ap-textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--carbon, #1E1B17);
  line-height: 1.4;
  max-height: 84px;
  min-height: 36px;
  padding: 8px 4px;
}
.ap-textarea::placeholder { color: var(--gold, #9A7B4B); }

.ap-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--copper, #B5651D);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, opacity .15s ease;
  flex: 0 0 auto;
}
.ap-send svg { width: 16px; height: 16px; fill: var(--coconut, #F7F3EC); }
.ap-send:hover:not(:disabled) { background: var(--copper-d, #9A5518); }
.ap-send:disabled { opacity: 0.4; cursor: default; }

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 767px) {
  .ap-bubble {
    bottom: 84px;  /* clear sticky-cta bar (~60px tall) */
    right: 16px;
  }
  .ap-panel {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 85vh;
    max-height: none;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ap-bubble, .ap-panel, .ap-msg, .ap-chips, .ap-cta-card,
  .ap-lead-form, .ap-typing span, .ap-bubble-dot {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}