/* ── TEMA ESCURO ── */ :root{ --brand:#0D2B5E;--brand-mid:#1A4080;--brand-lit:#2A5BA8; --accent:#1E6FD9;--accent2:#4A9FFF; --yellow:#F5C400;--orange:#E87B00; --bg:#080E1A;--surface:#0E1C30;--surface2:#0A1525;--card:#112238;--border:#1A3050; --text:#E8F0FB;--muted:#4A6A90;--muted2:#6A8AAB; --danger:#FF4455;--warn:#FFC233;--success:#22C97A;--green:#25D366; --shadow:rgba(0,0,0,.4); --radius:12px; /* Seta customizada em ) */ :where(.panel, .modal, #modal-generico-body, body) :where( textarea, input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"] ){ -webkit-appearance:none; appearance:none; } :where(.panel, .modal, #modal-generico-body, body) :where(select, textarea){ width:100%; } :where(.panel, .modal, #modal-generico-body, body) :where(textarea){ resize:vertical; } :where(.panel, .modal, #modal-generico-body, body) :where( select:focus, textarea:focus, input:not([type]):focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus ){ border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,111,217,.15); } body.tema-claro :where(.panel, .modal, #modal-generico-body, body) :where( textarea, input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="url"] ){ background:#fff; border-color:#C0D4EC; color:#0D2B5E; } body.tema-claro :where(.panel, .modal, #modal-generico-body, body) select{ background-color:#fff; border-color:#C0D4EC; color:#0D2B5E; } /* Classe utilitária já usada em várias telas */ .form-input{ width:100%; } input.form-input[readonly]{ opacity:.9; cursor:default; background:var(--surface2); } .form-field input, .form-field textarea{ padding:10px 12px; border-radius:var(--radius); background:var(--surface); border:1.5px solid var(--border); color:var(--text); font-size:14px; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .2s; } .form-field select{ padding:10px 12px; padding-right:40px; border-radius:var(--radius); background-color:var(--surface); border:1.5px solid var(--border); color:var(--text); font-size:14px; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .2s; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,111,217,.15); } body.tema-claro .form-field input, body.tema-claro .form-field textarea{ background:#fff; border-color:#C0D4EC; color:#0D2B5E; } body.tema-claro .form-field select{ background-color:#fff; border-color:#C0D4EC; color:#0D2B5E; } /* ── BOTÕES ── */ .btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border:none; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; font-family:'DM Sans',sans-serif; transition:all .2s; } .btn-primary{ background:linear-gradient(135deg,var(--brand-mid),var(--brand)); color:#fff; } .btn-primary:hover{ opacity:.88; transform:translateY(-1px); } .btn-success{ background:linear-gradient(135deg,#18A863,#12844D); color:#fff; } .btn-success:hover{ opacity:.88; } .btn-danger{ background:linear-gradient(135deg,#D63045,#B02030); color:#fff; } .btn-danger:hover{ opacity:.88; } .btn-warning{ background:linear-gradient(135deg,#d97706,#b45309); color:#fff; } .btn-warning:hover{ opacity:.88; } .btn-secondary{ background:var(--surface); border:1.5px solid var(--border); color:var(--text); } .btn-secondary:hover{ border-color:var(--accent); } .btn-ghost{ background:transparent; border:1.5px solid var(--border); color:var(--muted2); } .btn-ghost:hover{ border-color:var(--accent); color:var(--accent2); background:rgba(30,111,217,.07); } .btn-sm{ padding:6px 12px; font-size:12px; } .btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; } /* ── MODAL ── */ .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1000; display:none; align-items:center; justify-content:center; padding:calc(16px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); } .modal-overlay.open{ display:flex; } .modal{ background:var(--card); border:1px solid var(--border); border-radius:16px; width:min(520px, 96vw); max-width:96vw; max-height:92vh; max-height:92dvh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.5); padding:28px; } body.tema-claro .modal{ background:#fff; border-color:#C8D8EE; } .modal-title{ font-size:18px; font-weight:700; color:var(--text); margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; } /* ── Botão X fechar modal — padrão unificado ── Tema escuro = ausência de body.tema-claro; o base usa variáveis do :root. */ .modal-close-btn{ width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--surface2); border:1.5px solid var(--border); border-radius:8px; cursor:pointer; padding:0; color:var(--accent2); font-size:17px; line-height:1; transition:all .15s; } body.tema-claro .modal-close-btn{ background:#fff; border-color:#C8D8EE; color:#1E6FD9; } .modal-close-btn:hover{ border-color:var(--accent); background:rgba(30,111,217,.18); color:var(--accent); } body.tema-claro .modal-close-btn:hover{ border-color:#1E6FD9; background:rgba(30,111,217,.08); color:#1254b5; } .modal-close-btn:active{ transform:scale(.9); } /* dentro de .modal-title — ocupa o slot flex, não usa posição absoluta */ .modal-title .modal-close-btn{ position:static; transform:none; } .modal-title .modal-close-btn:active{ transform:scale(.9); } .modal-footer{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; } /* Modal genérico (#modal-generico-body): reforço — id ganha sobre regras com :where e garante tema + cantos em Win/Chrome */ #modal-generico-body textarea, #modal-generico-body input:not([type]), #modal-generico-body input[type="text"], #modal-generico-body input[type="password"], #modal-generico-body input[type="email"], #modal-generico-body input[type="search"], #modal-generico-body input[type="tel"], #modal-generico-body input[type="url"]{ -webkit-appearance:none; appearance:none; border-radius:var(--radius); padding:10px 12px; background:var(--surface); border:1.5px solid var(--border); color:var(--text); font-size:14px; font-family:'DM Sans',sans-serif; outline:none; } #modal-generico-body textarea{ resize:vertical; width:100%; } #modal-generico-body input.form-input:not([type=checkbox]):not([type=radio]){ width:100%; } body.tema-claro #modal-generico-body textarea, body.tema-claro #modal-generico-body input:not([type]), body.tema-claro #modal-generico-body input[type="text"], body.tema-claro #modal-generico-body input[type="password"], body.tema-claro #modal-generico-body input[type="email"], body.tema-claro #modal-generico-body input[type="search"], body.tema-claro #modal-generico-body input[type="tel"], body.tema-claro #modal-generico-body input[type="url"]{ background:#fff; border-color:#C0D4EC; color:#0D2B5E; } #modal-generico-body textarea:focus, #modal-generico-body input:not([type]):focus, #modal-generico-body input[type="text"]:focus, #modal-generico-body input[type="password"]:focus, #modal-generico-body input[type="email"]:focus, #modal-generico-body input[type="search"]:focus, #modal-generico-body input[type="tel"]:focus, #modal-generico-body input[type="url"]:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,111,217,.15); } /* ── FLASH ── */ .flash{ padding:12px 16px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:16px; display:none; } .flash.ok{ background:rgba(34,201,122,.15); border:1px solid rgba(34,201,122,.4); color:var(--success); } .flash.err,.flash.erro{ background:rgba(255,68,85,.15); border:1px solid rgba(255,68,85,.4); color:var(--danger); } .flash.info{ background:rgba(30,111,217,.12); border:1px solid rgba(30,111,217,.35); color:var(--accent2); } /* ── BADGE ── */ .badge{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; } .badge-ok{ background:rgba(34,201,122,.18); color:#22C97A; } .badge-err{ background:rgba(255,68,85,.18); color:#FF4455; } .badge-warn{ background:rgba(255,194,51,.18); color:#FFC233; } .badge-info{ background:rgba(74,159,255,.18); color:#4A9FFF; } /* ── CARDS ADMIN ── */ .cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; } .admin-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; transition:all .2s; cursor:default; display:flex; flex-direction:column; min-width:0; overflow:hidden; /* ← impede overflow fora do grid */ } .admin-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px var(--shadow); } .admin-card .card-title{ font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; word-break:break-word; min-width:0; } .admin-card .card-sub{ font-size:12px; color:var(--muted); line-height:1.5; } .card-actions{ display:flex; gap:8px; margin-top:auto; padding-top:12px; } .admin-card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:8px; } .admin-card-body{ font-size:12px; color:var(--muted); line-height:1.6; display:flex; flex-direction:column; flex:1; } .admin-card-actions{ display:flex; gap:6px; flex-shrink:0; } /* ── VIEW TOGGLE (cards / lista) ── */ .view-btns{ display:flex; gap:3px; } .view-btn{ padding:5px 10px; border:1.5px solid var(--border); border-radius:7px; background:var(--surface); cursor:pointer; color:var(--muted); font-size:12px; transition:.15s; line-height:1; } .view-btn:hover{ border-color:var(--accent); color:var(--accent2); } .view-btn.ativo{ border-color:var(--accent); color:var(--accent2); background:rgba(30,111,217,.10); } /* ── TABELA ADMIN (lista de tarefas / metas em modo lista) ── */ .admin-table{ width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; } .admin-table th, .admin-table td{ overflow-wrap:anywhere; word-break:break-word; } .admin-table th{ padding:7px 9px; text-align:left; background:linear-gradient(135deg,#1A4080,#2A5BA8); color:#fff; font-weight:600; font-size:11px; border-bottom:none; white-space:normal; } body.tema-claro .admin-table th{ background:linear-gradient(135deg,#1A4080,#2A5BA8); color:#fff; } body.tema-escuro .admin-table th{ background:linear-gradient(135deg,#0f2855,#1a3f7a); color:#d8e8ff; } .admin-table th:first-child{ border-radius:8px 0 0 0; } .admin-table th:last-child { border-radius:0 8px 0 0; } .admin-table td{ padding:7px 9px; border-bottom:1px solid var(--border); vertical-align:middle; white-space:normal; } .admin-table tbody tr:hover td{ background:rgba(30,111,217,.04); } .admin-table .act-cell{ white-space:normal; text-align:right; } .admin-table .peso-bar{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle; } /* ── META NOTIF REGRAS ── */ .regra-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; transition:.2s; display:flex; flex-direction:column; /* alinha botões no rodapé */ } .regra-card:hover{ border-color:var(--accent); } .regra-card-header{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; } .regra-card-title{ font-weight:700; font-size:14px; line-height:1.35; word-break:break-word; } .regra-card-pills{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .gatilho-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; } .gatilho-horario{ background:rgba(74,159,255,.12); color:var(--accent2); border:1px solid rgba(74,159,255,.3); } .gatilho-pct{ background:rgba(34,201,122,.10); color:var(--success); border:1px solid rgba(34,201,122,.25); } .gatilho-dias{ background:rgba(255,171,0,.10); color:var(--warn); border:1px solid rgba(255,171,0,.25); } .gatilho-sem-lanc{ background:rgba(255,77,77,.10); color:var(--danger); border:1px solid rgba(255,77,77,.25); } /* status filter buttons no modal de detalhe */ .mrd-status-btn{ border-radius:20px!important; } .mrd-status-btn.ativo{ background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important; } /* Botões de dia da semana */ .regra-dia-btn{ padding:5px 11px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); transition:all .15s; user-select:none; } body.tema-claro .regra-dia-btn{ background:#f4f6fa; color:#8a9ab5; border-color:#C8D8EE; } .regra-dia-btn.ativo{ border-color:var(--accent); background:rgba(30,111,217,.12); color:var(--accent2); } body.tema-claro .regra-dia-btn.ativo{ border-color:#1E6FD9; background:rgba(30,111,217,.10); color:#1E6FD9; } /* hover mais visível nos cards de regra */ .regra-card:hover{ box-shadow:0 2px 12px rgba(0,0,0,.12); transform:translateY(-1px); } /* ── BOTÕES SVG DAS REGRAS ── */ .regra-btn{ display:inline-flex; align-items:center; gap:5px; padding:5px 10px; font-size:12px; font-weight:600; } .regra-btn svg{ flex-shrink:0; } .regra-btn.icon-only{ padding:5px 8px; } .btn-lbl{ white-space:nowrap; } /* Em telas ≤ 480px: esconde o texto, mantém só o ícone */ @media(max-width:480px){ .regra-btn .btn-lbl{ display:none; } .regra-btn{ padding:5px 8px; } } .proximidade-bar{ height:5px; border-radius:3px; background:var(--border); overflow:hidden; } .proximidade-bar-fill{ height:100%; border-radius:3px; transition:width .5s ease; } .meta-progress-wrap{ margin-top:auto; padding-top:12px; } .meta-progress-bar-bg{ height:5px; border-radius:3px; background:var(--border); overflow:hidden; } .meta-progress-bar-fill{ height:100%; border-radius:3px; transition:width .4s; } /* ── PERMISSÕES (Cargo — layout tipo CRM / Nectar-like) ──────── */ .modal-cargo-permissoes.modal{ max-width:620px; width:94vw; } .nc-permissoes-shell{ margin-top:12px; } .perm-sheet-intro{ font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px; } .perm-sheet-scroll{ max-height:min(58vh,480px); overflow-y:auto; padding-right:4px; margin-right:-2px; } .perm-sheet-group{ border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden; background:var(--surface2); } .perm-sheet-group--warn{ border-color:rgba(232,123,0,.4); box-shadow:inset 0 0 0 1px rgba(232,123,0,.08); } .perm-sheet-group--embed{ background:var(--card); } body.tema-claro .perm-sheet-group{ background:#fafbfd; } body.tema-claro .perm-sheet-group--embed{ background:#fff; } .perm-sheet-group-hd{ padding:10px 12px 9px; background:rgba(30,111,217,.07); border-bottom:1px solid var(--border); } body.tema-claro .perm-sheet-group-hd{ background:rgba(30,111,217,.06); } .perm-sheet-group-title{ font-size:12px; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:.04em; } .perm-sheet-group-sub{ display:block; margin-top:3px; font-size:11px; font-weight:500; color:var(--muted); line-height:1.35; text-transform:none; letter-spacing:0; } .perm-sheet-rows{ padding:0; } .perm-sheet-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 12px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; } .perm-sheet-row:last-child{ border-bottom:none; } .perm-sheet-row:hover{ background:rgba(255,255,255,.04); } body.tema-claro .perm-sheet-row:hover{ background:rgba(13,43,94,.04); } .perm-sheet-row--readonly{ cursor:default; pointer-events:none; } .perm-sheet-row--readonly:hover{ background:transparent; } body.tema-claro .perm-sheet-row--readonly:hover{ background:transparent; } .perm-sheet-row-txt{ min-width:0; flex:1; } .perm-sheet-row-name{ font-size:13px; font-weight:700; color:var(--text); display:block; line-height:1.25; } .perm-sheet-row-name--warn{ color:var(--warn); } .perm-sheet-row-desc{ font-size:11px; color:var(--muted); margin-top:3px; line-height:1.4; display:block; } .perm-sheet-check{ width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; margin:0; } .user-perm-list--perm-sheet{ background:transparent; border:none; border-radius:0; overflow:visible; } /* ── PERMISSÕES (grid legado — ainda usado em outros pontos se houver) ── */ .perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-top:12px; } .perm-item{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface); border:1.5px solid var(--border); border-radius:8px; cursor:pointer; transition:border-color .15s; } .perm-item:hover{ border-color:var(--accent); } .perm-item input[type="checkbox"]{ accent-color:var(--accent); width:15px; height:15px; cursor:pointer; } .perm-item label{ font-size:13px; color:var(--text); cursor:pointer; } /* ── STATUS WPP ── */ .wpp-status{ display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; } .wpp-dot{ width:10px; height:10px; border-radius:50%; } .wpp-dot.ok{ background:var(--success); } .wpp-dot.err{ background:var(--danger); } .wpp-dot.warn{ background:var(--warn); } .qr-wrap{ text-align:center; margin:16px 0; } .qr-wrap img{ border-radius:12px; border:3px solid var(--border); max-width:220px; } /* ── DISPARO EM MASSA ── */ .disparo-section{ margin-top:28px; padding-top:24px; border-top:1px solid var(--border); } .disparo-section-title{ font-size:15px; font-weight:700; color:var(--text); margin-bottom:18px; display:flex; align-items:center; gap:8px; } .disparo-tipo-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; } .disparo-tipo-btn{ display:flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); color:var(--muted2); font-size:13px; font-weight:600; cursor:pointer; transition:.15s; } .disparo-tipo-btn:hover{ border-color:var(--accent); color:var(--accent); } .disparo-tipo-btn.ativo{ border-color:var(--accent); background:rgba(30,111,217,.12); color:var(--accent2); } .disparo-dest-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; } .disparo-dest-btn{ padding:6px 14px; border-radius:20px; border:1.5px solid var(--border); background:transparent; color:var(--muted2); font-size:12px; font-weight:600; cursor:pointer; transition:.15s; } .disparo-dest-btn:hover{ border-color:var(--accent2); color:var(--accent2); } .disparo-dest-btn.ativo{ border-color:var(--accent); background:rgba(30,111,217,.12); color:var(--accent2); } .disparo-preview{ display:flex; flex-wrap:wrap; gap:6px; min-height:36px; padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; margin-bottom:12px; } .dest-chip{ display:inline-flex; align-items:center; gap:5px; background:rgba(30,111,217,.12); border:1px solid rgba(30,111,217,.2); border-radius:20px; padding:3px 10px; font-size:12px; font-weight:500; color:var(--accent2); } .dest-chip .rm{ cursor:pointer; color:var(--muted2); font-size:11px; line-height:1; } .dest-chip .rm:hover{ color:var(--danger); } .disparo-upload-area{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; border:2px dashed var(--border); border-radius:10px; background:var(--bg); cursor:pointer; text-align:center; transition:.15s; } .disparo-upload-area:hover{ border-color:var(--accent); } .disparo-upload-area.com-arquivo{ border-color:var(--success); background:rgba(34,201,122,.06); } .disparo-resultado{ margin-top:16px; padding:14px 16px; border-radius:10px; background:var(--bg); border:1px solid var(--border); display:none; } .disparo-resultado.visivel{ display:block; } /* ── WPP HERO HEADER ── */ .wpp-hero{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 24px 16px; border-bottom:1px solid var(--border); background:var(--surface); border-radius:16px 16px 0 0; } .wpp-hero-left{ display:flex; align-items:center; gap:14px; } .wpp-hero-icon{ font-size:36px; line-height:1; } .wpp-hero-title{ font-size:18px; font-weight:800; letter-spacing:-.3px; } .wpp-hero-sub{ font-size:12px; color:var(--muted); margin-top:2px; } .wpp-hero-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .wpp-conn-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; background:var(--bg); border:1.5px solid var(--border); font-size:12px; font-weight:700; cursor:pointer; } .wpp-conn-pill:hover{ border-color:var(--accent); } .wpp-kpis{ display:flex; align-items:center; gap:2px; } .wpp-kpi-item{ text-align:center; padding:3px 8px; } .wpp-kpi-val{ display:block; font-size:17px; font-weight:800; color:var(--text); line-height:1.1; } .wpp-kpi-lbl{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; } .wpp-kpi-sep{ width:1px; height:24px; background:var(--border); flex-shrink:0; } .wpp-kpi-err .wpp-kpi-val{ color:var(--danger); } /* ── WPP TABS BAR ── */ .wpp-tabs-wrap{ background:var(--surface); border-bottom:1px solid var(--border); padding:0 clamp(6px, 1.8vw, 14px); overflow-x:hidden; max-width:100%; } .wpp-tabs{ display:flex; flex-wrap:wrap; gap:0; overflow-x:hidden; max-width:100%; } .wpp-tab-btn{ display:inline-flex; align-items:center; gap:4px; padding:9px 11px; font-size:11.5px; font-weight:600; color:var(--muted); background:none; border:none; border-bottom:2.5px solid transparent; cursor:pointer; white-space:normal; transition:color .15s, border-color .15s; } .wpp-tab-btn:hover{ color:var(--text); } .wpp-tab-btn.ativo{ color:var(--accent); border-bottom-color:var(--accent); } .wpp-tab-badge{ background:var(--danger); color:#fff; border-radius:10px; padding:1px 6px; font-size:10px; font-weight:700; margin-left:2px; } /* ── WPP TAB PANES ── */ .wpp-tab-pane{ display:none; padding:18px 0 0; } .wpp-tab-pane.ativo{ display:block; } /* ── WPP CARD ── */ .wpp-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin-bottom:14px; } .wpp-card-title{ font-size:13px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } /* ── STEP BAR (disparo em massa) ── */ .wpp-step-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:center; margin-bottom:16px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; } .wpp-step-item{ display:flex; align-items:center; gap:6px; flex:1 1 120px; justify-content:center; opacity:.38; transition:opacity .2s; } .wpp-step-item.ativo,.wpp-step-item.ok{ opacity:1; } .wpp-step-n{ width:24px; height:24px; border-radius:50%; flex-shrink:0; background:var(--border); color:var(--muted); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s; } .wpp-step-item.ativo .wpp-step-n{ background:var(--accent); color:#fff; } .wpp-step-item.ok .wpp-step-n{ background:var(--success); color:#fff; } .wpp-step-lbl{ font-size:11px; font-weight:600; color:var(--muted); } .wpp-step-item.ativo .wpp-step-lbl, .wpp-step-item.ok .wpp-step-lbl{ color:var(--text); } .wpp-step-line{ width:1px; height:20px; background:var(--border); flex-shrink:0; margin:0 8px; } /* ── WPP — BARRA DE STATUS ──────────────────────────────────── */ .wpp-status-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border-radius:12px; margin-bottom:16px; background:var(--surface); border:1px solid var(--border); } .wpp-status-bar .wpp-conn{ display:flex; align-items:center; gap:8px; flex:1; min-width:160px; } .wpp-status-bar .wpp-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; } .wpp-dot.ok { background:var(--success); box-shadow:0 0 6px var(--success); } .wpp-dot.err { background:var(--danger); box-shadow:0 0 6px var(--danger); } .wpp-dot.warn{ background:var(--warn); box-shadow:0 0 6px var(--warn); } .wpp-status-bar .wpp-kpis{ display:flex; gap:10px; flex-wrap:wrap; } .wpp-kpi{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:70px; padding:5px 12px; border-radius:8px; background:var(--bg); border:1px solid var(--border); } .wpp-kpi-val{ font-size:18px; font-weight:800; line-height:1.1; } .wpp-kpi-lbl{ font-size:10px; color:var(--muted); font-weight:600; letter-spacing:.3px; margin-top:1px; } /* ── WPP — ABAS (quebram linha, sem scroll lateral) ────────── */ .wpp-tabs{ display:flex; flex-wrap:wrap; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; overflow-x:hidden; max-width:100%; } .wpp-tab{ flex:0 1 auto; padding:7px 11px; border:none; background:none; font-size:11.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; transition:.15s; white-space:normal; text-align:center; } .wpp-tab:hover{ color:var(--text); } .wpp-tab.ativo{ color:var(--text); border-bottom-color:var(--accent); } .wpp-tab-content{ display:none; } .wpp-tab-content.ativo{ display:block; } /* ── EDITOR IN-PLACE ─────────────────────────────────────────── */ #inplace-edit-bar { position: sticky; top: 0; z-index: 9000; gap: 10px; flex-wrap: wrap; border-bottom: 2px solid #3b82f6; box-shadow: 0 4px 20px rgba(0,0,0,.4); } /* ── PAINEL IA ───────────────────────────────────────────────── */ .ia-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } @media(max-width:720px){ .ia-stats-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:420px){ .ia-stats-grid{ grid-template-columns:1fr; } } .ia-stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 10px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; transition:border-color .2s; } .ia-stat-card:hover{ border-color:var(--accent); } .ia-stat-card--destaque{ border-color:var(--accent); background:rgba(74,159,255,.06); } .ia-stat-icon{ color:var(--accent); display:flex; } .ia-stat-val{ font-size:20px; font-weight:800; color:var(--text); line-height:1; } .ia-stat-label{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; } .ia-stat-sub{ font-size:10px; color:var(--muted); } .ia-periodo-btn{ padding:3px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:.15s; } .ia-periodo-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); } /* ── WPP — NOTIF QUICK-ACCESS ───────────────────────────────── */ .wpp-notif-bloco{ padding:14px 0 16px; } .wpp-notif-hint{ font-size:12px; color:var(--muted); margin:0 0 10px; } .wpp-notif-btns{ display:flex; gap:8px; flex-wrap:wrap; } .wpp-notif-status{ font-size:12px; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface); } .wpp-notif-bar{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:8px 12px; border-top:1px solid var(--border); } /* ── WPP — Intro/Explicação por aba ─────────────────────────── */ .wpp-intro{ margin:12px 12px 10px; padding:12px 14px; border-radius:12px; background:rgba(30,111,217,.06); border:1px solid rgba(30,111,217,.18); color:var(--text); display:flex; gap:10px; align-items:flex-start; } .wpp-intro-ico{ width:34px;height:34px;border-radius:10px; background:rgba(30,111,217,.12); display:flex;align-items:center;justify-content:center; color:var(--accent2); flex-shrink:0; } .wpp-intro-title{ font-size:13px; font-weight:800; margin-bottom:2px; } .wpp-intro-desc{ font-size:12px; color:var(--muted); line-height:1.45; } body.tema-claro .wpp-intro{ background:rgba(30,111,217,.05); border-color:rgba(30,111,217,.16); } /* Botão de pausas (metas/tarefas) — mais "action" e consistente */ #notif-meta-pausas-btn, #notif-tarefa-pausas-btn{ white-space:nowrap; } /* Filtro de tipo de notificação (same shape as disparo-tipo-btn, compact) */ .notif-select{ width:100%; height:34px; padding:0 34px 0 11px; border:1px solid var(--border); border-radius:8px; background-color:var(--surface); color:var(--text); font-size:12px; font-weight:600; outline:none; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:var(--select-chevron); background-repeat:no-repeat; background-position:right 10px center; background-size:17px; transition:border-color .15s, box-shadow .15s, background-color .15s; } .notif-select:hover{ border-color:rgba(30,111,217,.45); } .notif-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,111,217,.12); } /* Campo de busca (Metas / Tarefas no hub WhatsApp) — ícone SVG à esquerda */ .notif-busca-wrap{ position:relative; display:flex; align-items:center; width:100%; } .notif-busca-ico{ position:absolute; left:10px; top:50%; transform:translateY(-50%); display:flex; color:var(--muted); pointer-events:none; } .notif-busca-input{ width:100%; height:34px; padding:0 12px 0 36px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-size:12px; font-weight:600; outline:none; box-sizing:border-box; transition:border-color .15s, box-shadow .15s; } .notif-busca-input::placeholder{ color:var(--muted); font-weight:500; } .notif-busca-input:hover{ border-color:rgba(30,111,217,.45); } .notif-busca-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,111,217,.12); } .notif-filter-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--bg); } .notif-check-label{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; cursor:pointer; color:var(--muted2); } .notif-check, .notif-check-all{ width:17px; height:17px; border:1.5px solid var(--border); border-radius:5px; background:var(--surface); cursor:pointer; flex-shrink:0; appearance:none; display:inline-grid; place-content:center; transition:background .12s, border-color .12s, box-shadow .12s; } .notif-check:hover, .notif-check-all:hover{ border-color:var(--accent); } .notif-check:checked, .notif-check-all:checked{ border-color:var(--accent); background-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; } .notif-check:focus-visible, .notif-check-all:focus-visible{ box-shadow:0 0 0 3px rgba(30,111,217,.18); outline:none; } .notif-tipo-btn{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:8px; font-size:12px; font-weight:600; border:1.5px solid var(--border); background:var(--surface); color:var(--muted2); cursor:pointer; transition:.15s; } .notif-tipo-btn:hover{ border-color:var(--accent); color:var(--accent); } .notif-tipo-btn.ativo{ border-color:var(--accent); background:rgba(30,111,217,.12); color:var(--accent2); } /* Lista de destinatários */ .notif-dest-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; transition:background .12s; border-bottom:1px solid var(--border); position:relative; } .notif-dest-item:last-child{ border-bottom:none; } .notif-dest-item:hover{ background:var(--surface); } .notif-dest-item.selecionado{ background:rgba(30,111,217,.07); } .notif-dest-item.selecionado .notif-dest-avatar{ background:var(--accent); } .notif-dest-avatar{ width:30px; height:30px; border-radius:50%; flex-shrink:0; background:var(--muted2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; transition:background .12s; } .notif-dest-nome{ font-size:13px; font-weight:600; color:var(--text); line-height:1.2; } .notif-dest-info{ font-size:11px; color:var(--muted); display:block; margin-top:1px; } /* Painel de destinatários — estados */ .notif-vazio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px 12px; color:var(--muted); font-size:12px; text-align:center; } .notif-vazio svg{ opacity:.4; } .notif-erro{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px 12px; color:var(--danger); font-size:12px; text-align:center; } .notif-erro svg{ opacity:.7; } /* Barra de controle de envio */ .notif-send-bar{ display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--border); background:var(--surface); align-items:center; } .notif-send-bar .btn-primary{ flex:1; font-size:12px; } .notif-send-bar .btn-secondary:disabled{ opacity:.55; cursor:not-allowed; } @media(max-width:720px){ .notif-filter-grid{ grid-template-columns:1fr; } } .btn-pausado{ background:rgba(255,150,0,.15) !important; border-color:rgba(255,150,0,.5) !important; color:#f59e0b !important; } /* ── WPP — LAYOUT 2 COLUNAS (Disparo) ───────────────────────── */ .wpp-disparo-grid{ display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start; } @media(max-width:820px){ .wpp-disparo-grid{ grid-template-columns:1fr; } .wpp-phone-sticky{ position:static !important; } } .wpp-phone-sticky{ position:sticky; top:16px; } .wpp-phone{ border-radius:28px; border:6px solid var(--border); background:#111; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.4); } body.tema-claro .wpp-phone{ background:#1a1a2e; border-color:#C8D8EE; } .wpp-phone-bar{ display:flex; align-items:center; gap:8px; background:#075e54; padding:10px 14px; } .wpp-phone-avatar{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; } .wpp-phone-name{ font-size:13px; font-weight:700; color:#fff; } .wpp-phone-sub{ font-size:10px; color:rgba(255,255,255,.7); } .wpp-phone-chat{ background:#e5ddd5; min-height:220px; padding:12px 10px; display:flex; flex-direction:column; gap:6px; } body.tema-claro .wpp-phone-chat{ background:#d9d9d9; } .wpp-bubble{ max-width:85%; background:#fff; border-radius:8px 8px 8px 0; padding:8px 10px; font-size:12px; line-height:1.5; color:#111; box-shadow:0 1px 2px rgba(0,0,0,.15); align-self:flex-start; word-break:break-word; } .wpp-bubble-time{ font-size:10px; color:#888; text-align:right; margin-top:3px; } .wpp-phone-footer{ background:#f0f0f0; padding:8px 10px; display:flex; align-items:center; gap:8px; } .wpp-phone-input-fake{ flex:1; background:#fff; border-radius:20px; padding:6px 12px; font-size:11px; color:#aaa; } /* ── WPP SECTIONS (mantido para compatibilidade interna) ─────── */ .wpp-sec-icon{ width:30px; height:30px; border-radius:8px; background:rgba(30,111,217,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .wpp-step-label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:16px 0 8px; display:flex; align-items:center; gap:6px; } .wpp-step-label::before{ content:''; display:inline-block; width:3px; height:14px; border-radius:2px; background:var(--accent); flex-shrink:0; } /* Agendamento — caixa de destaque */ .wpp-agendamento-box{ margin-top:14px; padding:14px 16px; background:var(--bg); border:1.5px solid var(--border); border-radius:12px; transition:border-color .2s; } .wpp-agendamento-box.ativo{ border-color:var(--accent); background:rgba(30,111,217,.04); } .wpp-agendamento-toggle{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; cursor:pointer; user-select:none; } .wpp-agendamento-toggle input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; } .wpp-agendamento-campos{ margin-top:12px; display:flex; flex-direction:column; gap:10px; } .wpp-agendamento-dica{ font-size:11px; color:var(--muted); line-height:1.5; padding:8px 10px; background:var(--surface); border-radius:8px; border-left:3px solid var(--accent); } .wpp-adv-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted2); cursor:pointer; margin-top:12px; padding:5px 12px; border:1px solid var(--border); border-radius:20px; transition:.15s; } .wpp-adv-toggle:hover{ border-color:var(--accent); color:var(--accent); } /* ── WIZARD ── */ .wiz-steps{ display:flex; align-items:stretch; margin-bottom:20px; border-radius:10px; background:var(--bg); border:1px solid var(--border); overflow:hidden; } .wiz-step{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:9px 4px; font-size:10px; font-weight:600; color:var(--muted); transition:.2s; border-right:1px solid var(--border); cursor:default; gap:4px; } .wiz-step:last-child{ border-right:none; } .wiz-step.ativo{ color:var(--accent2); background:rgba(30,111,217,.08); } .wiz-step.feito{ color:var(--success); background:rgba(34,201,122,.06); cursor:pointer; } .wiz-step.feito:hover{ background:rgba(34,201,122,.12); } .wiz-step-num{ width:20px; height:20px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; transition:.2s; } .wiz-step.ativo .wiz-step-num{ background:var(--accent); color:#fff; } .wiz-step.feito .wiz-step-num{ background:var(--success); color:#fff; } .wiz-pane{ display:none; } .wiz-pane.ativo{ display:block; } /* WhatsApp bubble preview */ .wpp-preview-wrap{ background:#0B1420; border-radius:12px; padding:14px 16px; margin-top:14px; min-height:60px; } body.tema-claro .wpp-preview-wrap{ background:#E5DDD5; } .wpp-preview-label{ font-size:11px; font-weight:600; color:rgba(255,255,255,.35); margin-bottom:10px; } body.tema-claro .wpp-preview-label{ color:rgba(0,0,0,.4); } .wpp-bubble{ background:#1F2E3E; color:#E8F0FB; border-radius:0 10px 10px 10px; padding:10px 14px; font-size:13px; line-height:1.6; max-width:90%; display:inline-block; word-break:break-word; box-shadow:0 1px 3px rgba(0,0,0,.3); position:relative; } body.tema-claro .wpp-bubble{ background:#FFFFFF; color:#111B21; } .wpp-bubble::before{ content:''; position:absolute; top:0; left:-7px; width:0; height:0; border-top:7px solid #1F2E3E; border-left:7px solid transparent; } body.tema-claro .wpp-bubble::before{ border-top-color:#FFFFFF; } .wpp-bubble-time{ font-size:10px; color:rgba(255,255,255,.4); text-align:right; margin-top:6px; } body.tema-claro .wpp-bubble-time{ color:rgba(0,0,0,.4); } .wpp-bubble-divider{ border:none; border-top:1px solid rgba(255,255,255,.12); margin:8px 0 6px; } body.tema-claro .wpp-bubble-divider{ border-top-color:rgba(0,0,0,.1); } .wpp-bubble-opt-text{ font-size:12px; color:rgba(255,255,255,.65); margin:3px 0; } body.tema-claro .wpp-bubble-opt-text{ color:#667781; } .wpp-bubble-opt-btn{ background:#1A3A5E; border:none; color:#4A9FFF; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; cursor:default; text-align:center; width:100%; margin-top:6px; display:block; } body.tema-claro .wpp-bubble-opt-btn{ background:#F0F6FF; color:#1A6FD4; } /* Review */ .wiz-rev-grid{ display:flex; flex-direction:column; gap:10px; } .wiz-rev-sec{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; } .wiz-rev-title{ font-size:12px; font-weight:700; color:var(--accent2); margin-bottom:8px; display:flex; align-items:center; gap:6px; } .wiz-rev-row{ display:flex; gap:8px; font-size:13px; padding:2px 0; color:var(--text); } .wiz-rev-row span:first-child{ min-width:90px; color:var(--muted); flex-shrink:0; font-size:12px; } /* ── WMC — shared WhatsApp message-card component ── */ .wmc-vars{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:11px; color:var(--muted); margin-bottom:8px; } .wmc-var-chip{ background:rgba(74,159,255,.12); color:var(--accent2); border-radius:4px; padding:1px 7px; font-family:monospace; font-size:11px; cursor:pointer; border:1px solid rgba(74,159,255,.2); transition:.1s; user-select:none; } .wmc-var-chip:hover{ background:rgba(74,159,255,.25); border-color:var(--accent); } .wmc-toggle-btn{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 11px; border-radius:20px; border:1px solid var(--border); cursor:pointer; color:var(--muted); background:transparent; transition:.15s; } .wmc-toggle-btn:hover{ border-color:var(--accent); color:var(--accent); } .wmc-toggle-btn.on, .wmc-toggle-btn.ativo{ border-color:var(--accent); color:var(--accent2); background:rgba(30,111,217,.08); } .wmc-attach-zone{ border:1.5px dashed var(--border); border-radius:10px; padding:12px 14px; background:var(--bg); transition:.15s; cursor:pointer; } .wmc-attach-zone:hover{ border-color:var(--accent); } .wmc-attach-zone.has-file{ border-color:var(--success); border-style:solid; background:rgba(34,201,122,.04); cursor:default; } .wmc-attach-row{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:13px; } .wmc-attach-thumb{ width:44px; height:44px; border-radius:6px; object-fit:cover; flex-shrink:0; } .wmc-attach-icon{ width:44px; height:44px; border-radius:6px; flex-shrink:0; background:rgba(30,111,217,.1); display:flex; align-items:center; justify-content:center; color:var(--accent); } .wiz-sec-div{ display:flex; align-items:center; gap:10px; margin:16px 0 10px; font-size:11px; font-weight:700; color:var(--muted); } .wiz-sec-div::before,.wiz-sec-div::after{ content:''; flex:1; height:1px; background:var(--border); } .filtro-ativo-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--accent2); background:rgba(30,111,217,.1); border:1px solid rgba(30,111,217,.25); border-radius:20px; padding:3px 11px; cursor:pointer; transition:.15s; } .filtro-ativo-badge:hover{ background:rgba(30,111,217,.2); } /* ── RANKING – TABS ── */ .rank-tab{ padding:8px 16px;border:none;border-bottom:3px solid transparent; background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600; font-family:inherit;transition:.15s;margin-bottom:-2px;display:inline-flex;align-items:center;gap:5px; border-radius:6px 6px 0 0; } .rank-tab:hover{ color:var(--text);background:rgba(255,255,255,.04); } .rank-tab.ativo{ color:var(--accent2);border-bottom-color:var(--accent);background:rgba(30,111,217,.06); } body.tema-claro .rank-tab:hover{ background:rgba(0,0,0,.04); } body.tema-claro .rank-tab.ativo{ background:rgba(30,111,217,.07); } /* ── RANKING – PODIUM TOP 3 ── */ .rank-podium{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; margin-bottom:8px; align-items:end; } .rank-podium-slot{ display:flex;flex-direction:column;align-items:stretch; } .rank-podium-card{ background:var(--card);border:1px solid var(--border); border-bottom:none; border-radius:14px 14px 0 0; padding:20px 14px 16px;text-align:center;position:relative;transition:.2s; } .rank-podium-card.lider{ border-color:rgba(245,196,0,.6); background:linear-gradient(145deg,rgba(245,196,0,.09),var(--card)); } .rank-podium-card.prata{ border-color:rgba(180,190,200,.4); } .rank-podium-card.bronze{ border-color:rgba(180,110,60,.35); } .rank-podium-card.eu-card{ box-shadow:0 0 0 3px rgba(232,123,0,.2);border-color:var(--orange) !important; } /* Plataformas / degraus */ .rank-podium-platform{ border:1px solid var(--border); border-top:none; border-radius:0 0 8px 8px; display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:1px; } .rank-podium-platform.lider{ height:60px; font-size:13px; color:rgba(245,196,0,.6); background:linear-gradient(180deg,rgba(245,196,0,.10),rgba(245,196,0,.03)); border-color:rgba(245,196,0,.5); } .rank-podium-platform.prata{ height:36px; font-size:11px; color:rgba(180,190,200,.5); background:linear-gradient(180deg,rgba(180,190,200,.07),transparent); border-color:rgba(180,190,200,.35); } .rank-podium-platform.bronze{ height:18px; font-size:10px; color:rgba(180,110,60,.45); background:linear-gradient(180deg,rgba(180,110,60,.07),transparent); border-color:rgba(180,110,60,.3); } .rank-podium-lider-tag{ position:absolute;top:-10px;left:50%;transform:translateX(-50%); background:var(--yellow);color:#000;font-size:9px;font-weight:800; padding:2px 10px;border-radius:10px;letter-spacing:1.2px;white-space:nowrap; } .rank-eu-badge{ font-size:9px;background:var(--orange);color:#fff; padding:1px 6px;border-radius:8px;font-weight:700;vertical-align:middle; margin-left:4px;letter-spacing:.3px; } /* ── RANKING – TABELA ── */ .rank-table-wrap{ border-radius:10px; overflow-x:hidden; border:1px solid var(--border); max-width:100%; } .rank-table{ width:100%; border-collapse:collapse; table-layout:fixed; } .rank-table th, .rank-table td{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; } .rank-table th{ background:var(--bg); padding:6px 8px; font-size:10.5px; color:var(--muted); font-weight:600; text-align:left; border-bottom:1px solid var(--border); } .rank-table td{ padding:7px 8px; font-size:11.5px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; } body.tema-claro .rank-table td{ border-bottom-color:rgba(0,0,0,.05); } .rank-table tr:last-child td{ border-bottom:none; } .rank-table tr.rank-eu-row{ background:rgba(232,123,0,.06); } .rank-table tr:hover td{ background:rgba(255,255,255,.02); } body.tema-claro .rank-table tr:hover td{ background:rgba(0,0,0,.025); } .rank-pos-badge{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--bg); font-size:11px; font-weight:800; color:var(--muted2); } .rank-score-pill{ display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:20px; font-size:10.5px; font-weight:800; } .rank-score-verde{ background:rgba(34,201,122,.15);color:var(--success); } .rank-score-amarelo{ background:rgba(255,194,51,.15);color:var(--warn); } .rank-score-vermelho{ background:rgba(255,68,85,.15);color:var(--danger); } .rank-evo-up{ color:var(--success);font-weight:800;font-size:12px; } .rank-evo-down{ color:var(--danger);font-weight:800;font-size:12px; } .rank-evo-eq{ color:var(--muted);font-size:12px; } /* ── HISTÓRICO DE EVOLUÇÃO ─────────────────────────────── */ .hist-destaque-card{ background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:5px; } .hist-destaque-emoji{ font-size:20px;line-height:1; } .hist-destaque-label{ font-size:11px;color:var(--muted);font-weight:600; } .hist-destaque-nome{ font-size:14px;font-weight:700;margin-top:2px; } .hist-destaque-val{ font-size:12px;color:var(--muted); } .hist-desemp-btn{ padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;cursor:pointer;transition:.15s;font-family:inherit; } .hist-desemp-btn.ativo{ background:var(--accent);color:#fff;border-color:var(--accent); } .hist-desemp-btn:hover:not(.ativo){ border-color:var(--accent);color:var(--text); } /* ── DESEMPENHO / ADESÃO ───────────────────────────────────── */ .ades-progress{ background:var(--border);border-radius:4px;height:6px;overflow:hidden;margin-top:3px; } .ades-progress-bar{ height:100%;border-radius:4px;transition:width .6s; } .th-sortable{ cursor:pointer;user-select:none;transition:.1s; } .th-sortable:hover{ color:var(--text);background:rgba(255,255,255,.03); } /* ── PADRÕES DE FALHA ──────────────────────────────────────── */ .padrao-card{ background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:.15s; } .padrao-card:hover{ border-color:rgba(255,255,255,.12); } .padrao-header{ display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border); } .padrao-body{ padding:12px 16px; } .padrao-footer{ display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--border);flex-wrap:wrap; } .nivel-badge{ display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px; } .nivel-critico{ background:rgba(255,68,85,.15);color:var(--danger);border:1px solid rgba(255,68,85,.3); } .nivel-atencao{ background:rgba(255,194,51,.15);color:var(--warn);border:1px solid rgba(255,194,51,.3); } .nivel-normal{ background:rgba(34,201,122,.15);color:var(--success);border:1px solid rgba(34,201,122,.3); } .padrao-stat{ display:flex;align-items:center;gap:6px;padding:5px 0;font-size:12px;border-bottom:1px solid var(--border);margin-bottom:2px; } .padrao-stat:last-child{ border-bottom:none;margin-bottom:0; } .padrao-stat-icon{ font-size:14px;width:20px;text-align:center; } .padrao-tab{ flex:0 1 auto; padding:6px 9px; border:none; border-bottom:3px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; font-weight:600; font-family:inherit; transition:.15s; white-space:normal; text-align:center; } .padrao-tab.ativo{ color:var(--accent2);border-bottom-color:var(--accent); } .dash-padrao-tabbar{ display:flex; flex-wrap:wrap; gap:0; border-bottom:2px solid var(--border); margin-bottom:16px; overflow-x:hidden; max-width:100%; } .padrao-user-guia{ background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px; } body.tema-claro .padrao-card{ background:#fff; } body.tema-claro .padrao-card:hover{ border-color:rgba(0,0,0,.15); } @media(max-width:600px){ .rank-podium{ grid-template-columns:1fr; } .rank-podium-slot{ margin-bottom:12px; } .rank-podium-card{ border-radius:14px; border-bottom:1px solid var(--border); } .rank-podium-platform{ display:none; } .rank-table th:nth-child(3),.rank-table td:nth-child(3){ display:none; } } /* ── MSG EDITOR ── */ .msg-editor{ border:1.5px solid var(--border); border-radius:10px; overflow:visible; background:var(--surface); transition:border-color .15s; } .msg-editor:focus-within{ border-color:var(--accent); } .msg-editor-toolbar{ display:flex; align-items:center; gap:2px; padding:6px 8px; border-bottom:1px solid var(--border); background:var(--bg); border-radius:10px 10px 0 0; flex-wrap:wrap; } .msg-fmt-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px; border:none; border-radius:6px; cursor:pointer; background:transparent; color:var(--text); font-size:13px; font-weight:700; transition:background .15s, color .15s; white-space:nowrap; gap:4px; } .msg-fmt-btn:hover{ background:rgba(30,111,217,.12); color:var(--accent); } .msg-fmt-btn.ativo{ background:rgba(30,111,217,.18); color:var(--accent2); } .msg-fmt-sep{ width:1px; height:20px; background:var(--border); margin:0 4px; flex-shrink:0; } .msg-editor textarea{ border:none; background:transparent; color:var(--text); font-size:13px; resize:vertical; width:100%; padding:10px 12px; outline:none; font-family:'DM Sans',sans-serif; min-height:100px; border-radius:0 0 10px 10px; } /* ══════════════════════════════════════════════════════════════ EMOJI PICKER — estilo WhatsApp Web ══════════════════════════════════════════════════════════════ */ .emoji-picker-wrap{ position:relative; } /* Painel principal */ .wpp-emoji-panel{ position:absolute; bottom:calc(100% + 10px); left:0; z-index:400; width:350px; height:450px; background:#111b21; border-radius:12px; box-shadow:0 6px 40px rgba(0,0,0,.5); display:none; flex-direction:column; overflow:hidden; border:none; } body.tema-claro .wpp-emoji-panel{ background:#f0f2f5; box-shadow:0 6px 40px rgba(0,0,0,.18); } .wpp-emoji-panel.aberto{ display:flex; } /* Barra de busca */ .wpp-emoji-search{ display:flex; align-items:center; gap:8px; margin:10px 10px 6px; padding:6px 12px; background:#202c33; border-radius:8px; flex-shrink:0; } body.tema-claro .wpp-emoji-search{ background:#e9edef; } .wpp-emoji-search-ico{ color:#8696a0; flex-shrink:0; } .wpp-emoji-search input{ border:none; background:transparent; outline:none; width:100%; font-size:13.5px; color:#e9edef; font-family:inherit; } body.tema-claro .wpp-emoji-search input{ color:#111b21; } .wpp-emoji-search input::placeholder{ color:#8696a0; } /* Grid de emojis (scroll interno) */ .wpp-emoji-grid{ flex:1; overflow-y:auto; padding:4px 6px 2px; display:grid; grid-template-columns:repeat(8,1fr); align-content:start; gap:0; scrollbar-width:thin; scrollbar-color:#374045 transparent; } .wpp-emoji-grid::-webkit-scrollbar{ width:4px; } .wpp-emoji-grid::-webkit-scrollbar-track{ background:transparent; } .wpp-emoji-grid::-webkit-scrollbar-thumb{ background:#374045; border-radius:4px; } /* Cabeçalho de seção (span toda a largura do grid) */ .wpp-emoji-section-hd{ grid-column:1/-1; font-size:11px; font-weight:600; letter-spacing:.5px; color:#8696a0; padding:8px 4px 4px; text-transform:uppercase; } /* Botão de emoji individual */ .wpp-emoji-btn{ border:none; background:transparent; cursor:pointer; font-size:22px; line-height:1; padding:4px; border-radius:8px; transition:background .1s; text-align:center; display:flex; align-items:center; justify-content:center; width:40px; height:40px; } .wpp-emoji-btn:hover{ background:rgba(134,150,160,.15); } /* Twemoji — imagens geradas pelo twemoji.parse() */ .wpp-emoji-btn img.emoji, .wpp-emoji-cat-btn img.emoji, .emoji-btn img.emoji{ width:26px; height:26px; pointer-events:none; vertical-align:middle; } .wpp-emoji-cat-btn img.emoji{ width:20px; height:20px; } /* Barra de categorias (embaixo) */ .wpp-emoji-cats{ display:flex; align-items:center; justify-content:space-around; padding:0 6px; height:46px; flex-shrink:0; border-top:1px solid #202c33; } body.tema-claro .wpp-emoji-cats{ border-top-color:#e9edef; } /* Botão de categoria */ .wpp-emoji-cat-btn{ border:none; background:transparent; cursor:pointer; font-size:18px; padding:8px 6px; opacity:.45; transition:opacity .15s; border-top:2px solid transparent; margin-top:-1px; border-radius:0; flex:1; text-align:center; } .wpp-emoji-cat-btn:hover{ opacity:.75; } .wpp-emoji-cat-btn.ativo{ opacity:1; border-top-color:#00a884; } /* ── Manter classes antigas para o picker de disparo (retrocompat) ── */ .emoji-panel{ position:absolute; bottom:calc(100% + 8px); left:0; z-index:300; width:350px; height:450px; background:#111b21; border-radius:12px; box-shadow:0 6px 40px rgba(0,0,0,.5); display:none; flex-direction:column; overflow:hidden; } body.tema-claro .emoji-panel{ background:#f0f2f5; } .emoji-panel.aberto{ display:flex; } .emoji-cats{ display:flex; align-items:center; justify-content:space-around; padding:0 6px; height:46px; flex-shrink:0; border-top:1px solid #202c33; order:2; } body.tema-claro .emoji-cats{ border-top-color:#e9edef; } .emoji-cat-btn{ border:none; background:transparent; cursor:pointer; font-size:18px; padding:8px 6px; opacity:.45; transition:opacity .15s; border-top:2px solid transparent; margin-top:-1px; flex:1; text-align:center; } .emoji-cat-btn.ativo{ opacity:1; border-top-color:#00a884; } .emoji-cat-btn:hover{ opacity:.75; } .emoji-grid{ flex:1; display:grid; grid-template-columns:repeat(8,1fr); padding:4px 6px; overflow-y:auto; align-content:start; gap:0; scrollbar-width:thin; scrollbar-color:#374045 transparent; order:1; } .emoji-grid::-webkit-scrollbar{ width:4px; } .emoji-grid::-webkit-scrollbar-thumb{ background:#374045; border-radius:4px; } .emoji-btn{ border:none; background:transparent; cursor:pointer; font-size:22px; padding:5px; border-radius:8px; transition:background .1s; line-height:1; display:flex; align-items:center; justify-content:center; } .emoji-btn:hover{ background:rgba(134,150,160,.15); } /* ── TEMPLATES PANEL ── */ .tpl-panel{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-top:8px; display:none; } .tpl-panel.aberto{ display:block; } .tpl-card{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; cursor:pointer; transition:border-color .15s, background .15s; background:var(--surface); } .tpl-card:hover{ border-color:var(--accent); background:rgba(30,111,217,.05); } .tpl-card-body{ flex:1; min-width:0; } .tpl-card-nome{ font-size:13px; font-weight:600; margin-bottom:2px; } .tpl-card-prev{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ── HISTÓRICO AGENDAMENTOS ── */ .ag-hist-row{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; background:var(--surface); transition:border-color .15s; } .ag-hist-row:hover{ border-color:var(--accent); } .ag-badge{ display:inline-flex; align-items:center; justify-content:center; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; flex-shrink:0; } .ag-badge.pendente { background:rgba(255,194,51,.15); color:var(--warn); } .ag-badge.executado{ background:rgba(34,201,122,.15); color:var(--success); } .ag-badge.erro { background:rgba(255,68,85,.15); color:var(--danger); } .ag-badge.cancelado { background:rgba(74,106,144,.15); color:var(--muted); } /* ── NOTIF CARDS ── */ .notif-card{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; } .notif-card.desativado{ opacity:.5; } .notif-toggle{ display:flex; align-items:center; gap:10px; } .notif-fmt-btn{ padding:3px 9px; border-radius:6px; border:1.5px solid var(--border); background:transparent; color:var(--muted); font-size:11px; cursor:pointer; transition:all .15s; } .notif-fmt-btn:hover{ border-color:var(--accent); color:var(--accent); } .notif-fmt-btn.ativo{ border-color:var(--accent); background:rgba(30,111,217,.12); color:var(--accent2); } /* ── EMAIL TEMPLATE TABS ── */ .email-tpl-tabbar{ display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--border); background:var(--surface); overflow-x:hidden; max-width:100%; } .email-tpl-pane{ background:var(--card); } .email-sub-pane{ background:var(--card); } .email-tpl-tab{ flex:1 1 auto; padding:7px 9px; border:none; border-bottom:3px solid transparent; background:transparent; color:var(--muted); font-size:11px; font-weight:600; cursor:pointer; transition:all .15s; white-space:normal; text-align:center; min-width:0; } .email-tpl-tab:hover{ color:var(--text); } .email-tpl-tab.ativo{ color:var(--accent2); border-bottom-color:var(--accent); background:rgba(30,111,217,.07); } /* Sub-abas Envio / Conteúdo */ .email-sub-tabbar{ display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--border); overflow-x:hidden; max-width:100%; } .email-sub-tab{ flex:0 1 auto; padding:6px 10px; border:none; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:11px; font-weight:600; cursor:pointer; transition:all .15s; white-space:normal; text-align:center; } .email-sub-tab:hover{ color:var(--text); } .email-sub-tab.ativo{ color:var(--accent); border-bottom-color:var(--accent); background:rgba(30,111,217,.05); } /* Info box contextual */ .info-box{ background:rgba(30,111,217,.07); border:1px solid rgba(30,111,217,.2); border-radius:8px; padding:10px 14px; font-size:12px; color:var(--muted2); line-height:1.5; } /* Linha de campos lado a lado */ .form-row{ display:flex; gap:14px; flex-wrap:wrap; } .form-row .form-field{ flex:1; min-width:min(140px, 100%); } /* Blocos de conteúdo */ .email-blocos-grid{ display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; } .email-bloco-item{ display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; transition:background .12s; border-bottom:1px solid var(--border); } .email-bloco-item:last-child{ border-bottom:none; } .email-bloco-item:hover{ background:rgba(30,111,217,.05); } .email-bloco-item input[type="checkbox"]{ flex-shrink:0; width:16px; height:16px; accent-color:var(--accent); cursor:pointer; } .email-bloco-info{ display:flex; flex-direction:column; gap:2px; } .email-bloco-nome{ font-size:13px; font-weight:600; color:var(--text); } .email-bloco-desc{ font-size:11px; color:var(--muted); } /* Hints de variáveis */ .email-vars-hint{ font-size:11px; color:var(--muted); margin-bottom:6px; } .email-vars-hint code{ background:var(--surface); padding:1px 5px; border-radius:4px; font-size:10px; } /* label-optional */ .label-optional{ font-size:11px; color:var(--muted); font-weight:400; } /* Status label cor */ .etpl-status-on{ color:var(--success) !important; } .etpl-status-off{ color:var(--muted) !important; } /* ── SELETOR DE TIPO DE MÍDIA (Anexo WPP) ── */ .midia-tipo-btn-group{ display:flex; gap:5px; flex-wrap:wrap; } .midia-tipo-btn{ display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:6px; border:1.5px solid var(--border); background:var(--surface); color:var(--muted2); font-size:10px; font-weight:600; cursor:pointer; transition:all .14s; white-space:normal; text-align:center; line-height:1.25; } .midia-tipo-btn:hover{ border-color:var(--accent); color:var(--accent2); } .midia-tipo-btn.ativo{ border-color:var(--accent); background:rgba(30,111,217,.13); color:var(--accent2); } .midia-tipo-btn.ativo-foto { border-color:#18A863; background:rgba(24,168,99,.12); color:#18A863; } .midia-tipo-btn.ativo-audio { border-color:#E87B00; background:rgba(232,123,0,.12); color:#E87B00; } .midia-tipo-btn.ativo-video { border-color:#9C52E0; background:rgba(156,82,224,.12); color:#9C52E0; } .midia-tipo-btn.ativo-documento { border-color:var(--accent); background:rgba(30,111,217,.13); color:var(--accent2); } /* Aviso de formato */ .midia-formato-aviso{ font-size:10px; color:var(--muted); padding:4px 8px; background:var(--surface2); border-radius:5px; border:1px solid var(--border); line-height:1.4; margin-top:2px; } /* ── CONFIG TABS ── */ .config-tab{ padding:6px 11px; border:none; border-bottom:3px solid transparent; background:transparent; color:var(--muted); font-size:11.5px; font-weight:600; cursor:pointer; transition:all .15s; margin-bottom:-2px; } .config-tab:hover{ color:var(--text); } .config-tab.ativo{ color:var(--accent2); border-bottom-color:var(--accent); } .config-tab-content{ animation:fadeIn .2s ease; } .btn-danger{ background:var(--danger); color:#fff; border:none; } .btn-danger:hover{ background:#cc3344; } .notif-toggle input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; } .notif-toggle-label{ font-size:13px; font-weight:700; flex:1; } /* ── ENVIOS FEED ── */ .envio-item{ display:flex; gap:10px; align-items:flex-start; padding:9px 12px; border-bottom:1px solid var(--border); } .envio-item:last-child{ border-bottom:none; } .envio-status-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; } .envio-status-dot.respondeu { background:var(--success); } .envio-status-dot.nao-respondeu{ background:var(--danger); } .envio-status-dot.parcial { background:#F59E0B; } .envio-status-dot.sem-resposta { background:var(--muted2,#8a9ab5); } /* ════════════════════════════════════════════════════════════ ── WHATSAPP HUB (split-pane chat interface) ─────────────── ════════════════════════════════════════════════════════════ */ /* ── WHATSAPP HUB: layout tela-cheia ───────────────────────── Cancela o padding do content-area e usa 100% da viewport. */ /* WhatsApp: painel fora da content-area (#app-screen) — overlay fixo na coluna principal */ #panel-whatsapp.panel.active{ display:block; position:fixed; z-index:160; top:calc(var(--topbar-h-base) + env(safe-area-inset-top, 0px)); right:0; bottom:0; left:240px; margin:0; width:auto; max-width:none; } body.wpp-screen.wpp-topbar-collapsed #panel-whatsapp.panel.active{ top:calc(var(--topbar-wpp-peek-strip) + env(safe-area-inset-top, 0px)); } body:has(.app-main.sidebar-collapsed) #panel-whatsapp.panel.active{ left:64px; } /* Panel-inner: preenche o retângulo fixo */ #panel-whatsapp .panel-inner{ padding:0; display:flex; flex-direction:column; overflow:hidden; height:100%; min-height:0; border:none; border-radius:0; } /* Barra de status: oculta (status movido para sidebar) */ .wpp-hub-bar{ display:none !important; } /* Grid: flex (sidebar retrátil via width transition) */ .wpp-hub-grid{ flex:1; display:flex; overflow:hidden; min-height:0; } /* ── SIDEBAR ESQUERDA ───────────────────────────────────────── */ .wpp-hub-sidebar{ display:flex; flex-direction:column; overflow:hidden; border-right:1px solid rgba(134,150,160,.15); background:#111b21; width:min(332px, 100%); flex-shrink:0; transition:width .22s ease; } body.tema-claro .wpp-hub-sidebar{ background:#fff; border-right:1px solid var(--border); } /* Sidebar colapsada */ .wpp-hub-grid.sidebar-fechada .wpp-hub-sidebar{ width:0; border-right:none; overflow:hidden; } /* Cabeçalho da sidebar */ .wpp-hub-sidebar-hd{ display:flex; align-items:center; gap:2px; padding:8px 8px 6px; flex-shrink:0; border-bottom:1px solid rgba(134,150,160,.1); min-width:0; } .wpp-hub-sidebar-hd-title{ font-size:12px; font-weight:700; color:var(--text); flex:0 1 auto; min-width:0; max-width:4.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Ferramentas — alinhar ao início: com flex-end + overflow:hidden o ZIP da esquerda sumia (ex.: Disparo). */ .wpp-hub-sidebar-actions{ display:flex; gap:2px; flex:1 1 auto; justify-content:flex-start; align-items:center; min-width:0; max-width:none; flex-wrap:nowrap; overflow-x:hidden; overflow-y:visible; } /* Status na sidebar */ .wpp-hub-sidebar-status{ display:flex; align-items:center; gap:4px; flex-shrink:1; min-width:0; padding:0 2px; } .wpp-hub-sidebar-status .wpp-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; } /* Botões da sidebar (ferramentas + toggle) */ .wpp-hub-sidebar-btn, .wpp-sidebar-toggle{ width:24px; height:24px; border-radius:6px; border:none; background:transparent; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.12s; flex-shrink:0; } .wpp-hub-sidebar-btn svg, .wpp-sidebar-toggle svg{ width:12px; height:12px; flex-shrink:0; } .wpp-hub-sidebar-btn:hover, .wpp-sidebar-toggle:hover{ background:var(--surface2); color:var(--accent); } .wpp-hub-sidebar-btn.ativo{ background:rgba(30,111,217,.12); color:var(--accent); } /* Botão flutuante para reabrir sidebar */ .wpp-sidebar-reabrir{ position:absolute; top:10px; left:10px; z-index:10; width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; display:none; align-items:center; justify-content:center; transition:.12s; box-shadow:0 1px 6px rgba(0,0,0,.18); } .wpp-hub-grid.sidebar-fechada .wpp-sidebar-reabrir{ display:flex; } .wpp-sidebar-reabrir:hover{ color:var(--accent); border-color:var(--accent); } /* Busca — estilo discreto tipo WhatsApp (sidebar escura/clara) */ .wpp-hub-sidebar-search{ padding:5px 8px 2px; flex-shrink:0; } .wpp-hub-sidebar-search input{ width:100%; padding:5px 10px 5px 12px; border-radius:999px; font-size:12px; background:#202c33; border:none; color:#e9edef; outline:none; transition:background .15s, opacity .15s; font-family:'DM Sans',sans-serif; box-sizing:border-box; } .wpp-hub-sidebar-search input::placeholder{ color:rgba(241,249,246,.52); } .wpp-hub-sidebar-search input:focus{ outline:2px solid rgba(134,163,177,.28); outline-offset:0; background:#2a3942; } /* Filtros da lista — grid 2 col (cargo/setor), chips em linha; sem cortar “Todos” */ .chat-lista-filtros{ flex-shrink:0; padding:5px 8px 7px; border-bottom:1px solid rgba(134,150,160,.09); display:flex; flex-direction:column; gap:5px; min-width:0; } .chat-filtros-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; min-width:0; } .chat-filtros-checks{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; } .chat-filtro-field{ display:flex; flex-direction:column; gap:0; min-width:0; position:relative; } /* Label continua ligado ao controle por acessibilidade; só não ocupa espaço visual */ .chat-filtro-lbl{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .chat-filtro-select{ width:100%; min-width:0; max-width:none; box-sizing:border-box; /* Mesma “altura” dos chips “Não lidas” (.chat-filtro-chk) */ padding:4px 18px 4px 8px; border-radius:999px; font-size:10px; font-weight:600; line-height:1.25; min-height:0; background-color:#202c33; border:none; color:rgba(241,249,246,.9); font-family:'DM Sans',sans-serif; outline:none; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:var(--select-chevron); background-repeat:no-repeat; background-position:right 6px center; background-size:9px 9px; /* Não use shorthand `background` em :hover — resetaria repeat e multicava o ícone */ transition:background-color .15s, color .15s; } .chat-filtro-select option{ background:#111b21; color:#e9edef; } .chat-filtro-select:hover{ background-color:#2a3942; } .chat-filtro-select:focus-visible{ outline:2px solid rgba(134,163,177,.32); outline-offset:1px; } .wpp-hub-sidebar .chat-filtro-select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .chat-filtro-chk{ display:inline-flex; align-items:center; justify-content:center; gap:2px; font-size:10px; font-weight:600; color:rgba(209,209,209,.58); cursor:pointer; user-select:none; padding:4px 8px; border-radius:999px; line-height:1.25; background:#202c33; flex:0 1 auto; min-width:0; text-align:center; transition:background .15s, color .15s; } .chat-filtro-chk:hover{ background-color:#2a3942; color:rgba(231,239,239,.82); } .chat-filtro-chk:focus-within{ outline:2px solid rgba(134,163,177,.28); outline-offset:1px; } .chat-filtro-chk input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .chat-filtro-chk:has(input:checked){ background:#3f4f5b; color:#f7f9fa; font-weight:600; } .chat-filtro-limpar{ align-self:center; width:auto; margin:0; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:600; line-height:1.25; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; background:rgba(255,255,255,.05); color:rgba(233,237,239,.62); transition:background .15s, color .15s; } .chat-filtro-limpar:hover{ background:rgba(255,255,255,.08); color:#e9edef; } body.tema-claro .wpp-hub-sidebar-search input{ background:#f0f3f6; border:none; color:#111b21; } body.tema-claro .wpp-hub-sidebar-search input::placeholder{ color:#667781; } body.tema-claro .wpp-hub-sidebar-search input:focus{ outline:2px solid rgba(94,146,206,.38); background:#e9edef; } body.tema-claro .chat-lista-filtros{ border-bottom-color:rgba(17,31,43,.07); } body.tema-claro .chat-filtro-select{ background-color:#f0f2f5; color:#54656f; } body.tema-claro .chat-filtro-select:hover{ background-color:#e9ecef; } body.tema-claro .chat-filtro-select option{ background:#fff; color:#111b21; } body.tema-claro .chat-filtro-select:focus-visible{ outline:2px solid rgba(94,146,206,.35); } body.tema-claro .wpp-hub-sidebar .chat-filtro-select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667781' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } body.tema-claro .chat-filtro-chk{ background:#f0f2f5; color:#667781; } body.tema-claro .chat-filtro-chk:hover{ background-color:#e9edf0; color:#54656f; } body.tema-claro .chat-filtro-chk:has(input:checked){ background:#d9dee3; color:#111b21; } body.tema-claro .chat-filtro-limpar{ background:rgba(17,43,73,.06); color:#54656f; } body.tema-claro .chat-filtro-limpar:hover{ background:rgba(17,43,73,.09); color:#111b21; } .chat-lista-vazia{ color:var(--muted); padding:16px 14px; text-align:center; font-size:13px; line-height:1.45; } /* ── ÁREA PRINCIPAL DIREITA ─────────────────────────────────── */ .wpp-hub-main{ flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); position:relative; min-width:0; } /* Views */ .wpp-hub-view{ display:none; flex-direction:column; flex:1; overflow:hidden; height:100%; } .wpp-hub-view.ativo{ display:flex; } /* VIEW: Boas-vindas */ .wpp-hub-welcome{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:40px 24px; text-align:center; } .wpp-hub-welcome-icon{ width:76px; height:76px; border-radius:50%; background:rgba(30,111,217,.08); display:flex; align-items:center; justify-content:center; color:var(--accent); } .wpp-hub-welcome h3{ font-size:20px; font-weight:700; color:var(--text); } .wpp-hub-welcome p{ font-size:13px; color:var(--muted); max-width:300px; line-height:1.5; } .wpp-hub-welcome-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px; } .wpp-hub-welcome-btn{ display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-size:13px; font-weight:600; transition:.15s; font-family:'DM Sans',sans-serif; } .wpp-hub-welcome-btn:hover{ border-color:var(--accent); color:var(--accent); background:rgba(30,111,217,.05); } /* VIEW: Conversa — cabeçalho */ .wpp-hub-conv-hd{ display:flex; align-items:center; gap:12px; padding:10px 16px; background:#202c33; border-bottom:none; flex-shrink:0; } /* Back (mobile) */ .wpp-hub-conv-back{ display:none; width:34px; height:34px; border-radius:10px; border:none; background:rgba(255,255,255,.08); color:#e9edef; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; } body.tema-claro .wpp-hub-conv-back{ background:rgba(0,0,0,.05); color:var(--text); } .wpp-hub-conv-back:hover{ background:rgba(255,255,255,.12); } body.tema-claro .wpp-hub-conv-back:hover{ background:rgba(0,0,0,.08); } body.tema-claro .wpp-hub-conv-hd{ background:#f0f2f5; border-bottom:1px solid var(--border); } .wpp-hub-conv-hd-avatar{ width:40px; height:40px; border-radius:50%; background:#6b7c8a; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; overflow:hidden; } body.tema-claro .wpp-hub-conv-hd-avatar{ background:#b0bec5; } .wpp-hub-conv-hd-info{ flex:1; min-width:0; } .wpp-hub-conv-hd-info strong{ font-size:15px; font-weight:600; display:block; color:#e9edef; } .wpp-hub-conv-hd-info small{ font-size:12px; color:rgba(241,241,242,.6); display:block; margin-top:0; } body.tema-claro .wpp-hub-conv-hd-info strong{ color:var(--text); } body.tema-claro .wpp-hub-conv-hd-info small{ color:var(--muted); } /* Botões de ação na conv: ocultos (ferramentas acessíveis via sidebar) */ .wpp-hub-conv-hd-btns{ display:none; } /* Contato ativo na sidebar */ .chat-contato.ativo{ background:rgba(30,111,217,.08); border-right:3px solid var(--accent); } /* VIEW: Ferramentas — cabeçalho e corpo */ .wpp-hub-tool-hd{ display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; } .wpp-hub-tool-hd-title{ font-size:14px; font-weight:700; flex:1; color:var(--text); display:flex; align-items:center; gap:8px; } .wpp-hub-tool-hd-back{ width:34px; height:34px; border-radius:8px; border:none; background:transparent; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.12s; flex-shrink:0; } .wpp-hub-tool-hd-back:hover{ background:var(--surface2); color:var(--text); } .wpp-hub-tool-hd-back svg, .wpp-hub-tool-hd-title svg{ width:18px; height:18px; flex-shrink:0; } /* Status no cabeçalho das views de ferramenta (ex.: Conexão — bolinha + número quando conectado) */ .wpp-hub-tool-hd-status{ margin-left:auto; flex-shrink:1; min-width:0; max-width:min(240px, 42vw); display:flex; align-items:center; justify-content:flex-end; gap:8px; min-height:28px; } .wpp-hub-tool-hd-status .wpp-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; } .wpp-hub-tool-hd-numero{ font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--success); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .wpp-hub-tool-body{ flex:1; overflow-y:auto; padding:20px; padding-bottom:40px; } /* Responsivo: mobile */ @media(max-width:900px){ /* Mobile: fixa o painel no viewport para o footer do chat não “sumir” por causa do scroll da página / barras do navegador (iOS/Android). */ /* overlay já definido em #panel-whatsapp.panel.active; full-bleed no mobile */ #panel-whatsapp.panel.active{ top:calc(var(--topbar-h-base) + env(safe-area-inset-top, 0px)); left:0 !important; right:0; bottom:0; z-index:220; } #panel-whatsapp .panel-inner{ height:100%; } /* Mantém espaço de respiro para o composer quando barras variam (Safari) */ #panel-whatsapp .chat-messages{ padding-bottom:calc(24px + 84px + env(safe-area-inset-bottom)); } /* Mobile: gutter menor (ainda cabe as ações sem cortar) */ #panel-whatsapp .chat-messages{ padding-left:max(36px, env(safe-area-inset-left, 0px)); padding-right:max(36px, env(safe-area-inset-right, 0px)); } .wpp-hub-grid{ flex-direction:column; } .wpp-hub-sidebar{ width:100% !important; max-height:none; border-right:none; border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:hidden; } /* Mobile: garantir que o WhatsApp encaixe (sem corte/overflow lateral) */ #panel-whatsapp, #panel-whatsapp .panel-inner, #panel-whatsapp .wpp-hub-grid, #panel-whatsapp .wpp-hub-sidebar, #panel-whatsapp .wpp-hub-main{ max-width:100%; overflow-x:hidden; box-sizing:border-box; } /* Safe-area lateral (iPhone): evita ícones “comidos” na borda */ #panel-whatsapp .wpp-hub-sidebar-hd, #panel-whatsapp .wpp-hub-sidebar-search, #panel-whatsapp .chat-lista-filtros, #panel-whatsapp .chat-lista-wrap{ padding-left:max(10px, env(safe-area-inset-left, 0px)); padding-right:max(10px, env(safe-area-inset-right, 0px)); box-sizing:border-box; } /* Cabeçalho: permite encolher título sem cortar botões */ #panel-whatsapp .wpp-hub-sidebar-hd{ min-width:0; } #panel-whatsapp .wpp-hub-sidebar-hd-title{ min-width:0; text-overflow:ellipsis; } /* Ações da sidebar — mesmos ícones compactos (sem cortar com max-width artificial) */ #panel-whatsapp .wpp-hub-sidebar-actions{ max-width:none; flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:hidden; } #panel-whatsapp .wpp-hub-sidebar-btn, #panel-whatsapp .wpp-sidebar-toggle{ width:24px; height:24px; border-radius:5px; } #panel-whatsapp .wpp-hub-sidebar-btn svg, #panel-whatsapp .wpp-sidebar-toggle svg{ width:12px; height:12px; } /* Mobile (telas estreitas): filtros em 1 coluna pra não “comer” texto */ #panel-whatsapp .chat-filtros-grid{ grid-template-columns:1fr; } #panel-whatsapp .chat-filtro-select{ font-size:10px; padding:4px 16px 4px 8px; background-position:right 5px center; background-size:9px 9px; } #panel-whatsapp .chat-filtro-chk{ font-size:9.5px; padding:4px 8px; } /* “Limpar filtros” não deve virar um botão gigante de ponta a ponta */ #panel-whatsapp .chat-filtro-limpar{ width:auto; align-self:center; padding:5px 10px; font-size:10px; } #panel-whatsapp .wpp-hub-sidebar-hd{ padding:7px 8px 6px; } /* Mobile: modo lista (sidebar ocupa a tela) */ .wpp-hub-grid:not(.mobile-main-aberta) .wpp-hub-main{ display:none; } .wpp-hub-grid:not(.mobile-main-aberta) .wpp-hub-sidebar{ flex:1; } /* Mobile: modo conversa/ferramentas (main ocupa a tela) */ .wpp-hub-grid.mobile-main-aberta .wpp-hub-sidebar{ max-height:0; height:0; border-bottom:none; } .wpp-hub-grid.mobile-main-aberta .wpp-hub-main{ display:flex; flex:1; } .wpp-hub-conv-back{ display:flex; } /* Botão flutuante de abrir conversas (só quando main aberto) */ .wpp-sidebar-reabrir{ left:auto; right:10px; top:10px; } .wpp-hub-grid.mobile-main-aberta .wpp-sidebar-reabrir{ display:flex; } .wpp-hub-grid:not(.mobile-main-aberta) .wpp-sidebar-reabrir{ display:none; } /* Ferramentas: padding menor e botões mais fáceis no toque */ .wpp-hub-tool-body{ padding:14px; padding-bottom:28px; } .wpp-hub-tool-hd{ padding:10px 12px; } /* Conversa: compactar barras para caber mais chat no mobile */ #panel-whatsapp .wpp-hub-conv-hd{ padding:8px 12px; gap:10px; } #panel-whatsapp .wpp-hub-conv-hd-avatar{ width:34px; height:34px; font-size:13px; } #panel-whatsapp .wpp-hub-conv-hd-info strong{ font-size:14px; } #panel-whatsapp .wpp-hub-conv-hd-info small{ font-size:11px; } #panel-whatsapp .chat-context-bar{ padding:4px 10px; gap:6px; } #panel-whatsapp .chat-ctx-item{ font-size:10.5px; } /* Sugestões: mesma faixa horizontal compacta */ #panel-whatsapp .chat-sugestoes-wrap{ padding:3px 6px 4px; } #panel-whatsapp .chat-sug-btn{ flex:1 1 auto; max-width:100%; min-height:0; font-size:10px; padding:4px 7px; } #panel-whatsapp .chat-ia-tools{ padding:4px 8px 3px; flex-wrap:wrap; overflow-x:hidden; } #panel-whatsapp .chat-ia-tools > span{ display:none; } #panel-whatsapp .chat-ia-btn{ padding:3px 7px; font-size:9.5px; } /* Footer (composer): reduzir altura no mobile */ #panel-whatsapp .chat-footer{ padding:6px 10px 8px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); } #panel-whatsapp .chat-input{ padding:8px 12px; font-size:14px; } #panel-whatsapp .chat-btn-enviar{ width:40px; height:40px; } #panel-whatsapp .chat-btn-emoji, #panel-whatsapp .chat-btn-anexo{ width:32px; height:32px; margin-bottom:2px; } } /* ════════════════════════════════════════════════════════════ ── CHAT DIRETO (WhatsApp-style) ────────────────────────── ════════════════════════════════════════════════════════════ */ /* Overlay full-screen — mantido apenas para referência/mobile fallback */ .chat-overlay{ display:none; position:fixed; inset:0; z-index:900; background:var(--bg); flex-direction:column; } .chat-overlay.aberto{ display:flex; } /* Tela 1: lista de colaboradores */ .chat-tela-lista{ display:flex; flex-direction:column; height:100%; overflow:hidden; } .chat-tela-conv{ display:none; flex-direction:column; height:100%; overflow:hidden; } .chat-overlay.chat-conv-aberta .chat-tela-lista{ display:none; } .chat-overlay.chat-conv-aberta .chat-tela-conv{ display:flex; } /* ── HEADER ────────────────────────────────────────────────── */ .chat-header{ display:flex; align-items:center; gap:10px; flex-shrink:0; padding:12px 14px; background:var(--brand-mid); box-shadow:0 2px 8px rgba(0,0,0,.3); } .chat-header-back{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); border:none; color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.15s; } .chat-header-back:hover{ background:rgba(255,255,255,.2); } .chat-header-avatar{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; overflow:hidden; } .chat-header-info{ flex:1; min-width:0; } .chat-header-info strong{ font-size:15px; color:#fff; display:block; line-height:1.2; } .chat-header-info small{ font-size:11px; color:rgba(255,255,255,.7); display:block; margin-top:1px; } .chat-header-title{ font-size:16px; font-weight:700; color:#fff; flex:1; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ── BUSCA (lista) ──────────────────────────────────────────── */ .chat-busca{ padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; } .chat-busca input{ width:100%; padding:9px 14px; border-radius:22px; font-size:14px; background:var(--surface2); border:1.5px solid var(--border); color:var(--text); outline:none; } .chat-busca input:focus{ border-color:var(--accent); } /* ── LISTA CONTATOS ─────────────────────────────────────────── */ .chat-lista-wrap{ flex:1; overflow-y:auto; } .chat-contato{ display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; transition:background .1s; border-bottom:1px solid rgba(134,150,160,.15); } .chat-contato:hover{ background:rgba(255,255,255,.05); } body.tema-claro .chat-contato:hover{ background:rgba(0,0,0,.04); } .chat-contato:active{ background:rgba(255,255,255,.09); } /* Conversa selecionada — cinza suave, como WhatsApp Web */ .chat-contato.chat-contato-ativo{ background:rgba(255,255,255,.08); } body.tema-claro .chat-contato.chat-contato-ativo{ background:rgba(0,0,0,.06); } .chat-contato-avatar{ position:relative; flex-shrink:0; } .chat-avatar{ width:49px; height:49px; border-radius:50%; background:#6b7c8a; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; overflow:hidden; } .chat-avatar-ext{ background:#374045; display:flex; align-items:center; justify-content:center; } body.tema-claro .chat-avatar{ background:#b0bec5; } body.tema-claro .chat-avatar-ext{ background:#8696a0; } .chat-status-dot{ position:absolute; bottom:2px; right:0; width:11px; height:11px; border-radius:50%; border:2px solid var(--bg); } .chat-status-dot.verde { background:var(--success); } .chat-status-dot.amarelo{ background:var(--warn); } .chat-status-dot.vermelho{ background:var(--danger); } .chat-contato-info{ flex:1; min-width:0; } .chat-contato-top{ display:flex; justify-content:space-between; align-items:baseline; gap:4px; } .chat-contato-nome{ font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chat-contato-hora{ font-size:11.5px; color:var(--muted); flex-shrink:0; } .chat-contato-sub{ display:flex; align-items:center; justify-content:space-between; gap:4px; margin-top:2px; } .chat-contato-preview{ font-size:12.5px; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1; } /* ── TAGS DE CARGO / SETOR ───────────────────────────────────── */ .chat-contato-tags{ display:flex; flex-wrap:wrap; gap:3px; margin:2px 0 2px; } .chat-tag{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; line-height:1; padding:2px 7px; border-radius:20px; white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; } .chat-tag-cargo{ background:rgba(30,111,217,.18); color:var(--accent2); border:1px solid rgba(30,111,217,.25); } body.tema-claro .chat-tag-cargo{ background:rgba(30,111,217,.10); color:#1454aa; border-color:rgba(30,111,217,.3); } .chat-tag-setor{ background:rgba(34,201,122,.14); color:var(--success); border:1px solid rgba(34,201,122,.22); } body.tema-claro .chat-tag-setor{ background:rgba(34,201,122,.10); color:#14875a; border-color:rgba(34,201,122,.3); } .chat-tag-pendente{ background:rgba(255,194,51,.14); color:var(--warn); border:1px solid rgba(255,194,51,.25); } body.tema-claro .chat-tag-pendente{ background:rgba(255,194,51,.10); color:#9a6f00; border-color:rgba(255,194,51,.35); } /* Tag "Contato externo" — mesmo formato de pilula que cargo/setor, cor neutra */ .chat-tag-ext{ background:rgba(232,240,251,.07); color:var(--muted2,#6a8aab); border:1px solid rgba(232,240,251,.14); } body.tema-claro .chat-tag-ext{ background:rgba(13,43,94,.06); color:#5c7494; border-color:rgba(13,43,94,.14); } /* duplicate removed — see .chat-avatar-ext above */ .chat-badge{ min-width:20px; height:20px; padding:0 5px; border-radius:20px; background:var(--success); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* ── BARRA DE CONTEXTO ──────────────────────────────────────── */ .chat-context-bar{ display:flex; flex-wrap:wrap; gap:5px 6px; align-items:center; padding:5px 10px; background:rgba(30,111,217,.08); border-bottom:1px solid var(--border); flex-shrink:0; } .chat-ctx-item{ font-size:10px; color:var(--muted2); line-height:1.3; } /* ── ÁREA DE MENSAGENS ──────────────────────────────────────── */ .chat-messages{ flex:1; overflow-y:auto; overflow-x:hidden; /* congele lateral: sem "arrastar" horizontal */ /* Gutter lateral p/ ações (reagir/encaminhar) não serem cortadas */ padding-top:10px; padding-bottom:16px; padding-left:max(48px, env(safe-area-inset-left, 0px)); padding-right:max(48px, env(safe-area-inset-right, 0px)); display:flex; flex-direction:column; gap:1px; /* Fundo padrão WhatsApp dark */ background-color:#0b141a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='366' height='366' opacity='.04'%3E%3Cdefs%3E%3Cstyle%3E.c%7Bfill:none;stroke:%23aaa;stroke-width:1.2%7D%3C/style%3E%3C/defs%3E%3Ccircle cx='40' cy='40' r='18' class='c'/%3E%3Cpath d='M80 60 l15-20 l15 20z' class='c'/%3E%3Crect x='120' y='28' width='28' height='28' rx='4' class='c'/%3E%3Cpath d='M180 50 q10-25 20 0 q10 25 20 0' class='c'/%3E%3Ccircle cx='240' cy='40' r='12' class='c'/%3E%3Cpath d='M265 35 l20 0 m-10-10 l0 20' class='c'/%3E%3Cpath d='M300 50 l10-20 l10 10 l10-15 l10 25' class='c'/%3E%3C/svg%3E"); } body.tema-claro .chat-messages{ background-color:#efeae2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' opacity='.04'%3E%3Cpath d='M150 50 Q175 25 200 50 T250 50' stroke='%23555' fill='none'/%3E%3C/svg%3E"); } /* Override quando o ID é chat-messages (para compatibilidade) */ #chat-messages{ background-color:#0b141a; } body.tema-claro #chat-messages{ background-color:#efeae2; } .chat-loading,.chat-empty{ text-align:center; color:rgba(255,255,255,.45); font-size:13px; margin:auto; padding:32px 20px; line-height:1.6; background:rgba(0,0,0,.2); border-radius:12px; max-width:260px; align-self:center; } body.tema-claro .chat-loading, body.tema-claro .chat-empty{ color:rgba(0,0,0,.4); background:rgba(0,0,0,.06); } .chat-data-sep{ display:flex; align-items:center; justify-content:center; margin:6px 0 4px; } .chat-data-sep span{ background:rgba(11,20,26,.8); border-radius:8px; padding:3px 12px; font-size:11.5px; color:rgba(241,241,242,.9); box-shadow:0 1px 2px rgba(0,0,0,.25); } body.tema-claro .chat-data-sep span{ background:rgba(255,255,255,.9); color:rgba(0,0,0,.55); } /* ── BOLHAS — idêntico ao WhatsApp Web ───────────────────────── */ .chat-msg{ display:flex; margin-bottom:0; padding:0 6px; } .chat-msg + .chat-msg{ margin-top:1px; } .chat-msg-gestor{ justify-content:flex-end; } .chat-msg-colaborador{ justify-content:flex-start; } .chat-msg-externo{ justify-content:flex-start; } .chat-bubble{ /* WA Web: max ~65%, padding 6 7 8 9, radius 7.5px */ max-width:62%; border-radius:7.5px; /* Levemente mais compacto (menos "alto") */ padding:5px 7px 6px 8px; position:relative; word-break:break-word; box-shadow:0 1px 0.5px rgba(0,0,0,.25); } /* ── Ações da mensagem (reagir/encaminhar) — igual WA Web (ao lado) ─────── */ .chat-msg-actions{ position:absolute; top:6px; display:flex; gap:6px; opacity:0; transform:translateY(-1px); transition:opacity .12s, transform .12s; z-index:4; pointer-events:none; /* só os botões recebem clique */ } .chat-bubble:hover .chat-msg-actions{ opacity:1; transform:translateY(0); } /* gestor (mensagem à direita): ações ficam do lado esquerdo da bolha */ .chat-msg-gestor .chat-msg-actions{ right:calc(100% + 8px); } /* recebido: ações ficam do lado direito da bolha */ .chat-msg-colaborador .chat-msg-actions, .chat-msg-externo .chat-msg-actions{ left:calc(100% + 8px); } .chat-msg-actions button{ width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(11,20,26,.55); /* WA: bolinha escura translúcida */ color:#e9edef; box-shadow:0 1px 1px rgba(0,0,0,.28); pointer-events:auto; transition:background .12s, transform .12s; } .chat-msg-actions button:hover{ background:rgba(11,20,26,.68); transform:scale(1.04); } body.tema-claro .chat-msg-actions button{ background:rgba(0,0,0,.12); color:#111; } body.tema-claro .chat-msg-actions button:hover{ background:rgba(0,0,0,.18); } .chat-msg-forward svg, .chat-react-btn svg{ width:16px; height:16px; } .chat-reactions-host{ margin-top:4px; display:flex; justify-content:flex-end; } .chat-msg-colaborador .chat-reactions-host, .chat-msg-externo .chat-reactions-host{ justify-content:flex-start; } .chat-reactions{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; } .chat-reac-pill{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:12px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10); color:#e9edef; user-select:none; } .chat-reac-pill small{ font-size:11px; opacity:.85; } .chat-reac-pill.mine{ background:rgba(74,159,255,.20); border-color:rgba(74,159,255,.35); } body.tema-claro .chat-reac-pill{ background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.10); color:#111; } body.tema-claro .chat-reac-pill.mine{ background:rgba(30,111,217,.14); border-color:rgba(30,111,217,.22); } #chat-reac-picker{ position:fixed; z-index:10000; background:#111b21; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:6px; box-shadow:0 12px 40px rgba(0,0,0,.45); backdrop-filter:blur(8px); } body.tema-claro #chat-reac-picker{ background:#fff; border-color:rgba(0,0,0,.12); } .chat-reac-row{ display:flex; gap:4px; align-items:center; } .chat-reac-opt{ width:34px; height:34px; border:none; border-radius:50%; background:transparent; cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .12s, transform .12s; } .chat-reac-opt:hover{ background:rgba(255,255,255,.08); transform:scale(1.06); } .chat-reac-opt.ativo{ background:rgba(74,159,255,.22); } .chat-reac-opt.more{ font-size:16px; opacity:.9; } body.tema-claro .chat-reac-opt:hover{ background:rgba(0,0,0,.06); } /* ── Modal encaminhar ─────────────────────────────────────────── */ .chat-forward-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; } .chat-forward-modal{ width:min(520px, 96vw); max-height:min(680px, 92vh); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.45); display:flex; flex-direction:column; overflow:hidden; } .chat-forward-hd{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); } .chat-forward-title{ font-size:14px; font-weight:800; color:var(--text); } .chat-forward-close{ width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; background:var(--surface-2); color:var(--text); font-size:20px; line-height:0; } .chat-forward-close:hover{ filter:brightness(1.06); } .chat-forward-sub{ padding:10px 14px 8px; } .chat-forward-preview{ font-size:12px; color:var(--muted); padding:8px 10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chat-forward-search{ padding:0 14px 10px; } .chat-forward-search input{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:13px; } .chat-forward-list{ padding:6px 10px 10px; overflow-x:hidden; overflow-y:auto; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); } .chat-forward-item{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:12px; cursor:pointer; } .chat-forward-item:hover{ background:var(--surface-2); } .chat-forward-check{ width:16px; height:16px; } .chat-forward-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--surface-2); flex-shrink:0; } .chat-forward-avatar-fb{ display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:var(--brand-mid); } .chat-forward-item-info{ min-width:0; flex:1; } .chat-forward-item-nome{ font-size:13px; font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chat-forward-item-sub{ font-size:11px; color:var(--muted); margin-top:2px; } .chat-forward-empty{ padding:16px 10px; text-align:center; color:var(--muted); font-size:13px; } .chat-forward-actions{ display:flex; justify-content:flex-end; gap:10px; padding:12px 14px; } /* Tail enviada (direita) */ .chat-bubble-gestor{ background:#005c4b; color:#e9edef; border-top-right-radius:3px; } .chat-bubble-gestor::before{ content:''; position:absolute; top:0; right:-8px; border-width:0 0 8px 8px; border-style:solid; border-color:transparent transparent transparent #005c4b; } body.tema-claro .chat-bubble-gestor{ background:#d9fdd3; color:#111; } body.tema-claro .chat-bubble-gestor::before{ border-left-color:#d9fdd3; } /* Tail recebida (esquerda) */ .chat-bubble-colaborador, .chat-bubble-externo{ background:#202c33; color:#e9edef; border-top-left-radius:3px; } .chat-bubble-colaborador::before, .chat-bubble-externo::before{ content:''; position:absolute; top:0; left:-8px; border-width:0 8px 8px 0; border-style:solid; border-color:transparent #202c33 transparent transparent; } body.tema-claro .chat-bubble-colaborador, body.tema-claro .chat-bubble-externo{ background:#fff; color:#111; } body.tema-claro .chat-bubble-colaborador::before, body.tema-claro .chat-bubble-externo::before{ border-right-color:#fff; } /* Texto da bolha — WA Web usa 14.2px / line-height 20px */ .chat-bubble-texto{ font-size:13.2px; line-height:18.5px; white-space:normal; overflow-wrap:anywhere; } /* Meta (hora + tick) — flutua no canto inferior direito como WA Web */ .chat-bubble-meta{ display:inline-flex; align-items:center; justify-content:flex-end; gap:3px; font-size:11px; line-height:15px; color:rgba(233,237,239,.6); float:right; margin-left:6px; margin-top:0; /* empurra para baixo do texto no último bloco */ position:relative; bottom:-2px; } body.tema-claro .chat-bubble-gestor .chat-bubble-meta{ color:rgba(0,0,0,.42); } body.tema-claro .chat-bubble-colaborador .chat-bubble-meta, body.tema-claro .chat-bubble-externo .chat-bubble-meta{ color:rgba(0,0,0,.42); } .chat-bubble-colaborador .chat-bubble-meta, .chat-bubble-externo .chat-bubble-meta{ color:rgba(233,237,239,.5); } /* Ticks SVG — paths exatos do WhatsApp Web (fill, não stroke) */ .chat-check{ display:inline-flex; align-items:center; line-height:1; margin-left:2px; flex-shrink:0; transition: color .22s ease; } .chat-check svg{ height:13px; width:auto; display:block; } /* Cor via CSS color → fill="currentColor" nos SVGs */ .chat-check.pendente{ color:rgba(233,237,239,.42); } .chat-check.enviado { color:rgba(233,237,239,.72); } .chat-check.lido { color:#53bdeb; } body.tema-claro .chat-check.pendente{ color:rgba(0,0,0,.28); } body.tema-claro .chat-check.enviado { color:rgba(0,0,0,.48); } body.tema-claro .chat-check.lido { color:#009de2; } /* ── PLAYER DE ÁUDIO (estilo WhatsApp) ───────────────────────── */ .chat-audio-player{ display:flex; align-items:center; gap:8px; min-width:200px; max-width:280px; padding:2px 0; } .chat-audio-play{ width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(255,255,255,.18); transition:.15s; } .chat-audio-play:hover{ background:rgba(255,255,255,.28); } body.tema-claro .chat-bubble-gestor .chat-audio-play{ background:rgba(0,0,0,.1); } body.tema-claro .chat-bubble-colaborador .chat-audio-play{ background:rgba(0,0,0,.08); } .chat-audio-play svg{ width:16px; height:16px; fill:currentColor; } .chat-audio-waves{ flex:1; display:flex; align-items:center; gap:1.5px; height:30px; } .chat-audio-waves span{ display:inline-block; width:2.5px; border-radius:2px; background:rgba(255,255,255,.45); flex-shrink:0; } body.tema-claro .chat-bubble-gestor .chat-audio-waves span{ background:rgba(0,0,0,.25); } body.tema-claro .chat-bubble-colaborador .chat-audio-waves span{ background:rgba(0,0,0,.2); } .chat-audio-dur{ font-size:11.5px; opacity:.75; white-space:nowrap; } .chat-audio-dl{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; flex-shrink:0; opacity:.65; transition:.15s; color:inherit; text-decoration:none; } .chat-audio-dl:hover{ opacity:1; background:rgba(255,255,255,.2); } /* ── BOTÃO DE TRANSCRIÇÃO ────────────────────────────────────── */ .chat-audio-transcr{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; flex-shrink:0; border:none; cursor:pointer; background:transparent; opacity:.65; transition:.15s; color:inherit; } .chat-audio-transcr:hover{ opacity:1; background:rgba(255,255,255,.2); } .chat-audio-transcr:disabled{ opacity:.35; cursor:default; } /* Botão de IA (estrela) */ .chat-audio-ia{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; flex-shrink:0; border:none; cursor:pointer; background:transparent; opacity:.65; transition:.15s; color:inherit; } .chat-audio-ia:hover{ opacity:1; background:rgba(255,255,255,.2); color:var(--yellow); } .chat-audio-ia:disabled{ opacity:.35; cursor:default; } /* Texto transcrito abaixo do player */ .chat-audio-transcr-texto{ font-size:12.5px; line-height:1.5; margin-top:4px; padding:6px 10px; background:rgba(0,0,0,.15); border-radius:8px; color:inherit; opacity:.88; max-width:280px; word-break:break-word; } body.tema-claro .chat-audio-transcr-texto{ background:rgba(0,0,0,.06); } /* Box de insights */ .chat-audio-insights-box{ margin-top:6px; border-radius:10px; overflow:hidden; max-width:320px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.2); } body.tema-claro .chat-audio-insights-box{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); } .chat-insights-loading{ padding:10px 12px; font-size:12.5px; opacity:.7; animation:pulse-mic .9s ease-in-out infinite; } .chat-insights-erro{ padding:10px 12px; font-size:12.5px; color:var(--danger); } .chat-insights-content{ padding:10px 12px; font-size:12.5px; line-height:1.6; } .chat-insights-content p{ margin:0 0 6px; } .chat-insights-content p:last-child{ margin-bottom:0; } .chat-insights-content strong{ opacity:1; font-weight:600; } .chat-insights-content ul{ margin:2px 0 6px; padding-left:14px; } .chat-insights-content li{ margin-bottom:2px; } /* ── NOVO PLAYER DE ÁUDIO (.ca-*) ───────────────────────────── */ .ca-player{ display:flex; align-items:center; gap:8px; min-width:200px; max-width:280px; padding:2px 0; } .ca-play{ width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(255,255,255,.18); color:inherit; transition:.15s; } .ca-play:hover{ background:rgba(255,255,255,.28); } body.tema-claro .chat-bubble-gestor .ca-play{ background:rgba(0,0,0,.1); } body.tema-claro .chat-bubble-colaborador .ca-play{ background:rgba(0,0,0,.08); } .ca-play svg{ width:16px; height:16px; fill:currentColor; } .ca-waves{ flex:1; display:flex; align-items:center; gap:1.5px; height:30px; } .ca-waves span{ display:inline-block; width:2.5px; border-radius:2px; background:rgba(255,255,255,.45); flex-shrink:0; } body.tema-claro .chat-bubble-gestor .ca-waves span{ background:rgba(0,0,0,.25); } body.tema-claro .chat-bubble-colaborador .ca-waves span{ background:rgba(0,0,0,.2); } .ca-dur{ font-size:11.5px; opacity:.75; white-space:nowrap; } .ca-dl{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; flex-shrink:0; opacity:.65; transition:.15s; color:inherit; text-decoration:none; } .ca-dl:hover{ opacity:1; background:rgba(255,255,255,.2); } /* Pill buttons row */ .ca-actions{ display:flex; align-items:center; gap:6px; margin-top:7px; flex-wrap:wrap; } .ca-btn-transcr, .ca-btn-resumo, .ca-btn-insights{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid; transition:.15s; white-space:nowrap; user-select:none; } /* Transcrever — neutro */ .ca-btn-transcr{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.82); } .ca-btn-transcr:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); } .ca-btn-transcr.ativo{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); color:#fff; } body.tema-claro .ca-btn-transcr{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.18); color:rgba(0,0,0,.7); } body.tema-claro .ca-btn-transcr:hover{ background:rgba(0,0,0,.1); } body.tema-claro .ca-btn-transcr.ativo{ background:rgba(0,0,0,.14); color:#000; } /* Resumo — verde/teal */ .ca-btn-resumo{ background:rgba(0,168,132,.1); border-color:rgba(0,168,132,.35); color:rgba(0,200,160,.92); } .ca-btn-resumo:hover{ background:rgba(0,168,132,.18); border-color:rgba(0,168,132,.6); } .ca-btn-resumo.ativo{ background:rgba(0,168,132,.22); border-color:rgba(0,168,132,.8); color:#00c8a0; } body.tema-claro .ca-btn-resumo{ background:rgba(0,130,100,.07); border-color:rgba(0,130,100,.28); color:rgba(0,100,80,.9); } body.tema-claro .ca-btn-resumo:hover{ background:rgba(0,130,100,.13); } body.tema-claro .ca-btn-resumo.ativo{ color:#006450; } /* Insights IA — dourado */ .ca-btn-insights{ background:rgba(245,196,0,.1); border-color:rgba(245,196,0,.35); color:rgba(245,196,0,.92); } .ca-btn-insights:hover{ background:rgba(245,196,0,.18); border-color:rgba(245,196,0,.6); } .ca-btn-insights.ativo{ background:rgba(245,196,0,.22); border-color:rgba(245,196,0,.8); color:#F5C400; } body.tema-claro .ca-btn-insights{ background:rgba(180,140,0,.08); border-color:rgba(180,140,0,.3); color:rgba(140,100,0,.9); } body.tema-claro .ca-btn-insights:hover{ background:rgba(180,140,0,.14); } body.tema-claro .ca-btn-insights.ativo{ color:#8c6400; } .ca-btn-transcr:disabled, .ca-btn-resumo:disabled, .ca-btn-insights:disabled{ opacity:.4; cursor:default; } /* Result cards */ .ca-transcr-card, .ca-resumo-card, .ca-insights-card{ margin-top:8px; border-radius:10px; overflow:hidden; max-width:300px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.18); font-size:12.5px; } body.tema-claro .ca-transcr-card, body.tema-claro .ca-resumo-card, body.tema-claro .ca-insights-card{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); } .ca-resumo-card{ border-color:rgba(0,168,132,.2); background:rgba(0,168,132,.05); } body.tema-claro .ca-resumo-card{ border-color:rgba(0,130,100,.2); background:rgba(0,168,132,.04); } .ca-insights-card{ border-color:rgba(245,196,0,.2); background:rgba(245,196,0,.05); } body.tema-claro .ca-insights-card{ border-color:rgba(180,140,0,.2); background:rgba(245,196,0,.04); } /* Card header */ .ca-card-header{ display:flex; align-items:center; gap:6px; padding:7px 10px 6px; border-bottom:1px solid rgba(255,255,255,.08); font-size:11px; font-weight:700; letter-spacing:.03em; opacity:.7; text-transform:uppercase; } .ca-card-header-resumo{ color:rgba(0,200,160,.9); border-bottom-color:rgba(0,168,132,.2); } body.tema-claro .ca-card-header-resumo{ color:rgba(0,120,90,.9); border-bottom-color:rgba(0,130,100,.2); } .ca-card-header-ia{ color:rgba(245,196,0,.85); border-bottom-color:rgba(245,196,0,.15); } body.tema-claro .ca-card-header{ border-bottom-color:rgba(0,0,0,.08); } body.tema-claro .ca-card-header-ia{ border-bottom-color:rgba(180,140,0,.15); } /* Card body */ .ca-card-body{ padding:8px 10px 10px; line-height:1.55; } .ca-card-md p{ margin:0 0 5px; } .ca-card-md p:last-child{ margin-bottom:0; } .ca-card-md strong{ font-weight:600; } .ca-card-md ul{ margin:2px 0 5px; padding-left:14px; } .ca-card-md li{ margin-bottom:2px; } /* Loading dots */ .ca-card-loading{ padding:10px 12px; opacity:.65; animation:pulse-mic .9s ease-in-out infinite; } /* Error state */ .ca-card-erro{ padding:10px 12px; color:var(--danger); } /* ── MÍDIA NAS BOLHAS ────────────────────────────────────────── */ .chat-midia-placeholder{ display:flex; align-items:center; gap:8px; font-size:13px; padding:4px 2px; font-weight:500; } .chat-midia-imagem{ color:#4A9FFF; } .chat-midia-video { color:#A855F7; } .chat-midia-audio { color:#22C97A; } .chat-midia-doc { color:#FFC233; } /* ── CARD DE DOCUMENTO — estilo WhatsApp Web ─────────────────── */ .chat-doc-wrap{ display:flex; flex-direction:column; gap:6px; } .chat-doc-card{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; user-select:none; min-width:240px; max-width:360px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); } body.tema-claro .chat-doc-card{ background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.08); } .chat-doc-card:hover{ filter:brightness(1.03); } .chat-doc-icone{ flex-shrink:0; line-height:0; } .chat-doc-dados{ flex:1; min-width:0; } .chat-doc-nome{ font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chat-doc-desc{ font-size:11px; opacity:.75; margin-top:2px; } .chat-doc-dl{ flex-shrink:0; width:34px; height:34px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(255,255,255,.10); color:inherit; } body.tema-claro .chat-doc-dl{ background:rgba(0,0,0,.08); } .chat-doc-dl:hover{ background:rgba(255,255,255,.16); } body.tema-claro .chat-doc-dl:hover{ background:rgba(0,0,0,.12); } .chat-doc-actions{ display:flex; gap:10px; padding-left:6px; } .chat-doc-act{ border:none; background:transparent; font-size:13px; font-weight:600; color:#00a884; /* verde WA */ cursor:pointer; padding:2px 4px; } .chat-doc-act:hover{ text-decoration:underline; } body.tema-claro .chat-doc-act{ color:#007f6a; } .chat-doc-indisponivel{ cursor:default; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.18); } body.tema-claro .chat-doc-indisponivel{ background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.16); } /* ── PDF preview (1ª página) ─────────────────────────────────── */ .chat-doc-pdf-thumb{ /* Thumb menor para não dominar o chat */ width:min(260px, 46vw); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.22); position:relative; } body.tema-claro .chat-doc-pdf-thumb{ border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.04); } .chat-doc-pdf-thumb img{ display:block; width:100%; height:auto; } .chat-doc-pdf-skel{ height:120px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06)); background-size:200% 100%; animation:chatPdfSkel 1.2s ease-in-out infinite; } body.tema-claro .chat-doc-pdf-skel{ background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06)); } @keyframes chatPdfSkel { 0%{background-position:0 0} 100%{background-position:200% 0} } /* ── CARD DE LIGAÇÃO — estilo WhatsApp Web ───────────────────── */ .chat-bubble-ligacao{ padding: 10px 12px 8px 12px; min-width: 220px; } .chat-ligacao-card{ display: flex; align-items: center; gap: 14px; min-width: 200px; } .chat-ligacao-ico{ flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; } body.tema-claro .chat-ligacao-ico{ background: rgba(0,0,0,.07); } .chat-ligacao-info{ flex: 1; min-width: 0; } .chat-ligacao-titulo{ font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; } .chat-ligacao-sub{ display: flex; align-items: center; font-size: 12px; color: var(--muted2); margin-top: 2px; line-height: 1.3; } .chat-bubble-legenda{ font-size:12px; font-weight:400; margin-top:3px; opacity:.85; } /* bolha sem padding interno quando o conteúdo é imagem/vídeo */ .chat-bubble.chat-bubble-midia{ padding:3px 3px 4px 3px; } .chat-bubble.chat-bubble-midia .chat-bubble-meta{ padding:0 6px 3px; margin-top:0; bottom:0; } /* ── IMAGEM E VÍDEO NO CHAT ──────────────────────────────────── */ .chat-midia-imagem-wrap{ position:relative; max-width:330px; border-radius:8px; overflow:hidden; line-height:0; /* remove gap abaixo da img */ } .chat-midia-img{ display:block; width:100%; max-width:330px; max-height:330px; object-fit:cover; border-radius:8px; transition:filter .15s; } .chat-midia-imagem-wrap:hover .chat-midia-img{ filter:brightness(.9); } /* ícone de zoom discreto ao hover */ .chat-midia-imagem-wrap::after{ content:''; position:absolute; inset:0; border-radius:8px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center/28px no-repeat; opacity:0; transition:opacity .15s; pointer-events:none; } .chat-midia-imagem-wrap:hover::after{ opacity:.7; } .chat-midia-video-wrap{ max-width:330px; } .chat-midia-video{ display:block; width:100%; max-width:330px; max-height:260px; border-radius:8px; background:#000; } .chat-origem-tag{ font-size:10px; color:var(--muted2); margin-bottom:2px; padding-left:2px; } /* ── SUGESTÕES (quebra linha, sem scroll lateral) ───────────── */ .chat-sugestoes-wrap{ padding:3px 6px 4px; background:var(--surface); flex-shrink:0; display:flex; flex-wrap:wrap; gap:5px; align-items:center; overflow-x:hidden; max-width:100%; } .chat-sugestoes-wrap:empty{ display:none; } .chat-sug-btn{ display:inline-flex; align-items:center; gap:3px; flex:1 1 auto; padding:4px 7px; border-radius:8px; font-size:10px; line-height:1.25; cursor:pointer; background:rgba(30,111,217,.1); border:1.5px solid rgba(30,111,217,.25); color:var(--accent2); font-weight:500; transition:.12s; text-align:left; vertical-align:top; min-height:0; max-width:min(168px, 100%); min-width:0; overflow:hidden; position:relative; } .chat-sug-text{ flex:1; min-width:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; white-space:normal; word-break:break-word; } .chat-sug-btn:hover{ background:rgba(30,111,217,.2); border-color:var(--accent); } .chat-sug-icon{ flex-shrink:0; display:inline-flex; align-items:center; align-self:center; margin-top:0; } .chat-sug-icon svg{ width:11px; height:11px; } /* Preview maior no hover (para ler sem clicar) */ .chat-sug-btn:hover::after{ content: attr(data-full); position:absolute; left:0; bottom:calc(100% + 8px); width:min(420px, 78vw); background:rgba(9,20,26,.95); border:1px solid rgba(255,255,255,.14); color:#e9edef; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.35; white-space:pre-wrap; box-shadow:0 14px 40px rgba(0,0,0,.45); z-index:20; } body.tema-claro .chat-sug-btn:hover::after{ background:rgba(255,255,255,.98); border-color:rgba(0,0,0,.12); color:#111; } /* ── RESULTADO IA ───────────────────────────────────────────── */ .chat-ia-result-wrap{ margin:0 10px 6px; background:rgba(30,111,217,.07); border:1.5px solid rgba(30,111,217,.2); border-radius:10px; padding:10px 12px; display:none; } .chat-ia-result-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .chat-ia-result-header span{ font-size:11px; font-weight:700; color:var(--accent2); } .chat-ia-result-actions{ display:flex; gap:6px; } #chat-ia-texto{ font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap; } /* ── FERRAMENTAS IA ─────────────────────────────────────────── */ .chat-ia-tools{ display:flex; gap:3px 4px; padding:4px 7px 3px; background:var(--surface); border-top:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; } .chat-ia-btn{ padding:4px 8px; border-radius:16px; font-size:10px; font-weight:600; cursor:pointer; background:rgba(30,111,217,.08); border:1.5px solid rgba(30,111,217,.2); color:var(--accent2); transition:.12s; white-space:normal; text-align:center; line-height:1.25; } .chat-ia-btn:hover:not(:disabled){ background:rgba(30,111,217,.18); border-color:var(--accent); } .chat-ia-btn:disabled{ opacity:.4; cursor:default; } /* ── PAINEL DE CONFIGURAÇÃO DA IA ───────────────────────────── */ .ia-cfg-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:20px; background:var(--surface2); padding:4px; border-radius:12px; border:1px solid var(--border); overflow-x:hidden; max-width:100%; } .ia-cfg-tab{ flex:1 1 auto; padding:6px 9px; border-radius:8px; border:none; cursor:pointer; font-size:11.5px; font-weight:600; background:transparent; color:var(--muted); transition:.15s; white-space:normal; text-align:center; } .ia-cfg-tab:hover{ color:var(--text); background:rgba(255,255,255,.05); } .ia-cfg-tab.ativo{ background:var(--surface); color:var(--text); box-shadow:0 1px 4px var(--shadow); } body.tema-claro .ia-cfg-tab.ativo{ background:#fff; } .ia-cfg-pane{ display:none; flex-direction:column; gap:20px; } .ia-cfg-pane.ativo{ display:flex; } .ia-cfg-section{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; display:flex; flex-direction:column; gap:10px; } .ia-cfg-section-title{ font-size:14px; font-weight:700; color:var(--text); } .ia-cfg-section-desc{ font-size:12.5px; color:var(--muted); line-height:1.55; } .ia-cfg-section-desc code{ background:rgba(255,255,255,.08); border-radius:4px; padding:1px 5px; font-family:monospace; font-size:12px; } body.tema-claro .ia-cfg-section-desc code{ background:rgba(0,0,0,.06); } .ia-cfg-textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg); color:var(--text); font-size:13px; line-height:1.55; resize:vertical; font-family:'DM Sans',sans-serif; transition:.12s; } .ia-cfg-textarea:focus{ border-color:var(--accent); outline:none; } body.tema-claro .ia-cfg-textarea{ background:#f8faff; } .ia-cfg-select{ padding:9px 36px 9px 12px; border-radius:10px; border:1.5px solid var(--border); background-color:var(--bg); color:var(--text); font-size:13px; cursor:pointer; max-width:420px; transition:.12s; -webkit-appearance:none; appearance:none; background-image:var(--select-chevron); background-repeat:no-repeat; background-position:right 10px center; background-size:17px; } .ia-cfg-select:focus{ border-color:var(--accent); outline:none; } body.tema-claro .ia-cfg-select{ background-color:#f8faff; } /* Toggle switch */ .ia-cfg-toggle-wrap{ display:flex; align-items:center; gap:10px; cursor:pointer; } .ia-cfg-toggle-wrap input{ display:none; } .ia-cfg-toggle{ width:40px; height:22px; border-radius:11px; background:var(--border); position:relative; flex-shrink:0; transition:.2s; } .ia-cfg-toggle::after{ content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.2s; } .ia-cfg-toggle-wrap input:checked ~ .ia-cfg-toggle{ background:var(--success); } .ia-cfg-toggle-wrap input:checked ~ .ia-cfg-toggle::after{ transform:translateX(18px); } .ia-cfg-toggle-label{ font-size:13px; font-weight:500; } .ia-cfg-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:4px; } /* Formulário de treino */ .ia-treino-form{ display:flex; flex-direction:column; gap:12px; } .ia-treino-fields{ display:flex; gap:12px; flex-wrap:wrap; } .ia-treino-fields .form-field{ min-width:200px; } .ia-treino-lista{ display:flex; flex-direction:column; gap:8px; max-height:380px; overflow-y:auto; } .ia-treino-vazio{ font-size:13px; color:var(--muted); text-align:center; padding:20px; } .ia-treino-item{ display:flex; align-items:flex-start; gap:10px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; } .ia-treino-item-body{ flex:1; display:flex; flex-direction:column; gap:6px; } .ia-treino-item-row{ display:flex; gap:8px; font-size:12.5px; line-height:1.45; } .ia-treino-lbl{ flex-shrink:0; font-weight:700; color:var(--muted2); font-size:11px; text-transform:uppercase; letter-spacing:.03em; min-width:62px; padding-top:1px; } .ia-treino-txt{ color:var(--text); word-break:break-word; } .ia-treino-del{ flex-shrink:0; border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:16px; padding:2px 4px; border-radius:6px; transition:.12s; line-height:1; } .ia-treino-del:hover{ color:var(--danger); background:rgba(255,68,85,.1); } /* ── UPLOAD DE DOCUMENTOS IA ─────────────────────────────────── */ .ia-treino-upload-area{ border:2px dashed var(--border); border-radius:12px; padding:28px 20px; text-align:center; cursor:pointer; transition:border-color .18s, background .18s; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text); } .ia-treino-upload-area:hover, .ia-treino-upload-area.drag{ border-color:var(--accent); background:rgba(30,111,217,.06); } .ia-treino-upload-area .ia-treino-upload-ico{ color:var(--muted); opacity:.6; } /* Item tipo documento (diferente do Q&A) */ .ia-treino-item.ia-treino-doc{ border-left:3px solid var(--accent); background:rgba(30,111,217,.04); } body.tema-claro .ia-treino-item.ia-treino-doc{ background:rgba(30,111,217,.05); } .ia-treino-doc-nome{ font-weight:700; font-size:13px; color:var(--accent2); display:flex; align-items:center; gap:6px; } .ia-treino-doc-preview{ font-size:12px; color:var(--muted); margin-top:4px; max-height:56px; overflow:hidden; line-height:1.5; position:relative; } .ia-treino-doc-chars{ font-size:11px; color:var(--muted2); margin-top:4px; } /* ── IA GUIA BANNERS ─────────────────────────────────────────── */ .ia-guia-banner{ display:flex; gap:14px; align-items:flex-start; background:linear-gradient(135deg,rgba(30,111,217,.10) 0%,rgba(30,111,217,.04) 100%); border:1px solid rgba(30,111,217,.22); border-radius:12px; padding:14px 16px; } body.tema-claro .ia-guia-banner{ background:linear-gradient(135deg,rgba(30,111,217,.07) 0%,rgba(30,111,217,.02) 100%); } .ia-guia-banner-ico{ font-size:22px; flex-shrink:0; line-height:1; margin-top:2px; } .ia-guia-banner-titulo{ font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; } .ia-guia-banner-desc{ font-size:12px; color:var(--muted); line-height:1.6; } .ia-guia-banner-desc strong{ color:var(--text); } /* Passos numerados inline */ .ia-guia-steps{ display:flex; flex-direction:column; gap:7px; margin-top:10px; } .ia-guia-step{ display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--muted); line-height:1.5; } .ia-guia-step-num{ min-width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; } .ia-guia-step strong{ color:var(--text); } /* Caixa de variáveis disponíveis */ .ia-variaveis-box{ background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:11px 14px; display:flex; flex-direction:column; gap:7px; } .ia-variaveis-titulo{ font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; } .ia-variavel-row{ display:flex; align-items:center; gap:10px; font-size:12px; } .ia-variavel-code{ background:rgba(30,111,217,.15); color:var(--accent2); border-radius:5px; padding:2px 8px; font-family:monospace; font-size:11.5px; white-space:nowrap; flex-shrink:0; } body.tema-claro .ia-variavel-code{ background:rgba(30,111,217,.1); } .ia-variavel-desc{ color:var(--muted); line-height:1.4; } /* Dica / exemplo inline */ .ia-dica-exemplo{ background:var(--surface2); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:10px 14px; font-size:12px; color:var(--muted); line-height:1.6; } .ia-dica-exemplo strong{ color:var(--muted2); display:block; margin-bottom:3px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; } .ia-dica-exemplo em{ color:var(--text); font-style:normal; } /* ── PAINEL DE ESTILO DE ESCRITA ────────────────────────────── */ /* Alerta de drift */ .estilo-drift-alerta{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:12px; margin-bottom:16px; background:rgba(255,196,0,.1); border:1.5px solid rgba(255,196,0,.4); } .estilo-drift-icon{ font-size:20px; flex-shrink:0; margin-top:1px; } .estilo-drift-texto{ flex:1; font-size:13px; line-height:1.5; } .estilo-drift-texto strong{ color:var(--warn); display:block; margin-bottom:2px; } /* Score de similaridade */ .estilo-score-bar{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:16px; } .estilo-score-label{ display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:8px; } .estilo-score-label strong{ font-size:16px; font-weight:700; } .estilo-score-track{ height:8px; border-radius:4px; background:var(--border); overflow:hidden; } .estilo-score-fill{ height:100%; border-radius:4px; transition:width .4s, background .3s; background:var(--success); } /* Grade de perfis lado a lado */ .estilo-perfis-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media(max-width:600px){ .estilo-perfis-grid{ grid-template-columns:1fr; } } .estilo-perfil-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; } .estilo-perfil-card-atual{ border-color:rgba(0,168,132,.3); } .estilo-perfil-hd{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--surface2); border-bottom:1px solid var(--border); font-size:13px; font-weight:600; } .estilo-perfil-hd small{ font-size:10.5px; color:var(--muted); font-weight:400; } .estilo-perfil-body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; } .estilo-vazio{ color:var(--muted); font-size:13px; text-align:center; padding:16px; } .estilo-data{ font-size:10.5px; color:var(--muted); margin-top:4px; } .estilo-campo{ display:flex; flex-direction:column; gap:3px; font-size:12.5px; } .estilo-lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted2); } .estilo-val{ color:var(--text); font-weight:500; } .estilo-tags{ display:flex; flex-wrap:wrap; gap:4px; } .estilo-tag{ padding:2px 7px; border-radius:10px; font-size:11px; background:rgba(30,111,217,.1); color:var(--accent2); border:1px solid rgba(30,111,217,.2); } /* Versões */ .estilo-versoes-lista{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; } /* Formulário de importação */ .estilo-import-form{ display:flex; flex-direction:column; gap:12px; } .estilo-file-label{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; cursor:pointer; border:1.5px dashed var(--border); font-size:13px; color:var(--muted); transition:.15s; } .estilo-file-label:hover{ border-color:var(--accent); color:var(--accent2); } /* Provedor de IA */ .estilo-provedor-atual{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .estilo-provedor-badge{ padding:4px 12px; border-radius:20px; background:rgba(0,168,132,.15); border:1px solid rgba(0,168,132,.3); color:#00c8a0; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .estilo-provedor-status-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; } .estilo-provedor-item{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:var(--bg); border:1px solid var(--border); font-size:13px; font-weight:500; } .estilo-provedor-item.falta{ opacity:.55; } .estilo-provedor-item-chave{ font-size:11px; color:var(--muted); margin-left:auto; } /* ── RODAPÉ INPUT ───────────────────────────────────────────── */ .chat-footer{ display:flex; align-items:flex-end; gap:8px; padding:8px 12px 10px; background:#202c33; border-top:none; flex-shrink:0; /* Evita ficar escondido atrás da barra inferior (iOS notch/home indicator) */ padding-bottom:calc(14px + env(safe-area-inset-bottom)); /* Mantém o composer visível quando a lista rola/teclado abre */ position:sticky; bottom:0; z-index:5; } body.tema-claro .chat-footer{ background:#f0f2f5; border-top:1px solid var(--border); } .chat-input{ flex:1; padding:10px 14px; border-radius:10px; font-size:14.5px; background:#2a3942; border:none; color:#e9edef; outline:none; resize:none; max-height:120px; overflow-y:auto; font-family:'DM Sans',sans-serif; line-height:1.4; } body.tema-claro .chat-input{ background:#fff; border:1px solid var(--border); color:var(--text); } .chat-input:focus{ outline:none; } .chat-input::placeholder{ color:rgba(241,241,242,.4); } body.tema-claro .chat-input::placeholder{ color:var(--muted); } .chat-btn-enviar{ width:44px; height:44px; border-radius:50%; background:#00a884; border:none; color:#fff; font-size:18px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:.15s; } .chat-btn-enviar:hover:not(:disabled){ background:#017a62; transform:scale(1.05); } .chat-btn-enviar:disabled{ opacity:.5; transform:none; } /* ── BOTÃO EMOJI DO CHAT ─────────────────────────────────────── */ .chat-emoji-wrap{ position:relative; flex-shrink:0; margin-bottom:4px; } .chat-btn-emoji{ width:36px; height:36px; border-radius:50%; background:transparent; border:none; cursor:pointer; color:rgba(241,241,242,.55); display:flex; align-items:center; justify-content:center; transition:color .15s, opacity .15s; padding:0; } .chat-btn-emoji:hover{ color:#e9edef; } .chat-btn-emoji.ativo{ color:#00a884; } body.tema-claro .chat-btn-emoji{ color:var(--muted2); } body.tema-claro .chat-btn-emoji:hover{ color:var(--accent); } body.tema-claro .chat-btn-emoji.ativo{ color:#00a884; } /* Posição do painel no chat */ .chat-emoji-wrap .wpp-emoji-panel{ bottom:calc(100% + 10px); left:0; } /* ── BOTÃO ANEXO ─────────────────────────────────────────────── */ .chat-btn-anexo{ width:36px; height:36px; border-radius:50%; background:transparent; border:none; color:rgba(241,241,242,.55); font-size:17px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:.15s; margin-bottom:4px; } .chat-btn-anexo:hover{ color:#fff; } .chat-btn-anexo.ativo{ color:#00a884; } body.tema-claro .chat-btn-anexo{ color:var(--muted2); } body.tema-claro .chat-btn-anexo:hover{ color:var(--accent); } /* ── BOTÃO MIC ───────────────────────────────────────────────── */ .chat-btn-mic{ width:44px; height:44px; border-radius:50%; background:#00a884; border:none; color:#fff; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:.15s; } .chat-btn-mic:hover{ background:#017a62; transform:scale(1.05); } .chat-btn-mic.gravando{ background:#e53935; animation:pulse-mic .8s ease-in-out infinite; } @keyframes pulse-mic{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } @keyframes spin{ from{ transform:rotate(0deg); } to { transform:rotate(360deg); } } /* ── BARRA DE GRAVAÇÃO ───────────────────────────────────────── */ .chat-rec-bar{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:#202c33; flex-shrink:0; } body.tema-claro .chat-rec-bar{ background:#f0f2f5; border-top:1px solid var(--border); } .chat-rec-dot{ width:10px; height:10px; border-radius:50%; background:#e53935; flex-shrink:0; animation:pulse-mic .8s ease-in-out infinite; } .chat-rec-timer{ font-size:14px; font-weight:600; color:#e9edef; flex-shrink:0; min-width:36px; } body.tema-claro .chat-rec-timer{ color:var(--text); } .chat-rec-waves{ flex:1; display:flex; align-items:center; gap:2px; height:32px; } .chat-rec-waves span{ display:inline-block; width:3px; border-radius:3px; background:#00a884; height:4px; transition:height .08s; } .chat-rec-cancel{ width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#e9edef; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:.15s; flex-shrink:0; } .chat-rec-cancel:hover{ background:rgba(229,57,53,.2); color:#e53935; } body.tema-claro .chat-rec-cancel{ background:rgba(0,0,0,.08); color:var(--text); } .chat-rec-send{ width:42px; height:42px; border-radius:50%; border:none; background:#00a884; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; flex-shrink:0; } .chat-rec-send:hover{ background:#017a62; } .chat-rec-send:disabled{ opacity:.5; } /* ── BOTÃO CARREGAR HISTÓRICO WHATSAPP ──────────────────────── */ .chat-btn-historico-wpp{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; border:1px solid var(--border); background:var(--surface2); color:var(--muted); font-size:12px; cursor:pointer; transition:all .18s; } .chat-btn-historico-wpp:hover:not(:disabled){ background:var(--accent); color:#fff; border-color:var(--accent); } .chat-btn-historico-wpp:disabled{ opacity:.6; cursor:wait; } /* ── PREVIEW ANEXO ───────────────────────────────────────────── */ .chat-anexo-preview{ display:flex; align-items:center; gap:8px; padding:6px 12px; background:var(--surface2); border-top:1px solid var(--border); font-size:12px; color:var(--text); } .chat-anexo-preview-icone{ font-size:18px; flex-shrink:0; } .chat-anexo-preview-info{ flex:1; min-width:0; } .chat-anexo-preview-nome{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chat-anexo-preview-size{ color:var(--muted); font-size:11px; } .chat-anexo-preview-cancelar{ background:none; border:none; color:var(--danger); font-size:18px; cursor:pointer; padding:2px 6px; border-radius:50%; line-height:1; } .chat-anexo-preview-cancelar:hover{ background:rgba(255,68,85,.12); } /* ── BOTÃO CHAT NO NAV ──────────────────────────────────────── */ .chat-fab{ position:fixed; bottom:20px; right:20px; z-index:500; width:54px; height:54px; border-radius:50%; background:var(--success); color:#fff; font-size:22px; border:none; cursor:pointer; box-shadow:0 4px 16px rgba(34,201,122,.4); display:flex; align-items:center; justify-content:center; transition:.2s; } .chat-fab:hover{ transform:scale(1.08); } /* Em desktop o menu lateral já tem o item Mensagens — oculta o FAB */ @media(min-width:768px){ .chat-fab{ display:none !important; } } .chat-fab-badge{ position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 4px; border-radius:20px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); } /* Responsivo desktop — chat em painel lateral */ @media(min-width:768px){ .chat-overlay{ position:fixed; inset:auto; right:0; top:0; bottom:0; width:min(420px, 100vw); border-left:1px solid var(--border); box-shadow:-4px 0 32px rgba(0,0,0,.35); } } /* ── DESCRIÇÃO DE PÁGINA ── */ .page-desc{ background:rgba(30,111,217,.07); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:11px 16px; font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:20px; min-width:0; word-break:break-word; overflow-wrap:anywhere; } .page-desc-icon{ font-size:14px; margin-right:7px; vertical-align:text-top; } body.tema-claro .page-desc{ background:rgba(26,111,212,.07); border-left-color:#1A6FD4; } /* ── INFO TOOLTIP ── */ .info-tip{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:var(--muted); color:var(--bg); font-size:9px; font-weight:800; font-style:normal; cursor:help; position:relative; vertical-align:middle; margin-left:5px; flex-shrink:0; } .info-tip::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:0; transform:none; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:9px 13px; font-size:11px; font-weight:400; color:var(--text); white-space:normal; width:240px; z-index:9999; display:none; line-height:1.5; box-shadow:0 6px 24px rgba(0,0,0,.35); pointer-events:none; } .info-tip:hover::after{ display:block; } /* ── SPINNER ── */ .spinner{ display:inline-block; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ── RESPONSIVO ── */ @media(max-width:600px){ .banner-title{ display:none; } .banner-nome{ display:none; } .login-form-side{ padding:28px 20px; } .stats-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(7px, 2.5vw, 12px); } .form-grid{ grid-template-columns:1fr; } } /* ── GRAPESJS DARK THEME ── */ .gjs-one-bg{ background:var(--surface)!important; } .gjs-two-bg{ background:var(--card)!important; } .gjs-three-bg{ background:var(--bg)!important; } .gjs-four-color{ color:var(--text)!important; } .gjs-four-color-h:hover{ color:var(--accent2)!important; } .gjs-pn-btn.gjs-pn-active,.gjs-pn-btn:hover{ background:rgba(74,159,255,.15)!important; color:var(--accent2)!important; } .gjs-block{ border-color:var(--border)!important; background:var(--card)!important; color:var(--text)!important; border-radius:8px!important; } .gjs-block:hover{ border-color:var(--accent)!important; } .gjs-block-label{ color:var(--muted)!important; font-size:10px!important; } .gjs-field,.gjs-input,.gjs-select{ background:var(--bg)!important; border-color:var(--border)!important; color:var(--text)!important; border-radius:6px!important; } .gjs-trt-trait{ border-bottom:1px solid var(--border)!important; } .gjs-trt-trait__label{ color:var(--muted)!important; font-size:11px!important; text-transform:uppercase!important; letter-spacing:.6px!important; } .gjs-cv-canvas{ background:var(--bg)!important; } .gjs-toolbar{ background:var(--brand-lit)!important; } .gjs-resizer-h{ border-color:var(--accent2)!important; } .gjs-selected{ outline:2px solid var(--accent2)!important; } .gjs-sm-sector-title{ background:var(--surface)!important; color:var(--text)!important; border-color:var(--border)!important; } .gjs-sm-property{ border-color:var(--border)!important; } .gjs-layer-title{ background:var(--surface)!important; color:var(--text)!important; } .gjs-layer:hover .gjs-layer-title{ background:rgba(74,159,255,.08)!important; } /* Hide GrapesJS default panel wrappers (we use our own sidebar) */ .gjs-pn-panels{ display:none!important; } .gjs-blocks-c{ padding:6px!important; } .gjs-block-categories{ padding:0!important; } .gjs-block-category .gjs-title{ padding:8px 10px!important; font-size:10px!important; font-weight:700!important; } /* Page builder overlay */ #editor-overlay{ position:fixed; inset:0; z-index:1500; background:var(--bg); display:flex; flex-direction:column; } #editor-topbar{ min-height:48px; height:auto; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:4px 5px; padding:6px 8px; flex-shrink:0; flex-wrap:wrap; overflow-x:hidden; max-width:100%; } #editor-topbar .btn-sm{ padding:5px 7px !important; font-size:10px !important; line-height:1.2; } #editor-topbar .ed-title{ font-size:12px; font-weight:700; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #editor-topbar .ed-sep{ width:1px; height:18px; background:var(--border); flex-shrink:0; margin:0 1px; } /* Editor body = sidebar + canvas */ #editor-body{ flex:1; display:flex; min-height:0; overflow:hidden; } /* Sidebar */ #editor-sidebar{ width:260px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; } #editor-sidebar-tabs{ display:flex; padding:8px; gap:4px; flex-shrink:0; border-bottom:1px solid var(--border); background:var(--surface); } .ed-tab-btn{ flex:1; padding:4px 1px; font-size:9px; font-weight:700; border:1.5px solid var(--border); background:transparent; color:var(--muted); border-radius:6px; cursor:pointer; transition:all .14s; white-space:nowrap; line-height:1.3; } .ed-tab-btn.ativo{ background:rgba(30,111,217,.1); border-color:var(--accent); color:var(--accent2); } .ed-tab-btn:hover:not(.ativo){ border-color:var(--muted2); color:var(--text); } .ed-panel-pane{ flex:1; overflow-y:auto; min-height:0; } /* Canvas */ #gjs-container{ flex:1; min-height:0; } /* Blocos sistema (placeholders no editor) */ .sys-block-wrap{ background:linear-gradient(135deg,rgba(30,111,217,.12) 0%,rgba(30,111,217,.06) 100%); border:2px dashed var(--accent); border-radius:10px; padding:16px 14px; font-family:'DM Sans',sans-serif; user-select:none; pointer-events:none; } .sys-block-wrap .sb-icon{ font-size:28px; margin-bottom:6px; } .sys-block-wrap .sb-titulo{ font-size:13px; font-weight:700; color:var(--accent2); margin-bottom:4px; } .sys-block-wrap .sb-desc{ font-size:11px; color:var(--muted2); } /* Page manager cards */ .page-card{ background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:18px 16px; display:flex; flex-direction:column; gap:8px; transition:.2s; cursor:default; } .page-card:hover{ border-color:var(--accent); } .page-card-nome{ font-size:14px; font-weight:700; color:var(--text); } .page-card-desc{ font-size:12px; color:var(--muted); min-height:16px; } .page-card-meta{ font-size:11px; color:var(--muted2); } .page-card-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; } /* ── META DETAIL DRAWER ── */ .meta-drawer-overlay{ position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.45); opacity:0;pointer-events:none;transition:opacity .25s; } .meta-drawer-overlay.aberto{ opacity:1;pointer-events:all; } .meta-drawer{ position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw); background:var(--surface);border-left:1px solid var(--border); z-index:901;display:flex;flex-direction:column; transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1); overflow:hidden; } .meta-drawer.aberto{ transform:translateX(0); } .meta-drawer-head{ padding:20px 22px 16px;border-bottom:1px solid var(--border); display:flex;align-items:flex-start;gap:10px;flex-shrink:0; } .meta-drawer-head-info{ flex:1;min-width:0; } .meta-drawer-titulo{ font-size:17px;font-weight:700;line-height:1.3;margin-bottom:6px; } .meta-drawer-close{ width:32px;height:32px;border:none;background:none;cursor:pointer; display:flex;align-items:center;justify-content:center; color:var(--muted2);font-size:20px;border-radius:6px;flex-shrink:0; transition:.15s; } .meta-drawer-close:hover{ color:var(--text);background:rgba(255,255,255,.08); } body.tema-claro .meta-drawer-close:hover{ background:rgba(0,0,0,.07); } .meta-drawer-body{ flex:1;overflow-y:auto;padding:20px 22px; } .meta-drawer-section{ margin-bottom:22px; } .meta-drawer-section-title{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px; } .meta-drawer-section-title::after{ content:'';flex:1;height:1px;background:var(--border); } .meta-drawer-info-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px; } .meta-drawer-info-item{ background:var(--bg);border-radius:8px;padding:10px 12px; } .meta-drawer-info-label{ font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em; } .meta-drawer-info-val{ font-size:13px;font-weight:700;margin-top:3px; } .meta-drawer-progress-wrap{ margin-bottom:16px; } .meta-drawer-progress-header{ display:flex;justify-content:space-between;align-items:center; font-size:12px;margin-bottom:6px; } .meta-drawer-progress-bg{ height:10px;background:var(--bg);border-radius:6px;overflow:hidden; } .meta-drawer-progress-fill{ height:100%;border-radius:6px;transition:width .6s ease; } .meta-drawer-chart-wrap{ position:relative;height:160px; } .meta-lan-form{ background:var(--bg);border-radius:10px;padding:14px 16px; display:grid;grid-template-columns:1fr 1fr;gap:10px; } .meta-lan-form .form-field{ margin:0; } .meta-lan-form .form-field label{ font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em; } .meta-lan-form input, .meta-lan-form textarea{ width:100%;padding:8px 10px;border-radius:7px; background:var(--surface);border:1.5px solid var(--border); color:var(--text);font-size:13px; } .meta-lan-form select{ width:100%; padding:8px 32px 8px 10px; border-radius:7px; background-color:var(--surface); border:1.5px solid var(--border); color:var(--text); font-size:13px; -webkit-appearance:none; appearance:none; cursor:pointer; background-image:var(--select-chevron); background-repeat:no-repeat; background-position:right 8px center; background-size:16px; } body.tema-claro .meta-lan-form select{ background-color:#fff; border-color:#C0D4EC; color:#0D2B5E; } .meta-lan-form textarea{ resize:none; } .meta-lan-rec-list{ display:flex;flex-direction:column;gap:6px; } .meta-lan-rec-item{ display:flex;justify-content:space-between;align-items:center; padding:8px 12px;background:var(--bg);border-radius:8px;font-size:12px; } .meta-lan-rec-val{ font-weight:700;color:var(--accent); } .meta-lan-rec-meta{ color:var(--muted);font-size:11px; } /* ── Meta drawer — Detalhes strip redesign ─────────────── */ .mdr-info-strip{ background:var(--bg);border-radius:10px;overflow:hidden; border:1px solid var(--border); } .mdr-info-row{ display:flex;align-items:center;gap:10px; padding:9px 14px;border-bottom:1px solid var(--border); } .mdr-info-row:last-child{ border-bottom:none; } .mdr-info-icon{ font-size:14px;flex-shrink:0;width:20px;text-align:center; } .mdr-info-lbl{ color:var(--muted);font-size:12px;flex:1; } .mdr-info-val{ font-weight:600;font-size:13px;text-align:right; } /* ── Coleta lock notice ─────────────────────────────────── */ .mdr-lan-lock{ grid-column:1/-1;display:flex;align-items:flex-start;gap:10px; padding:11px 14px;border-radius:8px;font-size:12px;line-height:1.5; background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3); color:#b45309; } body.tema-claro .mdr-lan-lock{ color:#92400e; } .mdr-lan-lock-icon{ font-size:16px;flex-shrink:0;margin-top:1px; } /* ── Single-user chip (colaborador implícito) ───────────── */ .mdr-user-chip{ display:flex;align-items:center;gap:8px; padding:8px 12px;border-radius:7px; background:rgba(30,111,217,.08);border:1.5px solid rgba(30,111,217,.2); font-size:13px;font-weight:600;color:var(--accent2); }/* ── Pausas por colaborador ─────────────────────────────── */ .pausa-row{ display:flex;align-items:center;gap:10px; padding:8px 12px;border-radius:8px; background:var(--surface);border:1px solid var(--border); transition:.15s; } .pausa-row:hover{ border-color:var(--accent); } .pausa-row[data-pausado="1"]{ background:rgba(255,68,85,.05);border-color:rgba(255,68,85,.25); opacity:.85; } .pausa-nome{ flex:1;font-size:13px;font-weight:500; } .pausa-badge-ativo{ font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px; background:rgba(34,197,94,.12);color:var(--success);border:1px solid rgba(34,197,94,.25); white-space:nowrap; } .pausa-badge-pausado{ font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px; background:rgba(255,68,85,.12);color:var(--danger);border:1px solid rgba(255,68,85,.25); white-space:nowrap; } .pausa-toggle-btn{ padding:4px 12px;border-radius:7px;font-size:11px;font-weight:700; cursor:pointer;border:1.5px solid var(--border);background:var(--surface); color:var(--muted);transition:.15s;white-space:nowrap; } .pausa-toggle-btn:hover{ border-color:var(--accent);color:var(--accent2); } .pausa-toggle-btn.pausar:hover{ border-color:var(--danger);color:var(--danger); } /* ══════════════════════════════════════════════════════════════ RESPONSIVIDADE MOBILE EXTRA — breakpoints finos ══════════════════════════════════════════════════════════════ */ /* ── WhatsApp: linhas de lista/botão de resposta interativa ── */ .wpp-lista-item-row{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px; } .wpp-lista-item-row .wli-id { width:90px; flex-shrink:0; } .wpp-lista-item-row .wli-title{ flex:2; min-width:100px; } .wpp-lista-item-row .wli-desc { flex:2; min-width:100px; } .wpp-lista-item-row .wli-del { width:28px; flex-shrink:0; } .wpp-botao-item-row{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px; } .wpp-botao-item-row .wbi-id { width:90px; flex-shrink:0; } .wpp-botao-item-row .wbi-title{ flex:1; min-width:100px; } .wpp-botao-item-row .wbi-del { width:28px; flex-shrink:0; } /* ── Ultra-mobile < 400px (iPhone SE 1ª gen, Galaxy S5) ───── */ @media(max-width:400px){ /* Cards 1 coluna forçado */ .cards-grid{ grid-template-columns:1fr !important; } .stats-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:8px !important; } .stat{ padding:10px 10px; } .stat-val{ font-size:clamp(20px, 6.5vw, 30px); } /* Tabela fontes menores */ .admin-table th, .admin-table td{ padding:5px 6px; font-size:10px; } .table-wrap thead th, .table-wrap td, .table-wrap tbody th{ padding:5px 6px; font-size:10px; } .rank-table th, .rank-table td{ padding:4px 5px; font-size:9.5px; } /* Calendário células bem pequenas */ .cal-cell{ min-height:30px; } .cal-event{ display:none; } /* Esconde eventos em telas muito pequenas */ .cal-cell-num{ font-size:9px; margin-bottom:0; } /* Topbar */ .topbar-title{ font-size:13px; } .hero-title{ font-size:16px; } /* WPP lista/botão rows: ID ocupa linha inteira */ .wpp-lista-item-row .wli-id, .wpp-botao-item-row .wbi-id { width:100%; flex-basis:100%; } .wpp-lista-item-row .wli-desc{ flex-basis:100%; min-width:0; } /* Botões de ação */ .card-actions{ flex-direction:column; } .card-actions .btn{ width:100%; max-width:420px; margin-inline:auto; justify-content:center; } /* Permissões 1 coluna */ .perm-grid{ grid-template-columns:1fr; } /* Modal menor padding */ .modal{ margin:8px; width:calc(100% - 16px) !important; padding:14px; } /* Filtro bar */ .filtro-bar{ padding:8px; } } /* ── Início: grid de atividade recente ───────────────────── */ @media(max-width:600px){ /* Atividade recente no início: 2 colunas → 1 coluna */ #painel-atividade-grid{ grid-template-columns:minmax(0, 1fr) !important; } /* Adesão: destaques */ #ades-destaques{ grid-template-columns:1fr !important; } /* Histórico: destaques */ #hist-destaques{ grid-template-columns:1fr !important; } /* Calendário cells */ .cal-cell{ min-height:50px; } /* Modal footer */ .modal-footer{ flex-direction:column-reverse; gap:8px; } .modal-footer .btn{ width:100%; max-width:420px; margin-inline:auto; justify-content:center; } /* Meta drawer lançamento: 1 col */ .meta-lan-form{ grid-template-columns:1fr; } /* Envio feed */ .envio-item{ grid-template-columns:auto 1fr; } /* Filtros: coluna única */ .filtro-bar{ flex-direction:column; align-items:stretch; } .filtro-field{ min-width:0; width:100%; } .filtro-actions{ margin-left:0; width:100%; } }