/* ================================================================
   Alti chatbot — fully scoped (.alti-*). Nothing here touches the
   website's own classes. Sizes use em so the phone layout can scale
   the whole widget by changing --alti-fs only.
   ================================================================ */
.alti-root { --alti-fs: 14px; --alti-navy: #0A4174; --alti-blue: #1d6fb8; --alti-sky: #eaf3ff; --alti-line: #d6e4f3; --alti-ink: #0b2540; --alti-mute: #5b7391; --alti-green: #1faa59;
  font-size: var(--alti-fs); line-height: 1.5; color: var(--alti-ink); font-family: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif; text-align: left; }
.alti-root *, .alti-root *::before, .alti-root *::after { box-sizing: border-box; }
.alti-root [hidden] { display: none !important; }
:where(.alti-root) button, :where(.alti-root) input { font: inherit; }

/* ---------- floating button ---------- */
.alti-fab { position: fixed; right: 20px; bottom: 20px; width: 4.6em; height: 4.6em; z-index: 9998; border: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent; animation: altiFloat 3s ease-in-out infinite; }
.alti-root:not(.alti-phone) .alti-fab { width: 66px; height: 66px; }
.alti-fab::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; background: rgba(10,65,116,.28); animation: altiRipple 2.4s ease-out infinite; z-index: -1; }
.alti-fab:hover { transform: scale(1.07); animation-play-state: paused; }
.alti-fab:focus-visible { outline: 3px solid #ff9f1c; outline-offset: 3px; border-radius: 50%; }
.alti-root.alti-open .alti-fab { animation: none; }
.alti-root.alti-open .alti-fab::before { animation: none; opacity: 0; }
.alti-fab-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 .4em .7em rgba(10,65,116,.38)); transform-origin: 50% 90%; animation: altiWiggle 7s ease-in-out infinite; }
.alti-badge { position: absolute; top: 0; right: 0; min-width: 1.45em; height: 1.45em; padding: 0 .3em; border-radius: 99px; background: #ff4d6d; color: #fff; font-size: .78em; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: .15em solid #fff; animation: altiPop 1.6s ease-in-out infinite; }

/* ---------- greeting bubble ---------- */
.alti-greet { position: fixed; right: 96px; bottom: 34px; z-index: 9998; max-width: 15em; background: #fff; border: 1px solid var(--alti-line); border-radius: 1.1em 1.1em .2em 1.1em;
  padding: .7em 1em; font-size: .95em; font-weight: 600; color: var(--alti-navy); box-shadow: 0 .6em 1.5em rgba(10,65,116,.18); cursor: pointer; animation: altiBob 2.6s ease-in-out infinite; }
.alti-greet-x { position: absolute; top: -.5em; left: -.5em; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid var(--alti-line); background: #fff; color: var(--alti-mute); font-size: 1em; line-height: 1; cursor: pointer; padding: 0; }

/* ---------- window ---------- */
.alti-window { position: fixed; right: 20px; bottom: 102px; z-index: 9999; width: 380px; height: min(580px, calc(100vh - 124px)); display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--alti-line); border-radius: 1.4em; overflow: hidden; box-shadow: 0 1.5em 3.5em rgba(5,30,60,.32);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96); transform-origin: 100% 100%; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
.alti-root.alti-open .alti-window { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .22s ease, transform .22s ease; }
.alti-root.alti-phone .alti-window { right: auto; bottom: auto; border-radius: 1.2em; }
.alti-root.alti-phone.alti-open .alti-fab, .alti-root.alti-phone.alti-open .alti-greet { visibility: hidden; }
@media (max-width: 480px) { .alti-root:not(.alti-phone) .alti-window { right: 8px; left: 8px; width: auto; bottom: 84px; } }

.alti-head { display: flex; align-items: center; gap: .7em; padding: .7em .8em .7em .9em; color: #fff; background: linear-gradient(120deg, #0A4174, #1d6fb8); flex: none; }
.alti-head-av { width: 2.9em; height: 2.9em; border-radius: 50%; background: #fff; flex: none; padding: .15em; display: block; }
.alti-head-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.alti-head-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.alti-head-txt b { font-size: 1.15em; }
.alti-head-txt > span { font-size: .85em; opacity: .92; }
.alti-head-txt small { font-size: .78em; display: flex; align-items: center; gap: .4em; margin-top: .15em; opacity: .95; }
.alti-dot { position: relative; width: .6em; height: .6em; border-radius: 50%; background: #4ade80; display: inline-block; flex: none; }
.alti-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #4ade80; animation: altiRipple 1.8s ease-out infinite; }
.alti-dot.off { background: #fbbf24; } .alti-dot.off::after { display: none; }
.alti-head-btns { display: flex; gap: .15em; flex: none; }
.alti-ib { width: 2.3em; height: 2.3em; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.alti-ib svg { width: 1.15em; height: 1.15em; }
.alti-ib:hover { background: rgba(255,255,255,.28); }
.alti-offline { background: #fff7e0; color: #7a5200; font-size: .82em; padding: .45em .9em; border-bottom: 1px solid #f3dca0; flex: none; }

/* ---------- messages ---------- */
.alti-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .9em .75em 1em; background: linear-gradient(#f5f9ff, #edf4fc); scroll-behavior: smooth; }
.alti-row { display: flex; align-items: flex-end; gap: .5em; margin-bottom: .8em; }
.alti-row.alti-user { justify-content: flex-end; }
.alti-in { animation: altiIn .28s ease both; }
.alti-av { width: 2em; height: 2em; border-radius: 50%; background: #fff; border: 1px solid var(--alti-line); flex: none; padding: .12em; display: block; }
.alti-mini { width: 100%; height: 100%; display: block; overflow: visible; }
.alti-col { max-width: 84%; min-width: 0; display: flex; flex-direction: column; }
.alti-row.alti-user .alti-col { align-items: flex-end; max-width: 80%; }
.alti-msg { padding: .65em .9em; border-radius: 1.1em; font-size: 1em; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }
.alti-msg.alti-bot { background: #fff; border: 1px solid var(--alti-line); border-bottom-left-radius: .25em; box-shadow: 0 .15em .5em rgba(10,65,116,.06); }
.alti-msg.alti-user { background: linear-gradient(120deg, #0A4174, #1d6fb8); color: #fff; border-bottom-right-radius: .25em; }
.alti-msg.alti-err { background: #fff4f4; border-color: #f2c4c4; }
.alti-msg p { margin: 0 0 .45em; } .alti-msg p:last-child { margin-bottom: 0; }
.alti-ul, .alti-ol { margin: .2em 0 .45em; padding-left: 1.3em; } .alti-ul li, .alti-ol li { margin: .12em 0; }
.alti-eq { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; background: #f1f7ff; border-left: .22em solid var(--alti-blue); padding: .25em .6em; margin: .2em 0; border-radius: .3em; font-size: .95em; }
.alti-meta { display: flex; align-items: center; gap: .7em; margin: .2em .3em 0; font-size: .74em; color: var(--alti-mute); }
.alti-copy { border: 0; background: none; color: var(--alti-blue); cursor: pointer; font-size: 1em; padding: .1em .2em; text-decoration: underline; }
.alti-conf { font-weight: 700; }
.alti-acts { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .5em; }
.alti-act { border: 1px solid #b9d3f0; background: #eaf3ff; color: var(--alti-navy); border-radius: 99px; padding: .5em .95em; font-size: .9em; font-weight: 700; cursor: pointer; text-align: left; line-height: 1.25; }
.alti-act:hover, .alti-act:active { background: var(--alti-navy); color: #fff; border-color: var(--alti-navy); }
.alti-act.alti-wa { background: var(--alti-green); border-color: var(--alti-green); color: #fff; }
.alti-det { margin-top: .5em; background: #fff; border: 1px solid var(--alti-line); border-radius: .8em; padding: .35em .7em; font-size: .92em; }
.alti-det summary { cursor: pointer; font-weight: 700; color: var(--alti-navy); }
.alti-chlist { max-height: 14em; overflow-y: auto; margin: .4em 0 .2em; }
.alti-chips { margin: -.2em 0 .9em 2.5em; animation: altiIn .3s ease both; }
.alti-chips-t { font-size: .78em; color: var(--alti-mute); margin-bottom: .3em; }
.alti-chips-w { display: flex; flex-wrap: wrap; gap: .4em; }
.alti-chip { border: 1px solid #b9d3f0; background: #fff; color: var(--alti-navy); border-radius: 99px; padding: .45em .85em; font-size: .88em; font-weight: 600; cursor: pointer; line-height: 1.25; text-align: left; }
.alti-chip:hover, .alti-chip:active { background: var(--alti-navy); color: #fff; }
.alti-typing { display: flex; gap: .3em; padding: .85em 1em; }
.alti-typing span { width: .55em; height: .55em; border-radius: 50%; background: #7a93b3; animation: altiDot 1.1s infinite; }
.alti-typing span:nth-child(2) { animation-delay: .15s; } .alti-typing span:nth-child(3) { animation-delay: .3s; }
.alti-typing-t { font-size: .74em; color: var(--alti-mute); align-self: center; }
.alti-talk .alti-mouth { transform-box: fill-box; transform-origin: center; animation: altiTalk .35s ease-in-out infinite; }
.alti-scroll { position: absolute; right: 1em; bottom: 4.6em; width: 2.4em; height: 2.4em; border-radius: 50%; border: 1px solid var(--alti-line); background: #fff; color: var(--alti-navy); font-size: 1.1em; cursor: pointer; box-shadow: 0 .3em .8em rgba(10,65,116,.2); z-index: 2; padding: 0; }

/* ---------- input ---------- */
.alti-foot { display: flex; gap: .5em; padding: .65em; border-top: 1px solid var(--alti-line); background: #fff; flex: none; }
.alti-input { flex: 1; min-width: 0; border: 1.5px solid var(--alti-line); border-radius: 99px; padding: .6em 1em; font-size: 1em; font-family: inherit; color: var(--alti-ink); background: #fff; outline: none; }
.alti-root.alti-phone .alti-input { font-size: 1.15em; }
.alti-input:focus { border-color: var(--alti-blue); box-shadow: 0 0 0 .2em rgba(29,111,184,.15); }
.alti-input.alti-shake { animation: altiShake .35s; border-color: #e5484d; }
.alti-send { width: 2.8em; height: 2.8em; flex: none; border: 0; border-radius: 50%; background: linear-gradient(120deg, #0A4174, #1d6fb8); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.alti-send svg { width: 1.2em; height: 1.2em; }
.alti-send:disabled { opacity: .55; cursor: default; }

/* ---------- mascot animation ---------- */
.alti-eyes { transform-box: fill-box; transform-origin: center; animation: altiBlink 4s infinite; }
.alti-bulb { animation: altiBulb 1.4s ease-in-out infinite; }
.alti-ant { transform-box: fill-box; transform-origin: 50% 100%; animation: altiAnt 3s ease-in-out infinite; }
.alti-busy .alti-head-svg .alti-mouth { transform-box: fill-box; transform-origin: center; animation: altiTalk .35s ease-in-out infinite; }
@keyframes altiFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes altiBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes altiRipple { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes altiBlink { 0%,90%,100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes altiBulb { 0%,100% { fill: #ff9f1c; } 50% { fill: #ffe066; } }
@keyframes altiAnt { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes altiWiggle { 0%,86%,100% { transform: rotate(0); } 89% { transform: rotate(-9deg); } 92% { transform: rotate(8deg); } 95% { transform: rotate(-5deg); } 98% { transform: rotate(3deg); } }
@keyframes altiPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes altiTalk { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.9); } }
@keyframes altiDot { 0%,80%,100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-.35em); opacity: 1; } }
@keyframes altiIn { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes altiShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .alti-root *, .alti-root *::before { animation: none !important; transition: none !important; } }