/* ==========================================================================
   NeoResearch — Design System
   --------------------------------------------------------------------------
   Este arquivo é carregado DEPOIS do tailwind.css e do topcoat-desktop-light,
   e suas regras ficam fora de qualquer @layer. Como as utilities do Tailwind
   v4 vivem dentro de `@layer utilities`, qualquer regra daqui vence todas
   elas na cascata — é isso que permite retematizar o sistema inteiro sem
   reescrever as ~650 cores fixas espalhadas pelo markup.

   Organização:
     1. Tokens (claro e escuro)
     2. Base e tipografia
     3. Remapeamento das cores fixas do markup para tokens
     4. Componentes Topcoat retematizados
     5. Componentes próprios (Kanban, badges, scrollbar)
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root,
:root[data-theme="light"] {
  /* Superfícies — cinzas neutros levemente quentes */
  --nr-bg: #f4f6f7;
  --nr-surface: #ffffff;
  --nr-surface-sunken: #eef1f3;
  --nr-surface-hover: #e7ebee;

  /* Traços */
  --nr-border: #dce1e5;
  --nr-border-strong: #c3ccd3;

  /* Texto */
  --nr-text: #1f2a33;
  --nr-text-muted: #5c6a75;
  --nr-text-subtle: #7d8a95;
  --nr-text-inverse: #ffffff;

  /* Azul institucional — única cor de ação do sistema */
  --nr-accent: #1a5fb4;
  --nr-accent-hover: #164e94;
  --nr-accent-active: #123f78;
  --nr-accent-soft: #e8f0fa;
  --nr-accent-border: #b9d1ec;

  /* Semânticas — reservadas para status, nunca para decoração */
  --nr-success: #1c7a4f;
  --nr-success-soft: #e3f3ea;
  --nr-success-border: #b5ddc7;

  --nr-warning: #8a5a00;
  --nr-warning-soft: #fcf2df;
  --nr-warning-border: #ecd5a6;

  --nr-danger: #b3261e;
  --nr-danger-soft: #fbeae9;
  --nr-danger-border: #eec2bf;

  --nr-neutral-soft: #eef1f3;
  --nr-neutral-border: #d5dce1;

  /* Forma */
  --nr-radius-sm: 4px;
  --nr-radius: 7px;
  --nr-radius-lg: 11px;
  --nr-radius-pill: 999px;

  /* Elevação — sombras curtas e de baixa opacidade */
  --nr-shadow-sm: 0 1px 2px rgba(20, 32, 42, 0.06);
  --nr-shadow: 0 1px 3px rgba(20, 32, 42, 0.08), 0 1px 2px rgba(20, 32, 42, 0.04);
  --nr-shadow-md: 0 4px 12px rgba(20, 32, 42, 0.09), 0 1px 3px rgba(20, 32, 42, 0.05);
  --nr-shadow-lg: 0 12px 32px rgba(20, 32, 42, 0.14), 0 3px 8px rgba(20, 32, 42, 0.07);

  --nr-ring: 0 0 0 3px rgba(26, 95, 180, 0.22);

  /* Tipografia */
  --nr-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    "Noto Sans", Arial, sans-serif;
  --nr-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas,
    monospace;
}

/* Tema escuro explícito (Dark) */
:root[data-theme="dark"] {
  --nr-bg: #14181c;
  --nr-surface: #1b2127;
  --nr-surface-sunken: #171c21;
  --nr-surface-hover: #232b32;

  --nr-border: #2b343c;
  --nr-border-strong: #3a454e;

  --nr-text: #e4e9ed;
  --nr-text-muted: #a2aeb8;
  --nr-text-subtle: #7e8a94;
  --nr-text-inverse: #10151a;

  --nr-accent: #6aa5ef;
  --nr-accent-hover: #83b6f4;
  --nr-accent-active: #9cc6f8;
  --nr-accent-soft: #17273a;
  --nr-accent-border: #2d445f;

  --nr-success: #5cc48d;
  --nr-success-soft: #14261d;
  --nr-success-border: #27452f;

  --nr-warning: #e0aa5a;
  --nr-warning-soft: #271f12;
  --nr-warning-border: #4a3a1e;

  --nr-danger: #f08a82;
  --nr-danger-soft: #2a1715;
  --nr-danger-border: #4d2723;

  --nr-neutral-soft: #222a31;
  --nr-neutral-border: #333d45;

  --nr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nr-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --nr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  --nr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4);

  --nr-ring: 0 0 0 3px rgba(106, 165, 239, 0.28);

  color-scheme: dark;
}

/* Tema Catppuccin Mocha */
:root[data-theme="catppuccin"] {
  --nr-bg: #1e1e2e;
  --nr-surface: #181825;
  --nr-surface-sunken: #11111b;
  --nr-surface-hover: #313244;

  --nr-border: #313244;
  --nr-border-strong: #45475a;

  --nr-text: #cdd6f4;
  --nr-text-muted: #a6adc8;
  --nr-text-subtle: #7f849c;
  --nr-text-inverse: #11111b;

  --nr-accent: #cba6f7;
  --nr-accent-hover: #b4befe;
  --nr-accent-active: #89b4fa;
  --nr-accent-soft: rgba(203, 166, 247, 0.15);
  --nr-accent-border: rgba(203, 166, 247, 0.35);

  --nr-success: #a6e3a1;
  --nr-success-soft: rgba(166, 227, 161, 0.15);
  --nr-success-border: rgba(166, 227, 161, 0.35);

  --nr-warning: #f9e2af;
  --nr-warning-soft: rgba(249, 226, 175, 0.15);
  --nr-warning-border: rgba(249, 226, 175, 0.35);

  --nr-danger: #f38ba8;
  --nr-danger-soft: rgba(243, 139, 168, 0.15);
  --nr-danger-border: rgba(243, 139, 168, 0.35);

  --nr-neutral-soft: #313244;
  --nr-neutral-border: #45475a;

  --nr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nr-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --nr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  --nr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4);

  --nr-ring: 0 0 0 3px rgba(203, 166, 247, 0.3);

  color-scheme: dark;
}

/* Tema Dracula */
:root[data-theme="dracula"] {
  --nr-bg: #282a36;
  --nr-surface: #21222c;
  --nr-surface-sunken: #191a21;
  --nr-surface-hover: #44475a;

  --nr-border: #44475a;
  --nr-border-strong: #6272a4;

  --nr-text: #f8f8f2;
  --nr-text-muted: #bdc3c7;
  --nr-text-subtle: #6272a4;
  --nr-text-inverse: #282a36;

  --nr-accent: #bd93f9;
  --nr-accent-hover: #ff79c6;
  --nr-accent-active: #8be9fd;
  --nr-accent-soft: rgba(189, 147, 249, 0.16);
  --nr-accent-border: rgba(189, 147, 249, 0.38);

  --nr-success: #50fa7b;
  --nr-success-soft: rgba(80, 250, 123, 0.15);
  --nr-success-border: rgba(80, 250, 123, 0.35);

  --nr-warning: #f1fa8c;
  --nr-warning-soft: rgba(241, 250, 140, 0.15);
  --nr-warning-border: rgba(241, 250, 140, 0.35);

  --nr-danger: #ff5555;
  --nr-danger-soft: rgba(255, 85, 85, 0.15);
  --nr-danger-border: rgba(255, 85, 85, 0.35);

  --nr-neutral-soft: #44475a;
  --nr-neutral-border: #6272a4;

  --nr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --nr-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
  --nr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  --nr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.45);

  --nr-ring: 0 0 0 3px rgba(189, 147, 249, 0.3);

  color-scheme: dark;
}

/* Tema Nord Arctic */
:root[data-theme="nord"] {
  --nr-bg: #2e3440;
  --nr-surface: #3b4252;
  --nr-surface-sunken: #242933;
  --nr-surface-hover: #434c5e;

  --nr-border: #434c5e;
  --nr-border-strong: #4c566a;

  --nr-text: #eceff4;
  --nr-text-muted: #d8dee9;
  --nr-text-subtle: #a4b1c2;
  --nr-text-inverse: #2e3440;

  --nr-accent: #88c0d0;
  --nr-accent-hover: #81a1c1;
  --nr-accent-active: #5e81ac;
  --nr-accent-soft: rgba(136, 192, 208, 0.16);
  --nr-accent-border: rgba(136, 192, 208, 0.38);

  --nr-success: #a3be8c;
  --nr-success-soft: rgba(163, 190, 140, 0.15);
  --nr-success-border: rgba(163, 190, 140, 0.35);

  --nr-warning: #ebcb8b;
  --nr-warning-soft: rgba(235, 203, 139, 0.15);
  --nr-warning-border: rgba(235, 203, 139, 0.35);

  --nr-danger: #bf616a;
  --nr-danger-soft: rgba(191, 97, 106, 0.15);
  --nr-danger-border: rgba(191, 97, 106, 0.35);

  --nr-neutral-soft: #3b4252;
  --nr-neutral-border: #4c566a;

  --nr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nr-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --nr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  --nr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4);

  --nr-ring: 0 0 0 3px rgba(136, 192, 208, 0.3);

  color-scheme: dark;
}

/* Tema Tokyo Night */
:root[data-theme="tokyo-night"] {
  --nr-bg: #1a1b26;
  --nr-surface: #24283b;
  --nr-surface-sunken: #16161e;
  --nr-surface-hover: #2f3549;

  --nr-border: #292e42;
  --nr-border-strong: #414868;

  --nr-text: #c0caf5;
  --nr-text-muted: #9aa5ce;
  --nr-text-subtle: #565f89;
  --nr-text-inverse: #15161e;

  --nr-accent: #7aa2f7;
  --nr-accent-hover: #7dcfff;
  --nr-accent-active: #bb9af7;
  --nr-accent-soft: rgba(122, 162, 247, 0.16);
  --nr-accent-border: rgba(122, 162, 247, 0.38);

  --nr-success: #9ece6a;
  --nr-success-soft: rgba(158, 206, 106, 0.15);
  --nr-success-border: rgba(158, 206, 106, 0.35);

  --nr-warning: #e0af68;
  --nr-warning-soft: rgba(224, 175, 104, 0.15);
  --nr-warning-border: rgba(224, 175, 104, 0.35);

  --nr-danger: #f7768e;
  --nr-danger-soft: rgba(247, 118, 142, 0.15);
  --nr-danger-border: rgba(247, 118, 142, 0.35);

  --nr-neutral-soft: #24283b;
  --nr-neutral-border: #414868;

  --nr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --nr-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
  --nr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  --nr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.45);

  --nr-ring: 0 0 0 3px rgba(122, 162, 247, 0.3);

  color-scheme: dark;
}

/* Tema Monokai Pro */
:root[data-theme="monokai"] {
  --nr-bg: #2d2a2e;
  --nr-surface: #221f22;
  --nr-surface-sunken: #19181a;
  --nr-surface-hover: #403e41;

  --nr-border: #403e41;
  --nr-border-strong: #5b595c;

  --nr-text: #fcfcfa;
  --nr-text-muted: #c1c0c0;
  --nr-text-subtle: #727072;
  --nr-text-inverse: #19181a;

  --nr-accent: #ffd866;
  --nr-accent-hover: #ff6188;
  --nr-accent-active: #fc9867;
  --nr-accent-soft: rgba(255, 216, 102, 0.16);
  --nr-accent-border: rgba(255, 216, 102, 0.38);

  --nr-success: #a9dc76;
  --nr-success-soft: rgba(169, 220, 118, 0.15);
  --nr-success-border: rgba(169, 220, 118, 0.35);

  --nr-warning: #fc9867;
  --nr-warning-soft: rgba(252, 152, 103, 0.15);
  --nr-warning-border: rgba(252, 152, 103, 0.35);

  --nr-danger: #ff6188;
  --nr-danger-soft: rgba(255, 97, 136, 0.15);
  --nr-danger-border: rgba(255, 97, 136, 0.35);

  --nr-neutral-soft: #403e41;
  --nr-neutral-border: #5b595c;

  --nr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --nr-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
  --nr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  --nr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.45);

  --nr-ring: 0 0 0 3px rgba(255, 216, 102, 0.3);

  color-scheme: dark;
}


/* ==========================================================================
   2. Base e tipografia
   ========================================================================== */

html {
  background-color: var(--nr-bg);
}

body,
body.topcoat-desktop-theme {
  background-color: var(--nr-bg);
  color: var(--nr-text);
  font-family: var(--nr-font);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--nr-text);
  letter-spacing: -0.011em;
  font-weight: 650;
}

code,
pre,
.font-mono {
  font-family: var(--nr-font-mono);
}

a {
  color: var(--nr-accent);
}

/* Foco visível e consistente em tudo que é interativo */
:focus-visible {
  outline: none;
  box-shadow: var(--nr-ring);
  border-radius: var(--nr-radius-sm);
}

::selection {
  background: var(--nr-accent-soft);
  color: var(--nr-text);
}

/* ==========================================================================
   3. Remapeamento das cores fixas do markup
   --------------------------------------------------------------------------
   O markup usa ~650 utilities com hex literal (text-[#2c3e50], bg-white...).
   Em vez de reescrever cada ocorrência, as utilities são reapontadas para os
   tokens — o que também é o que torna o modo escuro possível.
   ========================================================================== */

/* --- Utilities de display -------------------------------------------------
   O tema legado declara `display` em .topcoat-button, .topcoat-notification,
   .topcoat-tab-bar__button, .topcoat-icon e outros, e o faz fora de qualquer
   layer. Como as utilities do Tailwind v4 estão em @layer utilities, elas
   perdiam a disputa: `flex` no markup não valia nesses componentes (e os
   `gap-*` junto, já que gap não existe em caixa inline-block), e `hidden` não
   escondia. Redeclarar as utilities aqui devolve ao markup a última palavra.

   A ordem importa: `.hidden` vem por último para vencer `.flex` quando as duas
   classes estão no mesmo elemento — é o caso do botão de desconectar o bot de
   WhatsApp, que deve nascer oculto. */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.contents {
  display: contents;
}
.hidden,
.topcoat-tab-bar__item.hidden {
  display: none !important;
}

/* Texto forte */
.text-\[\#2c3e50\],
.text-\[\#1e293b\],
.text-\[\#0f172a\],
.text-slate-800,
.text-slate-700,
.text-gray-800,
.text-neutral-800 {
  color: var(--nr-text);
}

/* Texto secundário */
.text-\[\#595b5b\],
.text-\[\#6a6c6c\],
.text-\[\#475569\],
.text-\[\#64748b\],
.text-slate-600,
.text-slate-500,
.text-gray-500 {
  color: var(--nr-text-muted);
}

/* Texto terciário */
.text-slate-400,
.text-gray-400 {
  color: var(--nr-text-subtle);
}

/* Traços */
.border-\[\#9daca9\],
.border-\[\#d3d7d7\],
.border-\[\#e5e9e8\],
.border-\[\#ccd5d4\],
.border-\[\#e2e8f0\],
.border-\[\#cbd5e1\],
.border-slate-200,
.border-slate-300,
.border-gray-200,
.border-gray-300,
.border-neutral-300 {
  border-color: var(--nr-border);
}

/* Superfícies */
.bg-white {
  background-color: var(--nr-surface);
}

.bg-\[\#eff1f1\],
.bg-\[\#e5e9e8\],
.bg-\[\#f8fafc\],
.bg-slate-50,
.bg-slate-100,
.bg-gray-100 {
  background-color: var(--nr-surface-sunken);
}

.bg-\[\#d3d7d7\],
.bg-slate-200 {
  background-color: var(--nr-surface-hover);
}

/* Azuis de ação dispersos pelo markup */
.text-\[\#2563eb\],
.text-\[\#0070d2\],
.text-\[\#288edf\],
.text-blue-600,
.text-blue-700 {
  color: var(--nr-accent);
}

.bg-\[\#0070d2\],
.bg-blue-600 {
  background-color: var(--nr-accent);
  color: var(--nr-text-inverse);
}

.hover\:text-blue-600:hover {
  color: var(--nr-accent-hover);
}

/* Semânticas dispersas */
.text-\[\#16a34a\],
.text-green-600,
.text-green-700 {
  color: var(--nr-success);
}

.text-\[\#d97706\],
.text-amber-600,
.text-yellow-700 {
  color: var(--nr-warning);
}

.text-\[\#ef4444\],
.text-red-600,
.text-red-700 {
  color: var(--nr-danger);
}

.bg-\[\#10b981\],
.bg-green-500 {
  background-color: var(--nr-success);
}

.bg-\[\#ef4444\],
.bg-red-500 {
  background-color: var(--nr-danger);
}

.bg-\[\#fef3c7\],
.bg-amber-100 {
  background-color: var(--nr-warning-soft);
}

/* ==========================================================================
   4. Componentes Topcoat retematizados
   --------------------------------------------------------------------------
   O tema desktop original é de 2013: gradientes, bordas duplas e sombras
   internas. Tudo aqui é achatado e realinhado com os tokens.
   ========================================================================== */

/* --- Barra de navegação ------------------------------------------------- */

.topcoat-navigation-bar {
  background: var(--nr-surface);
  background-image: none;
  border: none;
  border-bottom: 1px solid var(--nr-border);
  box-shadow: var(--nr-shadow-sm);
  height: auto;
  min-height: 52px;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 8px;
}

.topcoat-navigation-bar__item {
  display: flex;
  align-items: center;
  margin: 0;
  width: auto;
  float: none;
}

.topcoat-navigation-bar__title {
  color: var(--nr-text);
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -0.015em;
  text-shadow: none;
  margin: 0;
  line-height: 1.2;
}

/* --- Botões -------------------------------------------------------------- */

.topcoat-button,
.topcoat-button--large,
.topcoat-button--quiet,
.topcoat-button--large--quiet {
  background: var(--nr-surface);
  background-image: none;
  border: 1px solid var(--nr-border-strong);
  border-radius: var(--nr-radius);
  box-shadow: var(--nr-shadow-sm);
  color: var(--nr-text);
  font-family: inherit;
  font-weight: 550;
  letter-spacing: 0;
  text-shadow: none;
  padding: 6px 12px;
  height: auto;
  min-height: 30px;
  line-height: 1.4;
  transition: background-color 0.14s ease, border-color 0.14s ease,
    box-shadow 0.14s ease, color 0.14s ease, transform 0.08s ease;
}

.topcoat-button:hover,
.topcoat-button--large:hover,
.topcoat-button--quiet:hover {
  background: var(--nr-surface-hover);
  background-image: none;
  border-color: var(--nr-border-strong);
  color: var(--nr-text);
}

.topcoat-button:active,
.topcoat-button--large:active {
  background: var(--nr-surface-hover);
  background-image: none;
  box-shadow: none;
  transform: translateY(0.5px);
}

.topcoat-button:disabled,
.topcoat-button[disabled] {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* O tema original marcava os botões com overflow:hidden + text-overflow:ellipsis.
   Dentro de um flex container eles encolhiam abaixo do próprio rótulo e o texto
   virava "Acervo Compl…". Um rótulo de botão nunca deve ser cortado: ele define
   a largura mínima do botão. */
.topcoat-button,
.topcoat-button--large,
.topcoat-button--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  overflow: visible;
  text-overflow: clip;
  flex-shrink: 0;
  /* O rótulo define a largura do botão; ele nunca quebra em duas linhas. */
  white-space: nowrap;
}

.topcoat-button--quiet,
.topcoat-button--large--quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--nr-text-muted);
}

.topcoat-button--quiet:hover {
  background: var(--nr-surface-hover);
  color: var(--nr-text);
}

/* Ação primária — a única peça de azul sólido da interface */
.topcoat-button--cta,
.topcoat-button--large--cta {
  background: var(--nr-accent);
  background-image: none;
  border: 1px solid var(--nr-accent);
  border-radius: var(--nr-radius);
  box-shadow: var(--nr-shadow-sm);
  color: #ffffff;
  font-weight: 600;
  text-shadow: none;
}

.topcoat-button--cta:hover,
.topcoat-button--large--cta:hover {
  background: var(--nr-accent-hover);
  background-image: none;
  border-color: var(--nr-accent-hover);
  color: #ffffff;
}

.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
  background: var(--nr-accent-active);
  background-image: none;
  transform: translateY(0.5px);
}

/* --- Campos de formulário ------------------------------------------------ */

.topcoat-text-input,
.topcoat-textarea,
.topcoat-select,
.topcoat-search-input {
  background: var(--nr-surface);
  background-image: none;
  border: 1px solid var(--nr-border-strong);
  border-radius: var(--nr-radius);
  box-shadow: none;
  color: var(--nr-text);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 11px;
  height: auto;
  min-height: 32px;
  line-height: 1.45;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.topcoat-textarea {
  min-height: 72px;
  line-height: 1.55;
  resize: vertical;
}

.topcoat-select {
  padding-right: 28px;
  cursor: pointer;
}

.topcoat-text-input::placeholder,
.topcoat-textarea::placeholder {
  color: var(--nr-text-subtle);
}

.topcoat-text-input:hover,
.topcoat-textarea:hover,
.topcoat-select:hover {
  border-color: var(--nr-text-subtle);
}

.topcoat-text-input:focus,
.topcoat-textarea:focus,
.topcoat-select:focus,
.topcoat-search-input:focus {
  outline: none;
  border-color: var(--nr-accent);
  box-shadow: var(--nr-ring);
}

.topcoat-text-input:disabled,
.topcoat-textarea:disabled {
  background: var(--nr-surface-sunken);
  color: var(--nr-text-subtle);
  cursor: not-allowed;
}

/* O tema antigo pintava de vermelho todo campo :invalid — e um campo
   obrigatório vazio já nasce inválido, então a tela de login abria com as
   bordas em alerta antes de o usuário digitar qualquer coisa. O erro só
   aparece depois da interação, via :user-invalid. */
.topcoat-text-input:invalid,
.topcoat-textarea:invalid,
.topcoat-select:invalid {
  border-color: var(--nr-border-strong);
  box-shadow: none;
}

.topcoat-text-input:invalid:hover,
.topcoat-textarea:invalid:hover {
  border-color: var(--nr-text-subtle);
}

.topcoat-text-input:invalid:focus,
.topcoat-textarea:invalid:focus,
.topcoat-select:invalid:focus {
  border-color: var(--nr-accent);
  box-shadow: var(--nr-ring);
}

.topcoat-text-input:user-invalid,
.topcoat-textarea:user-invalid,
.topcoat-select:user-invalid {
  border-color: var(--nr-danger);
}

.topcoat-text-input:user-invalid:focus,
.topcoat-textarea:user-invalid:focus,
.topcoat-select:user-invalid:focus {
  border-color: var(--nr-danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.2);
}

/* --- Caixas de seleção (Checkboxes) -------------------------------------- */

.topcoat-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--nr-text);
  line-height: 1.4;
}

.topcoat-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.topcoat-checkbox__checkmark {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
  vertical-align: middle;
}

.topcoat-checkbox__checkmark:before {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px !important;
  height: 16px !important;
  background: var(--nr-surface) !important;
  border: 1.5px solid var(--nr-border-strong) !important;
  border-radius: var(--nr-radius-sm) !important;
  box-shadow: var(--nr-shadow-sm) !important;
  box-sizing: border-box;
  transition: background-color 0.14s ease, border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.topcoat-checkbox:hover .topcoat-checkbox__checkmark:before {
  border-color: var(--nr-accent) !important;
}

input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
  border-color: var(--nr-accent) !important;
  box-shadow: var(--nr-ring) !important;
}

input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {
  background: var(--nr-accent) !important;
  border-color: var(--nr-accent) !important;
}

.topcoat-checkbox__checkmark:after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 5px !important;
  width: 5px !important;
  height: 9px !important;
  background: transparent !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 !important;
  transform: rotate(45deg) !important;
  opacity: 0 !important;
  transition: opacity 0.12s ease;
}

input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
  opacity: 1 !important;
}

input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark:before {
  background: var(--nr-surface-sunken) !important;
  border-color: var(--nr-border) !important;
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Cards e painéis ----------------------------------------------------- */

.topcoat-card,
.topcoat-card--white {
  background: var(--nr-surface);
  background-image: none;
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-lg);
  box-shadow: var(--nr-shadow);
  color: var(--nr-text);
}

.topcoat-panel-header {
  background: var(--nr-surface-sunken);
  background-image: none;
  border: none;
  border-bottom: 1px solid var(--nr-border);
  box-shadow: none;
  color: var(--nr-text);
  font-weight: 620;
  letter-spacing: 0;
  text-shadow: none;
  /* O tema original forçava caixa alta e a herança chegava a todo o conteúdo
     do painel — era o que deixava o nome e a descrição do grupo gritando. */
  text-transform: none;
}

.topcoat-list__header {
  background: var(--nr-surface-sunken);
  background-image: none;
  border: none;
  border-bottom: 1px solid var(--nr-border);
  box-shadow: none;
  color: var(--nr-text-muted);
  font-weight: 620;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: none;
  padding: 8px 12px;
}

.topcoat-list__container {
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius);
  box-shadow: none;
}

.topcoat-list__item {
  background: transparent;
  background-image: none;
  border-bottom: 1px solid var(--nr-border);
  color: var(--nr-text);
  text-shadow: none;
}

/* --- Abas ---------------------------------------------------------------- */

.topcoat-tab-bar {
  background: transparent;
  background-image: none;
  border: none;
  border-bottom: 1px solid var(--nr-border);
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  height: auto;
}

.topcoat-tab-bar__button {
  background: transparent;
  background-image: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--nr-text-muted);
  font-family: inherit;
  font-weight: 560;
  padding: 9px 13px;
  height: auto;
  text-shadow: none;
  white-space: nowrap;
  transition: color 0.14s ease, border-color 0.14s ease,
    background-color 0.14s ease;
}

.topcoat-tab-bar__button:hover {
  background: var(--nr-surface-hover);
  background-image: none;
  color: var(--nr-text);
}

.topcoat-tab-bar__button:active,
.topcoat-tab-bar input:checked + .topcoat-tab-bar__button {
  background: transparent;
  background-image: none;
  box-shadow: none;
}

/* O estado ativo é marcado pelo sublinhado, não por fundo cheio.
   É a única regra do tema antigo declarada com !important — por isso o
   !important aqui, que como o custom.css vem depois, vence a disputa. */
.topcoat-tab-bar__item.active .topcoat-tab-bar__button,
.topcoat-tab-bar__button.active,
.topcoat-tab-bar__button[aria-selected="true"] {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom-width: 2px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--nr-accent) !important;
  box-shadow: none !important;
  color: var(--nr-accent) !important;
  font-weight: 640 !important;
}

/* --- Notificações / contadores ------------------------------------------- */

.topcoat-notification {
  background: var(--nr-neutral-soft);
  background-image: none;
  border: 1px solid var(--nr-neutral-border);
  border-radius: var(--nr-radius-pill);
  box-shadow: none;
  color: var(--nr-text-muted);
  font-family: inherit;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  min-width: 18px;
  padding: 1px 7px;
  text-align: center;
  text-shadow: none;
  /* Mesmo motivo dos botões: o contador não pode virar "0 veíc…". */
  overflow: visible;
  text-overflow: clip;
  flex-shrink: 0;
}

/* Um contador dentro de um botão não pode esticá-lo: sem essa trava, os botões
   com badge ("Convites", "Minha Biblioteca") ficam mais altos que os vizinhos e
   a barra superior perde o alinhamento. */
.topcoat-button > .topcoat-notification,
.topcoat-button--cta > .topcoat-notification,
.topcoat-button--large > .topcoat-notification {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 15px;
}

.topcoat-notification--gray {
  background: var(--nr-neutral-soft);
  border-color: var(--nr-neutral-border);
  color: var(--nr-text-muted);
}

.topcoat-notification--blue {
  background: var(--nr-accent-soft);
  border-color: var(--nr-accent-border);
  color: var(--nr-accent);
}

.topcoat-notification--green {
  background: var(--nr-success-soft);
  border-color: var(--nr-success-border);
  color: var(--nr-success);
}

.topcoat-notification--red {
  background: var(--nr-danger-soft);
  border-color: var(--nr-danger-border);
  color: var(--nr-danger);
}

.topcoat-notification--amber {
  background: var(--nr-warning-soft);
  border-color: var(--nr-warning-border);
  color: var(--nr-warning);
}

/* ==========================================================================
   5. Componentes próprios
   ========================================================================== */

/* --- Kanban -------------------------------------------------------------- */

.kanban-column {
  min-height: 280px;
  background: var(--nr-surface-sunken);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-lg);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kanban-column.drag-over {
  background-color: var(--nr-accent-soft);
  border-color: var(--nr-accent);
  border-style: dashed;
}

.kanban-card {
  cursor: grab;
  user-select: none;
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius);
  box-shadow: var(--nr-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.kanban-card:hover {
  transform: translateY(-1px);
  border-color: var(--nr-border-strong);
  box-shadow: var(--nr-shadow-md);
}

.kanban-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
  box-shadow: var(--nr-shadow-lg);
}

/* Marco vinculado ao cartão — cabe em duas linhas em vez de ser cortado */
.nr-task-milestone {
  background: var(--nr-surface-sunken);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-sm);
  color: var(--nr-text-muted);
  padding: 3px 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* --- Botão de ícone ------------------------------------------------------
   Ações destrutivas discretas (excluir cartão): some no repouso, aparece no
   hover do cartão e só fica vermelha quando o ponteiro está nela. */

.nr-icon-button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--nr-radius-sm);
  color: var(--nr-text-subtle);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.14s ease, background-color 0.14s ease,
    color 0.14s ease, border-color 0.14s ease;
}

.kanban-card:hover .nr-icon-button,
.nr-icon-button:focus-visible {
  opacity: 1;
}

.nr-icon-button:hover {
  background: var(--nr-danger-soft);
  border-color: var(--nr-danger-border);
  color: var(--nr-danger);
}

/* --- Barra de rolagem ---------------------------------------------------- */

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--nr-border-strong);
  border-radius: var(--nr-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--nr-text-subtle);
  background-clip: content-box;
}

* {
  scrollbar-color: var(--nr-border-strong) transparent;
  scrollbar-width: thin;
}

/* --- Tooltips Flutuantes Modernos --------------------------------------- */

#nr-floating-tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  background: #1c2738;
  color: #f1f5f9;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 14px -1px rgba(0, 0, 0, 0.35), 0 2px 6px -1px rgba(0, 0, 0, 0.2);
  max-width: 290px;
  word-wrap: break-word;
  white-space: normal;
  text-align: left;
  opacity: 0;
  transform: translateY(3px) scale(0.96);
  transition: opacity 0.12s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, left, top;
}

#nr-floating-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#nr-floating-tooltip-arrow {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #1c2738;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

#nr-floating-tooltip.place-top #nr-floating-tooltip-arrow {
  bottom: -4px;
  border-top: none;
  border-left: none;
}

#nr-floating-tooltip.place-bottom #nr-floating-tooltip-arrow {
  top: -4px;
  border-bottom: none;
  border-right: none;
}

/* =========================================================================
   PLUGIN FLUTUANTE (NOVO TIPO): RÁDIO GLOBAL & EQUALIZADOR VISUAL
   ========================================================================= */

#floating-radio-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--nr-card-bg, #ffffff);
  color: var(--nr-text, #2c3e50);
  border: 1px solid var(--nr-border, #ccd5d4);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

#floating-radio-widget.hidden {
  display: none !important;
}

/* Visualizador de espectro sonoro (barras de equalizador animadas) */
.radio-visualizer-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 52px;
  padding: 8px 14px;
  background: radial-gradient(ellipse at bottom, #0f172a 0%, #020617 100%);
  border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(6, 182, 212, 0.15);
  overflow: hidden;
  position: relative;
}

.radio-visualizer-bar {
  flex: 1;
  max-width: 8px;
  min-height: 3px;
  height: 3px;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(to top, #10b981 0%, #06b6d4 65%, #ec4899 100%);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
  transition: height 0.06s ease-out;
  will-change: height;
}

/* Mini visualizador embutido na barra compacta */
.mini-visualizer-box {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 20px;
  width: 28px;
  padding: 2px;
}

.mini-visualizer-bar {
  flex: 1;
  min-height: 2px;
  height: 2px;
  border-radius: 2px;
  background: #10b981;
  transition: height 0.08s ease;
}

/* Mini Player Flutuante (modo recolhido) */
#floating-radio-mini {
  position: fixed;
  bottom: 20px;
  right: 20px;
  height: 48px;
  background: var(--nr-card-bg, #ffffff);
  color: var(--nr-text, #2c3e50);
  border: 1px solid var(--nr-border, #ccd5d4);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  z-index: 9999;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#floating-radio-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
}

#floating-radio-mini.hidden {
  display: none !important;
}

/* Botão Launcher Redondo Flutuante */
#floating-radio-launcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0f172a;
  color: #38bdf8;
  border: 2px solid #06b6d4;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(6, 182, 212, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 9998;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#floating-radio-launcher:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.5);
}

#floating-radio-launcher.hidden {
  display: none !important;
}

/* Itens da Lista de Estações */
.radio-station-item {
  border-radius: 8px;
  transition: all 0.15s ease;
  user-select: none;
}

.radio-station-item:hover {
  background: var(--nr-neutral-soft, rgba(0, 0, 0, 0.04));
}

.radio-station-item.active {
  background: rgba(37, 99, 235, 0.09);
  border-left: 3px solid #2563eb;
  font-weight: 600;
}

/* Botão de Reprodução Principal */
.radio-btn-play-pulse {
  position: relative;
}

.radio-btn-play-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid rgba(16, 185, 129, 0.5);
  animation: radioPulse 2s infinite;
  opacity: 0;
}

@keyframes radioPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

/* =========================================================================
   EFEITOS DE ANIMAÇÃO DE FUNDO DO GRUPO DE PESQUISA (CSS PURO & ULTRA-LEVE)
   ========================================================================= */

/* Camada base de efeitos no cabeçalho */
#group-header-effect-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Garante legibilidade do texto e contraste sobre fundos animados */
#group-panel-header.has-effect #group-name-display,
#group-panel-header.has-effect #group-desc-display {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* --- Opção 1: Gradiente Aurora Boreal (Efeito Líquido Suave) --- */
.effect-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.effect-aurora::before,
.effect-aurora::after,
.effect-aurora .aurora-blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.65;
  will-change: transform;
  animation: moverAurora 16s infinite alternate ease-in-out;
}
.effect-aurora::before,
.effect-aurora .aurora-blob-1 {
  width: 340px;
  height: 340px;
  background: #3b82f6;
  top: -25%;
  left: -10%;
}
.effect-aurora::after,
.effect-aurora .aurora-blob-2 {
  width: 300px;
  height: 300px;
  background: #ec4899;
  bottom: -25%;
  right: -5%;
  animation-delay: -8s;
}
@keyframes moverAurora {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 30px) scale(1.18); }
  100% { transform: translate(110px, 50px) scale(1.3); }
}

/* --- Opção 2: Linhas de Grelha Minimalista (Tech Grid & Scanline) --- */
.effect-grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 36px 36px;
}
.effect-grid .grid-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.22), transparent);
  will-change: transform;
  animation: scanline 5s linear infinite;
}
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* --- Opção 3: Estrelas Cintilantes (Efeito Espaço) --- */
.effect-space {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.effect-space .space-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 6vw 15px 0 #ffffff, 18vw 60px 0 rgba(255, 255, 255, 0.95), 32vw 22px 0 #ffffff,
              44vw 75px 0 rgba(255, 255, 255, 0.85), 58vw 18px 0 #ffffff, 72vw 82px 0 rgba(255, 255, 255, 0.95),
              84vw 35px 0 #ffffff, 94vw 70px 0 rgba(255, 255, 255, 0.9), 12vw 85px 0 #ffffff,
              48vw 42px 0 rgba(255, 255, 255, 0.8), 65vw 55px 0 #ffffff, 25vw 20px 0 rgba(255, 255, 255, 0.9);
  animation: piscarStars 3.5s ease-in-out infinite alternate;
}
.effect-space .space-stars-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 15vw 38px 1px rgba(56, 189, 248, 0.95), 55vw 28px 1px rgba(236, 72, 153, 0.9),
              80vw 55px 1px rgba(167, 139, 250, 0.95), 28vw 72px 1px rgba(52, 211, 153, 0.9),
              8vw 80px 1px rgba(250, 204, 21, 0.9), 90vw 25px 1px rgba(56, 189, 248, 0.9);
  animation: piscarStars 4.5s ease-in-out infinite alternate-reverse;
}
@keyframes piscarStars {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* --- Opção 4: Ondas Abstratas Deslizantes --- */
.effect-waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.effect-waves .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 80px;
  will-change: transform;
}
.effect-waves .wave-1 {
  animation: moverOnda 14s linear infinite;
}
.effect-waves .wave-2 {
  bottom: -4px;
  height: 95px;
  animation: moverOnda 22s linear infinite reverse;
  opacity: 0.75;
}
@keyframes moverOnda {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Opção 5: Zoom Dinâmico Sutil (Ken Burns Effect) --- */
.effect-zoom {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.effect-zoom .zoom-pattern {
  position: absolute;
  inset: -15%;
  width: 130%;
  height: 130%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 65%),
              repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04) 12px, rgba(255, 255, 255, 0.12) 12px, rgba(255, 255, 255, 0.12) 24px);
  will-change: transform;
  animation: zoomLento 14s ease-in-out infinite alternate;
}
@keyframes zoomLento {
  0% { transform: scale(1); }
  100% { transform: scale(1.18); }
}

/* Chips de Seleção de Efeito */
.group-effect-chip {
  background: #f8fafc;
  color: #334155;
  border-color: #cbd5e1;
  transition: all 0.15s ease;
}
.group-effect-chip:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  transform: translateY(-1px);
}
.group-effect-chip.active {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35) !important;
}

/* --- Menu Dropdown do Usuário Logado --- */
#dropdown-user-menu {
  min-width: 280px;
  animation: userMenuPop 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
}
@keyframes userMenuPop {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
:root:not([data-theme="light"]):not([data-theme="white"]) #dropdown-user-menu {
  background: var(--nr-surface, #1b2127) !important;
  border-color: var(--nr-border, #2b343c) !important;
  color: var(--nr-text, #e4e9ed) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
}
:root:not([data-theme="light"]):not([data-theme="white"]) #dropdown-user-menu .bg-slate-50\/80 {
  background: var(--nr-surface-sunken, rgba(23, 28, 33, 0.9)) !important;
  border-color: var(--nr-border, #2b343c) !important;
}
:root:not([data-theme="light"]):not([data-theme="white"]) #dropdown-user-menu button:hover {
  background: var(--nr-surface-hover, rgba(255, 255, 255, 0.06)) !important;
}
:root:not([data-theme="light"]):not([data-theme="white"]) #dropdown-user-menu .text-\[\#2c3e50\] {
  color: var(--nr-text, #e4e9ed) !important;
}
:root:not([data-theme="light"]):not([data-theme="white"]) #dropdown-user-menu .text-\[\#595b5b\] {
  color: var(--nr-text-muted, #a2aeb8) !important;
}

/* --- Widget Flutuante do Chat Interno do Laboratório --- */
#floating-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 40px);
  background: var(--nr-card-bg, #ffffff);
  color: var(--nr-text, #2c3e50);
  border: 1px solid var(--nr-border, #ccd5d4);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#floating-chat-launcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0f172a;
  color: #38bdf8;
  border: 2px solid #3b82f6;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(59, 130, 246, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 9998;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#floating-chat-launcher:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5);
}

#floating-chat-launcher.with-radio {
  right: 80px;
}

#floating-chat-launcher.hidden {
  display: none !important;
}

#floating-chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 9999px;
  background-color: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#floating-chat-badge.hidden {
  display: none !important;
}

@keyframes chatFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-chat-fade {
  animation: chatFadeIn 0.18s ease-out;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#floating-chat-widget.hidden {
  display: none !important;
}
:root:not([data-theme="light"]):not([data-theme="white"]) #floating-chat-widget {
  background: var(--nr-surface, #1b2127) !important;
  border-color: var(--nr-border, #2b343c) !important;
  color: var(--nr-text, #e4e9ed) !important;
}
:root:not([data-theme="light"]):not([data-theme="white"]) #chat-messages-container {
  background: var(--nr-surface-sunken, #14191e) !important;
}
:root:not([data-theme="light"]):not([data-theme="white"]) #chat-input-form {
  background: var(--nr-surface, #1b2127) !important;
  border-color: var(--nr-border, #2b343c) !important;
}



/* Pré-visualização de Markdown (aba "Notas" do projeto) */
.nr-md-preview-box { font-size: 0.875rem; line-height: 1.6; color: #2c3e50; overflow-wrap: anywhere; }
.nr-md-preview-box h1 { font-size: 1.6em; font-weight: 700; margin: 0.6em 0 0.4em; border-bottom: 1px solid #e5e9e8; padding-bottom: 0.2em; }
.nr-md-preview-box h2 { font-size: 1.35em; font-weight: 700; margin: 0.8em 0 0.4em; border-bottom: 1px solid #e5e9e8; padding-bottom: 0.15em; }
.nr-md-preview-box h3 { font-size: 1.15em; font-weight: 700; margin: 0.8em 0 0.3em; }
.nr-md-preview-box h4, .nr-md-preview-box h5, .nr-md-preview-box h6 { font-weight: 700; margin: 0.8em 0 0.3em; }
.nr-md-preview-box p { margin: 0.5em 0; }
.nr-md-preview-box ul { list-style: disc; padding-left: 1.5em; margin: 0.5em 0; }
.nr-md-preview-box ol { list-style: decimal; padding-left: 1.5em; margin: 0.5em 0; }
.nr-md-preview-box li > ul, .nr-md-preview-box li > ol { margin: 0.2em 0; }
.nr-md-preview-box a { color: #0070d2; text-decoration: underline; }
.nr-md-preview-box blockquote { border-left: 4px solid #9daca9; padding: 0.1em 1em; color: #595b5b; margin: 0.6em 0; background: #f6f8f8; }
.nr-md-preview-box code { background: #eef2f2; padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; font-family: ui-monospace, monospace; }
.nr-md-preview-box pre { background: #1e2a33; color: #e8eef2; padding: 0.8em 1em; border-radius: 6px; overflow: auto; margin: 0.6em 0; }
.nr-md-preview-box pre code { background: transparent; padding: 0; color: inherit; }
.nr-md-preview-box table { border-collapse: collapse; margin: 0.6em 0; }
.nr-md-preview-box th, .nr-md-preview-box td { border: 1px solid #ccd5d4; padding: 0.35em 0.7em; }
.nr-md-preview-box th { background: #eef2f2; }
.nr-md-preview-box img { max-width: 100%; }
.nr-md-preview-box hr { border: 0; border-top: 1px solid #ccd5d4; margin: 1em 0; }
.nr-md-preview-box input[type="checkbox"] { margin-right: 0.4em; }