/* Pintu chat assistant - matches the home page (navy #121F38, orange #E47A2E, gold #F5D88A, cream). pb- prefix. */

/* ---------- floating button ---------- */
.pb-fab {
    position: fixed; right: 20px; bottom: 22px; z-index: 1100; display: flex; align-items: center; gap: 8px;
    padding: 9px 20px 9px 9px; border: 0; border-radius: 99px; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, #E47A2E, #c9531a); font: 700 15px "Montserrat", Arial, sans-serif;
    box-shadow: 0 12px 30px rgba(228,122,46,.45); transition: transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s;
    animation: pbFabIn .7s cubic-bezier(.3,1.5,.5,1) 1s both, pbNudge 6s ease-in-out 5s infinite;
}
.pb-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 38px rgba(228,122,46,.55); }
.pb-fab.open { animation: none; transform: scale(.92); }
.pb-fab-icon { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: #FFF8F0;
    display: flex; align-items: center; justify-content: center; font-size: 23px; }
.pb-fab-ring { position: absolute; left: 9px; top: 9px; width: 42px; height: 42px; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(245,216,138,.8); animation: pbRing 2.6s ease-out 2s infinite; }
.pb-fab-dot { position: absolute; top: 8px; left: 42px; width: 12px; height: 12px; border-radius: 50%; background: #2ecc71; border: 2px solid #fff; z-index: 2; }
@keyframes pbFabIn { from { opacity: 0; transform: translateY(30px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes pbNudge { 0%, 90%, 100% { transform: none; } 93% { transform: rotate(-8deg) scale(1.05); } 96% { transform: rotate(8deg) scale(1.05); } }
@keyframes pbRing { 0% { box-shadow: 0 0 0 0 rgba(245,216,138,.8); } 70%, 100% { box-shadow: 0 0 0 16px rgba(245,216,138,0); } }

/* ---------- greeting bubble ---------- */
.pb-greet {
    position: fixed; right: 22px; bottom: 92px; z-index: 1099; max-width: 250px; padding: 12px 32px 12px 15px;
    background: #fff; color: #121F38; border-radius: 18px 18px 4px 18px; box-shadow: 0 14px 34px rgba(18,31,56,.22);
    font: 600 14px/1.45 "Montserrat", Arial, sans-serif; cursor: pointer; border: 1px solid #f3c39e;
    animation: pbGreetIn .55s cubic-bezier(.3,1.5,.5,1) both;
}
.pb-greet[hidden] { display: none; }
.pb-greet-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; color: #9aa1a8; cursor: pointer; }
@keyframes pbGreetIn { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }

/* ---------- panel ---------- */
.pb-panel {
    position: fixed; right: 20px; bottom: 92px; z-index: 1101; width: 390px; max-width: calc(100vw - 24px);
    height: 600px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; overflow: hidden;
    background-color: #FFFCF7; background-image: radial-gradient(rgba(228,122,46,.08) 1.1px, transparent 1.5px); background-size: 20px 20px;
    border-radius: 24px; box-shadow: 0 28px 70px rgba(18,31,56,.38); font-family: "Montserrat", Arial, sans-serif; color: #24303f;
    transform-origin: bottom right; animation: pbOpen .45s cubic-bezier(.3,1.35,.5,1);
}
.pb-panel[hidden] { display: none; }
.pb-panel.closing { animation: pbClose .25s ease forwards; }
@keyframes pbOpen { from { opacity: 0; transform: translateY(30px) scale(.5); border-radius: 60px; } to { opacity: 1; transform: none; } }
@keyframes pbClose { to { opacity: 0; transform: translateY(20px) scale(.7); } }

.pb-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; padding: 15px 14px 15px 16px; color: #fff;
    background: radial-gradient(circle at 85% 0%, #2a3f6b 0%, #121F38 72%); }
.pb-mandala { position: absolute; right: -40px; top: -50px; width: 170px; height: 170px; color: #F5C518; opacity: .14;
    animation: pbSpin 40s linear infinite; pointer-events: none; }
.pb-mandala svg { width: 100%; height: 100%; }
@keyframes pbSpin { to { transform: rotate(360deg); } }
.pb-avatar { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #FFF8F0;
    display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 0 0 3px #E47A2E, 0 6px 14px rgba(0,0,0,.3); }
.pb-avatar.hi .pb-avatar-emoji { animation: pbHop .8s cubic-bezier(.3,1.6,.5,1); display: inline-block; }
.pb-avatar.thinking .pb-avatar-emoji { animation: pbThink 1.2s ease-in-out infinite; display: inline-block; }
.pb-wave { position: absolute; right: -8px; bottom: -4px; font-size: 18px; opacity: 0; transform-origin: 70% 70%; }
.pb-avatar.hi .pb-wave { animation: pbWave 1.6s ease .2s; }
@keyframes pbHop { 0% { transform: scale(.4) rotate(-20deg); } 60% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes pbThink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes pbWave { 0% { opacity: 1; transform: rotate(0); } 15%, 45% { transform: rotate(18deg); } 30%, 60% { transform: rotate(-12deg); } 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pb-title { position: relative; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.pb-title strong { font-family: "Great Vibes", cursive; font-weight: 400; font-size: 1.9rem; color: #F5D88A; }
.pb-title span { font-size: 12px; color: rgba(255,255,255,.78); }
.pb-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; margin-right: 5px; animation: pbBlink 2s infinite; }
@keyframes pbBlink { 50% { opacity: .35; } }
.pb-icon-btn { position: relative; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 34px; height: 34px; border-radius: 50%;
    font-size: 19px; line-height: 1; cursor: pointer; transition: background .2s, transform .3s; }
.pb-icon-btn:hover { background: rgba(255,255,255,.26); transform: rotate(90deg); }

.pb-pinned { margin: 10px 12px 2px; padding: 10px 13px 10px 38px; position: relative; border-radius: 14px; font-size: 13px; line-height: 1.5;
    background: linear-gradient(135deg, #fff4ea, #fff); border: 1px solid #f3c39e; color: #5b3a1d; animation: pbIn .5s ease .15s both; }
.pb-pinned::before { content: "📌"; position: absolute; left: 12px; top: 10px; }

/* ---------- messages ---------- */
.pb-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px; scroll-behavior: smooth; }
.pb-row { display: flex; flex-direction: column; gap: 6px; }
.pb-msg { max-width: 88%; padding: 10px 13px; border-radius: 18px; font-size: 14px; line-height: 1.55; word-wrap: break-word; }
.pb-msg a { color: inherit; text-decoration: underline; }
.pb-bot { align-self: flex-start; background: #fff; border: 1px solid #f1e2d2; border-bottom-left-radius: 5px;
    box-shadow: 0 4px 12px rgba(18,31,56,.05); animation: pbBotIn .4s cubic-bezier(.3,1.4,.5,1) both; transform-origin: bottom left; }
.pb-user { align-self: flex-end; background: linear-gradient(135deg, #1d2f55, #121F38); color: #fff; border-bottom-right-radius: 5px;
    animation: pbUserIn .35s cubic-bezier(.3,1.4,.5,1) both; transform-origin: bottom right; }
@keyframes pbBotIn { from { opacity: 0; transform: translateX(-10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pbUserIn { from { opacity: 0; transform: translateX(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pb-tools { align-self: flex-start; display: flex; gap: 6px; margin-left: 4px; }
.pb-speak { border: 0; background: none; font-size: 13px; color: #9aa1a8; cursor: pointer; padding: 0 2px; }
.pb-speak:hover, .pb-speak.on { color: #E47A2E; }
.pb-badge-ai { font-size: 10px; letter-spacing: 1px; color: #b08a5a; text-transform: uppercase; align-self: center; }
.pb-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.pb-typing i { width: 7px; height: 7px; border-radius: 50%; background: #E47A2E; animation: pbDot 1s infinite ease-in-out; }
.pb-typing i:nth-child(2) { animation-delay: .15s; } .pb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pbDot { 0%, 80%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
.pb-caret::after { content: "▍"; color: #E47A2E; animation: pbBlink .8s infinite; margin-left: 1px; }

/* ---------- rich cards ---------- */
.pb-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.pb-card { flex: 0 0 238px; scroll-snap-align: start; background: #fff; border: 1px solid #f1e2d2; border-radius: 16px; padding: 12px;
    box-shadow: 0 8px 20px rgba(18,31,56,.08); font-size: 13px; animation: pbCardIn .5s cubic-bezier(.3,1.4,.5,1) both;
    animation-delay: calc(var(--i, 0) * 80ms); }
.pb-card.next { border-color: #E47A2E; box-shadow: 0 8px 22px rgba(228,122,46,.25); }
@keyframes pbCardIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.pb-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.pb-card-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #FBF1E6; display: flex; align-items: center; justify-content: center;
    font-size: 20px; box-shadow: 0 0 0 2px #f3c39e; }
.pb-card-top strong { display: block; color: #121F38; font-size: 14px; }
.pb-card-top small { color: #6b7680; }
.pb-card p { margin: 4px 0; color: #4b5560; line-height: 1.45; }
.pb-card-badge { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border-radius: 99px;
    background: #fff1e6; color: #c25e17; white-space: nowrap; }
.pb-card-badge.today { background: #e5484d; color: #fff; }
.pb-sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); vertical-align: -1px; margin-right: 2px; }
.pb-card-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pb-card-btns a { padding: 6px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; text-decoration: none; border: 1px solid #E47A2E; color: #c25e17;
    background: #fff; transition: all .2s; }
.pb-card-btns a:first-child { background: #E47A2E; color: #fff; }
.pb-card-btns a:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(228,122,46,.3); }
.pb-handoff { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 99px; background: #25D366;
    color: #fff !important; font-weight: 700; font-size: 13.5px; text-decoration: none !important; box-shadow: 0 8px 18px rgba(37,211,102,.35);
    animation: pbBotIn .45s cubic-bezier(.3,1.4,.5,1) .15s both; }

/* ---------- guided questions (Pusad / Telhara, then Car / Travels / Bus / Train) ---------- */
.pb-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 2px 2px; }
.pb-choices.four { display: grid; grid-template-columns: 1fr 1fr; max-width: 290px; }
.pb-choice { border: 1.5px solid #E47A2E; background: #fff; color: #c25e17; border-radius: 14px; padding: 11px 16px; cursor: pointer;
    font: 700 14px "Montserrat", Arial, sans-serif; text-align: center; transition: transform .2s, box-shadow .2s, background .2s, color .2s;
    animation: pbChipIn .45s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
.pb-choice.main { background: linear-gradient(135deg, #E47A2E, #f0a05a); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(228,122,46,.3); }
.pb-choice:hover, .pb-choice:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 20px rgba(228,122,46,.35); outline: none; }
.pb-choice:active { transform: scale(.96); }
.pb-card.route { flex: 0 0 min(300px, 86%); border-left: 4px solid #E47A2E; }
.pb-pinned.small { display: none; }
.pb-route a { padding: 8px 12px; font-size: 12.5px; }
.pb-trip { align-self: flex-start; display: inline-block; margin-top: 3px; padding: 2px 9px; border: 1px solid rgba(245,216,138,.5); border-radius: 99px; background: rgba(255,255,255,.08);
    color: #F5D88A; font: 600 11px "Montserrat", Arial, sans-serif; cursor: pointer; animation: pbChipIn .4s ease both; }
.pb-trip[hidden] { display: none; }
.pb-trip u { opacity: .75; margin-left: 3px; }
.pb-trip:hover { background: rgba(245,216,138,.18); }

/* ---------- quick replies ---------- */
.pb-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 12px 9px; scrollbar-width: none; }
.pb-chips::-webkit-scrollbar { display: none; }
.pb-chip { flex: none; border: 1px solid #f3c39e; background: #fff; color: #c25e17; border-radius: 99px; padding: 7px 13px;
    font: 600 12.5px "Montserrat", Arial, sans-serif; cursor: pointer; white-space: nowrap; transition: all .2s;
    animation: pbChipIn .4s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.pb-chip:hover { background: #E47A2E; color: #fff; border-color: #E47A2E; transform: translateY(-2px); }
.pb-chip.big { padding: 10px 20px; font-size: 14px; background: #E47A2E; color: #fff; border-color: #E47A2E; box-shadow: 0 6px 16px rgba(228,122,46,.3); }
.pb-chip.ai { border-style: dashed; }
@keyframes pbChipIn { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- input ---------- */
.pb-form { display: flex; gap: 8px; align-items: center; padding: 10px 12px 12px; border-top: 1px solid #f1e2d2; background: #fff; }
.pb-form input { flex: 1; min-width: 0; border: 1px solid #ecd9c6; border-radius: 99px; padding: 11px 15px; font: 14px "Montserrat", Arial, sans-serif;
    outline: none; transition: border-color .2s, box-shadow .2s; background: #FFFCF7; }
.pb-form input:focus { border-color: #E47A2E; box-shadow: 0 0 0 3px rgba(228,122,46,.15); background: #fff; }
.pb-send, .pb-mic { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; cursor: pointer; font-size: 17px; transition: transform .2s; }
.pb-send { background: #E47A2E; color: #fff; }
.pb-send:hover { transform: scale(1.08) rotate(-8deg); }
.pb-send:disabled { opacity: .5; cursor: wait; transform: none; }
.pb-mic { background: #FBF1E6; color: #121F38; }
.pb-mic.listening { background: #e5484d; color: #fff; animation: pbPulse 1.2s infinite; }
@keyframes pbPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.6); } 100% { box-shadow: 0 0 0 14px rgba(229,72,77,0); } }

/* hearts when someone says thank you */
.pb-heart { position: absolute; z-index: 5; font-size: 20px; pointer-events: none; animation: pbHeart 1.6s ease-out forwards; }
@keyframes pbHeart { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--dx), -160px) scale(1.3); } }

/* keep clear of the site's other floating buttons */
body:has(.pb-fab) .back-to-top { bottom: 96px !important; }
@media (max-width: 991px) {
    .pb-fab { bottom: 84px; right: 12px; padding: 7px; }
    .pb-fab-label { display: none; }
    .pb-fab-ring { left: 7px; top: 7px; }
    .pb-fab-dot { left: 38px; top: 6px; }
    .pb-panel { right: 12px; bottom: 142px; }
    .pb-greet { right: 14px; bottom: 146px; }
    body:has(.pb-fab) .back-to-top { bottom: 150px !important; }
}
@media (max-width: 575px) {
    .pb-panel { left: 8px; right: 8px; width: auto; max-width: none; bottom: 78px; height: calc(100vh - 100px); max-height: none; border-radius: 20px; }
    .pb-card { flex-basis: 220px; }
}
body.portal-v2 .pb-fab { bottom: 20px; }
body.portal-v2 .pb-panel { bottom: 90px; }
body.portal-v2 .pb-greet { bottom: 92px; }
@media (max-width: 575px) { body.portal-v2 .pb-panel { bottom: 84px; height: calc(100vh - 110px); } }
@media (prefers-reduced-motion: reduce) {
    .pb-fab, .pb-fab-ring, .pb-panel, .pb-msg, .pb-card, .pb-chip, .pb-choice, .pb-trip, .pb-greet, .pb-mandala, .pb-avatar *, .pb-online { animation: none !important; }
}
@media print { .pb-fab, .pb-panel, .pb-greet { display: none !important; } }