/* ========================================================================== JAMES BOT 1.0 — Ajustes de responsividade (carregado por último no ) Consolida o comportamento mobile de todas as telas reformuladas. ========================================================================== */ /* Botão "voltar" do chat: só existe no mobile */ .btn-mobile-back-chat { display: none; } @media (max-width: 768px) { /* ======================================================================= SHELL — a sidebar tem que SAIR do fluxo (era position:relative + 250px, empurrando o conteúdo pra fora da tela). O main.css sobrescrevia a regra mobile do global-base.css por ordem de carregamento; aqui forçamos. ======================================================================= */ .app-container { position: relative; } .sidebar, #mainSidebar { position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 84vw !important; max-width: 320px !important; min-width: 0 !important; transform: translateX(-100%); transition: transform .25s cubic-bezier(.16,1,.3,1); z-index: 200 !important; box-shadow: none; } .sidebar.mobile-open, #mainSidebar.mobile-open { transform: translateX(0) !important; box-shadow: 6px 0 28px rgba(0,0,0,.35); } .sidebar.collapsed, #mainSidebar.collapsed { width: 84vw !important; max-width: 320px !important; min-width: 0 !important; } .main-content { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin-left: 0 !important; } /* respiro pro hambúrguer fixo em telas sem topbar própria */ .content-section.active:not(#conversasSection):not(#kanbanSection) { padding-top: 8px; } /* ---- Hambúrguer segue o tema ---- */ #btnHamburgerMobile { background: var(--card-bg, #161b22) !important; border-color: var(--border-color, #30363d) !important; color: var(--text-primary, #f0f6fc) !important; } #btnHamburgerMobile .material-icons { color: var(--text-primary, #f0f6fc) !important; } #btnHamburgerMobile:hover { background: var(--card-hover-bg, #1c2128) !important; } /* espaço pro hambúrguer não cobrir o título das telas com topbar */ .tg-wrap, .cmd-wrap, .dm-wrap, .au-wrap { padding: 14px 12px 48px !important; } .tg-topbar, .cmd-topbar, .dm-topbar, .au-topbar { padding-top: 40px; } .agenda-container { padding: 44px 12px 40px !important; } /* Dashboard */ .dashboard-header-container { flex-direction: column; align-items: stretch; gap: 10px; } .dashboard-controls-row { flex-wrap: wrap; } .primary-kpis-row, .secondary-kpis-grid, .dashboard-charts-grid, .dashboard-telemetry-grid, .telemetry-charts-subgrid { grid-template-columns: 1fr !important; } .compact-metrics-toolbar { grid-template-columns: repeat(2, 1fr) !important; } .jm-meter-grid { grid-template-columns: 1fr 1fr !important; } .section-title-sleek { font-size: 1.1rem !important; } /* ---- Grids de 2 colunas / KPIs -> 1 coluna ---- */ .tg-grid-2, .au-grid-2, .dm-grid-2, .ag-charts { grid-template-columns: 1fr !important; } .tg-kpis, .cmd-kpis, .dm-kpis, .au-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .agenda-stats { grid-template-columns: repeat(2, 1fr) !important; } /* ---- Topbars / cabeçalhos empilham ---- */ .tg-topbar, .cmd-topbar, .dm-topbar, .au-topbar, .agenda-header, .kanban-header { flex-direction: column; align-items: stretch; gap: 12px; } .tg-actions, .cmd-tabs, .dm-actions, .au-actions, .agenda-header-actions, .kanban-header-actions { flex-wrap: wrap; } .tg-actions .tg-btn, .dm-actions .dm-btn, .au-actions .au-btn { flex: 1 1 auto; justify-content: center; } .tg-search, .dm-search, .cmd-search { width: 100%; max-width: none; } .tg-search input, .au-search input, .dm-topbar input { width: 100% !important; max-width: none !important; } /* ---- Toolbars (chips + ordenar) ---- */ .tg-toolbar, .cmd-toolbar { flex-direction: column; align-items: stretch; } .tg-chips, .cmd-chips { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .tg-chips::-webkit-scrollbar, .cmd-chips::-webkit-scrollbar { height: 0; } /* ---- Tabelas: rolagem horizontal + densidade menor ---- */ .tg-table-wrap, .cmd-table-wrap, .dm-table-wrap, .au-table-wrap, .agenda-sgp-table-container, .comodatos-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tg-table, table.cmd-table, table.dm-table, table.au-table, .agenda-sgp-table { font-size: .8rem; min-width: 560px; } table.tg-table td, table.cmd-table td, table.dm-table td, table.au-table td, .agenda-sgp-table td, table.tg-table th, table.cmd-table th, table.dm-table th, table.au-table th, .agenda-sgp-table th { padding: 8px 10px !important; } /* ---- KPI: valor um pouco menor ---- */ .tg-kpi .k-v, .cmd-kpi .k-v, .dm-kpi .k-v, .au-kpi .k-v { font-size: 1.25rem; } .au-kpi .k-l, .dm-kpi .k-l, .tg-kpi .k-l, .cmd-kpi .k-l { font-size: .62rem; } /* ---- Cards de gráfico: altura mobile ---- */ #dmBairrosBox, #auTecBox, #auTrendBox, #tgRankBox, .ag-card-b, .tg-card-b { max-height: 300px; } .ag-donut-b, .tg-donut-b { flex-direction: column; align-items: center; } /* ---- Modais ocupam a tela ---- */ .au-modal-box, .modal-content-modern, .ag-modal-box, .modal-content, .cmd-modal .modal-content, #modalNovoAgendamento .modal-content { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; max-height: 88vh; overflow-y: auto; } /* ---- Construtor de perguntas (Auditoria) ---- */ .au-perg-row { flex-wrap: wrap; } .au-perg-ord { flex-direction: row; } .au-perg-foot { flex-direction: column; } .au-perg-foot .au-btn { width: 100%; justify-content: center; } /* ======================================================================= CONVERSAS: duas colunas -> lista em tela cheia + chat desliza por cima ======================================================================= */ .conversas-container { position: relative; } .conversas-lista, .conversas-sidebar { width: 100% !important; min-width: 0 !important; max-width: none !important; } .chat-container { position: absolute; inset: 0; z-index: 30; transform: translateX(100%); transition: transform .25s cubic-bezier(.16,1,.3,1); background: var(--bg-primary, #0f172a); } .conversas-container.chat-active .chat-container { transform: translateX(0); } .btn-mobile-back-chat { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 4px; border: none; background: transparent; color: var(--text-primary, #f0f6fc); cursor: pointer; border-radius: 8px; } /* Header do chat: nome encolhe, botões cabem */ .chat-header { padding: 0 8px !important; gap: 6px; } .chat-contact { flex: 1 1 auto; min-width: 0; } .chat-contact-info, .chat-contact-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-actions { flex-shrink: 0; gap: 2px !important; } .chat-action-btn { width: 32px !important; height: 32px !important; } /* menos usados no mobile -> ficam fora da barra (seguem no fluxo desktop) */ .chat-header .attendant-popover-wrapper, .chat-header .send-boleto-btn { display: none !important; } /* Painel lateral do cliente -> tela cheia, acima do chat */ #clientePanel { width: 100% !important; max-width: 100% !important; left: 0 !important; z-index: 600 !important; } /* Kanban: 1 coluna com rolagem vertical */ .kanban-grid { grid-template-columns: 1fr !important; overflow-y: auto !important; } .kanban-column { min-height: 240px; } /* Comodatos: catálogo 2 por linha */ .comodatos-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .btn-mobile-back-chat { display: inline-flex !important; } .tg-kpis, .cmd-kpis, .dm-kpis, .au-kpis, .agenda-stats { grid-template-columns: 1fr !important; } .comodatos-grid { grid-template-columns: 1fr !important; } .compact-metrics-toolbar { grid-template-columns: 1fr !important; } .tg-title, .cmd-title, .dm-title, .au-title { font-size: 1.15rem !important; } .tg-sub, .cmd-sub, .dm-sub, .au-sub { font-size: .76rem !important; } /* Auditoria: chips de status da fila não estouram */ .au-stpill { font-size: .66rem; padding: 2px 8px; } }