/* SPCHILLER Engenheira Virtual */
.spn{position:fixed;bottom:18px;z-index:99990;font-family:inherit;font-size:14px;line-height:1.45;color:#0f2433}
.spn-left{left:18px}.spn-right{right:18px}
.spn *{box-sizing:border-box}
.spn button{font:inherit;cursor:pointer;text-transform:none;letter-spacing:normal;min-height:0;line-height:1.3;box-shadow:none}

.spn-card{display:none;width:330px;max-width:calc(100vw - 36px);background:#fff;border-radius:16px;
  box-shadow:0 12px 40px rgba(3,35,57,.28),0 0 0 1px rgba(3,35,57,.06);padding:14px 14px 12px;
  transform-origin:bottom left;animation:spn-in .35s ease-out}
.spn-right .spn-card{transform-origin:bottom right}
.spn-open .spn-card{display:block}
.spn-open .spn-mini{display:none}

.spn-head{display:flex;align-items:center;gap:10px}
.spn-av{width:44px;height:44px;flex:0 0 44px;border-radius:50%;position:relative}
.spn-av svg{width:100%;height:100%;display:block}
.spn-speaking .spn-av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #0a7cbd;animation:spn-pulse 1.4s ease-out infinite}
.spn-title{flex:1;min-width:0}
.spn-title b{display:block;font-size:14px;color:#043452;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spn-title small{display:block;font-size:11px;color:#6b7c88}
.spn-x{background:none;border:0;font-size:22px;line-height:1;color:#6b7c88;padding:2px 6px;border-radius:6px}
.spn-x:hover{background:#f1f4f6;color:#043452}

.spn-msg{margin:10px 0 8px;font-size:13.5px;color:#1d3445;max-height:7.5em;overflow:hidden}
.spn-count{display:none}
.spn-counting .spn-count{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:700;color:#0a7cbd}
.spn-counting .spn-count::before{content:"Narração começa em";font-weight:500;color:#1d3445}
.spn-counting .spn-count{font-size:22px}
.spn-counting .spn-count::before{font-size:13px}

.spn-bar{height:4px;background:#e7eef3;border-radius:4px;overflow:hidden;margin-bottom:10px}
.spn-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0a7cbd,#26b0f0);transition:width .4s}

.spn-btns{display:flex;gap:8px}
.spn-play{flex:1;border:0;border-radius:10px;padding:9px 12px;background:#043452;color:#fff;font-weight:600}
.spn-play:hover{background:#0a4f7a}
.spn-no{border:1px solid #d5dee5;border-radius:10px;padding:9px 12px;background:#fff;color:#33495a}
.spn-no:hover{background:#f4f7f9}

.spn-mini{display:none;align-items:center;gap:8px;border:0;border-radius:999px;padding:5px 14px 5px 5px;
  background:#043452;color:#fff;box-shadow:0 6px 20px rgba(3,35,57,.3);font-weight:600;font-size:13px}
.spn-mini svg{width:34px;height:34px;display:block}
.spn-collapsed .spn-mini{display:inline-flex}
.spn-mini:hover{background:#0a4f7a}

.spn button:focus-visible{outline:2px solid #26b0f0;outline-offset:2px}

.spn-wave rect{transform-box:fill-box;transform-origin:center}
.spn-speaking .spn-wave rect{animation:spn-eq .9s ease-in-out infinite}
.spn-speaking .spn-wave rect:nth-child(2){animation-delay:.15s}
.spn-speaking .spn-wave rect:nth-child(3){animation-delay:.3s}
.spn-speaking .spn-wave rect:nth-child(4){animation-delay:.45s}
.spn-speaking .spn-wave rect:nth-child(5){animation-delay:.6s}

@keyframes spn-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes spn-pulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
@keyframes spn-eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.9)}}

/* barra inferior do tema Woodmart no celular */
@media (max-width:1024px){.sticky-toolbar-on .spn{bottom:72px}}
@media (max-width:480px){
  .spn{bottom:12px}.sticky-toolbar-on .spn{bottom:66px}.spn-left{left:12px}.spn-right{right:12px}
  .spn-card{width:calc(100vw - 24px)}
}
@media (prefers-reduced-motion:reduce){
  .spn-card,.spn-speaking .spn-av::after,.spn-speaking .spn-wave rect{animation:none}
}
@media print{.spn{display:none}}