/* Caixa de entrada no estilo WhatsApp de atendimento. Usa os tokens do app, então o tema escuro vem de graça. */
.inbox-page{display:flex;height:100vh;background:var(--bg);color:var(--ink);overflow:hidden}

/* ---------- rail de atalhos ---------- */
.ib-rail{width:62px;flex:none;background:var(--white);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0 14px;position:relative;z-index:6}
.ib-rail::before{content:'';position:absolute;inset:0;background:radial-gradient(130px circle at 50% var(--ry,-200px),rgba(200,246,83,.16),transparent 70%);pointer-events:none;opacity:0;transition:opacity .3s}
.ib-rail:hover::before{opacity:1}
.ib-rail>*{position:relative;z-index:1}
.ib-rail-brand{width:38px;height:38px;border-radius:12px;background:var(--brand-gradient);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(47,138,124,.3);margin-bottom:12px;animation:ib-float 4s ease-in-out infinite}
.ib-rail-brand svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-rail-btn{width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;position:relative;padding:0;transition:background .18s,color .18s,transform .2s cubic-bezier(.2,.8,.2,1)}
.ib-rail-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ib-rail-btn:hover{background:var(--green-tint);color:var(--green-dark);transform:translateX(2px)}
.ib-rail-btn:hover svg{transform:scale(1.15) rotate(-6deg)}
.ib-rail-btn:active{transform:scale(.94)}
.ib-rail-btn.active{background:var(--green-soft);color:var(--green-dark)}
.ib-rail-btn.active::before{content:'';position:absolute;left:-11px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--brand-gradient);box-shadow:0 0 10px rgba(200,246,83,.6)}
.ib-rail-btn.danger:hover{background:var(--danger-soft);color:var(--danger)}
.ib-rail-btn::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-6px,-50%);background:var(--sidebar);color:#fff;font:600 11.5px var(--font-body);padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .2s cubic-bezier(.2,.8,.2,1);z-index:40;box-shadow:var(--shadow-md)}
.ib-rail-btn:hover::after{opacity:1;transform:translate(0,-50%)}
.ib-rail-spacer{flex:1}
/* O botão de tema e o bloco de perfil nasceram para o .topbar-dock do shell principal —
   lá o rótulo "Perfil" some e só abre em pílula ao passar o mouse. Movidos pro rail
   (inbox.js:160), nenhuma dessas regras se aplica (tudo escopado por .topbar-dock): o
   botão de perfil virava um <button> cru do navegador e o rótulo ficava solto, sempre
   visível, abaixo do avatar. Aqui os dois viram só mais um ícone do rail, com tooltip
   igual aos demais (.ib-rail-btn::after). */
.ib-rail .theme-toggle{width:40px;height:40px;margin-bottom:2px;border:0;border-radius:12px;background:transparent;box-shadow:none}
.ib-rail .theme-toggle:hover{transform:none;box-shadow:none;background:var(--green-tint);color:var(--green-dark)}
.ib-rail-profile .shell-profile-block{display:flex;border:0;padding:0}
.ib-rail-profile .profile-trigger{width:40px;height:40px;padding:0;border:0;background:none;border-radius:12px;display:grid;place-items:center;cursor:pointer;position:relative;transition:background .18s}
.ib-rail-profile .profile-trigger:hover{background:var(--green-tint)}
.ib-rail-profile .dock-label{display:none}
.ib-rail-profile .profile-trigger::after{content:'Perfil';position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-6px,-50%);background:var(--sidebar);color:#fff;font:600 11.5px var(--font-body);padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .2s cubic-bezier(.2,.8,.2,1);z-index:40;box-shadow:var(--shadow-md)}
.ib-rail-profile .profile-trigger:hover::after{opacity:1;transform:translate(0,-50%)}
.ib-rail-profile .profile-menu{left:calc(100% + 10px);right:auto;bottom:0;top:auto;transform:translateX(-6px)}
.ib-rail-profile .profile-menu.open{transform:none}
[data-theme="dark"] .ib-rail-btn.active,[data-theme="dark"] .ib-rail-btn:hover{color:var(--green-bright)}

/* ---------- grade ---------- */
/* Coluna da direita = conteúdo da aba (300px) + barra vertical de abas (64px). Só a barra: 64px. */
.inbox-grid{--side-rail:64px;--side-body:300px;flex:1;min-width:0;display:grid;grid-template-columns:330px minmax(420px,1fr) calc(var(--side-body) + var(--side-rail));height:100vh;transition:grid-template-columns .25s ease}
.inbox-grid.details-rail-only{grid-template-columns:330px minmax(420px,1fr) var(--side-rail)}
.inbox-grid.details-collapsed{grid-template-columns:330px minmax(420px,1fr) 0}
.inbox-grid.details-collapsed .ib-details{overflow:hidden;border:0;opacity:0}
.ib-list,.ib-chat,.ib-details{min-width:0;min-height:0;background:var(--white);color:var(--ink)}
.ib-list{border-right:1px solid var(--line);display:flex;flex-direction:column;position:relative}
.ib-details{border-left:1px solid var(--line);overflow:hidden;transition:opacity .2s;display:flex;flex-direction:row}
.ib-side-body{flex:1;min-width:0;overflow:auto;padding:10px;background:var(--bg);animation:ib-in .25s cubic-bezier(.2,.8,.2,1) both}
.details-rail-only .ib-side-body{display:none}
/* barra vertical de abas (Início / Cliente / Mídia / Financeiro / Suporte), à ESQUERDA do conteúdo */
.ib-side-rail{width:var(--side-rail);flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border-right:1px solid var(--line);background:var(--white)}
.ib-side-collapse{width:40px;height:40px;margin-bottom:6px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0;transition:color .15s,background .15s}
.ib-side-collapse svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-side-collapse:hover{color:var(--ink);background:var(--bg)}
.ib-side-tab{width:54px;height:58px;border:0;border-radius:14px;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:0 2px;font:600 9.5px var(--font-body);letter-spacing:.02em;transition:color .15s,background .15s,transform .15s}
.ib-side-tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.ib-side-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-side-tab:hover{color:var(--ink);background:var(--bg);transform:translateY(-1px)}
.ib-side-tab.active{color:#fff;background:var(--brand-gradient);box-shadow:0 8px 18px rgba(39,112,101,.28)}
.ib-side-tab.active:hover{color:#fff;transform:none}
/* cartões do conteúdo */
.ib-side-card{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px rgba(13,31,28,.04);overflow:hidden}
.ib-side-card+.ib-side-card{margin-top:10px}
.ib-side-card>.ib-section:last-child,.ib-side-card>.ib-customer:last-child{border-bottom:0}
/* ---------- ramal na barra lateral ---------- */
.ib-rail-phone{position:relative}
.ib-ramal-dot{position:absolute;right:6px;bottom:6px;width:9px;height:9px;border-radius:50%;background:var(--muted-2);box-shadow:0 0 0 2px var(--white)}
.ib-ramal-dot.pronto{background:#277065}
.ib-ramal-dot.conectando{background:var(--warn)}
.ib-ramal-dot.chamando,.ib-ramal-dot.recebendo,.ib-ramal-dot.falando{background:#277065;animation:ibRamalPulse 1.1s ease-in-out infinite}
.ib-ramal-dot.erro{background:var(--danger)}
.ib-ramal-dot.desligado{background:var(--muted-2)}
@keyframes ibRamalPulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.ib-ramal-dot{animation:none}}
.ib-ramal-pop{position:absolute;left:calc(100% + 10px);bottom:0;width:215px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:13px;z-index:40}
.ib-ramal-pop[hidden]{display:none}
.ib-ramal-pop h6{margin:0 0 6px;font:700 12px var(--font-body)}
.ib-ramal-pop p{margin:0 0 10px;font-size:11px;color:var(--muted);position:relative;padding-left:15px}
.ib-ramal-pop p .ib-ramal-dot{position:absolute;left:0;top:4px;right:auto;bottom:auto;box-shadow:none}
.ib-ramal-toggle{width:100%;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);font:600 11px var(--font-body);cursor:pointer}
.ib-ramal-toggle.is-on{border-color:#e6b3ad;color:#b8443d}
.ib-ramal-toggle:not(.is-on){border-color:var(--green);color:var(--green-dark)}
.ib-ramal-pop small{display:block;margin-top:8px;font-size:9.5px;color:var(--muted-2);line-height:1.5}

/* ---------- modal da chamada recebida ---------- */
/* Por cima de tudo, de propósito: quem está lendo uma conversa não olha para o painel lateral,
   e uma ligação que ninguém vê é uma ligação perdida. */
.ib-call-modal{position:fixed;inset:0;background:rgba(9,25,23,.45);display:grid;place-items:center;z-index:2000;animation:ibCallIn .18s ease-out}
.ib-call-card{background:var(--white);border-radius:18px;padding:30px 28px;width:320px;text-align:center;box-shadow:0 24px 60px rgba(9,25,23,.3)}
.ib-call-pulse{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 14px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);animation:ibCallPulse 1.4s ease-in-out infinite}
.ib-call-pulse svg{width:26px;height:26px}
.ib-call-card h3{margin:0;font:700 12px var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.9px}
.ib-call-card strong{display:block;margin:7px 0 3px;font:700 23px var(--font-display);font-variant-numeric:tabular-nums}
.ib-call-card p{margin:0 0 20px;font-size:11px;color:var(--muted)}
.ib-call-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ib-call-actions button{display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border:0;border-radius:11px;font:700 13px var(--font-body);cursor:pointer;color:#fff}
.ib-call-actions svg{width:16px;height:16px}
.ib-call-reject{background:var(--danger)}
.ib-call-accept{background:var(--green)}
@keyframes ibCallIn{from{opacity:0}to{opacity:1}}
@keyframes ibCallPulse{50%{box-shadow:0 0 0 12px rgba(39,112,101,.12)}}
@media (prefers-reduced-motion:reduce){.ib-call-modal,.ib-call-pulse{animation:none}}

/* ---------- aba Telefone ---------- */
@keyframes ibPhonePulse{50%{opacity:.35}}
/* ---------- aba Telefone: discador ---------- */
.ib-dial{padding:16px 16px 14px}
.ib-dial-head{display:flex;align-items:center;gap:10px}
.ib-dial-head>div,.ib-call-head>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ib-dial-head strong,.ib-call-head strong{font:700 14px var(--font-body);color:var(--ink)}
.ib-dial-head small,.ib-call-head small{font-size:10px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.ib-dial-logo{width:36px;height:36px;flex:none;border-radius:11px;background:var(--brand-gradient);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(47,138,124,.25)}
.ib-dial-logo svg{width:18px;height:18px}
.ib-dial-more{width:28px;height:28px;border:0;background:transparent;color:var(--muted);border-radius:8px;display:grid;place-items:center;cursor:pointer}
.ib-dial-more:hover{background:var(--green-tint);color:var(--ink)}
.ib-dial-more svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-dial-contact{display:flex;align-items:center;gap:10px;margin-top:14px;padding:9px 12px 9px 10px;border:0;border-radius:14px;background:var(--bg);width:100%;text-align:left;font:inherit;color:inherit;cursor:default}
.ib-dial-contact.is-link{cursor:pointer;transition:background .12s,transform .1s}
.ib-dial-contact.is-link:hover{background:var(--green-tint)}
.ib-dial-contact.is-link:hover .ib-dial-chev svg{stroke:var(--green-dark)}
.ib-dial-contact.is-link:active{transform:scale(.99)}
.ib-dial-avatar{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 12px var(--font-body);object-fit:cover}
.ib-dial-contact-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ib-dial-contact-text strong{font:700 13px var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-dial-contact-text small{font-size:10px;color:var(--muted);margin-top:2px}
.ib-dial-chev svg{width:14px;height:14px;stroke:var(--muted-2);fill:none;stroke-width:2}
.ib-dial-badge{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--green-soft);color:var(--green-dark);font:600 10px var(--font-body)}
.ib-dial-display{display:flex;align-items:center;gap:8px;margin-top:10px;height:52px;padding:0 8px 0 8px;border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:0 2px 8px rgba(13,31,28,.04);transition:border-color .15s,box-shadow .15s}
.ib-dial-display:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(39,112,101,.12)}
.ib-dial-country{flex:none;display:flex;align-items:center;gap:5px;height:30px;padding:0 7px 0 5px;border-radius:8px;background:var(--bg)}
.ib-dial-country svg{width:22px;height:16px;border-radius:3px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ib-dial-country b{font:700 12px var(--font-body);color:var(--body);letter-spacing:0}
.ib-dial-display input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:700 16px var(--font-display,var(--font-body));letter-spacing:0;font-variant-numeric:tabular-nums;outline:0;padding:0}
.ib-dial-display input::placeholder{color:var(--muted-2);font-weight:500;font-size:13px;letter-spacing:0}
.ib-dial-display.is-empty .ib-dial-clear{visibility:hidden}
.ib-dial-clear{width:28px;height:28px;flex:none;border:0;border-radius:50%;background:var(--line-soft);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ib-dial-clear:hover{background:var(--line);color:var(--ink)}
.ib-dial-clear svg{width:15px;height:15px}
.ib-dial-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ib-dial-pad button{height:54px;border:0;border-radius:14px;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:inset 0 0 0 1px transparent;cursor:pointer;transition:background .12s,border-color .12s,transform .1s}
.ib-dial-pad button b{font:600 20px var(--font-display,var(--font-body));line-height:1}
.ib-dial-pad button small{font:700 8px var(--font-body);letter-spacing:.14em;color:var(--muted-2);min-height:8px;line-height:1}
.ib-dial-pad button:hover{background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green)}
.ib-dial-pad button:active{transform:scale(.96);background:var(--green-soft)}
.ib-dial-call{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;height:50px;border:0;border-radius:999px;background:var(--green);color:#fff;font:700 14px var(--font-body);cursor:pointer;box-shadow:0 8px 18px rgba(39,112,101,.28);transition:background .15s,transform .1s,box-shadow .15s}
.ib-dial-call:hover{background:var(--green-dark)}
.ib-dial-call:active{transform:scale(.985)}
.ib-dial-call:disabled{background:var(--line-soft);color:var(--muted-2);box-shadow:none;cursor:default}
.ib-dial-call svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.ib-dial-foot{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ib-dial-foot>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ib-dial-foot strong{font:700 12px var(--font-body);color:var(--ink)}
.ib-dial-foot small{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.ib-dial-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--muted-2)}
.ib-dial-dot.on{background:var(--green);box-shadow:0 0 0 3px rgba(39,112,101,.18)}
.ib-dial-dot.wait{background:var(--warn);animation:ibPhonePulse 1s ease-in-out infinite}
.ib-dial-dot.off{background:var(--danger)}
.ib-dial-signal{flex:none;color:var(--muted-2)}
.ib-dial-signal.on{color:var(--ink)}
.ib-dial-signal svg{width:18px;height:18px;display:block}
.ib-dial-gear{width:28px;height:28px;flex:none;border:0;background:transparent;color:var(--muted);border-radius:8px;display:grid;place-items:center;cursor:pointer}
.ib-dial-gear:hover{background:var(--green-tint);color:var(--ink)}
.ib-dial-gear svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---------- aba Telefone: em ligação ---------- */
.ib-dial:has(.ib-call-screen){padding:0}
.ib-call-screen{position:relative;overflow:hidden;padding:14px 14px 14px}
.ib-call-screen::before{content:'';position:absolute;inset:0 0 auto;height:150px;background:linear-gradient(180deg,var(--green-soft),transparent);pointer-events:none}
.ib-call-screen.is-live::before{background:linear-gradient(180deg,rgba(47,138,124,.22),transparent)}
.ib-call-screen>*{position:relative}
.ib-call-head{display:flex;align-items:center;gap:10px}
.ib-call-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:18px}
.ib-call-ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:var(--white);box-shadow:0 0 0 6px rgba(39,112,101,.14),0 10px 26px rgba(13,31,28,.10)}
.ib-call-ring.is-pulse{animation:ibCallRing 1.6s ease-in-out infinite}
@keyframes ibCallRing{0%,100%{box-shadow:0 0 0 6px rgba(39,112,101,.14),0 10px 26px rgba(13,31,28,.10)}50%{box-shadow:0 0 0 14px rgba(39,112,101,.06),0 10px 26px rgba(13,31,28,.10)}}
.ib-call-avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 24px var(--font-body);object-fit:cover}
.ib-call-avatar svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-call-hero h3{margin:14px 0 0;font:700 16px var(--font-body);color:var(--ink)}
.ib-call-hero p{margin:4px 0 8px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ib-call-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:18px;border-radius:16px;overflow:hidden;background:var(--line);border:1px solid var(--line)}
.ib-call-ctl{height:66px;border:0;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:600 10.5px var(--font-body);cursor:pointer;transition:background .12s}
.ib-call-ctl span{width:22px;height:22px;display:grid;place-items:center;color:var(--body)}
.ib-call-ctl span svg{width:20px;height:20px}
.ib-call-ctl:hover:not(:disabled){background:var(--green-tint)}
.ib-call-ctl.is-on{background:var(--green-soft);color:var(--green-dark)}
.ib-call-ctl.is-on span{color:var(--green-dark)}
.ib-call-ctl:disabled{color:var(--muted-2);cursor:default}
.ib-call-ctl:disabled span{color:var(--muted-2)}
#callRec span{color:var(--danger)}
#callRec:disabled span{color:var(--muted-2)}
.ib-call-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.ib-call-keys button{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);font:600 15px var(--font-body);cursor:pointer}
.ib-call-keys button:hover{background:var(--green-tint);border-color:var(--green)}
.ib-call-end-row{display:flex;gap:8px;margin-top:14px}
.ib-call-end,.ib-call-answer{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border:0;border-radius:999px;color:#fff;font:700 13.5px var(--font-body);cursor:pointer;transition:filter .15s,transform .1s}
.ib-call-end{background:var(--danger);box-shadow:0 8px 18px rgba(226,87,74,.28)}
.ib-call-answer{background:var(--green);box-shadow:0 8px 18px rgba(39,112,101,.28)}
.ib-call-end:hover,.ib-call-answer:hover{filter:brightness(.94)}
.ib-call-end:active,.ib-call-answer:active{transform:scale(.985)}
.ib-call-end svg{width:18px;height:18px}
.ib-call-answer svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
@media (prefers-reduced-motion:reduce){.ib-dial-dot,.ib-call-ring{animation:none}}
.ib-side-card-title{font:700 10px var(--font-body);color:var(--muted);letter-spacing:.9px;text-transform:uppercase;margin:0;padding:14px 16px 0}
.ib-side-card .ib-side-stats{padding:12px 16px 0}
.ib-side-card>.ib-mini.wide{margin:12px 16px 16px;width:calc(100% - 32px)}
.ib-media-card .ib-media-tabs{padding-top:10px}
/* aba vazia (Financeiro / Suporte sem integração) e carregando */
.ib-side-empty{text-align:center;padding:28px 20px 24px;color:var(--muted)}
.ib-side-empty-art{width:56px;height:56px;margin:0 auto 14px;border-radius:18px;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center}
.ib-side-empty-art svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7}
.ib-side-empty h3{font:700 13.5px var(--font-body);color:var(--ink);margin:0 0 6px}
.ib-side-empty p{font-size:12px;line-height:1.5;margin:0 0 14px}
.ib-side-loading{display:flex;align-items:center;gap:8px;padding:20px 16px;font-size:12px;color:var(--muted)}
.ib-side-loading i{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:ib-spin .7s linear infinite}
/* aba Cliente: cartão-herói com faixa em degradê e foto sobreposta, campos em lista */
.ib-client-card{position:relative}
.ib-client-band{height:58px;background:var(--brand-gradient);opacity:.92}
.ib-client-band::after{content:"";position:absolute;left:0;right:0;top:0;height:58px;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.35),transparent 45%)}
.ib-client-head{display:flex;gap:12px;align-items:flex-start;padding:0 16px 12px;margin-top:-30px;position:relative}
.ib-client-photo{width:64px;height:64px;border-radius:20px;font-size:18px;flex:none;box-shadow:0 8px 20px rgba(13,31,28,.18),0 0 0 4px var(--white)}
.ib-client-id{flex:1;min-width:0;padding-top:34px}
.ib-client-id h3{font:700 14.5px var(--font-body);margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-client-id p{margin:0;font:600 12px var(--font-body);color:var(--ink);display:flex;align-items:center;gap:4px}
.ib-client-phone{display:inline-flex;align-items:center;gap:6px;margin:2px 0 0 -8px;padding:4px 8px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:600 12px var(--font-body);cursor:pointer;transition:background .15s,color .15s}
.ib-client-phone svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none}
.ib-client-phone svg:first-child{color:var(--muted)}
.ib-client-phone svg:last-child{opacity:0;transform:translateX(-2px);transition:opacity .15s,transform .15s}
.ib-client-phone:hover{background:var(--green-soft);color:var(--green-dark)}
.ib-client-phone:hover svg{color:inherit;opacity:1;transform:none}
.ib-client-id small{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}
.ib-client-line{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);cursor:text}
.ib-client-line>span{flex:none;width:62px;font:600 11px var(--font-body);color:var(--muted)}
.ib-client-line input,.ib-client-line select{flex:1;min-width:0;border:0;background:transparent;padding:0;font:600 12.5px var(--font-body);color:var(--ink);outline:0}
.ib-client-line input::placeholder{color:var(--muted-2);font-weight:500}
.ib-client-line:focus-within{background:var(--green-tint)}
.ib-client-dot{width:9px;height:9px;border-radius:50%;flex:none}
.ib-client-block{padding:10px 16px 12px;border-top:1px solid var(--line)}
.ib-client-block>span{display:block;font:600 11px var(--font-body);color:var(--muted);margin-bottom:8px}
.ib-side-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ib-side-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 9px;border-radius:999px;background:var(--green-soft);color:var(--green-dark);font:700 11px var(--font-body)}
.ib-side-tag button{width:16px;height:16px;border:0;border-radius:50%;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0;opacity:.7}
.ib-side-tag button:hover{opacity:1;background:rgba(0,0,0,.08)}
.ib-side-tag button svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.2}
.ib-side-tags input{flex:1;min-width:90px;border:1px dashed var(--line);border-radius:999px;background:transparent;padding:4px 10px;font:600 11px var(--font-body);color:var(--ink);outline:0}
.ib-side-tags input:focus{border-style:solid;border-color:var(--green)}
.ib-side-notes{width:100%;resize:vertical;border:1px dashed var(--line);border-radius:12px;background:var(--bg);padding:8px 10px;font:12px/1.5 var(--font-body);color:var(--ink);outline:0;box-sizing:border-box;transition:border-color .15s}
.ib-side-notes:focus{border-style:solid;border-color:var(--green)}
.ib-side-hint{display:block;margin-top:5px;font-size:10px;color:var(--muted-2)}
.ib-side-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ib-side-stats div{text-align:center;padding:9px 4px;border-radius:10px;background:var(--bg)}
.ib-side-stats strong{display:block;font:700 15px var(--font-display);color:var(--ink)}
.ib-side-stats small{font-size:10px;color:var(--muted);font-weight:600}

/* ---------- lista: cabeçalho, busca, filtros ---------- */
.ib-list-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 8px 16px}
.ib-list-head h2{margin:0;font:700 18px var(--font-display);letter-spacing:-.01em}
.ib-list-head>div{display:flex;gap:2px}
.ib-icon{width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0;flex:none;text-decoration:none;transition:background .15s,color .15s,transform .15s}
.ib-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ib-icon:hover:not(:disabled){background:var(--green-tint);color:var(--green-dark);transform:translateY(-1px)}
.ib-icon.active{background:var(--green-soft);color:var(--green-dark)}
.ib-icon.small{width:28px;height:28px;border-radius:8px}
.ib-icon.small svg{width:14px;height:14px}
.ib-icon:disabled{opacity:.4;cursor:not-allowed}
.ib-icon:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.ib-search-row{display:flex;gap:6px;padding:4px 14px 8px;align-items:center}
.ib-search{flex:1;min-width:0;height:40px;display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);transition:border-color .15s,box-shadow .15s,background .15s}
.ib-search:focus-within{border-color:var(--green);box-shadow:var(--glow);background:var(--white)}
.ib-search>svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.ib-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:13px var(--font-body);color:var(--ink)}
.ib-search input::placeholder{color:var(--muted-2)}
.ib-search kbd{font:600 10px var(--font-body);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap}
.ib-search .ib-icon.small{display:none}
.ib-search.has-text kbd{display:none}
.ib-search.has-text .ib-icon.small{display:grid}
.ib-chips{display:flex;flex-wrap:nowrap;gap:8px;padding:2px 16px 6px}
.ib-chips button{position:relative;flex:1;min-width:0;border:1px solid var(--line);background:var(--white);color:var(--muted);font:600 11px var(--font-body);padding:9px 6px 10px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.ib-chips button:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.ib-chips button:active{transform:scale(.97)}
.ib-chips button.active{background:var(--green-soft);color:var(--green-dark);border-color:rgba(39,112,101,.35)}
.ib-chip-label{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-chips b{position:absolute;top:6px;right:6px;background:var(--line-soft);color:var(--muted);border-radius:8px;padding:0 5px;font-size:10px;font-weight:700;line-height:16px;height:16px;min-width:16px;text-align:center;display:inline-block;font-variant-numeric:tabular-nums;flex:none}
.ib-chips button.active b{background:rgba(39,112,101,.2);color:var(--green-dark)}
.ib-chips b[hidden]{display:none}
.ib-chips b.bump{animation:ib-bump .35s cubic-bezier(.2,.8,.2,1)}
.ib-chips button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ib-list-caption{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 2px 10px;font-size:11px;color:var(--muted)}
.ib-sort{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--ink);font:600 11.5px var(--font-body);cursor:pointer;padding:5px 8px;border-radius:8px;transition:background .15s,color .15s}
.ib-sort:hover{background:var(--line-soft);color:var(--green-dark)}
.ib-sort svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#sortPop button svg{display:none}
#sortPop button.active svg{display:block;margin-left:auto;color:var(--green)}
[data-theme="dark"] .ib-chips button.active{color:var(--green-bright)}

/* ---------- lista: itens ---------- */
.ib-items-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.ib-items{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;padding-bottom:8px}
.ib-list,.ib-items-wrap{overflow-x:hidden}
.ib-item-main>*{min-width:0;max-width:100%}
.ib-item-meta>span{min-width:0}
.ib-list-indicator{position:absolute;left:0;top:0;width:3px;height:0;border-radius:3px;background:var(--brand-gradient);box-shadow:0 0 10px rgba(200,246,83,.6);opacity:0;transition:top .3s cubic-bezier(.2,.8,.2,1),height .3s,opacity .2s;z-index:2;pointer-events:none}
.ib-list-indicator.show{opacity:1}
.ib-item{--mx:50%;--my:50%;display:grid;grid-template-columns:46px minmax(0,1fr);gap:11px;padding:11px 14px;cursor:pointer;position:relative;outline:0;transition:background .15s;animation:ib-in .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(min(var(--i,0),12) * 35ms)}
.ib-item::before{content:'';position:absolute;inset:3px 8px;border-radius:12px;background:radial-gradient(170px circle at var(--mx) var(--my),rgba(200,246,83,.14),transparent 70%);opacity:0;transition:opacity .2s;pointer-events:none}
.ib-item:hover::before,.ib-item:focus-visible::before{opacity:1}
.ib-item:hover,.ib-item:focus-visible{background:var(--green-tint)}
.ib-item.active{background:linear-gradient(90deg,var(--green-soft),var(--green-tint))}
.ib-item.still,.ib-msg.still{animation:none}
.ib-item.flash{animation:ib-flash 1.2s ease-out}
.ib-item>*{position:relative}
.ib-avatar-wrap{position:relative;width:46px;height:46px;flex:none}
.ib-avatar-wrap .avatar{width:46px;height:46px;font-size:13px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ib-item:hover .avatar{transform:scale(1.06)}
.ib-dot{position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;background:#b9c4bd;border:2px solid var(--white)}
.ib-dot.on{background:var(--green);animation:ib-ping 2.2s ease-out infinite}
/* ---------- triagem: anel pulsante na foto + faixa na linha da conexão ---------- */
/* --tri vem inline como "r,g,b" (a cor que o tenant deu ao tipo de triagem) */
.ib-triage-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid rgb(var(--tri));box-shadow:0 0 0 5px rgba(var(--tri),.14);pointer-events:none}
/* a foto perde um tiquinho de escala pra o anel não encostar nela */
.ib-avatar-wrap.has-triage .avatar{transform:scale(.94)}
.ib-item:hover .ib-avatar-wrap.has-triage .avatar{transform:scale(1)}
/* conversa encerrada não pulsa: o anel fica, parado, só como histórico */
.ib-item.resolved .ib-triage-ring{animation:none;opacity:.5}
.ib-triage{display:inline-flex;align-items:center;gap:5px;max-width:48%;min-width:0;padding:4px 9px 4px 4px;border-radius:20px;
  background:rgb(var(--tri));color:#fff;box-shadow:0 3px 14px rgba(var(--tri),.25);font-size:10px;font-weight:800;line-height:18px;letter-spacing:0;text-transform:uppercase;white-space:nowrap;flex:none}
.ib-triage i{display:grid;place-items:center;width:18px;height:18px;flex:none;background:#fff;color:rgb(var(--tri));border-radius:50%;font-size:15px;font-style:normal;font-weight:800}
.ib-triage>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ib-item-top:has(.ib-triage) h3{flex:0 1 auto}
.ib-item-top:has(.ib-triage) time{margin-left:auto}
.ib-item-top .ib-triage{max-width:42%;padding:2px 7px 2px 3px;font-size:9px;line-height:16px;gap:4px}
.ib-item-top .ib-triage i{width:16px;height:16px;font-size:13px}
.ib-avatar-wrap.is-urgent .ib-triage-ring{animation:ib-urgent-pulse 1.8s ease-in-out infinite}
.ib-avatar-alert{position:absolute;right:-5px;top:-7px;z-index:2;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgb(var(--tri));color:var(--tri-ink,#fff);font:800 14px var(--font-body);animation:ib-urgent-pulse 1.8s ease-in-out infinite}
.ib-item.has-triage{margin:5px 6px;padding:16px 10px 16px 15px;border:1px solid rgba(var(--tri),.2);border-radius:8px;background:color-mix(in srgb,rgb(var(--tri)) 5%,var(--white));box-shadow:0 3px 12px rgba(var(--tri),.1)}
.ib-item.has-triage.active{background:color-mix(in srgb,rgb(var(--tri)) 11%,var(--white));border-color:rgba(var(--tri),.4)}
.ib-item.has-triage:hover,.ib-item.has-triage:focus-visible{background:color-mix(in srgb,rgb(var(--tri)) 9%,var(--white))}
.ib-item.has-triage::before{background:radial-gradient(170px circle at var(--mx) var(--my),rgba(var(--tri),.16),transparent 70%)}
.ib-item.has-triage .ib-triage{background:rgba(var(--tri),.13);color:color-mix(in srgb,rgb(var(--tri)) 65%,#18201f);border:1px solid rgba(var(--tri),.25);box-shadow:0 2px 8px rgba(var(--tri),.12);text-transform:none;font-size:10px;padding:3px 7px;gap:5px}
.ib-triage>svg{width:14px;height:14px;flex:none;padding-right:4px;border-right:1px solid currentColor;box-sizing:content-box}
[data-theme="dark"] .ib-item.has-triage .ib-triage{background:rgba(var(--tri),.18);color:color-mix(in srgb,rgb(var(--tri)) 50%,#fff);border-color:rgba(var(--tri),.4)}
@keyframes ib-urgent-pulse{0%,100%{box-shadow:0 0 0 3px rgba(var(--tri),.12);opacity:1}50%{box-shadow:0 0 0 7px rgba(var(--tri),.28);opacity:.6}}
@media(prefers-reduced-motion:reduce){.ib-avatar-wrap.is-urgent .ib-triage-ring,.ib-avatar-alert{animation:none}}
.ib-item-summary{display:flex;align-items:center;gap:10px;min-width:0}
.ib-item-summary .ib-item-preview{display:block;flex:1;min-width:0}
.ib-item.has-triage{padding-top:14px;padding-bottom:14px;align-items:center}
.ib-item.has-triage::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:rgb(var(--tri));box-shadow:0 0 10px rgba(var(--tri),.45);border-radius:8px 0 0 8px;z-index:3}
.ib-items:has(.ib-item.active.has-triage)>.ib-list-indicator{opacity:0}
.ib-item.has-triage .ib-dot.on{box-shadow:0 0 0 4px rgba(39,112,101,.18)}
/* a barrinha vertical da cor, colada antes do nome (inline pra entrar no corte das reticências) */
.ib-triage::before{content:none}
/* com a faixa presente, quem encosta na direita é ela — o resto vem logo depois */
.ib-triage~.ib-unread,.ib-triage~.ib-item-bot{margin-left:0}
/* no tema escuro o vermelho puro some no fundo; clareia o texto e reforça o fundo */
[data-theme="dark"] .ib-triage{background:rgb(var(--tri));color:#fff}
.ib-item-main{min-width:0;display:grid;gap:3px;align-content:center}
.ib-item-top{display:flex;align-items:center;gap:6px}
.ib-item-top h3{margin:0;font:700 13px var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ib-item-top time{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.ib-item.has-unread time{color:var(--green-dark);font-weight:700}
.ib-pin{display:inline-grid;place-items:center;color:var(--green-dark);flex:none}
.ib-pin svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.ib-item-preview{margin:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
/* resultado que veio do conteúdo da conversa, não do nome/telefone: mostra o trecho que casou
   com o termo destacado, pra deixar claro por que essa conversa está no resultado */
.ib-item-preview.is-match{color:var(--ink)}
.ib-item-preview mark{background:var(--green-soft);color:var(--green-dark);font-weight:600;border-radius:3px;padding:0 2px}
.ib-match-flag{display:inline-flex;flex:none;color:var(--green-dark)}
.ib-match-flag svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
[data-theme="dark"] .ib-item-preview mark{background:rgba(200,246,83,.22);color:var(--green-bright)}
.ib-item.has-unread .ib-item-preview{color:var(--ink);font-weight:600}
.ib-flag{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);flex:none}
.ib-flag svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:3}
.ib-item-meta{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);min-width:0}
.ib-item-conn,.ib-item-assignee{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-chan{display:inline-grid;place-items:center;color:#25d366;flex:none}
.ib-chan svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-unread{margin-left:auto;background:var(--brand-gradient);color:#fff;border-radius:20px;padding:2px 7px;font-size:10px;font-weight:700;box-shadow:0 2px 8px rgba(39,112,101,.4);animation:ib-bump .35s ease-out;flex:none}
.ib-item-bot{margin-left:auto;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:6px;background:var(--line-soft);color:var(--muted);flex:none}
.ib-item-bot svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-item.resolved .avatar{filter:saturate(.55)}
.ib-list-empty{text-align:center;color:var(--muted);padding:40px 20px;font-size:12.5px;line-height:1.6;display:grid;gap:10px;justify-items:center}
.ib-list-empty svg{width:28px;height:28px;stroke:var(--green);fill:none;stroke-width:1.6}
.ib-list-empty p{margin:0}
.ib-notify{position:absolute;left:12px;right:12px;top:8px;z-index:5;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--sidebar);color:#fff;font-size:12px;box-shadow:var(--shadow-lg);cursor:pointer;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.ib-notify.show{opacity:1;transform:none;pointer-events:auto}
.ib-notify svg{width:15px;height:15px;stroke:var(--green-bright);fill:none;stroke-width:2;flex:none;animation:ib-bell 1s ease-in-out 2}
.ib-notify b{color:var(--green-bright)}
.ib-list-foot{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.ib-list-foot>div{display:flex;gap:2px;align-items:center}
.ib-presence{display:inline-flex;align-items:center;gap:7px}
.ib-presence i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:ib-ping 2.2s ease-out infinite}
.ib-shortcuts{width:250px;padding:10px 12px}
.ib-shortcuts h5{margin:0 0 6px;font:700 10.5px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ib-shortcuts div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;padding:5px 0;color:var(--ink)}
.ib-shortcuts kbd,.ib-empty-keys kbd,.ib-compose-foot kbd{font:600 10px var(--font-body);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink);background:var(--bg)}
[data-theme="dark"] .ib-item.has-unread time,[data-theme="dark"] .ib-pin{color:var(--green-bright)}

/* ---------- popovers ---------- */
.ib-pop-wrap{position:relative}
.ib-pop{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;z-index:30;color:var(--ink)}
.ib-pop.open{display:block;animation:ib-pop .16s cubic-bezier(.2,.8,.2,1)}
.ib-pop.up{top:auto;bottom:calc(100% + 8px);right:auto;left:0}
.ib-pop.up.right{left:auto;right:0}
/* #sortPop ("Mais recentes") é o único popover colado na borda ESQUERDA da coluna de conversas,
   logo depois do rail estreito — o padrão right:0 (abrir pra esquerda, pensado pros popovers que
   ficam perto da borda direita) jogava a caixa de 200px pra fora da tela, por cima do rail. */
#sortPop{right:auto;left:0}
.ib-menu button{width:100%;display:flex;align-items:center;gap:9px;border:0;background:none;padding:9px 10px;border-radius:9px;font:500 12.5px var(--font-body);color:var(--ink);cursor:pointer;text-align:left;white-space:nowrap;transition:background .12s,color .12s}
.ib-menu button:hover{background:var(--green-tint);color:var(--green-dark)}
.ib-menu button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;color:var(--muted)}
.ib-menu button:hover svg{color:var(--green-dark)}
.ib-menu button.active{color:var(--green-dark);font-weight:700}
.ib-menu button span{font-size:14px;line-height:1}
.ib-menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.ib-menu-title{margin:6px 8px 2px;font:700 10px var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
/* contador do filtro: encostado na direita do item, em vez de colado no rótulo como texto solto */
.ib-menu button b{margin-left:auto;background:var(--line-soft);color:var(--muted);border-radius:8px;padding:0 6px;font-size:10px;font-weight:700;line-height:16px;min-width:16px;text-align:center;font-variant-numeric:tabular-nums;flex:none}
.ib-menu button.active b{background:rgba(39,112,101,.2);color:var(--green-dark)}
.ib-menu button b[hidden]{display:none}
.ib-filters-pop{min-width:258px;max-width:300px}
/* facetas (canal, fila, etiqueta, triagem): rótulo à esquerda, select ocupando o resto */
.ib-filter-fields{display:grid;gap:7px;padding:9px 8px 4px;margin-top:5px;border-top:1px solid var(--line)}
.ib-filter-fields[hidden]{display:none}
.ib-filter-field{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:8px;font:700 9.5px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* obrigatório: o display:grid acima venceria o [hidden] do navegador e a faceta inútil apareceria */
.ib-filter-field[hidden]{display:none}
.ib-filter-field select{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);font:500 12px var(--font-body);padding:7px 24px 7px 9px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a948e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;background-size:12px}
.ib-filter-field select:hover{border-color:var(--green)}
/* select com filtro ativo fica verde igual aos outros itens escolhidos do menu */
.ib-filter-field select:not([data-all]){border-color:rgba(39,112,101,.35);background-color:var(--green-soft);color:var(--green-dark);font-weight:700}
/* sem isto a lista nativa do select abre clara sobre texto claro no tema escuro */
[data-theme="dark"] .ib-filter-field select{color-scheme:dark}
[data-theme="dark"] .ib-filter-field select:not([data-all]){color:var(--green-bright)}
[data-theme="dark"] .ib-menu button.active b{color:var(--green-bright)}
.ib-menu #clearFilter{color:var(--muted)}
.ib-menu #clearFilter:hover{background:var(--danger-soft,rgba(220,64,64,.1));color:var(--danger,#d64545)}
.ib-menu #clearFilter:hover svg{color:var(--danger,#d64545)}
.ib-picker-pop{min-width:270px;padding:0;overflow:hidden}
.ib-picker-pop .details-tabs{padding:0 8px}
.ib-picker-pop .picker-list,.ib-picker .picker-list{max-height:260px;overflow:auto;padding:6px}
.ib-picker-pop .picker-row{font-size:12.5px;padding:8px 10px}
.ib-mini-avatar{width:26px;height:26px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:inline-grid;place-items:center;font:700 10px var(--font-body);flex:none}
.ib-mini-avatar.muted{background:var(--line-soft);color:var(--muted)}
.ib-mini-avatar svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.picker-row .ib-mini-avatar svg{margin-left:0;color:inherit}
.menu-empty{padding:12px;font-size:12px;color:var(--muted);text-align:center}
[data-theme="dark"] .ib-mini-avatar{color:var(--green-bright)}
[data-theme="dark"] .ib-menu button:hover,[data-theme="dark"] .ib-menu button:hover svg,[data-theme="dark"] .ib-menu button.active{color:var(--green-bright)}

/* ---------- conversa: cabeçalho ---------- */
.ib-chat{display:flex;flex-direction:column;background:var(--bg);border-right:1px solid var(--line)}
.ib-chat-head{position:relative;z-index:2;min-height:66px;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;background:var(--white);border-bottom:1px solid var(--line);flex:none;flex-wrap:nowrap;animation:ib-in .3s both}
.ib-identity>div{min-width:0}
.ib-identity h3{overflow:hidden;text-overflow:ellipsis}
.ib-identity{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:4px 8px 4px 4px;border-radius:12px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .15s;min-width:0}
.ib-identity:hover{background:var(--green-tint)}
.ib-identity .ib-avatar-wrap,.ib-identity .avatar{width:42px;height:42px;font-size:12px}
.ib-identity h3{margin:0 0 2px;font:700 14px var(--font-body);color:var(--ink);white-space:nowrap}
.ib-identity small{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ib-copy{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;color:var(--muted);transition:background .15s,color .15s}
.ib-copy svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.ib-copy:hover{background:var(--green-soft);color:var(--green-dark)}
.ib-pills{display:flex;gap:6px;align-items:center}
.ib-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font:700 11px var(--font-body);padding:6px 11px;border:1px solid var(--line);color:var(--muted);background:var(--white);white-space:nowrap}
.ib-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ib-pill svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.ib-pill.on{color:var(--green-dark);border-color:rgba(39,112,101,.3);background:var(--green-soft)}
.ib-pill.on i{animation:ib-ping 2.2s ease-out infinite}
.ib-pill.warn{color:var(--warn);border-color:rgba(200,133,15,.3);background:var(--warn-soft)}
.ib-pill.off{color:var(--danger);border-color:rgba(226,87,74,.3);background:var(--danger-soft)}
.ib-pill.clickable{cursor:pointer;transition:transform .15s,box-shadow .15s}
.ib-pill.clickable:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ib-head-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Fixar/Ir para o início são ações raras e ficavam espremidas junto dos botões principais, sem
   nenhum agrupamento visual — um bloco próprio deixa claro que são um par de utilidades secundárias. */
.ib-head-utils{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:12px}
.ib-resolve-btn{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--green);background:var(--green-tint);color:var(--green-dark);border-radius:10px;cursor:pointer;font:700 12.5px var(--font-body);white-space:nowrap;transition:background .15s,color .15s,border-color .15s,transform .15s}
.ib-resolve-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ib-resolve-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.ib-resolve-btn.is-resolved{border-color:var(--line);background:transparent;color:var(--body)}
.ib-assignee{display:flex;align-items:center;gap:8px;border:1px solid transparent;background:transparent;padding:4px 8px 4px 4px;border-radius:12px;cursor:pointer;text-align:left;font:inherit;color:inherit;margin-right:6px;transition:background .15s,border-color .15s}
.ib-assignee:hover{background:var(--green-tint);border-color:var(--line)}
.ib-assignee-text{display:grid;line-height:1.15}
.ib-assignee-text small{font-size:10px;color:var(--muted)}
.ib-assignee-text strong{font-size:12px;color:var(--ink);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.ib-assignee>svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;transition:transform .2s}
.ib-pop-wrap:has(#assignPop.open) .ib-assignee>svg{transform:rotate(180deg)}
.ib-more-btn{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);background:transparent;border-radius:10px;cursor:pointer;font:600 12.5px var(--font-body);color:var(--ink);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.ib-more-btn:hover{background:var(--green-tint);color:var(--green-dark);border-color:var(--green-tint)}
.ib-more-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
.ib-pop-wrap:has(#moreMenu.open) .ib-more-btn svg{transform:rotate(180deg)}
#btnPin.active{color:#e0a100;background:var(--warn-soft)}
#btnPin.active svg{fill:currentColor;animation:ib-star .5s cubic-bezier(.2,.8,.2,1)}
.ib-chat-head .ib-icon:hover svg{transform:scale(1.12)}
[data-theme="dark"] .ib-pill.on{color:var(--green-bright)}
[data-theme="dark"] .ib-pill.warn{color:#ffd27a}
[data-theme="dark"] .ib-pill.off{color:#ff9c92}

/* ---------- conversa: mensagens ---------- */
.ib-body-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.ib-body{flex:1;overflow:auto;padding:18px 26px 12px;background:radial-gradient(600px 300px at 90% 0%,rgba(200,246,83,.08),transparent 70%),var(--bg);scroll-behavior:smooth;display:flex;flex-direction:column}
.ib-messages-inner{margin-top:auto;display:flex;flex-direction:column}
[data-theme="dark"] .ib-body{background:radial-gradient(700px 400px at 80% 0%,rgba(18,61,55,.55),transparent 65%),#081513}
.ib-day{text-align:center;margin:6px 0 16px;position:sticky;top:0;z-index:2}
.ib-day span{display:inline-block;background:var(--white);border:1px solid var(--line);color:var(--muted);padding:5px 12px;border-radius:20px;font:600 10.5px var(--font-body);box-shadow:var(--shadow-xs)}
.ib-msg{position:relative;max-width:66%;margin-bottom:8px;animation:ib-msg .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(max(var(--i,0),0) * 30ms)}
.ib-msg.received{margin-right:auto}
.ib-msg.sent{margin-left:auto}
.ib-msg.note{max-width:78%;margin-right:auto}
.ib-bubble{position:relative;padding:9px 12px 8px;border-radius:14px 14px 14px 4px;background:var(--white);border:1px solid var(--line);color:var(--ink);font-size:13.5px;line-height:1.5;word-break:break-word;box-shadow:var(--shadow-xs);transition:transform .15s,box-shadow .15s}
.ib-msg.sent .ib-bubble{background:#def6f2;border-color:#e8fabb;border-radius:14px 14px 4px 14px}
[data-theme="dark"] .ib-msg.sent .ib-bubble{background:#154840;border-color:#1c5f55;color:#e4f1ef}
.ib-msg:hover .ib-bubble{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ib-msg.failed .ib-bubble{background:var(--danger-soft);border-color:rgba(226,87,74,.3)}
.ib-msg.optimistic .ib-bubble{opacity:.75}
.ib-time{float:right;margin:7px -2px -2px 10px;padding:2px 5px;border-radius:8px;background:rgba(19,26,25,.05);font-size:10.5px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;line-height:1}
[data-theme="dark"] .ib-time{background:rgba(255,255,255,.06)}
.ib-msg.sent .ib-time{background:rgba(34,119,106,.12)}
.ib-tick{font-style:normal;display:inline-flex;align-items:center;color:var(--muted)}
.ib-tick svg{width:14px;height:10px;flex:none}
.ib-tick.read{color:#1f9cf0}
.ib-tick.pending svg{width:11px;height:11px;animation:ib-blink 1.2s infinite}
.ib-tick.failed{color:var(--danger)}
.ib-tick.failed svg{width:11px;height:11px}
.ib-msg-error{display:block;color:var(--danger);font-size:10.5px;margin-top:3px;text-align:right}
.ib-msg-type{color:var(--muted);font-style:italic}
/* Ficava num carimbo flutuando 14px ACIMA do balão (position:absolute relativo ao .ib-msg, fora
   da própria mensagem) — em mensagens coladas ele saía por cima da mensagem anterior, parecendo
   quebrado. Agora é filho do próprio .ib-bubble, então "fora da mensagem" não existe mais: fica
   sempre contido dentro do cantinho superior do balão que representa. */
.ib-msg-tools{position:absolute;top:5px;right:5px;display:flex;gap:1px;padding:2px;border-radius:999px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);opacity:0;transform:translateY(-2px);transition:opacity .15s,transform .15s;z-index:3}
.ib-msg.sent .ib-msg-tools{background:#ecfaf8}
[data-theme="dark"] .ib-msg.sent .ib-msg-tools{background:#113b35}
.ib-msg:hover .ib-msg-tools,.ib-msg:focus-within .ib-msg-tools{opacity:1;transform:none}
.ib-msg-tools button{width:22px;height:22px;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .12s,color .12s}
.ib-msg-tools button:hover{background:var(--green-soft);color:var(--green-dark)}
.ib-msg-tools svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}
/* mídia */
.ib-msg.media .ib-bubble{padding:8px}
.ib-audio{display:flex;align-items:center;gap:10px;min-width:250px;padding:2px 4px}
.ib-audio .avatar.small{width:34px;height:34px;font-size:11px}
.ib-play{width:34px;height:34px;border-radius:50%;border:0;background:var(--green);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;padding:0;box-shadow:0 4px 12px rgba(39,112,101,.35);transition:transform .15s}
.ib-play:hover{transform:scale(1.08)}
.ib-play svg{width:14px;height:14px;margin-left:2px}
.ib-play.playing{animation:ib-ping 1s ease-out 2}
.ib-wave{display:flex;align-items:center;gap:2px;height:26px;flex:1}
.ib-wave i{width:3px;border-radius:2px;background:var(--muted-2);opacity:.8;transition:background .3s}
.ib-play.playing~.ib-wave i{background:var(--green)}
.ib-audio-label{font-size:11px;color:var(--muted);flex:none}
.ib-audio audio{height:32px;max-width:240px}
.ib-video{display:block;max-width:300px;max-height:320px;border-radius:10px;background:#000}
.ib-sticker{display:block;width:140px;height:140px;object-fit:contain}
.ib-presence.live i{background:var(--green-bright);box-shadow:0 0 0 0 rgba(200,246,83,.6)}
.ib-image{display:block;border:0;padding:0;margin:0;background:none;border-radius:10px;overflow:hidden;cursor:pointer}
.ib-image img{display:block;max-width:280px;max-height:280px;object-fit:cover}
.ib-caption{margin:6px 4px 0;font-size:13px}

/* ---------- popup de imagem em tela cheia ---------- */
.ib-lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(11,28,25,.86);backdrop-filter:blur(2px);animation:ib-lightbox-in .15s ease-out}
@keyframes ib-lightbox-in{from{opacity:0}to{opacity:1}}
.ib-lightbox-close{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.ib-lightbox-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-lightbox-close:hover{background:rgba(0,0,0,.55)}

/* ---------- visualizador de mídia (imagem com zoom, PDF, vídeo, áudio, outros) ---------- */
/* place-items:center da regra acima (do lightbox antigo, de um filho só) fazia a área da mídia
   encolher até a altura do conteúdo em vez de ocupar a linha 1fr — e aí o PDF, que pede
   height:100%, virava uma faixa fina. Com stretch a barra e o palco preenchem suas linhas; quem
   centraliza a mídia é o place-items:center do próprio .ib-viewer-stage. */
/* minmax(0,1fr), não 1fr: uma linha 1fr tem mínimo automático do tamanho do conteúdo, então uma
   foto de 1600px de altura esticava a linha além da tela e o max-height:100% da imagem não tinha
   contra o que se medir — a foto passava do rodapé, cortada. */
.ib-lightbox{grid-template-rows:auto minmax(0,1fr);place-items:stretch}
.ib-viewer-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;width:100%;color:#fff}
.ib-viewer-name{flex:1;min-width:0;font:600 13px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.ib-viewer-zoom{display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px}
.ib-viewer-zoom button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#fff;font:600 16px var(--font-body);cursor:pointer;display:grid;place-items:center}
.ib-viewer-zoom button[data-zoom="reset"]{width:auto;padding:0 10px;font-size:11px;border-radius:999px}
.ib-viewer-zoom button:hover{background:rgba(255,255,255,.18)}
.ib-viewer-level{min-width:46px;text-align:center;font:600 11.5px var(--font-body);opacity:.85}
.ib-lightbox-action{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;text-decoration:none}
.ib-lightbox-action svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-lightbox-action:hover{background:rgba(0,0,0,.55)}
/* flex, não grid: num container grid com place-items:center o max-height:100% da mídia não tem
   contra o que se medir (a área do grid é dimensionada pelo conteúdo, dá referência circular) e a
   foto passava do rodapé. Medido: mesma foto dava 1100x1467 num palco de 747px com grid, e
   547x729 com flex. */
.ib-viewer-stage{display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:0 18px 18px;overflow:hidden}
.ib-viewer-stage.zoomed{cursor:grab}
.ib-viewer-stage.zoomed img{cursor:grab}
.ib-viewer-stage.zoomed img:active{cursor:grabbing}
.ib-lightbox img{max-width:min(92vw,1100px);max-height:100%;object-fit:contain;border-radius:8px;box-shadow:var(--shadow-lg);transition:transform .08s linear;transform-origin:center center;user-select:none;-webkit-user-drag:none}
.ib-lightbox iframe{width:min(92vw,1100px);height:100%;border:0;border-radius:8px;background:#fff;box-shadow:var(--shadow-lg)}
.ib-lightbox video{max-width:min(92vw,1100px);max-height:100%;border-radius:8px;box-shadow:var(--shadow-lg);background:#000}
.ib-viewer-audio,.ib-viewer-file{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--white);color:var(--ink);border-radius:14px;padding:26px 30px;max-width:min(92vw,420px);text-align:center;box-shadow:var(--shadow-lg)}
.ib-viewer-audio svg,.ib-viewer-file svg{width:34px;height:34px;stroke:var(--green-dark);fill:none;stroke-width:1.6}
.ib-viewer-audio strong,.ib-viewer-file strong{font:600 14px var(--font-body);word-break:break-word}
.ib-viewer-file p{margin:0;font:12.5px var(--font-body);color:var(--muted);line-height:1.5}
.ib-viewer-file .primary{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.ib-viewer-file .primary svg{width:16px;height:16px;stroke:currentColor}

/* balão clicável: documento/arquivo agora abre o visualizador, não só baixa */
.ib-file.openable{cursor:pointer;transition:border-color .15s,background .15s}
.ib-file.openable:hover{border-color:var(--green)}
.ib-sticker-btn{border:0;background:none;padding:0;cursor:zoom-in}

/* evento que não é mídia (apagada, não suportada, sistema) — antes virava cartão de "Mídia" vazio */
.ib-system-msg{display:flex;align-items:center;gap:7px;font:italic 12.5px var(--font-body);color:var(--muted);padding:2px 0}
.ib-system-msg svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}

/* ---------- reação colada no balão ---------- */
.ib-reactions{position:absolute;bottom:-8px;right:8px;display:flex;z-index:2}
.ib-msg.received .ib-reactions{right:auto;left:8px}
.ib-reaction-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;
  border-radius:999px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-xs);font-size:12px;
}
/* ---------- reação antiga que ainda é uma "mensagem" própria (histórico) ---------- */
.ib-legacy-reaction{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);padding:2px 0}
.ib-legacy-reaction span{font-style:italic}
/* Formatação do WhatsApp renderizada de verdade (ver formatWhatsappText em inbox.js) — negrito e
   itálico já vêm de <strong>/<em>, só o monospace precisa de fonte e fundo próprios. */
.ib-bubble code,.ib-caption code,.ib-note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  background:rgba(127,127,127,.14);border-radius:4px;padding:1px 5px;
}
.ib-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line);min-width:220px}
.ib-file-icon{width:36px;height:36px;border-radius:9px;background:var(--white);border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;flex:none}
.ib-file-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-file.image .ib-file-icon,.ib-file.video .ib-file-icon{color:#7c6cf0}
.ib-file.document .ib-file-icon{color:#1f8fd6}
.ib-file.location .ib-file-icon{color:var(--danger)}
.ib-file.sticker .ib-file-icon,.ib-file.reaction .ib-file-icon{color:var(--warn)}
.ib-file>div{min-width:0;flex:1}
.ib-file strong{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-file small{font-size:10.5px;color:var(--muted)}
/* nota interna */
.ib-note{background:#fff8e1;border:1px solid #f3e2a5;border-left:3px solid #e0a100;border-radius:12px;padding:10px 12px;color:#5b4a12;box-shadow:var(--shadow-xs)}
[data-theme="dark"] .ib-note{background:rgba(224,161,0,.12);border-color:rgba(224,161,0,.35);border-left-color:#e0a100;color:#f3e2a5}
.ib-note-head{display:flex;align-items:center;gap:6px;font:700 11px var(--font-body);color:#a67600;margin-bottom:5px}
[data-theme="dark"] .ib-note-head{color:#ffd27a}
.ib-note-head span{font-weight:500;opacity:.8}
.ib-note-head svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* selo "modelo aprovado da Meta" dentro da bolha (ver messageMarkup) — mesma linguagem visual do
   cabeçalho de nota interna acima, só que na cor da marca em vez de âmbar. */
.ib-template-badge{display:flex;align-items:center;gap:5px;font:700 10px var(--font-body);color:var(--green-dark);margin-bottom:5px}
[data-theme="dark"] .ib-template-badge{color:var(--green-bright)}
.ib-template-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.ib-note p{margin:0;font-size:13px;line-height:1.5}
.ib-note small{display:block;margin-top:6px;font-size:10px;opacity:.75}
.ib-messages-empty{margin:auto;text-align:center;color:var(--muted);font-size:13px;padding:40px;display:grid;gap:10px;justify-items:center}
.ib-messages-empty span{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--green-soft);color:var(--green-dark)}
.ib-messages-empty svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-jump{position:absolute;right:22px;bottom:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--green-dark);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:4}
.ib-jump.show{opacity:1;transform:none;pointer-events:auto}
.ib-jump svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.ib-jump b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--brand-gradient);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.ib-jump b[hidden]{display:none}
[data-theme="dark"] .ib-jump,[data-theme="dark"] .ib-messages-empty span{color:var(--green-bright)}

/* aviso de "ninguém atendendo" pra quem tem perfil de atendente — some assim que a
   conversa ganha um responsável (ou clicando aqui, ou simplesmente respondendo: o
   backend também assume sozinho quando chega a primeira mensagem sem dono) */
.ib-claim-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--warn-soft);border-top:1px solid var(--line);font:600 12.5px var(--font-body);color:var(--warn)}
.ib-claim-bar span{display:flex;align-items:center;gap:8px}
.ib-claim-bar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.ib-claim-bar .primary{height:32px;padding:0 14px;font-size:12px;white-space:nowrap}

/* ---------- conversa: compositor ---------- */
.ib-compose{flex:none;background:var(--white);border-top:1px solid var(--line);padding:10px 16px 10px}
/* Com o painel de detalhes recolhido, o composer encosta na borda direita e o balão do chat interno (.ic-widget, 52px + 20px de margem) cobriria o "enviar" e o "Conectado via". Reserva espaço para ficarem lado a lado. */
.inbox-grid.details-collapsed .ib-compose{padding-right:88px}
.ib-quick{display:flex;gap:6px;align-items:center;padding:2px 0 12px}
.ib-quick-scroll{display:flex;gap:8px;align-items:center;overflow-x:auto;overflow-y:visible;min-width:0;scrollbar-width:none;padding:3px 10px 5px 3px;margin:-3px -10px -5px -3px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 3px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 3px,#000 calc(100% - 16px),transparent 100%)}
.ib-quick-scroll::-webkit-scrollbar{display:none}
.ib-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:var(--bg);color:var(--body);font:600 11.5px var(--font-body);padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;flex:none;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.ib-chip span{font-size:13px;line-height:1}
.ib-chip:hover:not(:disabled){border-color:var(--green);background:var(--green-tint);color:var(--green-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ib-chip:active:not(:disabled){transform:scale(.97)}
.ib-chip:disabled{opacity:.45;cursor:not-allowed}
.ib-chip.more{padding:8px 11px;background:var(--bg)}
.ib-chip.more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
[data-theme="dark"] .ib-chip{background:rgba(255,255,255,.06)}
[data-theme="dark"] .ib-chip.more{background:rgba(255,255,255,.06)}
.ib-composer{position:relative;display:flex;align-items:flex-end;gap:2px;border:1.5px solid var(--line);border-radius:16px;padding:5px 6px 5px 6px;background:var(--white);transition:border-color .15s,box-shadow .15s,background .2s}
.ib-composer:focus-within{border-color:var(--green);box-shadow:var(--glow)}
.ib-composer.flash{animation:ib-flash-border .8s ease-out}
.ib-composer.note{background:#fff8e1;border-color:#e0a100}
.ib-composer.note:focus-within{box-shadow:0 0 0 4px rgba(224,161,0,.18)}
[data-theme="dark"] .ib-composer.note{background:rgba(224,161,0,.12)}
.ib-composer textarea{flex:1;min-width:0;border:0;resize:none;outline:0;min-height:38px;max-height:160px;padding:10px 6px;font:13.5px/1.5 var(--font-body);color:var(--ink);background:transparent;caret-color:var(--green)}
.ib-composer textarea::placeholder{color:var(--muted-2)}
.ib-tool{height:38px;min-width:38px;padding:0 8px;border:0;border-radius:11px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:600 12px var(--font-body);flex:none;transition:background .15s,color .15s,transform .15s}
.ib-tool:hover:not(:disabled){background:var(--green-tint);color:var(--green-dark)}
.ib-tool:disabled{opacity:.4;cursor:not-allowed}
.ib-tool svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.ib-tool.labeled{border:1px solid var(--line);border-radius:999px;padding:0 12px;height:34px;align-self:center;margin:0 4px}
.ib-tool.labeled svg{width:15px;height:15px}
.ib-pop-wrap:has(#plusMenu.open) #plusButton svg{transform:rotate(45deg)}
.ib-note-badge{display:none;align-items:center;gap:6px;align-self:center;font:700 11px var(--font-body);color:#a67600;background:#fff1c2;border-radius:999px;padding:5px 6px 5px 10px;white-space:nowrap;margin-left:4px}
.ib-composer.note .ib-note-badge{display:inline-flex;animation:ib-pop .2s}
.ib-note-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.ib-note-badge button{width:18px;height:18px;border:0;border-radius:50%;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
.ib-note-badge button:hover{background:rgba(0,0,0,.08)}
.ib-count{align-self:center;font-size:11px;color:var(--warn);font-variant-numeric:tabular-nums;margin:0 4px}
.ib-send-group{display:flex;align-items:center;gap:0;flex:none;align-self:center}
.ib-send{width:38px;height:38px;border-radius:12px;border:0;background:var(--line-soft);color:var(--muted);display:grid;place-items:center;cursor:pointer;position:relative;padding:0;transition:transform .15s,background .2s,color .2s,box-shadow .2s}
.ib-send.ready{background:var(--brand-gradient);color:#fff;box-shadow:0 6px 16px rgba(39,112,101,.4)}
.ib-send.ready:hover:not(:disabled){transform:translateY(-1px) scale(1.05)}
.ib-send:disabled{opacity:.4;cursor:not-allowed}
.ib-send svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;transition:transform .2s}
.ib-send.ready:hover svg{transform:translate(2px,-2px)}
.ib-send.fly svg{animation:ib-fly .55s cubic-bezier(.2,.8,.2,1)}
.ib-send-spinner{display:none;position:absolute;inset:8px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:ib-spin .7s linear infinite}
.ib-send.sending .ib-send-spinner{display:block}
.ib-send.sending svg{opacity:0}
.ib-composer.note .ib-send{background:#e0a100;color:#fff;box-shadow:0 6px 16px rgba(224,161,0,.35)}
.ib-send-more{width:22px;height:38px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:8px;padding:0;transition:background .15s,color .15s}
.ib-send-more:hover:not(:disabled){background:var(--green-tint);color:var(--green-dark)}
.ib-send-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.ib-send-more:disabled{opacity:.4;cursor:not-allowed}
.ib-compose-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.ib-via{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.ib-via svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-via.on{color:#2c9988}
.ib-via.off{color:var(--danger)}
.ib-emoji{width:268px;display:none;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px}
.ib-emoji.open{display:grid}
.ib-emoji button{border:0;background:transparent;font-size:20px;line-height:1;padding:5px;border-radius:8px;cursor:pointer;transition:background .12s,transform .12s}
.ib-emoji button:hover{background:var(--green-soft);transform:scale(1.2)}
.ib-templates{width:330px;padding:8px}
.ib-templates input{width:100%;height:36px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:12.5px var(--font-body);background:var(--bg);color:var(--ink);outline:0;margin-bottom:6px}
.ib-templates input:focus{border-color:var(--green);box-shadow:var(--glow)}
.ib-template-list{max-height:260px;overflow-y:auto;overflow-x:hidden;display:grid;gap:2px;scrollbar-width:thin}
.ib-template-list button{width:100%;min-width:0;display:flex;gap:10px;align-items:flex-start;border:0;background:none;padding:8px 10px;border-radius:10px;cursor:pointer;text-align:left;transition:background .12s}
.ib-template-list button:hover{background:var(--green-tint)}
.ib-template-list button[hidden]{display:none}
.ib-template-list button>span:first-child{font-size:16px;line-height:1.2;flex:none}
.ib-template-list button>span:last-child{min-width:0}
.ib-template-list strong{display:block;font:700 12px var(--font-body);color:var(--ink)}
.ib-template-list small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;color:var(--muted);line-height:1.4;word-break:break-word}
.ib-template-empty{margin:0;padding:14px 10px;text-align:center;font-size:11.5px;color:var(--muted)}
/* "/" digitado no composer — mesma caixa visual de .ib-templates, só ancorada no próprio campo
   (.ib-composer já é position:relative) em vez de um botão .ib-pop-wrap. */
#slashPopover{width:min(360px,100%)}
[data-theme="dark"] .ib-chip:hover:not(:disabled),[data-theme="dark"] .ib-tool:hover:not(:disabled){color:var(--green-bright)}

/* ---------- detalhes ---------- */
.ib-details-title{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;font:700 12.5px var(--font-body)}
.ib-customer{text-align:center;padding:22px 15px 16px;border-bottom:1px solid var(--line)}
.ib-customer .avatar{width:68px;height:68px;margin:auto;font-size:19px;box-shadow:0 10px 26px rgba(13,31,28,.15),0 0 0 6px var(--green-tint)}
.ib-customer h3{font:700 14px var(--font-body);margin:12px 0 3px}
.ib-customer p{font-size:11px;color:var(--muted);margin:0}
.ib-customer-actions{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.ib-mini{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:600 11.5px var(--font-body);cursor:pointer;transition:border-color .15s,color .15s,background .15s,transform .15s}
.ib-mini:hover{border-color:var(--green);color:var(--green-dark);background:var(--green-tint);transform:translateY(-1px)}
.ib-mini svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.ib-mini.wide{width:100%;justify-content:center;margin-top:8px;height:34px}
/* ---------- detalhes: mídia, links e docs (igual ao WhatsApp) ---------- */
.ib-media-section{padding:12px 16px 14px}
.ib-media-head{width:100%;display:flex;align-items:center;gap:10px;padding:6px 0;border:0;background:transparent;cursor:pointer;text-align:left;color:var(--ink);border-radius:10px;transition:background .15s}
.ib-media-head:hover:not(:disabled){background:var(--bg)}
.ib-media-head:disabled{cursor:default}
.ib-media-head-icon{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--green-soft);color:var(--green-dark)}
.ib-media-head-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-media-head-text{flex:1;min-width:0;font:600 13px var(--font-body)}
.ib-media-head b{font:600 12px var(--font-body);color:var(--muted)}
.ib-media-head>svg{width:15px;height:15px;stroke:var(--muted-2);fill:none;stroke-width:2;flex:none}
.ib-media-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.ib-media-tile{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:10px;overflow:hidden;background:var(--bg);cursor:zoom-in;box-shadow:inset 0 0 0 1px var(--line)}
.ib-media-tile img,.ib-media-tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.ib-media-tile:hover img,.ib-media-tile:hover video{transform:scale(1.04)}
.ib-media-tile.is-video{cursor:pointer}
.ib-media-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:linear-gradient(transparent 40%,rgba(0,0,0,.35));pointer-events:none}
.ib-media-play svg{width:22px;height:22px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.ib-media-broken{display:none;position:absolute;inset:0;place-items:center;color:var(--muted-2)}
.ib-media-broken svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.ib-media-tile.is-broken img{display:none}
.ib-media-tile.is-broken .ib-media-broken{display:grid}
.ib-media-empty{margin:8px 0 0;font-size:11.5px;color:var(--muted-2);line-height:1.5}
/* tela cheia (no lugar do painel): abas + grade ou lista */
.ib-details-title-text{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-media-tabs{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ib-media-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--muted);font:600 12px var(--font-body);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ib-media-tabs button:hover{border-color:var(--green);color:var(--green-dark)}
.ib-media-tabs button.active{background:var(--green-soft);border-color:transparent;color:var(--green-dark)}
.ib-media-tabs button b{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bg);color:var(--muted);font:700 10px var(--font-body);display:grid;place-items:center}
.ib-media-tabs button.active b{background:var(--green);color:#fff}
.ib-media-body{padding:12px 16px 20px}
.ib-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ib-media-list{display:flex;flex-direction:column;gap:6px}
.ib-media-row{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.ib-media-row:hover{border-color:var(--green);background:var(--green-tint)}
.ib-media-row-icon{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--bg);color:var(--green-dark)}
.ib-media-row-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-media-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ib-media-row-text strong{font:600 12.5px var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-media-row-text small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-media-row time{flex:none;font-size:10.5px;color:var(--muted-2)}
.ib-media-row .ib-icon{width:30px;height:30px;flex:none}
[data-theme="dark"] .ib-media-tile{background:rgba(255,255,255,.05)}
[data-theme="dark"] .ib-media-tabs button,[data-theme="dark"] .ib-media-row{background:rgba(255,255,255,.04)}
[data-theme="dark"] .ib-media-tabs button.active{background:rgba(200,246,83,.16)}
[data-theme="dark"] .ib-media-row-icon,[data-theme="dark"] .ib-media-tabs button b{background:rgba(255,255,255,.08)}

.ib-section{padding:16px;border-bottom:1px solid var(--line)}
.ib-section h4{font:700 10px var(--font-body);color:var(--muted);letter-spacing:.9px;text-transform:uppercase;margin:0 0 10px}
.ib-row{display:flex;gap:10px;margin:10px 0;align-items:flex-start}
.ib-row svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;margin-top:1px;flex:none}
.ib-row div{font-size:12px;flex:1;min-width:0}
.ib-row small{display:block;color:var(--muted);font-size:10px;margin-bottom:2px;font-weight:600}
.ib-row strong{font-weight:600;word-break:break-word}

/* ---------- vazio ---------- */
.ib-empty{margin:auto;text-align:center;padding:30px;color:var(--muted);max-width:380px}
.ib-empty-art{position:relative;width:96px;height:96px;margin:0 auto 14px}
.ib-empty-art span{position:absolute;inset:12px;border-radius:26px;background:var(--brand-gradient);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px rgba(39,112,101,.35);animation:ib-float 4s ease-in-out infinite}
.ib-empty-art span svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-empty-art i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--green);opacity:0;animation:ib-ripple 3s ease-out infinite}
.ib-empty-art i:nth-child(3){animation-delay:1s}
.ib-empty-art i:nth-child(4){animation-delay:2s}
.ib-empty h2{font:700 17px var(--font-display);color:var(--ink);margin:0 0 6px}
.ib-empty p{font-size:12.5px;margin:0}
.ib-empty-keys{display:flex;gap:14px;justify-content:center;margin-top:16px;font-size:11px;flex-wrap:wrap}

/* ---------- animações ---------- */
@keyframes ib-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ib-msg{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ib-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ib-bump{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes ib-ping{0%{box-shadow:0 0 0 0 rgba(39,112,101,.5)}100%{box-shadow:0 0 0 8px rgba(39,112,101,0)}}
@keyframes ib-triage-ping{0%{box-shadow:0 0 0 0 rgba(var(--tri),.45)}70%{box-shadow:0 0 0 7px rgba(var(--tri),0)}100%{box-shadow:0 0 0 0 rgba(var(--tri),0)}}
@keyframes ib-flash{0%{background:rgba(200,246,83,.35)}100%{background:transparent}}
@keyframes ib-flash-border{0%{box-shadow:0 0 0 0 rgba(39,112,101,.5)}100%{box-shadow:0 0 0 10px rgba(39,112,101,0)}}
@keyframes ib-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes ib-ripple{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.4);opacity:0}}
@keyframes ib-blink{50%{opacity:.35}}
@keyframes ib-spin{to{transform:rotate(360deg)}}
@keyframes ib-fly{0%{transform:none}40%{transform:translate(16px,-16px) scale(.5);opacity:0}41%{transform:translate(-12px,12px) scale(.5);opacity:0}100%{transform:none;opacity:1}}
@keyframes ib-star{0%{transform:scale(.6) rotate(-30deg)}60%{transform:scale(1.3) rotate(10deg)}100%{transform:none}}
@keyframes ib-bell{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}

/* ---------- responsivo ---------- */
.back-to-list{display:none}
@media(max-width:1250px){.inbox-grid{--side-body:260px;grid-template-columns:300px minmax(0,1fr) calc(var(--side-body) + var(--side-rail))}.inbox-grid.details-rail-only{grid-template-columns:300px minmax(0,1fr) var(--side-rail)}.inbox-grid.details-collapsed{grid-template-columns:300px minmax(0,1fr) 0}}
@media(max-width:1100px){.inbox-grid,.inbox-grid.details-rail-only,.inbox-grid.details-collapsed{grid-template-columns:300px minmax(0,1fr) 0}.inbox-grid .ib-details{display:none}}
@media(max-width:900px){
  .inbox-grid,.inbox-grid.details-collapsed{grid-template-columns:1fr}
  .inbox-grid .ib-chat{display:none}
  .inbox-grid.chat-open .ib-list{display:none}
  .inbox-grid.chat-open .ib-chat{display:flex}
  .back-to-list{display:grid}
  .ib-rail{width:52px}
  .ib-msg{max-width:84%}
  .ib-pills,.ib-assignee-text{display:none}
  .ib-resolve-btn span{display:none}
  .ib-resolve-btn{padding:0;width:34px;justify-content:center}
  .ib-compose-foot span:first-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ib-msg,.ib-item,.ib-chip,.ib-rail-btn,.ib-unread,.ib-dot.on,.ib-triage-ring,.ib-pill.on i,.ib-presence i,.ib-rail-brand,.ib-empty-art span,.ib-empty-art i,.ib-pop.open,.ib-send.fly svg,.ib-notify svg,.ib-chat-head,.ib-chips b.bump,.ib-item.flash,#btnPin.active svg{animation:none}
  .ib-body{scroll-behavior:auto}
}

/* rail: separador antes do espaçador que empurra tema/perfil/sair pro rodapé */
.ib-rail-sep{width:26px;height:1px;background:var(--line);margin:6px 0;flex:none}

/* busca de contato existente no modal "Nova conversa" (openNewConversation) — renderiza dentro
   de um .modal-backdrop.sheet .modal, sempre claro mesmo com o tema escuro ativo, então usa os
   tokens globais de :root (--ink/--muted/--line), nunca os --dash-*. Mesmas classes/regras de
   contacts.css — os dois arquivos nunca conflitam porque contacts.css só carrega na tela de
   Contatos, e lá as regras são idênticas. */
.ct-contact-picker{position:relative}
.ct-contact-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);max-height:220px;overflow-y:auto;z-index:5}
.ct-contact-result{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:transparent;cursor:pointer;font-size:12.5px;color:var(--ink)}
.ct-contact-result:hover{background:rgba(200,246,83,.1)}
.ct-contact-result small{display:block;color:var(--muted);font-size:10.5px;margin-top:1px}
.ct-contact-chosen{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.ct-contact-chosen button{border:0;background:transparent;color:var(--muted);cursor:pointer}

/* app Agenda (conector Feegow) na barra lateral — campos presos em .ib-sched para uma regra genérica de input não vencer */
.ib-sched{padding-bottom:64px} /* folga para o botão flutuante do chat não cobrir o último agendamento */
.ib-sched .ib-sched-search{display:flex;align-items:flex-end;gap:8px;padding:12px 16px 14px}
.ib-sched .ib-sched-search label{flex:1;min-width:0}
.ib-sched label>span{display:block;font:600 11px var(--font-body);color:var(--muted);margin-bottom:5px}
.ib-sched input[type=text],.ib-sched select,.ib-sched textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;background:var(--white);padding:0 10px;height:34px;font:600 12.5px var(--font-body);color:var(--ink);outline:0;transition:border-color .15s,box-shadow .15s}
.ib-sched textarea{height:auto;min-height:52px;padding:8px 10px;resize:vertical;font-weight:500}
.ib-sched input[type=text]:focus,.ib-sched select:focus,.ib-sched textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.ib-sched .ib-sched-search .ib-mini{height:34px}
.ib-sched-msg{display:flex;gap:8px;align-items:flex-start;margin:0 16px 14px;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.45}
.ib-sched-msg.error{background:var(--danger-soft);color:var(--danger)}
.ib-sched-msg svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.ib-sched-patient{display:flex;align-items:center;gap:10px;margin:0 16px;padding:10px 12px;border-radius:12px;background:var(--green-tint)}
.ib-sched-avatar{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--green);color:#fff;font:700 13px var(--font-body)}
.ib-sched-patient>div{min-width:0}
.ib-sched-patient strong{display:block;font:700 13px var(--font-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-sched-patient small{font-size:11px;color:var(--muted)}
.ib-sched-range{display:flex;justify-content:space-between;align-items:center;margin:16px 16px 8px;font:700 10px var(--font-body);color:var(--muted);letter-spacing:.6px;text-transform:uppercase}
.ib-sched-range b{font-size:10px;color:var(--green-dark);background:var(--green-soft);padding:2px 8px;border-radius:999px;letter-spacing:0;text-transform:none}
.ib-sched-day{margin:0 12px 10px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ib-sched-day>header{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;background:var(--line-soft);font-size:11.5px}
.ib-sched-day>header b{font:700 11.5px var(--font-body);color:var(--ink)}
.ib-sched-day>header span{font:600 10.5px var(--font-body);color:var(--green-dark)}
.ib-sched-item{display:flex;gap:10px;padding:10px 12px}
.ib-sched-item+.ib-sched-item{border-top:1px solid var(--line)}
.ib-sched-item.cancelling{background:var(--danger-soft)}
.ib-sched-item time{flex:none;width:42px;font:700 13px var(--font-body);color:var(--green-dark);padding-top:1px}
.ib-sched-info{flex:1;min-width:0}
.ib-sched-info h5{margin:0 0 2px;font:700 12.5px var(--font-body);color:var(--ink)}
.ib-sched-info p{margin:0 0 6px;font-size:11px;color:var(--muted);line-height:1.4}
.ib-sched-status{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font:700 10px var(--font-body);background:var(--line-soft);color:var(--muted)}
.ib-sched-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ib-sched-status.ok{background:var(--green-soft);color:var(--green-dark)}
.ib-sched-status.warn{background:var(--warn-soft);color:var(--warn)}
.ib-sched-actions{display:flex;gap:6px;margin-top:8px}
.ib-sched-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font:600 11px var(--font-body);cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.ib-sched-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}
.ib-sched-btn:not([disabled]):hover{border-color:var(--green);color:var(--green-dark);background:var(--green-tint)}
.ib-sched-btn.danger:not([disabled]):hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.ib-sched-btn.danger.solid:not([disabled]){background:var(--danger);border-color:var(--danger);color:#fff}
.ib-sched-btn[disabled]{opacity:.45;cursor:not-allowed}
.ib-sched-cancel{display:grid;gap:8px;margin-top:8px}
.ib-sched-toggle{display:flex;align-items:center;gap:6px;margin:4px 16px 0;padding:6px 0;border:0;background:none;color:var(--muted);font:600 11.5px var(--font-body);cursor:pointer}
.ib-sched-toggle:hover{color:var(--green-dark)}
.ib-sched-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.ib-sched-past{list-style:none;margin:4px 12px 0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ib-sched-past li{display:grid;gap:1px;padding:8px 12px;font-size:11px;color:var(--muted)}
.ib-sched-past li+li{border-top:1px solid var(--line)}
.ib-sched-past b{font:600 11.5px var(--font-body);color:var(--ink);opacity:.7}
.ib-sched-past em{font-style:normal;font-size:10.5px}

/* selo do canal no topo à esquerda da foto — cor da marca de cada canal, no lugar do ícone verde
   único que fazia conversa de Instagram parecer WhatsApp */
/* Selo do canal é o próprio logo do app (SVG já colorido), sem disco branco, borda ou fundo por baixo. */
.ib-chan-badge{position:absolute;left:-2px;top:-2px;display:grid;place-items:center;width:18px;height:18px;background:transparent;border:0;box-shadow:none}
.ib-chan-badge svg{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(13,31,28,.25))}
.ib-avatar-wrap.has-triage .ib-chan-badge{left:-4px;top:-4px}

/* ---------- ligações ----------
   Duas telas: o histórico na aba Telefone e a linha da ligação dentro da conversa. Ficam
   juntos aqui porque compartilham a seta de sentido e as cores de atendida/perdida. */
.ib-call-log{margin-top:10px;padding:14px 16px 12px}
.ib-clog-head{display:flex;align-items:center;gap:10px}
.ib-clog-head>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ib-clog-head strong{font:700 13px var(--font-body);color:var(--ink)}
.ib-clog-head small{font-size:10.5px;color:var(--muted);margin-top:2px}
.ib-clog-logo{width:32px;height:32px;flex:none;border-radius:10px;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center}
.ib-clog-logo svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}
.ib-clog-chip{flex:none;min-width:24px;height:22px;padding:0 8px;border-radius:999px;background:var(--bg);color:var(--ink);font:700 11px var(--font-body);display:grid;place-items:center;font-variant-numeric:tabular-nums}
.ib-clog-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-top:12px;padding:16px 12px;border-radius:12px;background:var(--bg)}
.ib-clog-empty span{width:34px;height:34px;border-radius:50%;background:var(--white);color:var(--muted-2);display:grid;place-items:center;margin-bottom:4px;box-shadow:0 1px 3px rgba(13,31,28,.06)}
.ib-clog-empty span svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib-clog-empty strong{font:700 12px var(--font-body);color:var(--ink)}
.ib-clog-empty small{font-size:10.5px;color:var(--muted);line-height:1.45;max-width:220px}
.ib-call-log .is-missed{color:var(--danger)}
.ib-call-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.ib-call-list li{display:flex;align-items:center;gap:10px;padding:8px 8px;margin:0 -8px;border-radius:10px}
.ib-call-dur{flex:none;font:600 10.5px var(--font-body);color:var(--muted);font-variant-numeric:tabular-nums}
.ib-call-list li:hover{background:var(--green-tint)}
.ib-call-main{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.ib-call-main strong{font:600 12px var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-call-main small{font:400 10.5px var(--font-body);color:var(--muted-2)}
.ib-call-arrow{
  width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:14px;line-height:1;background:var(--green-soft);color:var(--green-dark);
}
.ib-call-arrow.in{background:var(--green-tint);color:var(--green)}
/* Perdida é vermelha independente do sentido: é a linha que a pessoa precisa achar de relance. */
.ib-call-list li.perdida .ib-call-arrow{background:var(--danger-soft);color:var(--danger)}
.ib-call-list li.perdida .ib-call-main small{color:var(--danger)}

/* A ligação na conversa não é um balão: é uma faixa centrada, como um marco na linha do tempo.
   Balão sugeriria que alguém escreveu aquilo. */
.ib-call-msg{display:flex;justify-content:center;margin:6px 0}
.ib-call-strip{
  display:flex;align-items:center;gap:9px;max-width:min(420px,88%);
  padding:7px 13px 7px 8px;border:1px solid var(--line);border-radius:999px;background:var(--white);
}
.ib-call-strip p{margin:0;font:500 11.5px var(--font-body);color:var(--muted)}
.ib-call-strip small{font:400 10px var(--font-body);color:var(--muted-2);flex:none}
.ib-call-msg.missed .ib-call-strip{border-color:var(--danger);background:var(--danger-soft)}
.ib-call-msg.missed .ib-call-strip p{color:var(--danger)}
[data-theme="dark"] .ib-call-strip{background:rgba(255,255,255,.04)}

/* ---------- disponibilidade para atender ----------
   Vizinho do botão do ramal na barra e com a mesma linguagem visual (bolinha de estado,
   popover que abre ao lado), porque para quem usa a pergunta é a mesma: estou de pé ou não?
   Os dois estados são separados de propósito — dá para atender no chat sem querer receber
   ligação. */
.ib-rail-duty{position:relative}
.ib-duty-dot{
  position:absolute;right:6px;bottom:6px;width:9px;height:9px;border-radius:50%;
  background:var(--muted-2);box-shadow:0 0 0 2px var(--white);
}
.ib-duty-dot.disponivel{background:#277065}
.ib-duty-dot.pausa{background:var(--warn)}
.ib-duty-dot.offline{background:var(--muted-2)}
/* No popover a bolinha fica na linha do texto, não presa ao canto do botão. */
.ib-duty-pop .ib-duty-dot{position:static;display:inline-block;margin-right:6px;box-shadow:none}

/* Quantas esperam na fila. Fica no próprio botão porque a informação só serve para provocar
   uma decisão ali mesmo: "tem gente esperando, fico disponível". */
.ib-duty-queue{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--danger);color:#fff;
  font:700 9.5px var(--font-body);line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--white);
}
.ib-duty-opts{display:flex;flex-direction:column;gap:4px;margin:9px 0 7px}
.ib-duty-opts button{
  width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--white);color:var(--ink);font:600 11.5px var(--font-body);
  text-align:left;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast);
}
.ib-duty-opts button:hover{border-color:var(--green);background:var(--green-tint)}
.ib-duty-opts button.is-on{border-color:var(--green);background:var(--green-tint);color:var(--green)}
[data-theme="dark"] .ib-duty-opts button{background:rgba(255,255,255,.04)}
@media (prefers-reduced-motion:reduce){.ib-duty-opts button{transition:none}}

/* ---------- gravação de voz ----------
   Gravando, o microfone fica vermelho e pulsa. É o único aviso de que a aba está ouvindo além
   da bolinha do navegador, que nem todo mundo repara — e o mesmo botão é o que encerra. */
.ib-tool.is-recording { color: var(--danger); animation: ibRecPulse 1.2s ease-in-out infinite; }
@keyframes ibRecPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .ib-tool.is-recording { animation: none; background: var(--danger-soft); border-radius: 8px; }
}

/* A linha do ramal dentro do popover de disponibilidade. É informação, não um segundo
   interruptor — por isso texto discreto, e não um botão como as três opções acima. */
.ib-duty-pop .ib-duty-line {
  display: flex; align-items: center; gap: 7px; margin: 6px 0 0;
  font: 500 11px var(--font-body); color: var(--muted);
}
.ib-duty-pop .ib-duty-line .ib-ramal-dot { position: static; flex: none; box-shadow: none; }