/*! identity.css | Comunidade
Pequenos ajustes visuais pra suportar a identidade real de founder (nome +
startup + cargo) sobre os componentes do template Strive, sem duplicar ou
sobrescrever os tokens já definidos em core.css/app.css. */

/* Bug do template: a logo no navbar mobile tinha animation:pulse infinita
   e permanente (sem nenhum JS que a desligasse após o carregamento),
   fazendo o logo "piscar" sem parar. */
.mobile-navbar .navbar-brand img {
  animation: none !important;
}

/* Trava o scroll do feed atrás enquanto algum painel de tela cheia no
   mobile está aberto (menu hambúrguer, lista de mensagens etc). O
   elemento aberto precisa ter seu próprio overflow-y: auto pra continuar
   rolando por dentro. */
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100%;
  overscroll-behavior: none;
}

/* Dropdown de mensagens da navbar: cada linha abre uma conversa (via
   chat-heads.js), mas não tinha nenhum feedback visual de que é clicável. */
.nav-drop-body.is-friend-requests .media {
  cursor: pointer;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  transition: background 0.15s;
}

.nav-drop-body.is-friend-requests .media:hover {
  background: #f4f4f4;
}

/* Comentar e compartilhar no rodapé do post: agora têm ação de verdade
   (comentar expande abaixo, compartilhar abre o modal), então precisam
   sentir como botão — não só texto estático. */
.card-footer .social-count .comments-count,
.card-footer .social-count .shares-count {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  transition: background 0.15s;
}

.card-footer .social-count .comments-count:hover,
.card-footer .social-count .shares-count:hover {
  background: #f4f4f4;
}

.card-footer .social-count .comments-count:hover span,
.card-footer .social-count .comments-count:hover svg,
.card-footer .social-count .shares-count:hover span,
.card-footer .social-count .shares-count:hover svg {
  color: #33478a;
  stroke: #33478a;
}

/* O ícone de mensagens da navbar perdeu a bolinha "online" junto com o
   fundo vermelho fixo (a classe is-active controlava as duas coisas).
   Reativa só a bolinha, sem o fundo. */
.navbar-item.is-icon .icon-link:has(.feather-mail) .indicator {
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #41d6c3;
}

/* Bolinha de "tem coisa nova" (notificações, pedidos de amizade): sem essa
   regra o .indicator só ganha tamanho/cor via ".icon-link.is-active", ou
   seja, só aparecia com o dropdown já aberto — nunca como aviso prévio.
   .is-unread é ligado/desligado via JS (community.js) e funciona com o
   dropdown fechado ou aberto. */
.navbar-item.is-icon .icon-link .indicator.is-unread {
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #f8595e;
}

/* Cabeçalho do post: linha de startup/cargo abaixo do nome do autor */
.card.is-post .card-heading .user-block .user-info {
  display: flex !important;
  flex-direction: column;
}

.card.is-post .card-heading .user-block .user-info .user-startup {
  font-size: 0.78rem;
  color: #757a91;
  font-weight: 400;
  order: 1;
}

.card.is-post .card-heading .user-block .user-info .time {
  order: 2;
}

/* Espaçamento lateral do Header (Navbar) apenas no Desktop e remoção do ícone de Mensagens */
@media screen and (min-width: 1024px) {
  #main-navbar,
  .navbar.is-inline-flex,
  .navbar-v1 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #main-navbar > .container,
  .navbar > .container,
  .navbar .container.is-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #main-navbar .navbar-start .navbar-item.is-icon:has(.feather-mail),
  .navbar .navbar-start .navbar-item.is-icon:has(.feather-mail),
  .navbar-item.is-icon:has(a[href*="messages"]),
  .navbar-item.is-icon:has(.feather-mail),
  .navbar-item.is-icon:has(svg.feather-mail),
  .navbar-item.is-icon:has(i[data-feather="mail"]),
  .navbar-item.is-desktop-mail-icon,
  .navbar-item.is-icon.is-hidden-desktop,
  .navbar-item.is-icon[data-nav-type="mail"] {
    display: none !important;
  }
}

/* Toggle de Tema ao Lado do Ícone de Notificação */
.navbar-theme-toggle-item {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.navbar-theme-toggle-item .theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.navbar-theme-toggle-item .theme-toggle .toggler {
  width: 44px !important;
  height: 24px !important;
  border-radius: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #f1f5f9 !important;
  box-shadow: none !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

body.is-dark .navbar-theme-toggle-item .theme-toggle .toggler {
  background: #1e293b !important;
  border-color: #475569 !important;
}

.navbar-theme-toggle-item .theme-toggle .toggler .dark,
.navbar-theme-toggle-item .theme-toggle .toggler .light {
  width: 20px !important;
  height: 20px !important;
  top: 1px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar-theme-toggle-item .theme-toggle .toggler .dark svg,
.navbar-theme-toggle-item .theme-toggle .toggler .light svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
}

.theme-toggle,
.theme-toggle .toggler,
.theme-toggle .toggler span,
.theme-toggle .toggler .dark,
.theme-toggle .toggler .light {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

#account-dropdown .nav-drop-header .theme-toggle {
  display: none !important;
}

/* Popovers de Perfil: Apenas Eduardo Casarini e Tiago Galli recebem a capa Coral Strive e o logo */
.profile-popover-block .popover-cover.is-strive-founder {
  background: linear-gradient(135deg, #ff8288 0%, #f86065 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.profile-popover-block .popover-cover:not(.is-strive-founder) {
  background: linear-gradient(135deg, #1c294a 0%, #131c33 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.profile-popover-block .popover-cover .popover-cover-fill {
  background: transparent !important;
}

.profile-popover-block .popover-cover .popover-strive-brand {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  opacity: 0.92;
}

.profile-popover-block .popover-cover .popover-strive-brand img {
  height: 16px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* ====================================================================
   Chat: widget flutuante compacto (padrão Messenger), reescrito em
   flexbox puro. O CSS original do template (core.css) posiciona tudo com
   position:absolute/fixed e offsets fixos (top/left/width em px) pensados
   pra um overlay de TELA CHEIA — isso é o que causava conteúdo cortado e
   elementos vazando quando o widget virou uma caixa pequena. Aqui a
   estrutura inteira (nav / corpo / rodapé) vira uma coluna flex normal,
   sem nenhum offset herdado.
   ==================================================================== */

.chat-wrapper {
  top: auto !important;
  left: auto !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 400px !important;
  max-width: calc(100vw - 32px) !important;
  height: 600px !important;
  max-height: calc(100vh - 40px) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(20, 20, 30, 0.28) !important;
}

.chat-wrapper .chat-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
}

/* Painel de detalhes (400px) e o rail de contatos (pensado pra tela cheia
   com dezenas de conversas simultâneas) não cabem num popup de uma
   conversa só — só a conversa ativa (a mesma que a Stories/feed já
   linkam) importa aqui. */
.chat-wrapper .chat-inner .chat-panel,
.chat-wrapper .chat-inner .users-sidebar {
  display: none !important;
}

/* Cabeçalho: avatar + nome + status à esquerda, só o fechar à direita. */
.chat-wrapper .chat-inner .chat-nav {
  position: static !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  height: 64px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid #e4e7ec;
  background: #fff;
}

.chat-wrapper .chat-inner .chat-nav .nav-start {
  flex: 1;
  min-width: 0;
}

.chat-wrapper .chat-inner .chat-nav .nav-end {
  display: flex !important;
  align-items: center;
  gap: 4px;
}

.chat-wrapper .chat-inner .chat-nav .nav-end .dropdown,
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-search,
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-nav-item.is-hidden-mobile {
  display: none !important;
}

/* Corpo: ocupa o espaço restante, largura total (sem o rail de 60px que
   não existe mais), scroll vertical próprio. */
.chat-wrapper .chat-inner .chat-body,
.chat-wrapper .chat-inner .chat-body.is-opened {
  position: static !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.chat-wrapper .chat-inner .chat-body .chat-body-inner {
  position: static !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* A regra acima usa !important e sobrescrevia .is-hidden (que só tem uma
   classe de especificidade), fazendo TODAS as conversas aparecerem
   empilhadas ao mesmo tempo em vez de só a ativa. */
.chat-wrapper .chat-inner .chat-body .chat-body-inner.is-hidden {
  display: none !important;
}

.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message {
  max-width: 100%;
}

.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message img {
  flex-shrink: 0;
}

.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message .message-block {
  min-width: 0;
  max-width: calc(100% - 62px);
  flex-shrink: 1;
}

.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message .message-block .message-text {
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}

/* Rodapé (campo de mensagem): vira o último item da coluna flex, sem
   position:fixed (que ignorava a caixa do widget) e sem os 460px que o
   CSS original reservava pro painel de detalhes que já removemos. */
.chat-wrapper .chat-inner .chat-action,
.chat-wrapper .chat-inner .chat-body.is-opened .chat-action {
  position: static !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 64px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  border-top: 1px solid #e4e7ec;
}

body.is-frozen {
  overflow: auto !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
}

@media (max-width: 767px) {
  .chat-wrapper {
    bottom: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* Preenchimento do popover de identidade (substitui a foto de capa externa) */
.profile-popover-block .profile-popover-wrapper .popover-cover .popover-cover-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #33478a, #243562);
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Bug do template: posts "is-simple" (sem imagem) colam os botões de
   compartilhar/comentar grudados um no outro, alinhados à esquerda em cima
   do próprio texto, por causa do flex-direction: row-reverse do core.css
   sem gap nem alinhamento à direita. */
.card.is-post.is-simple .post-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 6px;
}

/* Toggle de Idioma (PT / EN) */
.lang-toggle-wrapper {
  display: flex;
  align-items: center;
  margin: 0 8px;
}

.lang-toggle-container {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 3px;
  user-select: none;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  gap: 2px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.lang-toggle-option {
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.03em;
  transition: all 0.2s ease-in-out;
  line-height: 1;
  text-transform: uppercase;
}

.lang-toggle-option.is-active {
  background-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}

/* Ajuste de espaçamento superior das páginas de perfil no desktop */
@media (min-width: 768px) {
  #profile-main,
  #profile-friends,
  #profile-photos,
  #profile-about {
    margin-top: 95px !important;
  }
}

/* Botões de Ação para Startups Recomendadas (Mensagem + Seguir) */
.page-block {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1rem !important;
}

.page-block .page-meta {
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 0.5rem !important;
}

.page-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  margin-left: auto !important;
}

button.page-action-btn,
a.page-action-btn,
div.page-action-btn,
.page-action-btn {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

button.page-action-btn svg,
button.page-action-btn i,
a.page-action-btn svg,
a.page-action-btn i,
.page-action-btn svg,
.page-action-btn i {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2px !important;
  transition: transform 0.2s ease !important;
  display: block !important;
  margin: 0 auto !important;
}

button.page-action-btn:hover,
a.page-action-btn:hover,
.page-action-btn:hover {
  transform: translateY(-1px) scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

button.page-action-btn.message-btn:hover,
a.page-action-btn.message-btn:hover,
.page-action-btn.message-btn:hover {
  background-color: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #2563eb !important;
}

button.page-action-btn.follow-btn:hover,
a.page-action-btn.follow-btn:hover,
.page-action-btn.follow-btn:hover {
  background-color: #fff1f2 !important;
  border-color: #fda4af !important;
  color: #f43f5e !important;
}

body.is-dark button.page-action-btn,
body.is-dark a.page-action-btn,
body.is-dark .page-action-btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

body.is-dark button.page-action-btn.message-btn:hover,
body.is-dark a.page-action-btn.message-btn:hover,
body.is-dark .page-action-btn.message-btn:hover {
  background-color: #1e3a8a !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

body.is-dark button.page-action-btn.follow-btn:hover,
body.is-dark a.page-action-btn.follow-btn:hover,
body.is-dark .page-action-btn.follow-btn:hover {
  background-color: #881337 !important;
  border-color: #f43f5e !important;
  color: #fda4af !important;
}

/* ==========================================================================
   Próximos Eventos Widget (Aba Única e Proporção Ajustada)
   ========================================================================== */
.card.is-events-widget {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(226, 232, 240, 0.7) !important;
  transition: box-shadow 0.2s ease !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
}

.card.is-events-widget:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

.events-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
}

.events-header .header-icon-box {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
  background: #fef2f2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ff4d4d !important;
  flex-shrink: 0 !important;
}

.events-header .header-icon-box svg {
  stroke: #ff4d4d !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

.events-header .header-text {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.events-header .header-text .header-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.events-header .header-text .header-subtitle {
  font-size: 0.78rem !important;
  color: #64748b !important;
  margin: 2px 0 0 0 !important;
  line-height: 1.3 !important;
}

.events-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.event-item {
  background: #fcfcfd !important;
  border-radius: 12px !important;
  padding: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #f1f5f9 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  display: block !important;
}

.event-item:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.event-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

.event-item.is-red::before {
  background: #ff4d4d !important;
}

.event-item.is-blue::before {
  background: #3b59df !important;
}

.event-item .item-badge {
  display: inline-block !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.event-item .item-badge.is-red {
  background: #fef2f2 !important;
  color: #ff4d4d !important;
}

.event-item .item-badge.is-blue {
  background: #eff6ff !important;
  color: #3b59df !important;
}

.event-item .event-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  margin: 0 0 3px 0 !important;
}

.event-item .event-subtitle {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
  margin: 0 0 10px 0 !important;
}

.event-item .event-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid #f1f5f9 !important;
  width: 100% !important;
}

.event-item .event-time {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.event-item .time-icon-box {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.event-item .time-icon-box.is-red {
  background: #fef2f2 !important;
  color: #ff4d4d !important;
}

.event-item .time-icon-box.is-red svg {
  stroke: #ff4d4d !important;
}

.event-item .time-icon-box.is-blue {
  background: #eff6ff !important;
  color: #3b59df !important;
}

.event-item .time-icon-box.is-blue svg {
  stroke: #3b59df !important;
}

.event-item .event-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.event-item .event-action-btn svg {
  stroke: #ffffff !important;
  display: block !important;
}

.event-item .event-action-btn.is-red {
  background: #ff4d4d !important;
  box-shadow: 0 2px 8px rgba(255, 77, 77, 0.2) !important;
}

.event-item .event-action-btn.is-red:hover {
  background: #f83b3b !important;
  transform: translateY(-1px) !important;
}

.event-item .event-action-btn.is-blue {
  background: #3b59df !important;
  box-shadow: 0 2px 8px rgba(59, 89, 223, 0.2) !important;
}

.event-item .event-action-btn.is-blue:hover {
  background: #2f4abf !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   Solicitações de Mentoria Widget (Proporção Ajustada)
   ========================================================================== */
.card.is-mentorship-widget {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(226, 232, 240, 0.7);
  transition: box-shadow 0.2s ease;
  margin-bottom: 1.5rem;
}

.card.is-mentorship-widget:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

.mentorship-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.mentorship-header .header-icon-box {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: #fef2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff4d4d;
}

.mentorship-header .header-icon-box svg {
  stroke: #ff4d4d;
  width: 20px;
  height: 20px;
}

.mentorship-header .header-text .header-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.mentorship-header .header-text .header-subtitle {
  font-size: 0.78rem;
  color: #64748b;
  margin: 2px 0 0 0;
}

.mentorship-list {
  display: flex;
  flex-direction: column;
}

.mentorship-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid #f1f5f9;
}

.mentorship-item:first-child {
  border-top: none;
  padding-top: 0;
}

.mentorship-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mentorship-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  overflow: hidden;
}

.mentorship-avatar.bg-dark-navy {
  background: #131c33;
}

.mentorship-avatar.bg-coral {
  background: #ff4d4d;
}

.mentorship-avatar.bg-indigo {
  background: #6366f1;
}

.mentorship-avatar.bg-teal {
  background: #14b8a6;
}

.mentorship-avatar svg {
  stroke: #ffffff;
  width: 17px;
  height: 17px;
}

.mentorship-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mentorship-info .startup-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mentorship-info .startup-desc {
  font-size: 0.75rem;
  color: #757a91;
  margin: 1px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mentorship-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #fef2f2;
  border: 1px solid #fecdd3;
  color: #ff4d4d !important;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.mentorship-action-btn svg {
  stroke: #ff4d4d;
}

.mentorship-action-btn:hover {
  background: #ffe4e6;
  border-color: #fda4af;
  transform: translateY(-1px);
}

.mentorship-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
}

.mentorship-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ff4d4d !important;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: opacity 0.15s ease;
}

.mentorship-footer-link svg {
  stroke: #ff4d4d;
}

.mentorship-footer-link:hover {
  opacity: 0.85;
}

/* Compatibilidade Dark Mode para ambos os widgets */
/* !important required: the light-mode rules above declare every property
   with !important, so overrides here must match or they're silently lost. */
body.is-dark .card.is-events-widget,
body.is-dark .card.is-mentorship-widget {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.is-dark .events-header .header-text .header-title,
body.is-dark .mentorship-header .header-text .header-title,
body.is-dark .event-item .event-title,
body.is-dark .mentorship-info .startup-name {
  color: #f8fafc !important;
}

body.is-dark .events-header .header-text .header-subtitle,
body.is-dark .mentorship-header .header-text .header-subtitle,
body.is-dark .event-item .event-subtitle,
body.is-dark .mentorship-info .startup-desc {
  color: #94a3b8 !important;
}

body.is-dark .event-item {
  background: #0f172a !important;
  border-color: #334155 !important;
}

body.is-dark .event-item .event-footer,
body.is-dark .mentorship-item,
body.is-dark .mentorship-footer {
  border-color: #334155 !important;
}

body.is-dark .event-item .event-time {
  color: #cbd5e1 !important;
}

body.is-dark .events-header .header-icon-box,
body.is-dark .mentorship-header .header-icon-box,
body.is-dark .mentorship-action-btn {
  background: rgba(255, 77, 77, 0.12) !important;
  border-color: rgba(255, 77, 77, 0.25) !important;
}

body.is-dark .event-item .item-badge.is-red,
body.is-dark .event-item .time-icon-box.is-red {
  background: rgba(255, 77, 77, 0.15) !important;
}

body.is-dark .event-item .item-badge.is-blue,
body.is-dark .event-item .time-icon-box.is-blue {
  background: rgba(59, 89, 223, 0.15) !important;
}

/* ==========================================================================
   Mobile & Touch Adjustments for Próximos Eventos & Mentoria Widgets
   ========================================================================== */
@media screen and (max-width: 1024px) {
  .card.is-events-widget,
  .card.is-mentorship-widget {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 1rem !important;
    display: block !important;
    width: 100% !important;
  }

  .events-header,
  .mentorship-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .events-header .header-icon-box,
  .mentorship-header .header-icon-box {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .events-header .header-text,
  .mentorship-header .header-text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .events-header .header-text .header-title,
  .mentorship-header .header-text .header-title {
    font-size: 1rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  .events-header .header-text .header-subtitle,
  .mentorship-header .header-text .header-subtitle {
    font-size: 0.75rem !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.3 !important;
  }

  .events-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .event-item {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    display: block !important;
    width: 100% !important;
  }

  .event-item .event-title {
    font-size: 0.9rem !important;
    margin: 0 0 2px 0 !important;
  }

  .event-item .event-subtitle {
    font-size: 0.75rem !important;
    margin: 0 0 8px 0 !important;
  }

  .event-item .event-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
    width: 100% !important;
  }

  .event-item .event-time {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
  }

  .event-item .time-icon-box {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .event-item .event-action-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 5px 12px !important;
    font-size: 0.74rem !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .mentorship-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   Comentários: caixa de escrever acima da lista (como o composer do feed
   principal), lista sempre com o comentário mais recente no topo — a ordem
   de inserção já fica a cargo do JS (site.js faz prepend), aqui só
   reordena visualmente heading > caixa de comentário > lista.
   ========================================================================== */
.card.is-post .comments-wrap {
  display: flex;
  flex-direction: column;
}

.card.is-post .comments-wrap .comments-heading {
  order: 1;
}

.card.is-post .comments-wrap > .card-footer {
  order: 2;
  border-bottom: 1px solid #e4e7ec;
}

.card.is-post .comments-wrap .comments-body {
  order: 3;
}

body.is-dark .card.is-post .comments-wrap > .card-footer {
  border-bottom-color: #283143;
}

/* Caixa de comentário: uma linha por padrão, cresce com o texto (altura
   controlada via JS em site.js — aqui só tira a alça de resize manual e
   deixa o crescimento suave). */
.comment-textarea {
  resize: none !important;
  overflow-y: hidden;
  transition: height 0.12s ease;
  /* Rede de segurança: se o JS medir a altura enquanto o painel ainda está
     com display:none (scrollHeight sempre 0 nesse caso), a caixa não pode
     colapsar visualmente — fica pelo menos com o tamanho de uma linha. */
  min-height: 2.9em;
}