/* PJ Supply LTDA — tema estilo "escritório virtual" (CSS próprio) */
/* Barra de ações embaixo, centralizada, em pílula escura */
.bp-menu{position:fixed!important;top:auto!important;bottom:10px!important;left:0!important;right:0!important;}
.bp-menu > div > .w-full.flex.justify-between{justify-content:center!important;gap:10px!important;}
.bp-menu .flex-1.flex{flex:0 0 auto!important;}
.bp-menu .bg-contrast\/80{background:rgba(32,36,64,.92)!important;}
/* Cartões de vídeo menores no topo (não cobrem os avatares) */
#cameras-container{gap:8px!important;margin-top:8px!important;}
#cameras-container .camera-box{width:168px!important;max-width:168px!important;}
#cameras-container .camera-box .absolute.overflow-hidden{width:100%!important;height:100%!important;}
#cameras-container .camera-box video{object-fit:cover!important;}
.camera-box .rounded-lg{border-radius:12px!important;}
/* Tela de escolha de personagem (tema claro do escritório) */
h3.text-lg.capitalize{font-size:0!important;}
h3.text-lg.capitalize::after{content:"Escolha seu personagem";font-size:1.25rem;font-weight:700;}
.woka-preview > div{border-radius:18px!important;padding:2.2rem!important;}
button[id^="woka-"]{border-radius:14px!important;padding:6px!important;transition:transform .12s;}
button[id^="woka-"]:hover{transform:translateY(-2px);}
#pj-prox{position:fixed;left:0;top:0;pointer-events:none;z-index:5;border-radius:50%;background:radial-gradient(circle,rgba(120,160,255,.10) 55%,rgba(120,160,255,.22) 72%,rgba(120,160,255,0) 100%);box-shadow:0 0 24px 6px rgba(43,63,143,.18);filter:blur(1.5px);transition:transform .12s linear,width .3s,height .3s,background .4s,box-shadow .4s}
#pj-prox.ativo{background:radial-gradient(circle,rgba(90,200,120,.14) 55%,rgba(90,200,120,.30) 72%,rgba(90,200,120,0) 100%);box-shadow:0 0 30px 10px rgba(60,170,90,.30)}
#pj-lado{display:none;position:fixed;left:0;transition:left .25s;top:50%;z-index:9999;width:22px;height:48px;border:0;border-radius:0 10px 10px 0;background:#2b3142;color:#fff;font-size:18px;cursor:pointer;opacity:.85;box-shadow:0 2px 6px rgba(0,0,0,.3)}
#chat{transition:transform .25s,margin .25s}
body.pj-sem-lado #chat{transform:translateX(-100%);margin-right:calc(-1 * var(--pj-cw,335px));position:absolute!important}
/* Escolha de personagem estilo cartão claro (arte e CSS próprios) */
div.mobile-webkit.bg-contrast:has(.woka-preview){background:radial-gradient(ellipse at top,#3b4f9a 0%,#1d2550 70%)!important}
div.mobile-webkit.rounded-lg:has(.woka-preview){background:#ffffff!important;color:#2b3142!important;border-radius:22px!important;box-shadow:0 18px 50px rgba(10,15,40,.45)!important;backdrop-filter:none!important}
div.mobile-webkit.rounded-lg:has(.woka-preview) h3{color:#2b3142!important}
div.mobile-webkit.rounded-lg:has(.woka-preview) p.text-sm{color:#6b7390!important;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:11px!important}
.woka-preview > div{background:linear-gradient(180deg,#e9effd 0%,#cfdcf8 100%)!important;border:1px solid #d5ddf3;position:relative}
.woka-preview > div::after{content:"";position:absolute;left:50%;bottom:30px;width:70px;height:14px;transform:translateX(-50%);border-radius:50%;background:rgba(30,40,90,.18);filter:blur(2px);pointer-events:none}
.woka-preview canvas{position:relative;z-index:1}
.woka-preview button[aria-label]{background:#ffffff!important;color:#2b3142!important;box-shadow:0 1px 3px rgba(0,0,0,.2)}
div.mobile-webkit.rounded-lg:has(.woka-preview) .btn{color:#2b3142!important;border-color:#cfd6ea!important;background:#f4f6fb!important;border-radius:999px!important}
div.mobile-webkit.rounded-lg:has(.woka-preview) .btn:hover{background:#e8edf9!important}
button[id^="woka-"]{background:#f1f4fa!important;border:2px solid transparent!important}
button[id^="woka-"]:hover{background:#e3e9f7!important}
button[id^="woka-"].border-white{border-color:#3a6df0!important;background:#e6eeff!important;box-shadow:0 0 0 3px rgba(58,109,240,.18)}
div.mobile-webkit.rounded-lg:has(.woka-preview) .btn-secondary,div.mobile-webkit.rounded-lg:has(.woka-preview) button.bg-secondary{background:#3a6df0!important;color:#fff!important;border-radius:999px!important}
h3.text-lg.capitalize{text-transform:none!important}
div.mobile-webkit.rounded-lg:has(.woka-preview) .btn *{color:#2b3142!important}
body:has(.woka-preview) #pj-prox{display:none}
#pj-toasts{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.pj-toast{color:#fff;font:700 16px system-ui,sans-serif;padding:11px 22px;border:2px solid rgba(255,255,255,.55);border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:.95;animation:pjin .25s ease-out;max-width:70vw}
.pj-toast.sai{opacity:0;transition:opacity .4s}
@keyframes pjin{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:.95}}

/* Celular */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  #pj-lado{display:none!important}
  #cameras-container .camera-box{width:110px!important;max-width:110px!important}
  .bp-menu{bottom:4px!important;transform:scale(.78);transform-origin:bottom center;width:128%!important;left:-14%!important}
  .bp-menu > div > .w-full.flex.justify-between{gap:4px!important;flex-wrap:wrap!important}
  .pj-toast{font-size:14px;padding:8px 14px;max-width:92vw}
  #pj-toasts{top:70px}
  div.mobile-webkit.rounded-lg:has(.woka-preview){border-radius:14px!important;margin:6px!important}
}