/* ========================================================================== * HAONchat — pool.css (BRINDE: cockpit de leads + disparo) * -------------------------------------------------------------------------- * Clonado/adaptado de web-ref/wapool.css (HAON Leads). Compacto pra a coluna * direita do builder. Tema-aware (light/dark via [data-theme=dark] no ), * usa SÓ os tokens do styles.css (--green-*, --orange-*, --blue-*, --ink…), * zero cor mágica fora dos chips de estado (que são significado, não tema). * * Ergonomia 54: botões grandes (>=44px), 1 ação principal laranja ("Disparar"), * labels legíveis, feedback humano, estados vazio/erro desenhados, * prefers-reduced-motion respeitado. Sem dependência externa. * * Namespace de classe: .pool-* (isolado — não colide com o builder/wac/wap). * ========================================================================== */ .pool-cock { display: flex; flex-direction: column; gap: 12px; min-height: 0; } /* ---- cabeçalho: título + selo demonstração ---- */ .pool-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .pool-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .pool-title .pool-i { width: 20px; height: 20px; flex: 0 0 auto; color: var(--green-600); } /* selo "demonstração" — amarelo de atenção, inconfundível */ .pool-demo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); color: var(--yellow-600); background: var(--yellow-100); border: 1px solid color-mix(in srgb, var(--yellow-500) 55%, transparent); } .pool-demo .pool-i { width: 13px; height: 13px; flex: 0 0 auto; } /* aviso amigável de demonstração (some quando POOL_LIVE) */ .pool-demo-note { font-size: 12.5px; line-height: 1.45; color: var(--soft); background: var(--blue-100); border: 1px solid color-mix(in srgb, var(--blue-500) 28%, transparent); border-radius: var(--radius-sm); padding: 10px 12px; } .pool-demo-note b { color: var(--blue-700); font-weight: 800; } /* ---- busca ---- */ .pool-search { position: relative; display: block; } .pool-search .pool-search-i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; } .pool-search input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 36px 9px 36px; font-size: 16px; /* anti-zoom iOS */ font-family: var(--font-body); color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } .pool-search input::placeholder { color: var(--muted); } .pool-search input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-500) 16%, transparent); } .pool-search-clear { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; display: none; } .pool-search.has-val .pool-search-clear { display: grid; place-items: center; } .pool-search-clear:hover { background: var(--line); color: var(--ink); } /* ---- "próximo a abordar" ---- */ .pool-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--soft); padding: 8px 0 8px 11px; border-left: 3px solid color-mix(in srgb, var(--blue-500) 55%, transparent); line-height: 1.5; } .pool-next-k { font-weight: 800; color: var(--blue-700); text-transform: uppercase; letter-spacing: .4px; font-size: 10.5px; } .pool-next-name { font-weight: 800; color: var(--ink); background: var(--blue-100); padding: 3px 11px; border-radius: var(--radius-pill); } /* ---- chips de contagem por estado ---- */ .pool-counts { display: flex; flex-wrap: wrap; gap: 6px 12px; } .pool-count { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--soft); } .pool-count i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c, var(--muted)); flex: 0 0 auto; } .pool-count b { font-weight: 800; color: var(--ink); } /* ---- fila (rola, nunca corta) ---- */ .pool-list { list-style: none; margin: 0; padding: 2px 2px 0 0; display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .pool-list::-webkit-scrollbar { width: 8px; } .pool-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } .pool-list::-webkit-scrollbar-track { background: transparent; } .pool-li { display: flex; align-items: center; gap: 10px; padding: 11px 6px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .14s ease; } .pool-li:last-child { border-bottom: none; } .pool-li:hover { background: color-mix(in srgb, var(--blue-100) 60%, transparent); } .pool-li:focus-visible { outline: 3px solid var(--yellow-500); outline-offset: -2px; border-radius: 8px; } .pool-li-ord { width: 24px; flex: none; text-align: center; font-size: 14px; font-weight: 800; color: var(--blue-700); font-variant-numeric: tabular-nums; } .pool-li-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin: 0 7px; background: var(--c, var(--muted)); } .pool-li-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; } .pool-li-name small { font-weight: 500; font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pool-li-tag { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--c, var(--soft)); white-space: nowrap; } .pool-li-rm { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; opacity: .5; transition: opacity .15s, background .15s, color .15s; } .pool-li:hover .pool-li-rm, .pool-li:focus-within .pool-li-rm { opacity: 1; } .pool-li-rm:hover { background: var(--red-100); color: var(--red-600); } /* item "conversando" — glow verde sutil + pulso no dot */ .pool-li.is-live { box-shadow: inset 3px 0 0 var(--green-600); } .pool-li.is-live .pool-li-dot { position: relative; } .pool-li.is-live .pool-li-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--green-600); animation: poolPulse 1.7s ease-out infinite; } @keyframes poolPulse { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } } /* próximo a abordar — leve realce */ .pool-li.is-next { background: linear-gradient(90deg, color-mix(in srgb, var(--blue-500) 9%, transparent), transparent 70%); border-radius: 8px; } /* lead novo entrando (slide rápido) */ .pool-li-new { animation: poolLiIn .4s cubic-bezier(.2,.9,.3,1.2); } @keyframes poolLiIn { 0% { transform: translateX(14px); opacity: 0; } 100% { transform: none; opacity: 1; } } /* ---- ações: 1 principal laranja (Disparar) + secundárias ghost ---- */ .pool-acts { display: flex; flex-direction: column; gap: 9px; } .pool-fire { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 54px; padding: 0 20px; border: 0; border-radius: 13px; font-family: var(--font-body); font-size: 16px; font-weight: 800; line-height: 1; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--orange-600), var(--orange-500)); box-shadow: var(--shadow-sm); transition: filter .14s, transform .08s, box-shadow .2s; } .pool-fire:hover { filter: brightness(1.04); box-shadow: var(--shadow-md); } .pool-fire:active { transform: translateY(1px); } .pool-fire:disabled { opacity: .6; cursor: default; filter: none; } .pool-fire .pool-i { width: 19px; height: 19px; flex: 0 0 auto; } /* quando o disparo está ATIVO, o botão vira "pausar" (verde/calmo, não laranja) */ .pool-fire.is-on { background: linear-gradient(135deg, var(--green-700), var(--green-500)); } .pool-acts-row { display: flex; flex-wrap: wrap; gap: 8px; } .pool-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 14px; border-radius: 11px; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .14s, box-shadow .15s, transform .08s; } .pool-btn:hover { border-color: var(--blue-500); background: var(--blue-100); } .pool-btn:active { transform: translateY(1px); } .pool-btn:disabled { opacity: .55; cursor: default; } .pool-btn .pool-i { width: 16px; height: 16px; flex: 0 0 auto; } /* ---- estados vazio / erro ---- */ .pool-empty, .pool-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 16px; color: var(--soft); } .pool-empty .pool-empty-i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-100); color: var(--blue-700); } .pool-empty .pool-empty-i.err { background: var(--red-100); color: var(--red-600); } .pool-empty b { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); } .pool-empty p { margin: 0; font-size: 13.5px; line-height: 1.5; max-width: 34ch; } .pool-empty .pool-btn { flex: 0 0 auto; min-width: 160px; } /* spinner do "carregando" */ .pool-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--blue-500) 26%, transparent); border-top-color: var(--blue-600); animation: poolSpin .8s linear infinite; } @keyframes poolSpin { to { transform: rotate(360deg); } } /* ===================== modal: confirmar disparo / simular ===================== */ .pool-backdrop { position: fixed; inset: 0; z-index: 9460; display: grid; place-items: center; padding: 22px; background: rgba(8, 14, 30, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: poolFade .14s ease; } .pool-modal { position: relative; width: min(460px, 100%); max-height: 90vh; overflow-y: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--shadow-lg); } .pool-modal.wide { width: min(840px, 96vw); padding: 0; overflow: hidden; } .pool-x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .pool-x:hover { background: var(--line); color: var(--ink); } .pool-mhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .pool-mhead .pool-mic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--orange-600), var(--orange-500)); } .pool-mhead .pool-mic.green { background: linear-gradient(135deg, var(--green-700), var(--green-500)); } .pool-mhead b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; } .pool-mhead span { display: block; font-size: 12.5px; color: var(--soft); margin-top: 2px; } .pool-mbody { font-size: 14px; color: var(--soft); line-height: 1.55; } .pool-mbody .pool-warn { margin: 14px 0; font-size: 13px; line-height: 1.5; color: var(--yellow-600); background: var(--yellow-100); border: 1px solid color-mix(in srgb, var(--yellow-500) 50%, transparent); border-radius: var(--radius-sm); padding: 11px 13px; } .pool-mbody .pool-warn b { color: var(--yellow-600); font-weight: 800; } .pool-mactions { display: flex; gap: 10px; margin-top: 18px; } .pool-mactions .pool-btn, .pool-mactions .pool-fire { flex: 1 1 0; min-height: 50px; } /* cadência: escolha de ritmo (cartões grandes, 1 selecionado) */ .pool-field-lbl { font-size: 13px; font-weight: 800; color: var(--ink); margin: 4px 0 8px; } .pool-cadence { display: grid; gap: 8px; margin-bottom: 4px; } .pool-cad { text-align: left; cursor: pointer; padding: 12px 13px; border-radius: 13px; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink); transition: border-color .14s, background .14s, box-shadow .2s; } .pool-cad:hover { border-color: var(--orange-500); } .pool-cad.on { border-color: var(--orange-500); background: var(--orange-100); box-shadow: 0 4px 14px color-mix(in srgb, var(--orange-500) 18%, transparent); } .pool-cad b { display: block; font-size: 14px; font-weight: 800; } .pool-cad span { display: block; font-size: 12px; color: var(--soft); line-height: 1.4; margin-top: 2px; } /* ===================== simulador de conversa (clona wapool .wap-sim) ===================== */ .pool-sim-wrap { display: grid; grid-template-columns: 230px 1fr; height: min(520px, 70vh); } .pool-sim-head { padding: 14px 18px; border-bottom: 1px solid var(--line); } .pool-sim-leads { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: color-mix(in srgb, var(--bg) 60%, var(--card)); } .pool-sim-leads-h { padding: 12px 14px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .pool-sim-leads-list { overflow-y: auto; flex: 1; padding: 0 8px 8px; } .pool-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; } .pool-sim-lead:hover { background: var(--blue-100); } .pool-sim-lead.on { background: var(--green-100); } .pool-sim-av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 50% 28%, var(--green-500), var(--green-700) 92%); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; } .pool-sim-leadtx { min-width: 0; } .pool-sim-leadtx b { display: block; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pool-sim-leadtx small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pool-sim-chat { display: flex; flex-direction: column; min-height: 0; background: var(--bg); } .pool-sim-chat-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--card); border-bottom: 1px solid var(--line); } .pool-sim-headtx b { display: block; font-size: 14px; color: var(--ink); } .pool-sim-headtx span { display: block; font-size: 11.5px; color: var(--green-700); } .pool-sim-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .pool-sim-hint { margin: auto; color: var(--muted); font-size: 13px; text-align: center; max-width: 70%; } .pool-sim-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.42; box-shadow: var(--shadow-sm); animation: poolSimIn .22s ease; } .pool-sim-msg.lead { align-self: flex-start; background: var(--card); color: var(--ink); border-bottom-left-radius: 4px; } .pool-sim-msg.bot { align-self: flex-end; background: var(--green-100); color: var(--green-900); border-bottom-right-radius: 4px; } [data-theme="dark"] .pool-sim-msg.bot { color: var(--green-500); } @keyframes poolSimIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .pool-sim-typing { padding: 11px 14px; } .pool-sim-dots { display: inline-flex; gap: 4px; } .pool-sim-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); animation: poolSimDot 1s infinite ease-in-out; } .pool-sim-dots i:nth-child(2) { animation-delay: .15s; } .pool-sim-dots i:nth-child(3) { animation-delay: .3s; } @keyframes poolSimDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* ===================== toast próprio (centro, premium, rápido) ===================== */ .pool-toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); z-index: 9999; display: flex; align-items: center; gap: 11px; max-width: 90vw; padding: 14px 22px; border-radius: 16px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 700; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .12s ease, transform .14s cubic-bezier(.2,.9,.3,1.4); pointer-events: none; } .pool-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .pool-toast .pool-toast-i { display: inline-flex; flex: none; color: var(--green-500); } .pool-toast.err { box-shadow: var(--shadow-lg), inset 0 0 0 1.5px var(--red-500); } .pool-toast.err .pool-toast-i { color: var(--red-500); } @keyframes poolFade { from { opacity: 0; } to { opacity: 1; } } /* ===================== responsivo ===================== */ /* tablet (880px): o cockpit já é uma coluna estreita dentro do builder; * só garante que a fila não fica curta demais quando empilhada full-width. */ @media (max-width: 880px) { .pool-list { max-height: 420px; } } /* ===== BREAKPOINT DO SISTEMA (520px): pool = lista de toque cheio ===== */ @media (max-width: 520px) { /* simulador (modal) empilha: lista de leads em cima, conversa embaixo */ .pool-sim-wrap { grid-template-columns: 1fr; height: min(560px, 76vh); } .pool-sim-leads { max-height: 150px; border-right: 0; border-bottom: 1px solid var(--line); } /* ações secundárias empilham 100% — nunca dois botões colados estreitos */ .pool-acts-row { flex-direction: column; } .pool-btn { width: 100%; min-height: 48px; } /* toque cheio na lista: remover e item respiram no dedo */ .pool-li { padding: 13px 6px; } .pool-li-rm { width: 36px; height: 36px; opacity: 1; } /* o "×" de remover sempre visível no celular (hover não existe no toque) */ .pool-search-clear { width: 32px; height: 32px; } /* modal de confirmar disparo: ações empilham e ficam grandes */ .pool-mactions { flex-direction: column; } .pool-mactions .pool-btn, .pool-mactions .pool-fire { width: 100%; } } /* ===================== motion reduzido ===================== */ @media (prefers-reduced-motion: reduce) { .pool-backdrop, .pool-toast, .pool-li-new, .pool-li.is-live .pool-li-dot::after, .pool-sim-msg, .pool-sim-dots i, .pool-spin { animation: none !important; transition: none !important; } }