/* ════════════════════════════════════════════════════════════════
   SOA Safari Chatbot — "Rafiki"
   Brand: #4f1507 (primary) · #e57727 (accent)
   Every rule is scoped under #soa-bot-root and uses !important on
   visual props so the host theme/Elementor cannot override the widget.
════════════════════════════════════════════════════════════════ */
#soa-bot-root {
    --bot-primary: #4f1507;
    --bot-accent:  #e57727;
    --bot-grey:    #f1ece6;
    --bot-text:    #2a2118;
    --bot-muted:   #8a7f76;
    position: fixed !important; right: 22px !important; bottom: 22px !important; z-index: 99990 !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height: 1.5 !important;
}
#soa-bot-root *, #soa-bot-root *::before, #soa-bot-root *::after {
    box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
    font-family: inherit !important; letter-spacing: normal !important;
}

/* ── Dimming overlay (mobile only) ───────────────────────────── */
#soa-bot-root .soa-bot-overlay { position: fixed !important; inset: 0 !important; background: rgba(20,8,2,.5) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .3s !important; z-index: -1 !important; }

/* ── Launcher ────────────────────────────────────────────────── */
#soa-bot-root .soa-bot-launcher {
    width: 64px !important; height: 64px !important; min-width: 0 !important; border-radius: 50% !important; border: none !important; cursor: pointer !important;
    background: linear-gradient(145deg, var(--bot-accent), var(--bot-primary)) !important;
    box-shadow: 0 10px 30px rgba(79,21,7,.45) !important;
    display: flex !important; align-items: center !important; justify-content: center !important; font-size: 30px !important; color: #fff !important; line-height: 1 !important;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1) !important; position: relative !important; margin-left: auto !important;
}
#soa-bot-root .soa-bot-launcher:hover { transform: scale(1.08) rotate(-6deg) !important; }
#soa-bot-root .soa-bot-launcher::after { content:"" !important; position:absolute !important; inset:-6px !important; border-radius:50% !important; border:2px solid var(--bot-accent) !important; opacity:.6 !important; animation: soa-bot-pulse 2.4s ease-out infinite !important; }
@keyframes soa-bot-pulse { 0%{transform:scale(1);opacity:.5} 70%{transform:scale(1.4);opacity:0} 100%{opacity:0} }
#soa-bot-root .soa-bot-badge { position:absolute !important; top:-2px !important; right:-2px !important; width:18px !important; height:18px !important; border-radius:50% !important; background:#2ecc71 !important; border:2px solid #fff !important; animation: soa-bot-blink 2s infinite !important; }
@keyframes soa-bot-blink { 50%{opacity:.4} }

/* ── Greeting bubble ─────────────────────────────────────────── */
#soa-bot-root .soa-bot-greeting { position:absolute !important; right:0 !important; bottom:78px !important; background:#fff !important; color:var(--bot-text) !important; padding:12px 16px !important; border-radius:16px 16px 4px 16px !important; box-shadow:0 8px 26px rgba(0,0,0,.16) !important; font-size:14px !important; font-weight:500 !important; width:max-content !important; max-width:230px !important; opacity:0 !important; transform:translateY(8px) scale(.9) !important; pointer-events:none !important; transition:all .35s cubic-bezier(.34,1.56,.64,1) !important; }
#soa-bot-root .soa-bot-greeting.show { opacity:1 !important; transform:translateY(0) scale(1) !important; pointer-events:auto !important; }
#soa-bot-root .soa-bot-greeting b { color: var(--bot-primary) !important; }
#soa-bot-root .soa-bot-greeting-close { position:absolute !important; top:-8px !important; right:-8px !important; width:20px !important; height:20px !important; border-radius:50% !important; background:var(--bot-primary) !important; color:#fff !important; border:none !important; cursor:pointer !important; font-size:12px !important; line-height:1 !important; padding:0 !important; }

/* ── Panel ───────────────────────────────────────────────────── */
#soa-bot-root .soa-bot-panel {
    position: absolute !important; right: 0 !important; bottom: 84px !important; left: auto !important; top: auto !important;
    width: 384px !important; max-width: calc(100vw - 32px) !important;
    height: 600px !important; max-height: calc(100vh - 130px) !important;
    background: #fff !important; border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(40,20,5,.34) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    opacity: 0 !important; transform: translateY(20px) scale(.97) !important; pointer-events: none !important;
    transition: all .3s cubic-bezier(.34,1.4,.64,1) !important; transform-origin: bottom right !important;
}
#soa-bot-root .soa-bot-panel.open { opacity: 1 !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; }

/* Header */
#soa-bot-root .soa-bot-head { background: var(--bot-primary) !important; color: #fff !important; padding: 16px 18px !important; display: flex !important; align-items: center !important; gap: 13px !important; flex-shrink: 0 !important; }
#soa-bot-root .soa-bot-avatar { width: 46px !important; height: 46px !important; min-width: 46px !important; border-radius: 50% !important; background: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; flex-shrink: 0 !important; }
#soa-bot-root .soa-bot-head-info { flex: 1 !important; min-width: 0 !important; }
#soa-bot-root .soa-bot-head-name { font-weight: 700 !important; font-size: 17px !important; color: #fff !important; font-family: 'Golos Text', sans-serif !important; line-height: 1.25 !important; }
#soa-bot-root .soa-bot-head-status { font-size: 12.5px !important; color: #fff !important; opacity: .9 !important; display: flex !important; align-items: center !important; gap: 6px !important; margin-top: 2px !important; }
#soa-bot-root .soa-bot-head-status::before { content:"" !important; width:7px !important; height:7px !important; border-radius:50% !important; background:#3ad36a !important; display:inline-block !important; flex-shrink:0 !important; }
#soa-bot-root .soa-bot-close { background: rgba(255,255,255,.14) !important; border: none !important; color:#fff !important; width:34px !important; height:34px !important; min-width:34px !important; border-radius:50% !important; cursor:pointer !important; font-size:17px !important; display:flex !important; align-items:center !important; justify-content:center !important; transition: background .2s !important; flex-shrink:0 !important; padding:0 !important; line-height:1 !important; }
#soa-bot-root .soa-bot-close:hover { background: rgba(255,255,255,.28) !important; }

/* ── Messages ────────────────────────────────────────────────── */
#soa-bot-root .soa-bot-body { flex: 1 1 auto !important; overflow-y: auto !important; padding: 20px 16px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; background: #fff !important; scroll-behavior: smooth !important; }
#soa-bot-root .soa-bot-body::-webkit-scrollbar { width: 6px !important; }
#soa-bot-root .soa-bot-body::-webkit-scrollbar-thumb { background: #ddd2c6 !important; border-radius: 3px !important; }

#soa-bot-root .soa-bot-row { display: flex !important; align-items: flex-end !important; gap: 10px !important; max-width: 92% !important; animation: soa-bot-in .3s ease !important; }
@keyframes soa-bot-in { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
#soa-bot-root .soa-bot-mini { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; background: var(--bot-primary) !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:16px !important; flex-shrink:0 !important; }

#soa-bot-root .soa-bot-msg { padding: 13px 16px !important; font-size: 14.5px !important; line-height: 1.55 !important; border-radius: 18px !important; word-wrap: break-word !important; color: var(--bot-text) !important; }
#soa-bot-root .soa-bot-msg.bot  { background: var(--bot-grey) !important; color: var(--bot-text) !important; border-bottom-left-radius: 6px !important; }
#soa-bot-root .soa-bot-msg.user { background: var(--bot-primary) !important; color: #fff !important; align-self: flex-end !important; border-bottom-right-radius: 6px !important; max-width: 84% !important; animation: soa-bot-in .3s ease !important; }
#soa-bot-root .soa-bot-msg a { color: var(--bot-accent) !important; font-weight: 600 !important; text-decoration: none !important; }
#soa-bot-root .soa-bot-msg.user a { color: #ffd9bf !important; }

/* Typing indicator */
#soa-bot-root .soa-bot-typing { display: flex !important; gap: 4px !important; padding: 14px 16px !important; background: var(--bot-grey) !important; border-radius: 18px !important; border-bottom-left-radius: 6px !important; }
#soa-bot-root .soa-bot-typing span { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--bot-muted) !important; animation: soa-bot-bounce 1.2s infinite !important; }
#soa-bot-root .soa-bot-typing span:nth-child(2){ animation-delay:.2s !important } #soa-bot-root .soa-bot-typing span:nth-child(3){ animation-delay:.4s !important }
@keyframes soa-bot-bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-6px);opacity:1} }

/* Trip card (aligned under the bot bubble) */
#soa-bot-root .soa-bot-trip { display: block !important; background:#fff !important; border:1px solid #e8ddd0 !important; border-radius:14px !important; padding:13px 15px !important; margin: 0 0 0 42px !important; text-decoration:none !important; color:var(--bot-text) !important; transition: transform .15s, box-shadow .15s, border-color .15s !important; animation: soa-bot-in .3s ease !important; }
#soa-bot-root .soa-bot-trip:hover { transform: translateY(-2px) !important; box-shadow:0 8px 20px rgba(79,21,7,.14) !important; border-color: var(--bot-accent) !important; }
#soa-bot-root .soa-bot-trip-title { font-weight:700 !important; font-size:13.5px !important; color:var(--bot-primary) !important; line-height:1.35 !important; }
#soa-bot-root .soa-bot-trip-meta { font-size:12px !important; color:var(--bot-muted) !important; margin-top:5px !important; display:flex !important; gap:10px !important; flex-wrap:wrap !important; }
#soa-bot-root .soa-bot-trip-meta span { color:var(--bot-muted) !important; }
#soa-bot-root .soa-bot-trip-cta { display:inline-block !important; margin-top:9px !important; font-size:12px !important; font-weight:700 !important; color:var(--bot-accent) !important; }

/* ── Quick replies ───────────────────────────────────────────── */
#soa-bot-root .soa-bot-chips { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; padding: 4px 16px 16px !important; background:#fff !important; flex-shrink:0 !important; }
#soa-bot-root .soa-bot-chip { background:#fff !important; border:1.5px solid var(--bot-primary) !important; color:var(--bot-primary) !important; padding:10px 17px !important; border-radius:22px !important; font-size:13.5px !important; font-weight:600 !important; line-height:1.2 !important; cursor:pointer !important; transition: all .18s !important; width:auto !important; height:auto !important; text-transform:none !important; letter-spacing:normal !important; box-shadow:none !important; }
#soa-bot-root .soa-bot-chip:hover { background: var(--bot-primary) !important; color:#fff !important; transform: translateY(-1px) !important; }

/* ── Input ───────────────────────────────────────────────────── */
#soa-bot-root .soa-bot-input { display: flex !important; gap: 10px !important; padding: 14px 16px !important; background:#fff !important; border-top:1px solid #f0e8de !important; align-items:center !important; flex-shrink:0 !important; }
#soa-bot-root .soa-bot-input input { flex:1 1 auto !important; width:auto !important; min-width:0 !important; border:1.5px solid #e3dad0 !important; border-radius:26px !important; padding:13px 18px !important; font-size:15px !important; color:var(--bot-text) !important; background:#fff !important; outline:none !important; transition:border-color .2s !important; height:auto !important; box-shadow:none !important; }
#soa-bot-root .soa-bot-input input:focus { border-color: var(--bot-accent) !important; }
#soa-bot-root .soa-bot-input input::placeholder { color:#b6a89c !important; opacity:1 !important; }
#soa-bot-root .soa-bot-send { width:48px !important; height:48px !important; min-width:48px !important; border-radius:50% !important; border:none !important; background: var(--bot-primary) !important; color:#fff !important; cursor:pointer !important; flex-shrink:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; transition:transform .15s, background .2s !important; box-shadow:none !important; }
#soa-bot-root .soa-bot-send:hover { transform: scale(1.07) !important; background:#6e2410 !important; }
#soa-bot-root .soa-bot-send svg { width:20px !important; height:20px !important; fill:#fff !important; }
#soa-bot-root .soa-bot-foot { text-align:center !important; font-size:10.5px !important; color:var(--bot-muted) !important; padding:0 0 10px !important; background:#fff !important; flex-shrink:0 !important; }
#soa-bot-root .soa-bot-foot b { color: var(--bot-primary) !important; }

/* ── Mobile: bottom sheet ────────────────────────────────────── */
@media (max-width: 600px) {
    #soa-bot-root { right: 16px !important; bottom: 16px !important; }
    #soa-bot-root .soa-bot-launcher { width: 56px !important; height: 56px !important; font-size: 26px !important; }
    #soa-bot-root .soa-bot-greeting { bottom: 70px !important; max-width: 190px !important; font-size: 13px !important; }

    #soa-bot-root .soa-bot-panel {
        position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        width: 100% !important; max-width: none !important;
        height: 90vh !important; height: 90dvh !important; max-height: 90dvh !important;
        border-radius: 24px 24px 0 0 !important;
        transform: translateY(100%) !important; transform-origin: bottom center !important;
        transition: transform .34s cubic-bezier(.34,1.3,.64,1), opacity .25s !important;
    }
    #soa-bot-root .soa-bot-panel.open { transform: translateY(0) !important; }
    #soa-bot-root .soa-bot-panel.open ~ .soa-bot-launcher { display: none !important; }
    #soa-bot-root .soa-bot-overlay.show { opacity: 1 !important; pointer-events: auto !important; }

    #soa-bot-root .soa-bot-head  { padding: max(18px, env(safe-area-inset-top)) 18px 18px !important; }
    #soa-bot-root .soa-bot-body  { padding: 20px 16px !important; }
    #soa-bot-root .soa-bot-msg   { font-size: 15px !important; }
    #soa-bot-root .soa-bot-chip  { padding: 11px 18px !important; font-size: 14px !important; }
    #soa-bot-root .soa-bot-input input { font-size: 16px !important; } /* avoids iOS zoom */
    #soa-bot-root .soa-bot-send  { width: 50px !important; height: 50px !important; min-width:50px !important; }
    #soa-bot-root .soa-bot-input { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important; }
    #soa-bot-root .soa-bot-foot  { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
}