/* ==========================================================
   ANIMATIONS: 3D, Lottie, scroll effects + CHATBOT
   ========================================================== */

/* ---------- Loading screen ---------- */
.preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #fff; transition: opacity .5s ease, visibility .5s ease; }
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { display: grid; justify-items: center; gap: .6rem; animation: preIn .6s ease both; }
.preloader-inner img { max-height: 70px; max-width: 240px; animation: prePulse 1.6s ease-in-out infinite; }
.preloader-inner .brand-text { font-size: 1.6rem; animation: prePulse 1.6s ease-in-out infinite; }
.preloader-lottie { width: 120px; height: 36px; }
@keyframes preIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes prePulse { 50% { transform: scale(1.06); } }

/* ---------- Scroll progress bar ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--primary), var(--secondary)); }

/* ---------- Lottie ---------- */
.lottie { line-height: 0; }
.lottie svg { display: block; }
.lottie-wrap { display: flex; }
.lottie-wrap.align-center { justify-content: center; }
.lottie-wrap.align-right { justify-content: flex-end; }
.lottie-wrap .lottie-block { width: var(--lottie-size, 260px); max-width: 100%; aspect-ratio: 1 / 1; }
.section-tight { padding: 30px 0 !important; }
.why-lottie { width: 110px; height: 110px; margin: -10px 0 .4rem -12px; }
.cta-box { position: relative; overflow: hidden; }
.cta-lottie { position: absolute; right: -30px; bottom: -40px; width: 300px; height: 200px; opacity: .22; pointer-events: none; }
.cta-text, .cta-actions { position: relative; }
.widget-lottie { width: 90px; height: 90px; margin: -6px auto .2rem; }
.alert { display: flex; align-items: center; gap: .6rem; }
.alert-lottie { width: 44px; height: 44px; flex-shrink: 0; margin: -6px 0; }

/* ---------- Hero: animated background + entrance ---------- */
.hero-blobs { position: absolute; inset: -10%; pointer-events: none; transition: transform .6s ease-out; }
.hero-blobs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: blob 18s ease-in-out infinite; }
.hero-blobs span:nth-child(1) { width: 420px; height: 420px; left: 50%; top: 5%; background: color-mix(in srgb, var(--secondary) 45%, transparent); }
.hero-blobs span:nth-child(2) { width: 360px; height: 360px; left: 5%; top: 55%; background: color-mix(in srgb, var(--primary) 35%, transparent); animation-delay: -6s; animation-duration: 22s; }
.hero-blobs span:nth-child(3) { width: 260px; height: 260px; left: 75%; top: 60%; background: color-mix(in srgb, var(--primary) 25%, var(--secondary)); opacity: .3; animation-delay: -12s; }
@keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -50px) scale(1.12); } 66% { transform: translate(-30px, 30px) scale(.92); } }
.hero .container { position: relative; }
.hero-text { transition: transform .5s ease-out; }
.anim-on .hero-text > * { opacity: 0; transform: translateY(26px); }
.anim-on.loaded .hero-text > * { animation: fadeUp .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.anim-on.loaded .hero-text > :nth-child(2) { animation-delay: .12s; }
.anim-on.loaded .hero-text > :nth-child(3) { animation-delay: .24s; }
.anim-on.loaded .hero-text > :nth-child(4) { animation-delay: .36s; }
.anim-on.loaded .hero-text > :nth-child(5) { animation-delay: .48s; }
.anim-on .hero-art { opacity: 0; transform: scale(.92); }
.anim-on.loaded .hero-art { animation: zoomIn 1s .2s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes zoomIn { to { opacity: 1; transform: none; } }
/* Headline colour shimmer */
.anim-on .hero h1 { background: linear-gradient(90deg, var(--dark) 0%, var(--dark) 40%, var(--primary) 55%, var(--secondary) 65%, var(--dark) 80%, var(--dark) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.anim-on.loaded .hero h1 { animation: fadeUp .8s .12s cubic-bezier(.2, .7, .2, 1) forwards, shimmer 8s 1.5s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.rating .stars i { animation: starPop .5s ease both; }
.rating .stars i:nth-child(2) { animation-delay: .1s; } .rating .stars i:nth-child(3) { animation-delay: .2s; }
.rating .stars i:nth-child(4) { animation-delay: .3s; } .rating .stars i:nth-child(5) { animation-delay: .4s; }
@keyframes starPop { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.3); } to { transform: none; } }

/* ---------- Hero 3D scene ---------- */
.hero-3d { position: relative; width: 100%; aspect-ratio: 560 / 470; }
.hero-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.hero-3d.is-3d .hero-3d-fallback { display: none; }
.hero-3d-fallback { position: absolute; inset: 0; }
.float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: .6rem; padding: .55rem .95rem .55rem .55rem; border-radius: 16px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 16px 40px rgba(15, 31, 61, .14); animation: floatY 6s ease-in-out infinite; }
.float-card strong { display: block; font: 600 .9rem/1.2 var(--font-head); color: var(--dark); }
.float-card small { color: var(--muted); font-size: .76rem; }
.float-card small.up { color: var(--secondary); font-weight: 600; }
.fc-lottie { width: 42px; height: 42px; flex-shrink: 0; }
.fc-1 { left: -4%; bottom: 12%; }
.fc-2 { right: -2%; top: 4%; animation-delay: -2s; }
.fc-3 { right: 4%; bottom: 0; animation-delay: -4s; }
.hero-3d:not(.is-3d) .float-card { display: none; }
@keyframes floatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* ---------- Inner page banner: floating medical icons ---------- */
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-particles i { position: absolute; color: rgba(255, 255, 255, .09); font-size: 1.6rem; animation: drift 16s linear infinite; }
.hero-particles .p1 { left: 8%; top: 70%; } .hero-particles .p2 { left: 22%; top: 20%; font-size: 2.4rem; animation-duration: 20s; animation-delay: -4s; }
.hero-particles .p3 { left: 38%; top: 80%; animation-delay: -8s; } .hero-particles .p4 { left: 55%; top: 30%; font-size: 2.2rem; animation-duration: 22s; }
.hero-particles .p5 { left: 68%; top: 75%; animation-delay: -2s; } .hero-particles .p6 { left: 80%; top: 15%; font-size: 2.6rem; animation-duration: 24s; animation-delay: -10s; }
.hero-particles .p7 { left: 90%; top: 60%; animation-delay: -6s; } .hero-particles .p8 { left: 47%; top: 55%; font-size: 1.3rem; animation-delay: -12s; }
@keyframes drift { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-40px) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } }
.page-hero .container { position: relative; z-index: 1; }
.anim-on .page-hero h1, .anim-on .page-hero-text > p, .anim-on .breadcrumbs { opacity: 0; transform: translateY(20px); }
.anim-on.loaded .page-hero h1, .anim-on.loaded .page-hero-text > p, .anim-on.loaded .breadcrumbs { animation: fadeUp .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.anim-on.loaded .page-hero h1 { animation-delay: .1s; } .anim-on.loaded .page-hero-text > p { animation-delay: .2s; }

/* ---------- Inner page banner: 3D scene + Lottie card ---------- */
.page-hero-grid.has-visual { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 2rem; align-items: center; }
.page-hero-visual { position: relative; height: 290px; margin: -40px 0; }
.banner-3d { position: absolute; inset: -30px -60px -30px -40px; }
.banner-3d .hero-canvas { position: absolute; inset: 0; }
.lottie-card { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 32px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); box-shadow: 0 30px 60px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transform: perspective(800px) rotateX(var(--rx, 8deg)) rotateY(var(--ry, -14deg)); transition: transform .4s ease-out; animation: cardFloat 6s ease-in-out infinite; }
.lottie-card::before { content: ""; position: absolute; inset: -14px; border-radius: 40px; border: 1px solid rgba(255, 255, 255, .25); }
.lottie-card::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: -46px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .28); filter: blur(10px); animation: shadowPulse 6s ease-in-out infinite; }
.banner-lottie { width: 150px; height: 150px; }
@keyframes cardFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes shadowPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.85); opacity: .6; } }
.anim-on .page-hero-visual { opacity: 0; transform: scale(.85); }
.anim-on.loaded .page-hero-visual { animation: zoomIn .9s .25s cubic-bezier(.2, .7, .2, 1) forwards; }
@media (max-width: 991px) {
  .page-hero-grid.has-visual { grid-template-columns: minmax(0, 1fr) 260px; }
  .page-hero-visual { height: 220px; }
  .lottie-card { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .banner-lottie { width: 116px; height: 116px; }
}
@media (max-width: 680px) {
  .page-hero-grid.has-visual { grid-template-columns: 1fr; }
  .page-hero-visual { height: 200px; margin: 0; }
  .banner-3d { inset: -20px; }
}

/* ---------- Floating 3D objects beside sections ---------- */
.section { position: relative; }
.decor-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; }
.decor3d { position: absolute; top: 30px; width: 150px; height: 150px; pointer-events: none; display: none; }
/* Sits just outside the 1200px content area so it never covers text. */
.decor-right { left: calc(50% + 585px); }
.decor-left { right: calc(50% + 585px); }
.block-stats .decor3d, .block-cta .decor3d { top: 50%; margin-top: -75px; }
@media (min-width: 1280px) { .decor3d { display: block; } }
@media (min-width: 1560px) { .decor3d { width: 180px; height: 180px; } .block-stats .decor3d, .block-cta .decor3d { margin-top: -90px; } }

/* ---------- Lottie above section titles ---------- */
.head-lottie { width: 84px; height: 84px; margin: -14px auto 2px; }
.section-head.left .head-lottie { margin-left: -6px; }
.block-services .head-lottie { width: 190px; height: 190px; margin: -24px auto 0; }
@media (max-width: 600px) { .block-services .head-lottie { width: 150px; height: 150px; } }
.stats-grid { position: relative; }
.stats-lottie { position: absolute; left: -10px; bottom: -24px; width: 150px; height: 125px; opacity: .25; pointer-events: none; }
.stats-grid .stat { position: relative; z-index: 1; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), translate .7s cubic-bezier(.2, .7, .2, 1), scale .7s cubic-bezier(.2, .7, .2, 1); }
.reveal-up { translate: 0 34px; }
.reveal-left { translate: -34px 0; }
.reveal-right { translate: 34px 0; }
.reveal-zoom { scale: .9; }
.reveal.in { opacity: 1; translate: 0 0; scale: 1; }

/* ---------- 3D tilt cards ---------- */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
.tilt, .reveal.tilt { transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1), scale .7s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s; }
.tilt.tilting { transition: transform .08s linear, box-shadow .3s, opacity .7s, translate .7s, scale .7s !important; }
.card-link.tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.tilt .icon-box, .tilt h3 { transform: translateZ(30px); }
.tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .6), transparent 55%); opacity: 0; transition: opacity .3s; }
.tilting .tilt-glare { opacity: .7; }
.why-item, .info-card, .mv-grid > div { position: relative; }

/* Icons flip in 3D when a card is hovered */
.card-link:hover .icon-box i, .why-item:hover .icon-box i { animation: flip3d .8s ease; }
@keyframes flip3d { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.icon-box { position: relative; }
.icon-box::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent); opacity: 0; transition: opacity .3s; animation: spin 10s linear infinite; }
.card-link:hover .icon-box::after { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Buttons: shine + ripple ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); z-index: -1; }
.btn-primary:hover::before { animation: shine .8s ease; }
@keyframes shine { to { left: 130%; } }
.ripple { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: currentColor; opacity: .35; transform: scale(0); animation: ripple .65s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(30); opacity: 0; } }
.nav-cta .btn-primary { animation: ctaGlow 3s ease-in-out infinite; }
@keyframes ctaGlow { 50% { box-shadow: 0 8px 30px color-mix(in srgb, var(--primary) 55%, transparent); } }

/* ---------- Section labels: light sweep ---------- */
.section-head .eyebrow { position: relative; overflow: hidden; }
.section-head .eyebrow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); transform: translateX(-100%); animation: eyebrowShine 4s ease-in-out infinite; }
@keyframes eyebrowShine { 60%, 100% { transform: translateX(100%); } }

/* ---------- Stats: animated gradient ---------- */
.stats-grid { position: relative; overflow: hidden; background-size: 200% 200%; animation: gradientMove 10s ease infinite; }
.stats-grid::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .07); right: -60px; top: -120px; animation: spin 30s linear infinite; }
@keyframes gradientMove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.stat strong { font-variant-numeric: tabular-nums; }

/* ---------- EHR logos: endless scrolling ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: .6rem 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .chips { flex-wrap: nowrap; justify-content: flex-start; padding-right: .8rem; }
.marquee .chips li { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- CTA: moving gradient ---------- */
.cta-box { background-size: 160% 160%; animation: gradientMove 12s ease infinite; }

/* ---------- FAQ open animation ---------- */
.faq details[open] p { animation: fadeUp .4s ease forwards; opacity: 0; transform: translateY(8px); }

/* ---------- Testimonials ---------- */
.testimonial .avatar { animation: avatarPulse 3s ease-in-out infinite; }
@keyframes avatarPulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--secondary) 18%, transparent); } }

/* ==========================================================
   CHATBOT
   ========================================================== */
.chatbot { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-family: var(--font-body); }
.to-top { right: 96px; }
.chat-launcher { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--on-primary); background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--secondary))); box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 45%, transparent); transition: transform .25s; }
.chat-launcher:hover { transform: scale(1.07); }
.chat-launcher::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary); animation: ring 2.2s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.chat-launcher-icon { width: 46px; height: 46px; display: grid; place-items: center; background: #fff; border-radius: 50%; transition: transform .3s, opacity .3s; }
.chat-launcher-icon > i { color: var(--primary); font-size: 1.3rem; }
.launcher-lottie { width: 44px; height: 44px; }
.chat-launcher-close { position: absolute; font-size: 1.5rem; opacity: 0; transform: rotate(-90deg); transition: .3s; }
.is-open .chat-launcher-icon { opacity: 0; transform: scale(.4) rotate(90deg); }
.is-open .chat-launcher-close { opacity: 1; transform: none; }
.is-open .chat-launcher::before { animation: none; opacity: 0; }
.chat-badge { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; border-radius: 11px; background: #ef4444; color: #fff; font: 700 .72rem/18px var(--font-body); text-align: center; border: 2px solid #fff; animation: starPop .4s ease; }
.chat-bubble { position: absolute; right: 0; bottom: 78px; width: 250px; padding: .9rem 2rem .9rem 1rem; background: #fff; border-radius: 16px 16px 4px 16px; box-shadow: 0 14px 40px rgba(15, 31, 61, .18); font-size: .92rem; color: var(--dark); cursor: pointer; animation: bubbleIn .5s cubic-bezier(.2, .9, .3, 1.3) both; transform-origin: bottom right; }
.chat-bubble[hidden] { display: none; }
.chat-bubble-close { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }

.chat-panel { position: absolute; right: 0; bottom: 80px; width: 380px; height: min(600px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 70px rgba(15, 31, 61, .25); opacity: 0; transform: translateY(20px) scale(.96); transform-origin: bottom right; transition: opacity .25s ease, transform .25s ease; }
.chat-panel[hidden] { display: none; }
.is-open .chat-panel { opacity: 1; transform: none; }
.chat-head { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; color: #fff; background: linear-gradient(120deg, var(--dark), color-mix(in srgb, var(--primary) 80%, var(--dark))); }
.chat-avatar { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.chat-avatar > i { color: var(--primary); }
.avatar-lottie { width: 40px; height: 40px; }
.chat-title { flex: 1; min-width: 0; }
.chat-title strong { display: block; font: 600 1rem var(--font-head); }
.chat-title small { opacity: .85; font-size: .78rem; display: flex; align-items: center; gap: .35rem; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: online 2s infinite; }
@keyframes online { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
.chat-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.chat-icon-btn:hover { background: rgba(255, 255, 255, .22); }
.chat-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: linear-gradient(180deg, var(--tint), #fff 40%); }
.chat-msg { display: flex; }
.chat-msg.me { justify-content: flex-end; }
.chat-msg.pop { animation: msgIn .35s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
.chat-text { max-width: 85%; padding: .7rem .95rem; border-radius: 16px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.bot .chat-text { background: #fff; color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.me .chat-text { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 4px; }
.chat-lottie { width: 70px; height: 70px; margin: -4px auto 4px; }
.chat-links { display: grid; gap: .35rem; margin-top: .6rem; }
.chat-link { display: block; padding: .5rem .75rem; border-radius: 10px; background: var(--tint); color: var(--primary); font-weight: 600; font-size: .86rem; border: 1px solid color-mix(in srgb, var(--primary) 18%, #fff); transition: background .2s, transform .2s, color .2s; }
.chat-link:hover { background: var(--primary); color: var(--on-primary); transform: translateX(3px); }
.typing .chat-text { display: flex; gap: 4px; padding: .9rem 1rem; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-quick { display: flex; gap: .4rem; padding: .5rem .8rem; overflow-x: auto; border-top: 1px solid var(--border); scrollbar-width: none; }
.chat-quick[hidden] { display: none; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-chip { flex-shrink: 0; padding: .45rem .85rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary) 35%, #fff); background: #fff; color: var(--primary); font: 500 .82rem var(--font-body); cursor: pointer; transition: background .2s, color .2s; animation: msgIn .3s ease both; }
.chat-chip:hover { background: var(--primary); color: var(--on-primary); }
.chat-input { display: flex; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid var(--border); }
.chat-input input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: .65rem 1rem; font: inherit; font-size: 16px; background: #f7f9fc; }
.chat-input input:focus { outline: 0; border-color: var(--primary); background: #fff; }
.chat-input button { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--primary); color: var(--on-primary); cursor: pointer; transition: transform .2s; }
.chat-input button:hover { transform: scale(1.08) rotate(-10deg); }
.chat-foot { text-align: center; font-size: .7rem; color: var(--muted); padding: 0 .8rem .55rem; }

@media (max-width: 991px) {
  .fc-1 { left: 0; }
}
@media (max-width: 480px) {
  .chatbot { right: 14px; bottom: 14px; }
  .chat-panel { position: fixed; inset: 0; width: auto; height: 100%; border-radius: 0; z-index: 2; }
  .chat-launcher { width: 58px; height: 58px; }
  .is-open .chat-launcher { display: none; }
  .to-top { right: 84px; bottom: 20px; }
  .float-card { padding: .4rem .7rem .4rem .4rem; }
  .float-card strong { font-size: .8rem; }
  .fc-lottie { width: 32px; height: 32px; }
  .chat-bubble { width: 210px; }
}

/* Respect the visitor's "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .anim-on .hero-text > *, .anim-on .hero-art, .anim-on .page-hero h1, .anim-on .page-hero-text > p, .anim-on .breadcrumbs, .anim-on .page-hero-visual { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}