/*
 * Aspire Assistant -- custom chat widget (replaces the third-party
 * botman-web-widget). Talks to the same keyword/topic backend
 * (BotManController@ask) via plain JSON, not BotMan's web-driver
 * protocol, so this file only ever needs to style our own markup.
 */
.aa-root { position: fixed; z-index: 2147483000; right: 24px; bottom: 24px; font-family: var(--body-font, sans-serif); }

.aa-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--theme-color); color: #fff; box-shadow: 0 10px 30px rgba(8,127,140,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.aa-toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(8,127,140,.4); }
.aa-toggle svg { width: 26px; height: 26px; }
.aa-toggle .aa-icon-close { display: none; }
.aa-root.is-open .aa-toggle .aa-icon-chat { display: none; }
.aa-root.is-open .aa-toggle .aa-icon-close { display: block; }
.aa-toggle .aa-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--aspire-red); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}

.aa-panel {
  /* A sibling with an explicit z-index (the mobile .aa-backdrop below)
     always paints above a sibling left at the default z-index:auto,
     regardless of DOM order -- without this, the backdrop rendered over
     the panel on phones and blocked every tap, showing only its dark
     tint ("blue fade") with no way to interact with the chat at all. */
  position: absolute; z-index: 2; right: 0; bottom: 76px; width: 400px; max-width: calc(100vw - 48px);
  height: 600px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--smoke-color, #fff8f0); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(18,48,68,.28); border: 1px solid rgba(18,48,68,.08);
}
.aa-panel[hidden] { display: none; }

.aa-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--title-color); color: #fff; flex-shrink: 0; }
.aa-header-avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.aa-header-avatar img { width: 26px; height: 26px; object-fit: contain; }
.aa-header-text { flex: 1 1 auto; min-width: 0; }
.aa-header-text strong { display: block; font-family: var(--title-font); font-size: 16px; line-height: 1.3; }
.aa-header-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
.aa-header-status .aa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aspire-green); flex-shrink: 0; }
.aa-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.aa-lang-toggle { display: flex; background: rgba(255,255,255,.14); border-radius: 999px; padding: 2px; }
.aa-lang-toggle button { border: none; background: transparent; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.aa-lang-toggle button.is-active { background: #fff; color: var(--title-color); }
.aa-icon-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.aa-icon-btn:hover { background: rgba(255,255,255,.24); }
.aa-icon-btn svg { width: 16px; height: 16px; }

.aa-safety-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 18px;
  background: var(--aspire-red-soft); color: #9a2d26; font-size: 12.5px; line-height: 1.5; flex-shrink: 0;
}
.aa-safety-banner svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: #c43a30; }

.aa-messages { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.aa-msg { max-width: 86%; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.aa-msg-bot { align-self: flex-start; background: #fff; color: var(--title-color); border: 1px solid var(--border-color); border-bottom-left-radius: 4px; }
.aa-msg-user { align-self: flex-end; background: var(--theme-color); color: #fff; border-bottom-right-radius: 4px; }
.aa-msg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; align-self: flex-start; max-width: 86%; }
.aa-msg-actions .aa-action-btn {
  border: 1px solid var(--theme-color); background: #fff; color: var(--theme-color); font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-block;
}
.aa-msg-actions .aa-action-btn.is-cta { background: var(--title-color); border-color: var(--title-color); color: #fff; }
.aa-msg-actions .aa-action-btn:hover { background: var(--theme-color); color: #fff; }
.aa-msg-actions .aa-action-btn.is-cta:hover { background: #0a3d62; }

.aa-typing { align-self: flex-start; display: flex; gap: 4px; padding: 14px; }
.aa-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--light-color); animation: aaTyping 1.1s infinite ease-in-out; }
.aa-typing span:nth-child(2) { animation-delay: .15s; }
.aa-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aaTyping { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.aa-topics { flex-shrink: 0; padding: 4px 18px 14px; }
.aa-topics-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--light-color); text-transform: uppercase; margin-bottom: 8px; }
.aa-topics-list { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-pill {
  border: 1px solid var(--theme-color); background: #fff; color: var(--theme-color); font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
.aa-pill:hover { background: var(--theme-color); color: #fff; }

.aa-form { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border-color); background: #fff; }
.aa-form input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-color); border-radius: 999px; padding: 11px 16px;
  font-size: 14px; background: var(--smoke-color, #fff8f0); color: var(--title-color);
}
.aa-form input:focus { outline: none; border-color: var(--theme-color); }
.aa-send {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--secondary-color); color: #fff; display: flex; align-items: center; justify-content: center;
}
.aa-send:hover { background: #e96a59; }
.aa-send:disabled { opacity: .5; cursor: default; }
.aa-send svg { width: 18px; height: 18px; }

.aa-footer { flex-shrink: 0; display: flex; border-top: 1px solid var(--border-color); background: #fff; }
.aa-footer-link {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px;
  font-size: 13px; font-weight: 700; color: var(--title-color); text-decoration: none; border-right: 1px solid var(--border-color);
}
.aa-footer-link:last-child { border-right: none; }
.aa-footer-link svg { width: 16px; height: 16px; color: var(--theme-color); flex-shrink: 0; }
.aa-footer-link:hover { background: var(--smoke-theme); }

/* Handoff (human contact) form, rendered inline as an assistant message */
.aa-handoff { align-self: flex-start; max-width: 100%; width: 100%; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; padding: 14px; }
.aa-handoff p { margin: 0 0 10px; font-size: 13px; color: var(--body-color); line-height: 1.5; }
.aa-handoff label { display: block; font-size: 12px; font-weight: 700; color: var(--title-color); margin-bottom: 10px; }
.aa-handoff input, .aa-handoff select, .aa-handoff textarea {
  width: 100%; margin-top: 4px; border: 1px solid var(--border-color); border-radius: 8px; padding: 9px 11px;
  font-size: 13px; font-family: inherit; color: var(--title-color); box-sizing: border-box;
}
.aa-handoff textarea { min-height: 60px; resize: vertical; }
.aa-handoff button[type="submit"] {
  width: 100%; margin-top: 4px; padding: 10px; border: none; border-radius: 999px; background: var(--secondary-color);
  color: #fff; font-weight: 800; font-size: 13px; cursor: pointer;
}
.aa-handoff button[type="submit"]:disabled { opacity: .6; }
.aa-handoff .aa-handoff-note { font-size: 11px; color: var(--light-color); margin-top: 8px; line-height: 1.5; }
.aa-handoff .aa-handoff-status { font-size: 13px; margin-top: 8px; font-weight: 700; }
.aa-handoff .aa-handoff-status.is-error { color: var(--aspire-red); }
.aa-handoff .aa-handoff-status.is-success { color: var(--aspire-green); padding: 6px 0; }

/* ---------- Mobile: bottom sheet instead of a floating corner panel ---------- */
@media (max-width: 575px) {
  .aa-root { right: 16px; bottom: 16px; }
  .aa-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: 56px; width: auto; max-width: none;
    height: auto; max-height: none; border-radius: 20px 20px 0 0;
  }
  .aa-panel::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: rgba(18,48,68,.18); z-index: 1;
  }
  .aa-header { padding-top: 20px; }
  .aa-root.is-open .aa-toggle { position: fixed; z-index: 3; right: 16px; bottom: 16px; }
  .aa-backdrop { display: none; position: fixed; z-index: 1; inset: 0; background: rgba(18,48,68,.45); }
  .aa-root.is-open .aa-backdrop { display: block; }
  .aa-footer-link span { display: none; }
}