@import "./tokens.css?v=1.0.3";

/* ==========================================
   Shared UI Controls 
   ========================================== */
.ui-control {
  min-height: 3.2rem;
  padding: 0 var(--space-10);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.control-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.control-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.control-wrap > .ui-control {
  width: 100%;
}

.ui-control--sm {
  min-height: 2.8rem;
  padding: 0 var(--space-8);
  font-size: var(--fs-12);
  border-radius: var(--radius-lg);
}

.ui-control--sm.control-hasStartIcon {
  padding-left: var(--space-30) !important;
}

.ui-control--sm.control-hasEndIcon {
  padding-right: var(--space-30) !important;
}
.control-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.control-icon--start {
  left: var(--space-10);
}

.control-icon--end {
  right: var(--space-10);
}

.control-hasStartIcon {
  padding-left: var(--space-32) !important;
}

.control-hasEndIcon {
  padding-right: var(--space-32) !important;
}

html {
  height: 100%;
  color-scheme: dark;
  font-size: 62.5%; /* 1rem = 10px */
  background: var(--color-bg);
  color: var(--color-text-primary);
}

/* ==========================================
   Scrollbar Customization (Global)
   ========================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

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

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

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-gray);
}

/* ==========================================
   UI Fixes
   ========================================== */

.icon, svg.lucide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-iconSm {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

/* --- Avatar --- */
.panel-nameWithAvatar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.panel-avatarRoot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: hidden;
  user-select: none;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.panel-avatarImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.panel-avatarFallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
  font-weight: 500;
  border-radius: inherit;
}

.panel-thActions {
  width: auto;
  min-width: 11rem;
  white-space: nowrap;
}

.panel-table th.panel-thActions,
.panel-table td.panel-thActions {
  text-align: right;
}

.panel-actionBtns {
  display: flex;
  gap: 0.2rem;
  justify-content: flex-end;
  align-items: center;
}

/* Botões de ação na tabela: tamanho, alinhamento e ícone — classe base .panel-actionBtn só */
.panel-table .panel-actionBtn.button-root.button-ghost {
  box-sizing: border-box;
  width: 2.8rem;
  height: 2.8rem;
  min-width: 2.8rem;
  min-height: 2.8rem;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.panel-table .panel-actionBtn.button-root.button-ghost:hover:not(:disabled) {
  border-color: var(--color-border-subtle);
}

.panel-table .panel-actionBtn.button-root.button-ghost svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Variante danger: apenas cor destrutiva + realce no hover (herda layout de .panel-actionBtn) */
.panel-table .panel-actionBtn.panel-actionBtnDanger.button-root.button-ghost {
  color: var(--color-destructive, #ef4444);
}

.panel-table .panel-actionBtn.panel-actionBtnDanger.button-root.button-ghost:hover:not(:disabled) {
  color: var(--color-destructive, #ef4444);
  background: color-mix(in oklab, var(--color-destructive, #ef4444) 12%, transparent);
  border-color: color-mix(in oklab, var(--color-destructive, #ef4444) 28%, var(--color-border-subtle));
}

.panel-table .panel-actionBtn.panel-actionBtnDanger.button-root.button-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.select-iconWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.panel-themeListWrapper {
  gap: 3rem;
  display: flex;
  flex-direction: column;
}

.panel-tableToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-tableToolbarLeft {
  display: flex;
  align-items: center;
}

.panel-tableToolbarRight {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.panel-bulkToolbarActive {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  min-width: 0;
}

.panel-bulkSelectedCount {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.panel-bulkActionsContainer {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-grow: 1;
  min-width: 0;
}

.panel-bulkInputsScrollable {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  overflow-x: auto;
  flex-grow: 1;
  scrollbar-width: none;
}

.panel-bulkInputsScrollable:hover {
  scrollbar-width: thin;
}

.panel-bulkInputsScrollable::-webkit-scrollbar {
  height: 6px;
}

.panel-bulkInputsScrollable::-webkit-scrollbar-track {
  background: transparent;
}

.panel-bulkInputsScrollable::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: var(--radius-full);
}

.panel-bulkInputsScrollable:hover::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
}

.panel-bulkActionItem {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.panel-bulkApplyBtn,
.panel-bulkDeleteBtn {
  flex-shrink: 0;
}

.input-root.panel-bulkInput {
  width: 110px;
}

.select-trigger.panel-bulkSelect {
  width: 120px !important;
}

.panel-searchInputWrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.panel-searchIcon {
  position: absolute;
  left: var(--space-12);
  width: var(--space-16);
  height: var(--space-16);
  color: var(--color-text-disabled);
}

.panel-searchInput {
  padding-left: calc(var(--space-12) * 2 + 14px) !important;
  min-width: 260px;
}

.panel-filterButton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-weight: 500;
  cursor: pointer;
}

.panel-filterButton:hover {
  background: var(--color-bg-hover);
}

.panel-popoverPositioner {
  z-index: 100;
}

.panel-popoverPopup {
  width: 240px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-default);
  box-shadow: 0 10px 15px -3px var(--shadow-color, var(--shadow-color, rgba(0,0,0,0.1))), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: var(--transform-origin);
}

.panel-popoverHeader {
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border-subtle);
}

.panel-popoverContent {
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}


.panel-filterLabel {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--color-text-primary);
}


html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ==========================================
   CreateThemeModal 
   ========================================== */
.createthememodal-modalPopup {
  width: 100%;
  max-width: 36.25rem !important; /* 580px (increased by 80px) */
}


/* ==========================================
   ThemePlatformFilter 
   ========================================== */
.themeplatformfilter-filterWrapper {
  min-width: 180px;
}

/* ==========================================
   theme-details 
   ========================================== */
.theme-details-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 2.4rem;
}

.theme-details-leftCol {
  flex: 2;
  min-width: 0;
}

.theme-details-rightCol {
  flex: none;
  width: 24rem;
  position: sticky;
  top: 2.4rem;
}

.theme-details-cardTitle {
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1.6rem;
}

.theme-details-formGroup {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.theme-details-formGroupSpaced {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.theme-details-formGroupRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.theme-details-switchLabel {
  font-size: var(--fs-13);
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  margin-bottom: 0;
  user-select: none;
}

.theme-details-label {
  font-size: var(--fs-13);
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-text-primary);
  user-select: none;
}

.theme-details-readOnlyField {
  width: 100%;
  
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  display: flex;
  align-items: center;
}

.theme-details-infoTabContent {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.theme-details-linkGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.theme-details-tabContentPlaceholder {
  margin-top: 0.8rem;
}

.theme-details-coverImage {
  width: 100%;
  border-radius: var(--radius-default);
  margin-bottom: 0.8rem;
  border: 1px solid var(--color-border-subtle);
  object-fit: cover;
  aspect-ratio: 16/9;
}

.theme-details-logoImage {
  width: 100%;
  border-radius: var(--radius-default);
  margin-bottom: 0.8rem;
  border: 1px solid var(--color-border-subtle);
  object-fit: contain;
  aspect-ratio: 16/9;
}

.theme-details-fileInput {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-default);
  padding: 2.4rem;
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: all 0.2s;
}

.theme-details-fileInputContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.theme-details-fileInputUploading {
  opacity: 0.5;
  pointer-events: none;
}

.theme-details-fileInput:hover {
  border-color: var(--color-brand);
  background: var(--color-bg-subtle);
}

.theme-details-actionButtons {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.theme-details-actionButtons .button-root {
  gap: var(--space-8);
}

.theme-details-errorMessage {
  color: var(--color-danger);
  font-size: var(--fs-12);
  margin-top: 0.4rem;
  display: block;
}

/* --- Repeater --- */
.repeater-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.repeater-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
}

.repeater-title {
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.repeater-columns-header {
  display: flex;
  align-items: center;
  padding: 0;
  gap: var(--space-8);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.repeater-dragHandle-placeholder {
  width: 16px;
  flex-shrink: 0;
}

.repeater-columns-content {
  display: flex;
  flex: 1;
  gap: var(--space-16);
}

.repeater-removeButton-placeholder {
  width: 30px;
  flex-shrink: 0;
}

.repeater-emptyMessage {
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
  font-style: italic;
  padding: var(--space-16) 0;
}

.repeater-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.repeater-row {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.repeater-row-header {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10);
  position: relative;
}

.repeater-dragHandle {
  color: var(--color-text-gray);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  height: 3.5rem;
}

.repeater-dragHandle:active {
  cursor: grabbing;
}

.repeater-removeButton--floating {
  position: absolute;
}

.repeater-inputWrapper--dragSurface {
  cursor: grab;
  touch-action: none;
}

.repeater-inputWrapper--dragSurface:active {
  cursor: grabbing;
}

.repeater-inputWrapper {
  flex: 1;
  display: flex;
  gap: var(--space-16);
}

.repeater-row--small {
  border: none;
  background: transparent;
}

.repeater-row--small .repeater-row-header {
  padding: 0;
  gap: var(--space-8);
}

.repeater-row--small .repeater-inputWrapper {
  flex-direction: row;
  align-items: center;
}

.repeater-row--big .repeater-inputWrapper {
  flex-direction: column;
}

.repeater-col-flex {
  flex: 1;
}

.repeater-col-auto {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: center;
}

.repeater-col-fixed-140 {
  width: 14rem;
  text-align: center;
}

.repeater-col-full {
  width: 100%;
}



.repeater-removeButton {
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.repeater-removeButton svg {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.repeater-removeButton:hover {
  color: var(--color-danger);
  background-color: var(--color-danger-subtle);
}

.repeater-row.repeater-row--big .repeater-row-header{
  padding-right: 4rem;
}

.repeater-collapseTrigger {
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  height: 64px;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  border-radius: 0 var(--radius-default) var(--radius-default) 0;
  position: absolute;
  right: 0;
}

.repeater-collapseTrigger:hover {
  background: var(--color-bg-hover);
}

.repeater-collapseTrigger[data-state="open"] .repeater-collapseIcon {
  transform: rotate(180deg);
}

.repeater-collapseIcon {
  transition: transform 0.2s ease;
}

.repeater-collapsePanel {
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg);
}

.repeater-collapseContent {
  padding: var(--space-12);
}





/* ==========================================
   BlockNote
   ========================================== */

/* Fixes the 62.5% html font-size issue for Mantine (BlockNote UI dependency).
   Since 1rem = 10px, scaling Mantine by 1.6 makes 1rem = 16px internally for its components,
   fixing all toolbars, menus, tooltips, and font sizes globally. */
html, :root, .bn-container, .bn-mantine, .mantine-Menu-dropdown, .mantine-Popover-dropdown {
  --mantine-scale: 1.6 !important;
}

.bn-container {
  font-family: var(--font-sans) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--fs-16) !important;
}

/* Toolbar Integration with Panelis Theme */
.bn-mantine .bn-toolbar {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-default) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: var(--space-4) !important;
  gap: 2px !important;
}

/* Dropdowns (Portal elements) */
.mantine-Menu-dropdown, .mantine-Popover-dropdown {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-default) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
  padding: var(--space-4) !important;
}

.mantine-Menu-item {
  border-radius: var(--radius-default) !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-sans) !important;
  padding: var(--space-4) var(--space-8) !important;
  font-size: var(--fs-13) !important;
}

.mantine-Menu-item:hover,
.mantine-Menu-item[data-hovered] {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

/* Buttons inside the toolbar */
.bn-mantine .bn-toolbar .mantine-Button-root,
.bn-mantine .bn-toolbar .mantine-ActionIcon-root {
  border-radius: var(--radius-default) !important;
  color: var(--color-text-secondary) !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

.bn-mantine .bn-toolbar .mantine-Button-root:hover,
.bn-mantine .bn-toolbar .mantine-ActionIcon-root:hover {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

.bn-mantine .bn-toolbar .mantine-Button-root[data-selected="true"],
.bn-mantine .bn-toolbar .mantine-ActionIcon-root[data-selected="true"] {
  background-color: var(--color-accent-muted) !important;
  color: var(--color-accent-hover) !important;
}

/* Tooltips BlockNote / Mantine — mesma superfície do painel (evita fundos claros tipo “white”) */
.bn-mantine .bn-tooltip {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-default) !important;
  box-shadow: var(--shadow-md) !important;
}

.bn-mantine .bn-toolbar .bn-tooltip,
.bn-mantine .bn-toolbar .mantine-Tooltip-tooltip {
  font-size: var(--fs-10) !important;
}

.bn-mantine .bn-toolbar .mantine-Tooltip-tooltip .bn-tooltip {
  font-size: var(--fs-10) !important;
}

/* Tooltips Mantine sem filho .bn-tooltip (texto direto): evita fundo transparente/claro herdado */
.bn-mantine .mantine-Tooltip-tooltip:not(:has(.bn-tooltip)) {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-default) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--space-4) var(--space-10) !important;
}

.bn-mantine .bn-toolbar .mantine-Tooltip-tooltip:not(:has(.bn-tooltip)) {
  font-size: var(--fs-10) !important;
}

/* BlockNote: reforço quando `data-color-scheme="dark"` (tema escuro nativo + tokens --bn-* no container) */
.bn-container[data-color-scheme="dark"].bn-mantine .bn-toolbar {
  box-shadow: var(--shadow-md) !important;
}

.bn-container[data-color-scheme="dark"] .bn-inline-content:has(> .ProseMirror-trailingBreak)::before {
  color: var(--color-text-disabled) !important;
}

.bn-container[data-color-scheme="dark"] .bn-editor .tiptap,
.bn-container[data-color-scheme="dark"] .bn-editor .ProseMirror {
  color: var(--color-text-primary);
}

.bn-container[data-color-scheme="dark"] .tiptap ::selection,
.bn-container[data-color-scheme="dark"] .ProseMirror ::selection {
  background: color-mix(in srgb, var(--color-accent) 32%, transparent);
}

.bn-container[data-color-scheme="dark"] .bn-editor a {
  color: var(--color-accent);
}

.bn-container[data-color-scheme="dark"] .mantine-TextInput-input,
.bn-container[data-color-scheme="dark"] .mantine-Textarea-input {
  color: var(--color-text-primary) !important;
}

/* Custom Alert Block styles */
.bn-alert-block {
  padding: var(--space-16);
  border-radius: var(--radius-default);
  margin: var(--space-8) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  border-left: 4px solid;
}

.bn-alert-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.bn-alert-content {
  flex: 1;
  font-size: var(--fs-16);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.bn-alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left-color: #f59e0b;
}
.bn-alert-warning .bn-alert-icon {
  color: #f59e0b;
}

.bn-alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  border-left-color: #3b82f6;
}
.bn-alert-info .bn-alert-icon {
  color: #3b82f6;
}

.bn-alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  border-left-color: #22c55e;
}
.bn-alert-success .bn-alert-icon {
  color: #22c55e;
}

.bn-alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-left-color: #ef4444;
}

/* DataTable Extensoes */
.panel-dataTableEmptyCell {
  padding: var(--space-8);
  text-align: center;
}
.panel-dataTablePagination {
  display: flex;
  justify-content: center;
  padding: var(--space-4);
}

.bn-alert-danger .bn-alert-icon {
  color: #ef4444;
}

/* ==========================================
   login 
   ========================================== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: var(--color-bg);
}

.login-card {
  width: 100%;
  max-width: 24rem;
  padding: var(--space-24);
  border-radius: var(--radius-default);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

.login-title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-18);
  font-weight: var(--font-weight-semibold);
}

.login-sub {
  margin: 0 0 var(--space-20);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.login-field {
  margin-bottom: var(--space-16);
}

.login-label {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--color-text-primary);
}

.login-input {
  width: 100%;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.login-input::placeholder {
  color: var(--color-text-disabled);
}

.login-input:hover {
  border-color: var(--color-text-disabled);
}

.login-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.login-error {
  margin: 0 0 var(--space-16);
  padding: var(--space-12);
  border-radius: var(--radius-default);
  background: var(--color-danger-muted);
  color: var(--color-danger);
  font-size: var(--fs-13);
}

.login-toastError {
  position: absolute;
  top: var(--space-16);
  max-width: 24rem;
}

.login-submit {
  width: 100%;
}



.login-hint {
  margin: var(--space-16) 0 0;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* =========================================================
   Login — OTP + fluxo em 2 passos
   ========================================================= */
.login-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.login-otpHeader {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  padding: var(--space-12) var(--space-14);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-default);
  color: var(--color-text-primary);
}

.login-otpHeader svg {
  color: var(--color-accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.login-otpTitle {
  margin: 0 0 2px;
  font-size: var(--fs-14);
  font-weight: 600;
}

.login-switchMethod {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: color 0.15s ease;
}

.login-switchMethod:hover {
  color: var(--color-text-primary);
}

/* =========================================================
   OtpInput — 6 dígitos
   ========================================================= */
.otp-input {
  display: flex;
  gap: var(--space-8);
  justify-content: space-between;
}

.otp-input input {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1 / 1;
  max-width: 3.25rem;
  text-align: center;
  font-size: var(--fs-20);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-default);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.otp-input input:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

.otp-input input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.otp-input input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ==========================================
   page 
   ========================================== */
.page-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

.page-card {
  width: 100%;
  max-width: 28rem;
  padding: var(--space-24);
  border-radius: var(--radius-default);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
}

.page-title {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-18);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.page-lead {
  margin: 0 0 var(--space-20);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}


/* ==========================================
   panel-layout shell
   ========================================== */
.panel-layoutRoot {
  display: grid;
  grid-template-columns: 28rem 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-layoutRootCollapsed {
  grid-template-columns: 6.4rem 1fr;
}

.panel-layoutSidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-20) var(--space-12);
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border-subtle);
  box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.05);
  z-index: 10;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  overflow-y: auto;
}

.panel-layoutSidebarHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-24);
  padding: 0 var(--space-8);
  height: 2rem;
  overflow: hidden;
}

.panel-layoutBrand {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.panel-layoutBrandCollapsed {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 800;
  color: var(--color-accent);
  display: flex;
  justify-content: center;
  width: 100%;
}

.panel-layoutCollapseBtn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  border-radius: var(--radius-default);
  transition: color 0.2s ease, background 0.2s ease;
}

.panel-layoutCollapseBtn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-muted);
}

.panel-layoutCollapseIcon {
  width: 18px;
  height: 18px;
}

.panel-layoutNav {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex: 1;
}

.panel-layoutNavSection {
  margin-top: var(--space-16);
  margin-bottom: var(--space-8);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-disabled);
  padding: 0 var(--space-12);
  white-space: nowrap;
}

.panel-layoutNavSectionDivider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-16) var(--space-12) var(--space-8);
}

.panel-layoutNavLink {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-default);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}

.panel-layoutNavLinkCollapsed {
  justify-content: center;
  padding: var(--space-8);
}

.panel-layoutNavIcon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-disabled);
  transition: color 0.2s ease;
}

.panel-layoutNavLabel {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.panel-layoutNavLink:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.panel-layoutNavLink:hover .panel-layoutNavIcon {
  color: var(--color-text-primary);
}

.panel-layoutNavLinkActive {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

.panel-layoutNavLinkActive .panel-layoutNavIcon {
  color: var(--color-accent-hover);
}

.panel-layoutNavLinkAction {
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px dashed var(--color-border-strong);
}

.panel-layoutNavLinkAction:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-accent);
}

.panel-layoutMainCol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.panel-layoutTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg);
}

.panel-layoutUserMeta {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.panel-layoutUserMeta strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.panel-layoutMain {
  flex: 1;
  min-height: 0;
  padding: var(--space-24);
  overflow: auto;
  max-width: 110rem;
  width: 100%;
  margin: 0 auto;
}

.panel-immersiveMain {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.panel-immersiveTitlebar {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex: 0 0 auto;
}

.panel-immersiveTitlebarLeft {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  min-height: 3.6rem;
}

.theme-panel-titlebarActions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.panel-page {
  width: 100%;
}

.panel-layoutLogoutForm {
  margin: 0;
}

/* ==========================================
   Sidebar footer + UserMenu
   ========================================== */
.panel-layoutSidebarFooter {
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-subtle);
}

.panel-userMenuTrigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8) var(--space-10);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-default);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-width: 0;
}

.panel-userMenuTrigger:hover,
.panel-userMenuTrigger[data-popup-open] {
  background: var(--color-bg-hover);
  border-color: var(--color-border-subtle);
}

.panel-userMenuTrigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.panel-userMenuTrigger--collapsed {
  justify-content: center;
  padding: var(--space-6);
}

.panel-userMenuAvatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-muted);
  color: var(--color-accent);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}

.panel-userMenuAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.panel-userMenuAvatarInitials {
  user-select: none;
}

.panel-userMenuAvatar--lg {
  width: 4.4rem;
  height: 4.4rem;
  font-size: var(--fs-15);
}

.panel-userMenuMeta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.panel-userMenuName {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}

.panel-userMenuRole {
  font-size: var(--fs-11);
  color: var(--color-text-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Popup */
.panel-userMenuPopup {
  min-width: 26rem;
  max-width: 30rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.25);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  z-index: 100;
}

.panel-userMenuHeader {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10);
}

.panel-userMenuHeaderInfo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.panel-userMenuHeaderName {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-userMenuHeaderEmail {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-userMenuBadge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--space-4);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-10);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.panel-userMenuBadge--admin {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border-color: var(--color-accent-muted);
}

.panel-userMenuBadge--agent {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}

.panel-userMenuDivider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-4) 0;
}

.panel-userMenuItems {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.panel-userMenuItem {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8) var(--space-10);
  background: transparent;
  border: none;
  border-radius: var(--radius-default);
  color: var(--color-text-primary);
  font-size: var(--fs-13);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.panel-userMenuItem:hover {
  background: var(--color-bg-hover);
}

.panel-userMenuItem:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.panel-userMenuItem--danger {
  color: var(--color-danger);
}

.panel-userMenuItem--danger:hover {
  background: var(--color-danger-muted);
}

.panel-userMenuLogoutForm {
  margin: 0;
}

/* ==========================================
   Action menu popup (dropdown de ações)
   ========================================== */
.panel-actionMenuPopup {
  min-width: 18rem;
  max-width: 24rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.25);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 100;
}

.panel-actionMenuItem {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-12);
  background: transparent;
  border: none;
  border-radius: var(--radius-default);
  color: var(--color-text-primary);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.panel-actionMenuItem:hover {
  background: var(--color-bg-hover);
}

.panel-actionMenuItem:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.panel-actionMenuItem > svg {
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.panel-actionMenuItemBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.panel-actionMenuItemTitle {
  font-weight: 500;
  color: var(--color-text-primary);
}

.panel-actionMenuItemDesc {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ==========================================
   Página /admin/perfil
   ========================================== */
.perfil-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.perfil-card {
  padding: var(--space-24);
  border-radius: var(--radius-default);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.perfil-cardHeader {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border-subtle);
}

.perfil-cardTitle {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--color-text-primary);
}

.perfil-cardDesc {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 56rem;
}

.perfil-avatarRow {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12);
  background: var(--color-bg-muted);
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-subtle);
}

.perfil-avatarPreview {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-muted);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-18);
  font-weight: 600;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  flex: 0 0 auto;
}

.perfil-avatarPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perfil-avatarInfo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.perfil-avatarInfo strong {
  font-size: var(--fs-14);
  color: var(--color-text-primary);
  font-weight: 600;
}

.perfil-avatarInfo span {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.perfil-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

@media (max-width: 720px) {
  .perfil-grid {
    grid-template-columns: 1fr;
  }
}

.perfil-checkList {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.perfil-checkRow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-default);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.perfil-checkRow:hover {
  border-color: var(--color-border-strong);
}

.perfil-checkRow input[type="checkbox"] {
  margin-top: 0.3rem;
  accent-color: var(--color-accent);
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
}

.perfil-checkRow span {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.perfil-checkRow strong {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--color-text-primary);
}

.perfil-checkRow small {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.perfil-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
}

.perfil-feedback {
  margin: 0;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-default);
  font-size: var(--fs-13);
  font-weight: 500;
  border: 1px solid transparent;
}

.perfil-feedback--ok {
  background: rgba(74, 222, 128, 0.1);
  color: var(--color-success);
  border-color: rgba(74, 222, 128, 0.25);
}

.perfil-feedback--err {
  background: var(--color-danger-muted);
  color: var(--color-danger);
  border-color: var(--color-danger-muted);
}

/* ==========================================
   Utilitários de tabela (cells empilhadas e badges)
   ========================================== */
.panel-cellStack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.panel-cellSubtle {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.panel-badgeDanger {
  background: var(--color-danger-muted);
  color: var(--color-danger);
}


/* ==========================================
   RichTextEditor
   ========================================== */
.richtexteditor-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  /* overflow: hidden removed — would clip dropdown menus that overflow the toolbar */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
}

.richtexteditor-wrap:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.richtexteditor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-8);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: sticky;
  top: 0;
  /* z-index must be high enough for dropdowns to render above the editor */
  z-index: 20;
}

.richtexteditor-hiddenInput {
  display: none;
}

.richtexteditor-toolbarGroup {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: var(--space-8);
  border-right: 1px solid var(--color-border-subtle);
}

.richtexteditor-toolbarGroup:last-child {
  border-right: none;
  padding-right: 0;
}

.richtexteditor-toolBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-32);
  padding: var(--space-4);
  height: var(--space-32);
  border-radius: var(--radius-default);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.richtexteditor-toolBtn:hover {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

.richtexteditor-toolBtn[data-active="true"] {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

.richtexteditor-toolBtn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

.richtexteditor-toolbarIcon {
  width: var(--space-16);
  height: var(--space-16);
}

/* Dropdowns */
.richtexteditor-dropdown {
  position: relative;
}

.richtexteditor-dropdownMenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 9rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-default);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.richtexteditor-dropdownChevron {
  width: 1.3rem;
  height: 1.3rem;
}

.richtexteditor-dropdownItem {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-8) var(--space-8);
  background: transparent;
  border: none;
  border-radius: var(--radius-default);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  gap: var(--space-8);
}

.richtexteditor-dropdownItem:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.richtexteditor-dropdownItem[data-active="true"] {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

.richtexteditor-dropdownItemIcon {
  gap: var(--space-8);
}

/* Heading dropdown item layout */
.richtexteditor-dropdownHeadingLabel {
  font-weight: var(--font-weight-semibold);
  min-width: 1.75rem;
  color: inherit;
}

.richtexteditor-dropdownHeadingTitle {
  color: var(--color-text-muted);
  font-size: var(--fs-12);
}

.richtexteditor-dropdownItem[data-active="true"] .richtexteditor-dropdownHeadingTitle {
  color: var(--color-accent);
  opacity: 0.8;
}

/* Color picker */
.richtexteditor-colorTrigger {
  width: var(--space-32);
  height: var(--space-32);
  padding: 0;
}

.richtexteditor-colorIconWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.richtexteditor-colorBar {
  display: block;
  width: 14px;
  height: 3px;
  border-radius: 1px;
}

.richtexteditor-colorMenu {
  min-width: 11rem;
  gap: var(--space-8);
  padding: var(--space-8);
}

.richtexteditor-colorSwatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.richtexteditor-colorSwatch {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.richtexteditor-colorSwatch:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.richtexteditor-colorSwatch-bg {
  background: currentColor;
}

.richtexteditor-color-000000 { color: #000000; }
.richtexteditor-color-ffffff { color: #ffffff; }
.richtexteditor-color-6b7280 { color: #6b7280; }
.richtexteditor-color-ef4444 { color: #ef4444; }
.richtexteditor-color-f97316 { color: #f97316; }
.richtexteditor-color-eab308 { color: #eab308; }
.richtexteditor-color-22c55e { color: #22c55e; }
.richtexteditor-color-3b82f6 { color: #3b82f6; }
.richtexteditor-color-8b5cf6 { color: #8b5cf6; }
.richtexteditor-color-ec4899 { color: #ec4899; }

.richtexteditor-colorCustomRow {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.richtexteditor-colorInput {
  width: 28px;
  height: 28px;
  padding: 2px;
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-subtle);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.richtexteditor-colorInputLabel {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.richtexteditor-colorClear {
  width: 100%;
  padding: var(--space-4) var(--space-8);
  background: transparent;
  border: none;
  border-radius: var(--radius-default);
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.richtexteditor-colorClear:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* Editor area */
.richtexteditor-editorWrap {
  min-height: 12rem;
  border-radius: 0 0 var(--radius-default) var(--radius-default);
  overflow: hidden;
}

.richtexteditor-prose {
  min-height: 12rem;
  padding: 0 var(--space-16);
  font-size: var(--fs-13);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

.richtexteditor-prose:focus {
  outline: none;
}

/* Tiptap / ProseMirror */
.richtexteditor-prose :global(.richtexteditor-tiptap p.richtexteditor-is-editor-empty:first-child::before) {
  color: var(--color-text-disabled);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.richtexteditor-prose :global(.richtexteditor-tiptap h1) {
  margin: var(--space-20) 0 var(--space-8);
  font-size: var(--fs-20);
  font-weight: var(--font-weight-bold);
}

.richtexteditor-prose :global(.richtexteditor-tiptap h2) {
  margin: var(--space-16) 0 var(--space-8);
  font-size: var(--fs-18);
  font-weight: var(--font-weight-semibold);
}

.richtexteditor-prose :global(.richtexteditor-tiptap h3) {
  margin: var(--space-12) 0 var(--space-8);
  font-size: var(--fs-16);
  font-weight: var(--font-weight-semibold);
}

.richtexteditor-prose :global(.richtexteditor-tiptap p) {
  margin: 0 0 var(--space-12);
}

.richtexteditor-prose :global(.richtexteditor-tiptap ul),
.richtexteditor-prose :global(.richtexteditor-tiptap ol) {
  margin: 0 0 var(--space-12);
  padding-left: var(--space-20);
}

.richtexteditor-prose :global(.richtexteditor-tiptap blockquote) {
  margin: 0 0 var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-left: var(--space-4) solid var(--color-accent);
  background: var(--color-accent-muted);
  border-radius: 0 var(--radius-default) var(--radius-default) 0;
  color: var(--color-text-secondary);
}

.richtexteditor-prose :global(.richtexteditor-tiptap pre) {
  margin: 0 0 var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-default);
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  overflow-x: auto;
}

.richtexteditor-prose :global(.richtexteditor-tiptap img) {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-default);
}


/* ==========================================
   Button 
   ========================================== */
.button-root{
  cursor: pointer;
  /* Botões devem sempre centralizar o conteúdo (texto/ícone). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.button-root:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.button-root:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button-primary {
  color: var(--color-accent-foreground);
  background-color: var(--color-accent);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-primary:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
  box-shadow: 0 4px 6px -1px var(--shadow-color, var(--shadow-color, rgba(0,0,0,0.1))), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.button-primary:active:not(:disabled) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-secondary {
  color: var(--color-text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-secondary:hover:not(:disabled) {
  background-color: var(--color-bg-muted);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.button-danger {
  color: var(--color-danger);
  border-color: var(
  --color-border-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-danger:hover:not(:disabled) {
  background-color: var(--color-danger-muted);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.button-outline {
  color: var(--color-text-primary);
  background-color: transparent;
  border-color: var(--color-border-strong);
}


.button-ghost {
  min-height: 3.2rem;
  padding: 0 var(--space-10);
  font-size: var(--fs-13);
  font-family: var(--font-sans);
  border-radius: var(--radius-lg);
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
  transition: background 0.12s, color 0.12s;
}

.button-ghost:hover:not(:disabled) {
  background-color: var(--color-bg-hover);
  color: var(--color-text-primary);
}


/* Variante exclusiva do sistema de Atendimento (botão Enviar) */
.button-atend {
  color: var(--atend-action-fg);
  background-color: var(--atend-action-bg);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-atend:hover:not(:disabled) {
  background-color: var(--atend-action-bg-hover);
  box-shadow: var(--shadow-md);
}

.button-atend:active:not(:disabled) {
  box-shadow: var(--shadow-sm);
}


/* ==========================================
   Checkbox 
   ========================================== */
.checkbox-root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  transition: all 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.checkbox-root[data-state="checked"],
.checkbox-root[data-checked] {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.checkbox-root:hover {
  border-color: var(--color-text-disabled);
}

.checkbox-root:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-bg-subtle);
}

.checkbox-root[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.checkbox-indicator svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
}

.checkbox-indicator[data-state="unchecked"],
.checkbox-root:not([data-state="checked"]):not([data-checked]) .checkbox-indicator {
  display: none;
}

.checkbox-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.checkbox-labelWrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  user-select: none;
}

.checkbox-labelText {
  font-size: var(--fs-13);
  color: var(--color-text-primary);
}

.checkbox-labelWrapper[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ==========================================
   DragAndDropUpload 
   ========================================== */
.draganddropupload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-default);
  background-color: var(--color-bg-elevated);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 16rem;
}

.draganddropupload-dropzone:hover {
  border-color: var(--color-accent);
  background-color: var(--color-bg-muted);
}

.draganddropupload-dragging {
  border-color: var(--color-accent);
  background-color: var(--color-accent-muted);
}

.draganddropupload-uploading {
  opacity: 0.7;
  cursor: not-allowed;
}

.draganddropupload-hiddenInput {
  display: none;
}

.draganddropupload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  color: var(--color-text-secondary);
}

.draganddropupload-icon {
  width: 3.2rem;
  height: 3.2rem;
  color: var(--color-text-disabled);
}

.draganddropupload-dropzone:hover .draganddropupload-icon {
  color: var(--color-accent);
}

.draganddropupload-dragging .draganddropupload-icon {
  color: var(--color-accent);
  transform: scale(1.1);
}

.draganddropupload-text {
  font-size: var(--fs-13);
  font-weight: 500;
  text-align: center;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.draganddropupload-iconSpin {
  animation: pulse 1.5s ease-in-out infinite;
  color: var(--color-accent);
}


/* ==========================================
   Field 
   ========================================== */
.field-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.field-label {
  font-size: var(--fs-12);
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-text-secondary);
  user-select: none;
  letter-spacing: 0.02em;
}

.field-labelRight {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
}

.field-labelRight .select-trigger {
  width: auto;
  min-width: 14rem;
}

.field-labelRight .chatbot-flow-variableInsert .select-trigger.chatbot-flow-variableInsertTrigger {
  min-width: auto;
}

.chatbot-flow-variableInsert .control-wrap {
  width: auto;
}

.chatbot-flow-variableInsert .chatbot-flow-variableInsertTrigger.select-trigger.ui-control--sm.control-hasStartIcon {
  padding: 0 !important;
  width: 2.8rem;
  min-width: 2.8rem;
  justify-content: center;
  gap: 0;
}

.chatbot-flow-variableInsert .control-wrap .control-icon--start {
  left: 50%;
  transform: translate(-50%, -50%);
}

.chatbot-flow-variableInsert .chatbot-flow-variableInsertTrigger[data-placeholder] .select-valueWrapper {
  flex: 0 0 auto;
  min-width: 0;
  width: 0;
  overflow: hidden;
}

.field-control {
  display: flex;
  flex-direction: column;
}

.field-description {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.field-error {
  font-size: var(--fs-12);
  color: var(--color-danger);
  margin-top: 0.2rem;
}

/* ==========================================
   Input
   ========================================== */
.input-root {
  width: 100%;
}

.input-root::placeholder {
  color: var(--color-text-disabled);
}

.input-root:hover {
  border-color: var(--color-text-disabled);
}

.input-root:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.input-root[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-muted);
}

/* ==========================================
   LinkInput
   ========================================== */
.link-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.link-input-icon {
  position: absolute;
  left: var(--space-12);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 1;
  text-decoration: none;
}

.link-input-icon:not(.link-input-icon-disabled):hover {
  color: var(--color-accent);
  cursor: pointer;
}

.link-input-icon-disabled {
  opacity: 0.5;
  cursor: default;
}

.link-input-field {
  padding-left: 4rem !important; /* space for icon */
}

/* ==========================================
   PanelCard 
   ========================================== */
.panelcard-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24, 24px);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-20);
}

.panelcard-pattern {
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--color-border-subtle) 1px, transparent 1px);
  background-size: 20px 20px;
}

.panelcard-noPadding {
  padding: 0;
}


/* ==========================================
   Select 
   ========================================== */
.select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.select-valueWrapper {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.select-placeholder {
  color: var(--color-text-disabled);
}

.select-trigger:hover {
  border-color: var(--color-text-disabled);
}

.select-trigger:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.select-trigger[data-placeholder] {
  color: var(--color-text-disabled);
}

.select-iconSm {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--color-text-secondary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.select-iconWrapper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: var(--space-4);
}

.select-trigger[data-popup-open] .select-iconWrapper .select-iconSm {
  transform: rotate(180deg);
}

.select-positioner {
  z-index: 220;
}

.select-popup {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-default);
  box-shadow: 0 10px 15px -3px var(--shadow-color, var(--shadow-color, rgba(0,0,0,0.1))), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: var(--reference-width, 200px);
  animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: var(--transform-origin);
}

.select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-default);
  font-size: var(--fs-13);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  outline: none;
}

.select-item[data-highlighted] {
  background: var(--color-bg-muted);
}

.select-item[data-selected] {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
  font-weight: var(--font-weight-medium);
}

.select-itemMain {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  flex: 1;
}

.select-itemIconWrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--color-text-secondary);
}

.select-itemChannelIcon {
  width: 1.25rem;
  height: 1.25rem;
}

.select-indicator {
  color: var(--color-accent);
  display: flex;
  align-items: center;
}

.select-popup.select-popup--compact {
  gap: 0.15rem;
  min-width: min(22rem, 94vw);
}

.select-popup.select-popup--compact .select-item {
  padding: var(--space-6) var(--space-8);
  font-size: var(--fs-12);
  line-height: var(--leading-tight);
}

.select-popup.select-popup--compact .select-iconSm {
  width: 1.2rem;
  height: 1.2rem;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* ==========================================
   SlugInput 
   ========================================== */
.sluginput-viewContainer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-gray);
  font-size: var(--fs-11);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
  line-height: 1.2;
}

.sluginput-viewContainer:hover {
  background-color: var(--bg-hover);
  color: var(--color-text-primary);
}

.sluginput-linkText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sluginput-slugValue {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}

.sluginput-viewContainer:hover .sluginput-slugValue {
  text-decoration-color: var(--primary-base);
}

.sluginput-editBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: var(--radius-default);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
}

.sluginput-viewContainer:hover .sluginput-editBtn {
  opacity: 1;
  background-color: var(--bg-active);
  color: var(--color-text-primary);
}

.sluginput-editContainer {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--fs-11);
  margin-top: 0.5rem;
}

.sluginput-input {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-default);
  padding: var(--space-8);
  max-width: 150px;
}

.sluginput-input::placeholder {
  color: var(--color-text-muted);
}

.sluginput-actionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: var(--radius-default);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sluginput-saveBtn {
  color: var(--success-base);
}
.sluginput-saveBtn:hover {
  background-color: var(--success-subtle);
}

.sluginput-cancelBtn {
  color: var(--danger-base);
}
.sluginput-cancelBtn:hover {
  background-color: var(--danger-subtle);
}

/* ==========================================
   StatusSelect 
   ========================================== */
.statusselect-statusOption {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.statusselect-dot {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.statusselect-published {
  background-color: var(--color-success, #22c55e);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  animation: pulse-green 2s infinite;
}

.statusselect-draft {
  background-color: var(--color-danger, #ef4444);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  animation: pulse-red 2s infinite;
}

.statusselect-active {
  background-color: var(--color-success, #22c55e);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  animation: pulse-green 2s infinite;
}

.statusselect-suspended {
  background-color: var(--color-danger, #ef4444);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  animation: pulse-red 2s infinite;
}

.statusselect-invited {
  background-color: var(--color-warning, #f59e0b);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  animation: pulse-amber 2s infinite;
}

@keyframes pulse-amber {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* ==========================================
   Switch 
   ========================================== */
.switch-root {
  all: unset;
  box-sizing: border-box;
  width: 44px;
  height: var(--space-24);
  background-color: var(--color-bg-muted);
  border-radius: 9999px;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
  transition: background-color 0.2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.switch-root:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.switch-root[data-state="checked"],
.switch-root[data-checked] {
  background-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* Estado desligado: trilho e “knob” visíveis no tema escuro */
.switch-root[data-state="unchecked"],
.switch-root[data-unchecked],
.switch-root[aria-checked="false"] {
  background-color: var(--color-bg-elevated);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.switch-root[data-state="unchecked"] .switch-thumb,
.switch-root[data-unchecked] .switch-thumb,
.switch-root[aria-checked="false"] .switch-thumb {
  background-color: var(--color-bg-muted);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.switch-root[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch-thumb {
  display: block;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 9999px;
  box-shadow: 0 2px 4px var(--shadow-color, var(--shadow-color, rgba(0,0,0,0.1)));
  transition: transform 0.2s;
  transform: translateX(2px);
  will-change: transform;
}

.switch-root[data-state="checked"] .switch-thumb,
.switch-root[data-checked] .switch-thumb {
  transform: translateX(22px);
  background-color: #fff;
  box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.15));
}

.switch-small {
  width: 32px;
  height: 18px;
}

.switch-small .switch-thumb {
  width: 14px;
  height: 14px;
  transform: translateX(2px);
}

.switch-small[data-state="checked"] .switch-thumb,
.switch-small[data-checked] .switch-thumb {
  transform: translateX(16px);
  background-color: #fff;
  box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.15));
}

.switch-medium {
  width: 38px;
  height: 22px;
}

.switch-medium .switch-thumb {
  width: 18px;
  height: 18px;
  transform: translateX(2px);
}

.switch-medium[data-state="checked"] .switch-thumb,
.switch-medium[data-checked] .switch-thumb {
  transform: translateX(18px);
  background-color: #fff;
  box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.15));
}

.panel-tabLabel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ==========================================
   Variante "Tabs grudadas em um card" (abas tipo pasta).
   Uso: <Tabs className="panel-tabsCard" ... /> com
   cada Tabs.Panel envolvendo seu próprio .panel-card.
   ========================================== */
.panel-tabsCard .tabs-list {
  border-bottom: none;
  padding: 0;
  gap: var(--space-2);
  margin: 0;
  margin-bottom: -1px; /* sobrepõe a borda superior do card */
  overflow: visible;
  position: relative;
  z-index: 2;
}

.panel-tabsCard .tabs-tab {
  margin: 0;
  padding: var(--space-10) var(--space-16);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-default) var(--radius-default) 0 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
  font-weight: var(--font-weight-medium);
  position: relative;
  top: 1px; /* alinha o "dente" exatamente sobre a borda do card */
}

.panel-tabsCard .tabs-tab:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.panel-tabsCard .tabs-tab[data-state="active"],
.panel-tabsCard .tabs-tab[data-selected],
.panel-tabsCard .tabs-tab[aria-selected="true"] {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
  /* "apaga" 1px da borda do card abaixo, fundindo a aba ao card */
  box-shadow: 0 1px 0 0 var(--color-bg-elevated);
}

.panel-tabsCard .tabs-indicator {
  display: none;
}

.panel-tabsCard > .tabs-panel > .panel-card,
.panel-tabsCard > .tabs-panel > .tabs-panelContent > .panel-card {
  margin-top: 0;
  padding: var(--space-16) var(--space-20);
}

.panel-tabBadge,
.manual-treeArticleCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-muted);
  color: var(--color-accent);
  font-size: var(--fs-10);
  font-weight: 600;
  border-radius: var(--radius-full);
  min-width: 2rem;
  height: 1.3rem;
  padding: 0 0.4rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* ==========================================
   Tabs 
   ========================================== */
.tabs-root {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tabs-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  border-bottom: 1px solid var(--color-border-subtle);
  position: relative;
}

.tabs-tab {
  all: unset;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: var(--space-8) var(--space-12);
  margin: var(--space-10) 0 var(--space-10) var(--space-10);
  font-size: var(--fs-13);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-default);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.tabs-tab[data-state="active"], .tabs-tab[data-selected], .tabs-tab[aria-selected="true"], .tabs-tab:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-muted);
}

.tabs-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.tabs-indicator {
  position: absolute;
  top: var(--active-tab-top);
  left: var(--active-tab-left);
  width: var(--active-tab-width);
  height: var(--active-tab-height);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-default) var(--radius-default) 0 0;
  transition: all 0.2s ease-out;
  z-index: 0;
}

.tabs-panel {
  outline: none;
  animation: fadeIn 0.3s ease;
}

.tabs-panelContent {
  /* Wrapper padrão de conteúdo das abas. Padding por contexto (ex.: tema). */
  width: 100%;
}

/* Tema: o conteúdo das abas precisa ficar englobado e com respiro dentro do card */
.theme-details-leftCol .tabs-panelContent {
  padding: var(--space-16);
}

.tabs-panel:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.datepicker-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.datepicker-icon {
  color: var(--color-text-secondary);
}

.datepicker-empty {
  color: var(--color-text-secondary);
}

.datepicker-popup {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: var(--space-12);
  width: 250px;
  z-index: 99999;
  transform-origin: top center;
  animation: scaleIn 0.2s ease;
  font-family: var(--font-sans);
}

.datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.datepicker-monthLabel {
  font-weight: 600;
  font-size: var(--fs-13);
  text-transform: capitalize;
  color: var(--color-text-primary);
}

.datepicker-navBtn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.datepicker-navBtn:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.datepicker-weekday {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}

.datepicker-day {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-13);
  font-family: inherit;
  color: var(--color-text-primary);
  transition: all 0.2s;
}

.datepicker-day:not(.empty):hover {
  background: var(--color-bg-muted);
}

.datepicker-day.selected {
  font-weight: 600;
  border-color: transparent;
  box-shadow: none;
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

.datepicker-day.empty {
  cursor: default;
}

/* ==========================================
   Textarea 
   ========================================== */
.textarea-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 8rem;
  padding: var(--space-12);
  resize: vertical;
}

.textarea-textarea:hover {
  border-color: var(--color-text-disabled);
}

.textarea-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.textarea-textarea::placeholder {
  color: var(--color-text-disabled);
}

.textarea-textarea:disabled,
.textarea-textarea[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-bg-muted);
}

/* ==========================================
   CodeEditor (CodeMirror — shell no painel)
   ========================================== */
.code-editor-root {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--color-code-surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 0.1rem 0.4rem var(--color-code-surface-shadow-inset);
  background-color: var(--color-code-surface-bg);
}

.code-editor-root:focus-within {
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 2px var(--color-code-focus-shadow),
    inset 0 0.1rem 0.4rem var(--color-code-surface-shadow-inset);
}

.code-editor-root .cm-theme-dark {
  width: 100%;
}

.code-editor-root .cm-editor {
  min-height: 28rem;
}

.code-editor-root .cm-editor.cm-focused {
  outline: none;
}

.code-editor-loading {
  box-sizing: border-box;
  display: flex;
  min-height: 28rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-muted);
}

/* ==========================================
   Toast 
   ========================================== */
.toast-viewport {
  position: fixed;
  z-index: 2147483647;
  width: 250px;
  margin: 0 auto;
  bottom: 1rem;
  right: 1rem;
  left: auto;
  top: auto;
  outline: none;
  list-style: none;
}

@media (min-width: 500px) {
  .toast-viewport {
    bottom: 2rem;
    right: 2rem;
    width: 300px;
  }
}

.toast-root {
  --gap: 0.75rem;
  --peek: 0.75rem;
  --scale: calc(max(0, 1 - (var(--toast-index) * 0.1)));
  --shrink: calc(1 - var(--scale));
  --height: var(--toast-frontmost-height, var(--toast-height));
  --offset-y: calc(
    var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
      var(--toast-swipe-movement-y)
  );
  position: absolute;
  right: 0;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-default);
  box-shadow: 0 10px 15px -3px var(--shadow-color, var(--shadow-color, rgba(0,0,0,0.1))), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: var(--space-16);
  width: 100%;
  background-clip: padding-box;
  bottom: 0;
  left: auto;
  margin-right: 0;
  user-select: none;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s,
    height 0.15s;
  cursor: default;
  z-index: calc(1000 - var(--toast-index));
  height: var(--height);
  transform-origin: bottom center;
  transform: translateX(var(--toast-swipe-movement-x))
    translateY(
      calc(
        var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -
          (var(--shrink) * var(--height))
      )
    )
    scale(var(--scale));
  border: 1px solid var(--color-border-subtle);
}

.toast-root[data-expanded] {
  transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
  height: var(--toast-height);
}

.toast-root[data-starting-style],
.toast-root[data-ending-style] {
  transform: translateY(150%);
}

.toast-root[data-limited] {
  opacity: 0;
}

.toast-root[data-ending-style] {
  opacity: 0;
}

.toast-root[data-ending-style][data-swipe-direction='up'] {
  transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
}
.toast-root[data-ending-style][data-swipe-direction='left'] {
  transform: translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y));
}
.toast-root[data-ending-style][data-swipe-direction='right'] {
  transform: translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y));
}
.toast-root[data-ending-style][data-swipe-direction='down'] {
  transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
}

.toast-root::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  height: calc(var(--gap) + 1px);
}

.toast-content {
  overflow: hidden;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.toast-content[data-behind] {
  opacity: 0;
}

.toast-content[data-expanded] {
  opacity: 1;
}

.toast-title {
  font-weight: 500;
  color: var(--color-text-primary);
  font-size: var(--fs-13);
  margin: 0;
}

.toast-description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
  line-height: 1.4;
}

.toast-textDanger {
  color: var(--color-danger, #ef4444);
}

.toast-textSuccess {
  color: var(--color-success, #10b981);
}

/* ==========================================
   BlockNote Overrides
   ========================================== */

/* Font standardization */
.bn-container,
.bn-editor,
.bn-editor *,
.bn-block-content,
.bn-inline-content,
.bn-menu-dropdown,
.bn-tooltip,
.bn-menu-item,
.bn-menu-item-title,
.bn-suggestion-menu,
.bn-suggestion-menu-item,
.bn-suggestion-menu-item *,
.bn-mt-suggestion-menu-item-section,
.mantine-Menu-dropdown,
.mantine-Popover-dropdown,
.mantine-Text-root {
  font-family: var(--font-sans) !important;
}

/* Dropdown standardization */
.bn-suggestion-menu,
.mantine-Menu-dropdown,
.mantine-Popover-dropdown {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  width: auto !important;
  min-width: 260px !important; /* Adjusted width */
  padding: 0.5rem !important;
}

.bn-suggestion-menu .mantine-Menu-item,
.bn-suggestion-menu-item {
  width: 100% !important;
  margin: 0 !important;
}

/* Side menu hover icons (Add block / Drag handle) */
.bn-side-menu {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-6) !important;
  margin-right: var(--space-12) !important; /* Distance from text */
}

.bn-side-menu .bn-drag-handle,
.bn-side-menu .bn-toggle-add-block-button,
.bn-side-menu .bn-button,
.bn-drag-handle,
.bn-toggle-add-block-button {
  border-radius: var(--radius-default) !important;
  width: 2.4rem!important;
  height: 2.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-secondary) !important;
  transition: all 0.2s ease !important;
}

.bn-side-menu .bn-drag-handle:hover,
.bn-side-menu .bn-toggle-add-block-button:hover,
.bn-side-menu .bn-button:hover,
.bn-drag-handle:hover,
.bn-toggle-add-block-button:hover {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

/* Compact slash menu items */
.bn-menu-item,
.bn-suggestion-menu-item,
.mantine-Menu-item {
  padding: var(--space-4) var(--space-8) !important;
  min-height: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: var(--radius-default) !important;
  margin: 0 !important;
  width: 100% !important;
}

.bn-menu-item:hover,
.bn-menu-item[data-hovered],
.bn-suggestion-menu-item:hover,
.bn-suggestion-menu-item[data-hovered="true"],
.mantine-Menu-item:hover,
.mantine-Menu-item[data-hovered] {
  background-color: var(--color-bg-muted) !important;
  color: var(--color-text-primary) !important;
}

.bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) svg {
    background-color: transparent;
    color: var(--color-text-gray);
    height: 1.8rem;
    width: 1.8rem;
}

.bn-menu-item-icon,
.bn-mt-suggestion-menu-item-section,
.mantine-Menu-itemIcon,
.bn-menu-item .mantine-Menu-itemIcon {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  flex: 0 0 20px !important;
  margin: 0 !important;
  margin-right: 12px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: var(--color-text-secondary) !important;
}

.bn-menu-item:hover .bn-menu-item-icon,
.bn-suggestion-menu-item:hover .bn-mt-suggestion-menu-item-section,
.mantine-Menu-item:hover .mantine-Menu-itemIcon {
  background: transparent !important;
  border: none !important;
  color: var(--color-text-primary) !important;
}

.bn-menu-item-icon svg,
.bn-mt-suggestion-menu-item-section svg,
.mantine-Menu-itemIcon svg {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  display: block !important;
}

.bn-menu-item-title,
.bn-mt-suggestion-menu-item-title {
  font-size: var(--fs-13) !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Manual Sidebar */
.manual-sidebarHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16);
}
.manual-sidebarHeaderLeft {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.manual-sidebarBackBtn {
  padding: var(--space-4);
}
.manual-sidebarTitle {
  font-size: var(--fs-13);
  font-weight: 600;
  margin: 0;
}
.manual-sidebarAddIcon {
  margin-right: var(--space-4);
}

/* Manual Editor */
.manual-editorMetaContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-4);
}
.manual-editorSlugInput {
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--color-border-subtle);
  color: inherit;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}
.manual-editorControls {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.manual-editorSaving {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}
.manual-editorUnsaved {
  font-size: var(--fs-12);
  color: var(--color-warning);
}
.manual-editorStatus {
  cursor: pointer;
}
.manual-editorEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-secondary);
  gap: var(--space-16);
}
.manual-editorEmptyIcon {
  width: 48px;
  height: 48px;
  opacity: 0.2;
}
.manual-editorLoading {
  padding: var(--space-16);
  color: var(--color-text-secondary);
}

.bn-menu-item .mantine-Text-root[data-size="xs"],
.bn-menu-item-subtitle,
.bn-mt-suggestion-menu-item-badge,
.bn-suggestion-menu-item-badge {
  display: none !important;
}

.bn-menu-item-title,
.bn-mt-suggestion-menu-item-title {
  font-size: var(--fs-13) !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.mantine-Menu-label,
.bn-menu-label {
  color: var(--color-text-disabled) !important;
  font-size: var(--fs-11) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: var(--space-8) var(--space-12) var(--space-4) !important;
}

.mantine-Menu-divider,
.bn-menu-divider {
  border-top: 1px solid var(--color-border-subtle) !important;
  margin: var(--space-4) 0 !important;
}


/* ==========================================
   panel 
   ========================================== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-animateFadeUp {
  animation: fadeUp 0.5s ease-out forwards;
  opacity: 0;
}

.panel-delay1 { animation-delay: 0.05s; }
.panel-delay2 { animation-delay: 0.1s; }
.panel-delay3 { animation-delay: 0.15s; }
.panel-delay4 { animation-delay: 0.2s; }
.panel-delay5 { animation-delay: 0.25s; }
.panel-delay6 { animation-delay: 0.3s; }

.panel-pageHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-24);
  flex-wrap: wrap;
  gap: var(--space-16);
}

.panel-headerLeft {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex: 1;
  min-width: 0;
}

.panel-backButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.panel-backButton:hover {
  background-color: var(--color-bg-muted);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.panel-pageTitleBlock {
  flex: 1;
  min-width: 0;
}

.panel-pageActions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-shrink: 0;
}

.panel-pageTitle {
  margin: 0;
  font-size: var(--fs-22);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.panel-pageDesc {
  margin: 0;
  font-size: var(--fs-16);
  color: var(--color-text-secondary);
  max-width: 48rem;
  line-height: var(--leading-normal);
}

.panel-filterGroup {
  display: flex;
  gap: var(--space-8);
  background: var(--color-bg-elevated);
  padding: var(--space-8);
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-subtle);
  flex-direction: column;
}

.panel-filterBtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  
  border-radius: var(--radius-default);
  font-size: var(--fs-13);
  font-weight: 500;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-filterBtn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-muted);
}

.panel-filterBtnActive {
  background: var(--color-bg);
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.panel-card {
  padding: var(--space-24);
  border-radius: var(--radius-default);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.panel-cardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-16);
}

.panel-cardTitle {
  margin: 0;
  font-size: var(--fs-11);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.panel-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.panel-stat {
  position: relative;
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-default);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 1px 3px 0 var(--shadow-color, var(--shadow-color, rgba(0,0,0,0.1))), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.panel-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--space-4);
  height: 100%;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.panel-stat:hover::before {
  opacity: 1;
}

.panel-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px var(--shadow-color, var(--shadow-color, rgba(0,0,0,0.1))), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.panel-statHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.panel-statIcon {
  color: var(--color-text-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-muted);
  border-radius: var(--radius-default);
  padding: var(--space-8);
}

.panel-pageTitleIcon {
  color: var(--color-text-disabled);
  width: var(--space-26);
  height: var(--space-26);
}

.panel-cardTitleIcon {
  color: var(--color-text-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.panel-cardHeaderLink {
  font-size: var(--fs-13);
}

.panel-endMessage {
  text-align: center;
  margin-bottom: var(--space-24);
}

.panel-statLabel {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.panel-statValue {
  margin: 0;
  font-size: var(--fs-22);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.panel-emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  text-align: center;
  background: var(--color-bg);
  border-radius: var(--radius-default);
  border: 1px dashed var(--color-border-strong);
  margin-top: var(--space-16);
}

.panel-emptyStateIcon {
  color: var(--color-text-disabled);
  margin-bottom: var(--space-12);
  background: var(--color-bg-elevated);
  padding: var(--space-12);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.panel-emptyStateTitle {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-16);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.panel-emptyStateDesc {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  max-width: 24rem;
}

.panel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}

.panel-table th,
.panel-table td {
  text-align: left;
  padding: var(--space-10);
  border-bottom: 1px solid var(--color-border-subtle);
}

.panel-table tbody tr:last-child td {
  border-bottom: none;
}

.panel-table th {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.panel-table tbody tr svg {
  width: 1.6rem;
  height: 1.6rem;
}

.panel-badge {
  display: inline-block;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  font-size: var(--fs-11);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
  user-select: none;
}

.panel-badgeDraft {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.panel-badgePublished {
  background: rgba(74, 222, 128, 0.15);
  color: var(--color-success);
}

.panel-badgePrimary {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

.panel-badgeWarning {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.panel-badgeChannel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  cursor: default;
  text-transform: none;
}

.panel-badgeChannelIcon {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

.panel-badgeChannel--whatsapp {
  background: rgba(37, 211, 102, 0.14);
  color: #6ee7a8;
}

.panel-badgeChannel--instagram {
  background: rgba(225, 48, 108, 0.12);
  color: #f9a8d4;
}

.panel-badgeChannel--email {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
}

.panel-badgeChannel--chat_site {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}

.panel-badgeChannel--unknown {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.panel-table tbody tr .panel-badgeChannel svg.panel-badgeChannelIcon {
  width: 1.6rem;
  height: 1.6rem;
}

.panel-tableLink {
  cursor: pointer;
  text-decoration: none;
}

.panel-rowLink {
  color: var(--color-accent-hover);
  text-decoration: none;
}

.panel-formGrid {
  display: grid;
  gap: var(--space-16);
  max-width: 36rem;
}

.panel-field label {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--color-text-primary);
}

.panel-field input,
.panel-field select,
.panel-field textarea,
.panel-textarea {
  width: 100%;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.panel-field input::placeholder,
.panel-field textarea::placeholder {
  color: var(--color-text-disabled);
}

.panel-field input:hover,
.panel-field select:hover,
.panel-field textarea:hover {
  border-color: var(--color-text-disabled);
}

.panel-field textarea {
  min-height: 6rem;
  resize: vertical;
}

.panel-field input:focus,
.panel-field select:focus,
.panel-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.panel-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

.panel-muted {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  margin: var(--space-16) 0 0;
}

.panel-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border-subtle);
}

.panel-subnavLink {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-default);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.panel-subnavLink:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.panel-subnavActive {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

/* --- Semantic Helpers (Form, Modals, Tables) --- */

.panel-hiddenInput {
  display: none;
}

.panel-formError {
  color: var(--color-danger, #ef4444);
  font-size: var(--fs-13);
}

.panel-formSuccess {
  color: var(--color-success, #10b981);
  font-size: var(--fs-13);
}

.panel-formGridMedium {
  max-width: 48rem;
}

.panel-formGridLarge {
  max-width: 52rem;
}

.panel-cardFlush {
  margin: 0;
}

.panel-formAction {
  margin-top: var(--space-16);
}

.panel-formDesc {
  margin-bottom: var(--space-16);
}

.panel-formDescLarge {
  margin-bottom: var(--space-20);
}

.panel-fieldSpacing {
  margin-top: var(--space-16);
}

.panel-checkboxLabel {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
  font-size: var(--fs-13);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}

.panel-thSortable {
  cursor: pointer;
  user-select: none;
}

.panel-sortableHeaderContent {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.panel-sortableHeaderContent svg {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--color-text-gray);
}

.panel-textMedium {
  font-weight: 500;
  margin: 0;
}

.panel-textRight {
  text-align: right;
}

.panel-textSuccess {
  color: var(--color-success, #10b981);
  font-size: var(--fs-13);
}

.panel-modalBackdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;
  transition: all 0.2s ease-out;
  transition-behavior: allow-discrete;
}

.panel-modalBackdrop[data-starting-style],
.panel-modalBackdrop[data-ending-style] {
  opacity: 0;
}

.panel-modalPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-bg-elevated);
  border-radius: var(--space-8);
  box-shadow: 0 10px 15px -3px var(--shadow-color, rgba(0,0,0,0.1));
  z-index: 51;
  width: 100%;
  max-width: 450px;
  max-height: min(600px, calc(100vh - var(--space-32)));
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease-out;
  transition-behavior: allow-discrete;
}

.panel-modalPopup > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.panel-modalPopup[data-starting-style],
.panel-modalPopup[data-ending-style] {
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.95);
}

.panel-modalTitle {
  margin: 0;
  padding: var(--space-14) var(--space-24);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
  flex-shrink: 0;
}

.panel-modalActions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  padding: var(--space-14) var(--space-24);
  border-top: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
  background-color: var(--color-bg-elevated);
}

.panel-modalBody {
  padding: var(--space-24);
  font-size: var(--fs-13);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel-modalCloseBtn {
  
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  cursor: pointer;
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.panel-modalDangerBtn {
  
  border-radius: var(--radius-default);
  border: none;
  background: var(--color-danger, #ef4444);
  color: var(--color-accent-foreground);
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chatbot-attendimentoChannelsModal.panel-modalPopup {
  max-width: min(56rem, 96vw);
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 52rem);
}

.chatbot-attendimentoChannelsModal .panel-modalBody.chatbot-attendimentoChannelsModal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.chatbot-attendimentoChannelsLoading {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.chatbot-attendimentoChannelsTabs.tabs-root {
  min-width: 0;
  width: 100%;
}

.chatbot-attendimentoChannelsTabs .tabs-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  gap: 0.2rem;
  margin: 0 0 var(--space-14);
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  overflow: visible;
}

.chatbot-attendimentoChannelsTabs .tabs-indicator {
  display: none;
}

.chatbot-attendimentoChannelsTabs .tabs-tab {
  width: 100%;
  max-width: none;
  margin: 0;
  justify-content: center;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--color-border-subtle);
  border-bottom: none;
  white-space: nowrap;
  font-size: var(--fs-12);
  font-weight: 600;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.chatbot-attendimentoTab--whatsapp {
  --attend-tab-accent: #25d366;
}

.chatbot-attendimentoTab--instagram {
  --attend-tab-accent: #e4405f;
}

.chatbot-attendimentoTab--email {
  --attend-tab-accent: #6366f1;
}

.chatbot-attendimentoTab--chat_site {
  --attend-tab-accent: #3b82f6;
}

.chatbot-attendimentoChannelsTabs .chatbot-attendimentoTab {
  background: color-mix(in oklab, var(--attend-tab-accent) 9%, var(--color-bg-muted));
  color: var(--color-text-secondary);
}

.chatbot-attendimentoChannelsTabs .chatbot-attendimentoTab:hover {
  background: color-mix(in oklab, var(--attend-tab-accent) 16%, var(--color-bg-muted));
  color: var(--color-text-primary);
}

.chatbot-attendimentoChannelsTabs .chatbot-attendimentoTab[data-state="active"],
.chatbot-attendimentoChannelsTabs .chatbot-attendimentoTab[data-selected],
.chatbot-attendimentoChannelsTabs .chatbot-attendimentoTab[aria-selected="true"] {
  color: var(--attend-tab-accent);
  background: color-mix(in oklab, var(--attend-tab-accent) 14%, var(--color-bg-elevated));
  border-color: color-mix(in oklab, var(--attend-tab-accent) 35%, var(--color-border-subtle));
  box-shadow: inset 0 -3px 0 0 var(--attend-tab-accent);
}

.chatbot-attendimentoChannelsTabLabel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.chatbot-attendimentoChannelsTabIcon {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}

.chatbot-attendimentoChannel-toggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
  margin-bottom: var(--space-14);
}

.chatbot-attendimentoChannel-toggleLabel {
  font-size: var(--fs-13);
  font-weight: 600;
}

.chatbot-attendimentoChannelFields.panel-formGrid {
  max-width: none;
}

/* Ticket specific */
.panel-ticketSidebar {
  width: 160px;
}

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

.panel-ticketReplySpacing {
  margin-bottom: var(--space-16);
}

.panel-alignCenter {
  align-items: center;
}

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

.panel-selectWidthSmall {
  width: 160px;
}

.panel-ticketMessageContainer {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.panel-ticketMessageContainer:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.panel-ticketMessageContainer:first-child {
  padding-top: 0;
}


.panel-actionBtn:hover {
  color: var(--color-text-primary);
}

.panel-backIcon {
  width: 1.8rem;
  height: 1.8rem;
}


/* ==========================================
   Subtheme List and Form
   ========================================== */
.subtheme-list-container { margin-top: var(--space-16); }
.subtheme-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-16); }
.subtheme-form-padding { padding: var(--space-24); }
.subtheme-form-row { display: flex; gap: var(--space-16); align-items: flex-start; }
.subtheme-form-checkbox-field { margin-top: var(--space-24); }
.panel-colorPickerWrapper { 
  position: relative; 
  display: flex; 
  align-items: center; 
}
.panel-colorPickerInput { 
  position: absolute; 
  left: var(--space-8); 
  top: 50%; 
  transform: translateY(-50%); 
  width: 2.4rem; 
  height: 2.4rem; 
  padding: 0; 
  border: none; 
  border-radius: 50%; 
  cursor: pointer; 
  overflow: hidden;
}
.panel-colorPickerInput::-webkit-color-swatch-wrapper {
  padding: 0;
}
.panel-colorPickerInput::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
.panel-colorPickerTextInput {
  padding-left: 4rem !important;
}

/* ==========================================
   Drawer (Generic)
   ========================================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100;
  backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
}

.drawer-backdrop[data-starting-style],
.drawer-backdrop[data-ending-style] {
  opacity: 0;
}

.drawer-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 550px;
  background-color: var(--color-bg);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.drawer-popup[data-starting-style],
.drawer-popup[data-ending-style] {
  transform: translateX(100%);
}

.drawer-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-24);
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg-elevated);
}

.drawer-header-status {
  width: 18rem;
}

.drawer-title {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--color-text-primary);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.drawer-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-24);
  align-items: start;
}

.drawer-grid-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  align-items: start;
}

.drawer-coverImage {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-default);
  border: 1px solid var(--color-border-subtle);
  object-fit: cover;
  aspect-ratio: 1/1;
  display: block;
}

.drawer-coverUploadWrapper {
  width: 140px;
  height: 140px;
}

.drawer-coverUploadWrapper .draganddropupload-dropzone {
  min-height: 140px;
  height: 140px;
  padding: 1rem;
}

.drawer-grid-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-24);
  border-top: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg-elevated);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* --- Manual --- */
.manual-pageContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* --- Theme Panel Builder (workspace) --- */
.theme-panel-splitContainer {
  background: var(--color-bg);
  flex: 1;
  min-height: 0;
}

.theme-panel-blocksSidebar {
  width: 250px;
  min-width: 250px;
  border-right: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.theme-panel-blocksSidebarContent {
  padding: var(--space-12);
  display: grid;
  gap: var(--space-14);
  overflow-y: auto;
  height: 100%;
}

.theme-panel-libraryGroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.theme-panel-libraryGroupTitle {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  font-weight: 700;
}

.theme-panel-libraryGrid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.theme-panel-libraryCard {
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: var(--space-10);
  background: var(--color-bg);
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
  font-family: inherit;
}

.theme-panel-libraryCard:hover {
  background: var(--color-bg-muted);
}

.theme-panel-libraryCardDraggable {
  cursor: grab;
  user-select: none;
}

.theme-panel-libraryCardDraggable:active {
  cursor: grabbing;
}

.theme-panel-libraryCardDraggable .theme-panel-libraryCardMain {
  cursor: inherit;
}

.theme-panel-libraryCardDraggable .theme-panel-libraryCardMain:hover {
  background: transparent;
}

.theme-panel-libraryDragHandle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  cursor: grab;
}

.theme-panel-libraryDragHandle:active {
  cursor: grabbing;
}

.theme-panel-libraryCardMain {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  border-radius: 8px;
}

.theme-panel-libraryCardMain:hover {
  background: color-mix(in srgb, var(--color-bg-muted) 55%, transparent);
}

.theme-panel-libraryCardIcon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-panel-libraryCardBody {
  display: grid;
  gap: var(--space-4);
}

.theme-panel-libraryCardBody strong {
  line-height: 1;
  font-size: var(--fs-13);
}

.theme-panel-libraryCardBody small {
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
  line-height: 1;
}

.theme-panel-sidebar {
  transition: width 0.2s ease, min-width 0.2s ease;
  height: 100%;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.theme-panel-sidebarFixed {
  width: 280px !important;
  min-width: 280px !important;
}

.theme-panel-sidebarCollapsed {
  width: 72px;
  min-width: 72px;
}

.theme-panel-sectionsHeaderActions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.theme-panel-sidebarContentHidden {
  display: none;
}

.theme-panel-sidebarEmpty {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-12);
}

.theme-panel-sidebarEmptyIcon {
  width: 28px;
  height: 28px;
  color: var(--color-text-secondary);
}

.theme-panel-sectionList {
  display: grid;
  gap: var(--space-6);
}

.theme-panel-sectionRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-10);
  border-radius: var(--radius-default);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  border: 1px solid transparent;
  user-select: none;
}

.theme-panel-sectionRow:hover {
  background: var(--color-bg-muted);
}

.theme-panel-sectionRowActive {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-elevated));
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border-subtle));
}

.theme-panel-sectionRowDragOver {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border-subtle));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.theme-panel-sectionRowDragging {
  opacity: 0.55;
}

.theme-panel-sectionRowMain {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.theme-panel-sectionGrip {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
  opacity: 0.6;
  flex: 0 0 auto;
}

.theme-panel-sectionTitle {
  font-weight: 600;
  font-size: var(--fs-13);
  line-height: 20px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-panel-sectionRowActions {
  display: flex;
  gap: var(--space-6);
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.2s;
}

.theme-panel-sectionRow:hover .theme-panel-sectionRowActions,
.theme-panel-sectionRowActive .theme-panel-sectionRowActions {
  opacity: 1;
}

.theme-panel-iconBtn {
  padding: 0 var(--space-8);
  min-height: 32px;
}

.theme-panel-editorHeader {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  background: var(--color-bg-elevated);
}

.theme-panel-editorTitle {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--color-text-primary);
}

.theme-panel-editorContent {
  padding: var(--space-16);
  overflow-y: auto;
  height: 100%;
  background: #eef1f5;
  display: flex;
  justify-content: center;
}

.theme-panel-editorContent .theme-panel-layout {
   max-width: 900px;
   width: 100%;
}

.theme-panel-editorCanvasWrap {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: var(--color-bg-elevated);
  border-left: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
}

.theme-panel-subsectionCard {
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  background: var(--color-bg);
  padding: var(--space-20);
  display: grid;
  gap: var(--space-10);
}

.theme-panel-subsectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

.theme-panel-subsectionTitleWrap {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.theme-panel-subsectionDragHandle {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.theme-panel-subsectionCardDragOver {
  border-color: color-mix(in srgb, var(--color-accent) 58%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.theme-panel-subsectionCardDragging {
  opacity: 0.5;
  transform: scale(0.992);
}

.theme-panel-miniConfig {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-bg-elevated) 70%, var(--color-bg-muted));
}

.theme-panel-miniConfigLabel {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  font-weight: 700;
  white-space: nowrap;
}

.theme-panel-miniConfigInput {
  width: 140px;
}

.theme-panel-layoutToolbar {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

.theme-panel-rowList {
  display: grid;
  gap: var(--space-12);
}

.theme-panel-rowCard {
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  background: var(--color-bg-elevated);
  padding: var(--space-12);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-10);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.theme-panel-rowCardDragging {
  opacity: 0.45;
  transform: scale(0.99);
}

.theme-panel-rowCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.theme-panel-rowCardHeadLeft {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.theme-panel-rowDragHandle {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
  padding: 0;
}

.theme-panel-rowDragHandle:active {
  cursor: grabbing;
}

.theme-panel-rowActions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.theme-panel-subsectionSwitchBtnActive.button-secondary {
  color: var(--color-accent);
  background-color: var(--color-accent-muted);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.theme-panel-sectionSwitchModalRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-10);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-subtle);
}

.theme-panel-sectionSwitchModalLabel {
  font-size: var(--fs-16);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.theme-panel-conditionsRoot {
  display: grid;
  gap: var(--space-10);
  padding: var(--space-10);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-muted) 60%, var(--color-bg-elevated));
}

.theme-panel-conditionsHeader {
  display: grid;
  gap: var(--space-4);
}

.theme-panel-conditionsMode {
  display: grid;
}

.theme-panel-conditionsList {
  display: grid;
  gap: var(--space-8);
}

.theme-panel-conditionCard {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-10);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
}

.theme-panel-conditionCardActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.theme-panel-conditionInvalidRef {
  color: var(--color-danger);
}

.theme-panel-rowGrid {
  display: grid;
  gap: var(--space-10);
}

.theme-panel-rowGrid--1 { grid-template-columns: 1fr; }
.theme-panel-rowGrid--2 { grid-template-columns: 1fr 1fr; }
.theme-panel-rowGrid--3 { grid-template-columns: 1fr 1fr 1fr; }

/* --- ThemePanelBuilder row strip (linha = faixa de blocos, sem colunas na UI) --- */
.theme-panel-rowStrip {
  position: relative;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-muted) 55%, var(--color-bg-elevated));
  padding: var(--space-10);
  padding-inline-end: var(--space-16);
  margin-top: var(--space-10);
  min-height: 8rem;
  transition: box-shadow 0.16s ease, outline-color 0.16s ease;
}

.theme-panel-rowStripDragOver {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.theme-panel-rowStripInner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  align-items: flex-start;
  min-height: 5.6rem;
}

.theme-panel-rowStripPlaceholder {
  flex: 1;
  align-self: center;
  text-align: center;
  padding: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.theme-panel-rowStripDelete {
  position: absolute;
  inset-block-start: var(--space-8);
  inset-inline-end: var(--space-8);
  z-index: 1;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  color: var(--color-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, background 0.14s ease;
}

.theme-panel-rowStrip:hover .theme-panel-rowStripDelete,
.theme-panel-rowStrip:focus-within .theme-panel-rowStripDelete {
  opacity: 1;
  pointer-events: auto;
}

.theme-panel-rowStripDelete:hover {
  background: var(--color-bg-muted);
}

.theme-panel-rowStripDelete:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.theme-panel-blockCardDraggable {
  cursor: grab;
}

.theme-panel-blockCardDraggable:active {
  cursor: grabbing;
}

/* --- ThemeCommunityEditor (linha pública: blocos em sequência) --- */
.theme-community-editor-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: flex-start;
}

.theme-community-editor-row .field-root {
  flex: 1 1 22rem;
  min-width: 0;
}

.theme-panel-slot {
  border: 1px dashed color-mix(in srgb, var(--color-border-subtle) 65%, var(--color-text-secondary));
  border-radius: 14px;
  padding: var(--space-10);
  min-height: 136px;
  display: grid;
  align-content: start;
  gap: var(--space-10);
  background: color-mix(in srgb, var(--color-bg) 70%, var(--color-bg-muted));
}

.theme-panel-slotAddColumn {
  grid-column: 1 / -1;
  min-height: 62px;
  align-items: center;
  justify-content: center;
}

.theme-panel-slotAdd {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.2s ease;
}

.theme-panel-slotAdd:hover {
  background: var(--color-bg-muted);
}

.theme-panel-blockCardCompact {
  padding: var(--space-12);
}

.theme-panel-blockCardCompact .theme-panel-blockCardActions {
  margin-top: var(--space-8);
}

.theme-panel-blockDragArea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  cursor: grab;
  margin-bottom: var(--space-8);
}

.theme-panel-slotDragOver {
  border-color: color-mix(in srgb, var(--color-accent) 65%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg-muted));
}

.theme-panel-dragGhost {
  position: fixed;
  top: -1000px;
  left: -1000px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-12);
  font-weight: 700;
  font-family: inherit;
}

.theme-panel-flipPulse {
  animation: themePanelFlipPulse 220ms ease-out;
}

@keyframes themePanelFlipPulse {
  0% {
    transform: translateY(8px);
    opacity: 0.82;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.theme-panel-insertGuide {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 40%, #ffffff));
  margin: 6px 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.theme-panel-blockGrid {
  display: grid;
  gap: var(--space-12);
}

.theme-panel-blockCard {
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  background: var(--color-bg-elevated);
  padding: var(--space-14);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-8);
}

.theme-panel-blockCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
}

.theme-panel-blockCardTitle {
  display: grid;
  gap: var(--space-6);
}

.theme-panel-blockKindPill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--fs-12);
  line-height: 16px;
  font-weight: 700;
  width: fit-content;
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.theme-panel-blockCardActions {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.theme-panel-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--fs-12);
}

.theme-panel-blockAccent--number .theme-panel-blockKindPill { background: color-mix(in srgb, var(--color-success) 14%, var(--color-bg-muted)); color: var(--color-success); }
.theme-panel-blockAccent--text .theme-panel-blockKindPill { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg-muted)); color: var(--color-accent); }
.theme-panel-blockAccent--textarea .theme-panel-blockKindPill { background: color-mix(in srgb, var(--atend-channel-consulta) 14%, var(--color-bg-muted)); color: var(--atend-channel-consulta); }
.theme-panel-blockAccent--switch .theme-panel-blockKindPill { background: color-mix(in srgb, var(--atend-channel-chat) 14%, var(--color-bg-muted)); color: var(--atend-channel-chat); }
.theme-panel-blockAccent--select .theme-panel-blockKindPill { background: color-mix(in srgb, var(--atend-channel-email) 14%, var(--color-bg-muted)); color: var(--atend-channel-email); }
.theme-panel-blockAccent--color .theme-panel-blockKindPill { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-muted)); color: var(--color-danger); }

.manual-splitContainer {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
}

.manual-sidebar {
  width: 320px;
  min-width: 320px;
  border-right: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
}

.manual-sidebarHeader {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.manual-sidebarContent {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-12);
}

.manual-treeCategory {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-default);
  cursor: pointer;
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: var(--fs-13);
  line-height: 20px;
  transition: background 0.2s;
  user-select: none;
  position: relative;
  margin-bottom: var(--space-2);
}

.manual-treeCategoryTitleWrapper {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  position: relative;
}

.manual-treeChevron {
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s;
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  border-radius: var(--radius-default);
  z-index: 2;
}

.manual-treeCategory:hover .manual-treeChevron {
  opacity: 1;
}

.manual-treeChevron.open {
  transform: translateY(-50%) rotate(90deg);
}

.manual-treeIcon {
  color: var(--color-text-secondary);
  transition: opacity 0.2s;
}

.manual-treeCategory:hover .manual-treeIcon {
  opacity: 0;
}

.manual-treeCategory:hover {
  background: var(--color-bg-muted);
}

.manual-treeCategoryChildren {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-in-out;
}

.manual-treeCategoryChildren.open {
  grid-template-rows: 1fr;
}

.manual-treeCategoryChildrenContent {
  min-height: 0;
  overflow: hidden;
}

.manual-treeArticle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-32);
  border-radius: var(--radius-default);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
  line-height: 20px;
  transition: background 0.2s, color 0.2s;
  user-select: none;
  position: relative;
  margin-bottom: var(--space-2);
}

.manual-treeArticle.active {
  font-weight: 500;
}

.manual-treeArticle.active, .manual-treeArticle:hover{
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.manual-treeActions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transition: opacity 0.2s;
  position: absolute;
  right: 0;
  padding: 0 var(--space-6);
}



.manual-actionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border-radius: var(--radius-default);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.manual-actionBtn svg {
  width: 1.4rem;
  height: 1.4rem;
}

.manual-actionBtn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.manual-actionBtn.danger:hover {
  background: var(--color-danger-muted);
  color: var(--color-danger);
}

/* ==========================================
   Tooltip
   ========================================== */
.panel-tooltipPositioner {
  z-index: 99999 !important;
}

.panel-tooltip {
  position: relative;
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-10);
  line-height: 1.35;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-default);
  z-index: 99999 !important;
  pointer-events: none;
  max-width: 220px;
  text-align: center;
  animation: tooltipFadeIn 0.2s ease-in-out;
}

.panel-tooltipArrow {
  width: 8px;
  height: 8px;
  background-color: var(--color-bg-elevated);
  transform: rotate(45deg);
}

.panel-tooltipArrow[data-side="top"] {
  bottom: -4px;
}

.panel-tooltipArrow[data-side="bottom"] {
  top: -4px;
}

.panel-tooltipArrow[data-side="left"] {
  right: -4px;
}

.panel-tooltipArrow[data-side="right"] {
  left: -4px;
}

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

.manual-treeCategory:hover .manual-treeActions,
.manual-treeArticle:hover .manual-treeActions {
  opacity: 1;
}

.manual-editorArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-bg);
}

.manual-editorHeader {
  padding: var(--space-24) var(--space-32) var(--space-16);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 10;
}

.manual-editorTitleInput {
  font-size: var(--fs-26);
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  outline: none;
  width: 100%;
  padding: 0;
}

.manual-editorTitleInput::placeholder {
  color: var(--color-text-disabled);
}

.manual-editorMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.manual-editorSlug {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.manual-editorControls {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.manual-editorContent {
  padding: var(--space-32) max(var(--space-32), calc(50% - 350px));
  flex: 1;
}

.manual-emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-disabled);
  gap: var(--space-16);
}

/* --- RichTextEditor --- */
.richtexteditor-colorBar-active {
  background: currentColor !important;
  border: none !important;
}
.richtexteditor-colorBar-inactive {
  background: transparent !important;
  border: 1px dashed currentColor !important;
}
.richtexteditor-colorSwatch {
  background: currentColor !important;
}

/* ==========================================
   CRM / Clientes 
   ========================================== */

/* Client List */
.customer-list-nameCell {
  display: flex;
  flex-direction: column;
}

.customer-list-contact {
  font-size: 0.85em;
  color: var(--color-text-secondary);
}

/* Customer Details */
.customer-details-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.customer-details-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-12);
}

.ui-btn--whatsapp {
  background-color: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}

/* Customer Products */
.customer-products-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.customer-products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customer-products-empty {
  text-align: center;
  padding: var(--space-40) 0;
  color: var(--color-text-secondary);
}

.customer-products-emptyIcon {
  margin: 0 auto var(--space-16);
  opacity: 0.2;
}

.customer-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-16);
}

.customer-product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
  position: relative;
}

.customer-product-removeBtn {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-disabled);
  transition: color 0.2s;
  padding: 0;
}

.customer-product-removeBtn:hover {
  color: var(--color-danger);
}

.customer-product-headerRow {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.customer-product-cover {
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.customer-product-coverFallback {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.customer-product-title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
}

.customer-product-type {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.customer-product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-13);
}

.customer-product-infoRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customer-product-infoLabel {
  color: var(--color-text-secondary);
}

.customer-product-licenseRow {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.customer-product-licenseCode {
  font-size: 0.85em;
  background: var(--color-bg-muted);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.drawer-footer--end {
  justify-content: flex-end;
}

/* ==========================================
   Tickets / Suporte
   ========================================== */

.ticket-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-24);
  align-items: start;
}

@media (max-width: 1024px) {
  .ticket-layout {
    grid-template-columns: 1fr;
  }
}

.ticket-timeline-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.ticket-messages-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ticket-empty {
  text-align: center;
  padding: var(--space-40) 0;
  color: var(--color-text-secondary);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}

.ticket-message-bubble {
  display: flex;
  flex-direction: column;
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  max-width: 85%;
}

.ticket-message-customer {
  align-self: flex-start;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
}

.ticket-message-agent {
  align-self: flex-end;
  background-color: var(--color-accent-muted);
  border: 1px solid transparent;
}

.ticket-message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
  font-size: var(--fs-12);
}

.ticket-message-sender {
  font-weight: 600;
  color: var(--color-text-primary);
}

.ticket-message-time {
  color: var(--color-text-secondary);
}

.ticket-message-content {
  font-size: var(--fs-13);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.ticket-reply-box {
  margin-top: var(--space-8);
}

.ticket-reply-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-12);
}

.ticket-customerInfo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.ticket-customerAvatar {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.ticket-customerName {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--fs-13);
}

.ticket-customerEmail {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.ticket-profileLink {
  width: 100%;
  justify-content: center;
}

.ticket-sidebarSectionTitle {
  margin-bottom: var(--space-16);
}

.ticket-metaCard {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ticket-metaFooter {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-16);
  margin-top: var(--space-8);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ticket-metaFooterRow {
  display: flex;
  justify-content: space-between;
}

.ticket-metaSource {
  text-transform: capitalize;
}

.ticket-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.ticket-meta-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ticket-meta-field label {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.support-inbox-layout {
  display: grid;
  grid-template-columns: 30rem 1fr;
  gap: var(--space-20);
  margin-bottom: var(--space-20);
}

.support-inbox-sidebar {
  border-right: 1px solid var(--color-border-subtle);
  padding-right: var(--space-12);
}

.support-inbox-sidebarTitle {
  margin: 0 0 var(--space-12);
  font-size: var(--fs-16);
}

.support-inbox-conversationList {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-height: 62rem;
  overflow-y: auto;
}

.support-inbox-conversationItem {
  display: block;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-default);
  padding: var(--space-10);
  background: var(--color-bg);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.support-inbox-conversationItem:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-muted);
}

.support-inbox-conversationItemActive {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.support-inbox-conversationTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-4);
  font-size: var(--fs-13);
}

.support-inbox-conversationMeta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
}

.support-inbox-thread {
  min-width: 0;
}

.support-inbox-threadHeader {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.support-inbox-placeholder,
.support-inbox-empty {
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-default);
  padding: var(--space-16);
  background: var(--color-bg);
}

.support-tester-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.support-tester-subtitle {
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
}

.support-tester-card {
  max-width: 72rem;
}

.support-tester-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.support-tester-textarea {
  width: 100%;
  min-height: 12rem;
  resize: vertical;
}

.support-tester-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .support-inbox-layout {
    grid-template-columns: 1fr;
  }

  .support-inbox-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle);
    padding-right: 0;
    padding-bottom: var(--space-12);
  }
}

/* ==========================================
   Dialog (Base UI — reutilizável)
   ========================================== */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
}

.dialog-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-24);
  width: 48rem;
  max-width: calc(100vw - var(--space-24));
  max-height: 90vh;
  overflow-y: auto;
}

.dialog-title {
  margin: 0 0 var(--space-20);
  font-size: var(--fs-18);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.dialog-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* ==========================================
   Chatbot — editor de fluxo (página especial / mapa mental)
   ========================================== */
.chatbot-flow-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-bg-muted) 0%, var(--color-bg) 100%);
}

.chatbot-flow-pageHeader {
  flex-shrink: 0;
  padding: var(--space-12) var(--space-20);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
}

.chatbot-flow-pageHeaderRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12) var(--space-16);
}

.chatbot-flow-validationBanner {
  margin-top: var(--space-10);
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-warning-muted);
  background: var(--color-warning-muted);
}

.chatbot-flow-validationBannerTitle {
  display: block;
  font-size: var(--fs-13);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.chatbot-flow-validationList {
  margin: 0;
  padding-left: var(--space-20);
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.chatbot-flow-drawerHint {
  margin: calc(var(--space-8) * -1) 0 var(--space-12);
  font-size: var(--fs-12);
  line-height: var(--leading-normal);
}

.chatbot-flow-drawerRuleBlock {
  padding: var(--space-12);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

/* Inspector — bloco Condição (dados): prioridade + grelha */
.chatbot-flow-conditionInspector {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.chatbot-flow-conditionRepeater .repeater-header {
  margin-bottom: var(--space-8);
}

.chatbot-flow-conditionRepeater .repeater-title {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--color-text-primary);
}

.chatbot-flow-conditionRepeater .repeater-row--small .repeater-row-header {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
}

.chatbot-flow-conditionRepeater .repeater-row--small .repeater-inputWrapper {
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.chatbot-flow-conditionRepeater .repeater-removeButton--floating {
  top: var(--space-6);
  right: var(--space-6);
  z-index: 6;
  width: 2.8rem;
  height: 2.8rem;
}

.chatbot-flow-conditionRepeater .repeater-removeButton--floating svg {
  width: 16px;
  height: 16px;
}

.chatbot-flow-conditionRuleCard {
  width: 100%;
  min-width: 0;
  padding: var(--space-14) var(--space-14) var(--space-12) var(--space-10);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
  box-sizing: border-box;
}

.chatbot-flow-conditionRuleCardHead {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  margin-bottom: var(--space-14);
}

.chatbot-flow-conditionRuleCardHeadText {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.chatbot-flow-conditionRuleCardTitle {
  font-size: var(--fs-13);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chatbot-flow-conditionRuleCardSub {
  font-size: var(--fs-11);
  line-height: var(--leading-normal);
}

.chatbot-flow-conditionRuleBadge {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--chatbot-c-condition);
  background: var(--chatbot-c-condition-muted);
  border: 1px solid oklch(74% 0.13 85 / 0.35);
  font-variant-numeric: tabular-nums;
}

.chatbot-flow-conditionRuleFields {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.chatbot-flow-conditionRuleFields .checkbox-labelWrapper {
  align-items: flex-start;
}

.chatbot-flow-conditionExistsNote {
  margin: calc(var(--space-6) * -1) 0 0;
  font-size: var(--fs-12);
  line-height: var(--leading-normal);
}

/* Intervalos no inspector de Horários — mesmo ritmo dos outros repeaters (par de campos compacto) */
.chatbot-flow-inlineTimePair {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

.chatbot-flow-inlineTimePair > .control-wrap {
  flex: 1;
  min-width: 0;
}

.chatbot-flow-inlineTimePair > .input-root {
  flex: 1;
  min-width: 0;
}

.chatbot-flow-inlineTimePairSep {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.chatbot-flow-repeaterAddBtn {
  background: var(--chatbot-repeater-add-bg);
  border-color: var(--chatbot-repeater-add-bg);
  color: var(--chatbot-repeater-add-fg);
}

.chatbot-flow-repeaterAddBtn:hover {
  background: var(--chatbot-repeater-add-bg-hover);
  border-color: var(--chatbot-repeater-add-bg-hover);
  color: var(--chatbot-repeater-add-fg);
}

.chatbot-flow-repeaterAddBtn.button-root.ui-control {
  width: 100%;
  justify-content: center;
}

.chatbot-flow-page .repeater-container {
  gap: var(--space-6);
}

.chatbot-flow-page .repeater-list {
  gap: var(--space-4);
}

.chatbot-flow-page .repeater-row--small .repeater-row-header {
  gap: var(--space-4);
}

.chatbot-flow-page .repeater-dragHandle:not(.repeater-dragHandle--bare) {
  width: 1.6rem;
  min-width: 1.6rem;
  height: auto;
  align-self: stretch;
  min-height: 2.6rem;
}

.chatbot-flow-page .repeater-dragHandle:not(.repeater-dragHandle--bare) svg {
  width: 14px;
  height: 14px;
}

.chatbot-flow-page .repeater-removeButton {
  width: 2.4rem;
  height: 2.4rem;
}

.chatbot-flow-page .repeater-removeButton svg {
  width: 14px;
  height: 14px;
}

.chatbot-flow-pageHeaderLeft {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex: 1;
  min-width: 0;
}

.chatbot-flow-channelSelectWrap {
  flex-shrink: 0;
}

.chatbot-flow-channelSelect.select-trigger.ui-control,
.chatbot-flow-channelSelect.multi-select-trigger.ui-control {
  flex: 0 1 auto;
  min-width: 12rem;
  max-width: min(18rem, 34vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbot-channelBadges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  max-width: 100%;
}

.chatbot-flow-titleInput {
  max-width: 40rem; /* 400px */
}

.chatbot-flow-pageHeaderRight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.chatbot-flow-saveDraftGroup {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-muted);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chatbot-flow-saveDraftGroup:has(.manual-editorUnsaved) {
  background: var(--color-warning-muted);
  border-color: var(--color-border-strong);
}

.chatbot-flow-saveDraftStatus.chatbot-flow-unsaved {
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-10);
  border-radius: 0;
  background: transparent;
}

.chatbot-flow-saveDraftBtn.button-root.ui-control {
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--color-border-strong);
  box-shadow: none;
}


.chatbot-flow-publishBadge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--fs-12);
  font-weight: var(--font-weight-medium);
}

.chatbot-flow-publishBadge--live {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.chatbot-flow-publishBadge--draft {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.chatbot-flow-unsaved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-warning-muted);
}

.chatbot-flow-unsavedDot {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-warning);
}

.chatbot-flow-saved {
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
}

.chatbot-flow-btnIcon {
  width: var(--space-14);
  height: var(--space-14);
}

.chatbot-flow-btnIcon--spin {
  animation: chatbot-spin 0.8s linear infinite;
}

/* Desfazer / Refazer: um controlo único partido, mesmo peso visual do botão Secundário (ex.: Simular) */
.chatbot-flow-undoRedoSplit.ui-control {
  align-items: stretch;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.chatbot-flow-undoRedoSplitBtn {
  flex: 1;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8rem;
  padding: 0 var(--space-8);
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.chatbot-flow-undoRedoSplitBtn:hover:not(:disabled) {
  background: var(--color-bg-muted);
}

.chatbot-flow-undoRedoSplitBtn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.chatbot-flow-undoRedoSplitDivider {
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
  background: var(--color-border-strong);
}

@keyframes chatbot-spin {
  to {
    transform: rotate(360deg);
  }
}

.chatbot-flow-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 26rem 1fr calc(30rem + 20px);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.chatbot-flow-mapArea {
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.chatbot-flow-mapArea .chatbot-flow-rf {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}

/* ── Left block palette sidebar ──────────────────────────────── */
.chatbot-flow-blockSidebar {
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.chatbot-flow-blockSidebarSearchWrap {
  flex-shrink: 0;
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.chatbot-flow-blockSidebarInputWrap {
  width: 100%;
}

.chatbot-flow-blockSidebarInput.input-root {
  width: 100%;
}

.chatbot-flow-blockSidebarClearBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.chatbot-flow-blockSidebarClearBtn:hover {
  color: var(--color-text-primary);
}

.chatbot-flow-blockSidebarEmpty {
  font-size: var(--fs-12);
  color: var(--color-text-disabled);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  margin: 0;
}

.chatbot-flow-blockSidebarScroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6) var(--space-24);
}

.chatbot-flow-blockSidebarCat {
  padding-top: var(--space-8);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.chatbot-flow-blockSidebarCat:first-child {
  border-top: none;
  padding-top: var(--space-6);
  margin-top: 0;
}

.chatbot-flow-blockSidebarCatTitle {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  padding: 0 var(--space-4) var(--space-6);
  margin: 0;
}

.chatbot-flow-blockSidebarCatDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chatbot-flow-blockSidebarCat--interaction .chatbot-flow-blockSidebarCatDot { background: var(--chatbot-c-interaction); }
.chatbot-flow-blockSidebarCat--condition  .chatbot-flow-blockSidebarCatDot { background: var(--chatbot-c-condition); }
.chatbot-flow-blockSidebarCat--automation .chatbot-flow-blockSidebarCatDot { background: var(--chatbot-c-automation); }

.chatbot-flow-blockSidebarItem {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-md);
  cursor: grab;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  transition: background 0.12s;
  user-select: none;
  -webkit-user-select: none;
}

.chatbot-flow-rfNode--onPath .chatbot-mindmap-node {
  box-shadow: 0 0 0 2px var(--color-accent, #e17e5c), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.chatbot-flow-edge--onPath .react-flow__edge-path {
  stroke: var(--color-accent, #e17e5c) !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 4px rgba(225, 126, 92, 0.35));
}

.chatbot-flow-blockSidebarItemCount {
  margin-left: auto;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-bg-subtle, rgba(255, 255, 255, 0.08));
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}

.chatbot-flow-blockSidebarItem:hover {
  background: var(--color-bg-hover);
}

.chatbot-flow-blockSidebarItem:active {
  background: var(--color-accent-muted);
  cursor: grabbing;
}

.chatbot-flow-blockSidebarItemIcon {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
}

.chatbot-flow-blockSidebarItemCount--onIcon {
  position: absolute;
  top: -3px;
  right: -3px;
  margin-left: 0;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 3px;
  font-size: 0.95rem;
  font-weight: 700;
  z-index: 2;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--color-bg-elevated);
}

.chatbot-flow-blockSidebarItem--g-interaction .chatbot-flow-blockSidebarItemCount--onIcon {
  background: color-mix(in oklab, var(--chatbot-c-interaction) 30%, var(--color-bg-elevated));
  color: var(--chatbot-c-interaction);
  border: 1px solid color-mix(in oklab, var(--chatbot-c-interaction) 45%, transparent);
}

.chatbot-flow-blockSidebarItem--g-condition .chatbot-flow-blockSidebarItemCount--onIcon {
  background: color-mix(in oklab, var(--chatbot-c-condition) 30%, var(--color-bg-elevated));
  color: var(--chatbot-c-condition);
  border: 1px solid color-mix(in oklab, var(--chatbot-c-condition) 45%, transparent);
}

.chatbot-flow-blockSidebarItem--g-automation .chatbot-flow-blockSidebarItemCount--onIcon {
  background: color-mix(in oklab, var(--chatbot-c-automation) 30%, var(--color-bg-elevated));
  color: var(--chatbot-c-automation);
  border: 1px solid color-mix(in oklab, var(--chatbot-c-automation) 45%, transparent);
}

.chatbot-flow-blockSidebarItemIcon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.chatbot-flow-blockSidebarItemText {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  flex: 1;
}

.chatbot-flow-blockSidebarItemName {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.chatbot-flow-blockSidebarItemDesc {
  font-size: var(--fs-11);
  color: var(--color-text-secondary);
  line-height: 1.2;
}

/* Paleta (esquerda): uma linha + reticências — o inspector redefine multilinha abaixo */
.chatbot-flow-blockSidebarScroll .chatbot-flow-blockSidebarItemDesc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

/* Icon tints per group */
.chatbot-flow-blockSidebarItem--g-interaction .chatbot-flow-blockSidebarItemIcon {
  background: var(--chatbot-c-interaction-muted);
  border-color: oklch(72% 0.13 150 / 0.25);
  color: var(--chatbot-c-interaction);
}

.chatbot-flow-blockSidebarItem--g-condition .chatbot-flow-blockSidebarItemIcon {
  background: var(--chatbot-c-condition-muted);
  border-color: oklch(74% 0.13 85 / 0.25);
  color: var(--chatbot-c-condition);
}

.chatbot-flow-blockSidebarItem--g-automation .chatbot-flow-blockSidebarItemIcon {
  background: var(--chatbot-c-automation-muted);
  border-color: oklch(72% 0.12 250 / 0.25);
  color: var(--chatbot-c-automation);
}

/* Inspector: abas compactas — barra única tipo segmentado (sem altura excessiva) */
.chatbot-flow-inspectorTabsRoot.tabs-root {
  width: calc(100% + 2 * var(--space-14));
  max-width: none;
  margin-left: calc(-1 * var(--space-14));
  margin-right: calc(-1 * var(--space-14));
  margin-bottom: var(--space-12);
  gap: 0;
  box-sizing: border-box;
}

.chatbot-flow-inspectorTabsRoot .tabs-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: var(--space-4);
  align-items: stretch;
  border-bottom: none;
  padding: var(--space-6) var(--space-8);
  margin: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
  overflow: hidden;
  box-sizing: border-box;
}

.chatbot-flow-inspectorTabsRoot .tabs-tab {
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.chatbot-flow-inspectorTabsRoot .tabs-tab:hover {
  color: var(--color-text-primary);
  background: color-mix(in oklab, var(--color-bg-elevated) 55%, transparent);
}

.chatbot-flow-inspectorTabsRoot .tabs-tab[data-state="active"],
.chatbot-flow-inspectorTabsRoot .tabs-tab[data-selected],
.chatbot-flow-inspectorTabsRoot .tabs-tab[aria-selected="true"] {
  color: var(--color-accent);
  background: var(--color-bg-elevated);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.chatbot-flow-inspectorTabsRoot .tabs-tab[data-state="active"]:hover,
.chatbot-flow-inspectorTabsRoot .tabs-tab[data-selected]:hover,
.chatbot-flow-inspectorTabsRoot .tabs-tab[aria-selected="true"]:hover {
  color: var(--color-accent);
  background: var(--color-bg-elevated);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.chatbot-flow-inspectorTabsRoot .tabs-indicator {
  display: none;
}

.chatbot-flow-inspectorTabsRoot .tabs-panel {
  padding-top: var(--space-12);
}

.chatbot-flow-inspectorTabPanel {
  padding-top: var(--space-4);
}

/* Pré-visualização {{variáveis}} no bloco Mensagem */
.chatbot-flow-msgVarPreview {
  margin-top: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-subtle);
  background: var(--color-bg-muted);
}

.chatbot-flow-msgVarPreviewLabel {
  display: block;
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.chatbot-flow-msgVarPreviewChips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  row-gap: var(--space-6);
}

.chatbot-flow-msgVarPreviewText {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  max-width: 100%;
}

.chatbot-flow-varChip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--fs-12);
  font-weight: 500;
  max-width: 100%;
}

.chatbot-flow-varChipKey {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.1rem;
}

.chatbot-flow-varChip--known {
  background: color-mix(in oklab, var(--color-accent) 18%, var(--color-bg-elevated));
  border: 1px solid color-mix(in oklab, var(--color-accent) 35%, transparent);
  color: var(--color-text-primary);
}

.chatbot-flow-varChip--unknown {
  background: var(--color-warning-muted, #fef9c3);
  border: 1px solid color-mix(in oklab, var(--color-warning, #eab308) 45%, transparent);
  color: var(--color-text-primary);
}

.chatbot-flow-varChipFallback {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: lowercase;
}

/* ── Right inspector / simulator panel ───────────────────────────── */
.chatbot-flow-inspectorPanel {
  background: var(--color-bg-elevated);
  border-left: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

/* Simulator embedded in inspector panel */
.chatbot-flow-inspectorPanel .chatbot-flow-simColumn {
  width: 100%;
  border: none;
  flex: 1;
  min-height: 0;
}

.chatbot-flow-inspectorPanel--simulator .chatbot-flow-simColumn {
  animation: chatbot-flow-panelReveal 0.28s ease-out;
}

@keyframes chatbot-flow-panelReveal {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.chatbot-flow-inspectorPanelHeader {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
  background: var(--color-bg-elevated);
  min-width: 0;
}

.chatbot-flow-inspectorPanelTitleWrap {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: 1;
  min-width: 0;
}

/* Icon displayed in inspector header — reuses mindmap icon tokens */
.chatbot-flow-inspectorNodeIconWrap {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.chatbot-flow-inspectorPanelTitleStack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.chatbot-flow-inspectorPanelTitleStack .chatbot-flow-blockSidebarItemName {
  margin: 0;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
}

.chatbot-flow-inspectorDescWrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.chatbot-flow-inspectorDesc {
  margin: 0;
  max-width: 100%;
  font-size: var(--fs-11);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  white-space: pre-line;
}

.chatbot-flow-inspectorDesc--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.chatbot-flow-inspectorDesc--expanded {
  display: block;
}

.chatbot-flow-inspectorDescToggle {
  all: unset;
  cursor: pointer;
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--color-accent);
  align-self: flex-start;
}

.chatbot-flow-inspectorDescToggle:hover {
  text-decoration: underline;
}

.chatbot-flow-inspectorPanelClose {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  margin-left: auto;
}

.chatbot-flow-inspectorPanelClose:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.chatbot-flow-inspectorPanelClose svg {
  width: 1.4rem;
  height: 1.4rem;
}

.chatbot-flow-inspectorPanelBody {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-14) var(--space-14) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.chatbot-flow-inspectorPanelFooter {
  flex-shrink: 0;
  padding: var(--space-10) var(--space-12);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
  background: var(--color-bg-elevated);
}

.chatbot-flow-inspectorDeleteBtn.button-root.ui-control {
  width: 100%;
  justify-content: center;
}

.chatbot-flow-inspectorEmpty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--space-20);
  text-align: center;
  color: var(--color-text-disabled);
  gap: var(--space-12);
  font-size: var(--fs-13);
  line-height: var(--leading-normal);
}

.chatbot-flow-inspectorEmptyTitle {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0;
}

.chatbot-flow-inspectorEmptyHint {
  font-size: var(--fs-12);
  color: var(--color-text-disabled);
  line-height: var(--leading-normal);
  margin: 0;
}

.chatbot-flow-inspectorEmptyIcon {
  width: 3.2rem;
  height: 3.2rem;
  opacity: 0.35;
}

/* Painel fixo do simulador (fora do drawer / mapa) */
.chatbot-flow-simColumn {
  flex: 0 0 min(36rem, 42vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
}

.chatbot-flow-simColumnHeader {
  flex-shrink: 0;
  padding: var(--space-14) var(--space-16);
  border-bottom: 1px solid var(--color-border-subtle);
}

.chatbot-flow-simColumnTitleRow {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
}

.chatbot-flow-simColumnIcon {
  width: var(--space-20);
  height: var(--space-20);
  color: var(--color-accent);
}

.chatbot-flow-simColumnTitle {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chatbot-flow-simColumnLead {
  margin: 0 0 var(--space-10);
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.chatbot-flow-simColumnActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.chatbot-flow-simColumnActions .button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.chatbot-flow-simResetIcon {
  width: var(--space-16);
  height: var(--space-16);
}

.chatbot-flow-simBtnActive.button-root {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.chatbot-flow-simStatus {
  margin: var(--space-10) 0 0;
  font-size: var(--fs-12);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
}

.chatbot-flow-simThread {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-14) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.chatbot-flow-simEmpty {
  margin: 0;
  text-align: center;
  padding: var(--space-20) var(--space-8);
}

.chatbot-flow-simBubble--user {
  max-width: 92%;
}

.chatbot-flow-simBubble--bot {
  max-width: 92%;
}

.chatbot-flow-simBody {
  white-space: pre-wrap;
  word-break: break-word;
}

.chatbot-flow-simSystem {
  align-self: center;
  max-width: 95%;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--color-warning-muted);
  border: 1px solid var(--color-border-subtle);
}

.chatbot-flow-simSystemText {
  font-size: var(--fs-12);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.chatbot-flow-simQuickReplies {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-14);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
}

.chatbot-flow-simChip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chatbot-flow-simChip:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.chatbot-flow-simChip:focus-visible {
  outline: 0.2rem solid var(--color-focus-ring);
  outline-offset: 0.15rem;
}

.chatbot-flow-simChipIndex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  font-size: var(--fs-12);
  font-weight: var(--font-weight-semibold);
}

.chatbot-flow-simComposer {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-12) var(--space-14);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.chatbot-flow-simComposerField {
  flex: 1;
  min-width: 0;
}

@media (max-width: 80rem) {
  .chatbot-flow-workspace {
    grid-template-columns: 22rem 1fr calc(28rem + 20px);
  }
}

@media (max-width: 60rem) {
  .chatbot-flow-workspace {
    grid-template-columns: 0 1fr 0;
  }
  .chatbot-flow-blockSidebar,
  .chatbot-flow-inspectorPanel {
    display: none;
  }
}

/* React Flow — minimap no tema do painel */
.chatbot-flow-rfMiniMap {
  background-color: var(--color-bg-muted) !important;
}

.chatbot-flow-rf {
  --chatbot-flow-wire: var(--color-accent);
  --chatbot-flow-handle-size: 14px;
  --chatbot-flow-handle-rad: calc(var(--chatbot-flow-handle-size) / 2);
}

/* Arestas Bezier: traço mais suave e espesso */
.chatbot-flow-rf .react-flow__edge-path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chatbot-flow-rf .react-flow__connection-path {
  stroke-linecap: round;
}

.chatbot-flowEdgeTrash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-danger);
  cursor: pointer;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--color-border-subtle);
  transition:
    transform 0.12s ease,
    background-color 0.12s ease,
    box-shadow 0.12s ease;
}

.chatbot-flowEdgeTrash:hover {
  background: var(--color-bg-muted);
  transform: scale(1.05);
}

.chatbot-flowEdgeTrash:focus-visible {
  outline: 0.2rem solid var(--color-focus-ring);
  outline-offset: 0.15rem;
}

.chatbot-flowEdgeTrashIcon {
  width: var(--space-18);
  height: var(--space-18);
}

/* Handles — alinhado ao XYFlow: bounding box real, pointer-events nos connectable */
.chatbot-flow-rf .react-flow__handle {
  z-index: 6;
}

.chatbot-flow-rf .react-flow__handle.connectable {
  pointer-events: all;
  touch-action: none;
}

.chatbot-flow-handle--in,
.chatbot-flow-handle--out {
  width: var(--chatbot-flow-handle-size);
  height: var(--chatbot-flow-handle-size);
  min-width: var(--chatbot-flow-handle-size);
  min-height: var(--chatbot-flow-handle-size);
  border-radius: var(--radius-full);
  box-sizing: border-box;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* Ligado ao grafo: preenchido com a cor dos fios */
.chatbot-flow-rf .react-flow__handle.chatbot-flow-handle--linked.chatbot-flow-handle--in,
.chatbot-flow-rf .react-flow__handle.chatbot-flow-handle--linked.chatbot-flow-handle--out {
  background: var(--chatbot-flow-wire);
  border: 2px solid var(--chatbot-flow-wire);
  box-shadow: none;
}

/* Sem ligação: só contorno na cor dos fios */
.chatbot-flow-rf .react-flow__handle.chatbot-flow-handle--empty.chatbot-flow-handle--in,
.chatbot-flow-rf .react-flow__handle.chatbot-flow-handle--empty.chatbot-flow-handle--out {
  background: var(--color-bg-elevated);
  border: 2px solid var(--chatbot-flow-wire);
  box-shadow: none;
}

.chatbot-flow-rf .react-flow__handle.connectable.chatbot-flow-handle--linked:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--chatbot-flow-wire) 28%, transparent);
}

.chatbot-flow-rf .react-flow__handle.connectable.chatbot-flow-handle--empty:hover {
  filter: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--chatbot-flow-wire) 22%, transparent);
}

/* Saídas nas linhas de opção: centro na borda direita do card */
.chatbot-flow-rf .chatbot-mindmap-node .react-flow__handle-right.chatbot-flow-handle--row {
  transform: translate(var(--chatbot-flow-handle-rad), -50%) !important;
}

/* Handle de saída centrado na faixa da linha (pai `.chatbot-flowHandleSlot` é `position: relative`) */
.chatbot-flow-handle--row {
  right: 0;
  top: 50%;
}

/* Nó em que a simulação aguarda entrada */
.chatbot-mindmap-node--simAwaiting {
  box-shadow:
    0 0 0 0.2rem var(--color-accent-muted),
    0 0 1.2rem var(--color-accent-muted),
    var(--shadow-md);
  border-color: var(--color-accent);
}

.chatbot-flow-addFab {
  position: absolute;
  left: var(--space-16);
  bottom: var(--space-20);
  z-index: 12;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: var(--radius-full);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  cursor: pointer;
  box-shadow: var(--shadow-lg), 0 0.4rem 2rem var(--color-accent-muted);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.2s ease;
}

.chatbot-flow-addFab:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-xl), 0 0.6rem 2.4rem var(--color-accent-muted);
}

.chatbot-flow-addFab:focus-visible {
  outline: 0.2rem solid var(--color-focus-ring);
  outline-offset: 0.2rem;
}

.chatbot-flow-addFabIcon {
  width: var(--space-24);
  height: var(--space-24);
}

.chatbot-flow-blocksBackdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(0.2rem);
  animation: chatbot-backdropIn 0.22s ease;
}

@keyframes chatbot-backdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.chatbot-flow-blocksSheet {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(56rem, 96vw);
  z-index: 92;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-xl);
  animation: chatbot-blocksSheetIn 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.chatbot-flow-blocksDrawer {
  left: 0;
  right: auto;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
}

.chatbot-flow-blocksDrawer[data-starting-style],
.chatbot-flow-blocksDrawer[data-ending-style] {
  transform: translateX(-100%);
}

@keyframes chatbot-blocksSheetIn {
  from {
    transform: translateX(-100%);
    opacity: 0.96;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.chatbot-flow-blocksSheetHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-20) var(--space-12);
  border-bottom: 1px solid var(--color-border-subtle);
  background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-muted) 100%);
}

.chatbot-flow-blocksSheetHeaderText {
  min-width: 0;
}

.chatbot-flow-blocksTitle {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  margin: 0;
}

.chatbot-flow-blocksClose {
  flex-shrink: 0;
  width: var(--space-36);
  height: var(--space-36);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chatbot-flow-blocksClose:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.chatbot-flow-blocksCloseIcon {
  width: var(--space-18);
  height: var(--space-18);
}

.chatbot-flow-blocksGrid {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.chatbot-flow-blockGroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.chatbot-flow-blockGroupTitle {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.chatbot-flow-blockGroupGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.chatbot-flow-blockCard {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: auto;
  padding: var(--space-10) var(--space-12);
  text-align: left;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  min-height: 7.4rem;
}

.chatbot-flow-blockCard:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.1rem);
}

.chatbot-flow-blockCard:focus-visible {
  outline: 0.2rem solid var(--color-focus-ring);
  outline-offset: 0.1rem;
}

.chatbot-flow-blockCardIcon {
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-flow-blockCardIconSvg {
  width: var(--space-16);
  height: var(--space-16);
}

.chatbot-flow-blockCard--g-interaction .chatbot-flow-blockCardIcon {
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.chatbot-flow-blockCard--g-condition .chatbot-flow-blockCardIcon {
  background: var(--atend-channel-consulta-muted);
  color: var(--atend-channel-consulta);
}

.chatbot-flow-blockCard--g-automation .chatbot-flow-blockCardIcon {
  background: var(--atend-channel-chat-muted);
  color: var(--atend-channel-chat);
}

.chatbot-flow-blockCardBody {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.chatbot-flow-blockCardTitle {
  font-size: var(--fs-13);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chatbot-flow-blockCardDesc {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.chatbot-waSection {
  border-radius: var(--radius-md);
  border: 1px solid rgba(37, 211, 102, 0.18);
  background: var(--atend-channel-whatsapp-muted);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.chatbot-waSectionHeader {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--atend-channel-whatsapp);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-12);
}

.chatbot-waSectionIcon {
  width: 1.8rem;
  height: 1.8rem;
}

.chatbot-waSectionBody {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.chatbot-flow-fieldActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
}

.chatbot-flow-presetsRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.chatbot-mindmap-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  background-color: var(--color-bg-muted);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 35%, var(--color-accent-muted) 0%, transparent 55%),
    radial-gradient(circle at 0.1rem 0.1rem, var(--color-border-subtle) 0.1rem, transparent 0);
  background-size: auto, 2.4rem 2.4rem;
}

.chatbot-mindmap-viewport--pan {
  cursor: grabbing;
}

.chatbot-mindmap-world {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--chatbot-world-w, 80rem);
  min-height: var(--chatbot-world-h, 60rem);
  transform-origin: 0 0;
  will-change: transform;
}

.chatbot-mindmap-edges {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 0;
}

.chatbot-mindmap-edgePath {
  stroke: var(--color-accent);
  stroke-opacity: 0.35;
  stroke-width: 0.22rem;
  fill: none;
}

.chatbot-mindmap-arrowHead {
  fill: var(--color-accent);
  fill-opacity: 0.55;
}

/* Dentro do React Flow o posicionamento é no wrapper; aqui só o conteúdo do card (fluxo antigo usava absolute no “mundo”) */
.chatbot-mindmap-node {
  position: relative;
  width: 28rem;
  min-height: 12rem;
  padding: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
  cursor: grab;
  z-index: 2;
  overflow: visible;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.chatbot-mindmap-nodeContent {
  min-width: 0;
}

.chatbot-mindmap-nodeBodyPlain {
  padding: 0 var(--space-14) var(--space-12) 2.45rem;
  min-width: 0;
}

.chatbot-mindmap-nodeBranchWrap {
  padding: 0;
  min-width: 0;
}

/* Entrada: sempre ao meio da altura do card, centro do círculo na borda esquerda */
.chatbot-flowHandleInRail {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--space-14);
  pointer-events: none;
}

.chatbot-flowHandleInRailBand {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--chatbot-flow-handle-size);
  pointer-events: none;
}

.chatbot-flowHandleInRailBand .react-flow__handle {
  pointer-events: all;
}

.chatbot-flow-rf .chatbot-flowHandleInRailBand .react-flow__handle-left.chatbot-flow-handle--inDocked {
  left: 0 !important;
  top: 50% !important;
  right: auto !important;
  transform: translate(calc(-1 * var(--chatbot-flow-handle-rad)), -50%) !important;
}

/* Saída única (mensagem, captura, handoff): meio vertical, borda direita */
.chatbot-flowHandleOutRail {
  position: absolute;
  z-index: 8;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--space-14);
  pointer-events: none;
}

.chatbot-flowHandleOutRailBand {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--chatbot-flow-handle-size);
  pointer-events: none;
}

.chatbot-flowHandleOutRailBand .react-flow__handle {
  pointer-events: all;
}

.chatbot-flow-rf .chatbot-flowHandleOutRailBand .react-flow__handle-right.chatbot-flow-handle--onBorder {
  right: 0 !important;
  top: 50% !important;
  transform: translate(var(--chatbot-flow-handle-rad), -50%) !important;
}

/* Condição: pilha de saídas centrada na altura do card, na borda direita */
.chatbot-flowHandleConditionStack {
  position: absolute;
  z-index: 8;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-10);
  pointer-events: none;
}

/* Padrão único para handles de listas (opções, condição, HTTP, etc.) — hit area alinhada ao fio */
.chatbot-flow-listSourceSlot {
  position: relative;
  width: var(--chatbot-flow-handle-size);
  min-width: var(--chatbot-flow-handle-size);
  height: var(--chatbot-flow-handle-size);
  min-height: var(--chatbot-flow-handle-size);
  flex-shrink: 0;
  box-sizing: content-box;
  pointer-events: none;
}

.chatbot-flow-listSourceSlot .react-flow__handle {
  pointer-events: all;
}

.chatbot-flow-rf .chatbot-flowHandleCondSlot .react-flow__handle-right.chatbot-flow-handle--onBorder {
  right: 0 !important;
  top: 50% !important;
  transform: translate(var(--chatbot-flow-handle-rad), -50%) !important;
}

.chatbot-mindmap-node:active {
  cursor: grabbing;
}

.chatbot-mindmap-node--selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem var(--color-accent-muted), var(--shadow-lg);
}

.chatbot-mindmap-node--start {
  border-color: var(--color-success);
  box-shadow: inset 0 0 0 0.15rem var(--color-success), var(--shadow-md);
}

/* Borda vermelha quando o nó tem erros de validação */
.chatbot-mindmap-node--hasErrors {
  border-color: var(--color-danger, #ef4444);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--color-danger, #ef4444) 25%, transparent), var(--shadow-md);
}

/* Contador de caracteres no bloco message */
.chatbot-flow-charCount {
  margin-top: var(--space-4);
  font-size: var(--fs-12);
  text-align: right;
}

.chatbot-flow-charCount--over {
  color: var(--color-danger, #ef4444);
  font-weight: 600;
}

/* Hint de aviso (limites WhatsApp, etc.) */
.chatbot-flow-warnHint {
  margin-top: var(--space-6);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-md);
  background: var(--color-warning-muted, #fef9c3);
  color: var(--color-warning-text, #854d0e);
  font-size: var(--fs-13);
  line-height: 1.4;
}

/* Painel de variáveis no simulador */
.chatbot-flow-simVarsPanel {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface-raised, var(--color-surface));
}

.chatbot-flow-simVarsPanelTitle {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.chatbot-flow-simVarsPanelIcon {
  width: 0.85rem;
  height: 0.85rem;
}

.chatbot-flow-simVarsList {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.chatbot-flow-simVarsRow {
  display: flex;
  gap: var(--space-8);
  align-items: baseline;
  font-size: var(--fs-13);
}

.chatbot-flow-simVarsKey {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-12);
  color: var(--color-accent);
  background: var(--color-accent-muted);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.chatbot-flow-simVarsVal {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-12);
  color: var(--color-text);
  word-break: break-all;
}

/* HTTP test inline row */
.chatbot-flow-httpTestRow {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.chatbot-flow-httpAdvancedRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* HTTP test result */
.chatbot-flow-httpTestResult {
  margin-top: var(--space-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.chatbot-flow-httpTestResult--ok {
  border-color: var(--color-success-muted, #bbf7d0);
}

.chatbot-flow-httpTestResult--err {
  border-color: var(--color-danger-muted, #fecaca);
}

.chatbot-flow-httpTestStatus {
  padding: var(--space-8) var(--space-12);
  font-size: var(--fs-13);
  font-weight: 600;
  background: var(--color-surface-raised);
}

.chatbot-flow-httpTestResult--ok .chatbot-flow-httpTestStatus {
  color: var(--color-success-text, #166534);
}

.chatbot-flow-httpTestResult--err .chatbot-flow-httpTestStatus {
  color: var(--color-danger, #ef4444);
}

.chatbot-flow-httpTestJson {
  padding: var(--space-10) var(--space-12);
  font-size: var(--fs-12);
  font-family: var(--font-mono, monospace);
  overflow-x: auto;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--color-surface);
  margin: 0;
  border-top: 1px solid var(--color-border-subtle);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ===== Chatbot Analytics ===== */

.chatbot-analytics-periodBar {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-20);
  flex-wrap: wrap;
}

.chatbot-analytics-periodBtn {
  padding: var(--space-6) var(--space-14);
  border-radius: var(--radius-full);
  font-size: var(--fs-13);
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.chatbot-analytics-periodBtn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.chatbot-analytics-periodBtn--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.chatbot-analytics-summaryRow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-16);
  margin-bottom: var(--space-20);
}

.chatbot-analytics-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-16) var(--space-20);
}

.chatbot-analytics-cardLabel {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.chatbot-analytics-cardVal {
  margin: 0;
  font-size: var(--fs-30);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.chatbot-analytics-cardVal--success { color: var(--color-success-text, #166534); }
.chatbot-analytics-cardVal--accent  { color: var(--color-accent); }
.chatbot-analytics-cardVal--info    { color: var(--color-info-text, #1d4ed8); }
.chatbot-analytics-cardVal--danger  { color: var(--color-danger); }

.chatbot-analytics-sectionTitle {
  margin: 0 0 var(--space-16);
  font-size: var(--fs-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chatbot-analytics-sectionHint {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
}

.chatbot-analytics-barList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.chatbot-analytics-barRow {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.chatbot-analytics-barLabel {
  flex: 0 0 16rem;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatbot-analytics-barTrack {
  flex: 1;
  height: 0.625rem;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.chatbot-analytics-barFill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  min-width: 2px;
  transition: width 0.3s ease;
}

.chatbot-analytics-barCount {
  flex: 0 0 6rem;
  text-align: right;
  font-size: var(--fs-13);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chatbot-analytics-barCountSub {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  font-size: var(--fs-12);
}

/* ============================= */

.chatbot-mindmap-nodeHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: 0;
  padding: var(--space-12) var(--space-14) var(--space-10) 2.45rem;
}

.chatbot-mindmap-nodeHeadMain {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex: 1;
  min-width: 0;
}

.chatbot-mindmap-nodeMetaRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.chatbot-mindmap-nodeEditBtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: 0;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chatbot-mindmap-nodeEditBtn:hover {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.chatbot-mindmap-nodeEditBtn:focus-visible {
  outline: 0.2rem solid var(--color-focus-ring);
  outline-offset: 0.1rem;
}

.chatbot-mindmap-nodeEditIcon {
  width: var(--space-12);
  height: var(--space-12);
}

.chatbot-mindmap-nodeEditLabel {
  white-space: nowrap;
}

.chatbot-mindmap-nodeIconWrap {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-mindmap-nodeIcon {
  width: var(--space-20);
  height: var(--space-20);
  color: var(--color-text-primary);
}

/* Paleta padronizada por grupo — Builder.html category colors */
.chatbot-mindmap-nodeIconWrap--message,
.chatbot-mindmap-nodeIconWrap--options,
.chatbot-mindmap-nodeIconWrap--capture,
.chatbot-mindmap-nodeIconWrap--handoff,
.chatbot-mindmap-nodeIconWrap--csat,
.chatbot-mindmap-nodeIconWrap--wait_for_reply,
.chatbot-mindmap-nodeIconWrap--finish {
  background: var(--chatbot-c-interaction-muted);
}

.chatbot-mindmap-nodeIconWrap--condition,
.chatbot-mindmap-nodeIconWrap--week_days,
.chatbot-mindmap-nodeIconWrap--time_slots,
.chatbot-mindmap-nodeIconWrap--business_hours {
  background: var(--chatbot-c-condition-muted);
}

.chatbot-mindmap-nodeIconWrap--set_variable,
.chatbot-mindmap-nodeIconWrap--ticket_update,
.chatbot-mindmap-nodeIconWrap--trigger_flow,
.chatbot-mindmap-nodeIconWrap--jump,
.chatbot-mindmap-nodeIconWrap--http_request,
.chatbot-mindmap-nodeIconWrap--delay {
  background: var(--chatbot-c-automation-muted);
}

.chatbot-mindmap-nodeIconWrap--message .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--options .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--capture .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--handoff .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--csat .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--wait_for_reply .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--finish .chatbot-mindmap-nodeIcon {
  color: var(--chatbot-c-interaction);
}

.chatbot-mindmap-nodeIconWrap--condition .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--week_days .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--time_slots .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--business_hours .chatbot-mindmap-nodeIcon {
  color: var(--chatbot-c-condition);
}

.chatbot-mindmap-nodeIconWrap--set_variable .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--ticket_update .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--trigger_flow .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--jump .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--http_request .chatbot-mindmap-nodeIcon,
.chatbot-mindmap-nodeIconWrap--delay .chatbot-mindmap-nodeIcon {
  color: var(--chatbot-c-automation);
}

.chatbot-mindmap-nodeHeadText {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.chatbot-mindmap-typePill {
  align-self: flex-start;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--fs-11);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}

.chatbot-mindmap-typePill--message,
.chatbot-mindmap-typePill--options,
.chatbot-mindmap-typePill--capture,
.chatbot-mindmap-typePill--handoff,
.chatbot-mindmap-typePill--csat,
.chatbot-mindmap-typePill--wait_for_reply,
.chatbot-mindmap-typePill--finish {
  background: var(--chatbot-c-interaction-muted);
  color: var(--chatbot-c-interaction);
}

.chatbot-mindmap-typePill--condition,
.chatbot-mindmap-typePill--week_days,
.chatbot-mindmap-typePill--time_slots,
.chatbot-mindmap-typePill--business_hours {
  background: var(--chatbot-c-condition-muted);
  color: var(--chatbot-c-condition);
}

.chatbot-mindmap-typePill--set_variable,
.chatbot-mindmap-typePill--ticket_update,
.chatbot-mindmap-typePill--trigger_flow,
.chatbot-mindmap-typePill--jump,
.chatbot-mindmap-typePill--http_request,
.chatbot-mindmap-typePill--delay {
  background: var(--chatbot-c-automation-muted);
  color: var(--chatbot-c-automation);
}

.chatbot-mindmap-nodeTitle {
  font-size: var(--fs-13);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.chatbot-mindmap-nodePreview {
  margin: 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card com várias saídas: prompt alinhado ao cabeçalho; lista em largura total (conectores na borda) */
.chatbot-branchCard {
  margin-top: 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
}

.chatbot-branchCard-prompt {
  margin: 0 0 var(--space-10);
  padding: 0 2.45rem;
  font-size: var(--fs-13);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 6.75rem;
  overflow: hidden;
}

.chatbot-branchCard-lead {
  margin: 0 0 var(--space-8);
  padding: 0 2.45rem;
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.chatbot-branchCard-empty {
  margin: 0;
  padding: 0 2.45rem;
  font-size: var(--fs-12);
  color: var(--color-text-muted);
  font-style: italic;
}

.chatbot-branchCard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: visible;
}

.chatbot-branchCard-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 3.4rem;
  padding: var(--space-8) var(--space-8);
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-muted);
  overflow: visible;
}

.chatbot-branchCard-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.chatbot-branchCard-row--muted {
  opacity: 0.92;
}

.chatbot-branchCard-row--noHandle {
  padding-right: var(--space-10);
}

.chatbot-branchCard-rowIdx {
  flex-shrink: 0;
  width: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: var(--fs-12);
  font-weight: var(--font-weight-semibold);
  color: var(--chatbot-flow-wire);
  font-variant-numeric: tabular-nums;
}

.chatbot-branchCard-rowRuleIcon {
  width: var(--space-14);
  height: var(--space-14);
  opacity: 0.75;
}

.chatbot-branchCard-rowText {
  flex: 1;
  min-width: 0;
  align-self: center;
  font-size: var(--fs-12);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.chatbot-flowHandleSlot {
  position: relative;
  width: var(--chatbot-flow-handle-size);
  min-width: var(--chatbot-flow-handle-size);
  min-height: var(--chatbot-flow-handle-size);
  margin-right: calc(-1 * var(--chatbot-flow-handle-rad));
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 4;
}

.chatbot-branchCard-row .react-flow__handle.chatbot-flow-handle--row {
  z-index: 5 !important;
}

.chatbot-mindmap-nodeHandle {
  position: absolute;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  border: 0.2rem solid var(--color-bg-elevated);
  pointer-events: none;
}

.chatbot-mindmap-nodeHandle--out {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}

.chatbot-mindmap-nodeHandle--in {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-text-secondary);
  border: 0.2rem solid var(--color-bg-elevated);
}

.chatbot-flow-zoomDock {
  position: absolute;
  bottom: var(--space-20);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  backdrop-filter: blur(0.8rem);
}

.chatbot-flow-zoomBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chatbot-flow-zoomBtn:hover {
  background: var(--color-bg-muted);
  color: var(--color-accent);
}

.chatbot-flow-zoomIcon {
  width: var(--space-16);
  height: var(--space-16);
}

.chatbot-flow-simBox {
  margin-top: var(--space-8);
}

.chatbot-flow-simTitle {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-13);
  color: var(--color-text-primary);
}

@media (max-width: 72rem) {
  .chatbot-flow-nameField {
    min-width: 18rem;
  }

  .chatbot-flow-addFab {
    left: var(--space-12);
    bottom: calc(var(--space-64) + var(--space-16));
  }
}


/* =========================================================
   Cargos: RoleBadge
   ========================================================= */
.panel-roleBadge {
  --role-color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--color-text-primary);
  background-color: color-mix(in srgb, var(--role-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--role-color) 35%, transparent);
  line-height: 1;
  white-space: nowrap;
}
.panel-roleBadge--md {
  font-size: var(--fs-13);
  padding: 0.3rem 0.7rem;
}
.panel-roleBadgeDot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-full);
  background-color: var(--role-color);
  flex: 0 0 auto;
}
.panel-roleBadgeIcon {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--role-color);
  margin-left: 0.15rem;
  opacity: 0.85;
}
.panel-roleBadgeName {
  display: inline-block;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   Cargos: PermissionMatrix
   ========================================================= */
.panel-permMatrix {
  display: grid;
  gap: var(--space-16);
}
.panel-permMatrixGroup {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-14);
  background-color: var(--color-surface-1);
}
.panel-permMatrixGroupTitle {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.panel-permMatrixList {
  display: grid;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.panel-permMatrixItem {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background-color 120ms ease;
}
.panel-permMatrixItem:hover {
  background-color: var(--color-surface-2);
}
.panel-permMatrixCopy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.panel-permMatrixLabel {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--color-text-primary);
}
.panel-permMatrixDesc {
  font-size: var(--fs-12);
  color: var(--color-text-muted);
  line-height: 1.4;
}