/* ============================================================================ Conversas — redesign (escopado em .wa-redesign). Segue o tema do app (data-theme no ). ============================================================================ */ .wa-redesign{ --bg:#0e0f13; --panel:#16181f; --panel2:#1b1e26; --brd:#262932; --brd2:#30333e; --tx:#e6e8ef; --t2:#a3a9b8; --t3:#6c7283; --ac:#6d63ff; --ac-d:#8b82ff; --ac-soft:#23233a; --gr:#3fd29e; --gr-soft:#163029; --am:#e0a945; --am-soft:#322713; --bl:#5b97f0; --bl-soft:#152540; --rd:#e76a5d; --rd-soft:#3a1d1b; --wa:#1faa54; --r:10px; --r2:13px; --sh:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.35); } [data-theme="light"] .wa-redesign{ --bg:#f6f7f9; --panel:#fff; --panel2:#fbfbfc; --brd:#ececef; --brd2:#e3e3e8; --tx:#16171b; --t2:#646975; --t3:#9499a4; --ac:#4f46e5; --ac-d:#4338ca; --ac-soft:#eef0fe; --gr:#0f8f66; --gr-soft:#e7f5ef; --am:#b67a12; --am-soft:#fbf2df; --bl:#2f6fe0; --bl-soft:#e8f0fd; --rd:#c0392b; --rd-soft:#fdeaea; --wa:#1faa54; --sh:0 1px 2px rgba(17,18,22,.04),0 1px 3px rgba(17,18,22,.06); } .wa-redesign{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg);color:var(--tx);font-family:'Inter',sans-serif;font-size:14px} .wa-redesign *{box-sizing:border-box} /* topo */ .wa-redesign .wa-top{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--brd);background:var(--panel)} .wa-redesign .wa-top h1{font-size:16px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px} .wa-redesign .wa-top .pill{font-size:12px;color:var(--t3)} .wa-redesign .wa-top .sp{flex:1} /* botões */ .wa-redesign .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brd2);background:var(--panel);color:var(--tx);font-family:inherit;font-size:13px;font-weight:600;padding:8px 12px;border-radius:var(--r);cursor:pointer;white-space:nowrap;line-height:1.2} .wa-redesign .btn:hover{background:var(--panel2)} .wa-redesign .btn.pri{background:var(--ac);border-color:var(--ac);color:#fff} .wa-redesign .btn.wa{background:var(--wa);border-color:var(--wa);color:#fff} .wa-redesign .btn.sm{padding:6px 10px;font-size:12px} .wa-redesign .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--brd2);background:var(--panel);color:var(--tx);border-radius:var(--r);cursor:pointer;font-size:16px;flex-shrink:0} .wa-redesign .icon-btn:hover{background:var(--panel2)} /* layout 3 colunas */ .wa-redesign .wa-wrap{flex:1;display:grid;grid-template-columns:320px 1fr 300px;min-height:0} /* ===== LISTA ===== */ .wa-redesign .wa-list{border-right:1px solid var(--brd);background:var(--panel);display:flex;flex-direction:column;min-height:0} .wa-redesign .wa-list-tools{padding:11px 12px;border-bottom:1px solid var(--brd);display:flex;flex-direction:column;gap:9px} .wa-redesign .search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--brd2);border-radius:var(--r);padding:8px 11px;color:var(--t3)} .wa-redesign .search input{border:0;background:transparent;outline:none;font-family:inherit;font-size:13px;color:var(--tx);width:100%} .wa-redesign .chips{display:flex;gap:6px;align-items:center} .wa-redesign .chip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;background:var(--bg);border:1px solid var(--brd2);color:var(--t2);cursor:pointer} .wa-redesign .chip.on{background:var(--ac-soft);border-color:transparent;color:var(--ac-d)} .wa-redesign .chip .b{background:var(--ac);color:#fff;border-radius:10px;padding:0 6px;margin-left:5px;font-size:10.5px} .wa-redesign .funnel{position:relative;flex-shrink:0} .wa-redesign .funnel.on{background:var(--ac-soft);border-color:transparent;color:var(--ac-d)} .wa-redesign .fdot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--ac);border:2px solid var(--panel);display:none} .wa-redesign .fdot.on{display:block} .wa-redesign .filters{display:flex;gap:6px;flex-wrap:wrap} .wa-redesign .filters select{flex:1 1 100%;min-width:0;font-size:12px;padding:7px 9px;border-radius:8px;border:1px solid var(--brd2);background:var(--panel);color:var(--t2);font-family:inherit} .wa-redesign .convs{flex:1;overflow:auto} .wa-redesign .conv{display:flex;gap:10px;padding:11px 13px;border-bottom:1px solid var(--brd);cursor:pointer} .wa-redesign .conv:hover{background:var(--panel2)} .wa-redesign .conv.on{background:var(--ac-soft)} .wa-redesign .ava{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px;position:relative} .wa-redesign .ava .ch{position:absolute;bottom:-2px;right:-2px;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid var(--panel)} .wa-redesign .ch.wa{background:var(--wa);color:#fff} .wa-redesign .ch.em{background:var(--bl);color:#fff} .wa-redesign .conv .nm{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:6px;min-width:0} .wa-redesign .conv .nm .nm-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wa-redesign .conv .pv{font-size:12px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:188px;margin-top:1px} .wa-redesign .conv .meta{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap} .wa-redesign .tag{font-size:10px;font-weight:600;padding:1px 7px;border-radius:5px;white-space:nowrap} .wa-redesign .conv .tm{font-size:11px;color:var(--t3);white-space:nowrap} .wa-redesign .un{min-width:18px;height:18px;border-radius:10px;background:var(--ac);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px} .wa-redesign .convs .empty{padding:24px 16px;text-align:center;color:var(--t3);font-size:13px} /* ===== CHAT ===== */ .wa-redesign .wa-chat{display:flex;flex-direction:column;min-height:0;background:var(--panel2)} .wa-redesign .chat-head{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--brd);background:var(--panel);position:relative} .wa-redesign .chat-head .nm{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wa-redesign .chat-head .resp{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:5px} .wa-redesign .stage-sel{font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:8px;border:1px solid var(--brd2);background:var(--bg);color:var(--ac-d);cursor:pointer;font-family:inherit;max-width:230px} .wa-redesign .menu{position:absolute;top:52px;right:14px;min-width:212px;background:var(--panel);border:1px solid var(--brd2);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.16);z-index:30;overflow:hidden;display:none} .wa-redesign .menu.on{display:block} .wa-redesign .menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;color:var(--tx);font-size:13px;padding:10px 14px;cursor:pointer;font-family:inherit} .wa-redesign .menu button:hover{background:var(--panel2)} .wa-redesign .menu button.danger{color:var(--rd)} .wa-redesign .menu .sep{height:1px;background:var(--brd);margin:4px 0} .wa-redesign .bars{border-bottom:1px solid var(--brd)} .wa-redesign .autobar{display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--am-soft);font-size:12.5px;color:var(--am);border-bottom:1px solid var(--brd)} .wa-redesign .autobar .sp{flex:1} .wa-redesign .autobar a{color:var(--am);font-weight:600;cursor:pointer} .wa-redesign .aibar{background:var(--panel)} .wa-redesign .aibar .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px} .wa-redesign .aibar .lbl{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px} .wa-redesign .sw{width:34px;height:19px;border-radius:20px;background:var(--ac);position:relative;cursor:pointer;flex-shrink:0;border:0;padding:0} .wa-redesign .sw.off{background:var(--brd2)} .wa-redesign .sw::after{content:'';position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;top:2px;right:2px} .wa-redesign .sw.off::after{right:auto;left:2px} .wa-redesign .aibar select{font-size:12px;padding:4px 8px;border-radius:6px;border:1px solid var(--brd2);background:var(--bg);color:var(--tx);font-family:inherit} .wa-redesign .aibox{padding:10px 14px;background:var(--ac-soft);font-size:12.5px;border-top:1px solid var(--brd)} .wa-redesign .aibox .sug{background:var(--panel);border:1px solid var(--brd);border-radius:8px;padding:9px 11px;color:var(--tx);margin-top:6px} .wa-redesign .nivel{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--gr-soft);font-size:12.5px;color:var(--gr);font-weight:600;border-top:1px solid var(--brd)} .wa-redesign .msgs{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:11px} .wa-redesign .day{align-self:center;font-size:11px;color:var(--t3);background:var(--panel);border:1px solid var(--brd);border-radius:20px;padding:3px 11px} .wa-redesign .msg-wrap{display:flex;flex-direction:column;max-width:72%} .wa-redesign .msg-wrap.out{align-self:flex-end;align-items:flex-end} .wa-redesign .msg-wrap.in{align-self:flex-start;align-items:flex-start} .wa-redesign .msg-sender{font-size:10.5px;color:var(--t2);font-weight:700;margin:0 4px 2px} .wa-redesign .msg{padding:9px 12px;border-radius:13px;font-size:13px;box-shadow:var(--sh);word-wrap:break-word;white-space:pre-wrap} .wa-redesign .msg.in{background:var(--panel);border:1px solid var(--brd);border-bottom-left-radius:4px} .wa-redesign .msg.out{background:var(--ac);color:#fff;border-bottom-right-radius:4px} .wa-redesign .msg .mt{font-size:10.5px;opacity:.6;margin-top:4px;text-align:right} .wa-redesign .msg.note{align-self:center;background:var(--am-soft);border:1px solid var(--am);color:var(--tx);font-style:italic;max-width:88%;text-align:center} .wa-redesign .media{display:flex;align-items:center;gap:9px;font-size:13px} .wa-redesign .media .ic{width:30px;height:30px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--t2);flex-shrink:0} .wa-redesign .msg.out .media .ic{background:rgba(255,255,255,.2);color:#fff} .wa-redesign .msg img{max-width:230px;max-height:230px;border-radius:8px;display:block;cursor:pointer} .wa-redesign .msg a{color:inherit;text-decoration:underline} .wa-redesign .input{border-top:1px solid var(--brd);background:var(--panel);padding:10px 12px;position:relative} .wa-redesign .tpl-hint{position:absolute;bottom:calc(100% + 6px);left:12px;right:12px;background:var(--panel);border:1px solid var(--brd2);border-radius:var(--r);box-shadow:var(--sh);padding:6px;display:none;max-height:240px;overflow:auto;z-index:20} .wa-redesign .tpl-hint.on{display:block} .wa-redesign .tpl-hint .it{padding:7px 10px;border-radius:7px;font-size:12.5px;cursor:pointer} .wa-redesign .tpl-hint .it:hover,.wa-redesign .tpl-hint .it.act{background:var(--panel2)} .wa-redesign .input-row{display:flex;align-items:flex-end;gap:8px} .wa-redesign .input textarea{flex:1;border:1px solid var(--brd2);border-radius:var(--r);padding:10px 12px;font-family:inherit;font-size:13px;outline:none;resize:none;background:var(--bg);color:var(--tx);max-height:90px} /* estado vazio */ .wa-redesign .wa-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--t3);font-size:13px} /* ===== PAINEL LEAD ===== */ .wa-redesign .wa-lead{border-left:1px solid var(--brd);background:var(--panel);overflow:auto;padding:16px} .wa-redesign .wa-lead .co{font-weight:700;font-size:16px} .wa-redesign .wa-lead .badge{display:inline-block;font-size:11px;font-weight:600;background:var(--ac-soft);color:var(--ac-d);border-radius:6px;padding:3px 9px;margin-top:5px} .wa-redesign .wa-lead .grp{margin-top:15px} .wa-redesign .wa-lead .lbl2{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:600;margin-bottom:2px} .wa-redesign .wa-lead .val{font-size:13px;word-break:break-word} .wa-redesign .wa-lead .val a{color:var(--ac)} .wa-redesign .wa-lead select{width:100%;font-size:13px;padding:7px 9px;border-radius:8px;border:1px solid var(--brd2);background:var(--bg);color:var(--tx);font-family:inherit} .wa-redesign .wa-lead .acts{display:flex;flex-direction:column;gap:7px;margin-top:16px} .wa-redesign .wa-lead .acts .btn{justify-content:center} .wa-redesign .obs{background:var(--panel2);border:1px solid var(--brd);border-radius:var(--r);padding:10px;font-size:12px;margin-top:14px;white-space:pre-line} .wa-redesign .hist{margin-top:16px} .wa-redesign .hist h4{font-size:12px;margin:0 0 8px} .wa-redesign .hi{padding:8px 0;border-bottom:1px solid var(--brd);font-size:11.5px} .wa-redesign .hi b{font-size:12px} .wa-redesign .wa-lead .empty{padding:30px 0;text-align:center;color:var(--t3);font-size:12px} @media(max-width:1100px){ .wa-redesign .wa-wrap{grid-template-columns:280px 1fr} .wa-redesign .wa-lead{display:none} } @media(max-width:760px){ .wa-redesign .wa-wrap{grid-template-columns:1fr} .wa-redesign .wa-list{display:none} }