/* Axis IA -- RFC Plataforma-002, redesigned by RFC UI-001 ("Axis IA Premium
   Experience"). Light theme only for now; every color is a custom property
   under :root so a future dark theme is just a `[data-theme="dark"]` block
   redefining these same tokens -- no selector or markup changes needed
   elsewhere in this file. Vanilla CSS only, no preprocessor, no framework:
   every "component" below is either a real class this app's JS already
   builds (button/table/card markup, unchanged since before this RFC) or a
   generic `[class*="..."]` attribute selector reused across every
   `xxx-admin-page` screen so ~12 near-identical read-only admin pages stay
   visually consistent from a single, compact rule set instead of twelve
   near-duplicated ones (RFC's own "Padronizar todos"). */
:root {
  /* -- Neutrals -- */
  --color-bg: #f6f7fb;
  --color-bg-subtle: #eef0f6;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e3e6ee;
  --color-border-strong: #d3d7e3;
  --color-text: #171a23;
  --color-text-muted: #6b7085;
  --color-text-faint: #9297a8;

  /* -- Brand / accent -- */
  --color-primary: #4c5bf6;
  --color-primary-hover: #3f4be0;
  --color-primary-soft: #eef0ff;
  --color-primary-contrast: #ffffff;
  --color-accent-gradient: linear-gradient(135deg, #4c5bf6 0%, #7b61ff 100%);

  /* -- Chat -- */
  --color-user-bubble: #4c5bf6;
  --color-user-bubble-text: #ffffff;
  --color-assistant-bubble: #f1f2f8;
  --color-assistant-bubble-text: #171a23;

  /* -- Semantic -- */
  --color-error: #e0435a;
  --color-error-soft: #fdecef;
  --color-success: #17a673;
  --color-success-soft: #e9f9f2;
  --color-warning: #d98a1f;
  --color-warning-soft: #fdf3e4;

  /* -- Radius -- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* -- Elevation -- */
  --shadow-xs: 0 1px 2px rgba(20, 24, 41, 0.05);
  --shadow-sm: 0 2px 6px rgba(20, 24, 41, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 24, 41, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 24, 41, 0.12);

  /* -- Spacing scale -- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* -- Layout -- */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --header-height: 60px;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme extension point (RFC "PREPARAÇÃO" -- not implemented yet):
   :root[data-theme="dark"] { --color-bg: ...; --color-surface: ...; ... } */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

.app {
  height: 100vh;
}

h1, h2, h3 {
  letter-spacing: -0.01em;
}

/* ============================================================
   Ícones -- SVG monocromático via CSS mask (currentColor), zero
   dependência nova. Um único bloco `.icon` base + um data-URI por
   glifo (traço simples, 20x20, mesmo estilo minimalista em toda a
   sidebar/header).
   ============================================================ */
.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.icon--chat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 1 1-3.6-6.7L21 4l-1 4.2A7.96 7.96 0 0 1 21 12Z'/%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 1 1-3.6-6.7L21 4l-1 4.2A7.96 7.96 0 0 1 21 12Z'/%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01'/%3E%3C/svg%3E"); }

.icon--dashboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='12' width='4' height='9'/%3E%3Crect x='10' y='7' width='4' height='14'/%3E%3Crect x='17' y='3' width='4' height='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='12' width='4' height='9'/%3E%3Crect x='10' y='7' width='4' height='14'/%3E%3Crect x='17' y='3' width='4' height='18'/%3E%3C/svg%3E"); }

.icon--admin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z'/%3E%3C/svg%3E"); }

.icon--axis { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M10 4v16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M10 4v16'/%3E%3C/svg%3E"); }

.icon--operations { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

.icon--whatsapp { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.4 7.5L3 20l1.1-5.4A8.5 8.5 0 1 1 21 11.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.4 7.5L3 20l1.1-5.4A8.5 8.5 0 1 1 21 11.5Z'/%3E%3C/svg%3E"); }

.icon--memory { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }

.icon--llm { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E"); }

.icon--tools { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 1 5.4-5.4l-3 3-2-2 3-3Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 1 5.4-5.4l-3 3-2-2 3-3Z'/%3E%3C/svg%3E"); }

.icon--connectors { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v4M15 3v4M6 7h12l-1 5a5 5 0 0 1-10 0L6 7Z'/%3E%3Cpath d='M12 16v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v4M15 3v4M6 7h12l-1 5a5 5 0 0 1-10 0L6 7Z'/%3E%3Cpath d='M12 16v5'/%3E%3C/svg%3E"); }

.icon--database { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }

.icon--processes { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='12' r='3'/%3E%3Cpath d='M6 9v6M8.5 7.5 15.5 10.5M8.5 16.5 15.5 13.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='12' r='3'/%3E%3Cpath d='M6 9v6M8.5 7.5 15.5 10.5M8.5 16.5 15.5 13.5'/%3E%3C/svg%3E"); }

.icon--task-planner { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 9l2 2 4-4M8 16h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 9l2 2 4-4M8 16h6'/%3E%3C/svg%3E"); }

.icon--chevron-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }

.icon--back { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }

/* RFC UI-003 ("Responsividade Premium") -- hamburger, Header.js's mobile drawer toggle. */
.icon--menu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); }

/* RFC UI-004 ("Painel Administrativo Premium") -- ConversationList.js's search field. */
.icon--search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }

/* RFC IA-055 ("Base Comercial Multiempresa"), Fase 4 -- Sidebar.js's "Comercial" group. */
.icon--comercial-planos { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }

.icon--comercial-precos { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 6.5c0-1.9-2.2-3.5-5-3.5s-5 1.6-5 3.5S9.2 10 12 10s5 1.6 5 3.5-2.2 3.5-5 3.5-5-1.6-5-3.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 6.5c0-1.9-2.2-3.5-5-3.5s-5 1.6-5 3.5S9.2 10 12 10s5 1.6 5 3.5-2.2 3.5-5 3.5-5-1.6-5-3.5'/%3E%3C/svg%3E"); }

.icon--comercial-faq { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.9.4-1.5 1-1.5 2.2'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.9.4-1.5 1-1.5 2.2'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }

.icon--comercial-diferenciais { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.5l-6.1 3.1 1.4-6.8-5.1-4.7 6.9-.8L12 2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.5l-6.1 3.1 1.4-6.8-5.1-4.7 6.9-.8L12 2Z'/%3E%3C/svg%3E"); }

.icon--comercial-objecoes { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z'/%3E%3Cpath d='M9.5 12l1.8 1.8L15 10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z'/%3E%3Cpath d='M9.5 12l1.8 1.8L15 10'/%3E%3C/svg%3E"); }

.icon--comercial-materiais { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z'/%3E%3Cpath d='M14 2v6h6M9 13h6M9 17h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z'/%3E%3Cpath d='M14 2v6h6M9 13h6M9 17h6'/%3E%3C/svg%3E"); }

.icon--comercial-documentos { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4'/%3E%3Cpath d='M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4'/%3E%3Cpath d='M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); }

/* ============================================================
   App shell -- sidebar + header + content (RFC UI-001)
   ============================================================ */
.app-shell {
  display: flex;
  height: 100vh;
  background: var(--color-bg);
}

.app-shell__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100vh;
}

.app-shell__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* RFC UI-003 ("Responsividade Premium") -- darkened backdrop behind
   Sidebar.js's mobile drawer; `display:none`-by-default outside the ≤900px
   media query means the `--visible` modifier has no effect at all above
   that width, so this can never accidentally cover desktop content even
   if `sidebar.isOpen()` were somehow true there. */
.app-shell__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 26, 0.45);
  z-index: 35;
}

/* -- Sidebar -- */
.sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  transition: width var(--transition-base);
  overflow: hidden;
}

.sidebar--collapsed {
  width: var(--sidebar-width-collapsed);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  flex-shrink: 0;
}

.sidebar__brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-accent-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.sidebar__brand-label {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sidebar__groups {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-3) var(--space-4);
}

.sidebar__group {
  margin-bottom: var(--space-4);
}

.sidebar__group-label {
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 9px var(--space-2);
  margin-bottom: 2px;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.87rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar__item:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.sidebar__item--active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.sidebar__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sidebar__icon {
  color: inherit;
}

.sidebar--collapsed .sidebar__label,
.sidebar--collapsed .sidebar__group-label,
.sidebar--collapsed .sidebar__brand-label {
  display: none;
}

.sidebar__footer {
  flex-shrink: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.sidebar__collapse-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 8px var(--space-2);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.sidebar__collapse-toggle:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.sidebar--collapsed .sidebar__collapse-toggle .icon--chevron-left {
  transform: rotate(180deg);
}

/* -- Header -- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

/* RFC UI-003 -- hidden on desktop/notebook/tablet; shown ≤900px, where the
   sidebar becomes an off-canvas drawer with no other way to open it. */
.app-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.app-header__menu-toggle:hover {
  background: var(--color-bg-subtle);
}

.app-header__tenant {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.app-header__status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.app-header__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.app-header__status-dot--ok {
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
}

.app-header__status-dot--erro {
  background: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-soft);
}

.app-header__profile {
  position: relative;
}

.app-header__profile-toggle {
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.app-header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-gradient);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.app-header__profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 20;
}

.app-header__profile-menu[hidden] {
  display: none;
}

.app-header__profile-name {
  padding: var(--space-2);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
}

.app-header__profile-tenant {
  padding: 0 var(--space-2) var(--space-2);
  margin-bottom: var(--space-1);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.app-header__logout {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--color-error);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.app-header__logout:hover {
  background: var(--color-error-soft);
}

/* ============================================================
   Chat (RFC UI-001: mais largo, tipografia/espaçamento refinados,
   balões modernos, animação de resposta, loading elegante,
   auto-scroll suave)
   ============================================================ */
.chat-window {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: var(--space-7) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.message {
  max-width: 74%;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  line-height: 1.55;
  font-size: 0.95rem;
  word-wrap: break-word;
  box-shadow: var(--shadow-xs);
  animation: message-in 0.18s ease;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message__content {
  margin: 0;
  white-space: pre-wrap;
}

.message--user {
  align-self: flex-end;
  background: var(--color-user-bubble);
  color: var(--color-user-bubble-text);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(76, 91, 246, 0.25);
}

.message--assistant {
  align-self: flex-start;
  background: var(--color-assistant-bubble);
  color: var(--color-assistant-bubble-text);
  border-bottom-left-radius: 4px;
}

.message--typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 18px;
}

.message--typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.message--typing__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.message--typing__dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.input-area {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-8);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.input-area__field {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg-subtle);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.input-area__field:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.input-area__send {
  border: none;
  border-radius: var(--radius-lg);
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.input-area__send:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.input-area__send:active:not(:disabled) {
  transform: scale(0.97);
}

.input-area__send:disabled,
.input-area__field:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* "Parar resposta" (RFC Plataforma-004) -- shown in place of "Enviar" while
   a response is being awaited/streamed in. */
.input-area__stop {
  border: 1px solid var(--color-error);
  border-radius: var(--radius-lg);
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-error);
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.input-area__stop:hover {
  background: var(--color-error-soft);
}

.input-area__stop[hidden] {
  display: none;
}

/* ============================================================
   Login screen (RFC Plataforma-003, restyled)
   ============================================================ */
.login-page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #eef0ff 0%, var(--color-bg) 55%);
}

.login-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 340px;
  padding: var(--space-8) var(--space-7);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.login-card__logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  letter-spacing: -0.02em;
}

.login-card__subtitle {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

.login-card__field {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg-subtle);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.login-card__field:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.login-card__field:disabled {
  opacity: 0.6;
}

.login-card__error {
  margin: 0;
  min-height: 1em;
  font-size: 0.82rem;
  color: var(--color-error);
}

.login-card__submit {
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.login-card__submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.login-card__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   Generic read-only admin pages (Memória, Provedor de IA, WhatsApp,
   Ferramentas, Connectors, Banco de Dados, Axis Ponto, Operações Axis
   Ponto, Processos, Task Planner) -- RFC UI-001's own "Padronizar
   todos": one shared rule set, matched by the `xxx-admin-page`/
   `xxx-admin-page__yyy` naming convention every one of these pages
   already used before this RFC (see each component's own file), so
   every one of them gets identical spacing/radius/shadows/typography
   without touching a single line of their own JS.
   ============================================================ */
[class$="-admin-page"] {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-8);
}

[class*="-admin-page__header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

[class*="-admin-page__title"] {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

[class*="-admin-page__back"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

[class*="-admin-page__back"]:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

[class*="-admin-page__status"] {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 var(--space-5);
  min-height: 1.2em;
}

[class*="-admin-page__actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

[class*="-admin-page"] form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

[class*="-admin-page"] input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  min-width: 160px;
  flex: 1;
}

[class*="-admin-page"] input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

[class*="-admin-page"] button {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

[class*="-admin-page"] button:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}

[class*="-admin-page__save"],
[class*="-admin-page__test"],
[class*="-admin-page__validate"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

[class*="-admin-page__save"]:hover,
[class*="-admin-page__test"]:hover,
[class*="-admin-page__validate"]:hover {
  background: var(--color-primary-soft);
}

[class*="-admin-page__table-wrapper"],
[class*="-admin-page__status-table"] {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

[class*="-admin-page__table"] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

[class*="-admin-page__table"] th,
[class*="-admin-page__table"] td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

[class*="-admin-page__table"] th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-bg-subtle);
}

[class*="-admin-page__table"] tr:last-child td {
  border-bottom: none;
}

[class*="-admin-page__empty"] {
  color: var(--color-text-muted);
  padding: var(--space-7);
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------
   RFC IA-055 ("Base Comercial Multiempresa"), Fase 4 -- the six
   "Axis IA > Comercial" screens (Planos, Preços, FAQ, Diferenciais,
   Objeções, Materiais). Every root class still ends in `-admin-page`
   (`comercial-planos-admin-page`, `comercial-precos-admin-page`, ...), so
   everything above this block already applies unchanged -- these rules
   only add what a read-only admin page never needed: a search+"Novo"
   toolbar, an editable field grid (create/edit), a delete confirmation
   banner, and per-row action buttons.
   ------------------------------------------------------------ */
[class*="-admin-page__toolbar"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

[class*="-admin-page__search-wrapper"] {
  position: relative;
  flex: 1;
  max-width: 360px;
}

[class*="-admin-page__search-icon"] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  pointer-events: none;
}

[class*="-admin-page__search-input"] {
  width: 100%;
  padding: 10px 14px 10px 36px !important;
}

[class*="-admin-page__new"] {
  border-color: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  background: var(--color-primary) !important;
  flex-shrink: 0;
}

[class*="-admin-page__new"]:hover {
  background: var(--color-primary-hover) !important;
}

[class*="-admin-page__form-panel"] {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

[class*="-admin-page__form-title"] {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 var(--space-4);
}

[class*="-admin-page__field"] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  flex: 1 1 220px;
}

[class*="-admin-page__field"] textarea,
[class*="-admin-page__field"] select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  min-height: 40px;
}

[class*="-admin-page__field"] textarea:focus,
[class*="-admin-page__field"] select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

[class*="-admin-page__field-checkbox"] {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

[class*="-admin-page__field-checkbox"] input[type="checkbox"] {
  min-width: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  flex: none;
  accent-color: var(--color-primary);
}

[class*="-admin-page__form-error"] {
  color: var(--color-error);
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 0 0 var(--space-3);
  width: 100%;
}

[class*="-admin-page__form-actions"] {
  display: flex;
  gap: var(--space-2);
  width: 100%;
}

[class*="-admin-page__row-actions"] {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

[class*="-admin-page__row-actions"] button {
  padding: 6px 12px;
  font-size: 0.78rem;
}

[class*="-admin-page__delete"] {
  border-color: var(--color-error) !important;
  color: var(--color-error) !important;
}

[class*="-admin-page__delete"]:hover {
  background: var(--color-error-soft) !important;
}

[class*="-admin-page__confirm"]:not([class*="confirm-"]) {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-error-soft);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.85rem;
}

[class*="-admin-page__confirm-text"] {
  flex: 1;
  color: var(--color-text);
}

[class*="-admin-page__confirm-delete"] {
  border-color: var(--color-error) !important;
  color: var(--color-primary-contrast) !important;
  background: var(--color-error) !important;
}

[class*="-admin-page__pagination"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

[class*="-admin-page__pagination"] button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   Painel Administrativo (RFC Plataforma-044, layout resolvido pela
   RFC UI-001: colunas melhor distribuídas, responsividade)
   ============================================================ */
.admin-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.admin-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.admin-dashboard__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.admin-dashboard__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
}

.admin-dashboard__back:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.admin-dashboard__status {
  color: var(--color-error);
  font-size: 0.85rem;
  margin: 0 0 var(--space-3);
  min-height: 1.2em;
}

.admin-dashboard__body {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--space-5);
  flex: 1;
  min-height: 0;
}

.admin-dashboard__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
}

/* Status indicators (topo) -- "KPIs administrativos" (RFC UI-004): the
   exact same premium-card grid SummaryCards.js's own CSS established (RFC
   UI-002) -- see that rule block below, where `.status-indicators__item`
   etc. were merged in so the two screens' KPI rows read as one consistent
   system instead of two near-duplicated ones (this RFC's own "não
   duplicar"), even though each stays its own component. */
.status-indicators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Conversation list (esquerda) -- RFC UI-004 ("Painel Administrativo
   Premium"): avatar, horário, melhor hierarquia visual. Empty/error states
   across this whole screen share one rule (see the consolidated
   `.conversation-list__empty, ...` block further down -- this RFC's own
   "Empty State: padronizar, mesmo estilo usado no Dashboard"). */
.conversation-list {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.conversation-list__search-wrapper {
  position: relative;
  margin: var(--space-3);
}

.conversation-list__search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--color-text-faint);
  pointer-events: none;
}

.conversation-list__search {
  width: 100%;
  padding: 9px 12px 9px 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--color-bg-subtle);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.conversation-list__search:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.conversation-list__items {
  overflow-y: auto;
  flex: 1;
}

.conversation-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: background-color var(--transition-fast);
}

.conversation-list__item:hover {
  background: var(--color-bg-subtle);
}

.conversation-list__item--selected {
  background: var(--color-primary-soft);
}

.conversation-list__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-gradient);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.conversation-list__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.conversation-list__item-linha,
.conversation-list__item-linha2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.conversation-list__item-nome {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-list__item-horario {
  font-size: 0.7rem;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

/* Status pill (RFC UI-004 "preparar espaço visual para estados futuros"):
   only --ativa/--inativa are ever applied by ConversationList.js today
   (the only signal `ultimaAtividade` can honestly produce) -- --ia/
   --humano/--pausada/--aguardando/--finalizada are styled and ready for
   whenever the backend actually exposes them, never applied before then. */
.conversation-list__item-status {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.conversation-list__item-status--ativa,
.conversation-list__item-status--ia {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.conversation-list__item-status--inativa,
.conversation-list__item-status--finalizada {
  background: var(--color-bg-subtle);
  color: var(--color-text-faint);
}

.conversation-list__item-status--humano {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.conversation-list__item-status--pausada,
.conversation-list__item-status--aguardando {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.conversation-list__item-mensagem {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.conversation-list__item-telefone {
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

.conversation-list__skeleton-row {
  height: 60px;
  margin: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

/* Conversation chat (centro) */
.conversation-chat {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.conversation-chat__title {
  font-weight: 700;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.conversation-chat__operacoes {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
}

.conversation-chat__operacoes-label {
  color: var(--color-text-muted);
  margin-right: 6px;
}

.conversation-chat__operacao-badge {
  display: inline-block;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  margin-right: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.conversation-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.conversation-chat__skeleton-row {
  height: 48px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
}

.conversation-chat__message {
  margin-bottom: var(--space-3);
}

.conversation-chat__message-meta {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.conversation-chat__message-content {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: var(--color-assistant-bubble);
  color: var(--color-assistant-bubble-text);
  display: inline-block;
}

.conversation-chat__message--user .conversation-chat__message-content {
  background: var(--color-user-bubble);
  color: var(--color-user-bubble-text);
}

/* Context panel / telemetry timeline / tool executions (direita) */
.context-panel,
.telemetry-timeline,
.tool-executions-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.context-panel__title,
.telemetry-timeline__title,
.tool-executions-panel__title {
  font-weight: 700;
  margin-bottom: var(--space-2);
  font-size: 0.92rem;
}

.context-panel__status {
  color: var(--color-error);
  font-size: 0.8rem;
  margin: 0 0 var(--space-2);
}

/* RFC UI-004 -- "Contexto": grouped into Tenant/Canal/Entidades/Intenção/
   Ferramentas/Memória instead of one flat list. */
.context-panel__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.context-panel__group-title {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
}

.context-panel__body {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  font-size: 0.82rem;
}

.context-panel__label {
  color: var(--color-text-muted);
}

.context-panel__value {
  margin: 0;
  word-break: break-word;
}

.context-panel__skeleton-row {
  height: 40px;
  border-radius: var(--radius-md);
}

.context-panel__skeleton-row + .context-panel__skeleton-row {
  margin-top: var(--space-3);
}

/* RFC UI-004 -- "Timeline moderna": a dot + connecting line per event,
   color-coded via the `--ok`/`--erro`/`--neutro` modifier
   TelemetryTimeline.js's own `statusModificador()` computes -- no data
   changed, purely a CSS hook. */
.telemetry-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  max-height: 260px;
  overflow-y: auto;
}

.telemetry-timeline__item {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin-left: 4px;
  border-left: 2px solid var(--color-border);
}

.telemetry-timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-faint);
  border: 2px solid var(--color-surface);
}

.telemetry-timeline__item--ok::before {
  background: var(--color-success);
}

.telemetry-timeline__item--erro::before {
  background: var(--color-error);
}

.telemetry-timeline__item:last-child {
  border-left-color: transparent;
}

.telemetry-timeline__tipo {
  font-weight: 600;
}

.telemetry-timeline__status {
  color: var(--color-text-muted);
}

.telemetry-timeline__skeleton-row {
  height: 32px;
  margin: 0 0 var(--space-2) 4px;
  border-radius: var(--radius-md);
}

/* RFC UI-004 -- "Ferramentas": status-coded rows ("Sem alterar os dados" --
   `<tr>` gets a modifier class only; every `<td>`'s own text is untouched,
   see ToolExecutionsPanel.js's own comment), a scrollable wrapper so a
   wide table never forces the whole page to scroll horizontally. */
.tool-executions-panel__table-wrapper {
  overflow-x: auto;
}

.tool-executions-panel__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.tool-executions-panel__table th,
.tool-executions-panel__table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  word-break: break-word;
  white-space: nowrap;
}

.tool-executions-panel__table td:nth-child(4) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  white-space: normal;
}

.tool-executions-panel__row--ok td:nth-child(3) {
  color: var(--color-success);
  font-weight: 600;
}

.tool-executions-panel__row--falha td:nth-child(3) {
  color: var(--color-error);
  font-weight: 600;
}

.tool-executions-panel__skeleton-row {
  height: 32px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
}

/* Empty/error states shared across the whole Painel Administrativo (RFC
   UI-004 "Empty State"/"Error State": padronizar, mesmo estilo usado no
   Dashboard -- same posture as DashboardPage.js's own `.xxx__empty` rules,
   RFC UI-001/002). A genuine fetch failure (`--erro`) reads in
   `--color-error` instead of the neutral muted tone, so it's visually
   distinguishable from "nothing to show yet". */
.conversation-list__empty,
.conversation-chat__empty,
.tool-executions-panel__empty,
.telemetry-timeline__empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: var(--space-4);
}

.conversation-chat__empty--erro,
.tool-executions-panel__empty--erro,
.telemetry-timeline__empty--erro {
  color: var(--color-error);
}

/* ============================================================
   Dashboard operacional (RFC Plataforma-045, premium via RFC
   UI-001: cards grandes, gráfico, melhor distribuição, skeleton)
   ============================================================ */
.dashboard-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  overflow-y: auto;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

.dashboard-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.dashboard-page__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.dashboard-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
}

.dashboard-page__back:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dashboard-page__status {
  color: var(--color-error);
  font-size: 0.85rem;
  margin: 0 0 var(--space-3);
  min-height: 1.2em;
}

.dashboard-page__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

/* Summary cards (topo) -- "KPIs executivos" (RFC UI-002) */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.summary-cards__card,
.status-indicators__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  animation: card-enter 0.35s ease both;
}

.summary-cards__card:hover,
.status-indicators__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.summary-cards__label,
.status-indicators__label {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.summary-cards__value,
.status-indicators__value {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.summary-cards__value--ok,
.status-indicators__value--ok {
  color: var(--color-success);
}

.summary-cards__value--erro,
.status-indicators__value--erro {
  color: var(--color-error);
}

.summary-cards__value--skeleton,
.status-indicators__value--skeleton {
  height: 1.3rem;
  width: 60%;
  border-radius: var(--radius-sm);
}

.summary-cards__value--indisponivel {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-faint);
}

/* Icon (RFC UI-002/UI-004): a real DOM node appended last, visually pulled
   to the top-right via `order` -- keeps label/value at children[0]/[1] for
   every caller that already indexes into them (SummaryCards.js's/
   StatusIndicators.js's own comment). */
.summary-cards__icon,
.status-indicators__icon {
  order: -1;
  align-self: flex-end;
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  opacity: 0.55;
}

.summary-cards__card--indisponivel {
  border-style: dashed;
  box-shadow: none;
  background: var(--color-bg-subtle);
}

.summary-cards__card--indisponivel:hover {
  transform: none;
  box-shadow: none;
}

/* Most used tools / recent conversations tables */
.most-used-tools,
.recent-conversations,
.status-panel,
.bar-chart,
.donut-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  animation: card-enter 0.35s ease both;
}

.most-used-tools__title,
.recent-conversations__title,
.status-panel__title,
.bar-chart__title,
.donut-chart__title {
  font-weight: 700;
  margin-bottom: var(--space-3);
  font-size: 0.95rem;
}

.most-used-tools__table,
.recent-conversations__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.most-used-tools__table th,
.most-used-tools__table td,
.recent-conversations__table th,
.recent-conversations__table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  word-break: break-word;
}

.most-used-tools__table th,
.recent-conversations__table th {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.most-used-tools__table tr:last-child td,
.recent-conversations__table tr:last-child td {
  border-bottom: none;
}

.most-used-tools__empty,
.recent-conversations__empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Status panel (WhatsApp/IA/Telemetria/Memória) */
.status-panel__list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  font-size: 0.85rem;
}

.status-panel__label {
  color: var(--color-text-muted);
}

.status-panel__value {
  margin: 0;
  font-weight: 700;
}

.status-panel__value--ok {
  color: var(--color-success);
}

.status-panel__value--erro {
  color: var(--color-error);
}

/* -- Gráfico de barras (RFC UI-001 item "gráficos") -- */
.bar-chart__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bar-chart__row {
  display: grid;
  grid-template-columns: 120px 1fr 48px;
  align-items: center;
  gap: var(--space-3);
}

.bar-chart__label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-chart__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.bar-chart__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent-gradient);
  transition: width var(--transition-base);
}

.bar-chart__value {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
}

.bar-chart__empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* -- Gráfico de rosca (RFC UI-002 "gráficos" -- status dos Connectors) -- */
.donut-chart__body {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.donut-chart__ring {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-chart__ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  background: var(--color-surface);
  border-radius: 50%;
}

.donut-chart__center {
  position: relative;
  font-size: 1.1rem;
  font-weight: 700;
}

.donut-chart__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 140px;
}

.donut-chart__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
}

.donut-chart__swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.donut-chart__legend-label {
  color: var(--color-text-muted);
  flex: 1;
}

.donut-chart__legend-value {
  font-weight: 600;
}

.donut-chart__empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* -- Skeleton loading (RFC UI-001 item "loading, skeleton") -- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: skeleton-sweep 1.4s infinite;
}

.bar-chart__skeleton {
  height: 120px;
}

.donut-chart__skeleton {
  height: 120px;
  width: 120px;
  border-radius: 50%;
}

@keyframes skeleton-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* -- Animações leves de entrada (RFC UI-002 "Animações") -- */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .summary-cards__card,
  .most-used-tools,
  .recent-conversations,
  .status-panel,
  .bar-chart,
  .donut-chart,
  .skeleton::after {
    animation: none;
  }
}

/* ============================================================
   Empty state / error state genéricos (RFC UI-001 "Componentes")
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  color: var(--color-text-muted);
}

.empty-state__icon {
  width: 40px;
  height: 40px;
  color: var(--color-text-faint);
}

.empty-state__title {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
}

.empty-state__description {
  font-size: 0.85rem;
  max-width: 320px;
}

/* ============================================================
   Responsividade -- 4 zonas nomeadas (RFC UI-003 "Padronizar"), a partir
   de exatamente 3 breakpoints (nenhum novo criado nesta RFC):
     Desktop  > 1024px  -- regras base, sem media query
     Notebook  901-1024px -- @media (max-width: 1024px)
     Tablet    641-900px  -- @media (max-width: 900px)  -- Sidebar vira drawer
     Mobile      <= 640px -- @media (max-width: 640px)
   ============================================================ */

/* Notebook */
@media (max-width: 1024px) {
  .admin-dashboard__body {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .admin-dashboard__side {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin-dashboard__side > * {
    flex: 1;
    min-width: 260px;
  }

  .dashboard-page__body {
    grid-template-columns: 1fr;
  }
}

/* Tablet -- Sidebar becomes an off-canvas drawer (RFC UI-003's own
   "limitação conhecida": it used to stay permanently fixed/open here with
   no way to close it). Opened via Header.js's hamburger, closed by
   clicking the overlay, pressing Escape, or navigating -- see Sidebar.js/
   AppShell.js. The desktop-only icon-rail "collapsed" state doesn't apply
   at this width: the drawer is either fully open (`sidebar--open`,
   off-canvas via `transform`, not `width`, so the slide is animatable) or
   fully closed, never a narrow icon rail. */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
  }

  .sidebar--collapsed {
    width: 280px;
  }

  .sidebar--open {
    transform: translateX(0);
  }

  /* A `collapsed` preference (desktop icon-rail) saved before the viewport
     shrank here shouldn't produce a half-width, label-less drawer -- see
     this rule block's own comment above. */
  .sidebar--collapsed .sidebar__label,
  .sidebar--collapsed .sidebar__group-label,
  .sidebar--collapsed .sidebar__brand-label {
    display: block;
  }

  .sidebar__footer {
    display: none;
  }

  .app-shell__main {
    width: 100%;
  }

  .app-header__menu-toggle {
    display: flex;
  }

  .app-shell__overlay {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .app-shell__overlay--visible {
    opacity: 1;
    visibility: visible;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .app-header {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }

  .app-header__tenant {
    display: none;
  }

  .app-header__status-pill span:last-child {
    display: none;
  }

  .chat-window {
    padding: var(--space-4);
  }

  .input-area {
    padding: var(--space-3) var(--space-4);
  }

  .message {
    max-width: 88%;
  }

  .admin-dashboard__body {
    grid-template-columns: 1fr;
  }

  .admin-dashboard__side {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .admin-dashboard__side > * {
    min-width: 0;
  }

  [class$="-admin-page"] {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  [class*="-admin-page__header"] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}