/* ============================================================
 * BipChat UI fixes — chat-header overflow + Participants/Friends tabs
 *
 * ESTRUTURA REAL (descoberta via DOM):
 *   .chat-container (position:relative, overflow:hidden, max-height:calc(100dvh - 70px))
 *     ├── .participants-container.panel2  (position:absolute right:0 top:0 width:40% height:80% z-index:999)
 *     │     ├── .friends-tabs-container   (injetado por invites.js — Participants/Friends btns)
 *     │     ├── .participants-list        (lista membros)
 *     │     └── #friends-content          (lista friends, display toggled)
 *     ├── .chat-header                    (display:flex justify-content:space-between)
 *     │     ├── .room-info                (nome sala + qtd membros)
 *     │     ├── .room-actions             (Convidar / Lock / NewChat / Moderation / EditRoom)
 *     │     └── .dm-inv-wrap              (DMs / Invites — injetado por chat.js)
 *     ├── .chat-body
 *     └── .chat-footer
 *
 * Bug 1 (desktop): tentativa anterior aplicou overflow-x:auto em room-actions +
 *   padding-right:40% no chat-header. Resultado: barra de scroll horizontal feia
 *   nas tabs do header e dm-inv-wrap "comprimido" sobrepondo room-actions.
 *   Fix: usar wrap natural + tamanhos compactos. Header já está confinado ao 60%
 *   esquerdo (aside cobre 40% direito), então room-actions wrap em duas linhas
 *   quando precisar, sem scroll. dm-inv-wrap vai pra direita do header SEM
 *   sobrepor aside.
 *
 * Bug 2 (desktop): cliques em Participants/Friends não trocavam. Causa: handlers
 *   onclick= em botões com `background-clip:text` + `text-fill-color:transparent`
 *   no estado ativo, o que tornava o estilo "active" indistinguível visualmente
 *   em alguns browsers (Chrome em Windows antigo principalmente — gradient text
 *   bugado). Aparência ficava igual antes/depois do clique → user achava que não
 *   trocou. Fix: usar borda-bottom + cor sólida pra indicar ativo (sem gradient
 *   text-fill, que é fragil). Fallback robusto. Tbm garante z-index/pointer-events
 *   nos botões pra evitar qualquer elemento sobreposto roubar clique.
 * ============================================================ */

/* ---------- DESKTOP (>= 769px) ---------- */
@media (min-width: 769px) {

  /* HEADER: confinado aos 60% esquerdos (aside cobre 40% direito).
     Sem overflow horizontal — botões wrap se faltar espaço. */
  .chat-header {
    display: flex !important;
    flex-wrap: wrap !important;          /* wrap natural, sem scroll horizontal */
    align-items: center !important;
    gap: 0.4rem !important;
    overflow: visible !important;
    position: relative;
    padding-right: calc(40% + 12px) !important;  /* reserva espaço pro aside */
    min-height: 56px;
  }

  .chat-header .room-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .chat-header .room-info > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chat-header .room-actions {
    display: flex !important;
    flex-wrap: wrap !important;          /* wrap pra evitar scroll horizontal */
    gap: 0.35rem !important;
    overflow: visible !important;        /* sem barra de scroll */
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  .chat-header .room-action-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 0.35rem 0.55rem !important;
    font-size: 0.82rem !important;
  }

  /* DMs/Invites wrap — fica DEPOIS dos botões, alinhado à direita */
  .chat-header .dm-inv-wrap {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    margin-left: auto !important;
    padding-left: 8px !important;
    border-left: 1px solid var(--card-border, rgba(255,255,255,0.08));
  }
  .chat-header .btn-dm-toggle {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.82rem !important;
  }

  /* chat-body sections respeitam aside */
  .chat-body-with-participants .chat-body,
  .chat-body-with-participants .chat-balloons-container,
  .chat-body-with-participants .chat-footer {
    padding-right: calc(40% + 12px);
  }
}

/* ---------- TABS Participants/Friends — ambos viewports ---------- */
/* CSS robusto pra tabs, substitui inline-style frágil aplicado por invites.js.
   Inline-style do JS continua existindo (não removido), mas estes !important
   sobrescrevem o que importa pro funcionamento clicável e visual. */

.friends-tabs-container {
  display: flex !important;
  border-bottom: 1px solid #333 !important;
  margin-bottom: 12px !important;
  background: transparent !important;
  position: relative;
  z-index: 1000;          /* > participants-container (999) — garante clicável */
}

.friends-tabs-container .friends-tab-btn,
#participants-tab-btn,
#friends-tab-btn {
  flex: 1 !important;
  padding: 12px 8px !important;
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text-secondary, #9ca3af) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color .2s, border-color .2s !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  user-select: none;
}

.friends-tabs-container .friends-tab-btn:hover,
#participants-tab-btn:hover,
#friends-tab-btn:hover {
  color: var(--text-primary, #fff) !important;
}

.friends-tabs-container .friends-tab-btn.active,
#participants-tab-btn.active,
#friends-tab-btn.active {
  color: var(--primary-color, #2575fc) !important;
  border-bottom: 2px solid var(--primary-color, #2575fc) !important;
  background: rgba(37, 117, 252, 0.08) !important;
  font-weight: 600 !important;
}

/* Mobile: tabs ainda funcionam, mesmo CSS clean */

/* ════════════════════════════════════════════════════════════════
   FIX v16 — msgs longas vazando pro lado do "Participants >>"
   Aplicado GLOBAL (desktop + mobile), com specificity alta via html body.
   Causa raiz: .message é flex, e flex children tem min-width:auto que
   impede shrink quando conteudo e maior que parent. Resultado: URL ou
   palavra longa empurra a caixa e overflowa horizontal.
   ════════════════════════════════════════════════════════════════ */
html body .chat-body,
html body #chat-messages,
html body .chat-messages-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
html body .chat-body .message,
html body #chat-messages .message,
html body .chat-messages-container .message {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html body .chat-body .message > .message-content,
html body #chat-messages .message > .message-content,
html body .chat-messages-container .message > .message-content {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
html body .chat-body .message .message-text,
html body #chat-messages .message .message-text,
html body .chat-messages-container .message .message-text {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    box-sizing: border-box !important;
}
html body .message-text a,
html body .message-text code,
html body .message-text pre {
    word-break: break-all !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

/* Mobile portrait: cap mais agressivo descontando avatar+gap */
@media (max-width: 768px) and (orientation: portrait) {
    html body .chat-body .message > .message-content {
        max-width: calc(100vw - 70px) !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   FIX REAL v16: o chat-body precisa do MESMO padding-right que o
   chat-header tem em mobile portrait, pra nao passar por baixo do
   .participants-container (position:absolute width:45%/max 200px direita).
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {
    html body .chat-body,
    html body #chat-messages {
        padding-right: calc(min(45%, 200px) + 12px) !important;
    }
    /* e em portrait o cap das msgs vira 100% do espaco restante */
    html body .chat-body .message > .message-content {
        max-width: 100% !important;
    }
}