/* bot.css - Mascote hacker0S visual/acessórios (3D, simétrico, realista, animado, responsivo, acessível, melhorado) */

/* ===== Estrutura Principal ===== */
.bot-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .27s, transform .27s;
  margin-bottom: 10px;
}
.bot-titulo-azul {
  color: #4fd3ff;
  text-shadow: 0 0 2px #4fd3ff, 0 0 14px #1e3955, 0 0 8px #00ffaa55;
  font-weight: bold;
  font-size: 1.22em;
  letter-spacing: 0.03em;
}

/* ===== Botão Azul ===== */
.bot-btn-azul {
  background: linear-gradient(120deg, #0c1933 80%, #153560 100%) !important;
  color: #4fd3ff !important;
  border: 1.5px solid #4fd3ff !important;
  box-shadow: 0 0 6px #4fd3ff33, 0 0 8px #00ffaa22;
  border-radius: 8px;
  font-weight: bold;
  font-family: 'Share Tech Mono', monospace;
  padding: 3px 14px;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .18s;
}
.bot-btn-azul:hover, .bot-btn-azul:focus {
  background: linear-gradient(120deg, #153560 90%, #00ffaa 120%) !important;
  color: #fff !important;
  border-color: #2196f3 !important;
  box-shadow: 0 0 14px #2196f380;
  outline: 2px solid #00ffaa;
  transform: scale(1.06);
}

/* ===== Mensagens do Bot ===== */
.mascote-bot-msg {
  transition: opacity .21s, transform .21s;
}
.mascote-bot-msg .bot-bubble {
  background: linear-gradient(112deg,#021f33 80%,#080e22 100%);
  border: 1.7px solid #4fd3ff;
  color: #4fd3ff;
  font-size: 1.12em;
  border-radius: 16px;
  box-shadow: 0 0 4px #4fd3ff44, 0 0 7px #00ff9933 inset;
  padding: 16px 19px;
  margin: 14px 0 7px 0;
  min-height: 36px;
  animation: botBubbleFadeIn .5s;
  font-family: 'Share Tech Mono', monospace;
  text-shadow: 0 0 3px #1e395588;
  text-align: center;
  word-break: break-word;
  transition: background .17s, color .17s, border .17s;
}
@keyframes botBubbleFadeIn {
  from { opacity: 0; transform: translateY(24px) scale(0.95);}
  to { opacity: 1; transform: translateY(0) scale(1);}
}
.bot-bubble.notfound {
  border: 2px solid #ff5555;
  color: #ff5555;
  background: linear-gradient(112deg,#2a0a0a 80%,#080e22 100%);
  text-shadow: 0 0 6px #ff555555;
}
.mascote-bot-msg .bot-bubble:focus {
  outline: 2px solid #00ffaa;
}

/* ===== Dicas ===== */
.bot-tips {
  margin-top: 12px;
  font-size: 0.95em;
  color: #4fd3ff;
  line-height: 1.5;
  text-align: center;
}
.bot-tips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
  justify-content: center !important;
}
.bot-tip-item {
  background: #021f33;
  color: #00ffaa;
  border: 1.1px solid #4fd3ff;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.92em;
  font-family: inherit;
  font-weight: bold;
  margin-bottom: 2px;
  box-shadow: 0 0 2px #4fd3ff22 inset;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: all;
  transition: background .13s, color .13s, border .13s, box-shadow .13s, transform .13s;
}
.bot-tip-item:hover,
.bot-tip-item:focus {
  background: #153560;
  color: #fff;
  border-color: #00ffaa;
  outline: 2px solid #00ffaa;
  transform: scale(1.08);
}

/* ===== Avatar 3D Animado ===== */
.bot-avatar-animado {
  position: relative;
  margin: 0 auto 10px auto;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
  animation: botSpin 6s cubic-bezier(.61,-0.29,.51,1.28) infinite alternate;
  transition: width .22s, height .22s, filter .22s;
  filter: drop-shadow(0 0 6px #00ffaa44) drop-shadow(0 0 3px #4fd3ff33);
}
@keyframes botSpin {
  0%   { transform: rotateY(-14deg) rotateX(8deg) scale(1.01) skewY(-2deg);}
  14%  { transform: rotateY(-10deg) rotateX(9deg) scale(1.025) skewY(0deg);}
  38%  { transform: rotateY(0deg)   rotateX(6deg)  scale(1.04) skewY(0.2deg);}
  51%  { transform: rotateY(8deg)  rotateX(-2deg) scale(1.025) skewY(-0.3deg);}
  78%  { transform: rotateY(16deg)  rotateX(-10deg) scale(1.06) skewY(0.1deg);}
  100% { transform: rotateY(13deg)  rotateX(-5deg)  scale(1.025) skewY(0deg);}
}
.bot-avatar-animado::before {
  content: '';
  display: block;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 52% 25%, #4fd3ff 52%, #2196f3 69%, #0c1933 100%);
  box-shadow: 0 0 5px #4fd3ff77, 0 4px 18px #0c193388 inset, 4px 4px 20px #00ff9955;
  position: absolute;
  z-index: 1;
  left: 0; top: 0;
  opacity: 0.97;
  transition: background .23s, box-shadow .23s, opacity .19s;
  animation: botHaloGlow 7.5s infinite alternate cubic-bezier(.66,-0.18,.45,1.17);
}
@keyframes botHaloGlow {
  0%,100% { box-shadow: 0 0 9px #4fd3ff88, 0 4px 18px #0c1933cc inset, 4px 4px 22px #00ff9955; opacity:0.97;}
  55%  { box-shadow: 0 0 13px #00ffaa33, 0 8px 20px #0c1933cc inset, 4px 4px 16px #00ff9944; opacity:0.99;}
}
.bot-avatar-animado .bot-face {
  position: absolute;
  width: 90px; height: 90px;
  z-index: 2;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: botFaceFloat 4.6s infinite cubic-bezier(.66,-0.18,.45,1.17) alternate;
}
@keyframes botFaceFloat {
  0%   { transform: translateY(0px) scale(1);}
  35%  { transform: translateY(-2.5px) scale(1.01);}
  50%  { transform: translateY(-4px) scale(1);}
  80%  { transform: translateY(2px) scale(0.994);}
  100% { transform: translateY(0px) scale(1);}
}

/* ===== EFEITOS MATRIX, GLITCH E KONAMI (apenas no círculo) ===== */
.bot-avatar-animado.matrix-bg::before {
  background:
    repeating-linear-gradient(120deg, #00ff99 0 2px, transparent 2px 8px),
    radial-gradient(circle at 53% 25%, #4fd3ff 34%, #2196f3 61%, #0c1933 100%);
  box-shadow: 0 0 24px #00ff99aa, 0 0 70px #0c193399 inset, 0 0 30px #00ff9922;
  animation: matrixBgAnim 2.5s linear infinite;
}
@keyframes matrixBgAnim {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 64px, 0 0; }
}

.bot-avatar-animado.glitch-bg::before {
  background: radial-gradient(circle at 53% 25%, #fff 32%, #4fd3ff 57%, #0c1933 100%);
  animation: glitchEffectCircle 1s infinite steps(2, end);
}
@keyframes glitchEffectCircle {
  0% { filter: none; }
  20% { filter: hue-rotate(-20deg) brightness(1.11); }
  40% { filter: hue-rotate(20deg) brightness(0.91); }
  60% { filter: blur(1.2px) brightness(1.13); }
  80% { filter: hue-rotate(-10deg) brightness(1.07); }
  100% { filter: none; }
}

.bot-avatar-animado.konami-bg::before {
  background: linear-gradient(135deg,#ff00cc,#00fff7,#00ff00,#ffef00,#ff0000,#ff00cc);
  background-size: 400% 400%;
  animation: konamiRainbowCircle 1.4s linear infinite;
}
@keyframes konamiRainbowCircle {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Olhos - Expressões ===== (alinhamento simétrico mantido) */
.bot-eye {
  position: absolute;
  width: 22px; height: 22px;
  background: radial-gradient(circle at 50% 50%, #ffffff 22%, #4fd3ff 58%, #0c1933 85%);
  border-radius: 50%;
  top: 22px;
  box-shadow: 0 0 2px #00ffaa33;
  border: 2px solid #2196f3;
  overflow: hidden;
  animation: botEyeBlink 4.5s infinite cubic-bezier(.44,-0.15,.38,1.2);
  transition: background .22s, border .22s, box-shadow .18s;
}
.bot-eye.left  { left: 19px; }
.bot-eye.right { left: 49px; }
@keyframes botEyeBlink {
  0%, 92%, 100% { height: 22px; transform: scaleY(1); }
  94% { height: 5px; transform: scaleY(0.21);}
  96% { height: 22px; transform: scaleY(1);}
}
.bot-eye-pupil {
  position: absolute;
  width: 8px; height: 8px;
  background: radial-gradient(circle at 60% 40%, #00eaff 45%, #212a3a 80%);
  border-radius: 50%;
  top: 8px; left: 7px;
  box-shadow: 0 0 1.2px #00eaff88 inset;
  animation: botPupilMove 2.7s infinite alternate cubic-bezier(.74,-0.05,.28,1.25);
  transition: box-shadow .16s;
}
@keyframes botPupilMove {
  0%   { left: 7px; top: 8px; }
  18%  { left: 6px; top: 9px; }
  28%  { left: 9px; top: 7px; }
  49%  { left: 7px; top: 10px; }
  75%  { left: 8.5px; top: 9px; }
  100% { left: 7px; top: 8px; }
}
/* Expressões */
.bot-eye.feliz {
  border-color: #00ffaa;
  background: radial-gradient(circle at 60% 60%, #fff 42%, #00ff99 68%, #0c1933 88%);
  box-shadow: 0 0 3px #00ffaa22;
}
.bot-eye.triste {
  border-color: #ff5555;
  background: radial-gradient(circle at 39% 84%, #fff 8%, #ff5555 60%, #4a0e0e 100%);
  box-shadow: 0 0 3px #ff555533;
}
.bot-eye.surpreso {
  border-color: #ffaa00;
  background: radial-gradient(circle at 50% 50%, #fff 70%, #ffaa00 90%, #0c1933 100%);
}
.bot-eye.triste .bot-eye-pupil {
  background: radial-gradient(circle at 60% 40%, #ff5555 50%, #990000 100%);
  box-shadow: 0 0 2px #ff5555aa, 0 0 1px #fff2 inset;
}

/* ===== Boca Animada e Expressiva ===== */
.bot-mouth {
  position: absolute;
  left: 30px;
  top: 66px;
  width: 32px; height: 10px;
  border-radius: 0 0 20px 20px / 0 0 10px 10px;
  background: linear-gradient(90deg, #4fd3ff 30%, #2196f3 70%, #0c1933 100%);
  box-shadow: 0 2.5px 3px #4fd3ff22, 0 2px 2px #0005 inset;
  animation: botMouthSmile 3.6s infinite alternate cubic-bezier(.44,-0.15,.38,1.2);
  transition: all .22s cubic-bezier(.57,-0.05,.56,1.25);
  will-change: height, border-radius, background;
}
@keyframes botMouthSmile {
  0%, 100% { height: 10px; border-radius: 0 0 20px 20px / 0 0 10px 10px; transform: scaleY(1);}
  50% { height: 14px; border-radius: 0 0 22px 22px / 0 0 12px 12px; transform: scaleY(1.11);}
}
.bot-mouth.feliz {
  height: 16px !important;
  border-radius: 0 0 22px 22px / 0 0 14px 14px;
  background: linear-gradient(90deg,#00ffaa 30%, #21b477 80%);
  box-shadow: 0 2.5px 7px #00ffaa33, 0 2px 4px #00ffaa22 inset;
  filter: drop-shadow(0 0 1px #00ffaa99);
}
.bot-mouth.triste {
  height: 7px !important;
  border-radius: 0 0 22px 22px / 0 0 5px 5px;
  background: linear-gradient(90deg,#ff5555 20%, #b40000 70%, #4a0e0e 100%) !important;
  animation: none !important;
  box-shadow: 0 2px 4px #ff555533, 0 2px 2px #ff555533 inset;
  filter: none;
}
.bot-mouth.surpreso {
  height: 15px !important;
  border-radius: 50%;
  background: linear-gradient(90deg,#fff 30%, #ffaa00 70%, #0c1933 100%);
  box-shadow: 0 2px 3px #ffaa0033, 0 2px 4px #ffaa0022 inset;
  filter: none;
}

/* ===== Acessórios Mascote 3D ===== */
.bot-accessory {
  position: absolute; width: 90px; height: 90px; z-index: 3; pointer-events: none;
}
.bot-accessory > * { pointer-events: none; }
.bot-accessory.multi-accessory > * { position: absolute; pointer-events: none; }

/* ===== HEADPHONE 3D REDEFINIDO ===== */
.bot-accessory .headphone {
  position: absolute;
  left: -10px;
  top: -8px;
  width: 90px;
  height: 38px;
  border-top: 9px solid #33ffaa;
  border-bottom: none;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-radius: 55% 55% 36% 36%/97% 97% 20% 20%;
  background: none;
  box-shadow: 0 -2px 13px #33ffaa44, 0 8px 22px #011a0e99 inset;
  z-index: 12;
  pointer-events: none;
  animation: headphonePulse3d 4.1s infinite alternate cubic-bezier(.66,-0.18,.45,1.17);
}
@keyframes headphonePulse3d {
  0%   { filter: brightness(1) drop-shadow(0 0 4px #00ff9966); }
  50%  { filter: brightness(1.13) drop-shadow(0 0 10px #00ffaa88); }
  100% { filter: brightness(1) drop-shadow(0 0 4px #00ff9966); }
}
.bot-accessory .headphone::before,
.bot-accessory .headphone::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 32px;
  background: radial-gradient(ellipse at 60% 30%, #33ffaa 55%, #011a13 100%);
  border-radius: 48% 52% 70% 70% / 100% 100% 90% 90%;
  box-shadow: 0 2px 12px #00ff9950 inset, 0 0 8px #33ffaa60;
  top: 17px;
  z-index: 13;
  pointer-events: none;
}
.bot-accessory .headphone::before {
  left: -12px;
  transform: rotate(-6deg);
  animation: headphonePadLeft 4.1s infinite alternate cubic-bezier(.66,-0.18,.45,1.17);
}
.bot-accessory .headphone::after {
  right: -12px;
  transform: rotate(6deg) scaleX(-1);
  animation: headphonePadRight 4.1s infinite alternate cubic-bezier(.66,-0.18,.45,1.17);
}
@keyframes headphonePadLeft {
  0%   { top: 17px; left: -12px; }
  60%  { top: 13px; left: -15px; }
  100% { top: 17px; left: -12px; }
}
@keyframes headphonePadRight {
  0%   { top: 17px; right: -12px; }
  60%  { top: 13px; right: -15px; }
  100% { top: 17px; right: -12px; }
}

/* ===== OUTROS ACESSÓRIOS ===== */
.bot-accessory .hat {
  position: absolute; left: 21px; top: 1px; width: 48px; height: 20px;
  background: linear-gradient(180deg, #222 60%, #111 100%);
  border-radius: 50% 50% 38% 38%/57% 60% 40% 40%;
  border: 2px solid #4fd3ff;
  box-shadow: 0 2px 10px #1e395555, 0 0 2px #4fd3ff55, 2px 2px 4px rgba(0,0,0,0.16);
  filter: drop-shadow(0 7px 8px #0c193360);
  animation: botAccBob 2.8s infinite alternate cubic-bezier(.44,-0.15,.38,1.2);
  z-index: 5;
}
.bot-accessory .cap {
  position: absolute; left: 26px; top: 4px; width: 40px; height: 16px;
  background: linear-gradient(180deg, #333 70%, #111 100%);
  border-radius: 60% 60% 40% 40%/80% 80% 40% 40%;
  border: 2px solid #00ffaa;
  box-shadow: 0 2px 7px #00ffaa33, 0 1.5px 3px #0c193355;
  animation: capWobble 3.7s infinite alternate cubic-bezier(.44,-0.15,.38,1.2);
  z-index: 5;
}
.bot-accessory .cap::after {
  content: '';
  position: absolute;
  left: 7px; top: 13px;
  width: 26px; height: 7px;
  background: linear-gradient(90deg,#00ffaa 60%,#111 100%);
  border-radius: 70% 80% 100% 100%/100% 100% 80% 80%;
  opacity: 0.9;
  box-shadow: 0 0 4px #00ffaa55 inset;
}
.bot-accessory .glasses {
  position: absolute; left: 16px; top: 28px; width: 60px; height: 20px;
  border-radius: 10px 10px 10px 10px/13px 13px 13px 13px;
  background: linear-gradient(90deg,#82eaff22 50%,transparent 100%);
  border: 2px solid #00eaff;
  box-shadow: 0 0 5px #00eaff44, 0 2px 6px #2229;
  animation: glassesShine 3.5s infinite alternate cubic-bezier(.44,-0.15,.38,1.2);
  filter: drop-shadow(0 1px 2px #00eaff77);
  z-index: 5;
}

/* ===== NERD GLASSES ULTRA-NERD E ALINHADO ===== */
.bot-accessory .nerd-glasses {
  position: absolute;
  left: 14px;
  top: 31px;
  width: 60px;
  height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 12;
  pointer-events: none;
  border-radius: 12px 12px 16px 16px/13px 13px 20px 20px;
  background: linear-gradient(90deg,#fff0 70%,#ffaa0022 100%);
  box-shadow: 0 0 4px #ffaa0033, 0 2px 6px #4429;
  filter: drop-shadow(0 1.5px 2px #ffaa0077);
  animation: nerdGlow 3.2s infinite alternate cubic-bezier(.43,.37,.53,1.01), nerdLook 9s infinite alternate cubic-bezier(.43,.37,.53,1.01);
}
.bot-accessory .nerd-glasses .nerd-lens {
  position: absolute;
  top: 0;
  width: 22px;
  height: 18px;
  border: 3px solid #ffaa00;
  border-radius: 7px 8px 8px 7px/10px 10px 10px 10px;
  background: linear-gradient(135deg, #fff2 20%, #ffaa003d 100%);
  box-shadow: 0 0 8px #ffaa0022, 0 1px 6px #ffaa0033 inset;
  z-index: 13;
  filter: blur(0.1px) brightness(1.08);
}
.bot-accessory .nerd-glasses .nerd-lens.left { left: 0; }
.bot-accessory .nerd-glasses .nerd-lens.right { right: 0; }
.bot-accessory .nerd-glasses .nerd-bridge {
  position: absolute;
  top: 7px;
  left: 21px;
  width: 16px;
  height: 6px;
  background: linear-gradient(90deg,#ffaa00 70%,#fff8 100%);
  border-radius: 5px 4px 4px 5px/3px 3px 6px 6px;
  z-index: 15;
  border-top: 2px solid #fff7;
  box-shadow: 0 0 6px #ffaa0033 inset;
}
.bot-accessory .nerd-glasses::before,
.bot-accessory .nerd-glasses::after {
  content: '';
  position: absolute;
  top: 7px;
  width: 7px;
  height: 7px;
  background: linear-gradient(109deg, #ffaa00 80%, #fff1 100%);
  border-radius: 2.5px 2px 2.5px 2px;
  box-shadow: 0 0 7px #ffaa00;
  z-index: 8;
  opacity: 0.86;
}
.bot-accessory .nerd-glasses::before { left: -13px; transform: rotate(-14deg);}
.bot-accessory .nerd-glasses::after  { right: -13px; transform: rotate(14deg) scaleX(-1);}

/* ponte */
.bot-accessory .nerd-glasses .nerd-bridge {
  position: absolute;
  top: 7px;
  left: 21px;
  width: 16px;
  height: 6px;
  background: linear-gradient(90deg,#ffaa00 70%,#fff8 100%);
  border-radius: 5px 4px 4px 5px/3px 3px 6px 6px;
  z-index: 15;
  border-top: 2px solid #fff7;
  box-shadow: 0 0 6px #ffaa0033 inset;
}

/* hastes laterais */
.bot-accessory .nerd-glasses::before,
.bot-accessory .nerd-glasses::after {
  content: '';
  position: absolute;
  top: 7px;
  width: 7px;
  height: 7px;
  background: linear-gradient(109deg, #ffaa00 80%, #fff1 100%);
  border-radius: 2.5px 2px 2.5px 2px;
  box-shadow: 0 0 7px #ffaa00;
  z-index: 8;
  opacity: 0.86;
}
.bot-accessory .nerd-glasses::before { left: -13px; transform: rotate(-14deg);}
.bot-accessory .nerd-glasses::after  { right: -13px; transform: rotate(14deg) scaleX(-1);}

.bot-accessory .matrix-shade {
  position: absolute; left: 20px; top: 31px; width: 50px; height: 22px;
  border-radius: 12px 12px 16px 16px/13px 13px 20px 20px;
  background: linear-gradient(90deg,#222 10%,#00ff99 85%,#011 100%);
  border: 2px solid #00ff99;
  box-shadow: 0 0 8px #00ff9944, 0 1.5px 3px #00ffaa33;
  opacity: 0.92;
  animation: matrixShine 4.2s infinite alternate cubic-bezier(.44,-0.15,.38,1.2);
  filter: drop-shadow(0 1px 2px #00ff9977);
  z-index: 5;
}

/* ===== BARBA MAIS NATURAL ===== */
.bot-accessory .barba {
  position: absolute;
  left: 36px; top: 76px; width: 20px; height: 15px;
  background: repeating-linear-gradient(120deg,#42260a 0 3px,#6b4417 3px 6px);
  border-radius: 0 0 20px 20px/0 0 20px 20px;
  box-shadow: 0 2px 3px #0005, 0 0 7px #42260a44 inset;
  animation: barbaMove 3.1s infinite alternate cubic-bezier(.44,-0.15,.38,1.2);
  z-index: 5;
}
@keyframes barbaMove {
  0%   { transform: rotate(-3deg) scaleY(1);}
  45%  { transform: rotate(3deg)  scaleY(1.07);}
  100% { transform: rotate(-3deg) scaleY(1);}
}

/* ===== Comandos Grid (para lista de comandos) ===== */
.bot-comandos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 6px 10px;
  margin-top: 7px;
  padding: 0;
  list-style: none;
}
.bot-comandos-grid li {
  background: #021f33;
  color: #00ffaa;
  border: 1.1px solid #4fd3ff;
  border-radius: 6px;
  padding: 6px 8px 5px 8px;
  font-size: 0.93em;
  font-family: inherit;
  font-weight: bold;
  margin-bottom: 2px;
  box-shadow: 0 0 2px #4fd3ff22 inset;
  letter-spacing: 0.01em;
  user-select: text;
}

/* ===== Transições de entrada/saída ===== */
#tool-area {
  transition: opacity .25s, transform .25s;
}

/* ===== Responsivo ===== */
@media (max-width: 600px) {
  .bot-avatar-animado,
  .bot-avatar-animado .bot-face,
  .bot-accessory {
    width: 60px !important; height: 60px !important;
    min-width: 48px; min-height: 48px;
    max-width: 90vw; max-height: 90vw;
  }
  .mascote-bot-msg .bot-bubble {
    font-size: 1em;
    padding: 11px 8px;
    margin: 11px 0 4px 0;
    min-height: 28px;
  }
  .bot-tips-grid {
    flex-wrap: wrap;
    gap: 6px 2vw;
  }
}

/* ===== Input e botões centralizados ===== */
.bot-inputbox-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0 0;
  position: sticky;
  bottom: 0;
  background: transparent;
  z-index: 2;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
.bot-inputbox {
  width: 95%;
  max-width: 300px;
  padding: 10px 14px;
  background: linear-gradient(90deg,#0c1933 80%,#153560 100%);
  color: #4fd3ff;
  border: 2px solid #4fd3ff;
  border-radius: 9px;
  font-size: 1.13em;
  font-family: 'Share Tech Mono', monospace;
  margin-bottom: 9px;
  box-shadow: 0 0 6px #4fd3ff22 inset;
  outline: none;
  transition: border .13s, box-shadow .13s, background .13s;
}
.bot-inputbox:focus {
  border: 2px solid #00ffaa;
  box-shadow: 0 0 8px #00ffaa33;
  background: linear-gradient(90deg,#153560 80%,#0c1933 100%);
  color: #fff;
}
.bot-botoes-row {
  display: flex;
  gap: 9px;
  justify-content: center;
  width: 100%;
}
#limparMascoteBtn {
  background: #2b0000 !important;
  color: #ff5555 !important;
  border-color: #ff5555 !important;
}
#limparMascoteBtn:hover {
  background: #900 !important;
  color: #fff !important;
  border-color: #ff5555 !important;
}
.bot-autocomplete {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  background: #021f33;
  border: 1px solid #00ffaa;
  border-radius: 7px;
  color: #00ffaa;
  font-family: inherit;
  font-size: 1em;
  box-shadow: 0 0 8px #00ffaa22;
  max-height: 140px;
  overflow-y: auto;
  min-width: 180px;
  width: 92vw;
  max-width: 370px;
}
.bot-autocomplete .ac-item {
  padding: 5px 12px;
  cursor: pointer;
  transition: background .13s;
}
.bot-autocomplete .ac-item:hover,
.bot-autocomplete .ac-item.selected {
  background: #00ffaa;
  color: #011f33;
}

/* ===== Área rolável para chat futuro (caso queira chat-history) ===== */
.mascote-bot-msg {
  overflow-y: auto;
  max-height: 36vh;
  min-height: 44px;
  scrollbar-width: thin;
  scrollbar-color: #4fd3ff #021f33;
  padding-bottom: 7px;
}
.mascote-bot-msg::-webkit-scrollbar {
  width: 4px;
  background: #021f33;
}
.mascote-bot-msg::-webkit-scrollbar-thumb {
  background: #4fd3ff;
  border-radius: 4px;
}

/* ===== Acessibilidade ===== */
.bot-tip-item:focus-visible,
.bot-btn-azul:focus-visible,
.bot-inputbox:focus-visible {
  outline: 2px solid #00ffaa;
  outline-offset: 2px;
}