/* HAON_LEADS_WAPOOL_V1 — modal Add-ao-Pool + catálogo Ver-WhatsApp. Palantir-light, tema-aware. */ .wap-backdrop { position: fixed; inset: 0; z-index: 9450; display: grid; place-items: center; padding: 22px; background: rgba(8,14,30,.55); backdrop-filter: blur(6px); animation: wapFade .14s ease; } .wap-modal { position: relative; width: min(480px, 100%); background: #fff; color: #1b2330; border-radius: 22px; padding: 24px; border: 1px solid rgba(15,40,80,.1); box-shadow: 0 30px 80px rgba(16,38,76,.3); } .wap-x { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 24px; color: #98a2b3; cursor: pointer; } .wap-x:hover { color: #1b2330; } .wap-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .wap-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#0b9d57,#10b981); box-shadow: 0 6px 16px rgba(11,157,87,.32); } .wap-head b { display: block; font-size: 16px; letter-spacing: -.02em; } .wap-head span { font-size: 12px; color: #667085; } .wap-field { display: grid; gap: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #667085; margin-bottom: 14px; } .wap-field select { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(15,40,80,.16); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #1b2330; background: #f4f6f8; } .wap-field-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #667085; margin-bottom: 7px; } .wap-personas { display: grid; gap: 8px; margin-bottom: 14px; } .wap-persona { text-align: left; cursor: pointer; padding: 11px 13px; border-radius: 13px; border: 1.5px solid rgba(15,40,80,.12); background: #f8fafd; transition: border-color .14s, box-shadow .2s, background .14s; } .wap-persona b { display: block; font-size: 13px; } .wap-persona span { font-size: 11.5px; color: #667085; line-height: 1.35; } .wap-persona:hover { border-color: #0b9d57; } .wap-persona.on { border-color: #0b9d57; background: rgba(11,157,87,.06); box-shadow: 0 4px 14px rgba(11,157,87,.16); } .wap-note { font-size: 11.5px; color: #475467; background: rgba(11,157,87,.07); border: 1px solid rgba(11,157,87,.18); border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; line-height: 1.4; } .wap-cta { width: 100%; border: 0; border-radius: 12px; padding: 12px; font-weight: 800; font-size: 14px; cursor: pointer; color: #fff; background: linear-gradient(135deg,#0b9d57,#10b981); box-shadow: 0 8px 20px rgba(11,157,87,.3); } .wap-cta:hover { filter: brightness(1.05); } .wap-cta:disabled { opacity: .6; cursor: default; } /* toast no CENTRO da tela, premium, velocidade da luz */ .wap-toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.9); z-index: 9999; display: flex; align-items: center; gap: 11px; background: rgba(15,23,41,.97); color: #fff; padding: 15px 22px; border-radius: 16px; font-size: 14px; font-weight: 700; box-shadow: 0 24px 70px rgba(45,59,255,.4), inset 0 0 0 1px rgba(45,59,255,.45); opacity: 0; transition: opacity .12s ease, transform .14s cubic-bezier(.2,.9,.3,1.4); max-width: 90vw; pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .wap-toast.show { opacity: 1; transform: translate(-50%,-50%) scale(1); } .wap-toast.err { box-shadow: 0 24px 70px rgba(217,69,69,.4), inset 0 0 0 1px rgba(217,69,69,.5); } .wap-toast-i { display: inline-flex; flex: none; color: #2bd576; } .wap-toast.err .wap-toast-i { color: #ff6b6b; } /* lead novo entrando na lista — rápido (slide + glow) */ .wap-li-new { animation: wapLiIn .42s cubic-bezier(.2,.9,.3,1.2); } @keyframes wapLiIn { 0% { transform: translateX(16px); opacity: 0; } 60% { background: rgba(45,59,255,.14); } 100% { transform: none; opacity: 1; background: transparent; } } @media (prefers-reduced-motion: reduce) { .wap-li-new { animation: none; } } .wap-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .wap-chip { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--c); color: var(--c); } .wap-chip b { font-weight: 900; } .wap-rows { display: grid; gap: 5px; max-height: 40vh; overflow-y: auto; } .wap-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(15,40,80,.03); } .wap-row-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .wap-row-main { min-width: 0; flex: 1 1 auto; } .wap-row-main b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wap-row-main span { font-size: 10.5px; color: #667085; } .wap-row-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .wap-loading, .wap-empty { font-size: 12px; color: #667085; padding: 14px; text-align: center; } [data-theme="dark"] .wap-modal, [data-theme="stone-dark"] .wap-modal { background: #181c24; color: #e8ecf4; border-color: rgba(140,160,200,.18); } [data-theme="dark"] .wap-persona, [data-theme="stone-dark"] .wap-persona { background: rgba(255,255,255,.04); border-color: rgba(150,170,210,.16); } [data-theme="dark"] .wap-persona span, [data-theme="stone-dark"] .wap-persona span, [data-theme="dark"] .wap-head span, [data-theme="stone-dark"] .wap-head span { color: #9fb0cc; } [data-theme="dark"] .wap-field select, [data-theme="stone-dark"] .wap-field select { background: rgba(255,255,255,.05); color: #e8ecf4; border-color: rgba(150,170,210,.2); } [data-theme="dark"] .wap-row, [data-theme="stone-dark"] .wap-row { background: rgba(255,255,255,.04); } @keyframes wapFade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .wap-backdrop { animation: none; } .wap-toast { transition: none; } } /* HAON_LEADS_WAPOOL_V3 — cockpit minimalista (Tesla x Palantir): lista reta, sem emoji, ícones de linha, glow/pulse sutil no "próximo". Animações em GPU (rápido). */ .wap-i { width:16px; height:16px; flex:none; } .wap-cock-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; } .wap-cock-title { font-size:16px; font-weight:800; letter-spacing:-.01em; color:#0f1729; display:flex; align-items:center; gap:8px; } .wap-motor { font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:999px; } .wap-motor.on { color:#0b9d57; background:rgba(11,157,87,.1); } .wap-motor.off { color:#8a97ad; background:rgba(138,151,173,.13); } .wap-cock-acts { display:flex; gap:8px; } .wap-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px; border:1px solid rgba(15,23,41,.12); background:#fff; color:#1b2942; cursor:pointer; font-weight:700; font-size:13px; transition:border-color .15s, box-shadow .15s, transform .08s; } .wap-btn:hover { border-color:#2D3BFF; box-shadow:0 2px 10px rgba(45,59,255,.16); } .wap-btn:active { transform:translateY(1px); } .wap-rule { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12px; color:#4a5468; margin-bottom:12px; padding:8px 0 8px 11px; border-left:3px solid rgba(45,59,255,.5); line-height:1.5; } .wap-rule-k { font-weight:800; color:#2D3BFF; text-transform:uppercase; letter-spacing:.4px; font-size:10.5px; } .wap-rule-next { margin-left:auto; font-weight:800; color:#1b2942; background:rgba(45,59,255,.09); padding:3px 11px; border-radius:999px; font-size:12px; } .wap-chips { display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:10px; } .wap-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#4a5468; } .wap-chip i { width:8px; height:8px; border-radius:50%; display:inline-block; } .wap-chip b { font-weight:800; color:#0f1729; } /* WA_POOL_SCROLL_V1 — a fila agora rola (antes cortava sem scroll, não dava pra ver/descer tudo) */ .wap-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; max-height:340px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-right:2px; } .wap-list::-webkit-scrollbar { width:8px; } .wap-list::-webkit-scrollbar-thumb { background:rgba(15,23,41,.18); border-radius:8px; } .wap-list::-webkit-scrollbar-track { background:transparent; } /* WA_POOL_REMOVE_V1 — botão × pra remover da fila (aparece no hover do item) */ .wap-li-rm { flex:0 0 auto; width:24px; height:24px; padding:0; border:0; border-radius:7px; background:transparent; color:#9aa7a0; font-size:18px; line-height:1; cursor:pointer; opacity:.5; transition:opacity .15s, background .15s, color .15s; } .wap-li:hover .wap-li-rm { opacity:1; } .wap-li-rm:hover { background:#fdecec; color:#c0392b; } /* WA_SIM_CHAT_V1 (Onda 2) — "Simular abordagem" em chat estilo WhatsApp Web */ .wap-sim { width: min(880px, 94vw); max-width: 94vw; padding: 0; overflow: hidden; } .wap-sim .wap-head { padding: 14px 18px; border-bottom: 1px solid rgba(15,23,41,.08); } .wap-sim-wrap { display: grid; grid-template-columns: 240px 1fr; height: min(540px, 70vh); } .wap-sim-leads { border-right: 1px solid rgba(15,23,41,.08); display: flex; flex-direction: column; min-height: 0; background: #fafbfc; } .wap-sim-leads-head { padding: 12px 14px; font-size: 11px; font-weight: 800; color: #667085; text-transform: uppercase; letter-spacing: .04em; } .wap-sim-leads-list { overflow-y: auto; flex: 1; padding: 0 8px 8px; } .wap-sim-lead { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; transition: background .12s; } .wap-sim-lead:hover { background: #eef2f6; } .wap-sim-lead.on { background: #e6f2ec; } .wap-sim-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #2cbd7b, #13794a 92%); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 15px; box-shadow: 0 3px 9px rgba(16,120,74,.34), inset 0 1px 1px rgba(255,255,255,.35); } .wap-sim-av.sm { width: 34px; height: 34px; font-size: 14px; } .wap-sim-leadtx { min-width: 0; } .wap-sim-leadtx b { display: block; font-size: 13.5px; color: #1a2433; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wap-sim-leadtx small { display: block; font-size: 11.5px; color: #8a97ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wap-sim-chat { display: flex; flex-direction: column; min-height: 0; background: #f4f6f8; } .wap-sim-chat-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #fff; border-bottom: 1px solid rgba(15,23,41,.08); } .wap-sim-headtx b { display: block; font-size: 14px; color: #1a2433; } .wap-sim-headtx span { display: block; font-size: 11.5px; color: #1f9d63; } .wap-sim-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background-image: radial-gradient(rgba(15,23,41,.025) 1px, transparent 1px); background-size: 18px 18px; } .wap-sim-hint { margin: auto; color: #8a97ad; font-size: 13px; text-align: center; max-width: 70%; } .wap-sim-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.42; box-shadow: 0 1px 1px rgba(15,23,41,.06); animation: wapSimIn .22s ease; } .wap-sim-msg.lead { align-self: flex-start; background: #fff; color: #1a2433; border-bottom-left-radius: 4px; } .wap-sim-msg.bot { align-self: flex-end; background: #d8f3e3; color: #103a26; border-bottom-right-radius: 4px; } @keyframes wapSimIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .wap-sim-typing { padding: 11px 14px; } .wap-sim-dots { display: inline-flex; gap: 4px; } .wap-sim-dots i { width: 7px; height: 7px; border-radius: 50%; background: #5aa886; animation: wapSimDot 1s infinite ease-in-out; } .wap-sim-dots i:nth-child(2) { animation-delay: .15s; } .wap-sim-dots i:nth-child(3) { animation-delay: .3s; } @keyframes wapSimDot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @media (max-width: 560px) { .wap-sim-wrap { grid-template-columns: 1fr; height: min(560px, 76vh); } .wap-sim-leads { max-height: 148px; } } .wap-li { display:flex; align-items:center; gap:10px; padding:11px 6px; border-bottom:1px solid rgba(15,23,41,.06); } .wap-li:last-child { border-bottom:none; } .wap-li-ord { width:22px; flex:none; text-align:center; font-size:14px; font-weight:800; color:#2D3BFF; font-variant-numeric:tabular-nums; } .wap-li-dot { width:9px; height:9px; border-radius:50%; flex:none; margin:0 6px; } .wap-li-name { flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; color:#1b2942; display:flex; flex-direction:column; line-height:1.25; overflow:hidden; } .wap-li-name small { font-weight:500; font-size:11.5px; color:#8a97ad; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wap-li-tag { flex:none; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; color:var(--c,#667085); } .wap-li.is-next { background:linear-gradient(90deg, rgba(45,59,255,.07), transparent 70%); border-radius:8px; } .wap-li.is-next .wap-li-ord { position:relative; } .wap-li.is-next .wap-li-ord::after { content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; border:1.5px solid rgba(45,59,255,.5); animation:wapPulse 1.8s ease-out infinite; } @keyframes wapPulse { 0%{ transform:scale(.55); opacity:.9; } 100%{ transform:scale(1.4); opacity:0; } } @media (prefers-reduced-motion: reduce) { .wap-li.is-next .wap-li-ord::after { animation:none; } } .wap-cfg .wap-preset { background:linear-gradient(135deg,rgba(45,59,255,.05),rgba(123,92,255,.04)); border:1px solid rgba(45,59,255,.16); border-radius:12px; padding:12px; margin-bottom:12px; } .wap-preset-tag { font-size:10px; font-weight:800; letter-spacing:.6px; color:#2D3BFF; margin-bottom:8px; } .wap-field input { width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--line,#d8deea); border-radius:9px; font-size:13px; margin-top:4px; } .wap-field input:focus { outline:none; border-color:#2D3BFF; box-shadow:0 0 0 3px rgba(45,59,255,.14); } .wap-adv { margin:6px 0 12px; } .wap-adv summary { cursor:pointer; font-size:12px; font-weight:700; color:#4a5468; padding:6px 0; } .wap-adv-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0; } .wap-adv-grid label { font-size:11px; font-weight:600; color:#6b7488; display:flex; flex-direction:column; gap:4px; } .wap-adv-grid input { padding:7px 9px; border:1px solid var(--line,#d8deea); border-radius:8px; font-size:13px; } .wap-smoke-list { display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto; margin:6px 0 12px; } .wap-smoke-row { background:#f6f8fc; border:1px solid var(--line,#eaeef5); border-radius:10px; padding:9px 11px; } .wap-smoke-row b { display:block; font-size:12px; color:#20283a; margin-bottom:3px; } .wap-smoke-row p { margin:0; font-size:12.5px; line-height:1.45; color:#445; } .wap-cta.ghost { background:#fff; color:#4a5468; border:1px solid var(--line,#e6e9f0); } .wap-cta.ghost:hover { background:rgba(0,0,0,.03); } /* ===== HAON_LEADS_WAPOOL_V1_END ===== */ /* ===================================================================== WA_CIRCUIT_V1 — circuito operacional do WhatsApp (etapas numeradas). Tema-aware via tokens --md-*. Responsivo (notebook pequeno/tablet/phone). Animações em GPU (<=260ms) + prefers-reduced-motion safe. Sem emoji. ===================================================================== */ /* o painel é flex (não o grid auto/1fr/auto padrão) p/ a shell ocupar toda a altura. Sem !important: switchWorkspaceTab usa style.display=""/"none" inline, que deve vencer. */ #appContainer .wac-panel { display: flex; padding: 0; background: transparent; border: 0; box-shadow: none; min-height: 0; } #appContainer .wac-shell { flex: 1 1 auto; display: grid; grid-template-columns: minmax(330px, 400px) minmax(0, 1fr); gap: 14px; width: 100%; min-height: 0; padding: 14px; box-sizing: border-box; } #appContainer .wac-rail { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding-right: 4px; } /* ---- cartão de etapa ---- */ #appContainer .wac-step { background: var(--md-surface); border: 1px solid var(--md-hairline); border-radius: var(--md-radius-md); box-shadow: var(--md-shadow-1, 0 1px 2px rgba(0,0,0,.12)); overflow: hidden; transition: border-color .18s ease, opacity .18s ease; } #appContainer .wac-step-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; } #appContainer .wac-step-head[data-toggle] { cursor: pointer; } #appContainer .wac-step-head[data-toggle]:hover { background: var(--md-surface-1); } #appContainer .wac-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--md-primary); color: #fff; } #appContainer .wac-step-titles { flex: 1 1 auto; min-width: 0; } #appContainer .wac-step-titles strong { display: block; font-size: 14px; font-weight: 700; color: var(--md-on-surface); letter-spacing: -.01em; } #appContainer .wac-step-hint { display: block; font-size: 11.5px; color: var(--md-on-surface-variant); line-height: 1.35; margin-top: 2px; } #appContainer .wac-caret { width: 18px; height: 18px; flex: 0 0 auto; color: var(--md-on-surface-variant); transition: transform .2s ease; } #appContainer .wac-step.wac-open > .wac-step-head .wac-caret { transform: rotate(180deg); } /* corpo: colapsável quando tem .wac-collapse; a etapa 1 fica sempre aberta */ #appContainer .wac-step-body { padding: 4px 14px 14px; } #appContainer .wac-step-body.wac-collapse { display: none; } #appContainer .wac-step.wac-open > .wac-step-body.wac-collapse { display: block; animation: wacReveal .2s ease; } @keyframes wacReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* etapa travada (antes de conectar) */ #appContainer .wac-step.wac-locked { opacity: .55; } #appContainer .wac-step.wac-locked .wac-num { background: var(--md-outline-variant); color: var(--md-on-surface-variant); } #appContainer .wac-step.wac-locked .wac-step-head[data-toggle] { cursor: not-allowed; } #appContainer .wac-step.wac-locked .wac-step-head[data-toggle]:hover { background: transparent; } #appContainer .wac-step.wac-locked .wac-caret { opacity: .4; } /* ---- pill de status (etapa 1) ---- */ #appContainer .wac-pill { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 5px 11px; border-radius: var(--md-radius-pill); background: var(--md-surface-variant); color: var(--md-on-surface-variant); } #appContainer .wac-pill.is-on { background: rgba(30,142,62,.12); color: var(--md-green); } #appContainer .wac-pill.is-wait { background: rgba(249,171,0,.14); color: var(--md-yellow); } #appContainer .wac-pill.is-off { background: rgba(217,48,37,.10); color: var(--md-red); } #appContainer .wac-pill .wa-dot { width: 8px; height: 8px; } /* ---- botões do circuito ---- */ #appContainer .wac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 15px; border-radius: var(--md-radius-pill); font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; font-family: var(--md-font); transition: background .14s, border-color .14s, box-shadow .14s, transform .08s; } #appContainer .wac-btn:active { transform: translateY(1px); } #appContainer .wac-btn:disabled { opacity: .6; cursor: default; } #appContainer .wac-btn.primary { background: var(--md-primary); color: #fff; } #appContainer .wac-btn.primary:hover { box-shadow: 0 4px 14px rgba(11,87,208,.28); } #appContainer .wac-btn.ghost { background: var(--md-surface); color: var(--md-on-surface); border-color: var(--md-outline-variant); } #appContainer .wac-btn.ghost:hover { border-color: var(--md-primary); color: var(--md-primary); } #appContainer .wac-btn.danger { background: var(--md-surface); color: var(--md-red); border-color: rgba(217,48,37,.45); } #appContainer .wac-btn.danger:hover { background: rgba(217,48,37,.08); } #appContainer .wac-btn.full { width: 100%; } #appContainer .wac-btn.sm { min-height: 32px; padding: 6px 12px; font-size: 12px; } #appContainer .wac-conn-actions { display: flex; flex-wrap: wrap; gap: 8px; } #appContainer .wac-exec-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } /* ---- QR menor e centralizado ---- */ #appContainer .wac-qr { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px; background: var(--md-surface-1); border: 1px solid var(--md-hairline); border-radius: var(--md-radius-md); } #appContainer .wac-qr-frame { flex: 0 0 auto; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--md-hairline); line-height: 0; } #appContainer .wac-qr-frame img { display: block; width: 150px; height: 150px; max-width: 150px; border-radius: 6px; } #appContainer .wac-qr-side { min-width: 0; } #appContainer .wac-qr-steps { margin: 0 0 9px; font-size: 12px; line-height: 1.45; color: var(--md-on-surface); } #appContainer .wac-qr-steps b { color: var(--md-on-surface); font-weight: 700; } #appContainer .wac-help { font-size: 11.5px; line-height: 1.4; color: var(--md-on-surface-variant); margin: 11px 0 0; } /* ---- campos ---- */ #appContainer .wac-field { display: block; margin-bottom: 11px; } #appContainer .wac-field > span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--md-on-surface-variant); margin-bottom: 5px; } #appContainer .wac-field input, #appContainer .wac-field select, #appContainer .wac-field textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-radius-sm); background: var(--md-surface); color: var(--md-on-surface); font-size: 13px; font-family: var(--md-font); resize: vertical; } #appContainer .wac-field input:focus, #appContainer .wac-field select:focus, #appContainer .wac-field textarea:focus { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 3px rgba(11,87,208,.14); } #appContainer .wac-field-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--md-on-surface-variant); margin: 4px 0 7px; } /* segmented (tom de voz) */ #appContainer .wac-seg { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } #appContainer .wac-seg-btn { flex: 1 1 0; min-width: 84px; padding: 8px 10px; border-radius: var(--md-radius-pill); border: 1px solid var(--md-outline-variant); background: var(--md-surface); color: var(--md-on-surface-variant); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .14s, border-color .14s, color .14s; } #appContainer .wac-seg-btn:hover { border-color: var(--md-primary); } #appContainer .wac-seg-btn.on { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; } /* toggle de IA (casa vs BYOK) */ #appContainer .wac-llm { display: grid; gap: 8px; margin-bottom: 12px; } #appContainer .wac-llm-opt { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 13px; border-radius: 13px; cursor: pointer; border: 1.5px solid var(--md-outline-variant); background: var(--md-surface); transition: border-color .14s, background .14s, box-shadow .2s; } #appContainer .wac-llm-opt:hover { border-color: var(--md-primary); } #appContainer .wac-llm-opt.on { border-color: var(--md-primary); background: var(--md-primary-container); box-shadow: 0 4px 14px rgba(11,87,208,.12); } #appContainer .wac-llm-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--md-surface-1); color: var(--md-primary); } #appContainer .wac-llm-opt.on .wac-llm-ic { background: rgba(255,255,255,.55); } #appContainer .wac-llm-ic svg { width: 17px; height: 17px; } #appContainer .wac-llm-txt { min-width: 0; } #appContainer .wac-llm-txt b { display: block; font-size: 13px; font-weight: 700; color: var(--md-on-surface); } #appContainer .wac-llm-opt.on .wac-llm-txt b { color: var(--md-on-primary-container); } #appContainer .wac-llm-txt small { display: block; font-size: 11px; color: var(--md-on-surface-variant); margin-top: 1px; } #appContainer .wac-llm-opt.on .wac-llm-txt small { color: var(--md-on-primary-container); opacity: .85; } #appContainer .wac-byok { padding: 11px; border: 1px dashed var(--md-outline-variant); border-radius: 12px; margin-bottom: 12px; background: var(--md-surface-1); } #appContainer .wac-byok .wac-field:last-child { margin-bottom: 0; } /* ---- presets / funil ---- */ #appContainer .wac-presets { display: grid; gap: 9px; } #appContainer .wac-presets-loading { font-size: 12px; color: var(--md-on-surface-variant); padding: 10px 2px; } #appContainer .wac-preset { display: block; width: 100%; text-align: left; cursor: pointer; padding: 12px 13px; border-radius: 14px; border: 1.5px solid var(--md-outline-variant); background: var(--md-surface); transition: border-color .14s, background .14s, box-shadow .2s; } #appContainer .wac-preset:hover { border-color: var(--md-primary); } #appContainer .wac-preset.on { border-color: var(--md-primary); background: var(--md-primary-container); box-shadow: 0 4px 14px rgba(11,87,208,.12); } #appContainer .wac-preset.is-saving { opacity: .6; pointer-events: none; } #appContainer .wac-preset-top { display: flex; align-items: center; gap: 8px; } #appContainer .wac-preset-top b { flex: 1 1 auto; font-size: 13.5px; font-weight: 700; color: var(--md-on-surface); } #appContainer .wac-preset.on .wac-preset-top b { color: var(--md-on-primary-container); } #appContainer .wac-preset-pick { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--md-outline-variant); position: relative; } #appContainer .wac-preset.on .wac-preset-pick { border-color: var(--md-primary); background: var(--md-primary); } #appContainer .wac-preset.on .wac-preset-pick::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } #appContainer .wac-preset-desc { display: block; font-size: 11.5px; line-height: 1.4; color: var(--md-on-surface-variant); margin-top: 5px; } #appContainer .wac-preset.on .wac-preset-desc { color: var(--md-on-primary-container); opacity: .9; } #appContainer .wac-preset-prev { display: block; margin-top: 9px; padding: 9px 11px; border-radius: 10px; background: var(--md-surface-1); border: 1px solid var(--md-hairline); font-size: 12px; line-height: 1.45; color: var(--md-on-surface); font-style: italic; } #appContainer .wac-preset.on .wac-preset-prev { background: rgba(255,255,255,.5); border-color: transparent; } #appContainer .wac-preset-prev-k { display: block; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--md-primary); margin-bottom: 3px; } /* ---- etapa 4 (filtros) ---- */ #appContainer .wac-ftabs { display: flex; flex-wrap: wrap; gap: 6px; } #appContainer .wac-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } #appContainer .wac-cats:empty { display: none; } #appContainer .wac-cats .wa-cat { cursor: pointer; } #appContainer .wac-cats .wa-cat.active { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; } #appContainer .wac-pool-stats { font-size: 11px; color: var(--md-on-surface-variant); margin-top: 10px; line-height: 1.5; } #appContainer .wac-pool-stats:empty { display: none; } #appContainer .wac-pool-mount { margin-top: 10px; } #appContainer .wac-pool-mount:empty { display: none; } /* ---- etapa 6 (conversas) — workspace grande ---- */ #appContainer .wac-convs { display: flex; flex-direction: column; min-height: 0; height: 100%; } #appContainer .wac-convs-head { flex: 0 0 auto; border-bottom: 1px solid var(--md-hairline); } #appContainer .wac-convs-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--conv-list-w, minmax(220px, 280px)) 7px minmax(0, 1fr); } #appContainer .wac-conv-list-col { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--md-hairline); } #appContainer .wac-conv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 6px; align-content: start; padding: 12px; content-visibility: auto; } #appContainer .wac-conv-detail-col { min-height: 0; display: flex; flex-direction: column; } /* WA_CONV_RESIZE_V1 (Onda 2) — divisor arrastável lista ↔ chat */ #appContainer .wac-resizer { cursor: col-resize; background: transparent; position: relative; touch-action: none; } #appContainer .wac-resizer::before { content: ""; position: absolute; inset: 6px 2px; border-radius: 3px; background: var(--md-hairline); transition: background .15s; } #appContainer .wac-resizer:hover::before, #appContainer .wac-resizer.dragging::before { background: #1f9d63; } /* WA_ATTENDANT_SPLIT_V1 (Onda 2) — segmento Disparo / Atendimento na lista de conversas */ #appContainer .wac-conv-seg { display: flex; gap: 4px; padding: 8px 10px 2px; flex: 0 0 auto; } #appContainer .wac-conv-seg-btn { flex: 1; padding: 7px 8px; border: 1px solid var(--md-hairline); border-radius: 9px; background: #fff; color: #5f7068; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .14s, color .14s, border-color .14s; } #appContainer .wac-conv-seg-btn:hover { background: #f2f6f4; } #appContainer .wac-conv-seg-btn.on { background: linear-gradient(135deg,#1f9d63,#13794a); color: #fff; border-color: #13794a; } #appContainer .wa-conv-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e6f2ec; color: #13794a; font-size: 11px; font-weight: 800; } #appContainer .wa-conv-card.stage-atendimento .wa-conv-avatar { background: linear-gradient(135deg,#3a7bd5,#2b5fa8); } /* =========================== RESPONSIVO =========================== */ /* Notebook pequeno: rail mais estreita */ @media (max-width: 1180px) { #appContainer .wac-shell { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); } #appContainer .wac-convs-body { grid-template-columns: var(--conv-list-w, minmax(190px, 240px)) 7px minmax(0, 1fr); } } /* Tablet / phone: empilha tudo (rail em cima, conversas embaixo) */ @media (max-width: 920px) { #appContainer .wac-panel { overflow-y: auto; } #appContainer .wac-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 1fr); height: auto; min-height: 100%; } #appContainer .wac-rail { overflow: visible; max-height: none; padding-right: 0; } #appContainer .wac-convs { min-height: 420px; } } @media (max-width: 640px) { #appContainer .wac-shell { padding: 10px; gap: 10px; } #appContainer .wac-qr { flex-direction: column; align-items: stretch; text-align: center; } #appContainer .wac-qr-frame { align-self: center; } #appContainer .wac-qr-frame img { width: 134px; height: 134px; } #appContainer .wac-convs-body { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 38%) 1fr; } #appContainer .wac-resizer { display: none; } #appContainer .wac-conv-list-col { border-right: 0; border-bottom: 1px solid var(--md-hairline); } #appContainer .wac-seg-btn { min-width: 72px; } } @media (prefers-reduced-motion: reduce) { #appContainer .wac-step, #appContainer .wac-step.wac-open > .wac-step-body.wac-collapse, #appContainer .wac-caret, #appContainer .wac-btn, #appContainer .wac-llm-opt, #appContainer .wac-preset { animation: none !important; transition: none !important; } } /* ===== WA_CIRCUIT_V1_END ===== */ /* ===WA_PANEL_WIDE_V1=== + ===TAB_ISOLATION_V1=== cada aba é um BOARD isolado via data-mode no #appContainer. Em WhatsApp/Operação o board Escopo (.left + painéis de escopo) some de vez — !important, à prova de zoom/rota — e o painel central ocupa col 1+2. ws-fullcenter fica como fallback. Breakpoint 980 = onde o grid colapsa p/ 1 col. */ #appContainer.ws-fullcenter .left { display: none; } #appContainer[data-mode="wa"] .left, #appContainer[data-mode="opps"] .left, #appContainer[data-mode="wa"] #scopeKpiPanel, #appContainer[data-mode="opps"] #scopeKpiPanel, #appContainer[data-mode="wa"] #scopeFilterPanel, #appContainer[data-mode="opps"] #scopeFilterPanel { display: none !important; } #appContainer.ws-fullcenter .center, #appContainer[data-mode="wa"] .center, #appContainer[data-mode="opps"] .center { grid-column: 1 / 3; } @media (max-width: 980px) { #appContainer.ws-fullcenter .center, #appContainer[data-mode="wa"] .center, #appContainer[data-mode="opps"] .center { grid-column: 1; } } /* ===TELEMARKETING_V1=== board "Ligações" (central de telemarketing click-to-call) */ #appContainer[data-mode="tel"] .left, #appContainer[data-mode="tel"] #scopeKpiPanel, #appContainer[data-mode="tel"] #scopeFilterPanel { display: none !important; } #appContainer[data-mode="tel"] .center { grid-column: 1 / 3; } @media (max-width: 980px) { #appContainer[data-mode="tel"] .center { grid-column: 1; } } #appContainer .wac-panel#panelTel, #appContainer #panelTel { display: flex; padding: 0; background: transparent; border: 0; box-shadow: none; min-height: 0; } #appContainer .tel-shell { flex: 1 1 auto; display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 14px; width: 100%; min-height: 0; padding: 14px; box-sizing: border-box; } #appContainer .tel-col-queue { display: flex; flex-direction: column; min-height: 0; background: var(--md-surface,#fff); border: 1px solid var(--md-hairline,#e6efea); border-radius: 14px; overflow: hidden; } #appContainer .tel-queue-h { font-weight: 800; font-size: .9rem; color: #1f2730; padding: 14px 16px 10px; border-bottom: 1px solid #eef2f0; } #appContainer .tel-queue-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; display: grid; gap: 6px; align-content: start; } #appContainer .tel-qitem { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border: 1px solid #eef2f0; border-radius: 10px; background: #fff; cursor: pointer; transition: background .14s, border-color .14s; } #appContainer .tel-qitem:hover { background: #f5f9f7; } #appContainer .tel-qitem.on { background: #eef4ff; border-color: #c3d6ff; } #appContainer .tel-qav { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #3a7bd5, #2b5fa8); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; } #appContainer .tel-qtx { min-width: 0; display: flex; flex-direction: column; } #appContainer .tel-qtx b { font-size: .85rem; color: #1f2730; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #appContainer .tel-qtx small { font-size: .72rem; color: #8a93a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #appContainer .tel-col-card { display: flex; flex-direction: column; min-height: 0; gap: 12px; overflow-y: auto; } #appContainer .tel-metas { display: flex; flex-wrap: wrap; gap: 8px; } #appContainer .tel-meta { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #e6efea; border-radius: 999px; padding: 6px 12px; font-size: .78rem; color: #5f6878; font-weight: 600; } #appContainer .tel-meta b { color: #1f2730; font-weight: 800; } #appContainer .tel-meta-total { background: linear-gradient(135deg,#eaf7f0,#e8f0ff); border-color: #cfe6da; } #appContainer .tel-card { flex: 1 1 auto; background: #fff; border: 1px solid #e6efea; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; } #appContainer .tel-card-head b { font-size: 1.15rem; font-weight: 800; color: #14202b; display: block; } #appContainer .tel-card-head span { font-size: .82rem; color: #6b7682; } #appContainer .tel-call { display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start; padding: 13px 26px; border-radius: 12px; font-size: 1rem; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(135deg,#16b85f,#0c9a4c); box-shadow: 0 5px 16px rgba(12,154,76,.32), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .15s, box-shadow .2s, filter .2s; } #appContainer .tel-call:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(12,154,76,.4); filter: brightness(1.04); } #appContainer .tel-addr { font-size: .8rem; color: #8a93a0; margin-top: -4px; } #appContainer .tel-script { border: 1px dashed #d8e6ff; border-radius: 11px; padding: 12px; background: #fafcff; } #appContainer .tel-genscript, #appContainer .tel-assinar { border: 0; border-radius: 9px; padding: 9px 16px; font-weight: 700; font-size: .82rem; cursor: pointer; color: #fff; background: linear-gradient(135deg,#7c5cff,#5b46b3); } #appContainer .tel-script-h { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: .82rem; color: #3a2d6b; margin-bottom: 8px; } #appContainer .tel-regen { border: 1px solid #ddd; background: #fff; color: #444; border-radius: 7px; cursor: pointer; padding: 2px 9px; font-size: .9rem; } #appContainer .tel-appr { padding: 9px 11px; border-radius: 9px; background: #fff; border: 1px solid #eceef5; margin-bottom: 7px; } #appContainer .tel-appr-tag { font-size: .68rem; font-weight: 800; letter-spacing: .02em; color: #7c5cff; text-transform: uppercase; margin-bottom: 3px; } #appContainer .tel-appr p { margin: 0; font-size: .84rem; line-height: 1.5; color: #27323c; } #appContainer .tel-script-msg { font-size: .82rem; color: #5f6878; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #appContainer .tel-outcome-h { font-weight: 800; font-size: .82rem; color: #1f2730; margin-top: 2px; } #appContainer .tel-outcomes { display: flex; flex-wrap: wrap; gap: 8px; } #appContainer .tel-out { border: 1.5px solid var(--c,#ccc); color: var(--c,#444); background: #fff; border-radius: 9px; padding: 9px 15px; font-weight: 700; font-size: .82rem; cursor: pointer; transition: background .14s, color .14s; } #appContainer .tel-out:hover { background: var(--c,#eee); color: #fff; } #appContainer .tel-out:disabled { opacity: .5; cursor: default; } #appContainer .tel-empty { color: #8a93a0; font-size: .85rem; text-align: center; padding: 24px 14px; line-height: 1.5; } #appContainer .tel-empty-big { padding: 56px 20px; font-size: .95rem; } @media (max-width: 980px) { #appContainer .tel-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(300px,1fr); } } /* ===CALLOS_V1=== seletor de canal (WhatsApp <-> Ligacoes) dentro do painel operacional + CallOS rico, fit 12 pol */ #appContainer .wac-panel { flex-direction: column; } #appContainer .ops-channel { display: flex; gap: 6px; padding: 10px 14px 0; flex: 0 0 auto; } #appContainer .ops-chan-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--md-hairline,#e6efea); background: var(--md-surface,#fff); color: #5f6878; border-radius: 10px; padding: 8px 16px; font-weight: 700; font-size: .84rem; cursor: pointer; transition: background .14s, color .14s, border-color .14s; } #appContainer .ops-chan-btn .ops-icon { width: 16px; height: 16px; } #appContainer .ops-chan-btn:hover { background: #f5f9f7; } #appContainer .ops-chan-btn.active { background: linear-gradient(135deg,#1f7a4d,#15633c); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(21,99,60,.22); } #appContainer .ops-chan-btn.active .ops-icon { color: #fff; } #appContainer .tel-search { margin: 8px 10px 0; padding: 8px 11px; border: 1px solid #e6efea; border-radius: 9px; font-size: .82rem; outline: none; font-family: inherit; } #appContainer .tel-search:focus { border-color: #16b85f; } #appContainer .tel-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } #appContainer .tel-callstate { font-size: .76rem; font-weight: 800; color: #16b85f; white-space: nowrap; padding-top: 3px; } #appContainer .tel-sec { border: 1px solid #eef2f0; border-radius: 11px; background: #fafcfb; overflow: hidden; } #appContainer .tel-sec > summary { cursor: pointer; padding: 10px 13px; font-weight: 800; font-size: .82rem; color: #2a3742; list-style: none; user-select: none; } #appContainer .tel-sec > summary::-webkit-details-marker { display: none; } #appContainer .tel-sec > summary::after { content: "v"; float: right; color: #9aa6b0; font-size: .7rem; transition: transform .15s; } #appContainer .tel-sec[open] > summary::after { transform: rotate(180deg); } #appContainer .tel-sec > *:not(summary) { margin: 0 13px 13px; } #appContainer .tel-appr p { display: flex; gap: 8px; margin: 4px 0; font-size: .83rem; line-height: 1.45; color: #27323c; } #appContainer .tel-appr p span { flex: 0 0 74px; font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #7c5cff; padding-top: 2px; } #appContainer .tel-consent { display: flex; flex-direction: column; gap: 7px; } #appContainer .tel-ck { display: flex; align-items: center; gap: 9px; font-size: .83rem; color: #2a3742; cursor: pointer; } #appContainer .tel-ck input { width: 17px; height: 17px; accent-color: #16b85f; flex: 0 0 auto; } #appContainer .tel-consent-note { font-size: .72rem; color: #7a6a3a; line-height: 1.45; background: #fff7e8; border: 1px solid #ffe3b0; border-radius: 8px; padding: 8px 10px; margin-top: 2px; } #appContainer .tel-notes { width: 100%; box-sizing: border-box; border: 1px solid #e6efea; border-radius: 9px; padding: 9px 11px; font-family: inherit; font-size: .84rem; resize: vertical; outline: none; } #appContainer .tel-notes:focus { border-color: #16b85f; } #appContainer .tel-sumbtn { margin-top: 8px; } #appContainer .tel-summary { margin-top: 10px; border: 1px solid #e7defb; background: #faf7ff; border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; } #appContainer .tel-sum-row span { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #7c5cff; margin-bottom: 2px; } #appContainer .tel-sum-row p { margin: 0; font-size: .84rem; line-height: 1.5; color: #27323c; } @media (max-height: 780px) { #appContainer .tel-shell { padding: 10px; gap: 10px; } #appContainer .tel-card { padding: 13px; gap: 10px; } #appContainer .ops-channel { padding: 7px 10px 0; } #appContainer .tel-call { padding: 11px 22px; } #appContainer .tel-sec > summary { padding: 8px 12px; } } /* =================== WA_WAC_RESPONSIVE_V2 — centraliza no card, nunca esmaga =================== */ /* glow do atendente ao vivo (passo 6 Atendimento) */ #appContainer .wa-conv-card.wa-conv-live { box-shadow: inset 3px 0 0 #1f9d63; } #appContainer .wa-conv-card.wa-conv-live .wa-conv-avatar { position: relative; overflow: visible; } #appContainer .wa-live-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #16a34a; border: 2px solid #fff; animation: waLivePulse 1.7s ease-out infinite; } @keyframes waLivePulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 100% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } } #appContainer .wa-live-badge { margin-left: auto; align-self: center; font-size: 11px; font-weight: 800; color: #16a34a; white-space: nowrap; } #appContainer .wa-attendant-note { padding: 11px 14px; font-size: 12.5px; line-height: 1.5; color: #5f7068; background: #f2f9f5; border-top: 1px solid var(--md-hairline); text-align: center; } @media (prefers-reduced-motion: reduce) { #appContainer .wa-live-dot { animation: none; } } /* centraliza + cap: o shell nunca estica demais em tela larga (fica centrado no pad) */ #appContainer .wac-shell { max-width: 1640px; margin-inline: auto; } /* iPad landscape / netbook: empilha cedo pra NAO espremer o chat (rail em cima, conversas full embaixo) */ @media (max-width: 1080px) { #appContainer .wac-panel { overflow-y: auto; } #appContainer .wac-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(440px, 1fr); height: auto; min-height: 100%; } #appContainer .wac-rail { overflow: visible; max-height: none; padding-right: 0; } #appContainer .wac-convs { min-height: 480px; } #appContainer .wac-conv-detail-col { min-height: 300px; } } /* mobile: lista e chat empilhados com respiro (sem esmagar, sem scroll atoa) */ @media (max-width: 640px) { #appContainer .wac-convs-body { grid-template-rows: minmax(146px, 32%) 1fr; } #appContainer .wac-conv-detail-col { min-height: 320px; } #appContainer .wa-live-badge { font-size: 10px; } #appContainer .wa-attendant-note { font-size: 11.5px; padding: 9px 11px; } } /* ============================================================ WA_LAYOUT_FIX_V1 — aba WhatsApp travada/centralizada/responsiva ============================================================ */ /* Campos: altura e fonte FIXAS, sem overflow horizontal (sem "zoom") */ #appContainer #panelWA input:not([type=checkbox]):not([type=radio]), #appContainer #panelWA select { box-sizing: border-box; max-width: 100%; font-size: 14px; min-height: 40px; } #appContainer #panelWA textarea { box-sizing: border-box; max-width: 100%; font-size: 14px; min-height: 54px; resize: vertical; } #appContainer #panelWA button { box-sizing: border-box; max-width: 100%; } /* Etapas mais compactas — cabe mais sem precisar rolar */ #appContainer #panelWA .wac-step-head { padding: 11px 13px; } #appContainer #panelWA .wac-step-body { padding: 4px 13px 12px; } #appContainer #panelWA .wac-rail { gap: 10px; } /* ---- Desktop (>=921px): painel TRAVADO na viewport, rola SO a rail ---- */ @media (min-width: 921px) { #appContainer #panelWA.wac-panel { height: 100%; max-height: 100%; min-height: 0; overflow: hidden; } #appContainer #panelWA .wac-shell { min-height: 0; overflow: hidden; } #appContainer #panelWA .wac-rail { min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--md-outline-variant) transparent; } #appContainer #panelWA .wac-rail::-webkit-scrollbar { width: 7px; } #appContainer #panelWA .wac-rail::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 6px; } #appContainer #panelWA .wac-rail::-webkit-scrollbar-track { background: transparent; } } /* ---- Telas baixas: ganha altura escondendo dicas + compacta mais ---- */ @media (min-width: 921px) and (max-height: 820px) { #appContainer #panelWA .wac-step-hint { display: none; } #appContainer #panelWA .wac-step-head { padding: 9px 12px; } #appContainer #panelWA .wac-step-body { padding: 3px 12px 10px; } #appContainer #panelWA .wac-rail { gap: 8px; } } /* WA_LAYOUT_FIX_V1 end */ /* ============================================================ WA_LAYOUT_FIX_V2 — usa a tela inteira, passos fixos, Pool sem corte ============================================================ */ /* 1) Usa a LARGURA TODA (remove o cap de 1640px que centralizava espremido) */ #appContainer #panelWA .wac-shell { max-width: none; } /* 2) FIXO: todos os passos sempre abertos, sem accordion (sem expand/collapse) */ #appContainer #panelWA .wac-step-body.wac-collapse { display: block !important; animation: none !important; } #appContainer #panelWA .wac-caret { display: none !important; } #appContainer #panelWA .wac-step.wac-locked { opacity: 1; } #appContainer #panelWA .wac-step.wac-locked .wac-num { background: var(--md-primary); color: #fff; } #appContainer #panelWA .wac-step-head[data-toggle] { cursor: default; } #appContainer #panelWA .wac-step-head[data-toggle]:hover { background: transparent; } /* 3) Pool cockpit: botoes NAO cortam (quebram linha) */ #appContainer #panelWA .wap-cock-head { flex-wrap: wrap; row-gap: 8px; } #appContainer #panelWA .wap-cock-acts { flex-wrap: wrap; } /* 4) Telas largas (>=1280px): espalha — rail em 2 colunas + conversas ao lado */ @media (min-width: 1280px) { #appContainer #panelWA .wac-shell { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } #appContainer #panelWA .wac-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; overflow-y: auto; } /* passo 5 (Executar: audio + grupo + Pool) ocupa a largura toda da rail */ #appContainer #panelWA #wacStep5 { grid-column: 1 / -1; } } /* 5) Ultra-wide (>=1900px): rail em 3 colunas (Pool segue full) */ @media (min-width: 1900px) { #appContainer #panelWA .wac-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } #appContainer #panelWA #wacStep5 { grid-column: 1 / -1; } } /* WA_LAYOUT_FIX_V2 end */ /* ============================================================ WA_LAYOUT_FIX_V3 — corrige corte no zoom 100%: mostra TUDO, rola se nao couber (o overflow:hidden do "sem scroll" cortava o conteudo dos cards) ============================================================ */ #appContainer #panelWA.wac-panel { overflow-y: auto !important; overflow-x: hidden !important; } #appContainer #panelWA .wac-shell { overflow: visible !important; } #appContainer #panelWA .wac-rail { overflow: visible !important; max-height: none !important; } #appContainer #panelWA .wac-step { overflow: visible !important; } #appContainer #panelWA .wac-step-body.wac-collapse { overflow: visible !important; } /* conversas: altura util (nao colapsa quando o painel rola) */ #appContainer #panelWA .wac-convs { min-height: 70vh; } /* WA_LAYOUT_FIX_V3 end */