/* Somente /chat-test/?embed=1. A tela integral /chat-test/ não muda. */
html:has(body.sf-mural-embedded){height:100%;overflow:hidden;background:transparent}
body.sf-mural-embedded{
  height:100%;min-height:0;overflow:hidden;margin:0!important;
  background:transparent!important;color:#f2f3fa!important;
  font-family:Inter,Arial,sans-serif!important;
}
body.sf-mural-embedded .app{
  width:100%!important;height:100%!important;max-width:none!important;
  min-height:0!important;background:transparent!important;
  overflow:hidden!important;display:flex!important;flex-direction:column!important;
}
body.sf-mural-embedded .topbar,
body.sf-mural-embedded .profile-note,
body.sf-mural-embedded #quizHeaderRanking,
body.sf-mural-embedded .online-dock,
body.sf-mural-embedded .typing-indicator,
body.sf-mural-embedded #newMessagesBtn{display:none!important}
body.sf-mural-embedded .chat-workspace{
  display:flex!important;flex:1 1 auto!important;min-height:0!important;
  height:100%!important;overflow:hidden!important;
}
body.sf-mural-embedded .chat-left{
  flex:1 1 auto!important;display:flex!important;flex-direction:column!important;
  min-height:0!important;min-width:0!important;width:100%!important;
  overflow:hidden!important;
}
body.sf-mural-embedded .feed{
  flex:1 1 auto!important;min-height:0!important;width:100%!important;
  overflow:auto!important;padding:9px 10px 8px!important;
  background:transparent!important;color:#eff2f8!important;
  scrollbar-width:thin!important;scrollbar-color:#149de3 transparent!important;
}
body.sf-mural-embedded .feed::-webkit-scrollbar{width:5px!important}
body.sf-mural-embedded .feed::-webkit-scrollbar-track{background:transparent!important}
body.sf-mural-embedded .feed::-webkit-scrollbar-thumb{background:rgba(19,161,242,.85)!important;border-radius:8px!important}
body.sf-mural-embedded .msg,
body.sf-mural-embedded .msg.mine{
  display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;
  width:100%!important;max-width:100%!important;gap:7px!important;
  margin:0 0 9px!important;
}
body.sf-mural-embedded .msg > .avatar,
body.sf-mural-embedded .msg.mine > .avatar{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  order:0!important;border:1px solid rgba(30,165,241,.7)!important;
  border-radius:50%!important;
}
body.sf-mural-embedded .msg-content,
body.sf-mural-embedded .msg.mine .msg-content{
  max-width:calc(100% - 39px)!important;min-width:0!important;
  flex:1 1 auto!important;
}
body.sf-mural-embedded .meta,
body.sf-mural-embedded .mine .meta{
  font-size:10px!important;color:#c4ccdc!important;
  gap:4px!important;margin:0 0 3px!important;flex-wrap:wrap!important;
  justify-content:flex-start!important;
}
body.sf-mural-embedded .meta strong,
body.sf-mural-embedded .meta .moderator-name{
  font-size:11px!important;font-weight:700!important;color:#f8f9fd!important;
}
body.sf-mural-embedded .meta .flag-img{
  width:16px!important;height:11px!important;max-height:11px!important;
}
body.sf-mural-embedded .bubble,
body.sf-mural-embedded .mine .bubble{
  padding:6px 8px!important;font-size:11px!important;line-height:1.38!important;
  background:rgba(19,23,44,.28)!important;border:1px solid rgba(62,140,213,.18)!important;
  border-left:1px solid rgba(47,147,235,.48)!important;
  color:#f4f6fc!important;border-radius:5px 9px 9px 9px!important;
  box-shadow:none!important;overflow-wrap:anywhere!important;
}
body.sf-mural-embedded .message-text,
body.sf-mural-embedded .bubble p,
body.sf-mural-embedded .bubble .message-text{color:#f4f6fc!important}
body.sf-mural-embedded .bubble .time{font-size:9px!important;color:#b8bcd0!important}
body.sf-mural-embedded .actions{margin:3px 0 0!important;font-size:9px!important;gap:8px!important;color:#bac5d9!important}
body.sf-mural-embedded .date-separator{font-size:9px!important;margin:4px auto 8px!important;padding:3px 8px!important}
body.sf-mural-embedded .composer{
  display:flex!important;flex:0 0 auto!important;align-items:center!important;
  width:100%!important;min-height:0!important;gap:5px!important;
  padding:6px 7px!important;
  background:rgba(9,12,28,.6)!important;
  border-top:1px solid rgba(44,155,246,.25)!important;box-shadow:none!important;
}
body.sf-mural-embedded .my-avatar{
  width:28px!important;height:28px!important;flex:0 0 28px!important;
}
body.sf-mural-embedded .me-line{display:none!important}
body.sf-mural-embedded .compose-main{flex:1!important;min-width:0!important;margin:0!important}
body.sf-mural-embedded .input-row{
  display:flex!important;align-items:center!important;
  min-height:38px!important;border-radius:9px!important;
  padding:3px 4px!important;background:rgba(10,16,34,.55)!important;
}
body.sf-mural-embedded #emojiBtn{width:22px!important;font-size:18px!important}
body.sf-mural-embedded #messageInput{
  font:inherit!important;font-size:11px!important;min-height:28px!important;
  max-height:80px!important;line-height:1.3!important;padding:6px 5px!important;
}
body.sf-mural-embedded #sendBtn{
  flex:0 0 29px!important;width:29px!important;height:29px!important;
  min-width:29px!important;min-height:29px!important;
  border-radius:8px!important;font-size:15px!important;
}
body.sf-mural-embedded .modal{padding:6px!important}
body.sf-mural-embedded .modal-card{
  max-height:97vh!important;width:min(97%,500px)!important;
  overflow:auto!important;padding:16px 10px!important;
}
body.sf-mural-embedded .modal-card h2{font-size:16px!important}
body.sf-mural-embedded #siteNotice,
body.sf-mural-embedded #pinnedBar{font-size:10px!important;padding:3px 5px!important}
body.sf-mural-embedded .load-wrap{padding:2px!important;background:transparent!important}
/* Viewport reduzido: não aplicar o layout mobile do chat original ao frame. */
@media(max-width:700px){
  body.sf-mural-embedded .chat-workspace{display:flex!important}
  body.sf-mural-embedded .chat-left{display:flex!important}
  body.sf-mural-embedded .feed{padding:9px 8px 7px!important}
  body.sf-mural-embedded .composer{padding:6px!important}
}

/* Fundo real transparente: respeitar o painel Neon externo. */
body.sf-mural-embedded .chat-workspace,
body.sf-mural-embedded .chat-left,
body.sf-mural-embedded #messages,
body.sf-mural-embedded .feed{background:transparent!important}
/* Na versao incorporada, toda a tipografia de mensagens fica em branco suave. */
body.sf-mural-embedded .meta strong,
body.sf-mural-embedded .bubble,
body.sf-mural-embedded .message-text{color:#f3f6ff!important}
/* O avatar e as bandeiras originais continuam no mural. */
body.sf-mural-embedded .msg .avatar{display:flex!important;visibility:visible!important}


/* ------------------------------------------------------------
   HOTFIX 2026-11-05: iframe transparente revelava o canvas branco.
   Mantem as bandeiras/avatares e apenas aplica uma base escura.
   Regras SOMENTE no modo /chat-test/?embed=1.
   ------------------------------------------------------------ */
html:has(> body.sf-mural-embedded){
  background:#090c1b!important;
  color-scheme:dark;
}
body.sf-mural-embedded{
  background:#090c1b!important;
  color:#f5f7fc!important;
  color-scheme:dark;
}
body.sf-mural-embedded .app{
  background:linear-gradient(180deg,#101729 0%,#0a0e20 66%,#090b1c 100%)!important;
}
body.sf-mural-embedded .chat-workspace,
body.sf-mural-embedded .chat-left{
  background:#0c1021!important;
}
body.sf-mural-embedded #feed,
body.sf-mural-embedded .feed{
  background-color:#0b1022!important;
  background-image:linear-gradient(165deg,rgba(20,26,48,.80),rgba(9,12,28,.93))!important;
  background-repeat:no-repeat!important;
  color:#f5f7fc!important;
}
body.sf-mural-embedded .msg .bubble,
body.sf-mural-embedded .msg.mine .bubble,
body.sf-mural-embedded .admin-public-msg .bubble{
  background:rgba(31,36,61,.94)!important;
  border:1px solid rgba(91,145,208,.28)!important;
  border-left:2px solid rgba(38,185,252,.85)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.20)!important;
  color:#f5f7fc!important;
  font-size:12px!important;
  line-height:1.45!important;
}
body.sf-mural-embedded .bubble *,
body.sf-mural-embedded .message-text,
body.sf-mural-embedded .bubble p{
  color:inherit;
}
body.sf-mural-embedded .msg .meta,
body.sf-mural-embedded .msg .meta .loc{
  color:#b9c7de!important;
  opacity:1!important;
}
body.sf-mural-embedded .msg .meta strong,
body.sf-mural-embedded .msg .meta .moderator-name{
  color:#f5f8ff!important;
  font-size:12px!important;
}
body.sf-mural-embedded .msg .actions,
body.sf-mural-embedded .msg .actions .act,
body.sf-mural-embedded .msg .replies-toggle{
  color:#a7bdda!important;
}
body.sf-mural-embedded .date-separator{
  background:rgba(28,37,65,.92)!important;
  color:#c6d4eb!important;
}
body.sf-mural-embedded .composer{
  background:#0b1022!important;
  color:#f3f6ff!important;
}
body.sf-mural-embedded .input-row{
  background:#151c32!important;
}
body.sf-mural-embedded #messageInput{
  color:#f5f8ff!important;
}
body.sf-mural-embedded #messageInput::placeholder{
  color:#b4bfd2!important;
}


/* -----------------------------------------------------------
   DESKTOP 2026-11-06 | painel translúcido, BALÕES opacos.
   Apenas no iframe de chat inserido na pagina PC da radio.
   A classe e definida pelo bridge conforme a largura do PAI.
   ----------------------------------------------------------- */
html:has(> body.sf-mural-embedded.sf-chat-embedded-desktop),
body.sf-mural-embedded.sf-chat-embedded-desktop,
body.sf-mural-embedded.sf-chat-embedded-desktop .app,
body.sf-mural-embedded.sf-chat-embedded-desktop .chat-workspace,
body.sf-mural-embedded.sf-chat-embedded-desktop .chat-left,
body.sf-mural-embedded.sf-chat-embedded-desktop #feed,
body.sf-mural-embedded.sf-chat-embedded-desktop .feed {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
body.sf-mural-embedded.sf-chat-embedded-desktop .composer{
  background:rgba(8,12,30,.18)!important;
  border-top:1px solid rgba(43,174,255,.30)!important;
}
body.sf-mural-embedded.sf-chat-embedded-desktop .msg .bubble,
body.sf-mural-embedded.sf-chat-embedded-desktop .msg.mine .bubble,
body.sf-mural-embedded.sf-chat-embedded-desktop .admin-public-msg .bubble{
  background:#101b35!important; /* 100% opaco */
  background-image:none!important;
  border:1px solid #28baff!important;
  border-left:3px solid #13d4ff!important;
  border-radius:7px 10px 10px 10px!important;
  box-shadow:0 1px 9px rgba(0,9,24,.28)!important;
  color:#f8fbff!important;
}
body.sf-mural-embedded.sf-chat-embedded-desktop .input-row{
  background:#0b1630!important; /* 100% opaco */
  border:1px solid #25baff!important;
  box-shadow:0 0 0 1px rgba(18,166,240,.12)!important;
}
body.sf-mural-embedded.sf-chat-embedded-desktop .date-separator{
  background:#1c2945!important;color:#f3f7ff!important;
}
/* O painel de participantes aparece no iframe ao clicar em N online. */
body.sf-mural-embedded.sf-chat-embedded-desktop #onlineModal:not(.hidden){
  display:grid!important;z-index:200!important;
}
body.sf-mural-embedded.sf-chat-embedded-desktop #onlineModal .modal-card{
  background:#111a33!important;color:#f4f9ff!important;
}

/* SOFLASHBACK ONEPAGE - CORRECAO COMPOSITOR LARGURA TOTAL (10/11/2026)
   Somente chat incorporado com ?embed=1. Nao altera chat independente. */
html:has(body.sf-mural-embedded),
body.sf-mural-embedded,
body.sf-mural-embedded .app,
body.sf-mural-embedded .chat-workspace,
body.sf-mural-embedded .chat-left{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body.sf-mural-embedded .chat-workspace{
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
}
body.sf-mural-embedded .chat-left{
  flex:1 1 100%!important;
  min-height:0!important;
}
body.sf-mural-embedded .composer{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  flex:0 0 auto!important;
  align-items:center!important;
  margin:0!important;
  padding:8px 12px!important;
  gap:9px!important;
}
body.sf-mural-embedded .composer .compose-main{
  display:block!important;
  flex:1 1 0%!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}
body.sf-mural-embedded .composer .input-row{
  display:flex!important;
  flex:1 1 auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  align-items:center!important;
}
body.sf-mural-embedded .composer #messageInput{
  display:block!important;
  flex:1 1 auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body.sf-mural-embedded .composer #sendBtn{flex:0 0 32px!important;}
@media(max-width:650px){body.sf-mural-embedded .composer{padding:6px!important;gap:5px!important}}


/* ==========================================================
   SO FLASHBACK • GLASS VIDEO / VISUAL ONLY • 10-11-2026
   Permite enxergar o video por tras do iframe do chat.
   Nenhuma regra altera login, envio, dados ou player.
   ========================================================== */
html:has(> body.sf-mural-embedded),
body.sf-mural-embedded,
body.sf-mural-embedded .app,
body.sf-mural-embedded .chat-workspace,
body.sf-mural-embedded .chat-left,
body.sf-mural-embedded #feed,
body.sf-mural-embedded .feed,
body.sf-mural-embedded.sf-chat-embedded-desktop .app,
body.sf-mural-embedded.sf-chat-embedded-desktop .chat-workspace,
body.sf-mural-embedded.sf-chat-embedded-desktop .chat-left,
body.sf-mural-embedded.sf-chat-embedded-desktop #feed {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
body.sf-mural-embedded .feed,
body.sf-mural-embedded.sf-chat-embedded-desktop .feed {
  background:linear-gradient(135deg,rgba(3,10,26,.73),rgba(8,13,33,.69))!important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
body.sf-mural-embedded .composer,
body.sf-mural-embedded.sf-chat-embedded-desktop .composer{
  background:rgba(5,13,34,.78)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border-top:1px solid rgba(45,198,255,.56)!important;
}
body.sf-mural-embedded .input-row,
body.sf-mural-embedded.sf-chat-embedded-desktop .input-row{
  background:rgba(8,19,48,.81)!important;
  border:1px solid rgba(57,190,255,.73)!important;
  box-shadow:0 0 12px rgba(0,195,255,.14),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body.sf-mural-embedded .msg .bubble,
body.sf-mural-embedded .msg.mine .bubble,
body.sf-mural-embedded .admin-public-msg .bubble,
body.sf-mural-embedded.sf-chat-embedded-desktop .msg .bubble,
body.sf-mural-embedded.sf-chat-embedded-desktop .msg.mine .bubble,
body.sf-mural-embedded.sf-chat-embedded-desktop .admin-public-msg .bubble{
  background:rgba(9,20,48,.84)!important;
  background-image:none!important;
  color:#f7faff!important;
  border:1px solid rgba(55,187,255,.75)!important;
  border-left:3px solid #16cefa!important;
  border-radius:9px 12px 12px 9px!important;
  box-shadow:0 3px 14px rgba(0,0,0,.23),0 0 10px rgba(14,186,251,.13)!important;
}
body.sf-mural-embedded .admin-msg .bubble,
body.sf-mural-embedded .admin-public-msg .bubble{
  border-color:rgba(245,95,234,.78)!important;
  border-left-color:#f264df!important;
  box-shadow:0 0 13px rgba(227,65,226,.16)!important;
}
body.sf-mural-embedded .date-separator,
body.sf-mural-embedded.sf-chat-embedded-desktop .date-separator{
  background:rgba(20,35,75,.80)!important;
  color:#e9f5ff!important;
  border:1px solid rgba(76,172,249,.38)!important;
}
/* A tela independente mantem sua arquitetura; muda somente a aparencia desktop. */
@media (min-width:701px){
  body:not(.sf-mural-embedded){background:transparent!important}
  body:not(.sf-mural-embedded) .app,
  body:not(.sf-mural-embedded) .chat-workspace,
  body:not(.sf-mural-embedded) .chat-left{background:transparent!important}
  body:not(.sf-mural-embedded) .chat-workspace{
    grid-template-columns:minmax(0,63fr) minmax(270px,37fr)!important;
  }
  body:not(.sf-mural-embedded) .feed{
    background:linear-gradient(135deg,rgba(3,10,26,.72),rgba(8,13,33,.69))!important;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  }
  body:not(.sf-mural-embedded) .online-dock{
    background:linear-gradient(145deg,rgba(4,11,29,.69),rgba(9,12,36,.64))!important;
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    border-left:1px solid rgba(227,66,242,.42)!important;
  }
  body:not(.sf-mural-embedded) .online-dock-head{
    background:linear-gradient(95deg,rgba(0,171,246,.24),rgba(183,54,241,.22))!important;
    border-bottom:1px solid rgba(57,193,255,.45)!important;
  }
  body:not(.sf-mural-embedded) .composer{
    background:rgba(6,13,33,.76)!important;
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    border-top:1px solid rgba(32,201,255,.5)!important;
  }
  body:not(.sf-mural-embedded) .bubble{
    background:rgba(10,23,52,.85)!important;
    border:1px solid rgba(42,179,247,.63)!important;
    border-left:3px solid #17c9f8!important;
    box-shadow:0 2px 12px rgba(0,0,0,.19),0 0 9px rgba(23,190,254,.11)!important;
  }
  body:not(.sf-mural-embedded) .admin-msg .bubble,
  body:not(.sf-mural-embedded) .admin-public-msg .bubble{
    border-color:rgba(232,85,237,.8)!important;border-left-color:#f064e6!important;
  }
  body:not(.sf-mural-embedded) .input-row{
    background:rgba(9,22,51,.84)!important;
    border:1px solid rgba(37,191,255,.7)!important;
  }
  body:not(.sf-mural-embedded) .date-separator{
    background:rgba(25,38,78,.8)!important;
    border:1px solid rgba(48,165,242,.38)!important;
  }
  body:not(.sf-mural-embedded) .online-dock .online-user{
    padding:9px 8px!important;min-height:56px!important;
    border-bottom:1px solid rgba(79,154,229,.22)!important;
  }
  body:not(.sf-mural-embedded) .online-dock .online-user .avatar{
    width:39px!important;height:39px!important;flex-basis:39px!important;
  }
  body:not(.sf-mural-embedded) .online-dock .online-user-info b{font-size:12px!important}
  body:not(.sf-mural-embedded) .online-dock .online-user-info small{font-size:10px!important}
}
@media (prefers-reduced-motion:reduce){
  body.sf-mural-embedded .feed,body.sf-mural-embedded .composer,
  body:not(.sf-mural-embedded) .feed,body:not(.sf-mural-embedded) .online-dock{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
}