<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DuoBI | DUOTALK CRM INTELLIGENCE</title>
  <meta name="description" content="Portal DuoBI de Business Intelligence, Auditoria de Conversas e Inteligência Prescritiva para Gestão de Atendimentos do CRM Duotalk com MySQL 8.0." />
  
  <!-- CSS Design System DuoBI -->
  <link rel="stylesheet" href="css/variables.css" />
  <link rel="stylesheet" href="css/base.css" />
  <link rel="stylesheet" href="css/layouts.css" />
  <link rel="stylesheet" href="css/components.css" />
  <link rel="stylesheet" href="css/json-viewer.css" />

  <!-- Chart.js CDN -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>
<body>

  <!-- ==========================================================================
       LOGIN VIEW CONTAINER
       ========================================================================== -->
  <div id="login-view-container" class="hidden" style="position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top right, rgba(0, 245, 155, 0.08), transparent 45%), radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.08), transparent 45%), var(--bg-app); padding: 1.5rem; overflow: hidden;">
    
    <!-- Animated Floating Background Waves -->
    <div class="login-waves-wrapper">
      <svg class="login-wave wave-1" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <path fill="rgba(0, 245, 155, 0.08)" d="M0,192L48,202.7C96,213,192,235,288,229.3C384,224,480,192,576,181.3C672,171,768,181,864,197.3C960,213,1056,235,1152,224C1248,213,1344,171,1392,149.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
      </svg>
      <svg class="login-wave wave-2" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <path fill="rgba(6, 182, 212, 0.12)" d="M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,144C672,139,768,181,864,192C960,203,1056,181,1152,165.3C1248,149,1344,139,1392,133.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
      </svg>
    </div>

    <!-- Login Glass Card -->
    <div class="glass-card" style="position: relative; z-index: 10; width: 100%; max-width: 440px; padding: 2.5rem 2.2rem; border-color: rgba(0, 245, 155, 0.25); box-shadow: var(--shadow-lg);">
      <div style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; margin-bottom: 2rem;">
        <div class="brand-icon-box" style="width: 52px; height: 52px; font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em;">
          DUO
        </div>
        <div>
          <h1 style="font-size: 1.5rem; letter-spacing: -0.02em;">Duo <span>BI</span></h1>
          <p style="font-size: 0.8rem; margin-top: 4px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--primary);">DUOTALK CRM INTELLIGENCE</p>
        </div>
      </div>

      <form id="login-form" style="display: flex; flex-direction: column; gap: 1.15rem;">
        <div style="display: flex; flex-direction: column; gap: 0.35rem;">
          <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted);">E-mail Corporativo</label>
          <input type="email" id="login-email" class="filter-input" placeholder="seu.email@duobi.com.br" required style="padding: 0.65rem 0.95rem; font-size: 0.9rem;" value="admin@duobi.com.br" />
        </div>

        <div style="display: flex; flex-direction: column; gap: 0.35rem;">
          <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted);">Senha de Acesso</label>
          <input type="password" id="login-password" class="filter-input" placeholder="••••••••" required style="padding: 0.65rem 0.95rem; font-size: 0.9rem;" value="admin" />
        </div>

        <button type="submit" id="btn-login-submit" class="btn btn-primary" style="margin-top: 0.5rem; padding: 0.75rem;">
          Entrar no Portal
        </button>
      </form>
    </div>
  </div>

  <!-- ==========================================================================
       MAIN APP CONTAINER (PORTAL DUOBI)
       ========================================================================== -->
  <div id="app-view-container" class="hidden">
    <div id="app-container">
      
      <!-- ==========================================================================
           SIDEBAR NAVIGATION
           ========================================================================== -->
      <aside id="sidebar">
        <!-- Brand Header -->
        <div class="sidebar-brand">
          <div class="brand-icon-box">DUO</div>
          <div class="brand-info">
            <span class="brand-title">Duo <span>BI</span></span>
            <span class="brand-subtitle">DUOTALK CRM INTELLIGENCE</span>
          </div>
        </div>

        <!-- Navigation Links -->
        <nav class="sidebar-nav">
          <span class="nav-section-title">Módulos do Portal</span>
          
          <a href="#overview" class="nav-item active" data-view="overview" id="nav-overview">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
            <span>Visão Geral</span>
          </a>

          <a href="#metrics" class="nav-item" data-view="metrics" id="nav-metrics">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
            <span>Métricas & Operação</span>
          </a>

          <a href="#intelligence" class="nav-item" data-view="intelligence" id="nav-intelligence">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
            <span>Inteligência & Prescrições</span>
            <span class="nav-badge" id="sidebar-intel-badge">3</span>
          </a>

          <a href="#conversations" class="nav-item" data-view="conversations" id="nav-conversations">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
            <span>Histórico de Conversas</span>
          </a>

          <span class="nav-section-title" style="margin-top: 0.75rem;">Sistema & Infra</span>

          <a href="#settings" class="nav-item" data-view="settings" id="nav-settings">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
            <span>Configurações & Logs</span>
          </a>
        </nav>

        <!-- Sidebar Footer -->
        <div class="sidebar-footer">
          <!-- Theme Switcher Button -->
          <button id="btn-theme-toggle" class="btn btn-secondary w-full" style="justify-content: flex-start;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
            <span class="theme-text">Modo Claro</span>
          </button>

          <!-- DB Connection Status Pill -->
          <div class="db-status-pill" id="sidebar-db-status">
            <div class="status-dot"></div>
            <span style="font-weight: 600; color: #fff;">MySQL 8.0</span>
            <span style="color: #94a3b8; font-size: 0.7rem;">(Conectado)</span>
          </div>

          <!-- User Widget -->
          <div class="user-profile-widget">
            <div class="user-avatar-box">
              <img id="sidebar-user-avatar" class="user-avatar" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150" alt="Avatar" />
              <div>
                <div id="sidebar-user-name" class="user-name">DuoBI Admin</div>
                <div id="sidebar-user-role" class="user-role">Head de Inteligência</div>
              </div>
            </div>
            <button id="btn-logout" class="btn-icon-ghost" title="Sair da Conta">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
            </button>
          </div>
        </div>
      </aside>

      <!-- ==========================================================================
           MAIN CONTENT WRAPPER
           ========================================================================== -->
      <div id="main-wrapper">
        
        <!-- Sticky Top Header -->
        <header id="top-header">
          <div class="header-left">
            <div>
              <h2 id="page-title-text" class="page-title">Visão Geral Executiva</h2>
              <p id="page-subtitle-text" class="page-subtitle">Painel de métricas consolidadas e KPIs de atendimento em tempo real</p>
            </div>
          </div>

          <div class="header-right">
            <!-- Quick Live Ticker -->
            <div class="quick-stats-ticker">
              <div class="ticker-item">
                <span class="ticker-label">Total:</span>
                <span class="ticker-value" id="ticker-total">--</span>
              </div>
              <span style="color: var(--border-medium);">|</span>
              <div class="ticker-item">
                <span class="ticker-label">SLA Médio:</span>
                <span class="ticker-value" id="ticker-sla">--s</span>
              </div>
            </div>
          </div>
        </header>

        <!-- Global Filter Bar -->
        <div class="global-filter-bar">
          <div class="filters-group">
            <!-- Quick Period Buttons -->
            <div style="display: flex; gap: 0.35rem;">
              <button class="btn btn-secondary btn-sm btn-period-quick" data-period="today">Hoje</button>
              <button class="btn btn-secondary btn-sm btn-period-quick" data-period="7d">7 Dias</button>
              <button class="btn btn-secondary btn-sm btn-period-quick" data-period="30d">30 Dias</button>
              <button class="btn btn-primary btn-sm btn-period-quick" data-period="all">Todos</button>
            </div>

            <span style="color: var(--border-medium);">|</span>

            <!-- Date Range Inputs -->
            <div style="display: flex; align-items: center; gap: 0.35rem;">
              <input type="date" id="filter-start-date" class="filter-input" title="Data Inicial" />
              <span style="color: var(--text-dim);">até</span>
              <input type="date" id="filter-end-date" class="filter-input" title="Data Final" />
            </div>

            <!-- Chat / Estado Select -->
            <select id="filter-nome-chat" class="filter-select">
              <option value="all">Todos os Chats (Estados)</option>
            </select>

            <!-- Operator Select -->
            <select id="filter-operador" class="filter-select">
              <option value="all">Todos os Operadores</option>
            </select>

            <!-- Store (Key Entity) Select -->
            <select id="filter-loja" class="filter-select">
              <option value="all">Todas as Lojas (Key Entity)</option>
            </select>

            <!-- Origin Select -->
            <select id="filter-origem" class="filter-select">
              <option value="all">Todas as Origens</option>
            </select>
          </div>

          <div style="display: flex; gap: 0.5rem;">
            <button id="btn-apply-filters" class="btn btn-primary btn-sm">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
              Filtrar
            </button>
            <button id="btn-reset-filters" class="btn btn-outline btn-sm">
              Limpar
            </button>
          </div>
        </div>

        <!-- ==========================================================================
             CONTENT CANVAS
             ========================================================================== -->
        <main class="content-canvas">

          <!-- ----------------------------------------------------------------------
               VIEW 1: OVERVIEW / HOME
               ---------------------------------------------------------------------- -->
          <div id="view-overview" class="view-container">
            <!-- KPI Cards Grid -->
            <div class="grid-kpis">
              <!-- KPI 1: Total Atendimentos -->
              <div class="kpi-card glass-card">
                <div class="kpi-header">
                  <span class="kpi-title">Total de Atendimentos</span>
                  <div class="kpi-icon-wrapper">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                  </div>
                </div>
                <div>
                  <div class="kpi-value-row">
                    <span class="kpi-value" id="ov-kpi-total">--</span>
                  </div>
                  <span class="kpi-subtitle">Volume processado no período</span>
                </div>
              </div>

              <!-- KPI Status Abertos -->
              <div class="kpi-card glass-card">
                <div class="kpi-header">
                  <span class="kpi-title">Chats Abertos</span>
                  <div class="kpi-icon-wrapper" style="background: rgba(6, 182, 212, 0.15); color: var(--secondary);">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                  </div>
                </div>
                <div>
                  <div class="kpi-value-row">
                    <span class="kpi-value" id="ov-kpi-abertos" style="color: var(--secondary);">--</span>
                  </div>
                  <span class="kpi-subtitle">Atendimentos em andamento</span>
                </div>
              </div>

              <!-- KPI Status Encerrados -->
              <div class="kpi-card glass-card">
                <div class="kpi-header">
                  <span class="kpi-title">Chats Encerrados</span>
                  <div class="kpi-icon-wrapper" style="background: rgba(239, 68, 68, 0.15); color: var(--danger);">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                  </div>
                </div>
                <div>
                  <div class="kpi-value-row">
                    <span class="kpi-value" id="ov-kpi-encerrados" style="color: var(--danger);">--</span>
                  </div>
                  <span class="kpi-subtitle">Concluídos com motivo registrado</span>
                </div>
              </div>
            </div>

            <!-- Critical IA Alert Spotlight -->
            <div id="ov-critical-alert-box" style="margin-top: 1.5rem;"></div>

            <!-- Overview Charts Grid -->
            <div class="grid-charts-2" style="margin-top: 1.5rem;">
              <!-- Timeline Chart -->
              <div class="chart-card glass-card">
                <div class="chart-header">
                  <div class="chart-title-box">
                    <h3 class="chart-title">Tendência Temporal de Atendimentos</h3>
                    <span class="chart-subtitle">Evolução diária dos atendimentos</span>
                  </div>
                </div>
                <div class="chart-canvas-wrapper">
                  <canvas id="chart-overview-timeline"></canvas>
                </div>
              </div>

              <!-- Pie Chart: Atendimentos por Marca -->
              <div class="chart-card glass-card">
                <div class="chart-header">
                  <div class="chart-title-box">
                    <h3 class="chart-title">Distribuição por Marca</h3>
                    <span class="chart-subtitle">Volume por marca (Toyota, Chery, Nissan, Omoda Jaecoo, GWM)</span>
                  </div>
                </div>
                <div class="chart-canvas-wrapper" style="position: relative; max-height: 250px; display: flex; justify-content: center; align-items: center;">
                  <canvas id="chart-overview-marcas"></canvas>
                </div>
              </div>
            </div>

            <!-- Second Grid: Motivos de Fechamento Bar Chart -->
            <div style="margin-top: 1.5rem;">
              <div class="chart-card glass-card">
                <div class="chart-header">
                  <div class="chart-title-box">
                    <h3 class="chart-title">Distribuição por Motivos de Fechamento</h3>
                    <span class="chart-subtitle">Análise dos principais motivos de encerramento dos atendimentos</span>
                  </div>
                </div>
                <div class="chart-canvas-wrapper">
                  <canvas id="chart-overview-motivos"></canvas>
                </div>
              </div>
            </div>

            <!-- Breakdown Grid (Atendimentos por Intenção & Origem) -->
            <div class="grid-breakdown-2" style="margin-top: 1.5rem;">
              <!-- Card 1: Atendimentos por Intenção -->
              <div class="glass-card breakdown-card">
                <div class="breakdown-header">
                  <div class="breakdown-icon" style="background: rgba(6, 182, 212, 0.15); color: var(--secondary);">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
                  </div>
                  <h3 class="breakdown-title">Atendimentos por intenção</h3>
                </div>
                <div id="ov-list-atend-intencao" class="breakdown-list">
                  <div style="color: var(--text-dim); font-size: 0.82rem;">Carregando intenções...</div>
                </div>
              </div>

              <!-- Card 2: Atendimentos por Origem -->
              <div class="glass-card breakdown-card">
                <div class="breakdown-header">
                  <div class="breakdown-icon" style="background: rgba(245, 158, 11, 0.15); color: var(--accent-amber);">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
                  </div>
                  <h3 class="breakdown-title">Atendimentos por origem</h3>
                </div>
                <div id="ov-list-atend-origem" class="breakdown-list">
                  <div style="color: var(--text-dim); font-size: 0.82rem;">Carregando origens...</div>
                </div>
              </div>
            </div>

            <!-- Recent Activity Table -->
            <div class="glass-card" style="margin-top: 1.5rem; padding: 1.5rem;">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem;">
                <div>
                  <h3 class="chart-title">Atendimentos Recentes em Tempo Real</h3>
                  <span class="chart-subtitle">Últimos eventos sincronizados do CRM Duotalk</span>
                </div>
                <button class="btn btn-secondary btn-sm" onclick="window.App.navigate('conversations')">
                  Ver Todas as Conversas →
                </button>
              </div>

              <div class="table-responsive">
                <table class="data-table">
                  <thead>
                    <tr>
                      <th>Protocolo</th>
                      <th>Status</th>
                      <th>Cliente / Contato</th>
                      <th>Origem</th>
                      <th>Intenção</th>
                      <th>Operador</th>
                      <th>Data / Hora (Cuiabá)</th>
                      <th>Motivo de Encerramento</th>
                      <th style="text-align: right;">Ações</th>
                    </tr>
                  </thead>
                  <tbody id="ov-recent-table-body">
                    <tr><td colspan="9" style="text-align: center; padding: 2rem;">Carregando atendimentos...</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- ----------------------------------------------------------------------
               VIEW 2: METRICS & OPERATIONS BI (MÓDULO A)
               ---------------------------------------------------------------------- -->
          <div id="view-metrics" class="view-container hidden">
            <!-- Operacional KPI summary -->
            <div class="grid-kpis">
              <div class="kpi-card glass-card">
                <span class="kpi-title">Volume Total</span>
                <span class="kpi-value" id="met-kpi-total">--</span>
                <span class="kpi-subtitle">Atendimentos filtrados</span>
              </div>
              <div class="kpi-card glass-card">
                <span class="kpi-title">Taxa de Conversão</span>
                <span class="kpi-value text-primary" id="met-kpi-conv">--%</span>
                <span class="kpi-subtitle">Média geral da operação</span>
              </div>
              <div class="kpi-card glass-card">
                <span class="kpi-title">Leads Quentes</span>
                <span class="kpi-value" id="met-kpi-quentes" style="color: var(--accent-purple);">--</span>
                <span class="kpi-subtitle">Em proposta e negociação</span>
              </div>
              <div class="kpi-card glass-card">
                <span class="kpi-title">Top Motivo de Perda</span>
                <span class="kpi-value" id="met-kpi-perdas" style="font-size: 1.15rem; color: var(--danger);">--</span>
                <span class="kpi-subtitle">Maior perda de negócio</span>
              </div>
            </div>

            <!-- Operational Charts Grid -->
            <div class="grid-charts-2" style="margin-top: 1.5rem;">
              <!-- Operator Performance Bar Chart -->
              <div class="chart-card glass-card">
                <div class="chart-header">
                  <div class="chart-title-box">
                    <h3 class="chart-title">Desempenho por Operador (Total vs Convertidos)</h3>
                    <span class="chart-subtitle">Comparativo de produtividade individual</span>
                  </div>
                </div>
                <div class="chart-canvas-wrapper">
                  <canvas id="chart-metrics-operators"></canvas>
                </div>
              </div>

              <!-- Motivos de Fechamento Bar Chart -->
              <div class="chart-card glass-card">
                <div class="chart-header">
                  <div class="chart-title-box">
                    <h3 class="chart-title">Motivos de Fechamento & Desistência</h3>
                    <span class="chart-subtitle">Análise das razões de encerramento</span>
                  </div>
                </div>
                <div class="chart-canvas-wrapper">
                  <canvas id="chart-metrics-motivos"></canvas>
                </div>
              </div>
            </div>

            <!-- Second Grid: Peak Hours Heatmap + Channel Donut -->
            <div class="grid-charts-2" style="margin-top: 1.5rem;">
              <!-- Peak Hours Heatmap Bar Chart -->
              <div class="chart-card glass-card">
                <div class="chart-header">
                  <div class="chart-title-box">
                    <h3 class="chart-title">Distribuição de Horários de Pico</h3>
                    <span class="chart-subtitle">Volume de mensagens por hora do dia (00h às 23h)</span>
                  </div>
                </div>
                <div class="chart-canvas-wrapper">
                  <canvas id="chart-metrics-hourly"></canvas>
                </div>
              </div>

              <!-- Channels Donut Chart -->
              <div class="chart-card glass-card">
                <div class="chart-header">
                  <div class="chart-title-box">
                    <h3 class="chart-title">Canais de Origem do Atendimento</h3>
                    <span class="chart-subtitle">Volume por WhatsApp, Webchat e Redes</span>
                  </div>
                </div>
                <div class="chart-canvas-wrapper">
                  <canvas id="chart-metrics-channels-donut"></canvas>
                </div>
              </div>
            </div>

            <!-- Operator Ranking Table -->
            <div class="glass-card" style="margin-top: 1.5rem; padding: 1.5rem;">
              <div style="margin-bottom: 1.25rem;">
                <h3 class="chart-title">Ranking Operacional de Consultores</h3>
                <span class="chart-subtitle">Métricas de conversão, taxa de 'Somente Informações', no-show e CSAT por consultor</span>
              </div>

              <div class="table-responsive">
                <table class="data-table">
                  <thead>
                    <tr>
                      <th>Consultor / Operador</th>
                      <th>Total Atendidos</th>
                      <th>Vendas</th>
                      <th>Taxa de Conversão</th>
                      <th>Taxa 'Somente Info'</th>
                      <th>Taxa 'No-Show'</th>
                      <th>CSAT Médio</th>
                    </tr>
                  </thead>
                  <tbody id="met-operators-table-body">
                    <tr><td colspan="7" style="text-align: center; padding: 2rem;">Carregando ranking...</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- ----------------------------------------------------------------------
               VIEW 3: INTELLIGENCE & PRESCRIPTIONS (MÓDULO B: ABA DEDICADA)
               ---------------------------------------------------------------------- -->
          <div id="view-intelligence" class="view-container hidden">
            <!-- Intelligence Header Banner -->
            <div class="glass-card" style="padding: 1.75rem; background: linear-gradient(135deg, rgba(0, 245, 155, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%), var(--bg-card); border-color: rgba(0, 245, 155, 0.3);">
              <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;">
                <div>
                  <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem;">
                    <span class="badge badge-success">Motor Prescritivo Ativo</span>
                    <span style="font-size: 0.78rem; color: var(--primary); font-weight: 700;">// IA & Regras Estatísticas</span>
                  </div>
                  <h2 style="font-size: 1.35rem; color: #ffffff;">Diagnóstico de Atendimento & Prescrições de Linguagem</h2>
                  <p style="font-size: 0.84rem; max-width: 750px; margin-top: 4px;">
                    O sistema analisa automaticamente o histórico de mensagens enviadas pela nossa equipe e bots, detectando expressões evitáveis e prescrevendo condutas corretivas.
                  </p>
                </div>
              </div>
            </div>

            <!-- SEÇÃO 1: ALERTAS AUTOMÁTICOS DE DESEMPENHO -->
            <div style="margin-top: 2rem;">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
                <div>
                  <h3 class="chart-title">Alertas Automáticos de Desempenho</h3>
                  <span class="chart-subtitle">Desvios estatísticos de operadores e anomalias de encerramento</span>
                </div>
              </div>
              <div id="intel-alerts-container" style="display: flex; flex-direction: column; gap: 1rem;">
                <p>Calculando alertas...</p>
              </div>
            </div>

            <!-- SEÇÃO DE AUDITORIA DE LINGUAGEM & PALAVRAS EVITÁVEIS -->
            <div style="margin-top: 2.5rem;">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
                <div>
                  <h3 class="chart-title">Auditoria de Linguagem & Expressões Evitáveis (Prescrições)</h3>
                  <span class="chart-subtitle">Identificação de expressões passivas na escrita da nossa equipe com frases recomendadas e casos reais</span>
                </div>
                <div id="intel-language-summary-badge"></div>
              </div>
              <div id="intel-language-container" style="display: flex; flex-direction: column; gap: 1.25rem;">
                <div style="text-align: center; padding: 2.5rem; color: var(--text-muted);" class="glass-card">
                  <div class="spinner-sm" style="margin-right: 8px;"></div>Auditando diálogos do banco de dados...
                </div>
              </div>
            </div>

            <!-- SEÇÃO 2: SUGESTÕES DE ABORDAGEM & PLAYBOOKS DE VENDAS -->
            <div style="margin-top: 2.5rem;">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
                <div>
                  <h3 class="chart-title">Playbooks Prescritivos de Abordagem (Scripts Prontos)</h3>
                  <span class="chart-subtitle">Modelos de mensagens e contorno de objeções baseados no histórico</span>
                </div>
              </div>
              <div id="intel-playbooks-container" class="grid-charts-2">
                <p>Carregando playbooks...</p>
              </div>
            </div>

            <!-- SEÇÃO 3: ANÁLISE DE GARGALOS & MOTIVOS DE PERDA (PARETO) -->
            <div class="glass-card" style="margin-top: 2.5rem; padding: 1.5rem;">
              <div style="margin-bottom: 1.25rem;">
                <h3 class="chart-title">Matriz de Gargalos no Pipeline de Conversação</h3>
                <span class="chart-subtitle">Impacto financeiro estimado de perda por motivo de encerramento</span>
              </div>

              <div class="table-responsive">
                <table class="data-table">
                  <thead>
                    <tr>
                      <th>Motivo de Perda / Gargalo</th>
                      <th>Ocorrências (%)</th>
                      <th>Impacto Estimado (R$)</th>
                      <th>Diagnóstico da Causa Raiz</th>
                      <th>Ação Corretiva Recomendada</th>
                    </tr>
                  </thead>
                  <tbody id="intel-bottlenecks-table-body">
                    <tr><td colspan="5" style="text-align: center; padding: 2rem;">Carregando gargalos...</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- ----------------------------------------------------------------------
               VIEW 4: CONVERSATIONS AUDIT & SEARCH (MÓDULO B)
               ---------------------------------------------------------------------- -->
          <div id="view-conversations" class="view-container hidden">
            <div class="glass-card" style="padding: 1.5rem;">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;">
                <div>
                  <h3 class="chart-title">Auditoria e Histórico Geral de Atendimentos</h3>
                  <span class="chart-subtitle">Visualização completa de diálogos do CRM Duotalk</span>
                </div>
                <div style="display: flex; align-items: center; gap: 1rem;">
                  <span id="conv-total-count" style="font-size: 0.8rem; color: var(--text-dim);">--</span>
                  <div style="display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted);">
                    <span>Exibir:</span>
                    <select id="conv-page-size" class="filter-select" style="padding: 0.25rem 0.5rem;">
                      <option value="15">15 por página</option>
                      <option value="30">30 por página</option>
                      <option value="50">50 por página</option>
                    </select>
                  </div>
                </div>
              </div>

              <!-- Main Conversations Table -->
              <div class="table-responsive">
                <table class="data-table">
                  <thead>
                    <tr>
                      <th>Protocolo</th>
                      <th>Status</th>
                      <th>Cliente / Contato</th>
                      <th>Origem</th>
                      <th>Loja (Key Entity)</th>
                      <th>Intenção</th>
                      <th>Operador</th>
                      <th>Data / Hora (Cuiabá)</th>
                      <th>Motivo de Encerramento</th>
                      <th style="text-align: right;">Ações</th>
                    </tr>
                  </thead>
                  <tbody id="conv-table-body">
                    <tr><td colspan="10" style="text-align: center; padding: 3rem;">Carregando histórico de conversas...</td></tr>
                  </tbody>
                </table>
              </div>

              <!-- Pagination Controls -->
              <div id="conv-pagination-container" style="display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle);">
              </div>
            </div>
          </div>

          <!-- ----------------------------------------------------------------------
               VIEW 5: SETTINGS & LOGS
               ---------------------------------------------------------------------- -->
          <div id="view-settings" class="view-container hidden">
            <!-- User Profile & Photo Manager Card -->
            <div class="glass-card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
              <div style="margin-bottom: 1.25rem;">
                <h3 class="chart-title">Meu Perfil & Alteração de Foto</h3>
                <span class="chart-subtitle">Personalize a sua foto de avatar e informações da conta</span>
              </div>
              <div style="display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start;">
                <!-- Avatar Preview -->
                <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;">
                  <img id="settings-avatar-preview" src="https://i.ibb.co/wNFwnKqT/Screenshot-3.png" style="width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); box-shadow: var(--shadow-glow-cyan);" alt="Foto de Perfil" />
                  <span style="font-size: 0.76rem; color: var(--text-dim);">Pré-visualização</span>
                </div>

                <!-- Form Fields -->
                <div style="flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 1rem;">
                  <div class="grid-form-2" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;">
                    <div>
                      <label class="form-label" style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; display: block;">Nome Completo</label>
                      <input type="text" id="settings-profile-name" class="filter-input w-full" placeholder="Seu nome" />
                    </div>
                    <div>
                      <label class="form-label" style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; display: block;">Cargo / Função</label>
                      <input type="text" id="settings-profile-cargo" class="filter-input w-full" placeholder="Ex: Gestor de BI" />
                    </div>
                  </div>

                  <div>
                    <label class="form-label" style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; display: block;">URL da Foto de Perfil (Avatar)</label>
                    <input type="url" id="settings-profile-avatar-url" class="filter-input w-full" value="https://i.ibb.co/wNFwnKqT/Screenshot-3.png" placeholder="https://..." oninput="document.getElementById('settings-avatar-preview').src = this.value || 'https://i.ibb.co/wNFwnKqT/Screenshot-3.png'" />
                  </div>

                  <!-- Quick Presets -->
                  <div>
                    <label class="form-label" style="font-size: 0.75rem; color: var(--text-dim); margin-bottom: 0.35rem; display: block;">Galeria de Avatares Executivos:</label>
                    <div style="display: flex; gap: 0.65rem; flex-wrap: wrap;">
                      <img src="https://i.ibb.co/wNFwnKqT/Screenshot-3.png" onclick="SettingsModule.selectAvatar(this.src)" style="width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid var(--primary); transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'" title="Sua foto atual" />
                      <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=250&q=80" onclick="SettingsModule.selectAvatar(this.src)" style="width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'" />
                      <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=250&q=80" onclick="SettingsModule.selectAvatar(this.src)" style="width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'" />
                      <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=250&q=80" onclick="SettingsModule.selectAvatar(this.src)" style="width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'" />
                      <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=250&q=80" onclick="SettingsModule.selectAvatar(this.src)" style="width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'" />
                    </div>
                  </div>

                  <div style="margin-top: 0.5rem;">
                    <button class="btn btn-primary btn-sm" onclick="SettingsModule.saveProfile()">
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
                      Salvar Alterações de Perfil
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- DB Infrastructure Monitor Card -->
            <div class="glass-card" style="padding: 1.5rem;">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;">
                <div>
                  <h3 class="chart-title">Status da Conexão MySQL 8.0 & Infraestrutura</h3>
                  <span class="chart-subtitle">Monitoramento em tempo real do banco de dados e latência</span>
                </div>
                <div style="display: flex; gap: 0.65rem;">
                  <button id="btn-reseed-db" class="btn btn-outline btn-sm">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
                    Re-semear Dados Simulados
                  </button>
                </div>
              </div>

              <div class="grid-kpis">
                <div class="kpi-card" style="background: var(--bg-card-inner);">
                  <span class="kpi-title">Driver Ativo</span>
                  <span class="kpi-value font-mono" id="db-status-driver" style="font-size: 1.3rem; color: var(--primary);">--</span>
                  <span class="kpi-subtitle" id="db-status-connected">--</span>
                </div>
                <div class="kpi-card" style="background: var(--bg-card-inner);">
                  <span class="kpi-title">Host / Porta</span>
                  <span class="kpi-value font-mono" id="db-status-host" style="font-size: 1.15rem;">--</span>
                  <span class="kpi-subtitle">Endereço do servidor MySQL</span>
                </div>
                <div class="kpi-card" style="background: var(--bg-card-inner);">
                  <span class="kpi-title">Database</span>
                  <span class="kpi-value font-mono" id="db-status-name" style="font-size: 1.15rem; color: var(--secondary);">--</span>
                  <span class="kpi-subtitle">Schema ativo</span>
                </div>
                <div class="kpi-card" style="background: var(--bg-card-inner);">
                  <span class="kpi-title">Ping / Latência</span>
                  <span class="kpi-value font-mono" id="db-status-latency" style="font-size: 1.3rem; color: var(--success);">-- ms</span>
                  <span class="kpi-subtitle" id="db-status-records">-- atendimentos</span>
                </div>
              </div>
            </div>

            <!-- Users Management -->
            <div class="glass-card" style="margin-top: 1.5rem; padding: 1.5rem;">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;">
                <div>
                  <h3 class="chart-title">Usuários Cadastrados & Acesso</h3>
                  <span class="chart-subtitle">Gerenciamento de permissões, inclusão, alteração de foto de avatar e exclusão</span>
                </div>
                <button class="btn btn-primary btn-sm" onclick="SettingsModule.openCreateUserModal()" style="gap: 0.35rem;">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                  Incluir Usuário
                </button>
              </div>
              <div class="table-responsive">
                <table class="data-table">
                  <thead>
                    <tr>
                      <th>Usuário</th>
                      <th>E-mail</th>
                      <th>Cargo / Permissão</th>
                      <th>Status</th>
                      <th style="text-align: right;">Ações</th>
                    </tr>
                  </thead>
                  <tbody id="settings-users-table-body">
                    <tr><td colspan="5" style="text-align: center; padding: 1.5rem;">Carregando usuários...</td></tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- System Audit Logs -->
            <div class="glass-card" style="margin-top: 1.5rem; padding: 1.5rem;">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.5rem;">
                <div>
                  <h3 class="chart-title">Logs de Auditoria do Sistema</h3>
                  <span class="chart-subtitle">Rastreamento de autenticação, integrações e consultas</span>
                </div>
                <div style="display: flex; align-items: center; gap: 0.5rem;">
                  <span style="font-size: 0.78rem; color: var(--text-muted);">Severidade:</span>
                  <select id="log-severity-filter" class="filter-select" style="padding: 0.25rem 0.6rem;">
                    <option value="all">Todos os Níveis</option>
                    <option value="INFO">INFO</option>
                    <option value="WARN">WARN</option>
                    <option value="ERROR">ERROR</option>
                  </select>
                </div>
              </div>

              <div class="table-responsive">
                <table class="data-table">
                  <thead>
                    <tr>
                      <th>Nível</th>
                      <th>Módulo</th>
                      <th>Mensagem</th>
                      <th>Data / Hora</th>
                    </tr>
                  </thead>
                  <tbody id="settings-logs-table-body">
                    <tr><td colspan="4" style="text-align: center; padding: 2rem;">Carregando logs...</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

        </main>
      </div>
    </div>
  </div>

  <!-- ==========================================================================
       CONVERSATION AUDIT DRAWER (SPLIT SCREEN: CHAT TIMELINE + JSON TREE VIEWER)
       ========================================================================== -->
  <div id="conversation-drawer" class="drawer-overlay">
    <div class="drawer-panel">
      <!-- Drawer Header -->
      <div class="drawer-header">
        <div>
          <h3 id="drawer-title" style="font-size: 1.15rem; color: var(--text-main);">Auditoria de Atendimento</h3>
          <p id="drawer-subtitle" style="font-size: 0.76rem; color: var(--text-muted);">Protocolo Duotalk</p>
        </div>
        <button id="btn-close-drawer" class="btn btn-secondary btn-sm" title="Fechar Auditoria">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          Fechar
        </button>
      </div>

      <!-- Drawer Body: Split Left (Chat Timeline) & Right (JSON Viewer) -->
      <div class="drawer-body">
        <!-- Left: WhatsApp Style Chat Timeline -->
        <div class="drawer-chat-pane">
          <div style="padding: 0.85rem 1.25rem; background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 0.5rem;">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
            <span style="font-size: 0.78rem; font-weight: 700; text-transform: uppercase; color: var(--text-main); letter-spacing: 0.05em;">
              Diálogo & Transcrição de Mensagens
            </span>
          </div>

          <!-- Summary Card: Fechamento, Agente & Intenção -->
          <div id="drawer-closing-card" style="padding: 0.75rem 1.25rem; background: var(--bg-card-inner); border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 0.4rem;">
            <div style="display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem;">
              <div>
                <span style="color: var(--text-dim);">Intenção:</span>
                <strong id="drawer-intencao-val" class="badge badge-info" style="margin-left: 4px;">-</strong>
              </div>
              <div>
                <span style="color: var(--text-dim);">Encerrado em:</span>
                <strong id="drawer-fech-date" style="color: var(--primary); font-family: monospace;">-</strong>
              </div>
            </div>
            <div style="display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted);">
              <span>Agente Fechamento: <strong id="drawer-fech-agent" style="color: var(--text-main);">-</strong></span>
              <span>Motivo: <strong id="drawer-fech-motivo" style="color: var(--warning);">-</strong></span>
            </div>
          </div>

          <div id="drawer-chat-messages" class="chat-messages-container">
            <p>Carregando diálogo...</p>
          </div>
        </div>

        <!-- Right: Raw Payload JSON Tree Viewer -->
        <div class="drawer-payload-pane" id="drawer-json-viewer-container">
          <p>Carregando payload JSON...</p>
        </div>
      </div>
    </div>
  </div>

  <!-- ==========================================================================
       DUOTALK WEBHOOK SIMULATOR MODAL
       ========================================================================== -->
  <div id="simulator-modal" class="modal-overlay">
    <div class="modal-card">
      <div class="modal-header">
        <div style="display: flex; align-items: center; gap: 0.65rem;">
          <div style="width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
          </div>
          <div>
            <h3 style="font-size: 1.05rem;">Simulador de Webhooks Duotalk</h3>
            <p style="font-size: 0.74rem;">Envie payloads simulados para testar o processamento em tempo real</p>
          </div>
        </div>
        <button id="btn-close-simulator" class="btn-icon-ghost">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
      </div>

      <div class="modal-body">
        <div style="display: flex; flex-direction: column; gap: 0.35rem;">
          <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted);">Cenário Pré-definido:</label>
          <select id="simulator-preset-select" class="filter-select">
            <option value="whatsapp_compass">Novo Lead WhatsApp (Jeep Compass - Quente)</option>
            <option value="webchat_perda_info">Lead Perdido no Webchat (Somente Informações)</option>
            <option value="conversao_venda">Fechamento de Venda Concluída (BMW 320i)</option>
          </select>
        </div>

        <div style="display: flex; flex-direction: column; gap: 0.35rem;">
          <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted);">Payload Bruto (JSON):</label>
          <textarea id="simulator-payload-editor" class="filter-input font-mono" style="height: 200px; resize: vertical; font-size: 0.78rem; line-height: 1.4;"></textarea>
        </div>
      </div>

  <!-- ==========================================================================
       USER PROFILE & USER MANAGEMENT MODAL
       ========================================================================== -->
  <div id="user-profile-modal" class="modal-overlay">
    <div class="modal-card" style="max-width: 680px;">
      <div class="modal-header">
        <div style="display: flex; align-items: center; gap: 0.65rem;">
          <div class="brand-icon-box" style="width: 32px; height: 32px; font-size: 0.85rem;">DUO</div>
          <h3 style="font-size: 1.1rem; color: var(--text-main); margin: 0;">Painel do Agente & Gestão de Usuários</h3>
        </div>
        <button id="btn-close-user-modal" class="btn-icon-ghost">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
      </div>

      <div class="modal-body" style="padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; max-height: 80vh; overflow-y: auto;">
        
        <!-- Tab Navigation -->
        <div style="display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.5rem;">
          <button id="tab-btn-my-profile" class="btn btn-primary btn-sm">Meu Perfil & Foto</button>
          <button id="tab-btn-manage-users" class="btn btn-secondary btn-sm">+ Criar & Gerenciar Usuários</button>
        </div>

        <!-- TAB 1: MEU PERFIL & ALTERAR FOTO -->
        <div id="tab-content-my-profile" style="display: flex; flex-direction: column; gap: 1.25rem;">
          <div style="display: flex; align-items: center; gap: 1.25rem; background: var(--bg-card-inner); padding: 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);">
            <img id="modal-profile-preview" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150" style="width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); box-shadow: var(--shadow-md);" />
            <div style="display: flex; flex-direction: column; gap: 0.35rem; flex: 1;">
              <span style="font-size: 0.74rem; font-weight: 700; text-transform: uppercase; color: var(--primary);">Foto de Perfil Ativa</span>
              <input type="text" id="profile-avatar-input" class="filter-input" placeholder="Cole a URL da sua foto..." style="font-size: 0.82rem;" />
              <div style="font-size: 0.72rem; color: var(--text-dim);">Ou escolha um avatar executivo predefinido:</div>
              <div style="display: flex; gap: 0.4rem; margin-top: 2px;">
                <button type="button" class="btn-avatar-preset" data-url="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150" style="padding: 0; border: none; background: none; cursor: pointer;">
                  <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150" style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;" />
                </button>
                <button type="button" class="btn-avatar-preset" data-url="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150" style="padding: 0; border: none; background: none; cursor: pointer;">
                  <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150" style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;" />
                </button>
                <button type="button" class="btn-avatar-preset" data-url="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150" style="padding: 0; border: none; background: none; cursor: pointer;">
                  <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150" style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;" />
                </button>
                <button type="button" class="btn-avatar-preset" data-url="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=150" style="padding: 0; border: none; background: none; cursor: pointer;">
                  <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=150" style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;" />
                </button>
              </div>
            </div>
          </div>

          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div style="display: flex; flex-direction: column; gap: 0.35rem;">
              <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted);">Nome Completo</label>
              <input type="text" id="profile-name-input" class="filter-input" />
            </div>
            <div style="display: flex; flex-direction: column; gap: 0.35rem;">
              <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted);">Cargo / Função</label>
              <input type="text" id="profile-cargo-input" class="filter-input" />
            </div>
          </div>

          <div style="display: flex; flex-direction: column; gap: 0.35rem;">
            <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted);">E-mail Corporativo</label>
            <input type="email" id="profile-email-input" class="filter-input" />
          </div>

          <button id="btn-save-profile" class="btn btn-primary" style="margin-top: 0.5rem; justify-content: center;">
            Salvar Alterações do Meu Perfil
          </button>
        </div>

        <!-- TAB 2: GERENCIAR & CRIAR USUÁRIOS -->
        <div id="tab-content-manage-users" class="hidden" style="display: flex; flex-direction: column; gap: 1.25rem;">
          <!-- Novo Usuário Form Card -->
          <div style="background: var(--bg-card-inner); padding: 1.1rem; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 0.85rem;">
            <div style="font-size: 0.85rem; font-weight: 700; color: var(--primary);">+ Cadastrar Novo Usuário no Sistema</div>
            <form id="new-user-form" style="display: flex; flex-direction: column; gap: 0.85rem;">
              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
                <input type="text" id="new-user-name" class="filter-input" placeholder="Nome completo" required />
                <input type="email" id="new-user-email" class="filter-input" placeholder="E-mail de acesso" required />
              </div>
              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
                <input type="password" id="new-user-password" class="filter-input" placeholder="Senha inicial" required />
                <input type="text" id="new-user-cargo" class="filter-input" placeholder="Cargo (Ex: Supervisor, Atendente)" value="Consultor CRM" />
              </div>
              <input type="text" id="new-user-avatar" class="filter-input" placeholder="URL da Foto / Avatar" value="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150" />
              <button type="submit" class="btn btn-primary btn-sm" style="justify-content: center; margin-top: 0.25rem;">
                Cadastrar Usuário
              </button>
            </form>
          </div>

          <!-- Tabela de Usuários Cadastrados -->
          <div>
            <div style="font-size: 0.82rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.65rem;">Usuários Ativos no Sistema</div>
            <div class="table-responsive">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>Usuário</th>
                    <th>Cargo</th>
                    <th>E-mail</th>
                    <th style="text-align: right;">Ação</th>
                  </tr>
                </thead>
                <tbody id="modal-users-list-body">
                  <tr><td colspan="4" style="text-align: center; padding: 1.5rem;">Carregando usuários...</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- Modal de Inclusão / Edição de Usuário e Alteração de Avatar -->
  <div id="modal-user-manage" class="modal-overlay hidden" style="position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1050; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);">
    <div class="glass-card" style="width: 100%; max-width: 520px; padding: 1.75rem; border-color: var(--primary);">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
        <h3 id="modal-user-title" style="font-size: 1.15rem; font-weight: 700; color: #fff;">Cadastrar Novo Usuário</h3>
        <button class="btn btn-secondary btn-sm" onclick="SettingsModule.closeUserModal()" style="padding: 0.2rem 0.5rem;">✕</button>
      </div>
      <form id="form-user-manage" onsubmit="SettingsModule.saveUserSubmit(event)" style="display: flex; flex-direction: column; gap: 1rem;">
        <input type="hidden" id="user-manage-id" value="" />
        <div>
          <label class="form-label" style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; display: block;">Nome Completo</label>
          <input type="text" id="user-manage-nome" class="filter-input w-full" placeholder="Ex: Diogo Chagas" required />
        </div>
        <div>
          <label class="form-label" style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; display: block;">E-mail de Acesso</label>
          <input type="email" id="user-manage-email" class="filter-input w-full" placeholder="exemplo@duobi.com.br" required />
        </div>
        <div id="user-manage-pass-box">
          <label class="form-label" style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; display: block;">Senha de Acesso</label>
          <input type="password" id="user-manage-password" class="filter-input w-full" placeholder="••••••••" />
        </div>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
          <div>
            <label class="form-label" style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; display: block;">Cargo</label>
            <input type="text" id="user-manage-cargo" class="filter-input w-full" placeholder="Ex: Supervisor CRM" value="Consultor CRM" />
          </div>
          <div>
            <label class="form-label" style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; display: block;">Permissão</label>
            <select id="user-manage-role" class="filter-select w-full">
              <option value="admin">Administrador</option>
              <option value="supervisor">Supervisor</option>
              <option value="analista" selected>Analista / Consultor</option>
            </select>
          </div>
        </div>
        <div>
          <label class="form-label" style="font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; display: block;">URL da Foto de Perfil (Avatar)</label>
          <input type="url" id="user-manage-avatar" class="filter-input w-full" placeholder="https://..." oninput="document.getElementById('user-manage-avatar-preview').src = this.value || 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150'" />
          <div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 0.65rem;">
            <img id="user-manage-avatar-preview" src="https://i.ibb.co/wNFwnKqT/Screenshot-3.png" style="width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary);" />
            <div style="display: flex; gap: 0.45rem; flex-wrap: wrap;">
              <img src="https://i.ibb.co/wNFwnKqT/Screenshot-3.png" onclick="document.getElementById('user-manage-avatar').value=this.src; document.getElementById('user-manage-avatar-preview').src=this.src;" style="width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid var(--primary);" title="Sua foto personalizada" />
              <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150" onclick="document.getElementById('user-manage-avatar').value=this.src; document.getElementById('user-manage-avatar-preview').src=this.src;" style="width: 32px; height: 32px; border-radius: 50%; cursor: pointer;" />
              <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150" onclick="document.getElementById('user-manage-avatar').value=this.src; document.getElementById('user-manage-avatar-preview').src=this.src;" style="width: 32px; height: 32px; border-radius: 50%; cursor: pointer;" />
              <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150" onclick="document.getElementById('user-manage-avatar').value=this.src; document.getElementById('user-manage-avatar-preview').src=this.src;" style="width: 32px; height: 32px; border-radius: 50%; cursor: pointer;" />
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem;">
          <button type="button" class="btn btn-outline btn-sm" onclick="SettingsModule.closeUserModal()">Cancelar</button>
          <button type="submit" class="btn btn-primary btn-sm">Salvar Usuário</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Toast Container -->
  <div id="toast-container"></div>

  <!-- JavaScript Scripts Modules -->
  <script src="js/api.js"></script>
  <script src="js/charts.js"></script>
  <script src="js/json-viewer.js"></script>
  <script src="js/simulator.js"></script>
  <script src="js/auth.js"></script>
  <script src="js/modules/overview.js"></script>
  <script src="js/modules/metrics.js"></script>
  <script src="js/modules/intelligence.js"></script>
  <script src="js/modules/conversations.js"></script>
  <script src="js/modules/settings.js"></script>
  <script src="js/app.js"></script>
</body>
</html>
