/* =====================================================================================
   Chat window design (voice first). Loaded after chatbot.css, so these rules override the plain ones there.
   Voice states come from chatbot.js as  #chat-window[data-voice="idle|listening|thinking|speaking"]
   and  [data-agent="on|off"];  voice_ui.js adds .live-meter while the waveform follows real audio.
   ===================================================================================== */
.chat-window {
  --level: 0;
  --g1: #0e7a3a; --g2: #095229; --ink: #0b3d2e; --mint: #e9f7ee;
  width: min(440px, calc(100vw - 24px)); height: min(790px, calc(100vh - 104px));
  right: 20px; bottom: 98px; border-radius: 26px; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(233, 247, 238, 0) 0, rgba(233, 247, 238, .55) 150px, var(--mint) 340px),
    url("ui/temple.jpg") center top / auto 340px no-repeat, var(--mint);
  box-shadow: 0 24px 60px rgba(5, 60, 30, .5), 0 0 0 1px rgba(11, 107, 46, .18);
  font-family: "Segoe UI", "Nirmala UI", system-ui, sans-serif;
  /* smooth open / close */
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(26px) scale(.93); transform-origin: 90% 100%;
  transition: opacity .28s ease, transform .42s cubic-bezier(.2, .9, .3, 1.15), visibility 0s linear .42s;
}
.chat-window.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
@media (max-width: 480px) { .chat-window { right: 8px; left: 8px; width: auto; bottom: 84px; height: calc(100dvh - 100px); } }

/* ---------- header ---------- */
.chat-header {
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%); color: #fff; padding: 10px 12px; gap: 10px;
  align-items: center; justify-content: flex-start; font-weight: 400; min-height: 60px; flex: none; position: relative; z-index: 2;
  box-shadow: 0 4px 18px rgba(5, 60, 30, .3);
}
.hdr-logo { width: 46px; height: 46px; object-fit: contain; flex: none; background: #fff; border-radius: 50%; padding: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.hdr-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.hdr-title { font: 700 17px "Segoe UI", "Nirmala UI", sans-serif; overflow-wrap: anywhere; letter-spacing: .1px; }
.hdr-tag { font: 400 11.5px "Segoe UI", sans-serif; opacity: .88; margin-top: 2px; }
.header-actions { gap: 8px; flex: none; }
.chat-header .header-actions button {
  width: 34px; height: 34px; background: rgba(255, 255, 255, .15); display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: background .2s, transform .2s;
}
.chat-header .header-actions button[hidden] { display: none; }
.chat-header .header-actions button svg { width: 18px; height: 18px; }
.chat-header .header-actions button:hover { background: rgba(255, 255, 255, .32); transform: scale(1.08); }
.chat-header .header-actions button:active { transform: scale(.94); }
.chat-window[data-voice="speaking"] #chat-speaker { background: rgba(61, 220, 74, .35); animation: spk 1s ease-in-out infinite; }
@keyframes spk { 50% { box-shadow: 0 0 0 6px rgba(61, 220, 74, .25); } }

/* ---------- language pills ---------- */
.lang-bar { background: transparent; border: 0; padding: 10px 10px 4px; gap: 5px; flex: none; position: relative; z-index: 1; }
.lang-bar button {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid rgba(211, 230, 217, .9); background: rgba(255, 255, 255, .94); color: var(--ink); border-radius: 999px; padding: 7px 8px;
  font: 600 12.5px "Segoe UI", "Nirmala UI", sans-serif; box-shadow: 0 3px 10px rgba(11, 107, 46, .15);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s, background .2s;
}
.lang-bar button svg { width: 14px; height: 14px; flex: none; }
.lang-bar .lang-ico { flex: none; min-width: 24px; height: 24px; padding: 0 3px; box-sizing: border-box; border-radius: 12px; display: grid; place-items: center; font: 700 14px/1 "Nirmala UI", "Segoe UI", sans-serif; font-style: normal; background: rgba(11, 107, 46, .12); color: var(--g1); }
.lang-bar button.active .lang-ico { background: rgba(255, 255, 255, .25); color: #fff; }
.lang-bar button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-bar button:hover { transform: translateY(-2px); background: #fff; color: var(--ink); }
.lang-bar button:active { transform: scale(.95); }
.lang-bar button.active {
  background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; border-color: #3ddc4a;
  box-shadow: 0 0 0 2px rgba(61, 220, 74, .55), 0 6px 16px rgba(11, 107, 46, .45);
}

/* ---------- conversation ---------- */
.chat-messages {
  padding: 12px 14px 8px; gap: 10px; background: transparent; scroll-behavior: smooth; position: relative;
  scrollbar-width: thin; scrollbar-color: rgba(11, 107, 46, .35) transparent;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(11, 107, 46, .3); border-radius: 6px; }

.msg { border-radius: 18px; max-width: 88%; font-size: 14.5px; line-height: 1.4; box-shadow: 0 3px 12px rgba(11, 107, 46, .12); position: relative; }
.msg.bot {
  border: 1px solid rgba(255, 255, 255, .8); color: var(--ink); background: rgba(255, 255, 255, .96);
  padding: 10px 40px 10px 48px; transform-origin: left bottom; animation: msg-bot .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
.msg.user {
  background: linear-gradient(135deg, var(--g1), var(--g2)); transform-origin: right bottom; animation: msg-user .45s cubic-bezier(.2, .9, .3, 1.2) both;
  box-shadow: 0 6px 16px rgba(11, 107, 46, .35);
}
@keyframes msg-bot { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes msg-user { from { opacity: 0; transform: translateX(18px) scale(.94); } to { opacity: 1; transform: none; } }

.msg .avatar { position: absolute; left: 9px; top: 9px; width: 31px; height: 31px; border-radius: 50%; box-shadow: 0 2px 6px rgba(11, 107, 46, .3); }
.msg .avatar svg { width: 100%; height: 100%; display: block; }
.msg.bot.speaking-now { box-shadow: 0 0 0 2px rgba(61, 220, 74, .7), 0 8px 24px rgba(11, 107, 46, .3); }
.msg.bot.speaking-now .avatar { animation: av 1s ease-in-out infinite; }
@keyframes av { 50% { box-shadow: 0 0 0 7px rgba(61, 220, 74, .3); transform: scale(1.08); } }

/* "listen" button on every reply */
.listen-btn {
  position: absolute; top: 7px; right: 7px; width: 27px; height: 27px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #0b6b2e; background: rgba(11, 107, 46, .1);
  opacity: .55; transition: opacity .2s, background .2s, transform .2s;
}
.listen-btn svg { width: 16px; height: 16px; }
.listen-btn .ico-stop { display: none; }
.msg.speaking-now .listen-btn .ico-replay { display: none; }
.msg.speaking-now .listen-btn .ico-stop { display: block; }
.msg:hover .listen-btn, .listen-btn:focus-visible, .msg.speaking-now .listen-btn { opacity: 1; }
.listen-btn:hover { background: #0b6b2e; color: #fff; transform: scale(1.12); }
.msg.speaking-now .listen-btn { background: #0b6b2e; color: #fff; animation: spk 1s ease-in-out infinite; }

/* the opening message is the mascot's speech bubble */
.chat-messages > .msg.bot.hero {
  margin: 10px 0 6px 94px; max-width: calc(100% - 94px); padding: 12px 36px 12px 15px; font-size: 15px; font-weight: 600;
  border-radius: 22px; box-shadow: 0 8px 22px rgba(11, 107, 46, .22);
}
.hero .avatar { display: none; }
.hero-mascot { position: absolute; left: -96px; top: 50%; width: 90px; height: 90px; transform: translateY(-50%); }
.hero-mascot .mascot { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(11, 107, 46, .25)); }
.chat-messages > .msg.bot.hero::after {
  content: ""; position: absolute; left: -9px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-right-color: rgba(255, 255, 255, .96); border-left: 0;
}

/* thinking: three bouncing dots at the end of the conversation (a pseudo element, so the message list is untouched) */
.chat-window[data-voice="thinking"] .chat-messages::after {
  content: ""; align-self: flex-start; width: 58px; height: 34px; border-radius: 18px; flex: none;
  background:
    radial-gradient(circle at 17px 17px, #2fae4a 4px, transparent 5px),
    radial-gradient(circle at 29px 17px, #5cc878 4px, transparent 5px),
    radial-gradient(circle at 41px 17px, #98dcab 4px, transparent 5px),
    rgba(255, 255, 255, .96);
  box-shadow: 0 3px 12px rgba(11, 107, 46, .15); animation: msg-bot .4s both, think 1s ease-in-out .4s infinite;
}
@keyframes think { 50% { transform: translateY(-3px); } }

/* ---------- mascot ---------- */
.mascot .m-float { animation: m-float 4s ease-in-out infinite; }
@keyframes m-float { 50% { transform: translateY(-4px); } }
.m-eye { transform-box: fill-box; transform-origin: center; animation: m-blink 5.2s infinite; }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
.m-bulb { animation: m-bulb 2.4s ease-in-out infinite; }
@keyframes m-bulb { 50% { fill: #5bff8a; filter: drop-shadow(0 0 5px #5bff8a); } }
.m-halo, .m-ring { transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--level, 0) * .07)); transition: transform .08s linear; }
.m-bars rect { transform-box: fill-box; transform-origin: center; fill: #2fae4a; opacity: .32; transform: scaleY(.55); transition: opacity .3s; }
.m-ear { transition: filter .3s; }
.m-mouth { transform-box: fill-box; transform-origin: center; }

.chat-window[data-voice="listening"] .m-bars rect, .chat-window[data-voice="speaking"] .m-bars rect { opacity: .95; animation: m-bar .85s ease-in-out infinite; }
.m-bars rect:nth-child(2) { animation-delay: .15s !important; } .m-bars rect:nth-child(3) { animation-delay: .3s !important; }
@keyframes m-bar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.25); } }
.chat-window[data-voice="listening"] .m-ear { fill: #3ddc4a; filter: drop-shadow(0 0 7px #3ddc4a); animation: m-ear 1s ease-in-out infinite; }
@keyframes m-ear { 50% { filter: drop-shadow(0 0 13px #7dff9a); } }
.chat-window[data-voice="speaking"] .m-mouth { animation: m-talk .3s ease-in-out infinite alternate; }
@keyframes m-talk { from { transform: scaleY(.5) scaleX(.9); } to { transform: scaleY(1.7) scaleX(1.05); } }
.chat-window[data-voice="thinking"] .m-eyes { animation: m-scan 1s ease-in-out infinite alternate; }
@keyframes m-scan { from { transform: translateX(-5px); } to { transform: translateX(5px); } }

/* ---------- chips ---------- */
.chips { gap: 7px; }
.chip {
  border-radius: 999px; border: 1px solid #b6d9c1; background: rgba(255, 255, 255, .96); color: var(--ink);
  box-shadow: 0 2px 7px rgba(11, 107, 46, .12); animation: pop .42s cubic-bezier(.2, .9, .3, 1.3) both;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), background .2s, color .2s, box-shadow .2s;
}
.chip:nth-child(2) { animation-delay: .05s; } .chip:nth-child(3) { animation-delay: .1s; } .chip:nth-child(4) { animation-delay: .15s; }
.chip:nth-child(5) { animation-delay: .2s; } .chip:nth-child(6) { animation-delay: .25s; } .chip:nth-child(n+7) { animation-delay: .3s; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(11, 107, 46, .25); }
.chip:active { transform: scale(.95); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- department cards ---------- */
.cards { grid-template-columns: repeat(6, 1fr); gap: 10px; }
.card { grid-column: span 2; }
.card:nth-child(n+4) { grid-column: span 3; }
.card {
  position: relative; align-items: flex-start; text-align: left; gap: 2px; padding: 10px 11px 14px;
  border: 1px solid rgba(219, 234, 223, .9); border-top: 1px solid rgba(219, 234, 223, .9); border-radius: 18px; overflow: hidden;
  background: rgba(255, 255, 255, .96); box-shadow: 0 5px 16px rgba(11, 107, 46, .15);
  animation: card-in .6s cubic-bezier(.2, .9, .3, 1.25) both; transition: transform .22s cubic-bezier(.2, .9, .3, 1.4), box-shadow .22s;
}
.card:nth-child(2) { animation-delay: .07s; } .card:nth-child(3) { animation-delay: .14s; } .card:nth-child(4) { animation-delay: .21s; } .card:nth-child(5) { animation-delay: .28s; }
@keyframes card-in { from { opacity: 0; transform: translateY(22px) scale(.9); } to { opacity: 1; transform: none; } }
.card::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -15px; height: 36px; border-radius: 50%; background: var(--tone, #dff3e6); opacity: .9; pointer-events: none; transition: transform .35s; }
.card > * { position: relative; z-index: 1; }
.card:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 14px 28px rgba(11, 107, 46, .28); }
.card:hover::after { transform: translateY(-6px) scaleX(1.1); }
.card:active { transform: scale(.97); }
.card-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--tone, #dff3e6); color: var(--tone-ink, #0b6b2e); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .06); }
.card-icon svg { width: 21px; height: 21px; }
.card-name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.card-sub { font-size: 10.5px; line-height: 1.3; color: #5f6f67; padding-right: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.card .card-go {
  position: absolute; top: 10px; right: 9px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: #0b6b2e; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; transition: transform .22s;
}
.card:hover .card-go { transform: translateX(3px); }
.tone-pink { --tone: #fbe3f1; --tone-ink: #c0398a; } .tone-gold { --tone: #fdecc4; --tone-ink: #b7791f; }
.tone-violet { --tone: #e3e1fa; --tone-ink: #4f46c8; } .tone-green { --tone: #d9f2e1; --tone-ink: #0b6b2e; } .tone-blue { --tone: #dde6fb; --tone-ink: #2f55c4; }

/* ---------- voice dock: orb, waveform, status ---------- */
.voice-dock {
  flex: none; position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 12px 0;
  background: linear-gradient(rgba(233, 247, 238, 0), rgba(213, 240, 222, .92) 55%);
}
.voice-dock.no-mic { display: none; }
.orb-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.wave { flex: 1; display: flex; align-items: center; gap: 5px; height: 50px; min-width: 0; }
.wave.right { flex-direction: row-reverse; }
.wave i {
  flex: 1; max-width: 8px; height: 100%; border-radius: 5px; background: linear-gradient(#45d86f, #0f8a3b);
  transform: scaleY(var(--h, .13)); opacity: .3; transition: transform .07s linear, opacity .3s;
}
.wave i:nth-child(1) { opacity: .18; } .wave i:nth-child(2) { opacity: .24; } .wave i:nth-child(3) { opacity: .3; }
.chat-window[data-voice="listening"] .wave i, .chat-window[data-voice="speaking"] .wave i { opacity: .95; }
/* when no real audio level is available the bars still move */
.chat-window:not(.live-meter)[data-voice="listening"] .wave i, .chat-window:not(.live-meter)[data-voice="speaking"] .wave i { animation: wv .9s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: .12s !important; } .wave i:nth-child(3n) { animation-delay: .26s !important; } .wave i:nth-child(5n) { animation-delay: .4s !important; }
@keyframes wv { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(.95); } }
.chat-window[data-voice="idle"] .wave i { animation: wi 2.8s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: .2s; } .wave i:nth-child(3n) { animation-delay: .5s; }
@keyframes wi { 0%, 100% { transform: scaleY(.12); } 50% { transform: scaleY(.3); } }
.chat-window[data-voice="thinking"] .wave i { animation: wk 1.1s ease-in-out infinite; opacity: .6; }
.wave i:nth-child(odd) { --d: .0s; }
@keyframes wk { 0%, 100% { transform: scaleY(.14); } 50% { transform: scaleY(.4); } }

.orb {
  position: relative; flex: none; width: 76px; height: 76px; border: 0; padding: 0; border-radius: 50%; color: #fff; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 26%, #4bdc78 0%, #139343 52%, #0a5a2a 100%);
  box-shadow: 0 12px 28px rgba(11, 107, 46, .5), inset 0 3px 9px rgba(255, 255, 255, .38);
  transform: scale(calc(1 + var(--level, 0) * .13)); transition: transform .08s linear, filter .2s;
  animation: breathe 3.4s ease-in-out infinite; -webkit-tap-highlight-color: transparent;
}
@keyframes breathe { 50% { box-shadow: 0 14px 34px rgba(11, 107, 46, .62), 0 0 0 9px rgba(61, 220, 74, .14), inset 0 3px 9px rgba(255, 255, 255, .38); } }
.orb:hover { filter: brightness(1.08); }
.orb:active { transform: scale(.94); }
.orb svg { grid-area: 1 / 1; width: 34px; height: 34px; transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.orb .ico-eq, .orb .ico-stop { opacity: 0; transform: scale(.5); }
.chat-window[data-voice="speaking"] .orb .ico-mic, .chat-window[data-voice="thinking"] .orb .ico-mic { opacity: 0; transform: scale(.5); }
.chat-window[data-voice="speaking"] .orb .ico-eq { opacity: 1; transform: none; }
.chat-window[data-voice="speaking"] .orb .ico-eq rect { transform-box: fill-box; transform-origin: center; animation: eq .7s ease-in-out infinite alternate; }
.orb .ico-eq rect:nth-child(2) { animation-delay: .1s !important; } .orb .ico-eq rect:nth-child(3) { animation-delay: .2s !important; } .orb .ico-eq rect:nth-child(4) { animation-delay: .3s !important; } .orb .ico-eq rect:nth-child(5) { animation-delay: .4s !important; }
@keyframes eq { from { transform: scaleY(.45); } to { transform: scaleY(1.05); } }
.chat-window[data-voice="thinking"] .orb .ico-stop { opacity: 0; }
.orb-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(61, 220, 74, .6); opacity: 0; pointer-events: none; }
.chat-window[data-voice="listening"] .orb-ring, .chat-window[data-voice="speaking"] .orb-ring { animation: ring 1.8s ease-out infinite; }
.orb-ring.r2 { animation-delay: .9s !important; }
@keyframes ring { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.chat-window[data-voice="listening"] .orb { background: radial-gradient(circle at 32% 26%, #ff7a6b 0%, #d83a2e 55%, #8f1d14 100%); box-shadow: 0 12px 30px rgba(216, 58, 46, .5), inset 0 3px 9px rgba(255, 255, 255, .35); animation: none; }
.chat-window[data-voice="listening"] .orb-ring { border-color: rgba(255, 110, 96, .65); }
.orb-spin { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f5c542; border-right-color: rgba(245, 197, 66, .35); opacity: 0; pointer-events: none; }
.chat-window[data-voice="thinking"] .orb-spin { opacity: 1; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.orb-status { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; padding: 2px 0 3px; min-height: 34px; }
.orb-status b { color: #0b6b2e; font: 700 15px "Segoe UI", "Nirmala UI", sans-serif; transition: color .25s; }
.orb-status small { color: #55665d; font: 400 12.5px "Segoe UI", "Nirmala UI", sans-serif; }
.chat-window[data-voice="listening"] .orb-status b { color: #c93428; }
.chat-window[data-voice="thinking"] .orb-status b { color: #a36b00; }
.transcript {
  max-width: 100%; margin: 0 6px 4px; padding: 7px 15px; background: #fff; border-radius: 15px; box-shadow: 0 4px 14px rgba(11, 107, 46, .2);
  font: italic 600 14px "Segoe UI", "Nirmala UI", sans-serif; color: var(--ink); text-align: center; overflow-wrap: anywhere; animation: pop .3s both;
}
.transcript[hidden] { display: none; }
.transcript::before { content: "\201C"; color: #2fae4a; margin-right: 2px; } .transcript::after { content: "\201D"; color: #2fae4a; margin-left: 2px; }
.agent-pill {
  position: absolute; top: 4px; right: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px;
  background: linear-gradient(135deg, #ffe08a, #f5c542); color: #5b4300; font: 700 11.5px "Segoe UI", "Nirmala UI", sans-serif;
  box-shadow: 0 4px 12px rgba(245, 197, 66, .55); animation: pop .35s both;
}
.agent-pill[hidden] { display: none; }
.agent-pill i { width: 8px; height: 8px; border-radius: 50%; background: #d83a2e; animation: dot 1.2s ease-in-out infinite; }
@keyframes dot { 50% { transform: scale(1.5); opacity: .5; } }

/* ---------- bottom bar: mic, text box, send, Voice Agent ---------- */
.chat-form {
  flex: none; margin: 6px 10px 11px; padding: 5px 6px; gap: 6px; align-items: center; background: rgba(255, 255, 255, .98);
  border: 1px solid #cfe3d6; border-radius: 999px; box-shadow: 0 6px 18px rgba(11, 107, 46, .18); transition: box-shadow .25s, border-color .25s;
}
.chat-form:focus-within { border-color: #3ddc4a; box-shadow: 0 0 0 3px rgba(61, 220, 74, .3), 0 6px 18px rgba(11, 107, 46, .18); }
.chat-form input { flex: 1; min-width: 0; padding: 8px 6px; background: transparent; font-size: 14px; }
.chat-form input::placeholder { color: #6c7d74; }
.chat-form .mic, .chat-form #chat-send {
  flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), background .2s;
}
.chat-form .mic[hidden] { display: none; }
.chat-form .mic { background: #e1f4e7; color: #0b6b2e; border-left: 0; }
.chat-form .mic:hover, .chat-form #chat-send:hover { transform: scale(1.1); }
.chat-form .mic.listening { background: #d83a2e; color: #fff; animation: none; box-shadow: 0 0 0 3px rgba(216, 58, 46, .35); }
.chat-form #chat-send { background: #0b6b2e; color: #fff; }
.chat-form #chat-send svg { width: 17px; height: 17px; }
.voice-agent {
  flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; font: 600 13px "Segoe UI", "Nirmala UI", sans-serif;
  box-shadow: 0 4px 12px rgba(11, 107, 46, .45); transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), box-shadow .25s, background .25s;
}
.voice-agent[hidden] { display: none; }
.voice-agent svg { width: 17px; height: 17px; }
.voice-agent:hover { transform: translateY(-1px) scale(1.04); }
.voice-agent:active { transform: scale(.95); }
.voice-agent[aria-pressed="true"] { background: linear-gradient(135deg, #f5c542, #e0a312); color: #4a3500; box-shadow: 0 0 0 3px rgba(245, 197, 66, .5), 0 4px 14px rgba(245, 197, 66, .6); }
.voice-agent[aria-pressed="true"] svg rect { transform-box: fill-box; transform-origin: center; animation: eq .7s ease-in-out infinite alternate; }
.voice-agent[aria-pressed="true"] svg rect:nth-child(2n) { animation-delay: .15s; }
@media (max-width: 400px) { .voice-agent span { display: none; } .voice-agent { padding: 0 11px; } .orb { width: 76px; height: 76px; } }

/* ---------- launcher: breathes with the voice ---------- */
.chatbot-icon { transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), box-shadow .3s; }

/* ---------- respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .chat-window, .chat-window *, .chat-window *::before, .chat-window *::after { animation: none !important; transition-duration: .01s !important; scroll-behavior: auto !important; }
}

/* while the bot is speaking, the Voice Agent button turns red and becomes a Stop button */
.voice-agent.is-stop, .voice-agent.is-stop[aria-pressed="true"] {
  background: linear-gradient(135deg, #ef4444, #c81e1e); color: #fff;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .45), 0 4px 14px rgba(200, 30, 30, .55);
  animation: stopPulse 1.2s ease-in-out infinite;
}
.voice-agent.is-stop svg { display: none; }
.voice-agent.is-stop::before { content: ""; width: 13px; height: 13px; border-radius: 3px; background: #fff; flex: none; }
@keyframes stopPulse { 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, .2), 0 4px 14px rgba(200, 30, 30, .55); } }
@media (prefers-reduced-motion: reduce) { .voice-agent.is-stop { animation: none; } }

/* ---------- fits every screen: small laptops, tablets, phones, phones on their side ----------
   The window is never taller or wider than the screen. On short screens it uses the full height (the round icon sits behind it;
   the X in the header closes it) and the header, language pills and voice orb get smaller so the messages keep enough room. */
.chat-window { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
@media (max-height: 760px) {
  .chat-window { bottom: 12px; height: calc(100vh - 24px); height: calc(100dvh - 24px); }
  .chat-header { min-height: 50px; padding: 6px 10px; }
  .hdr-logo { width: 36px; height: 36px; }
  .hdr-title { font-size: 15px; }
  .hdr-tag { display: none; }
  .chat-header .header-actions { gap: 6px; }
  .chat-header .header-actions button { width: 30px; height: 30px; }
  .lang-bar { padding: 6px 8px 2px; }
  .lang-bar button { padding: 5px 6px; font-size: 12px; }
  .orb { width: 56px; height: 56px; }
  .orb svg { width: 26px; height: 26px; }
  .wave { height: 34px; }
  .orb-status { min-height: 22px; padding: 1px 0 2px; }
  .orb-status small { display: none; }
  .chat-messages { padding: 8px 10px 6px; gap: 8px; }
}
@media (max-height: 520px) {
  /* phones on their side: no logo, no tagline, and a small microphone circle (it is the only microphone button, so it always stays) */
  .chat-header { min-height: 40px; padding: 4px 8px; }
  .hdr-logo { display: none; }
  .hdr-title { font-size: 14px; }
  .chat-header .header-actions button { width: 28px; height: 28px; }
  .lang-bar { padding: 4px 6px 2px; }
  .lang-bar button { padding: 3px 5px; font-size: 11.5px; }
  .lang-bar button svg { display: none; }
  .orb { width: 46px; height: 46px; }
  .orb svg { width: 22px; height: 22px; }
  .wave { height: 22px; }
  .chat-window[data-voice="idle"] .orb-status { display: none; }
  .voice-dock { padding-top: 0; }
  .chat-form { padding: 6px 8px; }
  .chatbot-icon { bottom: 70px; width: 60px; height: 60px; }
  .chatbot-icon svg { width: 36px; height: 36px; }
}
@media (max-width: 360px) {
  .lang-bar button { padding: 5px 3px; font-size: 11px; gap: 2px; }
  .lang-bar button svg { display: none; }
  .hdr-title { font-size: 14px; }
}

/* items redrawn by a language change appear in place, without the slide-in animation (nothing on the screen moves) */
.no-anim, .no-anim .card, .no-anim .chip { animation: none !important; }

/* ONE microphone control: the big circle. While the bot is speaking it is a red Stop button (tap it to stop the voice). */
.chat-window[data-voice="speaking"] .orb { background: radial-gradient(circle at 32% 26%, #ff7a6b 0%, #d83a2e 55%, #8f1d14 100%); box-shadow: 0 12px 30px rgba(216, 58, 46, .5), inset 0 3px 9px rgba(255, 255, 255, .35); animation: none; }
.chat-window[data-voice="speaking"] .orb .ico-eq { opacity: 0; transform: scale(.5); }
.chat-window[data-voice="speaking"] .orb .ico-stop { opacity: 1; transform: none; }
.chat-window[data-voice="speaking"] .orb-ring { border-color: rgba(255, 110, 96, .65); }
.chat-window[data-voice="speaking"] .orb-status b { color: #c93428; }
/* a device with no microphone still gets the circle while the bot speaks, so the voice can be stopped */
.chat-window[data-voice="speaking"] .voice-dock.no-mic { display: flex; }

/* very short screens (a phone on its side, about 300-360 px high): everything one step tighter, the microphone circle stays */
@media (max-height: 360px) {
  .chat-header { min-height: 34px; padding: 2px 8px; }
  .hdr-title { font-size: 13px; }
  .chat-header .header-actions button { width: 26px; height: 26px; }
  .lang-bar { padding: 3px 6px 1px; gap: 4px; }
  .lang-bar button { padding: 2px 4px; font-size: 11px; }
  .orb { width: 38px; height: 38px; }
  .orb svg { width: 19px; height: 19px; }
  .wave { height: 16px; }
  .voice-dock { padding: 2px 10px 0; }
  .chat-form { padding: 4px 8px; }
  .chat-form input { padding-top: 5px; padding-bottom: 5px; }
}

/* ---------- the fixed department row: five equal buttons, icon above the name, all always visible ---------- */
.dept-bar {
  flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 7px 6px 4px;
  background: linear-gradient(rgba(233, 247, 238, 0), rgba(233, 247, 238, .95) 35%); position: relative; z-index: 1;
}
.dept-bar[hidden] { display: none; }
.dept-btn {
  min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; cursor: pointer;
  padding: 6px 1px 5px; border-radius: 14px; border: 1.5px solid transparent; background: var(--tone); color: var(--tone-ink);
  font: 700 10.5px/1.15 "Segoe UI", "Nirmala UI", sans-serif; text-align: center; box-shadow: 0 2px 7px rgba(11, 107, 46, .14);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s, border-color .2s;
}
.dept-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(11, 107, 46, .24); }
.dept-btn:active { transform: scale(.95); }
.dept-btn.active { border-color: var(--tone-ink); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tone-ink); }
.dept-ico { display: grid; place-items: center; flex: none; }
.dept-ico svg { width: 18px; height: 18px; }
.dept-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: break-word; word-break: normal; min-height: 2.3em; }
/* short screens: icon and name side by side on one line, then icon only */
@media (max-height: 520px) {
  .dept-bar { padding: 4px 6px 3px; gap: 4px; }
  .dept-btn { flex-direction: row; justify-content: center; gap: 4px; padding: 4px 3px; border-radius: 999px; font-size: 10.5px; }
  .dept-ico svg { width: 14px; height: 14px; }
  .dept-name { -webkit-line-clamp: 1; min-height: 0; overflow-wrap: normal; }
}
@media (max-height: 360px), (max-width: 340px) { .dept-name { display: none; } .dept-ico svg { width: 17px; height: 17px; } }

/* phones on their side (360 px high or less): every strip one more step smaller so the messages keep room */
@media (max-height: 360px) {
  .chat-header { min-height: 30px; padding: 1px 8px; }
  .chat-header .header-actions button { width: 24px; height: 24px; }
  .hdr-title { font-size: 12.5px; }
  .dept-bar { padding: 3px 6px 2px; }
  .dept-btn { padding: 2px 6px; }
  .dept-ico svg { width: 16px; height: 16px; }
  .orb { width: 30px; height: 30px; }
  .orb svg { width: 16px; height: 16px; }
  .wave { height: 12px; }
  .voice-dock { padding: 1px 10px 0; }
  .chat-form { margin: 3px 8px 6px; padding: 2px 5px; }
  .chat-form input { height: 26px; padding-top: 2px; padding-bottom: 2px; }
  .chat-form #chat-send { width: 28px; height: 28px; }
}

/* ---------- chat history panel (opened from the clock icon beside the reset icon) ---------- */
#chat-history.open { background: rgba(255, 255, 255, .38); }
.history-panel {
  position: absolute; left: 0; right: 0; bottom: 0; top: 60px; z-index: 5; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #f3fbf6, #e4f4ea); animation: pop .25s both;
}
.history-panel[hidden] { display: none; }
.hp-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; color: var(--ink); }
.hp-head .hp-title { font: 700 15px "Segoe UI", "Nirmala UI", sans-serif; }
.hp-back { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; color: var(--g1); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(11, 107, 46, .2); }
.hp-back[hidden] { display: none; }
.hp-back svg { width: 18px; height: 18px; }
.hp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.hp-empty { margin: 30px 14px; text-align: center; color: #55665d; line-height: 1.5; font: 14px "Segoe UI", "Nirmala UI", sans-serif; }
.hp-item { display: flex; align-items: stretch; gap: 6px; }
.hp-open {
  flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #cfe3d6; border-radius: 14px;
  background: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(11, 107, 46, .1); font-family: "Segoe UI", "Nirmala UI", sans-serif;
}
.hp-open:hover { border-color: #3ddc4a; }
.hp-item.current .hp-open { border-color: var(--g1); background: #effaf2; }
.hp-first { color: var(--ink); font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-meta { color: #6c7d74; font-size: 11.5px; }
.hp-del { flex: none; width: 38px; border: 1px solid #f0cfcf; border-radius: 14px; background: #fff; color: #c0392b; cursor: pointer; display: grid; place-items: center; }
.hp-del:hover { background: #fdecec; }
.hp-del svg { width: 18px; height: 18px; }
.hp-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 12px; }
.hp-note { color: #6c7d74; font: 11.5px "Segoe UI", "Nirmala UI", sans-serif; }
.hp-clear { border: 1px solid #f0cfcf; background: #fff; color: #c0392b; border-radius: 999px; padding: 6px 12px; font: 600 12px "Segoe UI", "Nirmala UI", sans-serif; cursor: pointer; }
.hp-clear[hidden] { display: none; }
.history-chat { display: flex; flex-direction: column; gap: 8px; }
.history-chat .msg { white-space: pre-wrap; }
.history-chat .msg.bot { padding: 9px 13px; align-self: flex-start; }
.history-chat .msg.user { align-self: flex-end; }
@media (max-height: 520px) { .hp-head { padding: 6px 10px 3px; } .hp-open { padding: 6px 10px; } .hp-foot { padding: 4px 10px 6px; } }


/* the chat text style keeps line breaks; the avatar, mascot and listen button must not (it pushed the picture out of its circle) */
.msg .avatar, .hero-mascot, .listen-btn, .msg .avatar *, .hero-mascot * { white-space: normal; line-height: 0; }

/* small question inside the history panel (delete one chat / clear all) */
.hp-ask { position: absolute; inset: 0; z-index: 5; background: rgba(15, 40, 25, .35); display: grid; place-items: center; padding: 16px; }
.hp-ask-card { width: min(300px, 100%); background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); text-align: center; }
.hp-ask-card p { margin: 0 0 14px; color: var(--ink); font: 600 14px/1.4 "Segoe UI", "Nirmala UI", sans-serif; }
.hp-ask-btns { display: flex; gap: 8px; justify-content: center; }
.hp-ask-btns button { flex: 1; border-radius: 999px; padding: 8px 12px; font: 600 13px "Segoe UI", "Nirmala UI", sans-serif; cursor: pointer; }
.hp-ask-no { border: 1px solid #cfd8d3; background: #fff; color: var(--ink); }
.hp-ask-yes { border: 0; background: #c0392b; color: #fff; }

/* the microphone is off while text is typed, the text box is off while the microphone listens */
.orb:disabled, #chat-mic:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
#chat-input:disabled { cursor: not-allowed; }
#chat-send:disabled { opacity: .45; cursor: not-allowed; }

/* the chatbot icon can be dragged: no float animation, grab cursor while it moves */
.chatbot-icon { cursor: grab; user-select: none; -webkit-user-select: none; }
.chatbot-icon.dragging { cursor: grabbing; animation: none; transition: none; transform: scale(1.08); }

/* ---------- the chat-only page (/widget): the chat fills the whole page or frame ---------- */
body.embedded { background: transparent; overflow: hidden; }
body.embedded .chatbot-icon { display: none; }
body.embedded .chat-window { position: fixed; inset: 0; right: 0; left: 0; top: 0; bottom: 0; width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; transform: none; transition: none; }