/* styles.css - Arquivo CSS Completo com Modificações Corrigidas */

/* --------------------------------------------------------------
   VARIÁVEIS GLOBAIS
   -------------------------------------------------------------- */
   :root {
    /* Cores primárias - tema escuro personalizado */
    --color-primary: #00a884;
    --color-primary-dark: #008069; /* MODIFICADO: Conforme solicitado */
    --color-primary-light: #25d366;
    --color-primary-transparent: rgba(0, 168, 132, 0.15);
    --color-primary-rgb: 0, 168, 132; /* Adicionado para rgba */
    --color-secondary: #128c7e;
    --color-danger: #F44336;       /* MODIFICADO: Conforme solicitado */
    --color-danger-rgb: 244, 67, 54; /* Adicionado para rgba */
    --color-warning: #FFC107;      /* MODIFICADO: Conforme solicitado */
    --color-warning-rgb: 255, 193, 7; /* Adicionado para rgba */
    --color-success: #4CAF50;      /* MODIFICADO: Conforme solicitado */
    --color-success-rgb: 76, 175, 80;  /* Adicionado para rgba */
    --color-info: #2196F3;         /* ADICIONADO: Conforme solicitado */
    --color-info-rgb: 33, 150, 243;    /* Adicionado para rgba */
    --color-ia-tag: #FF8C00;       /* Laranja escuro para tag IA */

    /* Cores de mensagens */
    --color-message-received-bg: #202c33;
    --color-message-sent-bg: #005C4B;
    --color-message-received-name: #53BDEB;
    --color-sender-ia: #FF8C00;
    --color-sender-manual: #A2F5C3;
    --color-sender-automation: #87CEEB;
    --color-sender-scheduled: #DA70D6;
    --color-sender-whatsapp: #B0BEC5;
    --color-sender-system: #F06292;


    /* Cores de fundo */
    --color-bg: #0b141a;
    --color-bg-alt: #111b21;
    --color-bg-card: #202C33;      /* MODIFICADO: Conforme solicitado (leve ajuste) */
    --color-bg-hover: #2a3942;
    --color-bg-active: #374248;
    --color-bg-input: #2a3942;

    /* Cores de texto */
    --color-text: #e9edef;
    --color-text-secondary: #aebac1;
    --color-text-muted: #8696a0;
    --color-text-caption: #667781;

    /* Cores de elementos */
    --color-border: rgba(134, 150, 160, 0.15);
    --color-border-dark: rgba(134, 150, 160, 0.25);
    --color-divider: rgba(134, 150, 160, 0.2);
    --color-scrollbar-track: #111B21;  /* MODIFICADO: Conforme solicitado */
    --color-scrollbar-thumb: #4A5B65;  /* MODIFICADO: Conforme solicitado */
    --color-scrollbar-thumb-hover: #5A6B75; /* MODIFICADO: Ajuste para melhor contraste */
    --color-box-shadow: rgba(0, 0, 0, 0.2);
    --color-overlay: rgba(11, 20, 26, 0.6);

    /* Tipografia */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-md: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */

    /* Espaçamento */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Bordas e Sombras */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Transições */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;

    /* Tamanhos específicos */
    --header-height: 64px;
    /* --sidebar-width: 380px; -- Removido */
    --chat-panel-width: 380px; /* Largura padrão do painel de chat lateral */
    --message-max-width: 65%;
    --avatar-size: 40px;
    --avatar-size-large: 50px;
    --tag-height: 24px;

    /* Limites WhatsApp */
    --whatsapp-image-max-size: 16777216; /* 16MB */
    --whatsapp-video-max-size: 67108864; /* 64MB */
    --whatsapp-audio-max-size: 16777216; /* 16MB */
    --whatsapp-document-max-size: 100663296; /* 100MB */
  }

  /* --------------------------------------------------------------
     RESET E ESTILOS BÁSICOS
     -------------------------------------------------------------- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-x: hidden;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.3;
  }

  a {
    color: var(--color-primary);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevenir espaço extra abaixo da imagem */
  }

  button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  button {
    cursor: pointer;
  }

  /* --------------------------------------------------------------
     UTILITÁRIOS
     -------------------------------------------------------------- */
  /* Removido .mobile-only e .desktop-only */

  .hidden {
    display: none !important;
  }

  /* --- Controle de Visibilidade da Aplicação --- */
  /* 1. Por padrão, todos os painéis principais estão escondidos. */
  #initial-loading,
  .desktop-layout,
  #qr {
    display: none;
  }

  /* 2. A classe no body determina qual painel é exibido. */
  body.app-loading #initial-loading {
    display: flex;
  }

  body.app-ready .desktop-layout {
    display: flex;
  }

  body.app-qr #qr {
    display: flex;
  }

  [contenteditable="true"] {
    outline: none;
    cursor: text;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--transition-fast);
  }

  [contenteditable="true"]:hover,
  [contenteditable="true"]:focus {
    border-bottom-color: var(--color-primary);
  }

        .loading-conversations-container {
            display: none; /* Escondido por padrão */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: var(--color-bg-alt);
            z-index: 1000;
        }
        
        .loading-conversations-container .whatsapp-logo {
            width: 80px;
            height: 80px;
            margin-bottom: var(--space-6);
        }

        .loading-conversations-container .progress-bar {
            width: 300px;
            height: 4px;
            background-color: var(--color-bg-input);
            border-radius: var(--radius-full);
            overflow: hidden;
            margin-top: var(--space-4);
        }

        .loading-conversations-container .progress-bar-inner {
            width: 100%;
            height: 100%;
            background-color: var(--color-primary);
            border-radius: var(--radius-full);
            animation: loading-progress 2s infinite ease-in-out;
        }

        .loading-conversations-container p {
            margin-top: var(--space-4);
            color: var(--color-text-secondary);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        @keyframes loading-progress {
            0% { transform: translateX(-100%); }
            50% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

  /* --------------------------------------------------------------
     LAYOUT PRINCIPAL
     -------------------------------------------------------------- */
  .app-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    overflow-x: hidden; /* Prevenir rolagem horizontal */
    position: relative;
  }

  /* Cabeçalho da aplicação */
  .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-bg-alt);
    height: var(--header-height);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    z-index: 20;
    flex-shrink: 0; /* Evitar que encolha */
  }

  .header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .brand-logo-container {
    position: relative;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: var(--radius-md);
    flex-shrink: 0; /* Evitar que encolha */
  }

  .header-logo {
    height: 32px;
    width: 32px;
    object-fit: cover;
    border-radius: 50%;
  }

  .logo-upload-btn {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .brand-logo-container:hover .logo-upload-btn {
    opacity: 1;
  }

  .header-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    white-space: nowrap; /* Evitar quebra de linha */
  }

  .header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0; /* Evitar que encolha */
  }

  /* Alternador de visualização REMOVIDO */

  /* Status de conexão */
  .connection-status {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background-color: var(--color-bg-active);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap; /* Evitar quebra */
  }

  .connection-status.connected {
    color: white;
    background-color: var(--color-primary);
  }

  .connection-status.connecting {
    color: white;
    background-color: var(--color-warning);
  }

  .connection-status.error {
    color: white;
    background-color: var(--color-danger);
  }

  .connection-status.warning { /* Added for QR state */
    color: #333; /* Darker text for better contrast on yellow */
    background-color: var(--color-warning);
  }

  /* Container do QR Code */
  .qr-container {
    display: none; /* Hide by default, shown by JS */
    flex-direction: column; /* Colocar texto abaixo */
    justify-content: center;
    align-items: center;
    padding: var(--space-6); /* Mais padding */
    margin: var(--space-3) auto;
    max-width: 300px; /* Um pouco maior */
    text-align: center;
    color: var(--color-text-secondary); /* Texto um pouco mais claro */
    background-color: var(--color-bg-alt); /* Fundo para destacar */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    flex: 1; /* Ocupa espaço quando visível */
  }

  .qr-container img {
    max-width: 250px; /* Limitar tamanho da imagem QR */
    width: 100%;
    border-radius: var(--radius-md);
    border: 8px solid white;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-4); /* Mais espaço abaixo do QR */
  }
  .qr-container p {
    font-size: var(--font-size-sm);
    line-height: 1.4;
  }

  /* --------------------------------------------------------------
     LAYOUT DESKTOP (CRM) - ÚNICO LAYOUT AGORA
     -------------------------------------------------------------- */
  .desktop-layout {
    flex: 1;
    display: flex; /* Sempre visível, a menos que QR esteja ativo */
    flex-direction: column; /* Changed: To stack controls and board */
    width: 100%;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    overflow-x: hidden; /* Prevenir rolagem horizontal */
    position: relative; /* Para posicionamento do chat */
  }

  /* --- START: NOVOS ESTILOS CRM CONTROLS --- */
  .crm-controls {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      align-items: center;
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border);
      flex-shrink: 0; /* Don't shrink controls */
      background-color: var(--color-bg-alt); /* Match header */

        .crm-search { /* O input de pesquisa existente */
            flex-grow: 1;
            min-width: 250px;
        }

        .crm-kanban-filters { /* Novo container para o botão de filtro e o menu */
            position: relative; /* Para posicionar o menu dropdown */
            display: flex;
            align-items: center;
        }

        #crmFilterBtn { /* O botão que abrirá o menu de filtros */
            /* Estilos base de .button, pode adicionar mais */
            margin-left: var(--space-2); /* Espaço após a pesquisa ou outros filtros */
        }

        #crmFilterMenu {
            /* Estilos base de .context-menu já devem aplicar um bom começo */
            /* Ajustes específicos se necessário: */
            min-width: 280px;
            position: fixed; /* Garante que o menu flutue sobre tudo */
            z-index: 2000; /* z-index alto para sobrepor modais */
            /* top e left serão definidos via JS */
        }

        .filter-menu-section h4 {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            margin-bottom: var(--space-2);
            padding-bottom: var(--space-1);
            border-bottom: 1px solid var(--color-border);
        }

        .filter-menu-divider {
            height: 1px;
            background-color: var(--color-divider);
            margin: var(--space-2) 0;
        }

        .filter-menu-section .menu-item,
        .filter-menu-section .filter-submenu-trigger {
            /* Estilos de .menu-item já devem estar bons */
            /* .filter-submenu-trigger pode ter uma seta à direita */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #crmFilterMenu .context-submenu {
            /* Estilos similares a .context-menu, mas para subníveis */
            position: absolute;
            left: 100%; /* Posicionar à direita do item pai */
            top: 0; /* Alinhar com o topo do item pai */
            min-width: 200px;
            background-color: var(--color-bg-card); /* Mesma cor de fundo */
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            padding: var(--space-2);
            z-index: 510; /* Acima do menu principal */
        }
        #crmFilterMenu .context-submenu .menu-item { /* Itens dentro do submenu */
             padding: var(--space-1) var(--space-2); /* Menor padding */
        }
   }

   .crm-search {
       flex-grow: 1; /* Allow search to take up space */
       min-width: 250px; /* Minimum width for search input */
   }

   #crmSearchInput {
       /* Base: .form-input */
       background-color: var(--color-bg-input);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-md);
       padding: var(--space-2) var(--space-3);
       color: var(--color-text);
       font-size: var(--font-size-sm);
       width: 100%; /* Fill the .crm-search container */
       /* Adicionar ícone de pesquisa */
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 0 24 24' width='20px' fill='%238696a0'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: left var(--space-3) center;
       padding-left: calc(var(--space-3) + 20px + var(--space-2)); /* Padding para o ícone */
   }
   #crmSearchInput:focus {
       outline: none;
       border-color: var(--color-primary);
       box-shadow: 0 0 0 2px var(--color-primary-transparent);
   }

   .crm-filters {
       display: flex;
       flex-wrap: wrap;
       gap: var(--space-3);
       align-items: center;
   }

   /* Style for filter selects */
   #filterHasTag,
   #filterNotHasTag,
   #filterOther {
       /* Base: .form-select */
       cursor: pointer;
       appearance: none;
       -webkit-appearance: none;
       -moz-appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238696a0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right var(--space-2) center;
       padding-right: var(--space-6); /* Space for arrow */
       background-color: var(--color-bg-input);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-md);
       padding: var(--space-2) var(--space-3);
       color: var(--color-text);
       font-size: var(--font-size-sm);
       min-width: 150px; /* Minimum width for filters */
       flex-grow: 1; /* Allow filters to grow slightly */
   }
   #filterHasTag:focus,
   #filterNotHasTag:focus,
   #filterOther:focus {
       outline: none;
       border-color: var(--color-primary);
       box-shadow: 0 0 0 2px var(--color-primary-transparent);
   }

   #clearFiltersBtn {
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
   }
   #clearFiltersBtn:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text);
   }
   /* --- END: NOVOS ESTILOS CRM CONTROLS --- */


   /* Quadro Kanban */
#kanban-columns-container {
    display: flex;
    gap: 16px;
    padding: 20px;
    overflow-x: auto; /* CORRIGIDO: Permite a rolagem horizontal */
    height: 100%;
}

#kanban-view {
    display: flex;
    flex-direction: column;
    width: 100%; /* ADICIONADO: Garante que o contêiner ocupe o espaço disponível */
    height: 100%;
    overflow: hidden; /* ADICIONADO: Contém os filhos e evita rolagem dupla */
}

   .kanban-board {
     flex: 1;
     display: flex;
     overflow-x: auto; /* Scroll horizontal para as colunas */
     padding: var(--space-4);
     gap: var(--space-4);
     background-color: var(--color-bg);
     -webkit-overflow-scrolling: touch;
   }

   .kanban-columns {
     display: flex;
     gap: var(--space-4);
     height: 100%; /* Ocupar altura total do board */
   }

.kanban-column {
    background-color: var(--color-bg-alt);
    border-radius: 8px;
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

   .column-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-3) var(--space-4);
     border-bottom: 1px solid var(--color-border);
     flex-shrink: 0; /* Não encolher o cabeçalho */
   }

   .column-header h2 {
     font-size: var(--font-size-lg);
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: var(--space-2);
     margin: 0;
   }

   .column-header .material-icons-round {
     font-size: var(--font-size-xl);
     color: var(--color-primary);
   }

   .column-counter {
     background-color: var(--color-primary);
     color: white;
     font-size: var(--font-size-sm);
     font-weight: 700;
     padding: var(--space-1) var(--space-2);
     border-radius: var(--radius-full);
     min-width: 24px;
     text-align: center;
   }

.column-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    flex-grow: 1;
    overflow-y: auto; /* CORRIGIDO: Permite a rolagem vertical */
    /* ADICIONADO: Define uma altura máxima para ativar a rolagem. Ajuste o valor (ex: 150px) conforme a altura do seu header/título */
    max-height: calc(100vh - 200px);
}

   /* Estilo para quando uma coluna está vazia */
   .column-cards:empty::before {
     content: "Nenhum contato nesta coluna.";
     color: var(--color-text-muted);
     text-align: center;
     padding: var(--space-4);
     display: block;
   }
   /* Cartão do contato no Kanban */
 .crm-card {
     flex-shrink: 0;
     background-color: var(--color-bg-card);
     border-radius: var(--radius-lg);
     padding: var(--space-3);
     box-shadow: var(--shadow-md);
     cursor: pointer;
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
     position: relative;
     border: 1px solid var(--color-border-dark);
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
     min-height: 120px;
 }

 .crm-card:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
 }

 .crm-card.dragging {
   opacity: 0.7;
   transform: scale(1.02);
   box-shadow: var(--shadow-lg);
   cursor: grabbing;
 }

 /* Adicionado para diferenciar cartões de grupo */
 .crm-card.group-card {
     border-left: 4px solid var(--color-secondary);
 }

 .crm-card.group-card .card-avatar img {
     border-radius: var(--radius-md); /* Avatares de grupo menos redondos */
 }

 .card-header {
     display: flex;
     align-items: center;
     gap: var(--space-3);
 }

 .card-avatar {
     position: relative;
     flex-shrink: 0;
 }

 .card-avatar img {
     width: var(--avatar-size);
     height: var(--avatar-size);
     border-radius: 50%;
     object-fit: cover;
     background-color: var(--color-bg-hover);
 }

 .card-avatar .badge {
     position: absolute;
     bottom: -2px;
     right: -2px;
     border: 2px solid var(--color-bg-card);
 }

 .card-title-area {
     flex-grow: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .card-title {
     font-weight: 600;
     font-size: var(--font-size-md);
     color: var(--color-text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 1.3;
 }

 .card-phone {
     font-size: var(--font-size-xs);
     color: var(--color-text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 1.2;
 }

 .card-time {
     font-size: var(--font-size-xs);
     color: var(--color-text-muted);
     white-space: nowrap;
     margin-left: auto;
     align-self: flex-start;
     padding-top: 2px;
 }

 .card-content {
     flex-grow: 1; /* Permite que esta área cresça e empurre as ações para baixo */
 }

 .card-tags {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2);
   margin-top: var(--space-2);
 }

 .kanban-tag {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
 }

 .kanban-tag.tag-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
 }

 .kanban-tag.tag-clickable:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
 }

   #tagRemoveSubmenu {
    z-index: 1010;
    min-width: 120px;
   }

 #tagRemoveSubmenu {
    z-index: 1010; /* Acima de outros elementos do card */
    min-width: 120px;
 }

 .card-actions {
   display: flex;
   justify-content: flex-end; /* Ações alinhadas à direita */
   align-items: center;
   margin-top: auto; /* Empurra para o final do card */
   padding-top: var(--space-2);
   border-top: 1px solid var(--color-divider);
   gap: var(--space-1);
 }

 .card-actions .icon-button {
   color: var(--color-text-secondary);
 }

 .card-actions .icon-button:hover {
   color: var(--color-primary);
 }

/* Painel de chat lateral (desktop) */
.desktop-chat-panel {
    position: absolute;
    top: var(--header-height);
    right: 0;
    width: var(--chat-panel-width);
    height: calc(100vh - var(--header-height));
    background-color: var(--color-bg-alt);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-normal) ease-out, width var(--transition-normal) ease-out;
    z-index: 10;
    box-shadow: var(--shadow-xl);
}

.desktop-chat-panel.visible {
    transform: translateX(0);
}

.desktop-chat-panel.expanded {
    width: 600px;
    box-shadow: -10px 0 25px rgba(0,0,0,0.5);
}

.desktop-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    height: var(--header-height);
}

.chat-contact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex-grow: 1;
}

.chat-contact .avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.chat-contact-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-display-name {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-number {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.chat-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.chat-search-container {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-alt);
    flex-shrink: 0;
    display: none;
}
.chat-search-container.active {
    display: block;
}

.chat-background {
    flex: 1;
    overflow-y: auto;
    position: relative;
    background-color: #0b141a;
    min-height: 0;
}

.chat-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");
    background-repeat: repeat;
    opacity: 0.06;
    z-index: 0;
}

.chat-messages {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: relative;
    z-index: 1;
}

.day-divider {
    text-align: center;
    margin: var(--space-4) 0;
    flex-shrink: 0;
}

.day-divider span {
    background-color: #182229;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.message {
    display: flex;
    flex-direction: column;
    max-width: var(--message-max-width);
    padding: 6px 9px;
    position: relative;
    border-radius: var(--radius-md);
    animation: messageIn 0.2s ease-out;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    word-wrap: break-word;
}

@keyframes messageIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.message-received {
    align-self: flex-start;
    background-color: var(--color-message-received-bg);
    border-top-left-radius: 0;
}

.message-sent {
    align-self: flex-end;
    background-color: var(--color-message-sent-bg);
    border-top-right-radius: 0;
}

.message-sender {
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-bottom: 2px;
}

.message-received .message-sender { color: var(--color-message-received-name); }
.message-sent.from-ia .message-sender { color: var(--color-sender-ia); }
.message-sent.from-manual .message-sender { color: var(--color-sender-manual); }
.message-sent.from-automation .message-sender { color: var(--color-sender-automation); }
.message-sent.from-scheduled .message-sender { color: var(--color-sender-scheduled); }
.message-sent.from-whatsapp .message-sender { color: var(--color-sender-whatsapp); }
.message-sent.from-system .message-sender { color: var(--color-sender-system); }

.message-body-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end; /* Alinha meta à direita */
}

.message-content-wrapper {
    flex: 1 1 100%;
    white-space: pre-wrap;
    font-size: 14.2px;
    line-height: 1.4;
    color: var(--color-text);
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px; /* Espaço entre texto e meta */
    flex-shrink: 0;
    align-self: flex-end; /* Alinha na base */
    padding-top: 4px; /* Espaço se o texto quebrar */
}

.message-timestamp {
    font-size: 11px;
    color: var(--color-text-caption);
}

.message-status { display: flex; align-items: center; }
.status-icon { font-size: 16px; color: var(--color-text-caption); }
.status-icon.read { color: #53bdeb; }
.status-icon.failed { color: var(--color-danger); }

.chat-input-container {
    display: flex;
    align-items: flex-end;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
    gap: var(--space-2);
}

.chat-input-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background-color: var(--color-bg-input);
    border-radius: var(--radius-lg);
    padding: 0 var(--space-3);
}

#chatInput {
    flex-grow: 1;
    background: transparent;
    border: none;
    padding: 10px 0;
    color: var(--color-text);
    font-size: 15px;
    outline: none;
    resize: none;
    max-height: 125px;
    line-height: 1.5;
    overflow-y: auto;
}

#chatInput::placeholder { color: var(--color-text-muted); }

.send-button {
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}
.send-button:hover { background-color: var(--color-primary-dark); }
.send-button:disabled { background-color: var(--color-bg-active); cursor: not-allowed; transform: none; }

.attachments-menu {
    position: fixed;
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 2000;
    overflow: hidden;
    animation: menuFadeIn 0.2s ease;
    transform-origin: bottom left;
    border: 1px solid var(--color-border);
    padding: var(--space-2);
}
.attachments-menu.hidden { display: none !important; }
.attachments-menu .menu-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer; transition: background-color var(--transition-fast); }
.attachments-menu .menu-item:hover { background-color: var(--color-bg-hover); }
.attachments-menu .material-icons-round { font-size: var(--font-size-lg); color: var(--color-text-secondary); }

   /* Menus de contexto (tags, ações) */
   .context-menu {
     position: absolute;
     background-color: var(--color-bg-card);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     padding: var(--space-3);
     z-index: 100;
     min-width: 200px;
     transform-origin: top left;
     animation: menuFadeIn 0.2s ease-out;
   }

   .context-menu h3 {
     font-size: var(--font-size-md);
     color: var(--color-text-secondary);
     margin-bottom: var(--space-2);
     padding-bottom: var(--space-2);
     border-bottom: 1px solid var(--color-divider);
   }

   .context-menu .menu-item {
     padding: var(--space-2) var(--space-3);
     border-radius: var(--radius-sm);
     color: var(--color-text);
     cursor: pointer;
     transition: background-color var(--transition-fast);
   }

   .context-menu .menu-item:hover {
     background-color: var(--color-bg-hover);
   }

   .tag-menu-scrollable {
     max-height: 200px; /* Altura máxima para scroll */
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     padding-right: var(--space-1); /* Espaço para a scrollbar */
   }

   /* Modais */
   .modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--color-overlay);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transition: opacity var(--transition-normal), visibility var(--transition-normal);
   }

   .modal.visible {
     opacity: 1;
     visibility: visible;
   }
.modal-content {
 display: flex;
 flex-direction: column;
 width: 90%;
 max-width: 800px;
 max-height: 90vh;
 background-color: var(--color-bg-alt);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-xl);
 animation: modalIn var(--transition-normal);
 overflow: hidden; /* O container principal esconde o overflow */
}

@keyframes modalIn {
 from { transform: translateY(20px) scale(0.98); opacity: 0; }
 to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-content.modal-small {
 max-width: 500px;
}

.modal-header, .modal-footer, .settings-nav {
 flex-shrink: 0; /* Garante que header, footer e nav não encolham */
}

.modal-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--space-4);
 border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
 font-size: var(--font-size-xl);
 font-weight: 700;
 margin: 0;
}

.modal-body {
 flex-grow: 1; /* Permite que o corpo cresça */
 min-height: 0; /* Essencial para o overflow funcionar em flex-children */
 overflow: hidden; /* O corpo em si não rola, as abas dentro dele sim */
 display: flex;
 flex-direction: column;
}

.modal-footer {
 display: flex;
 justify-content: flex-end;
 gap: var(--space-3);
 padding: var(--space-4);
 border-top: 1px solid var(--color-divider);
}

.tab-section {
 flex-grow: 1;
 min-height: 0;
 overflow-y: auto; /* Apenas a seção da aba é rolável */
 padding: var(--space-4);
 display: flex; /* Para controlar o conteúdo interno */
 flex-direction: column;
}

.settings-list-container, .archived-list {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
}

/* Garante que o conteúdo da aba "Preferências" não encolha os botões */
#tabBrandingSection .branding-section {
   flex-grow: 1;
   overflow-y: auto; /* Permite rolagem se o conteúdo for muito grande */
}

#tabBrandingSection .form-buttons {
   flex-shrink: 0;
   margin-top: auto; /* Empurra para o final */
   padding-top: var(--space-4);
}

   /* Botões */
   .button {
     background-color: var(--color-bg-input);
     color: var(--color-text);
     border: 1px solid var(--color-border);
     padding: var(--space-2) var(--space-4);
     border-radius: var(--radius-md);
     font-size: var(--font-size-md);
     font-weight: 500;
     cursor: pointer;
     transition: all var(--transition-fast);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-2);
   }

   .button:hover {
     background-color: var(--color-bg-hover);
     border-color: var(--color-text-secondary);
   }

   .button.primary {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
     color: white;
   }

   .button.primary:hover {
     background-color: var(--color-primary-dark);
     border-color: var(--color-primary-dark);
   }

   .button.danger {
     background-color: var(--color-danger);
     border-color: var(--color-danger);
     color: white;
   }

   .button.danger:hover {
     background-color: rgba(var(--color-danger-rgb), 0.8);
     border-color: rgba(var(--color-danger-rgb), 0.8);
   }

   .button.small {
     padding: var(--space-1) var(--space-2);
     font-size: var(--font-size-sm);
   }

   .icon-button {
     background: none;
     border: none;
     color: var(--color-text-secondary);
     font-size: var(--font-size-xl);
     cursor: pointer;
     padding: var(--space-1);
     border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .icon-button:hover {
     background-color: var(--color-bg-hover);
     color: var(--color-text);
   }

   /* Formulários e Inputs */
   .form-group {
     margin-bottom: var(--space-4);
   }

   .form-group label {
     display: block;
     font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
     margin-bottom: var(--space-2);
     font-weight: 500;
   }

   .form-input,
   .form-select,
   .behavior-textarea {
     width: 100%;
     padding: var(--space-2) var(--space-3);
     background-color: var(--color-bg-input);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     color: var(--color-text);
     font-size: var(--font-size-md);
     transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   }

   .form-input:focus,
   .form-select:focus,
   .behavior-textarea:focus {
     outline: none;
     border-color: var(--color-primary);
     box-shadow: 0 0 0 2px var(--color-primary-transparent);
   }

   .form-input.invalid-field,
   .form-select.invalid-field,
   textarea.invalid-field {
       border-color: var(--color-danger) !important;
       box-shadow: 0 0 0 2px rgba(var(--color-danger-rgb), 0.3) !important;
   }

   .form-input[readonly] {
     background-color: var(--color-bg-input); /* Cor de fundo para readonly */
     cursor: default;
     opacity: 0.8;
   }

   .form-hint {
     font-size: var(--font-size-xs);
     color: var(--color-text-muted);
     margin-top: var(--space-1);
     line-height: 1.4;
   }

   /* Toggle Switch */
   .toggle-switch {
     position: relative;
     display: inline-block;
     width: 48px; /* Largura maior */
     height: 24px; /* Altura maior */
     flex-shrink: 0; /* Não encolher */
   }

   .toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
   }

   .toggle-slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: var(--color-bg-input);
     border: 1px solid var(--color-border);
     transition: .4s;
     border-radius: var(--radius-full);
   }

   .toggle-slider:before {
     position: absolute;
     content: "";
     height: 16px; /* Tamanho do círculo */
     width: 16px; /* Tamanho do círculo */
     left: 3px; /* Posição inicial */
     bottom: 3px; /* Posição inicial */
     background-color: var(--color-text-secondary);
     transition: .4s;
     border-radius: 50%;
   }

   input:checked + .toggle-slider {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
   }

   input:focus + .toggle-slider {
     box-shadow: 0 0 0 2px var(--color-primary-transparent);
   }

   input:checked + .toggle-slider:before {
     transform: translateX(24px); /* Mover para a direita (48 - 16 - 2*3 = 26px) */
     background-color: white;
   }

   /* Color Picker */
   .color-picker {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     width: 40px; /* Tamanho do input de cor */
     height: 40px;
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     background-color: transparent;
     cursor: pointer;
     padding: 0;
     overflow: hidden; /* Para esconder o seletor padrão */
   }

   .color-picker::-webkit-color-swatch-wrapper {
     padding: 0;
   }

   .color-picker::-webkit-color-swatch {
     border: none;
     border-radius: var(--radius-md);
   }

   .color-picker::-moz-color-swatch-wrapper {
     padding: 0;
   }

   .color-picker::-moz-color-swatch {
     border: none;
     border-radius: var(--radius-md);
   }

   /* File Upload */
   .file-upload-container {
     display: flex;
     align-items: center;
     gap: var(--space-3);
     margin-bottom: var(--space-3);
   }

   .file-upload-container .button {
     flex-shrink: 0;
   }

   .file-upload-container span {
     font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

   .media-size-info {
     display: flex;
     align-items: center;
     gap: var(--space-1);
     font-size: var(--font-size-xs);
     color: var(--color-text-muted);
     margin-top: var(--space-2);
   }

   .media-size-info .material-icons-round {
     font-size: var(--font-size-sm);
   }

   /* Date and Time Inputs */
   .date-time-container {
     display: flex;
     gap: var(--space-3);
   }

   .date-time-container .form-input {
     flex: 1;
   }

   /* Loading Indicator */
   .loading-indicator {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-2);
     color: var(--color-text-secondary);
     font-size: var(--font-size-md);
     padding: var(--space-4);
   }

   .loading-indicator.small {
     font-size: var(--font-size-sm);
     padding: var(--space-2);
   }

   .loading-indicator .material-icons-round {
     font-size: var(--font-size-xl);
     color: var(--color-primary);
   }

   .loading-indicator .spin {
     animation: spin 1.5s linear infinite;
   }

   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }

   /* Toast Notifications */
   .toast {
     position: fixed;
     bottom: var(--space-4);
     left: 50%;
     transform: translateX(-50%);
     background-color: var(--color-bg-card);
     color: var(--color-text);
     padding: var(--space-3) var(--space-4);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     z-index: 10000;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
     min-width: 250px;
     text-align: center;
   }

   .toast.show {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(-10px);
   }

   .toast.success {
     background-color: var(--color-success);
     color: white;
   }

   .toast.error {
     background-color: var(--color-danger);
     padding: var(--space-3);
     background-color: var(--color-bg-hover);
     border-radius: var(--radius-md);
   }

   .plan-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: var(--space-1) var(--space-2);
     background-color: var(--color-primary);
     color: white;
     font-size: var(--font-size-xs);
     font-weight: 500;
     border-radius: var(--radius-full);
   }

   .logout-warning {
     color: var(--color-warning);
     font-size: var(--font-size-xs);
     margin-top: var(--space-2);
   }

   /* Elementos comuns */
   .tag {
     display: inline-flex;
     align-items: center;
     height: var(--tag-height);
     padding: 0 var(--space-2);
     border-radius: var(--radius-full);
     font-size: var(--font-size-xs);
     background-color: var(--color-primary); /* Default background, often overridden by JS/inline style */
     /* color: white; -- REMOVED: JS (`utils.updateTagTextContrast`) will set this based on background */
     font-weight: 500;
     margin-right: var(--space-1);
     margin-bottom: var(--space-1);
     white-space: nowrap;
   }

   /* Ajuste específico para tag "Atendimento IA" - Cor Laranja Escuro */
   .tag[data-tag="Atendimento IA"] {
     background-color: var(--color-ia-tag) !important; /* Usa a variável */
     color: white !important; /* Forçar branco para IA, overrides JS contrast logic */
   }

   /* Badge (indicador de não lido) */
   .badge {
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 20px;
     height: 20px;
     background-color: var(--color-primary);
     color: white;
     border-radius: var(--radius-full);
     font-size: var(--font-size-xs);
     font-weight: 600;
   /* Menu de anexos */
   .attachments-menu {
     position: fixed;
     background-color: var(--color-bg-card);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     min-width: 180px;
     z-index: 2000;
     overflow: hidden;
     animation: menuFadeIn 0.2s ease;
     transform-origin: bottom left; /* Anima a partir do canto inferior esquerdo */
     border: 1px solid var(--color-border);
     padding: var(--space-2);
   }

   .attachments-menu.hidden {
        display: none !important;
   }
   
   .attachments-menu .menu-item {
     display: flex;
     align-items: center;
     gap: var(--space-2);
     padding: var(--space-2) var(--space-3);
     border-radius: var(--radius-sm);
     color: var(--color-text);
     cursor: pointer;
     transition: background-color var(--transition-fast);
   }
   
   .attachments-menu .menu-item:hover {
     background-color: var(--color-bg-hover);
   }
   
   .attachments-menu .material-icons-round {
     font-size: var(--font-size-lg);
     color: var(--color-text-secondary);
   }

   /* Menu de tags com scroll */
   .tag-menu-scrollable {
     max-height: 250px;
     overflow-y: auto;
   }

   .menu-item {
     display: flex;
     align-items: center;
     padding: var(--space-2) var(--space-3);
     cursor: pointer;
     font-size: var(--font-size-sm);
     border-radius: var(--radius-sm);
     transition: background-color var(--transition-fast);
     gap: var(--space-2); /* Espaçamento entre ícone e texto */
   }

   .menu-item:hover {
     background-color: var(--color-bg-hover);
   }

   .menu-item .material-icons-round {
     font-size: 18px;
     /* margin-right: var(--space-2); Removido, usando gap */
     flex-shrink: 0;
   }

   /* Tags no menu de contexto */
   .tag-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--space-1) var(--space-3);
     border-radius: var(--radius-sm);
     cursor: pointer;
     transition: background var(--transition-fast);
     gap: var(--space-2); /* Espaçamento */
   }

   .tag-row:hover {
     background-color: var(--color-bg-hover);
   }

   .tag-row.active {
     background-color: var(--color-bg-active);
   }

   .tag-row .tag {
     margin: 0; /* Resetar margens */
     flex-grow: 1; /* Ocupar espaço */
   }

   .tag-actions {
     display: flex;
     align-items: center;
     flex-shrink: 0;
   }
    .tag-actions .material-icons-round {
       font-size: 18px;
       color: var(--color-primary);
    }
    .tag-row.active .tag-actions .material-icons-round {
        color: var(--color-success);
    }


   /* Modal padrão */
   .modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--color-overlay);
     z-index: 1000;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity var(--transition-normal), visibility var(--transition-normal);
     backdrop-filter: blur(5px);
     padding: var(--space-2); /* Padding para não colar nas bordas */
   }

   .modal.visible {
     opacity: 1;
     visibility: visible;
   }

   .modal-content.modal-small {
     max-width: 500px;
   }

   .modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--space-4);
     border-bottom: 1px solid var(--color-border);
     flex-shrink: 0; /* Impedir que o header e a navegação das abas encolham */
   }

   .modal-header h2 {
     font-size: var(--font-size-lg);
     margin: 0;
   }

   .modal-small .modal-body {
      text-align: center; /* Centralizar texto em modais pequenos */
      padding: var(--space-4);
   }


   .modal-footer {
 /* Ajuste para o conteúdo dentro das seções de abas */
 .tab-section > *:first-child {
     margin-top: 0;
 }
 .tab-section > *:last-child {
     margin-bottom: 0;
 }
     display: flex;
     justify-content: flex-end;
     padding: var(--space-4);
     border-top: 1px solid var(--color-border);
     gap: var(--space-3);
     flex-shrink: 0;
     position: relative; /* ADDED: Para garantir que o z-index funcione bem com o conteúdo do modal */
     z-index: 1; /* ADDED: Para estar acima do modal-body, mas abaixo dos toasts */
   }

   .warning-text {
     color: var(--color-warning);
     margin-top: var(--space-2);
     font-size: var(--font-size-sm);
   }

   /* Legenda de mídia */
   .media-caption-content { /* Usado em múltiplos modais */
     display: flex;
     flex-direction: column;
     flex: 1;
     min-height: 0;
     overflow-y: auto;
   }

   .media-preview-container {
     padding: var(--space-4);
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--color-bg-alt);
     border-bottom: 1px solid var(--color-border);
     flex-shrink: 0; /* Não encolher */
     min-height: 150px; /* Altura mínima */
   }

   .media-preview {
     max-width: 100%;
     max-height: 300px;
     overflow: hidden;
     border-radius: var(--radius-md);
   }

   .media-preview img,
   .media-preview video {
     max-width: 100%;
     max-height: 300px;
     object-fit: contain;
     display: block;
   }

   /* MODIFICAÇÃO: Estilos para preview de áudio no agendamento */
   .media-player-container {
     display: flex;
     justify-content: center; /* Centralizar o player */
     align-items: center;
     width: 100%;
   }
   #scheduleAudioPreviewElement {
     display: none; /* Começa escondido */
     width: 100%;
     max-width: 300px;
     margin-top: var(--space-2);
     height: 40px; /* Altura padrão para controles */
   }
   /* --- FIM MODIFICAÇÃO Áudio --- */

   .media-caption-form {
     padding: var(--space-4);
     flex: 1;
     min-height: 0;
     display: flex;
     flex-direction: column;
   }
    .media-caption-form .form-group {
       margin-bottom: var(--space-3); /* Menos margem */
    }
     .media-caption-form .form-buttons {
         margin-top: auto; /* Empurra botões para baixo */
         padding-top: var(--space-4);
         flex-shrink: 0; /* Garantir que botões não encolham */
     }


   /* Abas da configuração */
   .settings-nav {
     display: flex;
     flex-shrink: 0; /* Impedir que o header e a navegação das abas encolham */
     padding: 0; /* Remover padding aqui, pois o modal-content já tem */
     border-bottom: 1px solid var(--color-border);
     overflow-x: auto;
     scrollbar-width: none;
   }

   .settings-nav::-webkit-scrollbar { /* Corrigido de .settings-tabs */
     display: none;
   }

   .settings-tab-button {
     background: transparent;
     border: none;
     color: var(--color-text-muted);
     padding: var(--space-3) var(--space-2);
     margin-right: var(--space-2);
     font-size: var(--font-size-sm);
     cursor: pointer;
     position: relative;
     transition: color var(--transition-fast);
     white-space: nowrap;
     /* Adicionar padding lateral para as abas, se o padding do modal-content for removido */
     padding-left: var(--space-4);
     padding-right: var(--space-4);
   }

   .settings-tab-button:hover {
     color: var(--color-text);
   }

   .settings-tab-button.active {
     color: var(--color-primary);
     font-weight: 500;
   }

   .settings-tab-button.active::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     height: 2px;
     background-color: var(--color-primary);
     border-radius: var(--radius-full);
   }

   .tab-section h3 {
     margin-bottom: var(--space-3);
     color: var(--color-text);
     font-size: var(--font-size-md);
     flex-shrink: 0;
   }

   #settingsModal .modal-body > .tab-section.hidden {
     display: none !important;
   }

   /* Estilos para os containers de lista dentro das tabs */  
   #archivedConversations {
     flex-grow: 1;
     min-height: 0;
     overflow-y: auto;
   }
   /* Ajuste específico para .schedules-global-list que tinha margin-top */
   #allSchedulesList {
     flex-grow: 1;
     min-height: 0;
     overflow-y: auto;
     margin-top: 0; /* Remover margin-top se agora é flex-grow, padding pode ser usado */    padding-top: var(--space-2); /* Exemplo de padding em vez de margin */
   }


   /* Formulários */
   .form-group {
     display: flex;
     flex-wrap: wrap; /* Permitir quebra de linha */
     gap: var(--space-2) var(--space-3); /* Espaço vertical e horizontal */
     margin-bottom: var(--space-4);
     align-items: center; /* Alinhar itens na linha */
   }

   .form-group label {
     font-weight: 500;
     display: block; /* Ocupa linha inteira por padrão */
     margin-bottom: var(--space-1);
     color: var(--color-text);
     width: 100%; /* Forçar largura total por padrão */
     flex-basis: 100%; /* Base flex para ocupar linha */
   }

 .form-group.switch-group {
     display: flex;
     align-items: center;
     justify-content: space-between; /* Label à esquerda, toggle à direita */
 .form-group.switch-group .toggle-switch {
     flex-grow: 0; /* Impede que o switch cresça e ocupe todo o espaço */
     flex-shrink: 0; /* Impede que o switch encolha */
 }
     flex-wrap: nowrap; /* Impedir quebra de linha entre label e toggle */
     margin-bottom: var(--space-3); /* Ajustar margem se necessário */
 }

 .form-group.switch-group .toggle-switch {
     flex-grow: 0; /* Impede que o switch cresça e ocupe todo o espaço */
     flex-shrink: 0; /* Impede que o switch encolha */
 }


   .form-hint {
     width: 100%;
     font-size: var(--font-size-xs);
     color: var(--color-text-muted);
     margin-top: var(--space-1);
     flex-basis: 100%; /* Ocupar linha */
   }

/* --- Onboarding Modal --- */
#onboarding-modal .modal-content {
    max-width: 600px;
}

#onboarding-progress {
    display: flex;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.progress-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    flex-grow: 1;
    justify-content: center;
    position: relative;
}

.progress-step .step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all var(--transition-normal);
}

.progress-step .step-label {
    display: none; /* Hide labels on small screens */
}

@media (min-width: 600px) {
    .progress-step .step-label {
        display: block; /* Show labels on larger screens */
    }
}

/* Active and Completed States */
.progress-step.active .step-number,
.progress-step.completed .step-number {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: white;
}

.progress-step.active .step-label {
    color: var(--color-text);
    font-weight: 600;
}

.progress-step.completed .step-label {
    color: var(--color-text-secondary);
}

/* Connector line */
.progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(50% + 20px);
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    width: calc(100% - 40px);
    background-color: var(--color-border);
    z-index: -1;
}

.progress-step.completed::after {
    background-color: var(--color-primary);
}


#onboarding-modal .modal-body {
    padding: 0; /* Remove default padding to allow full-width steps */
}

.onboarding-step {
    display: none; /* Hide all steps by default */
    padding: var(--space-6);
    animation: fadeIn 0.5s ease;
}

.onboarding-step.active {
    display: block; /* Show only the active step */
}

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

#onboarding-step-success {
    text-align: center;
    padding: var(--space-10) var(--space-6);
}

#onboarding-step-success .material-icons-round {
    font-size: 64px;
    color: var(--color-success);
    margin-bottom: var(--space-4);
}

#onboarding-step-success h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

#onboarding-step-success p {
    color: var(--color-text-secondary);
    max-width: 400px;
    margin: 0 auto var(--space-6) auto;
}

#onboarding-modal .modal-footer {
    justify-content: space-between;
}

   .range-input-container {
     display: flex;
     align-items: center;
     gap: var(--space-3);
     width: 100%;
   }

   .range-slider {
     flex: 1;
     height: 6px;
     -webkit-appearance: none;
     appearance: none;
     background: var(--color-bg-input);
     border-radius: var(--radius-full);
     outline: none;
     cursor: pointer;
   }

   .range-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: var(--color-primary);
     cursor: pointer;
   }

   .range-slider::-moz-range-thumb {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: var(--color-primary);
     cursor: pointer;
     border: none;
   }
    .range-value { /* Span com o valor */
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        min-width: 80px; /* Espaço mínimo */
        text-align: right;
    }

   .form-input,
   .form-select,
   .behavior-textarea {
     flex: 1; /* Ocupar espaço */
     min-width: 150px; /* Largura mínima */
     background-color: var(--color-bg-input);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: var(--space-2) var(--space-3);
     color: var(--color-text);
     font-size: var(--font-size-sm);
   }
    .form-group > .form-input,
    .form-group > .form-select { /* Fazer input/select ocupar linha se for o único elemento após label */
        width: 100%;
        flex-basis: 100%;
    }
    .date-time-container > .form-input { /* Inputs de data/hora dividem espaço */
        width: auto;
        flex-basis: auto;
    }
    .form-group > .color-picker + .button { /* Botão ao lado do color picker */
       width: auto;
       flex-basis: auto;
       flex-grow: 0;
    }


   .form-input:focus,
   .form-select:focus,
   .behavior-textarea:focus {
     outline: none;
     border-color: var(--color-primary);
     box-shadow: 0 0 0 2px var(--color-primary-transparent);
   }

   .form-select {
     cursor: pointer;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238696a0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right var(--space-2) center;
     padding-right: var(--space-6); /* Espaço para a seta */
   }


   .color-picker {
     width: 36px;
     height: 36px;
     border: 1px solid var(--color-border);
     background: none;
     cursor: pointer;
     border-radius: var(--radius-sm);
     overflow: hidden;
     padding: 2px; /* Padding interno */
     flex-shrink: 0;
   }
   input[type="color"]::-webkit-color-swatch-wrapper {
       padding: 0;
   }
   input[type="color"]::-webkit-color-swatch {
       border: none;
       border-radius: 2px;
   }
    input[type="color"]::-moz-color-swatch {
       border: none;
       border-radius: 2px;
   }


   .behavior-textarea {
     width: 100%;
     font-family: monospace;
     line-height: 1.5;
     resize: vertical;
   }

   .form-section {
     background-color: var(--color-bg-alt);
     border-radius: var(--radius-md);
     padding: var(--space-3);
     margin-bottom: var(--space-4);
     flex-shrink: 0; /* Evita que seções de formulário encolham */
   }

   .form-section h4 {
     margin-bottom: var(--space-3);
     color: var(--color-text);
     font-size: var(--font-size-sm);
     border-bottom: 1px solid var(--color-border);
     padding-bottom: var(--space-2);
   }

   /* MODIFICAÇÃO: Estilo para info de tamanho de mídia */
   .media-size-info {
     display: flex;
     align-items: center;
     gap: var(--space-1); /* Reduzido gap */
     font-size: var(--font-size-xs);
     color: var(--color-text-muted);
     margin-top: var(--space-2);
     width: 100%;
     flex-basis: 100%; /* Ocupar linha no form-group */
   }

   .media-size-info .material-icons-round {
     font-size: 14px; /* Menor ícone */
     color: var(--color-text-muted);
     flex-shrink: 0;
   }
   /* --- FIM MODIFICAÇÃO --- */

   /* Botões padrão */
   .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: var(--space-2) var(--space-4);
     background-color: var(--color-bg-hover);
     color: var(--color-text);
     border: 1px solid var(--color-border); /* Borda sutil */
     border-radius: var(--radius-md);
     font-size: var(--font-size-sm);
     font-weight: 500;
     cursor: pointer;
     transition: all var(--transition-fast);
     gap: var(--space-1); /* Espaço entre ícone e texto */
     white-space: nowrap; /* Evitar quebra */
     outline: none;
   }

   .button:hover {
     background-color: var(--color-bg-active);
     transform: translateY(-1px);
     box-shadow: var(--shadow-sm);
     border-color: var(--color-border-dark);
   }
    .button:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-primary-transparent);
    }

   .button.primary {
     background-color: var(--color-primary);
     color: white;
     border-color: var(--color-primary);
   }

   .button.primary:hover {
     background-color: var(--color-primary-dark);
      border-color: var(--color-primary-dark);
   }

   .button.danger {
     background-color: var(--color-danger);
     color: white;
     border-color: var(--color-danger);
   }

   .button.danger:hover {
     background-color: #c0392b; /* Variação mais escura do --color-danger #F44336 */
     border-color: #c0392b;
   }

   .button.small {
     padding: var(--space-1) var(--space-2);
     font-size: var(--font-size-xs);
   }

   .button .material-icons-round {
     font-size: 18px;
     /* margin-right: var(--space-1); Removido, usando gap */
   }
    .button[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
    }
    .button[disabled]:hover {
        transform: none;
        box-shadow: none;
    }


   /* Botões de ícone */
   .icon-button {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     background-color: transparent;
     color: var(--color-text-muted);
     border: none;
     border-radius: 50%;
     cursor: pointer;
     transition: all var(--transition-fast);
     flex-shrink: 0; /* Não encolher */
     outline: none;
   }

   .icon-button:hover {
     background-color: var(--color-bg-hover);
     color: var(--color-text);
     transform: scale(1.05);
   }
    .icon-button:focus {
        box-shadow: 0 0 0 2px var(--color-primary-transparent);
    }
    .icon-button[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
        background-color: transparent !important;
        color: var(--color-text-muted) !important;
        transform: none !important;
    }


   .icon-button .material-icons-round {
     font-size: 20px;
   }

   .fixed-badge {
     background-color: var(--color-bg-active);
     color: var(--color-text-muted);
     padding: var(--space-1) var(--space-2);
     border-radius: var(--radius-full);
     font-size: var(--font-size-xs);
   }

   /* START: Styles for tag editing in settings modal */
   .tag-list {
     /* Adjusted to use flex properties for scrolling within .tab-section */
     flex-grow: 1;
     min-height: 0;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
     padding-top: var(--space-2); /* Adicionar padding superior para a lista de tags */
   }

   .tag-item {
     display: flex;
     flex-direction: column;
     padding: var(--space-2);
     background-color: var(--color-bg-alt);
     border-radius: var(--radius-md);
     gap: var(--space-2);
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
     overflow: hidden;
   }

   .tag-item:hover {
     transform: translateY(-1px);
     box-shadow: var(--shadow-sm);
   }

   .tag-display-view, .tag-edit-view {
     display: flex;
     align-items: center;
     gap: var(--space-3);
     width: 100%;
   }

   .tag-color-preview {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 1px solid var(--color-border);
     flex-shrink: 0;
   }

   .tag-name-preview {
     flex-grow: 1;
     color: var(--color-text);
     font-size: var(--font-size-sm);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

   .tag-item .item-actions {
     display: flex;
     gap: var(--space-2);
     flex-shrink: 0;
     margin-left: auto;
   }

   .tag-edit-view.hidden {
     display: none !important;
   }

   .tag-color-input-edit {
     width: 28px;
     height: 28px;
     border: 1px solid var(--color-border);
     background: transparent;
     cursor: pointer;
     border-radius: var(--radius-sm);
     padding: 2px;
     flex-shrink: 0;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     box-sizing: border-box;
   }
   .tag-color-input-edit::-webkit-color-swatch-wrapper { padding: 0; }
   .tag-color-input-edit::-webkit-color-swatch { border: none; border-radius: 2px; width: 100%; height: 100%;}
   .tag-color-input-edit::-moz-color-swatch { border: none; border-radius: 2px; width: 100%; height: 100%;}


   .tag-name-input-edit {
     background-color: var(--color-bg-input);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: var(--space-2) var(--space-3);
     color: var(--color-text);
     font-size: var(--font-size-sm);
     flex-grow: 1;
     height: 36px;
     line-height: normal;
   }
   .tag-name-input-edit:focus {
     outline: none;
     border-color: var(--color-primary);
     box-shadow: 0 0 0 2px var(--color-primary-transparent);
   }

   .tag-item .fixed-badge {
     background-color: var(--color-bg-active);
     color: var(--color-text-muted);
     padding: var(--space-1) var(--space-2);
     border-radius: var(--radius-full);
     font-size: var(--font-size-xs);
     margin-left: var(--space-2);
     flex-shrink: 0;
   }
   /* END: Styles for tag editing in settings modal */


   /* Lista de conversas arquivadas */
   .archived-item {
     display: flex;
     align-items: center;
     padding: var(--space-3);
     background-color: var(--color-bg-alt);
     border-radius: var(--radius-md);
     transition: all var(--transition-fast);
     gap: var(--space-3); /* Espaço entre elementos */
   }

   .archived-item:hover {
     background-color: var(--color-bg-hover);
     transform: translateY(-1px);
     box-shadow: var(--shadow-sm);
   }

   .archived-avatar {
     flex-shrink: 0;
   }

   .archived-avatar img {
     width: var(--avatar-size);
     height: var(--avatar-size);
     border-radius: 50%;
     object-fit: cover;
   }

   .archived-info {
     flex: 1;
     min-width: 0;
   }

   .archived-name {
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

   .archived-phone {
     font-size: var(--font-size-xs);
     color: var(--color-text-muted);
   }
    .archived-time {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
        margin-top: var(--space-1);
    }

    .archived-actions {
        flex-shrink: 0;
    }


   /* Estado vazio */
   .empty-state {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: var(--space-8);
       color: var(--color-text-muted);
       text-align: center;
       flex-grow: 1; /* CORREÇÃO: Usa flexbox para preencher o espaço em vez de altura fixa */
       min-height: 150px; /* Altura mínima */
   }

   .empty-state .material-icons-round {
     font-size: 48px;
     margin-bottom: var(--space-3);
     opacity: 0.5;
   }

   /* Divisória */
   .divider {
     height: 1px;
     background-color: var(--color-border);
     margin: var(--space-4) 0;
   }

   /* Toast notifications --- MODIFIED SECTION --- */
   .toast-container {
       position: fixed;
       bottom: 20px; /* Ou top: 20px; */
       left: 50%;
       transform: translateX(-50%);
       z-index: 10050; /* Increased z-index as requested */
       display: flex;
       flex-direction: column-reverse; /* Para novos toasts aparecerem em cima */
       gap: 10px;
       align-items: center; /* Centraliza toasts se tiverem larguras diferentes */
       pointer-events: none; /* Container não intercepta, toasts individuais sim */
   }

   .toast {
       position: relative; /* Para posicionar o botão de fechar */
       background-color: var(--color-bg-card); /* Fundo escuro */
       color: var(--color-text);
       padding: var(--space-3) var(--space-4);
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-lg);
       font-size: var(--font-size-sm);
       /* z-index: 10050; -- Moved to container */
       transition: transform 0.3s ease-out, opacity 0.3s ease-out, bottom 0.3s ease-out;
       opacity: 0;
       transform: translateY(20px); /* Começa um pouco abaixo e invisível */
       pointer-events: auto; /* DEVE ser auto para permitir clique no botão */
       display: flex; /* Para alinhar ícone, mensagem e botão */
       align-items: center;
       gap: var(--space-2);
       min-width: 280px;
       max-width: 450px;
       border-left-width: 5px; /* Largura da borda colorida */
       border-left-style: solid;
   }

   .toast.visible {
       opacity: 1;
       transform: translateY(0);
   }

   .toast-icon {
       font-size: 20px; /* Tamanho do ícone */
       flex-shrink: 0;
       display: flex; /* Para alinhar ícone material */
       align-items: center;
   }
   .toast-message {
       flex-grow: 1;
       word-break: break-word;
   }

   .toast-close-btn {
       background: transparent;
       border: none;
       color: var(--color-text-muted);
       cursor: pointer;
       padding: 4px;
       margin-left: var(--space-2);
       line-height: 1;
       flex-shrink: 0;
       display: flex; /* Para alinhar ícone material */
       align-items: center;
   }
   .toast-close-btn .material-icons-round {
       font-size: 18px;
       display: block; /* Evitar espaço extra */
   }
   .toast-close-btn:hover {
       color: var(--color-text);
   }

   .toast.toast-success {
       border-left-color: var(--color-success);
   }
   .toast.toast-success .toast-icon {
       color: var(--color-success);
   }

   .toast.toast-info {
       border-left-color: var(--color-info);
   }
   .toast.toast-info .toast-icon {
       color: var(--color-info);
   }

   .toast.toast-warning {
       border-left-color: var(--color-warning);
   }
   .toast.toast-warning .toast-icon {
       color: var(--color-warning);
   }

   .toast.toast-error {
       border-left-color: var(--color-danger); /* Mantém borda temática */
       background-color: var(--color-danger); /* Fundo vermelho para erro */
       color: white; /* Texto branco para bom contraste */
   }
   .toast.toast-error .toast-icon,
   .toast.toast-error .toast-close-btn {
       color: white; /* Ícone e botão de fechar brancos no toast de erro */
   }
   .toast.toast-error .toast-close-btn:hover {
       background-color: rgba(255, 255, 255, 0.15);
   }
   /* --- END MODIFIED TOAST SECTION --- */

   /* Mensagem de erro */
   .error-message {
     display: block;
     text-align: center;
     color: var(--color-danger); /* Usar cor danger */
     margin: var(--space-6) auto;
     padding: var(--space-4);
     background-color: rgba(var(--color-danger-rgb), 0.1); /* Fundo danger transparente (usando a nova cor danger) */
     border: 1px solid var(--color-danger); /* Borda danger */
     border-radius: var(--radius-md);
     max-width: 80%;
     font-size: var(--font-size-sm);
   }

   .error-message.small { /* Smaller version for lists */
       margin: var(--space-1) 0;
       padding: var(--space-1) var(--space-2);
       font-size: var(--font-size-xs);
       text-align: left;
       max-width: 100%;
       border: none; /* Sem borda na versão pequena */
       background-color: transparent; /* Sem fundo na versão pequena */
   }


   /* Loading spinner */
   .loading-indicator {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: var(--space-8);
     color: var(--color-text-muted);
     text-align: center;
     flex: 1;
     min-height: 0;
   }

   .loading-indicator .material-icons-round {
     font-size: 36px;
     margin-bottom: var(--space-3);
   }

   /* --- START: Estilos para Indicador de Loading Inicial --- */

   #initial-loading .material-icons-round {
      font-size: 48px;
      margin-bottom: var(--space-4);
   }
   /* --- END: Estilos para Indicador de Loading Inicial --- */


   /* Estados de mensagem (enviando, erro) */
   .message.sending {
     opacity: 0.7;
   }

   /* Spinner animation */
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }

   .spin {
     animation: spin 1s linear infinite;
   }

   .message.sending .status-icon { /* Replace status icon with spinner */
       width: 14px; /* Match icon size */
       height: 14px;
       border-radius: 50%;
       border: 2px solid var(--color-text-muted);
       border-top-color: transparent;
       animation: spin 1s linear infinite;
       display: inline-block; /* Needed for border animation */
       line-height: 0;
       color: transparent;
       background-color: transparent; /* Garante que não haja fundo */
       box-sizing: border-box;
   }
   .message.sending .status-icon::before {
       content: ""; /* Remove qualquer conteúdo pseudo-elemento */
   }


   .message.error {
     background-color: rgba(var(--color-danger-rgb), 0.1);
   }

   .message.error .status-icon { /* Style error icon */
       color: var(--color-danger);
       width: auto;
       height: auto;
       border: none;
       animation: none;
       font-size: 14px;
       line-height: normal;
   }


   /* Componentes do sistema de automações */
   .automation-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: var(--space-4);
     flex-shrink: 0; /* Ensure header doesn't shrink */
   }

   .automation-item {
     background-color: var(--color-bg-alt);
     border-radius: var(--radius-md);
     overflow: hidden;
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
     border: 1px solid var(--color-border); /* Borda sutil */
   }

   .automation-item:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
   }

   .automation-item .automation-header {
     padding: var(--space-3);
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid transparent; /* Transparente por padrão */
     cursor: pointer;
     margin-bottom: 0; /* Remover margem inferior aqui */
     transition: border-color var(--transition-fast);
   }
    .automation-item .automation-content.expanded + .automation-header, /* Header acima do conteúdo expandido */
    .automation-item .automation-header:hover {
        border-bottom-color: var(--color-border);
    }


   .automation-title {
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: var(--space-2);
     min-width: 0; /* Permitir encolher */
     flex: 1; /* Ocupar espaço */
     overflow: hidden; /* Esconder overflow */
     text-overflow: ellipsis; /* Adicionar '...' */
     white-space: nowrap; /* Não quebrar linha */
   }

   .automation-title .status-indicator {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: var(--color-primary);
     margin-right: var(--space-2);
     flex-shrink: 0;
   }

   .automation-title .status-indicator.inactive {
     background-color: var(--color-text-muted);
   }

   .automation-actions {
     display: flex;
     gap: var(--space-2);
     flex-shrink: 0;
   }

   .automation-content {
     padding: var(--space-3);
     border-top: 1px solid var(--color-border);
     display: none; /* Escondido por padrão */
     background-color: var(--color-bg-card); /* Fundo diferente para conteúdo */
   }

   .automation-item .automation-content:not(.hidden) { /* Garante que está visível se .hidden for removida */
     display: block;
     animation: fadeIn 0.3s ease;
   }

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

   .automation-content .automation-detail {
       font-size: var(--font-size-xs);
       color: var(--color-text-muted);
       margin-bottom: var(--space-1);
       line-height: 1.3;
   }
   .automation-content .automation-detail strong {
       color: var(--color-text-secondary);
       font-weight: 500;
   }
   .automation-content .automation-detail i {
       color: var(--color-text-caption);
       margin-right: var(--space-1);
   }

   .automation-section {
     margin-bottom: var(--space-3);
   }
    .automation-section:last-child {
        margin-bottom: 0;
    }

   .trigger-info, .action-info {
     background-color: var(--color-bg-alt);
     border-radius: var(--radius-sm);
     padding: var(--space-2);
     margin-bottom: var(--space-2);
     border-left: 3px solid var(--color-primary);
     font-size: var(--font-size-xs);
     color: var(--color-text-secondary);
   }
    .trigger-info strong, .action-info strong {
        color: var(--color-text);
        font-weight: 500;
    }

   .trigger-condition {
     padding: var(--space-1) 0;
   }


   /* Formulário de Automação */
#automationForm {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-2);
    box-sizing: border-box;
}

/* Estilos para o novo container de visualização de automação */
.automation-view-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-alt);
}

.automation-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-divider);
}

.automation-view-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
}

.automation-view-actions {
    display: flex;
    gap: var(--space-2);
}

.automation-view-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.automation-view-section h4 {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.automation-view-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-primary);
}

.automation-view-item {
    background-color: var(--color-bg-card);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.automation-item.active-preview {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
   .logic-selector {
     display: flex;
     flex-direction: column;
     gap: var(--space-1);
   }

   .logic-selector .form-select {
       width: auto; /* Permite que o select use o espaço necessário */
       flex-grow: 1;  /* Ocupa o espaço restante na linha se houver */
   }
    border-bottom-color: transparent;
}

.automation-preview {
    background-color: var(--color-bg-alt);
    padding: var(--space-4);
    margin-top: -1px;
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-divider);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    animation: fadeIn 0.3s ease-out;
}

.automation-preview-section {
    margin-bottom: var(--space-4);
}

.automation-preview-section:last-child {
    margin-bottom: 0;
}

.preview-section-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.preview-items-list {
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

    .main-content-wrapper {
        display: flex;
        flex: 1;
        overflow: hidden;
        position: relative;
    }
    
    .sidebar-menu {
        width: 240px;
        background-color: var(--color-bg-alt);
        border-right: 1px solid var(--color-border);
        display: flex;
        flex-direction: column;
        padding: var(--space-4) 0;
        transition: width var(--transition-normal), padding var(--transition-normal);
        flex-shrink: 0;
    }

    body.sidebar-collapsed .sidebar-menu {
        width: 80px;
        padding: var(--space-4) 0;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: 0 var(--space-3);
    }

    body.sidebar-collapsed .sidebar-nav {
        padding: 0 var(--space-2);
    }

    .sidebar-button {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        background-color: transparent;
        border: none;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        text-align: left;
        width: 100%;
        transition: background-color var(--transition-fast), color var(--transition-fast);
        white-space: nowrap;
        overflow: hidden;
    }

    body.sidebar-collapsed .sidebar-button {
        justify-content: center;
        padding: var(--space-3);
    }

    .sidebar-button:hover {
        background-color: var(--color-bg-hover);
        color: var(--color-text);
    }

    .sidebar-button.active {
        background-color: var(--color-primary-transparent);
        color: var(--color-primary) !important; /* Garante que a cor do texto seja aplicada */
    }

    .sidebar-button.active .material-icons-round {
        color: var(--color-primary); /* Garante que a cor do ícone também mude */
    }
 
    .sidebar-button.menu-item-disabled {
        color: var(--color-text-muted);
        cursor: not-allowed;
        background-color: transparent;
        pointer-events: none; /* Impede qualquer evento de clique */
        opacity: 0.5;
    }
 
    .sidebar-button.menu-item-disabled:hover {
        background-color: transparent;
        color: var(--color-text-muted);
    }
 
    .sidebar-button.menu-item-disabled .material-icons-round {
        color: var(--color-text-muted);
    }

    .sidebar-button .sidebar-text {
        transition: opacity 0.2s ease;
    }

    body.sidebar-collapsed .sidebar-button .sidebar-text {
        display: none;
    }

    .sidebar-button .material-icons-round {
        font-size: 22px;
        min-width: 24px; /* Garante alinhamento quando recolhido */
    }
    
    .main-content-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative; /* Para o chat panel */
    }
    
    .main-view {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .main-view.hidden {
        display: none !important;
    }

    .settings-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-4);
        padding-bottom: var(--space-4);
        margin-bottom: var(--space-4);
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }
    .settings-header h3 {
        margin: 0;
        font-size: var(--font-size-2xl);
    }
    
    .settings-content {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    
    .settings-list-container {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
    justify-content: flex-end;
    gap: var(--space-3);
}

   .automation-form.hidden {
     display: none;
   }

   #triggerTextFields, #triggerTimeFields, #triggerMediaFields, #triggerAudioFields, #triggerScheduleFields, #triggerTagFields, #triggerColumnFields {
       display: none !important;
   }

   .actions-list {
     margin: var(--space-3) 0;
   }

   .action-item {
     background-color: var(--color-bg-hover);
     border-radius: var(--radius-md);
     padding: var(--space-3);
     margin-bottom: var(--space-2);
     position: relative;
     border-left: 3px solid var(--color-secondary);
     cursor: grab;
     transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
   }
   .action-item.dragging {
       opacity: 0.7;
       cursor: grabbing;
       box-shadow: var(--shadow-lg);
       transform: scale(1.02);
   }

   .action-type {
     font-weight: 500;
     display: flex;
     align-items: center;
     margin-bottom: var(--space-2);
   }

   .action-type .material-icons-round {
     font-size: 18px;
     margin-right: var(--space-2);
     color: var(--color-secondary);
   }

   .action-content {
     padding-left: calc(18px + var(--space-2));
   }

   .action-content .file-upload-container {
       margin-top: var(--space-2);
   }
   .action-content .action-media-filename {
       color: var(--color-text-muted);
       font-size: var(--font-size-xs);
       word-break: break-all;
       margin-left: var(--space-2);
   }
   .select-action-media-btn {
       padding: var(--space-1) var(--space-3);
       font-size: var(--font-size-xs);
   }
   .select-action-media-btn .material-icons-round {
       font-size: 16px;
   }

   .action-remove {
     position: absolute;
     top: var(--space-2);
     right: var(--space-2);
   }

   /* Menu de Ações - CORRIGIDO com scroll */
   #addActionMenu {
     background-color: var(--color-bg-card);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     padding: var(--space-3);
     position: absolute;
     z-index: 1010; /* Acima do formulário */
     min-width: 250px;
     max-height: 300px; /* Limita a altura máxima */
     overflow-y: auto; /* Adiciona barra de rolagem vertical quando necessário */
     border: 1px solid var(--color-border);
   }

   .action-menu.hidden {
     display: none;
   }

   .action-menu h4 {
     margin-bottom: var(--space-2);
     color: var(--color-text);
     font-size: var(--font-size-sm);
     padding-bottom: var(--space-2);
     border-bottom: 1px solid var(--color-border);
   }

   .action-menu-items {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     gap: var(--space-2);
   }

   .action-menu-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: var(--color-bg-hover);
     border-radius: var(--radius-md);
     padding: var(--space-2);
     cursor: pointer;
     transition: all var(--transition-fast);
     text-align: center;
     height: 80px;
     font-size: var(--font-size-xs); /* Menor fonte */
     border: 1px solid transparent;
   }

   .action-menu-item:hover {
     background-color: var(--color-bg-active);
     transform: translateY(-2px);
     border-color: var(--color-border-dark);
   }

   .action-menu-item .material-icons-round {
     font-size: 24px;
     margin-bottom: var(--space-1);
     color: var(--color-primary);
   }

   /* Sistema de Agendamento */
   .schedule-form {
     flex: 1;
     overflow-y: auto;
     padding: var(--space-4);
     display: flex;
     flex-direction: column;
     min-height: 0;
   }


   .date-time-container {
     display: flex;
     gap: var(--space-3);
     width: 100%; /* Ocupar largura do form-group */
   }
    .date-time-container > .form-input {
        flex: 1; /* Dividir espaço igualmente */
    }


   .file-upload-container {
     display: flex;
     flex-wrap: wrap; /* Permitir quebra */
     align-items: center;
     gap: var(--space-3);
     width: 100%;
   }
    .file-upload-container > .button {
        flex-shrink: 0;
    }


   #scheduleMediaFilename {
     color: var(--color-text-muted);
     font-size: var(--font-size-sm);
     word-break: break-all; /* Quebrar nome longo */
     flex: 1; /* Ocupar espaço */
     min-width: 100px;
   }

   .schedules-list-content {
     padding: var(--space-4);
     max-height: 60vh;
     overflow-y: auto;
   }

   /* Agendamentos Globais */
   .schedules-filters {
     display: flex;
     flex-wrap: wrap; /* Quebrar em telas menores */
     justify-content: space-between;
     gap: var(--space-3);
     margin-bottom: var(--space-4);
     padding-bottom: var(--space-3);
     border-bottom: 1px solid var(--color-border);
     flex-shrink: 0; /* Não encolher filtros */
   }
    .schedules-filters .form-group {
        margin-bottom: 0; /* Remover margem interna */
        flex: 1; /* Tentar ocupar espaço */
        min-width: 200px; /* Largura mínima */
    }


   .schedule-global-item {
     display: flex;
     flex-wrap: wrap; /* Quebrar em telas menores */
     justify-content: space-between;
     padding: var(--space-3);
     margin-bottom: var(--space-3);
     background-color: var(--color-bg-alt);
     border-radius: var(--radius-md);
     transition: transform var(--transition-fast);
     gap: var(--space-2) var(--space-3); /* Espaçamento */
   }

   .schedule-global-item:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-sm);
   }

   .schedule-global-left {
     flex: 1;
     min-width: 200px; /* Largura mínima */
   }


   .schedule-global-contact {
     font-weight: 500;
     color: var(--color-primary);
     margin-bottom: var(--space-1);
   }

   .schedule-global-time {
     display: flex;
     align-items: center;
     gap: var(--space-1);
     color: var(--color-text-secondary);
     font-size: var(--font-size-xs);
     margin-bottom: var(--space-2);
   }
    .schedule-global-time .material-icons-round {
        font-size: 14px;
    }


   .schedule-global-content {
     color: var(--color-text);
     word-break: break-word;
     font-size: var(--font-size-sm);
   }

   .schedule-global-right {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: var(--space-2);
     flex-shrink: 0; /* Prevent shrinking */
   }


   .schedule-status {
     font-size: var(--font-size-xs);
     padding: var(--space-1) var(--space-2);
     border-radius: var(--radius-full);
     display: inline-flex; /* Ensure icon and text align */
     align-items: center;
     gap: var(--space-1);
     white-space: nowrap; /* Prevent status text wrap */
   }

   .schedule-status .material-icons-round {
     font-size: 14px; /* Adjust icon size */
   }


   .schedule-status.pending {
     background-color: var(--color-bg-hover); /* Alterado para usar bg-hover para melhor visibilidade com texto warning */
     color: var(--color-warning);
   }

   .schedule-status.sent {
     background-color: rgba(var(--color-success-rgb), 0.1); /* Usando a nova cor success com alpha */
     color: var(--color-success);
   }

   .schedule-status.error {
     background-color: rgba(var(--color-danger-rgb), 0.1); /* Usando a nova cor danger com alpha */
     color: var(--color-danger);
   }


   .schedule-item {
     background-color: var(--color-bg-alt);
     border-radius: var(--radius-md);
     padding: var(--space-3);
     margin-bottom: var(--space-3);
     display: flex;
     justify-content: space-between;
     align-items: flex-start; /* Alinhar itens ao topo */
     gap: var(--space-2);
   }

   .schedule-item-content {
     flex: 1;
     min-width: 0; /* Permitir encolher */
   }


   .schedule-item-time {
     color: var(--color-primary);
     font-weight: 500;
     margin-bottom: var(--space-1);
     font-size: var(--font-size-sm);
     display: flex;
     align-items: center;
     gap: var(--space-2);
   }

   .schedule-item-time .material-icons-round {
     font-size: 18px;
   }

   .schedule-item-message {
     color: var(--color-text);
     font-size: var(--font-size-sm);
     margin-bottom: var(--space-1);
     word-break: break-word;
   }

   .schedule-item-status {
     display: flex;
     align-items: center;
     font-size: var(--font-size-xs);
     color: var(--color-text-muted);
     margin-top: var(--space-1); /* Espaço acima */
   }

   .schedule-item-status .material-icons-round {
     font-size: 14px;
     margin-right: var(--space-1);
   }

   .schedule-item-actions {
     display: flex;
     gap: var(--space-1);
     flex-shrink: 0; /* Prevent shrinking */
   }


   .empty-schedules {
     padding: var(--space-6);
     text-align: center;
     color: var(--color-text-muted);
   }

   .empty-schedules .material-icons-round {
     font-size: 36px;
     margin-bottom: var(--space-3);
     opacity: 0.7;
   }

   /* Visualizador de Imagens */
   .image-viewer-modal {
     z-index: 1100;
     backdrop-filter: blur(8px);
     background-color: rgba(0, 0, 0, 0.8);
   }

   .image-viewer-content {
     display: flex;
     flex-direction: column;
     width: 90%;
     max-width: 1000px;
     height: 90vh; /* Um pouco maior */
     background-color: transparent; /* Fundo transparente */
     border-radius: 0; /* Sem borda */
     box-shadow: none; /* Sem sombra */
     overflow: visible; /* Permitir overflow dos controles */
   }

   .image-viewer-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-3) var(--space-4);
     background-color: rgba(0,0,0,0.5); /* Fundo semi-transparente */
     color: white;
     position: absolute; /* Posicionar sobre a imagem */
     top: 0;
     left: 0;
     width: 100%;
     z-index: 2;
     border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   }
    .image-viewer-header span { /* Título */
        font-weight: 500;
    }
    .image-viewer-header .icon-button {
        color: white;
    }


   .image-viewer-container {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: auto; /* Permitir scroll/pan */
     background-color: transparent; /* Fundo transparente */
     position: relative;
     width: 100%;
     height: 100%;
   }

   .image-viewer-container img {
     max-width: 95%; /* Não colar nas bordas */
     max-height: 95%;
     object-fit: contain;
     transition: transform var(--transition-normal);
     cursor: grab; /* Indicar que pode arrastar */
   }
    .image-viewer-container img:active {
        cursor: grabbing;
    }


   .image-viewer-controls {
     display: flex;
     justify-content: center;
     gap: var(--space-4);
     padding: var(--space-3);
     background-color: rgba(0,0,0,0.5); /* Fundo semi-transparente */
     position: absolute; /* Posicionar sobre a imagem */
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
     border-radius: var(--radius-lg);
   }
    .image-viewer-controls .icon-button {
        color: white;
        background-color: rgba(255,255,255,0.1);
    }
    .image-viewer-controls .icon-button:hover {
        background-color: rgba(255,255,255,0.2);
    }

   /* Estilos para múltiplos gatilhos */
   .trigger-conditions {
     display: flex;
     flex-direction: column;
     gap: var(--space-3);
     margin-bottom: var(--space-3);
   }

   .trigger-condition-item {
     background-color: var(--color-bg-hover);
     border-radius: var(--radius-md);
     padding: var(--space-3);
     margin-bottom: var(--space-2);
     border-left: 3px solid var(--color-primary);
   }

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

   .condition-title {
     display: flex;
     align-items: center;
     font-weight: 500;
     gap: var(--space-2);
     color: var(--color-text);
   }

   .condition-actions {
     display: flex;
     gap: var(--space-1);
   }

   .condition-content {
     padding-left: calc(18px + var(--space-2)); /* Alinhar com título */
   }

   .condition-fields {
     background-color: var(--color-bg-card);
     border-radius: var(--radius-sm);
     padding: var(--space-3);
     margin-top: var(--space-2);
   }
    .condition-fields .form-group {
        margin-bottom: var(--space-3); /* Menos margem interna */
    }
    .condition-fields .form-group:last-child {
         margin-bottom: 0;
    }


   .condition-fields.hidden {
     display: none;
   }

   /* Interface de seleção lógica E/OU */
   .logic-selector {
     margin-top: var(--space-3);
     background-color: var(--color-bg-alt);
     padding: var(--space-3);
     border-radius: var(--radius-md);
     border-left: 3px solid var(--color-primary-dark);
   }
    .logic-selector .form-group {
        margin-bottom: var(--space-2); /* Menos margem */
    }


   .logic-description {
     font-size: var(--font-size-xs);
     color: var(--color-text-muted);
     margin-top: var(--space-2);
   }


   .notification-icon .material-icons-round {
     font-size: 48px;
   }

   .notification-description {
     color: var(--color-text-muted);
     font-size: var(--font-size-sm);
     margin-top: var(--space-2);
   }

   /* Estilo para automações do sistema */
   .system-automation {
     border-left: 4px solid var(--color-primary);
     background-color: rgba(var(--color-primary-rgb), 0.05);
   }

   .system-automation .fixed-badge {
     background-color: var(--color-primary);
     color: white;
     padding: var(--space-1) var(--space-2);
     border-radius: var(--radius-full);
     font-size: var(--font-size-xs);
     margin-left: var(--space-2);
   }

   /* CORREÇÃO: Modal de documentos para suportar a nova versão com upload */
   #documentUploadModal .modal-content {
     max-width: 500px;
   }

   #documentUploadModal .media-caption-form {
     padding: var(--space-4);
   }

   #documentUploadModal .file-upload-container {
     display: flex;
     flex-direction: column; /* Colocar nome abaixo */
     align-items: flex-start; /* Alinhar à esquerda */
     gap: var(--space-2);
     margin: var(--space-3) 0;
   }

   #documentUploadModal #selectedDocumentName {
     font-size: var(--font-size-sm);
     color: var(--color-text-muted);
     margin-top: var(--space-1);
     word-break: break-all;
   }

   #documentUploadModal .media-size-info {
     display: flex;
     align-items: center;
     gap: var(--space-2);
     margin-top: var(--space-2);
     font-size: var(--font-size-xs);
     color: var(--color-text-muted);
   }

       /* --- Estilos para o Botão de Controle e Estado do Menu Lateral --- */

       #sidebar-toggle:hover {
           background-color: var(--color-bg-hover);
           color: var(--color-text);
       }

       #sidebar-toggle .material-icons-round {
           font-size: 20px;
           transition: transform var(--transition-normal);
       }

       body.sidebar-collapsed #sidebar-toggle {
           left: 80px; /* Largura da sidebar recolhida */
       }

       body.sidebar-collapsed #sidebar-toggle .material-icons-round {
           transform: rotate(180deg);
       }

       body.sidebar-collapsed .sidebar-menu {
           width: 80px;
       }

       body.sidebar-collapsed .sidebar-text {
           display: none;
           opacity: 0;
       }
       
       body.sidebar-collapsed .sidebar-button {
           justify-content: center;
       }


 /* Responsividade */
 @media (max-width: 1200px) {
   :root {
     /* --sidebar-width: 320px; -- Removido */
     --chat-panel-width: 340px;
   }
   .kanban-column {
       width: 280px; /* Reduzir um pouco */
   }
   .desktop-chat-panel.expanded {
       width: 500px; /* Reduzir largura expandida */
   }
   /* Settings modal still uses default 800px max-width or smaller from 992px rule */
 }

 @media (max-width: 992px) {
   :root {
     /* --sidebar-width: 280px; -- Removido */
     --chat-panel-width: 300px;
   }
   .header-title {
     font-size: var(--font-size-md);
   }
   .kanban-column {
     width: 250px; /* Reduzir mais */
   }
    .desktop-chat-panel.expanded {
       width: calc(100% - 20px); /* Quase tela cheia no modo expandido */
       max-width: 450px;
   }
   .crm-controls { /* Adjust controls padding on smaller screens */
       padding: var(--space-2) var(--space-3);
       gap: var(--space-3);
   }
   .crm-filters {
       gap: var(--space-2);
   }  #filterHasTag, #filterNotHasTag, #filterOther {
       min-width: 130px; /* Slightly smaller filters */
   }

 @media (max-width: 992px) {
   #settingsModal .modal-content {
     width: 95vw; /* Aumenta a largura em telas médias */
     max-width: 95vw;
     height: 90vh;
   }
 }

   /* START MODIFICATION - Settings Modal at 992px */
   #settingsModal .modal-content { /* Especificidade para o modal de configurações */
     width: 90vw;
     max-width: 700px;
     height: 85vh; /* Altura relativa à viewport */
     max-height: 600px; /* Limite máximo de altura absoluto */
     display: flex;
     flex-direction: column;
     overflow: hidden; /* Evita que o próprio modal-content tenha scrollbars desnecessárias */
   }
   /* END MODIFICATION */
 }

 @media (max-width: 768px) {
     /* O layout desktop agora se adapta */
     .crm-controls { /* Stack search and filters */
         flex-direction: column;
         align-items: stretch; /* Make items full width */
         gap: var(--space-2);
         padding: var(--space-2);
     }
      .crm-search {
          min-width: unset; /* Remove min-width */
      }
      .crm-filters {
          justify-content: space-between; /* Space out filters/button */
      }
      #clearFiltersBtn {
          margin-left: auto; /* Push button to the right if space allows */
          flex-shrink: 0;
      }

     .kanban-board {
       padding: var(--space-2); /* Menos padding */
     }
     .kanban-columns {
       gap: var(--space-2);
     }
     .kanban-column {
       width: 230px; /* Ainda menor */
     }
     .desktop-chat-panel {
       position: fixed; /* Fixo na tela */
       top: unset; /* Remover top/right */
       right: unset;
       bottom: 0;
       left: 0;
       width: 100%; /* Tela cheia */
       height: 100%; /* Tela cheia */
       max-height: 100%;
       border-radius: 0; /* Sem bordas arredondadas */      transform: translateY(100%); /* Escondido para baixo */
       transition: transform var(--transition-normal);
       z-index: 100;
       box-shadow: none; /* Sombra não necessária */
     }
     .desktop-chat-panel.visible {
       transform: translateY(0); /* Desliza para cima */
       display: flex; /* Garantir display flex */
     }
      .desktop-chat-panel.expanded { /* Modo expandido não faz sentido aqui */
       width: 100%;
     }
     /* Ajustar chat header para telas menores */
      .chat-header {
          height: 56px;
          padding: 0 var(--space-2);
      }
      /* Show chat search container when active */
      .chat-search-container.active {
          display: flex;
      }
      .chat-contact .avatar {
          width: 32px;
          height: 32px;
          margin-right: var(--space-2);
      }
      .chat-display-name {
          font-size: var(--font-size-sm);
      }
      .chat-number {
          font-size: 10px;
      }
      .chat-messages {
          padding: var(--space-2);
          /* padding-bottom: var(--space-10); -- Removido, flex cuida disso */
      }
       .message {
           max-width: 85%;
       }
      .chat-input-container {
          padding: var(--space-2);
          gap: var(--space-2);
      }
      /* MODIFICAÇÃO: Menu de anexos em telas menores */
       .attachments-menu {
         position: fixed; /* Fixed position relative to viewport */
         bottom: 60px; /* Ajuste para nova posição do input */
         left: var(--space-2);
         right: var(--space-2);
         width: auto; /* Largura automática */
         max-width: calc(100vw - 2 * var(--space-2)); /* Máxima largura menos padding */
         border-radius: var(--radius-lg);
         transform-origin: bottom center; /* Animate from bottom */
       }      /* --- FIM MODIFICAÇÃO --- */

 @media (max-width: 768px) {
   .modal-content {
     width: 100vw;
     height: 100vh;
     border-radius: 0;
     max-height: 100vh;
     padding: var(--space-2); /* Reduzir padding em telas pequenas */
   }

   .settings-nav {
       padding: 0 var(--space-2);
   }

   .tab-section {
       padding: var(--space-3);
   }
 }
     /* START MODIFICATION - General .modal-content for 768px (applies to #settingsModal) */
     .modal-content { /* Aplica-se a todos os modais, incluindo settings */
       width: 95vw;
       max-width: 100%; /* Pode ocupar mais da largura */
       height: 90vh; /* Mais altura relativa */
       max-height: 95vh; /* Quase tela cheia */
       border-radius: var(--radius-md);
     }
     #settingsModal .modal-content { /* Ajuste específico se necessário */
        border-radius: var(--radius-sm); /* Menor raio em telas pequenas */
     }
     /* END MODIFICATION */
 }

 @media (max-width: 576px) {
   :root {
     --header-height: 56px;
     --font-size-sm: 0.8125rem; /* 13px */
     --font-size-xs: 0.6875rem; /* 11px */
     --space-2: 6px;
     --space-3: 10px;
     --space-4: 14px;
   }
   .app-header {
     padding: 0 var(--space-2);
   }
   .brand-logo-container {
     display: none; /* Esconder logo */
   }
    .header-title {
        font-size: var(--font-size-md); /* Smaller title */
    }
   .crm-filters { /* Ensure filters wrap nicely */
       flex-direction: column;
       align-items: stretch;
       gap: var(--space-2);
   }
   #filterHasTag, #filterNotHasTag, #filterOther {
       min-width: unset; /* Allow full width */
       width: 100%;
   }
   #clearFiltersBtn {
       margin-left: 0; /* Reset margin */
       align-self: flex-end; /* Align button to the right */
   }

   .kanban-board {
       flex: 1;
       display: flex;
       overflow-x: auto; /* Permite rolagem horizontal APENAS das colunas */
       overflow-y: hidden; /* Impede rolagem vertical NO QUADRO TODO */
       padding: var(--space-4);
       gap: var(--space-4);
       background-color: var(--color-bg);
       -webkit-overflow-scrolling: touch;
   }
   .kanban-columns { /* Container das colunas */
       display: flex;
       gap: var(--space-4);
       height: 100%;
   }
   .kanban-column {
     width: 200px; /* Ainda menor */
     padding: var(--space-2);
   }
    .column-header h2 {
        font-size: var(--font-size-sm);
    }
    .crm-card {
        padding: var(--space-2);
        margin-bottom: var(--space-2);
    }
     .card-header {
         margin-bottom: var(--space-2);
     }
    .card-title {
        font-size: var(--font-size-sm);
    }
    .card-phone {
        font-size: 10px;
    }
    .card-time {
        font-size: 10px;
    }
    .card-tags {
        display: none; /* Esconder tags */
    }
    .card-actions .icon-button { /* Reduzir tamanho dos botões de ação */
        width: 30px;
        height: 30px;
    }
     .card-actions .icon-button .material-icons-round {
        font-size: 18px;
    }

   /* Ajustes para modais */
   .modal-content {
     width: 100vw;
     height: 100vh;
     border-radius: 0; /* Tela cheia */
     max-height: 100vh;
   }
   .modal-header { padding: var(--space-2) var(--space-3); }
   .modal-header h2 { font-size: var(--font-size-md); }
   .tab-section { padding: var(--space-3); }
   .settings-nav { padding: 0 var(--space-2); }
   .settings-tab-button { padding: var(--space-2) var(--space-1); font-size: 13px; }
   .image-viewer-content {
     width: 100%;
     height: 100%;
     border-radius: 0;
   }
    .image-viewer-controls {
        gap: var(--space-3);
        padding: var(--space-2);
    }

    /* Ajustes finos formulário automação */
     .logic-selector { padding: var(--space-2); }
     .trigger-condition-item { padding: var(--space-2); }
     .condition-fields { padding: var(--space-2); }
     .action-item { padding: var(--space-2); }
     .action-content { padding-left: var(--space-2); }
     .action-menu-items { grid-template-columns: 1fr 1fr; } /* 2 colunas no menu de ação */

     /* Ajustes agendamentos */
      .schedule-global-item { padding: var(--space-2); }
      .schedule-global-right { align-items: flex-start; } /* Alinhar à esquerda em telas pequenas */
 }
       #tabCsvHelpSection ul {
           list-style-position: inside;
           padding-left: var(--space-4);
           margin-top: var(--space-2);
           display: flex;
           flex-direction: column;
           gap: var(--space-2);
       }
       
       #tabCsvHelpSection ul li {
           color: var(--color-text-secondary);
       }
       
       #tabCsvHelpSection ul li strong {
           color: var(--color-text);
           font-weight: 500;
       }

 /* Scrollbars personalizados */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }

 ::-webkit-scrollbar-track {
   background: var(--color-scrollbar-track);
   border-radius: 3px;
 }

 ::-webkit-scrollbar-thumb {
   background: var(--color-scrollbar-thumb);
   border-radius: 3px;
 }

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

 * {
   scrollbar-width: thin;
   scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
 }
 /* Estilos para a nova opção em "Preferências" (antiga "Identidade") */
 .form-section {
   padding: var(--space-3); /* Padding consistente */
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-4);
   background-color: var(--color-bg-input);
 }

 .form-section h4 {
   margin-bottom: var(--space-3);
   color: var(--color-text);
   font-size: var(--font-size-lg);
 }


 .form-hint {
   font-size: var(--font-size-sm);
   color: var(--color-text-muted);
   margin-top: var(--space-2);
   line-height: 1.4;
 }

 .divider {
   height: 1px;
   background-color: var(--color-divider);
   margin: var(--space-4) 0;
 }

 /* Estilos para o botão de notificações e container de permissão */
 /* Estilos para o container do toggle de notificações na aba Preferências */

 /* A classe .toggle-switch e seus filhos input/span já têm estilos globais.
    O tamanho do .toggle-switch é width: 48px; height: 24px;
    Se precisar de um tamanho diferente especificamente aqui, você pode sobrescrever: */


 /* Estilos para Cards de Grupo no Kanban */
 /* Estilos para Cards de Grupo no Kanban (Kanban.js adiciona esta classe) */
 .crm-card.group-card-kanban {
   min-height: 140px; /* Altura mínima maior */
   padding: var(--space-4); /* Mais padding interno */
   border-left-width: 5px; /* Borda lateral mais grossa */
   border-left-color: var(--color-secondary); /* Cor diferente, ex: roxo ou a cor da coluna 'Grupos' se houver */
 }

 .crm-card.group-card-kanban .card-avatar img {
   width: var(--avatar-size); /* Ajustado para o tamanho padrão do avatar */
   height: var(--avatar-size); /* Adicionado height */
   object-fit: cover; /* Garante que a imagem cubra a área sem distorção */
   height: calc(var(--avatar-size) + 10px);
   border-radius: var(--radius-md); /* Cantos menos arredondados para diferenciar de avatares de usuário */
   object-fit: cover; /* Garante que a imagem cubra o espaço */
 }

 .crm-card.group-card-kanban .card-title {
   font-weight: 700; /* Nome do grupo mais destacado */
   font-size: calc(var(--font-size-md) + 1px); /* Ligeiramente maior */
 }

 /* Estilos para Cards de Grupo (genérico, se usado fora do kanban) */
 .crm-card.group-card {
   padding: var(--space-4); /* Mais padding */
   border-left: 4px solid var(--color-secondary); /* Cor diferente para distinguir */
 }
 .crm-card.group-card .card-avatar img {
   width: calc(var(--avatar-size) + 8px); /* Um pouco maior */
   height: calc(var(--avatar-size) + 8px);
   border-radius: var(--radius-sm); /* Cantos menos arredondados se a imagem for quadrada */
   object-fit: cover; /* Garante que a imagem cubra o espaço */
 }
 .crm-card.group-card .card-title {
   font-weight: 700; /* Nome do grupo mais destacado */
 }

 /* Estilos para Submenu e Modais do Chat de Grupo */
 .group-chat-submenu {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   transform: translateY(100%);
   transition: transform var(--transition-normal);
   z-index: 5; /* Acima do chat-background, abaixo do chat-input-container */
   background-color: var(--color-bg-alt);
   padding: var(--space-2) var(--space-4);
   border-top: 1px solid var(--color-border);
   display: flex;
   gap: var(--space-3);
 }

 .desktop-chat-panel.expanded .group-chat-submenu:not(.hidden) {
    transform: translateY(0); /* Animação de entrada */
 }

 /* Modal "Visualizar Membros" */
 .member-item {
   display: flex;
   align-items: center;
   padding: var(--space-2) 0; /* Menos padding vertical, sem padding horizontal (padding já está no modal-body) */
   border-bottom: 1px solid var(--color-border);
 }
 .member-item:last-child {
   border-bottom: none;
 }
 .member-item .avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   margin-right: var(--space-3);
 }
 .member-name {
   flex-grow: 1;
   color: var(--color-text);
 }
 .member-role-badge {
   font-size: var(--font-size-xs);
   background-color: var(--color-primary);
   color: white;
   padding: 2px 6px;
   border-radius: var(--radius-full);
   margin-left: var(--space-2);
 }

 /* Modal "Identificação dos Membros" */
 .member-context-item {
   margin-bottom: var(--space-3);
   padding-bottom: var(--space-3);
   border-bottom: 1px solid var(--color-divider);
 }
 .member-context-item:last-child {
   border-bottom: none;
   margin-bottom: 0;
 }
 .member-context-item label strong {
   color: var(--color-text-secondary);
 }

 /* Modal "Configurações Especiais de IA para Grupo" */
 #groupIaSpecificMembersSection {
   padding: var(--space-3);
   background-color: var(--color-bg-alt);
   border-radius: var(--radius-md);
 }

 #groupIaMembersListForSelection label {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2); /* Aumentar padding para melhor clique */
   border-radius: var(--radius-sm);
   background-color: var(--color-bg-input);
   cursor: pointer;
   transition: background-color var(--transition-fast);
 }
 #groupIaMembersListForSelection label:hover {
   background-color: var(--color-bg-hover);
 }
 #groupIaMembersListForSelection label input[type="checkbox"] {
   margin-right: var(--space-2); /* Espaço entre checkbox e avatar */
   flex-shrink: 0;
   accent-color: var(--color-primary); /* Estiliza o checkbox em navegadores modernos */
 }
 /* Estilos para .fixed-badge (Adicionado para garantir que as propriedades estejam presentes) */
 .fixed-badge {
   background-color: var(--color-bg-active);
   color: var(--color-text-muted);
   padding: var(--space-1) var(--space-2);
   border-radius: var(--radius-full);
   font-size: var(--font-size-xs);
   margin-left: var(--space-2);
   font-weight: 500;
   display: inline-flex; /* Para alinhar corretamente */
   align-items: center;
      /* Estilos para Cards de Grupo no Kanban (Kanban.js adiciona esta classe) */
      .crm-card.group-card-kanban {
        min-height: 140px; /* Altura mínima maior */
        padding: var(--space-4); /* Mais padding interno */
        border-left-width: 5px; /* Borda lateral mais grossa */
        border-left-color: var(--color-secondary); /* Cor diferente, ex: roxo ou a cor da coluna 'Grupos' se houver */
      }

      .crm-card.group-card-kanban .card-avatar img {
        width: var(--avatar-size); /* Ajustado para o tamanho padrão do avatar */
        height: var(--avatar-size); /* Adicionado height */
        object-fit: cover; /* Garante que a imagem cubra a área sem distorção */
        border-radius: var(--radius-md); /* Cantos menos arredondados para diferenciar de avatares de usuário */
      }

      .crm-card.group-card-kanban .card-title {
        font-weight: 700; /* Nome do grupo mais destacado */
        font-size: calc(var(--font-size-md) + 1px); /* Ligeiramente maior */
      }

      /* Estilos para Submenu e Modais do Chat de Grupo */
      .group-chat-submenu {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: translateY(100%);
        transition: transform var(--transition-normal);
        z-index: 5; /* Acima do chat-background, abaixo do chat-input-container */
        background-color: var(--color-bg-alt);
        padding: var(--space-2) var(--space-4);
        border-top: 1px solid var(--color-border);
        display: flex;
        gap: var(--space-3);
      }

      .desktop-chat-panel.expanded .group-chat-submenu:not(.hidden) {
         transform: translateY(0); /* Animação de entrada */
      }

      /* Modal "Visualizar Membros" */
      .member-item {
        display: flex;
        align-items: center;
        padding: var(--space-2) 0; /* Menos padding vertical, sem padding horizontal (padding já está no modal-body) */
        border-bottom: 1px solid var(--color-border);
      }
      .member-item:last-child {
        border-bottom: none;
      }
      .member-item .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: var(--space-3);
      }
      .member-name {
        flex-grow: 1;
        color: var(--color-text);
      }
      .member-role-badge {
        font-size: var(--font-size-xs);
        background-color: var(--color-primary);
        color: white;
        padding: 2px 6px;
        border-radius: var(--radius-full);
        margin-left: var(--space-2);
      }

      /* Modal "Identificação dos Membros" */
      .member-context-item {
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--color-divider);
      }
      .member-context-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }
      .member-context-item label strong {
        color: var(--color-text-secondary);
      }

      /* Modal "Configurações Especiais de IA para Grupo" */
      #groupIaSpecificMembersSection {
        padding: var(--space-3);
        background-color: var(--color-bg-alt);
        border-radius: var(--radius-md);
      }

      #groupIaMembersListForSelection label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2); /* Aumentar padding para melhor clique */
        border-radius: var(--radius-sm);
        background-color: var(--color-bg-input);
        cursor: pointer;
        transition: background-color var(--transition-fast);
      }
      #groupIaMembersListForSelection label:hover {
        background-color: var(--color-bg-hover);
      }
      #groupIaMembersListForSelection label input[type="checkbox"] {
        margin-right: var(--space-2); /* Espaço entre checkbox e avatar */
        flex-shrink: 0;
        accent-color: var(--color-primary); /* Estiliza o checkbox em navegadores modernos */
      }
      #groupIaMembersListForSelection label .avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        flex-shrink: 0;
      }
 }
 #groupIaMembersListForSelection label .avatar {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   flex-shrink: 0;
 }

      /* --- Estilos para o Modal de Preview de Agendamento --- */
      #schedulePreviewModal .modal-content {
          max-width: 550px;
      }

      #schedulePreviewModal .modal-body {
          padding: var(--space-4);
          display: flex;
          flex-direction: column;
          gap: var(--space-4);
      }

      .preview-section {
          display: flex;
          flex-direction: column;
          gap: var(--space-2);
      }

      .preview-section-title {
          font-size: var(--font-size-sm);
          color: var(--color-text-muted);
          font-weight: 500;
          border-bottom: 1px solid var(--color-border);
          padding-bottom: var(--space-2);
          margin-bottom: var(--space-1);
      }

      #schedulePreviewContact,
      #schedulePreviewDateTime {
          font-size: var(--font-size-md);
          color: var(--color-text);
      }

      #schedulePreviewContent {
          background-color: var(--color-bg-input);
          padding: var(--space-2) var(--space-3);
          border-radius: var(--radius-md);
          white-space: pre-wrap;
          word-break: break-word;
          font-size: var(--font-size-sm);
      }

      #schedulePreviewMedia .document-preview {
          display: flex;
          align-items: center;
          gap: var(--space-3);
          background-color: var(--color-bg-input);
          padding: var(--space-3);
          border-radius: var(--radius-md);
      }
      #schedulePreviewMedia .document-preview .material-icons-round {
          font-size: 36px;
          color: var(--color-primary);
      }
      #schedulePreviewMedia .document-info {
          display: flex;
          flex-direction: column;
          gap: var(--space-1);
          min-width: 0;
      }
      #schedulePreviewMedia .document-name {
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      #schedulePreviewMedia .document-type {
          font-size: var(--font-size-xs);
          color: var(--color-text-muted);
      }


      #schedulePreviewError {
          background-color: rgba(var(--color-danger-rgb), 0.1);
          color: var(--color-danger);
          padding: var(--space-2) var(--space-3);
          border-radius: var(--radius-md);
          font-size: var(--font-size-sm);
      }

      .schedule-status-preview {
          display: inline-flex;
          align-items: center;
          gap: var(--space-2);
          font-weight: 500;
          padding: var(--space-1) var(--space-3);
          border-radius: var(--radius-full);
          font-size: var(--font-size-sm);
      }
      .schedule-status-preview .material-icons-round {
          font-size: 18px;
      }

      .schedule-status-preview.status-pending { color: var(--color-warning); background-color: rgba(var(--color-warning-rgb), 0.1); }
      .schedule-status-preview.status-sent { color: var(--color-success); background-color: rgba(var(--color-success-rgb), 0.1); }
      .schedule-status-preview.status-error { color: var(--color-danger); background-color: rgba(var(--color-danger-rgb), 0.1); }
      .schedule-status-preview.status-expired { color: var(--color-text-muted); background-color: var(--color-bg-hover); }

      #schedulePreviewModal .modal-footer {
          background-color: var(--color-bg-card);
      }
 /* Estilos para Avatar e Nome do Remetente em Mensagens de Grupo */
 /* Próximo à linha 3870 */

     .message-group-sender-info {
       display: flex;
       align-items: center;
       margin-bottom: var(--space-1);
     }
     .message-group-sender-avatar {
       width: 24px;
       height: 24px;
       border-radius: 50%;
       margin-right: var(--space-2);
       flex-shrink: 0;
       object-fit: cover;
       background-color: var(--color-bg-hover);
     }
     .message-group-sender-name {
       font-size: var(--font-size-xs);
       font-weight: 500;
       color: var(--color-message-received-name);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 150px;
     }
     .message.group-message .message-content {
         margin-top: var(--space-1);
     }

     /* Estilos para Mídia dentro das Mensagens */
     .message-media-container {
         margin-top: var(--space-2);
     }

     .message-media-image,
     .message-media-video {
         max-width: 100%;
         max-height: 300px;
         border-radius: var(--radius-md);
         object-fit: cover;
         display: block;
         background-color: var(--color-bg);
     }

      .message-media-container audio {
          max-width: 100%;
          width: 290px;
      }

     /* Ajuste para que o conteúdo da mensagem fique abaixo do sender info */
     .message.group-message .message-content { /* .group-message é adicionado via JS */
         margin-top: var(--space-1);
     }
 .crm-card.dragging {
     opacity: 0.7;
     cursor: grabbing; /* Mão fechada durante o arrasto */
     transform: scale(1.02);
     box-shadow: var(--shadow-lg);
 }

 #tabBrandingSection .branding-item {
     display: flex;
     align-items: center;
     gap: var(--space-4);
     padding: var(--space-4);
     background-color: var(--color-bg-card);
     border-radius: var(--radius-lg);
 }

 #tabBrandingSection .branding-logo-container {
     width: 64px; /* Imagem maior */
     height: 64px;
     flex-shrink: 0;
     border-radius: var(--radius-md);
     overflow: hidden;
     border: 2px solid var(--color-border);
 }

 #tabBrandingSection .current-logo {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 #tabBrandingSection #brandTitleInput {
     font-size: var(--font-size-xl);
     font-weight: 600;
     border: none;
     background: transparent;
     padding: 0;
     color: var(--color-text);
 }

 #tabBrandingSection .form-buttons {
     display: flex;
     justify-content: flex-end;
     margin-top: auto; /* Empurra para o final da aba */
     padding-top: var(--space-4);
     border-top: 1px solid var(--color-divider);
 }

 .crm-card.dragging {
     cursor: grabbing;
 }

 /* Chat Group Sender Info */
 .message-group-sender-info {
     display: flex;
     align-items: center;
     margin-bottom: var(--space-1);
 }
 .message-group-sender-avatar {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     margin-right: var(--space-2);
     object-fit: cover;
 }
 .message-group-sender-name {
     font-size: var(--font-size-xs);
     font-weight: 500;
     color: var(--color-message-received-name); /* Cor temática */
 }
 .message.group-message .message-content {
     margin-top: var(--space-1);
 }

 /* Branding Section Layout */
 #tabBrandingSection .branding-item {
     display: flex;
     align-items: center;
     gap: var(--space-4);
     padding: var(--space-4);
 }
 #tabBrandingSection .branding-logo-container {
     width: 64px;
     height: 64px;
     flex-shrink: 0;
     border-radius: var(--radius-md);
     overflow: hidden;
     border: 2px solid var(--color-border-dark);
 }
 #tabBrandingSection .current-logo {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 #tabBrandingSection #brandTitleInput {
     font-size: var(--font-size-xl);
     font-weight: 600;
     border: none;
     background: transparent;
     padding: 0;
     color: var(--color-text);
     cursor: default;
 }

 /* Preferences Save Button */
 #tabBrandingSection .form-buttons {
     margin-top: auto; /* Empurra para o final da aba */
     padding-top: var(--space-4);
     border-top: 1px solid var(--color-divider);
 }

 /* ============================================================ */
 /* CORREÇÕES DE LAYOUT - AUTOMAÇÕES E ABAS DO MODAL           */
 /* ============================================================ */

 /* Garante que o conteúdo de uma automação expandida seja exibido corretamente */
 .automation-item .automation-content:not(.hidden) {
   display: block;
   animation: fadeIn 0.3s ease-in-out;
 }

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

 /* Força as seções das abas a usarem layout de coluna e rolagem vertical */
 .modal-body .tab-section {
     display: flex;
     flex-direction: column;
     overflow-y: auto; /* Permite rolagem vertical interna na aba */
     overflow-x: hidden; /* Proíbe rolagem horizontal */
     height: 100%;
     padding: var(--space-4);
     box-sizing: border-box;
 }

 /* Garante que o formulário de automação use o espaço disponível e role verticalmente */
 #automationForm {
     display: flex;
     flex-direction: column;
     padding: 0; /* Remover padding, a tab-section já tem */
     height: 100%; /* Ocupar toda a altura da tab-section */
 }

 /* Ajusta o espaçamento dos botões do formulário */
 #automationForm .form-buttons {
     margin-top: auto; /* Empurra os botões para o final */
     padding-top: var(--space-4);
     flex-shrink: 0; /* Impede que os botões encolham */
 }

 /* Estilo para campos de formulário com erro de validação */
 .input-error {
   border-color: var(--color-danger) !important;
   box-shadow: 0 0 0 2px rgba(var(--color-danger-rgb), 0.2) !important;
 }
 
 /* --- Estilos para a Nova Modal de Pré-visualização de Mídia --- */
#mediaPreviewModal {
    /* Herda os estilos de .modal, mas podemos adicionar overrides se necessário */
    /* Garante que o flexbox do .modal funcione */
    display: flex;
    align-items: center;
    justify-content: center;
}

#mediaPreviewModal .modal-content {
    max-width: 500px;
    width: 90%;
    /* Garante que o conteúdo interno seja visível e não herde opacidade 0 */
    opacity: 1;
    transform: scale(1); /* Garante que não esteja escalado para 0 */
}
 
 .media-preview-container {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 250px;
   background-color: var(--color-bg);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-4);
   padding: var(--space-2);
   position: relative;
 }
 
 .media-preview-container img,
 .media-preview-container video {
   max-width: 100%;
   max-height: 300px;
   border-radius: var(--radius-sm);
   object-fit: contain;
 }
 
 .media-preview-container audio {
   width: 100%;
 }
 
 .document-preview {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: var(--color-text-secondary);
   padding: var(--space-6);
 }
 
 .document-preview .material-icons-round {
   font-size: 64px;
   margin-bottom: var(--space-3);
   color: var(--color-primary);
 }
 
 .document-preview span {
   font-size: var(--font-size-md);
   word-break: break-all;
 }
 
 #mediaPreviewError {
   color: var(--color-danger);
   text-align: center;
   padding: var(--space-4);
 }
 
 .media-preview-initial-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-6);
    border: 2px dashed var(--color-border-dark);
    border-radius: var(--radius-lg);
    width: 100%;
    height: 100%;
 }
 
 .media-preview-initial-state .material-icons-round {
    font-size: 64px;
    margin-bottom: var(--space-3);
    color: var(--color-text-caption);
 }
 
 .media-preview-initial-state p {
    margin-bottom: var(--space-4);
 }

.qr-code-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.app-container.blurred .main-content {
    filter: blur(8px);
    pointer-events: none;
}

/* --- Estilos para o Novo Filtro do Kanban --- */
.crm-kanban-filters {
    position: relative;
}

#crmFilterMenu {
    width: 220px;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200; /* z-index alto para garantir que fique sobre outros elementos */
}

#crmFilterMenu .menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

#tagFilterModal .tag-filter-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

#tagFilterModal .tag-filter-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

#tagFilterModal .tag-filter-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

#tagFilterModal .tag-filter-item .tag {
    cursor: pointer;
    user-select: none;
    padding: var(--space-1) var(--space-2);
}

/* --- Estilos para o Modal de Preview de Agendamento --- */
#schedulePreviewModal .modal-content {
    max-width: 550px;
}

#schedulePreviewModal .modal-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.preview-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.preview-section-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-1);
}

#schedulePreviewContact,
#schedulePreviewDateTime {
    font-size: var(--font-size-md);
    color: var(--color-text);
}

#schedulePreviewContent {
    background-color: var(--color-bg-input);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--font-size-sm);
}

#schedulePreviewMedia .document-preview {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: var(--color-bg-input);
    padding: var(--space-3);
    border-radius: var(--radius-md);
}
#schedulePreviewMedia .document-preview .material-icons-round {
    font-size: 36px;
    color: var(--color-primary);
}
#schedulePreviewMedia .document-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
#schedulePreviewMedia .document-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#schedulePreviewMedia .document-type {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}


#schedulePreviewError {
    background-color: rgba(var(--color-danger-rgb), 0.1);
    color: var(--color-danger);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.schedule-status-preview {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}
.schedule-status-preview .material-icons-round {
    font-size: 18px;
}

.schedule-status-preview.status-pending { color: var(--color-warning); background-color: rgba(var(--color-warning-rgb), 0.1); }
.schedule-status-preview.status-sent { color: var(--color-success); background-color: rgba(var(--color-success-rgb), 0.1); }
.schedule-status-preview.status-error { color: var(--color-danger); background-color: rgba(var(--color-danger-rgb), 0.1); }
.schedule-status-preview.status-expired { color: var(--color-text-muted); background-color: var(--color-bg-hover); }

#schedulePreviewModal .modal-footer {
    background-color: var(--color-bg-card);
}

/* Estilos para Avatar e Nome do Remetente em Mensagens de Grupo */
.message-group-sender-info {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-1); /* Espaço entre o sender info e o conteúdo da msg */
}

.message-group-sender-avatar {
  width: 24px; /* Tamanho pequeno para o avatar dentro da mensagem */
  height: 24px;
  border-radius: 50%;
  margin-right: var(--space-2);
  flex-shrink: 0;
  object-fit: cover; /* Garante que a imagem do avatar cubra o espaço */
  background-color: var(--color-bg-hover); /* Fallback visual */
}

.message-group-sender-name {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-message-received-name); /* Cor para o nome do remetente no grupo */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px; /* Limitar largura do nome para não quebrar layout */
}




    .destructive-section {
        border: 1px solid var(--color-danger);
        background-color: rgba(var(--color-danger-rgb), 0.05);
    }

    .destructive-section h4 {
        color: var(--color-danger);
    }

/* --- Estilos para o Novo Layout com Sidebar --- */

    .main-content-wrapper {
        display: flex;
        flex: 1;
        overflow: hidden;
        position: relative;
    }
    
    .sidebar-menu {
        width: 240px;
        background-color: var(--color-bg-alt);
        border-right: 1px solid var(--color-border);
        display: flex;
        flex-direction: column;
        padding: var(--space-4) 0;
        transition: width var(--transition-normal), padding var(--transition-normal);
        flex-shrink: 0;
        z-index: 50; /* Para o botão de toggle ficar sobre o conteúdo principal */
    }
    
    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: 0 var(--space-3);
    }
    
    .sidebar-button {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        background-color: transparent;
        border: none;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        text-align: left;
        width: 100%;
        transition: background-color var(--transition-fast), color var(--transition-fast);
        white-space: nowrap;
        overflow: hidden;
    }
    
    .sidebar-button:hover {
        background-color: var(--color-bg-hover);
        color: var(--color-text);
    }
    
    .sidebar-button.active {
        background-color: var(--color-primary-transparent);
        color: var(--color-primary);
    }
    
    .sidebar-button .material-icons-round {
        font-size: 22px;
        min-width: 24px; /* Garante alinhamento quando recolhido */
    }
    
    .main-content-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative; /* Para o chat panel */
    }
    
        .settings-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-4);
            padding-bottom: var(--space-4);
            margin-bottom: var(--space-4);
            border-bottom: 1px solid var(--color-border);
            flex-shrink: 0;
        }
        .settings-header h3 {
            margin: 0;
            font-size: var(--font-size-2xl);
        }
        
        .settings-content {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }
        
        .settings-list-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
    
    .main-view.hidden {
        display: none !important;
    }

/* Conteúdo movido do modal para as novas views */
#tags-view, #automations-view, #schedules-view, #ia-view {
    padding: var(--space-6);
    overflow-y: auto;
}

/* --- Estilos para o Fluxo de QR Code --- */
.qr-error-container {
    text-align: center;
    color: var(--color-text-secondary);
}

.qr-error-container p {
    margin-bottom: var(--space-4);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Alinha o título e o botão */
    padding: 15px 20px;
    border-bottom: 1px solid #444;
    position: relative;
}

.sidebar-toggle-btn {
    background-color: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
}

.sidebar-toggle-btn:hover {
    color: #fff;
}

body.sidebar-collapsed .sidebar-toggle-btn .material-icons-round {
    transform: rotate(180deg);
}

#settings-view {
    padding: 20px;
    color: #333;
}
#settings-view h2, #settings-view h3 {
    color: #444;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-top: 20px;
}
#settings-view .settings-section {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#settings-view label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}
#settings-view input[type="text"],
#settings-view input[type="number"],
#settings-view textarea,
#settings-view select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
}
#settings-view button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}
#settings-view button:hover {
    background-color: #0056b3;
}
        /* ============================================================ */
        /* CORREÇÕES DE ESTILO - MODAL DE CONFIGURAÇÕES             */
        /* ============================================================ */

        /* --- Aba Preferências (antiga Branding) --- */
        #tabBrandingSection .form-section {
            padding: var(--space-4);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            background-color: var(--color-bg-card);
        }

        #tabBrandingSection .branding-item {
            display: flex;
            align-items: center;
            gap: var(--space-4);
        }

        #tabBrandingSection .branding-logo-container {
            width: 64px;
            height: 64px;
            flex-shrink: 0;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 2px solid var(--color-border-dark);
        }

        #tabBrandingSection .current-logo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #tabBrandingSection #brandTitleInput {
            font-size: var(--font-size-xl);
            font-weight: 600;
            border: none;
            background: transparent;
            padding: 0;
            color: var(--color-text);
            cursor: default;
        }

        #tabBrandingSection .destructive-section {
            border-color: var(--color-danger);
            background-color: rgba(var(--color-danger-rgb), 0.05);
        }

        #tabBrandingSection .destructive-section h4 {
            color: var(--color-danger);
        }

        #tabBrandingSection .form-buttons {
            display: flex;
            justify-content: flex-end;
            margin-top: auto;
            padding-top: var(--space-4);
            border-top: 1px solid var(--color-divider);
        }

        /* --- Aba Conversas Arquivadas --- */
        #archivedConversations {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .archived-item {
            display: flex;
            align-items: center;
            padding: var(--space-3);
            background-color: var(--color-bg-card);
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
            gap: var(--space-3);
            border: 1px solid transparent;
        }

        .archived-item:hover {
            border-color: var(--color-border-dark);
            transform: translateY(-1px);
        }

        .archived-avatar {
            flex-shrink: 0;
        }

        .archived-avatar img {
            width: var(--avatar-size);
            height: var(--avatar-size);
            border-radius: 50%;
            object-fit: cover;
        }

        .archived-info {
            flex: 1;
            min-width: 0;
        }

        .archived-name {
            font-weight: 500;
            color: var(--color-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .archived-phone {
            font-size: var(--font-size-xs);
            color: var(--color-text-muted);
        }

        .archived-time {
            font-size: var(--font-size-xs);
            color: var(--color-text-caption);
            margin-top: var(--space-1);
        }

        .archived-actions {
            flex-shrink: 0;
        }
        /* ============================================================ */
        /* ACP - BLOCO DE CORREÇÕES E ESTILOS ADICIONAIS              */
        /* ============================================================ */

        /* --- ESTILIZAÇÃO: TELA DE QR CODE --- */
        .qr-code-container {
            background-color: transparent; /* O fundo deve ser o do body */
        }
        .qr-error-container {
            background-color: var(--color-bg-card);
            padding: var(--space-6);
            border-radius: var(--radius-lg);
            text-align: center;
            box-shadow: var(--shadow-xl);
        }
        .qr-error-container p {
            color: var(--color-text-secondary);
            margin-bottom: var(--space-4);
        }

        /* --- CORREÇÃO: LAYOUT DO CHAT PANEL --- */
        .desktop-chat-panel {
            display: flex;
            flex-direction: column;
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }
        .message-media-image,
        .message-media-video {
            max-width: 100%;
            border-radius: var(--radius-md);
        }
        .chat-search-container {
            display: none;
        }
        .chat-search-container.active {
            display: block;
        }

        /* --- CORREÇÃO: SIDEBAR TOGGLE E ANIMAÇÃO --- */
        .sidebar-header {
            display: flex;
            justify-content: flex-end;
            padding: 0 var(--space-3);
            margin-bottom: var(--space-4);
            height: 36px;
        }
        #sidebar-toggle {
            transition: transform var(--transition-normal);
        }
        body.sidebar-collapsed #sidebar-toggle .material-icons-round {
            transform: rotate(180deg);
        }

        /* --- ESTILIZAÇÃO: MODAL DE CONFIGURAÇÕES --- */
        .settings-nav {
            display: flex;
            flex-shrink: 0;
            border-bottom: 1px solid var(--color-border);
            overflow-x: auto;
        }
        .settings-nav::-webkit-scrollbar { display: none; }
        .settings-tab-button {
            background: transparent; border: none; color: var(--color-text-muted); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); cursor: pointer; position: relative; transition: color var(--transition-fast); white-space: nowrap;
        }
        .settings-tab-button:hover { color: var(--color-text); }
        .settings-tab-button.active { color: var(--color-primary); font-weight: 500; }
        .settings-tab-button.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: var(--color-primary); }
        .tab-section { padding: var(--space-6); overflow-y: auto; }
        #tabBrandingSection .form-section { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg-card); }
        #tabBrandingSection .branding-item { display: flex; align-items: center; gap: var(--space-4); }
        #tabBrandingSection .branding-logo-container { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--color-border-dark); }
        #tabBrandingSection .current-logo { width: 100%; height: 100%; object-fit: cover; }
        #tabBrandingSection #brandTitleInput { font-size: var(--font-size-xl); font-weight: 600; border: none; background: transparent; padding: 0; color: var(--color-text); cursor: default; }
        #tabBrandingSection .destructive-section { border-color: var(--color-danger); background-color: rgba(var(--color-danger-rgb), 0.05); }
        #tabBrandingSection .destructive-section h4 { color: var(--color-danger); }
        #tabBrandingSection .form-buttons { display: flex; justify-content: flex-end; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
        #archivedConversations { display: flex; flex-direction: column; gap: var(--space-3); }
        .archived-item { display: flex; align-items: center; padding: var(--space-3); background-color: var(--color-bg-card); border-radius: var(--radius-md); transition: all var(--transition-fast); gap: var(--space-3); border: 1px solid transparent; }
        .archived-item:hover { border-color: var(--color-border-dark); transform: translateY(-1px); }
        .archived-avatar img { width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; object-fit: cover; }
        .archived-info { flex: 1; min-width: 0; }
        .archived-name { font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .archived-phone { font-size: var(--font-size-xs); color: var(--color-text-muted); }
        .archived-time { font-size: var(--font-size-xs); color: var(--color-text-caption); margin-top: var(--space-1); }
        #tabIntegrationsSection ul { list-style: none; margin-top: var(--space-3); padding-left: var(--space-3); border-left: 2px solid var(--color-border-dark); }
        #tabIntegrationsSection li { margin-bottom: var(--space-2); color: var(--color-text-secondary); }
        #tabIntegrationsSection li strong { color: var(--color-text); }


        /* --- ESTILIZAÇÃO: VIEWS DO MENU LATERAL --- */
        .settings-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
        .settings-header h3 { margin: 0; font-size: var(--font-size-2xl); }
        .settings-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
        .settings-list-container { display: flex; flex-direction: column; gap: var(--space-3); }
        .form-section { margin-bottom: var(--space-4); }

        /* VIEW DE TAGS */
        #createTagForm .form-group { display: flex; gap: var(--space-3); align-items: center; }
        #newTagName { flex-grow: 1; }
        .tag-item { display: flex; flex-direction: column; padding: var(--space-3); background-color: var(--color-bg-alt); border-radius: var(--radius-md); }
        .tag-display-view, .tag-edit-view { display: flex; align-items: center; gap: var(--space-3); }
        .tag-color-preview { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--color-border); }
        .tag-name-preview { flex-grow: 1; }
        .item-actions { margin-left: auto; display: flex; gap: var(--space-2); }

        /* VIEW DE AUTOMAÇÕES */
        .automation-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-bg-alt); }
        .automation-item-content { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); cursor: pointer; }
        .automation-title { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; }
        .status-indicator { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
        .status-indicator.active { background-color: var(--color-success); }
        .status-indicator.inactive { background-color: var(--color-text-muted); }
        .automation-preview { padding: var(--space-4); border-top: 1px solid var(--color-border); background-color: var(--color-bg); }
        .preview-section-title { font-weight: 600; margin-bottom: var(--space-2); color: var(--color-text-secondary); }
        .preview-items-list { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--color-primary); }

        /* VIEW DE IA */
        #ia-view .form-section { padding: var(--space-4); background-color: var(--color-bg-card); border-radius: var(--radius-lg); }
        #ia-view h4 { margin-top: 0; color: var(--color-text-secondary); }
        .range-input-container { display: flex; align-items: center; gap: var(--space-3); width: 100%; }
        .range-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: var(--color-bg-input); border-radius: var(--radius-full); outline: none; cursor: pointer; }
        .range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); cursor: pointer; }
        .range-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); cursor: pointer; border: none; }
/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 15px 20px;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-success {
    background-color: #28a745; /* Verde */
}

.toast-error {
    background-color: #dc3545; /* Vermelho */
}

.message-sender-label {
    font-size: 0.7rem;
    color: #8a9aa0;
    margin-bottom: 4px;
    font-style: italic;
}

.message.from-me .message-sender-label {
    color: #dcf8c6; /* Cor mais clara para o balão de saída */
    opacity: 0.8;
}

/* --- Onboarding Modal --- */
#onboarding-modal .modal-content {
    max-width: 600px;
}

#onboarding-progress {
    display: flex;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.progress-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    flex-grow: 1;
    justify-content: center;
    position: relative;
}

.progress-step .step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all var(--transition-normal);
}

.progress-step .step-label {
    display: none; /* Hide labels on small screens */
}

@media (min-width: 600px) {
    .progress-step .step-label {
        display: block; /* Show labels on larger screens */
    }
}

/* Active and Completed States */
.progress-step.active .step-number,
.progress-step.completed .step-number {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: white;
}

.progress-step.active .step-label {
    color: var(--color-text);
    font-weight: 600;
}

.progress-step.completed .step-label {
    color: var(--color-text-secondary);
}

/* Connector line */
.progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(50% + 20px);
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    width: calc(100% - 40px);
    background-color: var(--color-border);
    z-index: -1;
}

.progress-step.completed::after {
    background-color: var(--color-primary);
}


#onboarding-modal .modal-body {
    padding: 0; /* Remove default padding to allow full-width steps */
}

.onboarding-step {
    display: none; /* Hide all steps by default */
    padding: var(--space-6);
    animation: fadeIn 0.5s ease;
}

.onboarding-step.active {
    display: block; /* Show only the active step */
}

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

#onboarding-step-success {
    text-align: center;
    padding: var(--space-10) var(--space-6);
}

#onboarding-step-success .material-icons-round {
    font-size: 64px;
    color: var(--color-success);
    margin-bottom: var(--space-4);
}

#onboarding-step-success h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

#onboarding-step-success p {
    color: var(--color-text-secondary);
    max-width: 400px;
    margin: 0 auto var(--space-6) auto;
}

#onboarding-modal .modal-footer {
    justify-content: space-between;
}