:root{
  --side:#161616; --side2:#262626; --sideTx:#d4d4d4; --sideMute:#9a9a9a;
  --accent:#e30613; --accent2:#fde7e8;
  --bg:#f5f6f8; --card:#fff; --tx:#1d2433; --mute:#6b7385; --line:#e4e7ec;
  --ok:#22a06b; --err:#d64545; --col:#ebedf1;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%;font-family:Inter,system-ui,sans-serif;color:var(--tx);background:var(--bg);font-size:15px}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--mute)}
.small{font-size:12px;color:var(--mute);margin:4px 0 0}

/* ---------- auth ---------- */
.screen.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(160deg,var(--side),var(--side2))}
.authCard{background:#fff;border-radius:16px;padding:28px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.authCard h2{margin:8px 0}
.authBrand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.authBrand b{font-size:18px;display:block}
.authBrand small{color:var(--mute)}
.tabs{display:flex;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:16px}
.tab{flex:1;border:0;background:none;padding:8px;border-radius:8px;font-weight:600;color:var(--mute)}
.tab.on{background:#fff;color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.form input,.fld input,.fld select,.fld textarea{border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-weight:400;background:#fff;width:100%}
.form input:focus,.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent2);border-color:var(--accent)}
.link{border:0;background:none;color:#1d5fd1;font-size:13px;padding:0}
.msgErro{color:var(--err);font-size:13px;min-height:18px;margin:12px 0 0}
.msgErro.ok{color:var(--ok)}

/* ---------- layout ---------- */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.side{width:270px;flex:none;background:var(--side);color:var(--sideTx);display:flex;flex-direction:column}
.brand{padding:16px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.logo{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.brand b{color:#fff;font-size:16px;display:block}
.brand small{color:var(--sideMute);font-size:12px}
.sideScroll{flex:1;overflow:auto;padding:8px 0 12px}
.secT{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sideMute);padding:16px 18px 6px}
.navBtn,.ch{display:flex;align-items:center;gap:10px;width:calc(100% - 16px);margin:1px 8px;padding:7px 10px;border:0;border-radius:8px;background:none;color:var(--sideTx);text-align:left}
.navBtn{font-weight:600}
.navBtn:hover,.ch:hover{background:var(--side2)}
.navBtn.on,.ch.on{background:var(--accent);color:#fff}
.ch .ic,.navBtn .ic{width:22px;text-align:center;flex:none}
.ch .nm,.navBtn .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch.unr .nm{color:#fff;font-weight:700}
.ch.unr::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.ch.on.unr::after{background:#fff}
.badge{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:1px 7px}
.navBtn.on .badge{background:#fff;color:var(--accent)}
.ch .miniAv{position:relative}
.ch .miniAv .av{width:22px;height:22px;font-size:10px}
.ch .on-dot{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:#7b879e;border:2px solid var(--side)}
.ch .on-dot.y{background:#34d399}
.meBox{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:8px;font-size:13px}
.meBox .who{flex:1;min-width:0}
.meBox .who b{color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meBox .who span{color:var(--sideMute);font-size:12px}
.iconBtn{background:none;border:0;color:var(--sideTx);font-size:16px;padding:6px;border-radius:6px}
.iconBtn:hover{background:var(--side2)}

.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;flex:none;user-select:none}
.av.sm{width:26px;height:26px;font-size:11px}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{height:60px;flex:none;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 18px}
.top h1{font-size:17px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top p{margin:0;color:var(--mute);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .t{min-width:0;flex:1}
.topActs{display:flex;gap:8px}
.menuBtn{display:none;background:none;border:0;font-size:22px;padding:4px}
.view{flex:1;display:flex;flex-direction:column;min-height:0}
.banner{display:none;padding:10px 18px;font-size:13px;background:#fff4f4;color:#8a2020;border-bottom:1px solid #f3caca}
.banner.show{display:block}

/* ---------- chat ---------- */
.pins{background:var(--accent2);border-bottom:1px solid var(--line);padding:8px 18px;font-size:13px}
.pins:empty{display:none}
.pin{display:flex;gap:8px;padding:3px 0;align-items:center}
.pin b{white-space:nowrap}
.pin span.tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgs{flex:1;overflow:auto;padding:12px 0 6px}
.empty{color:var(--mute);text-align:center;padding:60px 20px}
.empty .big{font-size:40px;margin-bottom:6px}
.day{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:12px;font-weight:600;margin:16px 18px 6px}
.day::before,.day::after{content:"";flex:1;height:1px;background:var(--line)}
.m{display:flex;gap:12px;padding:3px 18px;position:relative}
.m:hover{background:#eceef2}
.m.first{margin-top:10px}
.m .gap{width:36px;flex:none;font-size:10px;color:transparent;text-align:right;padding-top:4px}
.m:hover .gap{color:var(--mute)}
.m .body{min-width:0;flex:1}
.m .hd{display:flex;align-items:baseline;gap:8px}
.m .hd b{font-size:14px}
.m .hd time{font-size:11px;color:var(--mute)}
.m .tx{white-space:pre-wrap;word-wrap:break-word;line-height:1.45}
.m .tx a{color:#1d5fd1}
.m.pend .tx{opacity:.55}
.m.mine .hd b{color:var(--accent)}
.tag{font-size:11px;background:var(--accent2);color:var(--accent);border-radius:4px;padding:0 5px}
.acts{position:absolute;right:14px;top:-10px;display:none;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.m:hover .acts{display:flex}
.acts button{border:0;background:none;padding:4px 8px;font-size:14px}
.acts button:hover{background:var(--bg)}
.newBtn{position:sticky;bottom:8px;margin:0 auto;display:block;background:var(--accent);color:#fff;border:0;border-radius:20px;padding:6px 14px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.comp{flex:none;padding:8px 18px 16px}

.sideScroll{padding-bottom:12px}
.box{display:flex;gap:8px;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px}
.box:focus-within{border-color:var(--accent)}
.box textarea{flex:1;border:0;outline:0;resize:none;max-height:160px;min-height:24px;padding:4px 6px;background:none}
.send{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:600}
.send:disabled{opacity:.45;cursor:default}
.hint{font-size:11px;color:var(--mute);margin-top:4px}
.ro{margin:8px 18px 16px;background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:12px;text-align:center;color:var(--mute);font-size:13px}

/* ---------- anexos ---------- */
.toolBtn{border:0;background:none;font-size:18px;padding:4px 4px;border-radius:6px;flex:none;line-height:1}
.toolBtn:hover{background:var(--bg)}
.upbar{margin:0 18px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--mute)}
.upbar .prog{margin:6px 0 0}
.thumbImg{display:block;max-width:min(320px,100%);max-height:320px;border-radius:10px;margin-top:4px;cursor:zoom-in;border:1px solid var(--line);background:#fff}
.fileCard{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:4px;max-width:420px}
.fileCard .fi{font-size:26px;flex:none}
.fileCard .fn{flex:1;min-width:0}
.fileCard .fn b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fileCard .fn span{font-size:12px;color:var(--mute)}
.fileCard a.btn{text-decoration:none;color:inherit}
.msgs.dragover{outline:3px dashed var(--accent);outline-offset:-8px;background:var(--accent2)}
.viewer{max-width:96vw;width:auto;padding:12px;background:#111}
.viewer img{display:block;max-width:92vw;max-height:78vh;margin:0 auto;border-radius:8px}
.viewer .row{justify-content:center}
.viewer .btn{background:#222;color:#fff;border-color:#444}
.viewer a.btn{text-decoration:none}

/* ---------- reuniões ---------- */
.meet{background:#fff;border:1px solid var(--line);border-left:4px solid #1e88e5;border-radius:12px;padding:12px 14px;margin-top:6px;max-width:520px}
.meet.cancel{border-left-color:#9aa1ae;opacity:.75}
.meet.agora{border-left-color:var(--ok)}
.meet .mt{font-weight:700;font-size:15px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.meet .ml{font-size:13px;color:var(--mute);margin-top:4px;word-wrap:break-word}
.meet .ml a{color:#1d5fd1}
.meet .ppl{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.meet .ppl .pw{position:relative}
.meet .ppl .mk{position:absolute;right:-3px;bottom:-3px;font-size:10px;background:#fff;border-radius:50%;line-height:1}
.meet .mbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.meet .mbtns a.btn{text-decoration:none;color:inherit}
.btn.sel{background:var(--accent2);border-color:var(--accent);color:var(--accent);font-weight:600}
.pill{font-size:11px;font-weight:700;border-radius:10px;padding:1px 8px;background:var(--bg);color:var(--mute)}
.pill.g{background:#dcfce7;color:#166534}
.pill.r{background:#fee2e2;color:#991b1b}
.pplPick{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-weight:400}
.pplPick label{display:flex;align-items:center;gap:8px;padding:3px 0}
.pplPick input{width:16px;height:16px}

/* ---------- quadro ---------- */
.boardBar{display:flex;gap:8px;padding:12px 18px;flex-wrap:wrap;background:var(--card);border-bottom:1px solid var(--line)}
.boardBar input,.boardBar select{border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fff}
.boardBar input{flex:1;min-width:160px}
.board{flex:1;display:flex;gap:14px;overflow:auto;padding:16px 18px;align-items:flex-start}
.col{width:290px;flex:none;background:var(--col);border-radius:12px;display:flex;flex-direction:column;max-height:100%}
.colHd{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;font-weight:700;font-size:14px}
.colHd .cnt{background:#fff;color:var(--mute);border-radius:10px;padding:0 8px;font-size:12px;font-weight:600}
.cards{padding:2px 8px 4px;overflow:auto;min-height:20px;display:flex;flex-direction:column;gap:8px}
.col.drop .cards{background:var(--accent2);border-radius:8px}
.card{background:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 1px 2px rgba(0,0,0,.08);cursor:pointer;border-left:4px solid transparent}
.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.card.dragging{opacity:.4}
.card .tt{font-weight:600;font-size:14px;line-height:1.35;word-wrap:break-word}
.card .meta{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;font-size:12px;color:var(--mute)}
.card .meta .sp{flex:1}
.chip{display:inline-block;font-size:11px;font-weight:600;border-radius:5px;padding:1px 7px;color:#fff}
.late{color:var(--err);font-weight:600}
.prio{color:var(--err);font-weight:700}
.card.done .tt{text-decoration:line-through;color:var(--mute)}
.addCard{margin:4px 8px 10px;border:0;background:none;text-align:left;padding:8px;border-radius:8px;color:var(--mute);font-weight:600}
.addCard:hover{background:rgba(0,0,0,.05)}
.addForm{margin:4px 8px 10px;display:flex;flex-direction:column;gap:6px}
.addForm textarea{border:0;border-radius:8px;padding:8px;resize:none;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.addForm .row{display:flex;gap:6px}

/* ---------- equipe ---------- */
.teamWrap{flex:1;overflow:auto;padding:18px;max-width:820px;width:100%}
.teamWrap h3{margin:18px 0 8px;font-size:14px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.person{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;flex-wrap:wrap}
.person .info{flex:1;min-width:160px}
.person .info b{display:block}
.person .info span{font-size:13px;color:var(--mute)}
.person .acts2{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- botões / modal ---------- */
.btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 14px;font-weight:500}
.btn:hover{background:var(--bg)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.pri:hover{filter:brightness(.95)}
.btn.dan{background:#fff;border-color:#f1c0c0;color:var(--err)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.wide{width:100%;padding:11px}
.btn:disabled{opacity:.5;cursor:default}
.ov{position:fixed;inset:0;background:rgba(10,15,30,.45);display:none;align-items:flex-start;justify-content:center;z-index:30;padding:5vh 16px;overflow:auto}
.ov.show{display:flex}
.dlg{background:#fff;border-radius:14px;max-width:440px;width:100%;padding:20px}
.dlg.wide{max-width:640px}
.dlg h3{margin:0 0 10px}
.dlg p{color:var(--mute);margin:0 0 16px;font-size:14px}
.dlg .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.dlg .row .sp{flex:1}
.fld{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.titleInp{font-size:18px !important;font-weight:700 !important}
.chk{display:flex;align-items:center;gap:8px;padding:4px 0;font-weight:400}
.chk input[type=checkbox]{width:18px;height:18px;flex:none}
.chk span{flex:1}
.chk.ok span{text-decoration:line-through;color:var(--mute)}
.chk button{border:0;background:none;color:var(--mute)}
.chkAdd{display:flex;gap:6px}
.chkAdd input{flex:1}
.prog{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:6px}
.prog i{display:block;height:100%;background:var(--ok)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(80px);background:#1d2433;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;transition:transform .25s;z-index:40;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}

.scrim{display:none}
@media (max-width:760px){
  .side{position:fixed;inset:0 auto 0 0;z-index:20;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:19}
  .menuBtn{display:block}
  .m .acts{display:flex;position:static;border:0;box-shadow:none;background:none;margin-left:auto}
  .m .acts button{padding:2px 4px;font-size:12px;opacity:.6}
  .hint{display:none}
  .col{width:82vw}
  .grid2{grid-template-columns:1fr}
  .top{padding:0 12px}
}

/* ---------- status ---------- */
.on-dot{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:#9ca3af;border:2px solid var(--side)}
.on-dot.big{position:static;width:14px;height:14px;border:0;flex:none;display:inline-block}
.meBox .on-dot{border-color:var(--side)}
.stOpt,.stInfo{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.stOpt:hover{background:var(--bg)}
.stOpt.sel{border-color:var(--accent);background:var(--accent2)}
.stOpt span,.stInfo span{display:flex;flex-direction:column;flex:1}
.stOpt small,.stInfo small{color:var(--mute);font-size:12px;margin-top:2px}
.stInfo{background:var(--bg);flex-wrap:wrap}
.stInfo .btn{margin-left:26px}
.ch .on-dot{width:12px;height:12px;right:-3px;bottom:-3px}
.ch.on .on-dot{border-color:var(--accent)}

/* ---------- cargos ---------- */
.cargo{font-size:11px;font-weight:600;color:#475569;background:#eef1f5;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.m .hd .cargo{margin-left:0}
.cargoSide{display:block;font-size:11px;color:var(--sideMute);font-weight:400;line-height:1.2}
.ch.on .cargoSide{color:rgba(255,255,255,.85)}
.canaisInfo{display:block;font-size:12px;color:#64748b;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 6px}

/* ---------- ícones de canal / logo ---------- */
.chIcon{width:22px;height:22px;object-fit:contain;border-radius:5px;flex:none;background:#fff}
.chIcon.topIc{width:34px;height:34px;border-radius:8px;border:1px solid var(--line)}
.chIcon.grande,.ic.grande{width:48px;height:48px;font-size:34px;display:inline-grid;place-items:center;border-radius:10px}
.ic.topIc{font-size:24px;width:34px;text-align:center}
.logo.img{background:#fff;overflow:hidden;padding:3px}
.logo img{width:100%;height:100%;object-fit:contain}
.logo.grande{width:64px;height:64px;border-radius:14px;font-size:26px}
.secRow{display:flex;align-items:center;justify-content:space-between;padding-right:12px}
.miniBtn{border:0;background:none;color:var(--sideMute);font-size:13px;padding:2px 6px;border-radius:6px}
.miniBtn:hover{background:var(--side2);color:#fff}
.chList{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto;margin-bottom:6px}
.chRow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.chRow .ic{font-size:20px;width:24px;text-align:center}
.chRow .fn{flex:1;min-width:0}
.chRow .fn b{display:block}
.chRow .fn span{font-size:12px;color:var(--mute);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:400}
.icPrev{display:grid;place-items:center}
.paleta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.paleta .cor{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.paleta .cor.sel{box-shadow:0 0 0 3px var(--tx)}
.paleta input[type=color]{width:38px;height:32px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff}
.authBrand .logo{width:44px;height:44px}

.authLogo{display:block;width:210px;max-width:70%;margin:4px auto 0}
.authSub{text-align:center;color:var(--mute);font-size:13px;margin:6px 0 18px}
.logo.img{background:#fff}
.tag{background:var(--accent2);color:var(--accent)}
.m.mine .hd b{color:var(--accent)}
.fileCard a.btn.pri,.meet .mbtns a.btn.pri{color:#fff}
.toast{opacity:0;pointer-events:none;transition:transform .25s,opacity .25s}
.toast.show{opacity:1}

/* ---------- pop-up de mensagem ---------- */
.popups{position:fixed;top:16px;right:16px;z-index:50;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.popup{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:14px;padding:14px 14px 14px 16px;box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.05);border-left:5px solid var(--accent);cursor:pointer;animation:popIn .28s ease-out}
.popup:hover{box-shadow:0 14px 36px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.08)}
.popup.sai{animation:popOut .25s ease-in forwards}
.popTx{flex:1;min-width:0;display:flex;flex-direction:column}
.popTx b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.popTx small{font-size:12px;color:var(--accent);font-weight:600;margin-top:1px}
.popTx span{font-size:14px;color:var(--tx);margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.popIc{width:36px;height:36px;border-radius:50%;background:var(--accent2);display:grid;place-items:center;font-size:18px;flex:none}
.popX{border:0;background:none;color:var(--mute);font-size:14px;padding:2px 4px;border-radius:6px}
.popX:hover{background:var(--bg)}
@keyframes popIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes popOut{to{transform:translateX(30px);opacity:0}}
.volRow{display:flex;align-items:center;gap:10px;font-weight:400}
.volTxt{width:42px;text-align:right;color:var(--mute);font-size:13px}
.stInfo .btn{margin-left:auto}
@media (max-width:760px){.popups{top:10px;right:10px;left:10px;width:auto}}

/* ---------- WhatsApp ---------- */
.btn.whats{background:#25d366;border-color:#25d366;color:#fff;font-weight:600;text-decoration:none}
.btn.whats:hover{filter:brightness(.95);background:#25d366}
.btn.whats.feito{background:#e7f8ee;border-color:#9ee0b8;color:#15803d}
.wList{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto}
.wRow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.wRow .fn{flex:1;min-width:0}
.wRow .fn b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wRow .fn span{font-size:12px;color:var(--mute)}

/* ---------- responder / reagir / editar / menções / enquetes ---------- */
.replyBar{display:flex;align-items:center;gap:10px;background:var(--accent2);border-left:4px solid var(--accent);border-radius:10px;padding:8px 10px;margin-bottom:6px}
.replyBar .rbTx{flex:1;min-width:0;display:flex;flex-direction:column}
.replyBar small{font-weight:700;color:var(--accent);font-size:12px}
.replyBar span{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote{display:flex;flex-direction:column;border-left:3px solid var(--accent);background:rgba(0,0,0,.04);border-radius:6px;padding:4px 8px;margin:2px 0 4px;cursor:pointer;max-width:520px}
.quote b{font-size:12px;color:var(--accent)}
.quote span{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.editado{font-size:11px;color:var(--mute);margin-left:4px}
.mencao{color:var(--accent);font-weight:700;background:var(--accent2);border-radius:4px;padding:0 3px}
.m.citado{background:var(--accent2)}
.m.pisca{animation:pisca 1.6s}
@keyframes pisca{0%,60%{background:#fff3c4}100%{background:transparent}}
.reacs{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.reac{border:1px solid var(--line);background:#fff;border-radius:12px;padding:1px 8px;font-size:13px;display:inline-flex;gap:4px;align-items:center}
.reac span{font-size:12px;color:var(--mute);font-weight:600}
.reac.minha{border-color:var(--accent);background:var(--accent2)}
.reac.minha span{color:var(--accent)}
.reacPicker{position:fixed;z-index:60;display:flex;gap:2px;background:#fff;border-radius:24px;padding:4px 6px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.reacPicker button{border:0;background:none;font-size:22px;padding:4px 6px;border-radius:50%;transition:transform .1s}
.reacPicker button:hover{transform:scale(1.25);background:var(--bg)}
.mentionBox{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.12);margin-bottom:6px;padding:4px;display:flex;flex-direction:column;max-width:420px}
.mOpt{display:flex;align-items:center;gap:8px;border:0;background:none;text-align:left;padding:6px 8px;border-radius:8px;font-size:14px}
.mOpt.on,.mOpt:hover{background:var(--accent2)}
.popIc.sm{width:26px;height:26px;font-size:13px}
.av.xs{width:18px;height:18px;font-size:8px}
.poll{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;max-width:460px;display:flex;flex-direction:column;gap:6px;margin-top:2px}
.poll .pq{font-weight:700;font-size:15px}
.poll .pinfo{font-size:12px;color:var(--mute);margin-top:-4px}
.pop{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;text-align:left;overflow:hidden;min-height:38px}
.pop:hover:not(:disabled){border-color:var(--accent)}
.pop.minha{border-color:var(--accent)}
.pop .pbar{position:absolute;inset:0 auto 0 0;background:var(--accent2);z-index:0;transition:width .3s}
.pop .pt,.pop .pv,.pop .pppl{position:relative;z-index:1}
.pop .pt{flex:1;font-size:14px}
.pop .pv{font-size:12px;color:var(--mute);font-weight:600}
.pop .pppl{display:flex;gap:2px}
.poll.fechada .pop{cursor:default}
.pOps{display:flex;flex-direction:column;gap:6px}
.pOpRow{display:flex;gap:6px}
.pOpRow input{flex:1}
.m .acts button{padding:4px 7px}

/* ---------- tarefas: repetir + comentários ---------- */
.diasChips{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.diaChip{border:1px solid var(--line);background:#fff;border-radius:14px;padding:3px 9px;font-size:12px;font-weight:600;color:var(--mute)}
.diaChip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.card .rep{font-size:13px}
.cmList{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--bg);font-weight:400}
.cm{display:flex;gap:8px;align-items:flex-start}
.cmBody{flex:1;min-width:0;background:#fff;border-radius:10px;padding:6px 10px;border:1px solid var(--line)}
.cmHd{display:flex;align-items:baseline;gap:6px}
.cmHd b{font-size:13px}
.cmHd time{font-size:11px;color:var(--mute)}
.cmDel{margin-left:auto;border:0;background:none;color:var(--mute);font-size:12px;padding:0 4px}
.cmTx{font-size:14px;white-space:pre-wrap;word-wrap:break-word}
.cmTx .thumbImg{max-width:220px;max-height:220px}
.cmAdd{display:flex;gap:6px;align-items:flex-end;margin-top:6px}
.cmAdd textarea{flex:1;resize:none;min-height:38px}

/* ---------- busca ---------- */
.sRes{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:6px}
.sRes:hover{border-color:var(--accent)}
.sIc{width:26px;text-align:center;font-size:18px;flex:none}
.sMeio{flex:1;min-width:0;display:flex;flex-direction:column}
.sMeio b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sMeio b small{color:var(--mute);font-weight:500}
.sTx{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sTx mark{background:#fff1a6;color:inherit;border-radius:3px;padding:0 1px}
.sQuando{font-size:12px;color:var(--mute);white-space:nowrap;flex:none}

/* ---------- relatório ---------- */
.relPer{display:flex;gap:6px;margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.kpi small{color:var(--mute);font-size:12px;font-weight:600}
.kpi b{font-size:26px;line-height:1.2}
.kpi span{font-size:12px;color:var(--mute)}
.kpi.ruim b{color:var(--err)}
.relTab{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.relRow{display:grid;grid-template-columns:2fr 2fr 1fr 1fr 1fr 1.2fr;gap:8px;align-items:center;padding:9px 14px;border-top:1px solid var(--line);font-size:14px}
.relHd{border-top:0;background:var(--bg);font-size:12px;font-weight:700;color:var(--mute)}
.relPessoa{display:flex;align-items:center;gap:8px;min-width:0}
.relPessoa > span{display:flex;flex-direction:column;min-width:0}
.relPessoa small{font-size:11px;color:var(--mute)}
.relBarCel{position:relative;display:flex;align-items:center;gap:8px}
.relBar{display:block;height:10px;border-radius:5px;background:var(--accent);min-width:2px}
.ruim{color:var(--err);font-weight:700}
.alerta{color:#d97706;font-weight:700}
@media (max-width:760px){
  .kpis{grid-template-columns:1fr 1fr}
  .relRow{grid-template-columns:1.6fr 1fr .7fr .7fr .7fr;font-size:13px;padding:8px 10px}
  .relRow > span:nth-child(6){display:none}
}

/* ---------- modo escuro ---------- */
body.dark{--bg:#0d0f13;--card:#171a20;--tx:#e6e8ec;--mute:#9aa2b1;--line:#2a2f38;--col:#1b1f26}
body.dark{color-scheme:dark}
body.dark .card,body.dark .fileCard,body.dark .meet,body.dark .popup,body.dark .btn,body.dark .person,body.dark .chRow,
body.dark .stOpt,body.dark .poll,body.dark .pop,body.dark .reac,body.dark .reacPicker,body.dark .mentionBox,body.dark .upbar,
body.dark .box,body.dark .dlg,body.dark .authCard,body.dark .wRow,body.dark .acts,body.dark .sRes,body.dark .kpi,body.dark .relTab,
body.dark .cmBody,body.dark .diaChip,body.dark .tab.on,body.dark .colHd .cnt,body.dark .reac{background:var(--card);color:var(--tx)}
body.dark input,body.dark select,body.dark textarea,body.dark .form input,body.dark .fld input,body.dark .fld select,body.dark .fld textarea,body.dark .boardBar input,body.dark .boardBar select{background:#0f1217;color:var(--tx);border-color:var(--line)}
body.dark .top,body.dark .boardBar{background:var(--card)}
body.dark .m:hover{background:#151922}
body.dark .btn:hover,body.dark .acts button:hover,body.dark .mOpt:hover{background:#222733}
body.dark .btn.pri{background:var(--accent);color:#fff}
body.dark .btn.whats{background:#1fa855;border-color:#1fa855;color:#fff}
body.dark .btn.dan{color:#ff7b7b;border-color:#5a2a2a}
body.dark .cargo{background:#232833;color:#c4cad6}
body.dark .chip{filter:brightness(.95)}
body.dark .quote{background:rgba(255,255,255,.05)}
body.dark .sTx mark{background:#665c00;color:#fff}
body.dark .addCard:hover{background:rgba(255,255,255,.06)}
body.dark .ro,body.dark .tabs{background:#12151b}
body.dark .toast{background:#e6e8ec;color:#111}
body.dark .logo.img{background:#fff}
body.dark .m.citado{background:color-mix(in srgb,var(--accent) 14%,transparent)}
body.dark .pins,body.dark .replyBar{background:color-mix(in srgb,var(--accent) 14%,transparent)}
body.dark .mencao{background:color-mix(in srgb,var(--accent) 22%,transparent)}
body.dark .pop .pbar{background:color-mix(in srgb,var(--accent) 26%,transparent)}
body.dark .reac.minha,body.dark .btn.sel,body.dark .stOpt.sel,body.dark .mOpt.on{background:color-mix(in srgb,var(--accent) 22%,transparent)}
body.dark .chkAdd input,body.dark .chk span{color:var(--tx)}
body.dark .banner{background:#2a1215;color:#ffb4b4;border-color:#4a1d22}
body.dark .screen.center{background:linear-gradient(160deg,#0d0f13,#1b1f26)}
body.dark .empty{color:var(--mute)}

body.dark .box textarea,body.dark .cmAdd textarea{background:transparent}
body.dark .cmAdd textarea{background:#0f1217}
.editado{display:inline-block}

/* ---------- balões: minhas mensagens à direita, as dos outros à esquerda ---------- */
.m{align-items:flex-start}
.m .body{display:flex;flex-direction:column;align-items:flex-start;max-width:min(680px,78%)}
.m .hd{margin-bottom:2px}
.tx.bolha{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:7px 12px;max-width:100%;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.m:not(.first) .tx.bolha{border-radius:16px}
.m:hover{background:transparent}
.m:hover .tx.bolha{border-color:#d5d9e0}

.m.mine{flex-direction:row-reverse}
.m.mine > .av,.m.mine > .gap{display:none}
.m.mine .body{align-items:flex-end;margin-left:auto}
.m.mine .hd b,.m.mine .hd .cargo{display:none}
.m.mine .tx.bolha{background:var(--accent2);border-color:color-mix(in srgb,var(--accent) 25%,transparent);border-radius:16px 4px 16px 16px}
.m.mine:not(.first) .tx.bolha{border-radius:16px}
.m.mine .quote{background:rgba(255,255,255,.55)}
.m.mine .reacs{justify-content:flex-end}
.m.mine .acts{right:auto;left:14px}
.m.mine .editado{align-self:flex-end}
.m .gap{padding-top:9px}

body.dark .tx.bolha{background:#1b1f27;border-color:#2a2f38}
body.dark .m.mine .tx.bolha{background:color-mix(in srgb,var(--accent) 28%,#14171d);border-color:transparent}
body.dark .m.mine .quote{background:rgba(0,0,0,.2)}

@media (max-width:760px){
  .m .body{max-width:86%}
  .m.mine .acts{margin-left:0;margin-right:auto}
}