/* 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}}