/* ================= Tilchi — mascot + chat assistant ================= */
.tilchi {
  --size: 92px;
  position: fixed; left: 0; top: 0; z-index: 40;
  width: var(--size); height: var(--size);
  transform: translate(var(--x, 0px), var(--y, 0px));
  transition: transform var(--move, 0s) linear;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.tilchi.dragging { transition: none; cursor: grabbing; }
.tilchi-btn { all: unset; display: block; width: 100%; height: 100%; cursor: pointer; border-radius: 50%; }
.tilchi-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.tilchi-flip { width: 100%; height: 100%; transition: transform .25s; }
.tilchi.left .tilchi-flip { transform: scaleX(-1); }
.tilchi svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 14px rgba(70, 50, 180, .28)); }
.tilchi .shadow { fill: rgba(30, 20, 80, .18); transform-origin: 60px 112px; animation: t-shadow 3s ease-in-out infinite; }

/* body bob / walk */
.tilchi .bod { transform-origin: 60px 100px; animation: t-bob 3s ease-in-out infinite; }
.tilchi.walking .bod { animation: t-walk .42s ease-in-out infinite; }
.tilchi .foot { transform-box: fill-box; transform-origin: center; }
.tilchi.walking .foot.l { animation: t-step .42s ease-in-out infinite; }
.tilchi.walking .foot.r { animation: t-step .42s ease-in-out infinite reverse; }
@keyframes t-bob { 50% { transform: translateY(-4px) scale(1.015, .985); } }
@keyframes t-walk { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes t-step { 50% { transform: translateY(-4px); } }
@keyframes t-shadow { 50% { transform: scaleX(.9); opacity: .7; } }

/* eyes */
.tilchi .eye { transform-box: fill-box; transform-origin: center; animation: t-blink 5s infinite; }
.tilchi .eye.r { animation-delay: .03s; }
@keyframes t-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.tilchi .pupils { transition: transform .12s ease-out; }
.tilchi .happy-eyes, .tilchi .mouth-o, .tilchi .mouth-sad, .tilchi .brows-sad { display: none; }

/* arms */
.tilchi .arm { transform-box: fill-box; }
.tilchi .arm.l { transform-origin: 100% 50%; }
.tilchi .arm.r { transform-origin: 0% 50%; }
.tilchi.walking .arm.l { animation: t-swing .42s ease-in-out infinite; }
.tilchi.walking .arm.r { animation: t-swing .42s ease-in-out infinite reverse; }
@keyframes t-swing { 50% { transform: rotate(18deg); } }

/* props per tab */
.tilchi .prop { display: none; }
.tilchi[data-tab="text"] .prop-cap,
.tilchi[data-tab="voice"] .prop-phones,
.tilchi[data-tab="image"] .prop-lens { display: inline; }
.tilchi .prop-lens { transform-box: fill-box; transform-origin: 20% 80%; animation: t-lens 2.4s ease-in-out infinite; }
@keyframes t-lens { 50% { transform: rotate(-12deg) translate(-2px, -2px); } }

/* state: listening */
.tilchi .waves { display: none; }
.tilchi[data-state="listening"] .waves { display: inline; }
.tilchi[data-state="listening"] .wave { animation: t-wave 1.2s ease-out infinite; opacity: 0; }
.tilchi[data-state="listening"] .wave.w2 { animation-delay: .4s; }
@keyframes t-wave { 0% { opacity: .9; transform: translateX(0); } 100% { opacity: 0; transform: translateX(6px); } }
.tilchi[data-state="listening"] .bod { animation: t-nod 1.1s ease-in-out infinite; }
@keyframes t-nod { 50% { transform: rotate(-4deg) translateY(-2px); } }

/* state: thinking */
.tilchi .dots { display: none; }
.tilchi[data-state="thinking"] .dots { display: inline; }
.tilchi[data-state="thinking"] .dot { animation: t-dot 1s ease-in-out infinite; }
.tilchi[data-state="thinking"] .dot.d2 { animation-delay: .15s; }
.tilchi[data-state="thinking"] .dot.d3 { animation-delay: .3s; }
@keyframes t-dot { 50% { transform: translateY(-5px); opacity: .5; } }
.tilchi[data-state="thinking"] .pupils { transform: translate(2px, -3px) !important; }
.tilchi[data-state="thinking"] .mouth-smile { display: none; }
.tilchi[data-state="thinking"] .mouth-o { display: inline; }

/* state: happy */
.tilchi[data-state="happy"] .eye, .tilchi[data-state="happy"] .pupils { display: none; }
.tilchi[data-state="happy"] .happy-eyes { display: inline; }
.tilchi[data-state="happy"] .bod { animation: t-jump .55s ease-out 2; }
.tilchi[data-state="happy"] .arm.r { animation: t-wave-arm .35s ease-in-out 4; }
@keyframes t-jump { 40% { transform: translateY(-16px) scale(.96, 1.05); } 70% { transform: translateY(0) scale(1.06, .94); } }
@keyframes t-wave-arm { 50% { transform: rotate(-50deg); } }

/* state: sad */
.tilchi[data-state="sad"] .mouth-smile { display: none; }
.tilchi[data-state="sad"] .mouth-sad, .tilchi[data-state="sad"] .brows-sad { display: inline; }
.tilchi[data-state="sad"] .bod { animation: t-sad 2s ease-in-out infinite; }
@keyframes t-sad { 50% { transform: translateY(2px) rotate(-2deg); } }

/* speech bubble */
.tilchi-say {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(.9);
  width: max-content; max-width: 220px; padding: 9px 13px; border-radius: 14px;
  background: var(--surface-solid, #fff); color: var(--text, #17142e); border: 1px solid var(--border);
  font: 600 13px/1.35 "Manrope", system-ui, sans-serif; text-align: center;
  box-shadow: 0 10px 28px -10px rgba(52, 40, 160, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.tilchi-say::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px;
  border: 7px solid transparent; border-top-color: var(--surface-solid, #fff);
}
.tilchi-say.on { opacity: 1; transform: translateX(-50%) scale(1); }
/* keep the bubble on screen near the edges */
.tilchi-say.edge-r { left: auto; right: 0; transform: scale(.9); transform-origin: bottom right; }
.tilchi-say.edge-r.on { transform: scale(1); }
.tilchi-say.edge-r::after { left: auto; right: calc(var(--size) / 2 - 7px); margin-left: 0; }
.tilchi-say.edge-l { left: 0; transform: scale(.9); transform-origin: bottom left; }
.tilchi-say.edge-l.on { transform: scale(1); }
.tilchi-say.edge-l::after { left: calc(var(--size) / 2 - 7px); margin-left: 0; }
/* the small avatar in the chat header shows only the default face */
.tchat-ava .dots, .tchat-ava .happy-eyes, .tchat-ava .mouth-o, .tchat-ava .mouth-sad, .tchat-ava .brows-sad { display: none; }
.tchat-ava .eye { transform-box: fill-box; transform-origin: center; animation: t-blink 5s infinite; }

/* ---------------- chat panel ---------------- */
.tchat {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 30px 70px -20px rgba(40, 30, 120, .45);
  transform-origin: bottom right; animation: t-open .3s cubic-bezier(.3, 1.3, .5, 1);
}
@keyframes t-open { from { opacity: 0; transform: translateY(16px) scale(.92); } }
.tchat-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--grad); color: #fff; }
.tchat-ava { width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.tchat-ava svg { width: 34px; height: 34px; }
.tchat-title { line-height: 1.2; }
.tchat-title b { display: block; font-size: 16px; }
.tchat-title span { font-size: 12px; opacity: .85; }
.tchat-close { margin-left: auto; width: 36px; height: 36px; border-radius: 12px; border: 0; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; display: grid; place-items: center; }
.tchat-close:hover { background: rgba(255,255,255,.3); }
.tchat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.tmsg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }
.tmsg.bot { align-self: flex-start; background: var(--surface-solid); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.tmsg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.tmsg.typing { color: var(--muted); }
.tmsg.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: currentColor; animation: t-dot 1s infinite; }
.tmsg.typing span:nth-child(2) { animation-delay: .15s; } .tmsg.typing span:nth-child(3) { animation-delay: .3s; }
.tmsg ul { margin: 4px 0; padding-left: 18px; white-space: normal; }
.tmsg-action { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 99px; }
.tchat-sugg { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; scrollbar-width: none; background: var(--surface-solid); }
.tchat-sugg::-webkit-scrollbar { display: none; }
.tchat-sugg button { flex: none; border: 1px solid var(--border); background: var(--surface-solid); color: var(--text); font: 600 12.5px/1 "Manrope", system-ui, sans-serif; padding: 8px 11px; border-radius: 99px; cursor: pointer; }
.tchat-sugg button:hover { border-color: var(--accent); color: var(--accent); }
.tchat-form { display: flex; gap: 8px; padding: 10px 12px 12px; background: var(--surface-solid); }
.tchat-form textarea {
  flex: 1; min-height: 44px; max-height: 120px; resize: none; font: inherit; font-size: 15px; padding: 11px 13px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.tchat-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.tchat-send { width: 44px; height: 44px; flex: none; align-self: flex-end; border: 0; border-radius: 14px; background: var(--grad); color: #fff; cursor: pointer; display: grid; place-items: center; }
.tchat-send:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 760px) {
  .tilchi { --size: 72px; }
  .tchat { right: 0; bottom: 0; width: 100vw; height: min(78vh, 620px); border-radius: 22px 22px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tilchi, .tilchi * { animation: none !important; transition: none !important; }
}