body.internal-chat-react-page .content {
    padding: 0 !important;
    overflow: hidden;
  }
  body.internal-chat-react-page.conversation-open .content {
    height: 100dvh;
    max-height: 100dvh;
  }

  /* Chat interno v2 (25/09/2026): cor do white label no lugar do verde cravado.
     O app-tw.css não compila classes de src/, então as utilidades de marca vivem aqui. */
  body.internal-chat-react-page .icr-brand-bg {
    background-color: var(--primary-color, #22c55e);
    color: #fff;
  }
  body.internal-chat-react-page .icr-brand-bg:not(:disabled):hover {
    filter: brightness(0.92);
  }
  body.internal-chat-react-page .icr-brand-text {
    color: var(--primary-color, #22c55e);
  }
  body.internal-chat-react-page .icr-brand-border {
    border-color: var(--primary-color, #22c55e);
  }
  body.internal-chat-react-page .icr-brand-border-l {
    border-left-color: var(--primary-color, #22c55e);
  }
  body.internal-chat-react-page .icr-brand-soft {
    background-color: color-mix(in srgb, var(--primary-color, #22c55e) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary-color, #22c55e) 35%, transparent);
    color: var(--primary-color, #22c55e);
  }
  html.dark body.internal-chat-react-page .icr-brand-soft {
    background-color: color-mix(in srgb, var(--primary-color, #22c55e) 18%, #18181b);
  }
  body.internal-chat-react-page .icr-bubble-mine {
    background-color: var(--primary-color, #22c55e);
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--primary-color, #22c55e) 70%, #fff);
  }
  body.internal-chat-react-page .icr-focus:focus {
    border-color: var(--primary-color, #22c55e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #22c55e) 30%, transparent);
  }
  body.internal-chat-react-page .icr-mention {
    background-color: color-mix(in srgb, var(--primary-color, #22c55e) 16%, transparent);
    color: var(--primary-color, #22c55e);
  }
  body.internal-chat-react-page .icr-bubble-mine .icr-mention {
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
  }
  /* Fundo da área de mensagens: pontilhado claro / escuro de verdade no tema escuro
     (antes era #f8fafc inline e ficava branco no dark). */
  body.internal-chat-react-page .icr-messages {
    background-color: #f8fafc;
    background-image: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.16) 1px, transparent 0);
    background-size: 18px 18px;
  }
  html.dark body.internal-chat-react-page .icr-messages {
    background-color: #0f0f10;
    background-image: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.10) 1px, transparent 0);
  }
  /* v3: animação de entrada, sala de voz (anel de quem fala), painel de tópico */
  @keyframes icrMsgIn {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  body.internal-chat-react-page .icr-msg-enter {
    animation: icrMsgIn 0.22s ease-out;
  }
  @keyframes icrPulse {
    0% { box-shadow: 0 0 0 2px #22c55e, 0 0 0 4px rgba(34, 197, 94, 0.35); }
    100% { box-shadow: 0 0 0 2px #22c55e, 0 0 0 8px rgba(34, 197, 94, 0); }
  }
  body.internal-chat-react-page .icr-speaking {
    border-radius: 9999px;
    animation: icrPulse 0.9s ease-out infinite;
  }
  /* Painel de tópico: tela cheia no celular, coluna de 380px ao lado no desktop
     (as variantes lg: do Tailwind não existem no CSS compilado). */
  body.internal-chat-react-page .icr-thread-panel {
    position: fixed;
    inset: 0;
    z-index: 40;
  }
  @media (min-width: 1024px) {
    body.internal-chat-react-page .icr-thread-panel {
      position: static;
      inset: auto;
      z-index: auto;
      width: 380px;
      flex-shrink: 0;
      border-left: 1px solid #e2e8f0;
    }
    html.dark body.internal-chat-react-page .icr-thread-panel {
      border-left-color: #27272a;
    }
  }
  body.internal-chat-react-page .icr-thread-panel .icr-msg-actions {
    right: 0.5rem;
  }
  @media (max-width: 1023px) {
    body.internal-chat-react-page .icr-thread-panel {
      padding-top: env(safe-area-inset-top);
    }
  }
  /* Nunca rolar na horizontal (Safari mostrava barra); texto comprido quebra dentro do balão. */
  body.internal-chat-react-page .icr-messages,
  body.internal-chat-react-page #internal-chat-react-root aside > div.flex-1.overflow-y-auto {
    overflow-x: hidden;
  }
  body.internal-chat-react-page .icr-messages [id^="icr-msg-"] > div {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.internal-chat-react-page .icr-highlight > div {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #22c55e) 45%, transparent);
    transition: box-shadow 0.3s ease;
  }
  /* Ações da mensagem (Responder/Apagar): aparecem no hover do balão; sempre visíveis no toque.
     (A classe group-hover/msg do Tailwind não existe no CSS compilado — por isso é feito aqui.) */
  body.internal-chat-react-page .icr-msg-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  body.internal-chat-react-page .group\/msg:hover .icr-msg-actions,
  body.internal-chat-react-page .icr-msg-actions.is-open,
  body.internal-chat-react-page .icr-msg-actions:focus-within {
    opacity: 1;
  }
  @media (hover: none) {
    body.internal-chat-react-page .icr-msg-actions {
      opacity: 1;
    }
  }
  /* Player de áudio próprio */
  body.internal-chat-react-page .icr-audio-bar {
    display: inline-block;
    width: 3px;
    min-height: 4px;
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--primary-color, #22c55e) 30%, #cbd5e1);
    transition: background-color 0.1s linear;
  }
  body.internal-chat-react-page .icr-audio-bar.is-filled {
    background-color: var(--primary-color, #22c55e);
  }
  html.dark body.internal-chat-react-page .icr-audio-bar {
    background-color: color-mix(in srgb, var(--primary-color, #22c55e) 30%, #52525b);
  }
  body.internal-chat-react-page .icr-audio-mine .icr-audio-bar {
    background-color: rgba(255, 255, 255, 0.4);
  }
  body.internal-chat-react-page .icr-audio-mine .icr-audio-bar.is-filled {
    background-color: #fff;
  }

  .icr-reactions-dialog { width: min(440px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - 32px)); padding: 0; border: 1px solid #e4e4e7; border-radius: 16px; background: #fff; color: #18181b; box-shadow: 0 24px 80px #0004; overflow-y: auto; }
  .icr-reactions-dialog::backdrop { background: #0008; }
  .icr-reactions-content { padding: 16px; }
  .icr-reactions-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .icr-reactions-header h2 { font-size: 18px; font-weight: 600; margin: 0; }
  .icr-reactions-close { font-size: 26px; min-width: 40px; min-height: 40px; border-radius: 8px; }
  .icr-reactions-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
  .icr-reactions-filters button { border: 1px solid #d4d4d8; border-radius: 999px; padding: 6px 12px; min-height: 36px; }
  .icr-reactions-filters button[aria-pressed="true"] { border-color: var(--primary-color, #2563eb); background: var(--primary-color, #2563eb); color: white; }
  .icr-reactions-people { list-style: none; margin: 0; padding: 0; }
  .icr-reactions-people li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid #e4e4e7; }
  .icr-reactions-person-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .icr-reactions-person-name small { opacity: .65; }
  .icr-reactions-person-emoji { font-size: 20px; }
  .icr-reactions-remove { flex-basis: 100%; text-align: left; font-size: 12px; text-decoration: underline; min-height: 28px; }
  .icr-reactions-remove:disabled { opacity: .5; }
  .icr-reactions-dialog button:focus-visible { outline: 2px solid var(--primary-color, #2563eb); outline-offset: 2px; }
  html.dark .icr-reactions-dialog { border-color: #3f3f46; background: #18181b; color: #fafafa; }
  html.dark .icr-reactions-people li, html.dark .icr-reactions-filters button { border-color: #3f3f46; }

  /* #4F9CEE4C: native 44px touch targets must not overlap message content. */
  body.internal-chat-react-page .icr-actions-toggle { display: none; }
  @media (max-width: 767px), (hover: none) and (pointer: coarse) {
    body.internal-chat-react-page #internal-chat-react-root .icr-actions-toggle {
      display: flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; min-width: 44px; min-height: 44px;
      margin: 0 0 0 4px; padding: 8px; border: 1px solid currentColor;
      border-radius: 12px; background: transparent; color: inherit; cursor: pointer;
    }
    body.internal-chat-react-page #internal-chat-react-root .icr-actions-toggle svg {
      width: 20px; height: 20px; flex-shrink: 0;
    }
    body.internal-chat-react-page #internal-chat-react-root .icr-msg-actions {
      display: none; position: static; inset: auto; opacity: 1;
      max-width: 100%; margin-top: 8px; gap: 6px;
    }
    body.internal-chat-react-page #internal-chat-react-root .icr-msg-actions.is-expanded {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 240px;
    }
    body.internal-chat-react-page #internal-chat-react-root .icr-msg-actions > span { display: contents; }
    body.internal-chat-react-page #internal-chat-react-root .icr-msg-actions button {
      display: flex; align-items: center; justify-content: flex-start; gap: 8px;
      width: 100%; height: auto; min-width: 44px; min-height: 44px;
      padding: 8px 10px; border-radius: 10px; text-align: left;
      font-size: 13px; line-height: 18px; white-space: normal;
    }
    body.internal-chat-react-page #internal-chat-react-root .icr-msg-actions button::after {
      content: attr(title); overflow-wrap: anywhere;
    }
    body.internal-chat-react-page #internal-chat-react-root .icr-msg-actions button svg {
      width: 18px; height: 18px; flex-shrink: 0;
    }
    body.internal-chat-react-page #internal-chat-react-root .icr-actions-toggle:focus-visible,
    body.internal-chat-react-page #internal-chat-react-root .icr-msg-actions button:focus-visible {
      outline: 2px solid currentColor; outline-offset: 2px;
    }
    body.internal-chat-react-page #internal-chat-react-root .icr-conversation-header {
      gap: 8px; padding-left: 10px; padding-right: 10px;
    }
    body.internal-chat-react-page #internal-chat-react-root .icr-conversation-header > div:last-child { gap: 4px; flex-shrink: 0; }
    body.internal-chat-react-page #internal-chat-react-root .icr-conversation-header button { flex-shrink: 0; }
    body.internal-chat-react-page #internal-chat-react-root .icr-conversation-header button > svg,
    body.internal-chat-react-page #internal-chat-react-root footer button > svg {
      width: 20px; height: 20px; flex-shrink: 0;
    }
  }