/* ===== Camadas de interface do Humor sobre o vídeo ===== */
.ui { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ui-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.ui-scene--center { display: grid; place-items: center; }

.glass {
  background: rgba(10, 16, 18, .66);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid transparent; border-radius: 16px;
  background-clip: padding-box;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(112, 255, 192, .22);
}
.panel { position: absolute; width: 300px; padding: 14px 16px 16px; font-size: 13px; }
.panel__head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,248,248,.85); margin-bottom: 12px; }
.panel__head em { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--mint); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35 } }

/* Pino pulsante (microfone / headset) */
.pin { position: absolute; width: 0; height: 0; }
.pin i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--mint); box-shadow: 0 0 16px var(--mint); }
.pin i + i { left: -24px; top: -24px; width: 48px; height: 48px; border-width: 1px; opacity: .6; animation: ring 1.8s ease-out infinite; }
@keyframes ring { from { transform: scale(.4); opacity: .9 } to { transform: scale(1.4); opacity: 0 } }

/* Onda de voz */
.wave { display: flex; align-items: center; gap: 3px; height: 40px; margin-bottom: 12px; }
.wave span { flex: 1; border-radius: 2px; background: var(--grad); min-height: 3px; }

/* Transcrição + roteiro */
.transcript { display: grid; gap: 7px; margin-bottom: 12px; }
.transcript li { opacity: 0; transform: translateY(6px); color: rgba(255,248,248,.9); line-height: 1.35; }
.transcript b, .said b { display: block; font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 2px; }
.script { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,248,248,.1); }
.script li { display: flex; align-items: center; gap: 8px; color: rgba(255,248,248,.55); font-size: 12px; }
.script li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,248,248,.3); flex: none; transition: all .3s; }
.script li.is-done { color: rgba(255,248,248,.95); }
.script li.is-done::before { border-color: var(--mint); background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='%2306201a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Cartão do Live Coach */
.coach {
  position: absolute; width: 290px; padding: 14px 16px 12px; border-radius: 14px;
  background: linear-gradient(rgba(8, 14, 16, .88), rgba(8, 14, 16, .88)) padding-box, var(--grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45), 0 0 40px rgba(50, 202, 211, .25);
  opacity: 0; transform: translateY(14px) scale(.96);
}
.coach__type { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin-bottom: 6px; }
.coach p { font-family: var(--text); font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--white); }
.coach__ttl { margin-top: 10px; height: 2px; border-radius: 2px; background: rgba(255,248,248,.12); overflow: hidden; }
.coach__ttl span { display: block; height: 100%; background: var(--grad); transform-origin: left; }
.coach--inline { position: relative; width: auto; margin-top: 10px; }

/* Rostos (Humor Visão) */
.face { position: absolute; width: 0; height: 0; }
.face::before {
  content: ""; position: absolute; left: -62px; top: -78px; width: 124px; height: 150px;
  border-radius: 18px; border: 1.5px solid rgba(112, 255, 192, .75);
  -webkit-mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat;
          mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat;
  box-shadow: 0 0 20px rgba(112, 255, 192, .25);
}
.face__tag, .face__bar { position: absolute; left: -62px; }
.face__tag { top: 80px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); background: rgba(8,14,16,.7); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.face__bar { top: 104px; width: 124px; height: 4px; border-radius: 4px; background: rgba(255,248,248,.18); overflow: hidden; }
.face__bar i { display: block; height: 100%; width: 50%; background: var(--grad); border-radius: 4px; }

.humor-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: rgba(255,248,248,.75); }
.humor-row svg, .voice-humor svg { width: 100%; height: 36px; overflow: visible; }
.humor-row path, .voice-humor path { fill: none; stroke: url(#sig); stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(50,202,211,.6)); }
.stage-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; padding-top: 10px; border-top: 1px solid rgba(255,248,248,.1); }
.stage-info dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,248,248,.5); }
.stage-info dd { font-size: 13px; color: var(--white); margin-top: 2px; }
.privacy { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: rgba(255,248,248,.7); }
.privacy::before { content: ""; width: 10px; height: 11px; flex: none; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 11'%3E%3Cpath d='M5 0L0 2v3c0 3 2.2 5.4 5 6 2.8-.6 5-3 5-6V2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 11'%3E%3Cpath d='M5 0L0 2v3c0 3 2.2 5.4 5 6 2.8-.6 5-3 5-6V2z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Telas (monitor / parede): retângulo encaixado na tela apagada do vídeo */
.screen { position: absolute; overflow: hidden; border-radius: 6px; }
.screen__inner {
  position: absolute; inset: 0; padding: 4% 5%;
  background: radial-gradient(120% 120% at 20% 0%, rgba(50,202,211,.14), transparent 60%), rgba(6, 12, 14, .9);
  box-shadow: inset 0 0 0 1px rgba(112,255,192,.15), 0 0 40px rgba(50,202,211,.15);
  opacity: 0; transform-origin: center; font-size: clamp(9px, 1vw, 13px);
}
.screen--monitor .screen__inner { display: flex; flex-direction: column; gap: 8px; }
.voice-humor span { display: block; font-size: .85em; color: rgba(255,248,248,.6); margin-bottom: 4px; }
.voice-humor svg { height: 48px; }
.said { color: rgba(255,248,248,.9); font-size: 1em; padding: 8px 10px; border-radius: 8px; background: rgba(255,248,248,.05); }
.screen--monitor .coach p { font-size: 1.15em; }
.screen--monitor .privacy { margin-top: auto; }

/* Parede do gestor */
.wall { display: flex; flex-direction: column; gap: 3%; padding: 3% 3.5%; }
.wall__head { display: flex; align-items: center; gap: 8px; font-size: 1em; letter-spacing: .1em; text-transform: uppercase; }
.wall__head em { margin-left: auto; font-style: normal; color: var(--mint); font-size: .85em; letter-spacing: .16em; }
.wall__grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2.4%; }
.tile { position: relative; border-radius: 8px; padding: 7% 8%; background: rgba(255,248,248,.04); box-shadow: inset 0 0 0 1px rgba(255,248,248,.08); display: flex; flex-direction: column; gap: 6%; opacity: 0; }
.tile__name { display: flex; justify-content: space-between; font-size: .9em; color: rgba(255,248,248,.85); }
.tile__name em { font-style: normal; color: rgba(255,248,248,.45); }
.tile svg { width: 100%; flex: 1; min-height: 0; overflow: visible; }
.tile path { fill: none; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tile__bar { height: 4px; border-radius: 4px; background: rgba(255,248,248,.15); overflow: hidden; }
.tile__bar i { display: block; height: 100%; background: var(--grad); }
.tile__status { align-self: flex-start; font-size: .78em; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; color: #06201a; background: var(--mint); }
.tile.is-off .tile__status { background: transparent; color: var(--attention); box-shadow: inset 0 0 0 1px var(--attention); }
.tile.is-off { box-shadow: inset 0 0 0 1px rgba(242,195,139,.5); }

/* Ponte (passagem pela tela) */
.bridge { font-family: var(--display); font-size: clamp(20px, 2.6vw, 38px); line-height: 1.35; text-align: center; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 768px) {
  .panel { width: 230px; font-size: 12px; }
  .transcript li:nth-child(n+2), .script { display: none; }
  .coach { width: 240px; }
  .coach p { font-size: 14px; }
  .face::before { transform: scale(.7); }
  .face__tag, .face__bar { display: none; }
  .stage-info, .humor-row + .humor-row { display: none; }
  .screen { border-radius: 14px; }
  .screen__inner { font-size: 12px; border-radius: 14px; }
  .wall__grid { grid-template-columns: repeat(2, 1fr); }
  .tile:nth-child(n+5) { display: none; }
}