/**
 * COBERMINAS — Léo CSS v12.0
 * ══════════════════════════════════════════════════════════════
 * v12 — MELHORIAS:
 * • Léo oculto quando painel de chat aberto (sem atrapalhar)
 * • Botão TTS redondo, pequeno, canto inferior direito
 * • Voz TTS melhorada (João / Waze BR)
 */

/* ══════════════════════════════════════════════════════════════
   BOTÃO TTS — Canto inferior direito, redondo, pequeno
   Acima da barra de serviços fixa (58px + gap)
   ══════════════════════════════════════════════════════════════ */
#leo-tts-bar {
  position: fixed;
  bottom: 70px;           /* acima da service-bar (58px) + 12px gap */
  right: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a5fa8, #0a2d52);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9590;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(10,45,82,.55);
  animation: ttsBtnPulse 2.2s ease-in-out infinite;
  user-select: none;
  transition: background .3s, transform .18s;
  border: 2.5px solid rgba(255,255,255,.28);
}
#leo-tts-bar:hover {
  transform: scale(1.13);
}
#leo-tts-bar.muted {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 4px 14px rgba(22,163,74,.55);
  animation: ttsBtnPulseGreen 2.2s ease-in-out infinite;
}
@keyframes ttsBtnPulse {
  0%,100% { box-shadow: 0 4px 14px rgba(10,45,82,.55); }
  50%      { box-shadow: 0 4px 24px rgba(10,45,82,.9);  }
}
@keyframes ttsBtnPulseGreen {
  0%,100% { box-shadow: 0 4px 14px rgba(22,163,74,.55); }
  50%      { box-shadow: 0 4px 24px rgba(22,163,74,.9);  }
}
#leo-tts-icon  { font-size: 1.25rem; color: #fff; line-height:1; }
#leo-tts-label { display: none; }

/* Tooltip ao hover */
#leo-tts-bar::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(6,20,40,.92);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  letter-spacing: .03em;
}
#leo-tts-bar:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   WRAPPER PRINCIPAL
   ══════════════════════════════════════════════════════════════ */
#leo-wrap {
  position: fixed;
  bottom: 72px;            /* service-bar(58px) + 14px gap */
  left: 14px;
  z-index: 9600;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, left 2.4s cubic-bezier(.4,0,.2,1);
  will-change: left;
  user-select: none;
  overflow: visible;
}

/* ══════════════════════════════════════════════════════════════
   BALÃO DE FALA — acima da cabeça
   ══════════════════════════════════════════════════════════════ */
#leo-sign {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 130px;
  max-width: 200px;
  background: #fff;
  border: 2px solid #ff7a2b;
  border-radius: 12px;
  padding: 7px 10px;
  font-size: .72rem;
  font-weight: 700;
  color: #0a2d52;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  z-index: 9610;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  animation: bubbleIn .22s ease;
}
#leo-sign::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #ff7a2b;
  margin-top: -1px;
}
#leo-sign::before {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
  z-index: 1;
}
#leo-sign.leo-sign-visible { display: block; }
@keyframes bubbleIn {
  from { opacity:0; transform: translateX(-50%) scale(.85) translateY(6px); }
  to   { opacity:1; transform: translateX(-50%) scale(1)  translateY(0);    }
}

/* ══════════════════════════════════════════════════════════════
   CORPO DO LEÃO
   ══════════════════════════════════════════════════════════════ */
#leo-ring-wrap {
  order: 1;
  position: relative;
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
#leo-ring { display: none; }

#leo-body {
  position: relative;
  width: 130px;
  cursor: pointer;
  pointer-events: all;
  animation: leoFloat 3.4s ease-in-out infinite,
             leoGlow 2.0s ease-in-out infinite,
             leoPulseScale 4s ease-in-out infinite;
  z-index: 9600;
  transform-origin: bottom center;
}
#leo-body:hover {
  animation-play-state: paused;
  transform: scale(1.08);
  filter:
    drop-shadow(0 0 10px rgba(255,122,43,1))
    drop-shadow(0 0 22px rgba(255,122,43,.8))
    drop-shadow(0 12px 20px rgba(0,0,0,.45));
}
@keyframes leoPulseScale {
  0%,100% { transform: scale(1);    }
  50%      { transform: scale(1.04); }
}

#leo-img {
  width: 130px;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: transform .35s ease;
}
#leo-body.facing-left  #leo-img { transform: scaleX(1); }
#leo-body.facing-right #leo-img { transform: scaleX(1); }

/* ══════════════════════════════════════════════════════════════
   LUZ DE CONTORNO PULSANTE
   ══════════════════════════════════════════════════════════════ */
@keyframes leoGlow {
  0%   { filter:
    drop-shadow(0 0 8px rgba(37,211,102,1))
    drop-shadow(0 0 18px rgba(37,211,102,.7))
    drop-shadow(0 10px 18px rgba(0,0,0,.32)); }
  45%  { filter:
    drop-shadow(0 0 12px rgba(255,122,43,1))
    drop-shadow(0 0 26px rgba(255,122,43,.8))
    drop-shadow(0 10px 20px rgba(0,0,0,.32)); }
  70%  { filter:
    drop-shadow(0 0 10px rgba(255,200,0,1))
    drop-shadow(0 0 22px rgba(255,165,0,.7))
    drop-shadow(0 10px 18px rgba(0,0,0,.32)); }
  100% { filter:
    drop-shadow(0 0 8px rgba(37,211,102,1))
    drop-shadow(0 0 18px rgba(37,211,102,.7))
    drop-shadow(0 10px 18px rgba(0,0,0,.32)); }
}
/* ── Léo OCULTO quando painel está aberto ───────────────── */
#leo-wrap.panel-open {
  opacity: 0;
  pointer-events: none !important;
  transform: scale(0.7) translateY(20px);
}

/* ══════════════════════════════════════════════════════════════
   SOMBRA NO CHÃO
   ══════════════════════════════════════════════════════════════ */
#leo-shadow {
  order: 2;
  width: 80px; height: 10px;
  background: radial-gradient(ellipse, rgba(0,0,0,.28) 0%, transparent 72%);
  border-radius: 50%;
  transition: width .3s, opacity .3s;
  margin-top: -4px;
}
#leo-body.leo-walking ~ #leo-shadow,
#leo-ring-wrap.leo-walking-wrap ~ #leo-shadow { width:58px; opacity:.50; }

/* ══════════════════════════════════════════════════════════════
   ANIMAÇÕES DO CORPO
   ══════════════════════════════════════════════════════════════ */
@keyframes leoFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  35%     { transform: translateY(-7px) rotate(.5deg); }
  70%     { transform: translateY(-3px) rotate(-.4deg); }
}
@keyframes leoWalk {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25%     { transform: translateY(-5px) rotate(-1.8deg); }
  75%     { transform: translateY(-5px) rotate(1.8deg); }
}
#leo-body.leo-walking {
  animation: leoWalk .65s ease-in-out infinite, leoGlow 2.2s ease-in-out infinite !important;
}
@keyframes leoJump {
  0%   { transform: translateY(0)    scaleY(1)   scaleX(1);   }
  8%   { transform: translateY(0)    scaleY(.78) scaleX(1.14);}
  30%  { transform: translateY(-60px) scaleY(1.1) scaleX(.91) rotate(-6deg); }
  55%  { transform: translateY(-60px) scaleY(1.1) scaleX(.91) rotate(6deg);  }
  78%  { transform: translateY(0)    scaleY(.83) scaleX(1.1); }
  90%  { transform: translateY(-10px) scaleY(1.04); }
  100% { transform: translateY(0)    scaleY(1)   scaleX(1);   }
}
@keyframes leoWave {
  0%,100% { transform: rotate(0deg)  translateX(0);  }
  18%     { transform: rotate(-14deg) translateX(-5px);}
  40%     { transform: rotate(16deg)  translateX(6px); }
  60%     { transform: rotate(-12deg) translateX(-4px);}
  82%     { transform: rotate(12deg)  translateX(5px); }
}
@keyframes leoBackflip {
  0%   { transform: translateY(0)    rotate(0deg);    }
  20%  { transform: translateY(-24px) rotate(-90deg); }
  48%  { transform: translateY(-48px) rotate(-185deg);}
  75%  { transform: translateY(-20px) rotate(-330deg);}
  100% { transform: translateY(0)    rotate(-360deg); }
}
@keyframes leoSpin {
  0%   { transform: rotate(0deg)   scale(1);    }
  25%  { transform: rotate(90deg)  scale(1.09); }
  50%  { transform: rotate(180deg) scale(1.14); }
  75%  { transform: rotate(270deg) scale(1.09); }
  100% { transform: rotate(360deg) scale(1);    }
}
@keyframes leoShake {
  0%,100% { transform: translateX(0)   rotate(0deg);    }
  14%     { transform: translateX(-9px) rotate(-4.5deg); }
  30%     { transform: translateX(10px) rotate(4.5deg);  }
  46%     { transform: translateX(-8px) rotate(-3deg);   }
  62%     { transform: translateX(8px)  rotate(3deg);    }
  78%     { transform: translateX(-4px) rotate(-1.5deg); }
  90%     { transform: translateX(4px)  rotate(1.5deg);  }
}
#leo-body.anim-jump     { animation: leoJump      1.05s ease         forwards, leoGlow 2.2s ease-in-out infinite !important; }
#leo-body.anim-wave     { animation: leoWave      1.20s ease-in-out  forwards, leoGlow 2.2s ease-in-out infinite !important; }
#leo-body.anim-backflip { animation: leoBackflip  1.40s cubic-bezier(.4,0,.2,1) forwards, leoGlow 2.2s ease-in-out infinite !important; }
#leo-body.anim-spin     { animation: leoSpin       .92s ease         forwards, leoGlow 2.2s ease-in-out infinite !important; }
#leo-body.anim-shake    { animation: leoShake      .85s ease         forwards, leoGlow 2.2s ease-in-out infinite !important; }

/* ══════════════════════════════════════════════════════════════
   PAINEL DO CHAT
   ══════════════════════════════════════════════════════════════ */
#leo-panel {
  display: none;
  flex-direction: column;
  width: 320px;
  max-height: 580px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,.3);
  overflow: hidden;
  border: 1px solid rgba(10,45,82,.1);
  position: fixed;
  left: 148px;
  bottom: 80px;
  z-index: 9580;
  pointer-events: all;
}
@keyframes panelIn {
  from { opacity:0; transform:translateY(22px) scale(.94); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
#leo-panel.open { display:flex; animation:panelIn .28s ease; }

/* Header */
#leo-panel-hdr {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:linear-gradient(135deg,#061f44,#0a2d52);
  color:#fff; flex-shrink:0;
}
#leo-hdr-emoji { font-size:1.6rem; flex-shrink:0; line-height:1; }
.leo-hdr-info  { flex:1; min-width:0; }
.leo-hdr-info strong { display:block; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#leo-status-dot { font-size:.67rem; color:rgba(255,255,255,.65); }
.leo-hdr-btns { display:flex; gap:5px; flex-shrink:0; }
.leo-hdr-btns button {
  background:rgba(255,255,255,.15); border:none; color:#fff;
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  font-size:.88rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.leo-hdr-btns button:hover { background:rgba(255,255,255,.35); }

/* Pré-formulário */
#leo-preform {
  padding:16px 14px;
  background:linear-gradient(180deg,#fffbf5 0%,#fff 100%);
  flex-shrink:0;
}
.leo-welcome-row { display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; }
.leo-welcome-icon { font-size:2rem; line-height:1; flex-shrink:0; }
.leo-welcome-row p { font-size:.83rem; color:#374151; line-height:1.55; margin:0; }
#leo-preform input {
  width:100%; padding:9px 12px; margin-bottom:9px;
  border:2px solid #e5e7eb; border-radius:10px;
  font-size:.85rem; font-family:inherit;
  box-sizing:border-box; outline:none;
  transition:border-color .2s;
}
#leo-preform input:focus { border-color:#ff7a2b; }
#leo-pf-btn {
  width:100%; padding:11px; border:none; border-radius:10px;
  background:linear-gradient(135deg,#0a2d52,#1a5fa8);
  color:#fff; font-size:.88rem; font-weight:700; cursor:pointer;
  transition:filter .2s;
}
#leo-pf-btn:hover { filter:brightness(1.1); }
.leo-pf-note { font-size:.7rem; color:#9ca3af; text-align:center; margin:8px 0 0; }

/* Área de mensagens */
#leo-msgs {
  display:none;
  flex-direction:column;
  gap:10px;
  padding:12px 10px;
  overflow-y:auto;
  flex:1;
  min-height:0;
  scroll-behavior:smooth;
}
#leo-msgs::-webkit-scrollbar { width:4px; }
#leo-msgs::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:2px; }

/* Mensagens */
.leo-msg { display:flex; gap:8px; align-items:flex-start; }
.leo-msg.user { flex-direction:row-reverse; }
.leo-avatar-icon { font-size:1.25rem; flex-shrink:0; line-height:1; margin-top:2px; }
.leo-bubble-msg {
  background:#f3f4f6; color:#1f2937;
  padding:9px 12px; border-radius:14px 14px 14px 3px;
  font-size:.83rem; line-height:1.55; max-width:85%;
}
.leo-msg.user .leo-bubble-msg {
  background:linear-gradient(135deg,#0a2d52,#1a5fa8);
  color:#fff; border-radius:14px 14px 3px 14px;
}

/* Mini galeria no chat */
.leo-gallery {
  display:grid; grid-template-columns:repeat(2,1fr); gap:5px;
  margin-top:5px; width:100%;
}
.leo-gallery img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; cursor:pointer; transition:transform .2s;
}
.leo-gallery img:hover { transform:scale(1.04); }

/* Opções */
#leo-opts {
  display:none;
  flex-direction:column;
  gap:6px;
  padding:0 10px 10px;
  overflow-y:auto;
  max-height:220px;
  flex-shrink:0;
}
#leo-opts::-webkit-scrollbar { width:3px; }
#leo-opts::-webkit-scrollbar-thumb { background:#e5e7eb; }
.leo-opt {
  padding:9px 12px; border:2px solid #e5e7eb;
  border-radius:10px; background:#fff;
  font-size:.82rem; font-weight:600; color:#0a2d52;
  cursor:pointer; text-align:left; transition:all .18s;
  line-height:1.3;
}
.leo-opt:hover { border-color:#ff7a2b; background:#fff7ed; color:#c2410c; }
.leo-opt.primary {
  background:linear-gradient(135deg,#25d366,#128c4a);
  border-color:transparent; color:#fff;
}
.leo-opt.primary:hover { filter:brightness(1.08); }

/* Input de texto */
#leo-input-wrap {
  display:none; gap:7px; padding:8px 10px;
  border-top:1px solid #f3f4f6; flex-shrink:0;
}
#leo-input {
  flex:1; padding:9px 12px; border:2px solid #e5e7eb;
  border-radius:10px; font-size:.85rem; font-family:inherit;
  outline:none; transition:border-color .2s;
}
#leo-input:focus { border-color:#ff7a2b; }
#leo-send {
  background:linear-gradient(135deg,#0a2d52,#1a5fa8);
  border:none; color:#fff; width:38px; height:38px;
  border-radius:10px; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  font-size:.92rem; transition:filter .2s; flex-shrink:0;
}
#leo-send:hover { filter:brightness(1.15); }

/* Footer WA */
#leo-footer { padding:8px 12px; background:#f0fdf4; border-top:1px solid #dcfce7; flex-shrink:0; }
#leo-wa-link {
  display:flex; align-items:center; justify-content:center; gap:7px;
  text-decoration:none; color:#fff; font-size:.82rem; font-weight:700;
  padding:10px 12px; border-radius:10px;
  background:linear-gradient(135deg,#128c4a,#25d366);
  box-shadow:0 3px 10px rgba(37,211,102,.35);
  transition:all .2s; position:relative; overflow:hidden;
}
#leo-wa-link::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.12); opacity:0; transition:opacity .2s; }
#leo-wa-link:hover::before { opacity:1; }
#leo-wa-link:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(37,211,102,.5); }
#leo-wa-link i { font-size:1.1rem; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════════════ */
@media (max-width:520px) {
  #leo-panel { width:calc(100vw - 16px); left:8px !important; bottom:72px; border-radius:14px; max-height:80vh; }
  #leo-body  { width:108px; }
  #leo-img   { width:108px; }
  #leo-tts-bar { bottom:68px; right:10px; width:42px; height:42px; }
  #leo-tts-icon { font-size:1.1rem; }
}