/* Comunicação entre famílias — mobile first */

.family-tabs{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.family-tabs button{
  position:relative;
}
.family-tab-badge{
  position:absolute;
  top:3px;
  right:4px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  background:#ff7a1a;
  color:#1a0d03;
  font-size:.5rem;
  font-weight:950;
}

.family-communication-head,
.communication-section-head,
.communication-alert-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.family-communication-head h3{margin:.15rem 0 .25rem}
.communication-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:12px 0;
}
.communication-summary>div{
  min-width:0;
  padding:9px 8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  text-align:center;
}
.communication-summary b{
  display:block;
  color:#ffb45d;
  font-size:1rem;
  line-height:1;
}
.communication-summary span{
  display:block;
  margin-top:4px;
  color:#9da9b5;
  font-size:.56rem;
  font-weight:800;
  line-height:1.15;
}
.communication-section{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.communication-section-head>div,
.communication-alert-section-head>div{
  display:grid;
  gap:2px;
}
.communication-section-head b,
.communication-alert-section-head b{font-size:.76rem;color:#fff}
.communication-section-head small,
.communication-alert-section-head small{font-size:.57rem;color:#8e9ba8}
.communication-count{
  min-width:27px;
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  color:#d8e0e8;
  font-size:.58rem;
  font-weight:900;
  text-align:center;
}

.communication-list{
  display:grid;
  gap:7px;
  margin-top:8px;
}
.communication-empty{
  padding:11px;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:10px;
  color:#8794a1;
  font-size:.66rem;
  text-align:center;
}
.communication-empty.complete{
  color:#8ed7aa;
  border-color:rgba(91,204,132,.18);
}
.communication-empty.error{color:#ffb0a0}

.family-comment-thread{
  display:grid;
  gap:5px;
}
.family-comment{
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.family-comment.is-reply{
  margin-left:18px;
  border-left:2px solid rgba(255,157,58,.38);
  background:rgba(255,157,58,.025);
}
.family-comment.is-highlighted{
  outline:2px solid rgba(255,157,58,.42);
  background:rgba(255,157,58,.07);
}
.family-comment-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.family-comment-head b{font-size:.68rem;color:#fff}
.family-comment-head small{font-size:.52rem;color:#788694}
.family-comment-text{
  margin-top:5px;
  color:#d8e0e7;
  font-size:.66rem;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.family-comment-actions{
  display:flex;
  gap:10px;
  margin-top:6px;
}
.family-comment-actions button{
  border:0;
  padding:0;
  background:none;
  color:#aab7c3;
  font-size:.55rem;
  font-weight:850;
  cursor:pointer;
}
.family-comment-actions .danger-link{color:#e9a49a}

.communication-dialog .communication-modal-card{
  width:min(620px,calc(100vw - 20px));
  max-height:min(86vh,760px);
  overflow:auto;
}
.communication-mode-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  margin:10px 0 12px;
}
.communication-mode-pane{display:none}
.communication-mode-pane.active{display:block}
.public-comments-list,
.private-message-list{
  max-height:42vh;
  overflow:auto;
  padding-right:2px;
}
.communication-reply-context{
  margin:8px 0 0;
  padding:7px 9px;
  border-radius:9px;
  background:rgba(255,153,46,.08);
  color:#ffd5a1;
  font-size:.61rem;
}
.communication-composer-label{
  display:grid;
  gap:5px;
  margin-top:10px;
}
.communication-composer-label>span{
  color:#b7c1ca;
  font-size:.61rem;
  font-weight:850;
}
.communication-composer-label textarea{
  width:100%;
  min-height:76px;
  resize:vertical;
}
.communication-composer-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:7px;
}

.private-message-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:120px;
  margin:9px 0;
}
.private-message{
  align-self:flex-start;
  max-width:85%;
  padding:8px 10px;
  border-radius:12px 12px 12px 3px;
  background:rgba(255,255,255,.06);
}
.private-message.mine{
  align-self:flex-end;
  border-radius:12px 12px 3px 12px;
  background:rgba(255,130,31,.14);
}
.private-message b{
  display:block;
  margin-bottom:3px;
  color:#fff;
  font-size:.58rem;
}
.private-message div{
  color:#e1e6eb;
  font-size:.66rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.private-message small{
  display:inline-block;
  margin-top:4px;
  color:#81909d;
  font-size:.5rem;
}
.private-message button{
  margin-left:8px;
  border:0;
  background:none;
  color:#d7a096;
  font-size:.5rem;
}

.private-thread-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  width:100%;
  padding:9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:inherit;
  text-align:left;
}
.private-thread-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.private-thread-copy b{font-size:.65rem;color:#fff}
.private-thread-copy span{
  overflow:hidden;
  color:#aeb9c3;
  font-size:.58rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.private-thread-copy small{font-size:.49rem;color:#71808c}
.private-thread-unread{color:#ffb05a;font-size:.54rem;font-weight:900}
.private-thread-read{color:#768490;font-size:.52rem}

.communication-alert-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin:9px 0 12px;
}
.communication-alert-summary span{
  padding:8px;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:#aeb9c3;
  font-size:.6rem;
  text-align:center;
}
.communication-alert-summary b{
  color:#ffb45d;
  font-size:.86rem;
}
.communication-alert-tabs{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin:9px 0 10px;
}
.communication-alert-tabs.has-pending{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.communication-alert-tab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  min-height:42px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  background:rgba(255,255,255,.035);
  color:#b9c4ce;
  font:850 .62rem system-ui,sans-serif;
  cursor:pointer;
}
.communication-alert-tab span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.communication-alert-tab b{
  min-width:24px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#e8eef3;
  font-size:.58rem;
  text-align:center;
}
.communication-alert-tab.active{
  border-color:rgba(122,188,255,.38);
  background:rgba(80,151,220,.12);
  color:#fff;
}
.communication-alert-tab.is-pending{
  border-color:rgba(255,153,46,.46);
  background:linear-gradient(180deg,rgba(255,145,36,.16),rgba(255,111,22,.08));
  color:#ffd3a2;
  box-shadow:0 0 0 1px rgba(255,145,36,.06),0 7px 18px rgba(255,91,18,.08);
}
.communication-alert-tab.is-pending b{
  background:#ff8f2b;
  color:#1c0d04;
}
.communication-alert-tab.is-pending.active{
  border-color:rgba(255,174,78,.72);
  background:linear-gradient(180deg,rgba(255,145,36,.25),rgba(255,95,18,.13));
  color:#fff3e3;
}
.communication-alert-section{
  margin-top:8px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.08);
}
.communication-alert-pane{
  display:none;
}
.communication-alert-pane.active{
  display:block;
}
.communication-notification-list,
.communication-pending-list{
  display:grid;
  gap:5px;
  margin-top:7px;
}
.communication-notification{
  display:grid;
  grid-template-columns:12px 24px minmax(0,1fr);
  gap:7px;
  align-items:start;
  width:100%;
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  color:inherit;
  text-align:left;
}
.communication-notification.is-unread{
  border-color:rgba(255,148,44,.22);
  background:rgba(255,139,28,.055);
}
.communication-notification-dot{
  color:#ff9d3a;
  font-size:.55rem;
}
.communication-notification-icon{font-size:.8rem}
.communication-notification-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.communication-notification-copy b{font-size:.63rem;color:#fff}
.communication-notification-copy span{
  overflow:hidden;
  color:#aab5bf;
  font-size:.56rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.communication-notification-copy small{font-size:.49rem;color:#71808c}
.communication-pending-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border-radius:10px;
  background:rgba(255,145,36,.045);
}
.communication-pending-item>div{
  display:grid;
  gap:2px;
}
.communication-pending-item b{font-size:.62rem;color:#fff}
.communication-pending-item span{font-size:.54rem;color:#aeb9c3}

.participant-communication-btn{
  border:0;
  padding:3px 0 0;
  background:none;
  color:#9fb5c8;
  font-size:.55rem;
  font-weight:850;
  cursor:pointer;
  text-align:right;
}
.participant-communication-btn:hover{color:#ffc06e}
.participant-admin-actions{
  display:grid;
  justify-items:end;
  gap:3px;
}

.popup-family-btn{
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  padding:6px 8px;
  background:rgba(255,255,255,.06);
  color:#eef4f8;
  font:800 .68rem system-ui,sans-serif;
}

.admin-communication-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
  padding:9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
}
.admin-communication-row b{font-size:.64rem;color:#fff}
.admin-communication-row span{display:block;margin-top:3px;font-size:.58rem;color:#b4bec7}
.admin-communication-row small{display:block;margin-top:3px;font-size:.5rem;color:#778591}

@media(max-width:700px){
  .family-tabs button{
    min-height:50px!important;
    padding:5px 2px!important;
  }
  .family-tab-label{font-size:.55rem!important}
  .family-tab-icon{font-size:.7rem!important}
}
@media(max-width:520px){
  .communication-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .communication-pending-item{grid-template-columns:1fr}
  .communication-pending-item .btn{width:100%}
  .communication-dialog .communication-modal-card{
    width:calc(100vw - 12px);
    max-height:90vh;
    padding:14px;
  }
  .family-comment.is-reply{margin-left:10px}
  .private-message{max-width:91%}
}


/* v206 — modal de comunicação compacto e unificado */
.communication-dialog .communication-modal-card{
  width:min(570px,calc(100vw - 24px));
  max-height:min(84dvh,680px);
  padding:12px;
  overflow:auto;
}
.communication-modal-card .section-head{
  align-items:flex-start;
  gap:8px;
}
.communication-modal-card .section-head>div{
  min-width:0;
}
.communication-modal-card .section-head h3{
  margin:1px 0 2px;
  font-size:clamp(20px,5vw,24px);
  line-height:1.15;
}
.communication-modal-card .section-head .eyebrow{
  margin:0;
  font-size:10px;
  line-height:1.1;
}
.communication-modal-card .section-head .muted{
  margin:0;
  font-size:13px;
  line-height:1.35;
}
.communication-modal-card .icon-btn{
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  font-size:22px;
}
.communication-mode-tabs{
  gap:4px;
  margin:8px 0;
  padding:3px;
}
.communication-mode-tabs button{
  min-height:40px!important;
  padding:7px 8px!important;
  font-size:14px!important;
  line-height:1.1!important;
}
.communication-mode-pane .compact-notice{
  margin:0 0 6px;
  padding:8px 9px;
  border-radius:9px;
  font-size:12px;
  line-height:1.3;
}
.public-comments-list,
.private-message-list{
  max-height:32dvh;
  padding-right:1px;
}
.communication-list{
  gap:5px;
  margin-top:6px;
}
.family-comment{
  padding:7px 9px;
  border-radius:10px;
}
.family-comment-thread{
  gap:4px;
}
.family-comment.is-reply{
  margin-left:12px;
}
.family-comment-head b{
  font-size:13px;
}
.family-comment-head small{
  font-size:10px;
}
.family-comment-text{
  margin-top:3px;
  font-size:13px;
  line-height:1.35;
}
.family-comment-actions{
  gap:12px;
  margin-top:5px;
}
.family-comment-actions button{
  font-size:11px;
}
.communication-reply-context{
  margin:6px 0 0;
  padding:6px 8px;
  font-size:12px;
  line-height:1.25;
}
.communication-composer-label{
  gap:4px;
  margin-top:7px;
}
.communication-composer-label>span{
  font-size:12px;
  line-height:1.2;
}
.communication-composer-label textarea{
  min-height:56px;
  max-height:110px;
  padding:8px 9px;
  font-size:14px;
  line-height:1.3;
  resize:vertical;
}
.communication-composer-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-top:6px;
}
.communication-composer-actions .btn{
  width:auto;
  min-height:38px;
  padding:8px 12px;
  border-radius:10px;
  font-size:13px;
  line-height:1.1;
}
.private-message-list{
  gap:5px;
  min-height:70px;
  margin:6px 0;
}
.private-message{
  max-width:82%;
  padding:7px 9px;
  border-radius:10px 10px 10px 3px;
}
.private-message.mine{
  border-radius:10px 10px 3px 10px;
}
.private-message b{
  margin-bottom:2px;
  font-size:11px;
}
.private-message div{
  font-size:13px;
  line-height:1.3;
}
.private-message small,
.private-message button{
  margin-top:3px;
  font-size:10px;
}
.private-message button{
  margin-left:7px;
}

@media(max-width:520px){
  .communication-dialog .communication-modal-card{
    width:calc(100vw - 16px);
    max-height:86dvh;
    padding:10px;
  }
  .communication-modal-card .section-head h3{
    font-size:20px;
  }
  .communication-modal-card .section-head .muted{
    font-size:12px;
  }
  .communication-mode-tabs button{
    min-height:38px!important;
    font-size:13px!important;
  }
  .public-comments-list,
  .private-message-list{
    max-height:30dvh;
  }
  .communication-composer-label textarea{
    min-height:52px;
    max-height:96px;
  }
  .communication-composer-actions .btn{
    min-height:36px;
    padding:7px 10px;
    font-size:12px;
  }
  .private-message{
    max-width:88%;
  }
}


/* v208 — contexto visual dos comentários */
.communication-comment-context,
.family-comment-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:5px 0;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:#cbd6df;
  font-size:12px;
  line-height:1.2;
}
.communication-comment-context b,
.family-comment-context span{
  color:#fff;
  font-weight:800;
}
.communication-comment-context button,
.family-comment-context button{
  flex:0 0 auto;
  border:0;
  padding:2px 0;
  background:none;
  color:#ffc06e;
  font:800 11px/1.2 system-ui,-apple-system,sans-serif;
  cursor:pointer;
}
.family-comment-context{
  margin-top:4px;
  margin-bottom:2px;
  padding:5px 7px;
  font-size:11px;
}
@media(max-width:520px){
  .communication-comment-context,
  .family-comment-context{
    gap:6px;
    padding:5px 7px;
    font-size:11px;
  }
}


/* v209 — corrige overflow horizontal do modal mobile */
.communication-dialog{
  width:min(570px,calc(100vw - 16px))!important;
  max-width:calc(100vw - 16px)!important;
  overflow:visible!important;
}
.communication-dialog .communication-modal-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
}
.communication-modal-card,
.communication-modal-card .section-head,
.communication-mode-tabs,
.communication-mode-pane,
.communication-list,
.communication-composer-label,
.communication-composer-actions,
.communication-comment-context,
.communication-reply-context{
  min-width:0!important;
  max-width:100%!important;
}
.communication-composer-label textarea{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.communication-composer-actions{
  flex-wrap:wrap!important;
}
.communication-composer-actions .btn{
  max-width:100%!important;
  white-space:normal!important;
}
.private-message{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:min(88%,100%)!important;
}
.private-message div{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.communication-mode-tabs button{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
@media(max-width:520px){
  .communication-dialog{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
  }
  .communication-dialog .communication-modal-card{
    width:100%!important;
    max-width:100%!important;
    padding:10px!important;
  }
  .communication-composer-actions .btn{
    min-width:0!important;
  }
}


/* v212 — sininho com Pendências e Mensagens em visualizações separadas */
.communication-pending-item{
  border:1px solid rgba(255,153,46,.18);
  background:linear-gradient(90deg,rgba(255,145,36,.10),rgba(255,145,36,.035));
}
@media(max-width:420px){
  .communication-alert-tabs.has-pending{grid-template-columns:1fr 1fr}
  .communication-alert-tab{padding:8px 7px;font-size:.58rem}
}


/* v213 — filtros da Comunicação da Família */
.communication-filter-bar{
  display:flex;
  align-items:center;
  gap:6px;
  margin:9px 0 5px;
  padding-bottom:3px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.communication-filter-bar::-webkit-scrollbar{display:none}
.communication-filter-chip{
  flex:0 0 auto;
  min-height:31px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#aeb9c3;
  font:850 .56rem/1 system-ui,-apple-system,sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.communication-filter-chip.active{
  border-color:rgba(255,157,58,.48);
  background:rgba(255,139,28,.13);
  color:#fff0df;
}
.communication-filter-chip[data-own-communication-filter="unread"].active{
  box-shadow:0 0 0 1px rgba(255,145,36,.08);
}
.communication-filter-count{
  flex:0 0 auto;
  margin-left:auto;
  color:#7f8d99;
  font-size:.52rem;
  font-weight:800;
  white-space:nowrap;
}
@media(max-width:520px){
  .communication-filter-bar{margin-left:-2px;margin-right:-2px}
  .communication-filter-count{margin-left:2px}
}


/* v216 — modal de comunicação centralizado dentro da área segura */
#familyCommunicationDialog.communication-dialog[open]{
  --communication-safe-top:max(18px,env(safe-area-inset-top,0px));
  --communication-safe-bottom:max(18px,env(safe-area-inset-bottom,0px));
  position:fixed!important;
  inset:var(--communication-safe-top) 0 var(--communication-safe-bottom) 0!important;
  width:min(570px,calc(100vw - 16px))!important;
  max-width:calc(100vw - 16px)!important;
  max-height:none!important;
  margin:auto!important;
  padding:0!important;
  transform:none!important;
  overflow:visible!important;
}

#familyCommunicationDialog.communication-dialog[open] .communication-modal-card{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  max-height:calc(100dvh - var(--communication-safe-top) - var(--communication-safe-bottom))!important;
  margin:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}

@supports not (height:100dvh){
  #familyCommunicationDialog.communication-dialog[open] .communication-modal-card{
    max-height:calc(100vh - 36px)!important;
  }
}

@media(max-width:520px){
  #familyCommunicationDialog.communication-dialog[open]{
    --communication-safe-top:max(16px,env(safe-area-inset-top,0px));
    --communication-safe-bottom:max(16px,env(safe-area-inset-bottom,0px));
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
  }
}


/* v217 — garante folga interna no topo e cabeçalho totalmente visível */
#familyCommunicationDialog.communication-dialog[open] .communication-modal-card{
  padding-top:16px!important;
}

@media(max-width:520px){
  #familyCommunicationDialog.communication-dialog[open] .communication-modal-card{
    padding-top:14px!important;
  }
}


/* v218 — botões de Comentários maiores em Assombrar e Casas */
#fun-votes .haunt-secondary-actions .haunt-secondary-action[data-family-communication]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:7px 11px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.065)!important;
  color:#e7eef4!important;
  font:850 12px/1 system-ui,-apple-system,sans-serif!important;
  box-shadow:0 2px 7px rgba(0,0,0,.12)!important;
}

#fun-votes .haunt-secondary-actions .haunt-secondary-action[data-family-communication]:hover,
#fun-votes .haunt-secondary-actions .haunt-secondary-action[data-family-communication]:focus-visible{
  border-color:rgba(255,174,78,.45)!important;
  background:rgba(255,145,36,.11)!important;
  color:#ffd6a7!important;
}

.participant-communication-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:7px 11px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.06)!important;
  color:#e5edf3!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1!important;
  text-align:center!important;
  box-shadow:0 2px 7px rgba(0,0,0,.10)!important;
}

.participant-communication-btn:hover,
.participant-communication-btn:focus-visible{
  border-color:rgba(255,174,78,.45)!important;
  background:rgba(255,145,36,.11)!important;
  color:#ffd6a7!important;
}

@media(max-width:520px){
  #fun-votes .haunt-secondary-actions .haunt-secondary-action[data-family-communication],
  .participant-communication-btn{
    min-height:36px!important;
    padding:8px 12px!important;
    font-size:13px!important;
  }
}


/* v219 — Assombrar: Fotos e Comentários equilibrados lado a lado */
#fun-votes .haunt-secondary-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  min-height:0!important;
  margin-top:5px!important;
  padding:0!important;
}

#fun-votes .haunt-secondary-actions .haunt-secondary-action,
#fun-votes .haunt-secondary-actions .haunt-secondary-action[data-family-communication]{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  height:38px!important;
  margin:0!important;
  padding:6px 8px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.055)!important;
  color:#e7eef4!important;
  font:850 12px/1 system-ui,-apple-system,sans-serif!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:none!important;
}

#fun-votes .haunt-secondary-actions .haunt-secondary-action:hover,
#fun-votes .haunt-secondary-actions .haunt-secondary-action:focus-visible,
#fun-votes .haunt-secondary-actions .haunt-secondary-action[data-family-communication]:hover,
#fun-votes .haunt-secondary-actions .haunt-secondary-action[data-family-communication]:focus-visible{
  border-color:rgba(255,174,78,.42)!important;
  background:rgba(255,145,36,.10)!important;
  color:#ffd6a7!important;
}

#fun-votes .haunt-secondary-actions .haunt-secondary-action:only-child{
  grid-column:1 / -1!important;
}

@media(max-width:520px){
  #fun-votes .haunt-secondary-actions{
    gap:6px!important;
  }
  #fun-votes .haunt-secondary-actions .haunt-secondary-action,
  #fun-votes .haunt-secondary-actions .haunt-secondary-action[data-family-communication]{
    min-height:40px!important;
    height:40px!important;
    padding:7px 6px!important;
    font-size:12px!important;
  }
}