/* Mural de Recados Só Flashback | somente camada visual | 05/11/2026 */
:root{--bg:#070917;--panel:rgba(13,14,32,.72);--panel2:rgba(19,20,42,.75);--bubble:rgba(19,22,45,.48);--mine:rgba(19,22,45,.48);--green:#16c9f9;--green2:#119efa;--text:#f3f4fc;--muted:#a9acc7;--line:rgba(55,170,255,.4)}
body{background:#080714!important;color:#f2f4fc!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif!important}
.app{max-width:none!important;width:100%!important;background:radial-gradient(ellipse at 48% 25%,rgba(89,27,138,.18),transparent 53%),linear-gradient(165deg,#0a0918,#090c1e 64%,#0b0920)!important}
.topbar{background:rgba(10,10,26,.76)!important;border-bottom:1px solid rgba(49,176,255,.44)!important;box-shadow:0 0 22px rgba(11,143,249,.08)!important}
.room-icon{background:rgba(13,39,71,.5)!important;border:1px solid #229deb!important;box-shadow:0 0 17px rgba(0,171,255,.22)!important}
.title h1{font-weight:800!important;color:white!important;letter-spacing:-.02em!important}
.title p{color:#b4b9d2!important}
#quizHeaderRanking,.quiz-header-ranking,.quiz-chat-message,.quiz-reply-bar{display:none!important}
.profile-note{background:rgba(16,22,45,.48)!important;border-bottom:1px solid rgba(51,152,241,.2)!important;color:#c9def6!important;font-weight:500!important}
.chat-workspace{display:flex!important;flex:1;min-height:0;background:transparent!important;overflow:hidden}
.chat-left{flex:1;min-width:0!important;border-right:0!important;max-width:none!important}
.online-dock{display:none!important}
.feed{background:transparent!important;padding:20px clamp(12px,4vw,64px) 16px!important;scrollbar-width:thin;scrollbar-color:#169eea rgba(9,15,38,.65);}
.feed::-webkit-scrollbar{width:7px}.feed::-webkit-scrollbar-track{background:rgba(9,15,38,.65)}.feed::-webkit-scrollbar-thumb{background:#169eea;border-radius:999px}
.msg,.msg.mine{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;width:min(850px,100%)!important;margin:0 auto 13px!important;gap:12px!important}
.msg.mine .avatar{order:0!important}.msg-content,.msg.mine .msg-content{max-width:calc(100% - 54px)!important;flex:1!important;margin-top:1px!important}
.avatar{width:42px!important;height:42px!important;flex:0 0 42px!important;border:1px solid rgba(33,177,255,.8)!important;box-shadow:0 0 0 2px rgba(8,14,30,.6),0 0 13px rgba(5,162,255,.18)!important}
.meta,.mine .meta{justify-content:flex-start!important;flex-wrap:wrap!important;gap:6px!important;margin:0 0 5px!important;color:#b6bbd2!important;font-size:11px!important}
.meta strong,.meta .moderator-name,.admin-public-msg .meta strong{color:#f5f6ff!important;font-size:13px!important;font-weight:750!important}
.bubble,.mine .bubble,.admin-public-msg .bubble{background:rgba(17,21,42,.46)!important;border:1px solid rgba(55,139,219,.22)!important;border-left:2px solid rgba(36,166,245,.75)!important;border-radius:4px 12px 12px 12px!important;color:#f2f3fa!important;box-shadow:none!important;padding:11px 13px!important;line-height:1.55!important;font-size:13px!important}
.message-text,.bubble .message-text,.bubble p{color:#f3f4fa!important}
.bubble .time{color:#adb1c9!important;font-size:10px!important}
.actions,.mine .actions{justify-content:flex-start!important;color:#aeb4ca!important;font-size:11px!important;gap:13px!important}
.act,.replies-toggle{color:#b7bfda!important}.act:hover{color:#52bfff!important}
.date-separator{border:1px solid rgba(59,143,231,.24)!important;background:rgba(23,24,48,.66)!important;color:#b6c5df!important}
.composer{background:rgba(7,10,25,.84)!important;border-top:1px solid rgba(51,165,246,.38)!important;box-shadow:0 -10px 25px rgba(4,8,24,.15)!important;padding:12px clamp(10px,4vw,64px)!important}
.composer>.my-avatar{border:1px solid rgba(41,171,254,.65)!important}
.compose-main{max-width:850px!important;margin:auto!important}
.me-line{color:#c4c8df!important}.input-row{border:1px solid rgba(54,158,239,.54)!important;border-radius:12px!important;background:rgba(15,19,42,.57)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important}
.input-row textarea{color:#f4f5ff!important}.input-row textarea::placeholder{color:#a6adc7!important}
.send,.primary{background:linear-gradient(120deg,#04c6ed,#1677ff)!important;border-radius:10px!important;box-shadow:0 0 12px rgba(14,155,255,.28)!important}
.online{background:rgba(11,31,52,.5)!important;border:1px solid rgba(42,148,226,.4)!important;color:#ecf8ff!important}
.modal-card{background:#121225!important;border:1px solid rgba(53,164,251,.52)!important;box-shadow:0 16px 60px rgba(0,0,0,.65)!important}
.load-wrap{background:rgba(9,11,26,.58)!important}
@media(max-width:700px){.topbar{padding:8px!important;gap:7px!important}.title h1{font-size:15px!important}.title p{font-size:10px!important}.feed{padding:14px 10px 8px!important}.msg,.msg.mine{gap:8px!important}.avatar{width:34px!important;height:34px!important;flex-basis:34px!important}.msg-content,.msg.mine .msg-content{max-width:calc(100% - 42px)!important}.composer{padding:9px!important}.bubble,.mine .bubble{font-size:12px!important}}

/* HOTFIX MOBILE 2026-11-06: impedir colapso das colunas do mural.
   Isolado a telas pequenas; desktop permanece inalterado. */
@media (max-width:700px){
  .chat-workspace{display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;min-height:0!important;flex:1 1 auto!important;overflow:hidden!important}
  .chat-left{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:0!important;overflow:hidden!important}
  .chat-left>.feed{display:block!important;flex:1 1 auto!important;width:100%!important;min-width:0!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important}
  .chat-left .feed .empty,.chat-left .feed .loading{width:100%!important;max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important;text-align:center!important;padding:28px 14px!important}
  .chat-left .composer{display:flex!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;max-width:100%!important;align-items:flex-end!important;gap:8px!important;padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px))!important}
  .chat-left .compose-main{flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:100%!important}
  .chat-left .input-row{display:flex!important;width:100%!important;min-width:0!important;align-items:center!important}
  .chat-left #messageInput{flex:1 1 auto!important;min-width:0!important;width:0!important;font-size:16px!important}
  .chat-left .input-row .round,.chat-left .input-row .send{flex-shrink:0!important}
  .chat-left .my-avatar{flex-shrink:0!important;align-self:flex-end!important}
  .chat-left .msg,.chat-left .msg.mine{max-width:100%!important;min-width:0!important}
  .chat-left .msg-content{min-width:0!important;max-width:calc(100% - 48px)!important;overflow-wrap:break-word!important}
  .chat-left .bubble{overflow-wrap:break-word!important;word-break:normal!important}
  .topbar{min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;height:auto!important;min-height:70px!important}
  .topbar .title{min-width:110px!important;flex:1 1 145px!important}
  .topbar .online,.topbar .header-account-action{flex:0 0 auto!important;max-width:100%!important}
  .online-dock{display:none!important}
}


/* Versao desktop (chat independente). Nada altera o mobile. */
.sf-chat-title-desktop{display:none}
.sf-chat-title-mobile{display:inline}
@media (min-width:701px){
  body:not(.sf-mural-embedded) .sf-chat-title-desktop{display:inline}
  body:not(.sf-mural-embedded) .sf-chat-title-mobile{display:none}
  body:not(.sf-mural-embedded) .app{background:rgba(8,11,26,.40)!important}
  body:not(.sf-mural-embedded) .feed{background:transparent!important}
  body:not(.sf-mural-embedded) .bubble,
  body:not(.sf-mural-embedded) .mine .bubble{
    background:#101b35!important;border:1px solid #27baff!important;
    box-shadow:0 0 8px rgba(0,157,255,.08)!important;
    color:#fff!important;
  }
  body:not(.sf-mural-embedded) .composer{background:rgba(8,11,27,.36)!important}
  body:not(.sf-mural-embedded) .input-row{
    background:#0b1630!important;border:1px solid #19baff!important;
  }
  /* A versao mural esconde o dock. Neste caso, clique abre o modal. */
  body:not(.sf-mural-embedded) #onlineModal:not(.hidden){display:grid!important}
}