/* Miles — VisionOne AI assistant chat widget */
.miles-widget,
.miles-widget * {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* `!important` everywhere on the root so theme CSS (Avada/Fusion) can't
   override our floating positioning. We anchor to <html> and use
   `position: fixed` so the bubble follows the user as they scroll.
   Sits hard right (14px) like Runmize / Intercom, raised ~96px off the
   bottom so it doesn't crowd cookie bars or page footers. */
.miles-widget {
  position: fixed !important;
  right: 14px !important;
  bottom: 96px !important;
  top: auto !important;
  left: auto !important;
  z-index: 2147483600 !important;
  color: #1a2233;
  pointer-events: none; /* let bubble + panel handle their own events */
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  float: none !important;
  display: block !important;
}
@media (max-width: 600px) {
  .miles-widget { right: 10px !important; bottom: 80px !important; }
}
.miles-widget > * { pointer-events: auto; }

/* Smooth transition baseline for everything inside the widget */
.miles-widget button,
.miles-widget .miles-msg,
.miles-widget .miles-chip,
.miles-widget .miles-input {
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease,
              opacity 0.18s ease;
}

/* Closed bubble: small circular Miles avatar with a soft navy brand overlay
   so the face is suggested but not dominant as the visitor scrolls. On hover,
   the overlay fades out so you see Miles clearly + an "Ask AI" tooltip. */
.miles-bubble {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0b3d91 0%, #1f4f9e 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(11, 23, 50, 0.20), 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2),
              box-shadow 0.2s ease;
  position: relative;
  overflow: visible;
  padding: 0;
}
.miles-bubble:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(11, 23, 50, 0.30), 0 3px 8px rgba(0,0,0,0.10);
}
.miles-bubble:active { transform: translateY(0) scale(0.98); }
.miles-bubble:focus-visible { outline: 2px solid #ffd166; outline-offset: 3px; }

/* Photo on the bubble — fills the circle, slightly desaturated and dimmed by
   default so the face reads as a brand mark rather than a giant headshot. */
.miles-bubble-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #0b3d91;
  filter: saturate(0.85) brightness(0.92);
  transition: filter 0.2s ease;
}
.miles-bubble:hover .miles-bubble-photo {
  filter: saturate(1) brightness(1);
}
/* Soft navy overlay sits on top of the photo to mute it visually. The overlay
   uses the brand gradient at low opacity so the bubble still feels like part
   of the site rather than a giant photo. Cleared on hover. */
.miles-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(11, 61, 145, 0.42) 0%, rgba(31, 79, 158, 0.30) 100%);
  pointer-events: none;
  transition: opacity 0.2s ease;
  opacity: 1;
}
.miles-bubble:hover::after { opacity: 0; }

/* Robot fallback inside the bubble (only used if the photo fails to load) */
.miles-bubble svg {
  width: 26px; height: 26px;
  display: block;
  color: #ffffff;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Online status dot — small green pip on the bottom-right of the bubble */
.miles-bubble-pulse {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: miles-pulse 2.4s ease-out infinite;
  z-index: 2;
}
@keyframes miles-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* "Ask AI" tooltip — slides in from the left of the bubble on hover */
.miles-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #0b3d91;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(11, 23, 50, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2,0.9,0.3,1.2);
}
.miles-tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #0b3d91;
}
.miles-bubble:hover .miles-tooltip,
.miles-bubble:focus-visible .miles-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* Hide tooltip once the panel is open (bubble becomes the close button) */
.miles-widget.is-open .miles-tooltip { display: none; }
@media (max-width: 600px) {
  /* On phones, tap targets win — no hover tooltip */
  .miles-tooltip { display: none; }
}

.miles-panel {
  position: absolute;
  right: 0;
  bottom: 68px; /* 52px bubble + 16px gap */
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 160px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 56px rgba(11, 23, 50, 0.28), 0 4px 12px rgba(0,0,0,0.06);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: miles-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes miles-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.miles-panel.is-open { display: flex; }

.miles-header {
  padding: 16px 18px;
  background: linear-gradient(135deg, #0b3d91 0%, #1f6cd0 60%, #2c7be5 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.miles-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ffd166, transparent);
  opacity: 0.6;
}
.miles-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,209,102,0.55);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.miles-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.miles-avatar svg { width: 30px; height: 30px; display: block; color: #fff; }
.miles-title { font-weight: 600; font-size: 15px; line-height: 1.1; }
.miles-subtitle { font-size: 12px; opacity: 0.88; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.miles-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,0.25); }
.miles-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
}
.miles-close:hover { background: rgba(255,255,255,0.15); }

.miles-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: #f6f8fb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.miles-msg {
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: miles-msg-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes miles-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.miles-msg.assistant {
  background: #fff;
  border: 1px solid #e3e8f0;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.miles-msg.user {
  background: #2c7be5;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.miles-msg.error {
  background: #fff4f4;
  color: #b32020;
  border: 1px solid #f3c4c4;
  align-self: flex-start;
}
.miles-typing {
  align-self: flex-start;
  font-size: 13px;
  color: #6b7a90;
  padding: 6px 4px;
}
.miles-typing span {
  display: inline-block;
  width: 6px; height: 6px; margin: 0 1px;
  border-radius: 50%; background: #94a3b8;
  animation: miles-blink 1.2s infinite ease-in-out;
}
.miles-typing span:nth-child(2) { animation-delay: 0.2s; }
.miles-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes miles-blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

.miles-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #e3e8f0;
  background: #fff;
}
.miles-input {
  flex: 1;
  resize: none;
  border: 1px solid #d4dbe6;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 14px;
  line-height: 1.4;
  max-height: 120px;
  outline: none;
  font-family: inherit;
}
.miles-input:focus { border-color: #2c7be5; box-shadow: 0 0 0 2px rgba(44,123,229,0.15); }
.miles-send {
  background: #2c7be5;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.miles-send:disabled { background: #9bb6dc; cursor: not-allowed; }
.miles-send:hover:not(:disabled) { background: #1f6cd0; }

.miles-footer {
  padding: 6px 12px 10px;
  font-size: 11px;
  color: #6b7a90;
  text-align: center;
  background: #fff;
}

.miles-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 8px;
  background: #f6f8fb;
}
.miles-chip {
  background: #fff;
  border: 1px solid #d4dbe6;
  color: #1f4f8b;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.miles-chip:hover { background: #2c7be5; border-color: #2c7be5; color: #fff; transform: translateY(-1px); }
.miles-chip:active { transform: translateY(0); }

/* ===== Cal.com booking modal ===== */
.miles-modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 23, 50, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.miles-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.miles-modal-card {
  background: #fff;
  border-radius: 16px;
  width: min(960px, 100%);
  height: min(720px, calc(100vh - 48px));
  box-shadow: 0 30px 80px rgba(11, 23, 50, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.22s ease;
}
.miles-modal.is-open .miles-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.miles-modal-header {
  padding: 14px 18px;
  background: linear-gradient(135deg, #0b3d91 0%, #1f6cd0 60%, #2c7be5 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.miles-modal-header .miles-modal-title {
  font-weight: 600;
  font-size: 15px;
  flex: 1;
}
.miles-modal-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s ease;
}
.miles-modal-close:hover { background: rgba(255,255,255,0.28); }
.miles-modal-body {
  flex: 1;
  position: relative;
  background: #f6f8fb;
}
.miles-modal-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.miles-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #6b7a90;
  background: #f6f8fb;
  transition: opacity 0.25s ease;
}
.miles-modal-loading.is-hidden { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
  .miles-modal { padding: 0; }
  .miles-modal-card {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    /* Slide up from the bottom on phones — feels native */
    transform: translateY(100%) scale(1);
  }
  .miles-modal.is-open .miles-modal-card { transform: translateY(0) scale(1); }
  .miles-modal-header { padding: 14px 18px calc(14px + env(safe-area-inset-top, 0px)); }
  .miles-modal-body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* Mobile panel: take the full screen minus a small gap so it feels like a real chat app */
  .miles-panel {
    position: fixed !important;
    right: 8px !important;
    left: 8px !important;
    bottom: 78px !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100vh - 110px) !important;
    max-height: calc(100vh - 110px) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(11, 23, 50, 0.34), 0 6px 16px rgba(0,0,0,0.08) !important;
  }
}

@media (max-width: 480px) {
  .miles-widget {
    right: 12px !important;
    bottom: 78px !important;
  }
  .miles-bubble { width: 56px; height: 56px; }
  .miles-bubble-pulse { width: 12px; height: 12px; }
  .miles-panel {
    right: 8px !important;
    left: 8px !important;
    bottom: 84px !important;
    height: calc(100vh - 110px) !important;
    max-height: calc(100vh - 110px) !important;
  }
}