/* =========================================================================
   Disparador · visual claro estilo WhatsApp, pensado primeiro para o celular
   ========================================================================= */
:root{
  --bg:#f0f2f5; --surface:#ffffff; --surface-2:#f5f6f6; --surface-3:#e9edef;
  --border:#e9edef; --border-2:#d1d7db;
  --text:#111b21; --muted:#667781;
  --brand:#00a884; --brand-2:#008069; --brand-3:#005c4b; --accent:#25d366; --brand-soft:#d8fdd2;
  --danger:#d9254a; --warn:#b26b00; --info:#027eb5;
  --chat-bg:#efeae2; --bubble-in:#ffffff; --bubble-out:#d9fdd3;
  --shadow:0 1px .5px rgba(11,20,26,.13); --shadow-2:0 2px 12px rgba(11,20,26,.14);
  --radius:12px; --topbar-h:56px; --tabbar-h:62px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.5; -webkit-tap-highlight-color:transparent;
}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6rem; line-height:1.25}
[hidden]{display:none !important}
button{font-family:inherit}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:.8rem; height:var(--topbar-h); padding:0 1rem;
  background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:700; color:var(--text); font-size:1.05rem}
.brand:hover{text-decoration:none}
.brand-ico{width:30px; height:30px; border-radius:8px}
.dot{width:11px; height:11px; border-radius:50%; background:var(--brand); box-shadow:0 0 8px rgba(0,168,132,.55)}
.topbar-user{margin-left:auto; display:flex; align-items:center; gap:.6rem}
.uname{color:var(--muted); font-size:.9rem; display:inline-flex; align-items:center; gap:.35rem}

/* ---------- shell / menu lateral (computador) ---------- */
.shell{display:flex; min-height:calc(100vh - var(--topbar-h))}
.sidebar{
  width:220px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  padding:.7rem .55rem; display:flex; flex-direction:column; gap:.15rem;
}
.sidebar a{position:relative; display:flex; align-items:center; gap:.7rem; padding:.62rem .8rem; border-radius:10px; color:var(--text); font-weight:500}
.sidebar a:hover{background:var(--surface-2); text-decoration:none}
.sidebar a.active{background:#e7f6f2; color:var(--brand-3); font-weight:600}
.ico{width:1.4rem; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}

/* ---------- ícones desenhados (View::icon / inbox.js) ---------- */
.i{width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}
.i-lg{width:26px; height:26px}
.i-sm{width:17px; height:17px}
.i-xs{width:15px; height:15px}
.h-ico{display:flex; align-items:center; gap:.45rem}
.btn-primary .i,.btn-ghost .i,.btn-danger .i{width:18px; height:18px}
.nav-badge{
  margin-left:auto; background:var(--accent); color:#fff; border-radius:999px; font-size:.7rem; font-weight:700;
  padding:.05rem .42rem; min-width:20px; text-align:center; line-height:1.5;
}
.content{flex:1; min-width:0; padding:1.4rem clamp(1rem,3vw,2rem); max-width:1100px; margin:0 auto; width:100%}
.page-title{font-size:1.4rem}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem; margin-bottom:1.4rem}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.2rem; box-shadow:var(--shadow)}
.card-num{font-size:1.7rem; font-weight:700}
.card-lbl{color:var(--muted); font-size:.85rem}

/* ---------- painéis / tabelas ---------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; margin-bottom:1.2rem; box-shadow:var(--shadow)}
.steps{margin:.4rem 0 0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.4rem}
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:.65rem .75rem; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; background:var(--surface-2)}
.table-wrap{overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}

/* ---------- formulários ---------- */
label{display:block; margin-bottom:.9rem; font-size:.9rem; color:var(--muted)}
input,select,textarea{
  width:100%; margin-top:.3rem; padding:.62rem .75rem; background:#fff;
  border:1px solid var(--border-2); border-radius:10px; color:var(--text); font-size:.95rem; font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,168,132,.15)}
textarea{min-height:120px; resize:vertical}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem}
.hint{color:var(--muted); font-size:.8rem; margin-top:-.5rem}

/* ---------- botões ---------- */
.btn-primary,.btn-ghost,.btn-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem 1.05rem; border-radius:999px;
  font-weight:600; cursor:pointer; border:1px solid transparent; font-size:.92rem; min-height:40px;
}
.btn-primary{background:var(--brand-2); color:#fff; border-color:var(--brand-2)}
.btn-primary:hover{background:var(--brand-3); text-decoration:none}
.btn-ghost{background:#fff; color:var(--text); border-color:var(--border-2)}
.btn-ghost:hover{background:var(--surface-2); text-decoration:none}
.btn-danger{background:#fff; color:var(--danger); border-color:#f3a6b5}
.btn-danger:hover{background:#fdf1f3; text-decoration:none}
.btn-block{width:100%}
.btn-sm{padding:.35rem .8rem; font-size:.85rem; min-height:34px}
button:disabled,.btn-primary[disabled]{opacity:.55; cursor:not-allowed}
.icon-btn{
  width:42px; height:42px; border-radius:50%; border:0; background:transparent; font-size:1.15rem; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted);
}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn.spin{animation:spin 1s linear infinite}

/* ---------- etiquetas ---------- */
.badge{display:inline-block; padding:.15rem .6rem; border-radius:999px; font-size:.78rem; font-weight:600}
.badge-ok{background:var(--brand-soft); color:#065f46}
.badge-off{background:#eef0f2; color:#54656f}
.badge-warn{background:#fff1d6; color:#8a5300}
.badge-err{background:#fde8ec; color:#b3002d}

/* ---------- avisos ---------- */
.flash{padding:.75rem 1rem; border-radius:10px; margin-bottom:1rem; font-size:.92rem}
.flash-ok{background:#e7f8ef; color:#065f46; border:1px solid #b7ebcf}
.flash-err{background:#fde8ec; color:#9f1239; border:1px solid #f7c3cf}
.flash-info{background:#e6f3fa; color:#075985; border:1px solid #bfe0f2}
.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px); transform:translateX(-50%); z-index:95;
  background:#111b21; color:#fff; padding:.65rem 1rem; border-radius:10px; font-size:.88rem; max-width:calc(100% - 32px); box-shadow:var(--shadow-2);
}

/* ---------- login ---------- */
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh; min-height:100dvh; padding:1rem;
  background:linear-gradient(180deg,var(--brand-2) 0,var(--brand-2) 230px,var(--bg) 230px);
}
.login-card{width:100%; max-width:380px; background:#fff; border-radius:16px; padding:2rem; box-shadow:var(--shadow-2)}
.login-brand{display:flex; align-items:center; gap:.65rem; font-size:1.35rem; font-weight:700}
.login-brand img{width:46px; height:46px; border-radius:12px}
.login-sub{color:var(--muted); margin:.3rem 0 1.4rem}

/* ---------- barra de baixo + folha "Mais" (celular) ---------- */
.tabbar{display:none}
.sheet{position:fixed; inset:0; z-index:90}
.sheet-backdrop{position:absolute; inset:0; background:rgba(11,20,26,.45); opacity:0; transition:opacity .2s}
.sheet-panel{
  position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:18px 18px 0 0;
  padding:.4rem .6rem calc(.8rem + var(--safe-b)); transform:translateY(100%); transition:transform .2s ease;
  max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-2);
}
.sheet.open .sheet-backdrop{opacity:1}
.sheet.open .sheet-panel{transform:none}
.sheet-grab{width:40px; height:4px; border-radius:4px; background:var(--border-2); margin:.4rem auto .7rem}
.sheet-item{
  display:flex; align-items:center; gap:.9rem; width:100%; padding:.85rem .8rem; border-radius:12px;
  color:var(--text); font-size:1rem; background:none; border:0; text-align:left; cursor:pointer;
}
.sheet-item:hover{background:var(--surface-2); text-decoration:none}
.sheet-item.danger{color:var(--danger)}
.sheet-tip{margin:.3rem .8rem .6rem; padding:.75rem .85rem; background:var(--bg); border-radius:10px; font-size:.88rem; color:var(--muted)}
.sheet-tip .i{vertical-align:-3px}
.sheet-item .i{color:var(--muted)}
.sheet-item.danger .i{color:var(--danger)}

/* ---------- perfil do número ---------- */
.back-link{margin:-.4rem 0 .9rem}
.back-link a{display:inline-flex; align-items:center; gap:.3rem; font-weight:600}
.profile{max-width:640px}
.profile-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.7rem}
.profile-pic{width:128px; height:128px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-2); background:var(--surface-3)}
.profile-ident{color:var(--muted); font-size:.92rem; line-height:1.6}
.profile-ident strong{color:var(--text)}
.photo-actions{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center}
.photo-actions form{margin:0}
.btn-file{position:relative; overflow:hidden; margin:0; color:var(--text)}
.btn-file input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0}
.profile-form h2{font-size:1.05rem; margin:1.5rem 0 .8rem; color:var(--brand-3)}
.label-hint{color:var(--muted); font-weight:400; font-size:.8rem}
.hours{display:flex; flex-direction:column; gap:.45rem; margin-bottom:.8rem}
.hour-row{display:grid; grid-template-columns:5.4rem minmax(0,1fr); gap:.45rem .6rem; align-items:center; background:var(--bg); padding:.55rem .7rem; border-radius:12px}
.hour-row > *{min-width:0}
.hour-row select,.hour-row input{margin:0}
.hour-day{font-weight:600; font-size:.92rem}
.hour-times{grid-column:1 / -1; display:flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.85rem}
.hour-times input{flex:1 1 0; min-width:0; width:100%; padding:.5rem .55rem}
.hour-row:not([data-mode="specific_hours"]) .hour-times{display:none}
@media (min-width:640px){
  .hour-row{grid-template-columns:6rem 12rem minmax(0,1fr)}
  .hour-times{grid-column:auto}
}

/* ---------- tutorial de instalação do app ---------- */
.install-panel{padding:.4rem 1.1rem calc(1.1rem + var(--safe-b))}
.install-head{display:flex; gap:1rem; align-items:center; margin:.3rem 0 1rem}
.install-ico{width:64px; height:64px; border-radius:16px; box-shadow:var(--shadow-2); flex-shrink:0}
.install-head h2{font-size:1.2rem; margin:0 0 .2rem}
.install-head p{margin:0; color:var(--muted); font-size:.9rem; line-height:1.45}
.install-steps{list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:.55rem; counter-reset:passo}
.install-steps li{display:flex; align-items:center; gap:.75rem; padding:.7rem .8rem; background:var(--bg); border-radius:14px; font-size:.95rem; line-height:1.4; counter-increment:passo}
.install-steps li::before{
  content:counter(passo); width:24px; height:24px; border-radius:50%; background:var(--brand-2); color:#fff;
  font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.install-steps small{color:var(--muted); font-size:.82rem}
.step-ico{width:38px; height:38px; border-radius:11px; background:#fff; color:var(--info); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow)}
.install-actions{display:flex; flex-direction:column; gap:.5rem}
.push-ico{width:64px; height:64px; border-radius:16px; background:var(--brand-soft); color:var(--brand-3); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.push-ico .i{width:32px; height:32px}
.push-ico.danger-ico{background:#fde8ec; color:var(--danger)}
.ib-delete{color:var(--muted)}
.ib-delete:hover{color:var(--danger); background:#fdf1f3}
.push-status{margin:0 0 1rem; padding:.75rem .85rem; background:var(--bg); border-radius:12px; font-size:.9rem; color:var(--text)}

/* =========================================================================
   Conversas (caixa de entrada com várias contas)
   ========================================================================= */
.inbox{background:var(--surface)}
.ib-side{display:flex; flex-direction:column; min-height:0; background:var(--surface)}
.ib-side-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.85rem .9rem .35rem 1rem}
.ib-side-head h1{font-size:1.4rem; margin:0; color:var(--brand-2); font-weight:700}
.ib-search{position:relative; padding:.15rem 1rem .55rem}
.ib-search-ico{position:absolute; left:1.8rem; top:calc(50% - .2rem); transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none}
.ib-search input{margin:0; border-radius:999px; background:var(--bg); border:1px solid transparent; padding:.6rem 1rem .6rem 2.65rem}
.ib-search input:focus{background:#fff; border-color:var(--brand); box-shadow:none}

/* seletor de contas */
.ib-accounts{display:flex; gap:.5rem; overflow-x:auto; padding:.1rem 1rem .7rem; scrollbar-width:none; border-bottom:1px solid var(--border); flex-shrink:0}
.ib-accounts::-webkit-scrollbar{display:none}
.acct{
  position:relative; display:flex; align-items:center; gap:.5rem; flex-shrink:0; max-width:240px; text-align:left;
  padding:.3rem .8rem .3rem .3rem; border-radius:999px; border:1px solid var(--border-2); background:var(--surface);
  cursor:pointer; color:var(--text); transition:background .15s,border-color .15s;
}
.acct:hover{background:var(--surface-2)}
.acct.active{background:var(--brand-soft); border-color:#9fe3b3}
.acct-ico{position:relative; flex-shrink:0; display:flex}
.acct .avatar{width:34px; height:34px; font-size:.78rem}
.avatar.acct-all{background:var(--brand-2)}
.avatar.acct-all .i{width:18px; height:18px; color:#fff}
.avatar .avatar-ico{width:62%; height:62%; color:rgba(255,255,255,.95); margin-top:12%}
.acct-dot{position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; border:2px solid #fff; background:#9aa6ad}
.acct-dot.on{background:var(--accent)}
.acct-dot.wait{background:#f5a623}
.acct-txt{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.acct-name{font-weight:600; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acct-sub{font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acct-badge{background:var(--accent); color:#fff; border-radius:999px; font-size:.68rem; font-weight:700; padding:.05rem .4rem; min-width:19px; text-align:center}

/* lista */
.ib-list{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; transition:opacity .15s}
.ib-list.loading{opacity:.5}
.ib-item{position:relative; display:flex; gap:.8rem; align-items:center; padding:.62rem 1rem; color:var(--text)}
.ib-item::after{content:""; position:absolute; left:76px; right:0; bottom:0; border-bottom:1px solid var(--border)}
.ib-item:hover{background:var(--surface-2); text-decoration:none}
.ib-item.active{background:var(--surface-3)}
.avatar{
  position:relative; overflow:hidden;
  width:48px; height:48px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem; color:#fff; letter-spacing:.02em; user-select:none;
}
.avatar > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ib-item-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:.08rem}
.ib-item-top,.ib-item-bottom{display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.ib-item-top{justify-content:flex-start; gap:.4rem}
.ib-item-name{font-weight:600; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.ib-item-time{font-size:.74rem; color:var(--muted); flex-shrink:0; margin-left:auto; padding-left:.3rem}
/* etiqueta da loja ao lado do nome (filtro "Todas") */
.acct-pill{
  flex-shrink:0; max-width:46%; padding:.05rem .5rem; border-radius:999px; font-size:.68rem; font-weight:700; line-height:1.6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:color-mix(in srgb, var(--c) 72%, #000); background:color-mix(in srgb, var(--c) 14%, #fff); border:1px solid color-mix(in srgb, var(--c) 32%, #fff);
}
.ib-thread-name{display:flex; align-items:center; gap:.45rem; min-width:0}
.ib-thread-name > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.ib-item.unread .ib-item-time{color:#1fa855; font-weight:600}
.ib-item-prev{color:var(--muted); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ib-item.unread .ib-item-prev{color:var(--text); font-weight:500}
.tick{display:inline-flex; color:#8696a0; vertical-align:-3px; margin-right:.2rem}
.tick.read{color:#53bdeb}
.bubble .tick{margin:0 0 0 .2rem; vertical-align:-3px}
.prev-ico{color:var(--muted); margin-right:.25rem; vertical-align:-3px}
.ib-badge{background:var(--accent); color:#fff; border-radius:999px; font-size:.72rem; font-weight:700; padding:.05rem .45rem; min-width:20px; text-align:center; flex-shrink:0}
.ib-item-acct{display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--muted); margin-top:.1rem}
.ib-item-acct i{width:8px; height:8px; border-radius:50%; display:inline-block}
.ib-empty{padding:2.5rem 1.5rem; text-align:center; color:var(--muted); line-height:1.7}

/* conversa aberta */
.ib-thread{display:flex; flex-direction:column; min-height:0; background:var(--chat-bg)}
.ib-thread-head{display:flex; align-items:center; gap:.6rem; padding:.45rem .8rem; min-height:60px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0}
.ib-thread-head .avatar{width:40px; height:40px; font-size:.88rem}
.ib-thread-info{min-width:0; flex:1}
.ib-thread-name{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ib-thread-sub{font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ib-back{color:var(--text); width:44px; height:44px; margin-left:-.35rem}
.ib-back .i{width:24px; height:24px}
.ib-offline .i{vertical-align:-3px}
.ib-msgs{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:.9rem 4% 1rem; display:flex; flex-direction:column; gap:.22rem;
  background-color:var(--chat-bg); background-image:radial-gradient(rgba(84,101,111,.09) 1px,transparent 1.2px); background-size:20px 20px;
}
.day-sep{align-self:center; margin:.6rem 0 .35rem}
.day-sep span{background:#fff; color:var(--muted); font-size:.74rem; padding:.28rem .75rem; border-radius:8px; box-shadow:var(--shadow)}
.bubble{
  max-width:min(80%,560px); padding:.38rem .55rem .25rem .62rem; border-radius:8px; font-size:.95rem; line-height:1.38;
  overflow-wrap:anywhere; white-space:pre-wrap; box-shadow:var(--shadow); position:relative;
}
.bubble.in{align-self:flex-start; background:var(--bubble-in); border-top-left-radius:0}
.bubble.out{align-self:flex-end; background:var(--bubble-out); border-top-right-radius:0}
.bubble .time{float:right; font-size:.68rem; color:var(--muted); margin:.38rem 0 -.18rem .6rem; white-space:nowrap}
.bubble.pending{opacity:.6}
.bubble.failed{background:#fde8ec; box-shadow:inset 0 0 0 1px #f3a6b5}
.bubble.failed .time::after{content:" ⚠️"}
.media-tag{display:flex; align-items:center; gap:.3rem; font-size:.84rem; color:var(--muted); margin-bottom:.1rem}
.media-missing{color:var(--warn)}
/* mídia dentro do balão */
.bubble.has-media{padding:.22rem .22rem .2rem}
.bubble.has-media .txt{display:block; padding:.3rem .4rem 0}
.bubble.has-media .time{margin:.2rem .35rem 0 .6rem}
.media-img{display:block; width:min(280px, 68vw); max-height:340px; object-fit:cover; border-radius:6px; cursor:zoom-in; background:var(--surface-3)}
.media-img.sticker{width:140px; max-height:140px; object-fit:contain; background:transparent; cursor:default}
.media-video{display:block; width:min(300px, 70vw); max-height:360px; border-radius:6px; background:#000}
.media-audio{display:block; width:min(270px, 66vw); height:40px; margin:.2rem .1rem}
.media-doc{display:flex; align-items:center; gap:.6rem; width:min(280px, 68vw); padding:.6rem .7rem; border-radius:6px; background:rgba(11,20,26,.05); color:var(--text)}
.media-doc:hover{text-decoration:none; background:rgba(11,20,26,.08)}
.media-doc > .i:first-child{width:30px; height:30px; color:var(--info); flex-shrink:0}
.doc-info{display:flex; flex-direction:column; min-width:0; flex:1}
.doc-info strong{font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.doc-info small{color:var(--muted); font-size:.75rem}
.up-pct{font-weight:700; color:var(--brand-2)}
/* clipe, prévia do anexo e gravação de áudio */
.attach-btn{color:var(--muted); margin-bottom:2px}
.ib-attach-preview{display:flex; align-items:center; gap:.7rem; padding:.55rem .8rem; background:var(--surface); border-top:1px solid var(--border); flex-shrink:0}
.ib-attach-preview img,.ib-attach-preview .prev-ico{width:52px; height:52px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--info)}
.prev-info{display:flex; flex-direction:column; min-width:0; flex:1}
.prev-info strong{font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.prev-info small{color:var(--muted); font-size:.75rem}
.ib-recording{display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; padding-bottom:calc(.5rem + var(--safe-b)); background:var(--bg); flex-shrink:0}
.rec-dot{width:12px; height:12px; border-radius:50%; background:var(--danger); animation:pisca 1s ease-in-out infinite}
.rec-time{font-weight:700; font-variant-numeric:tabular-nums}
.rec-hint{color:var(--muted); font-size:.88rem; flex:1}
@keyframes pisca{50%{opacity:.25}}
/* foto em tela cheia */
.lightbox{position:fixed; inset:0; z-index:120; background:rgba(11,20,26,.92); display:flex; align-items:center; justify-content:center; padding:1rem; cursor:zoom-out}
.lightbox img{max-width:100%; max-height:100%; border-radius:6px; box-shadow:var(--shadow-2)}
.ib-compose{display:flex; align-items:flex-end; gap:.5rem; padding:.5rem .6rem; padding-bottom:calc(.5rem + var(--safe-b)); background:var(--bg); flex-shrink:0}
.ib-compose textarea{
  flex:1; margin:0; min-height:46px; max-height:140px; resize:none; border-radius:23px; border:0; background:#fff;
  padding:.72rem 1.05rem; font-size:16px; line-height:1.35; box-shadow:var(--shadow);
}
.ib-compose textarea:focus{box-shadow:var(--shadow)}
.send-btn{
  width:46px; height:46px; border-radius:50%; border:0; background:var(--brand); color:#fff; font-size:1.15rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow);
}
.send-btn:hover{background:var(--brand-2)}
.send-btn .i{width:22px; height:22px; margin-left:2px}
.send-btn:active{transform:scale(.94)}
.ib-offline{padding:.85rem 1rem; padding-bottom:calc(.85rem + var(--safe-b)); background:#fff4e0; color:#7a4b00; text-align:center; font-size:.9rem; flex-shrink:0}
.ib-thread-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; text-align:center;
  color:var(--muted); padding:2rem; background:var(--surface-2); border-bottom:6px solid var(--brand);
}
.ib-thread-empty img{width:96px; height:96px; border-radius:24px; box-shadow:var(--shadow-2)}
.ib-thread-empty p{max-width:360px; line-height:1.6}
.ib-thread-empty strong{color:var(--text); font-size:1.05rem}
.ib-loading,.ib-no-msgs{margin:auto; color:var(--muted); font-size:.9rem; padding:2rem; text-align:center}

/* =========================================================================
   Celular (até 899px): barra de baixo, conversa em tela cheia
   ========================================================================= */
@media (max-width:899px){
  body{padding-bottom:calc(var(--tabbar-h) + var(--safe-b))}
  input,select,textarea{font-size:16px} /* evita o zoom automático do iPhone */
  .sidebar{display:none}
  .uname{max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .content{padding:1rem}
  .grid-2{grid-template-columns:1fr}

  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    height:calc(var(--tabbar-h) + var(--safe-b)); padding-bottom:var(--safe-b);
    background:var(--surface); border-top:1px solid var(--border);
  }
  .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:0; color:var(--muted); font-size:.7rem; font-weight:600; cursor:pointer; padding:6px 0 4px;
  }
  .tab:hover{text-decoration:none}
  .tab-ico{position:relative; line-height:1; display:flex; align-items:center; justify-content:center; width:58px; height:30px; border-radius:16px; transition:background .15s}
  .tab-ico .i{width:24px; height:24px}
  .tab.active{color:var(--brand-3)}
  .tab.active .tab-ico{background:var(--brand-soft)}
  .tab .nav-badge{position:absolute; top:-5px; right:2px; margin:0; font-size:.62rem; padding:0 .35rem; min-width:18px}

  /* Conversas: ocupa a tela toda, sem o cabeçalho geral */
  .app-mode .topbar{display:none}
  .app-mode .content{padding:0}
  .app-mode .flash{margin:.6rem .8rem 0}
  .inbox{height:calc(100vh - var(--tabbar-h) - var(--safe-b)); height:calc(100dvh - var(--tabbar-h) - var(--safe-b))}
  .ib-side{height:100%}
  .ib-side-head{padding-top:calc(.85rem + var(--safe-t))}
  .ib-thread{
    position:fixed; inset:0; z-index:60; height:100vh; height:100dvh; padding-top:var(--safe-t);
    transform:translateX(100%); transition:transform .22s ease; visibility:hidden;
  }
  .inbox.show-thread .ib-thread{transform:none; visibility:visible}
  .toast{bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px)}
  .inbox.show-thread ~ .toast{bottom:calc(80px + var(--safe-b))}
}

/* =========================================================================
   Computador (900px ou mais): lista e conversa lado a lado
   ========================================================================= */
@media (min-width:900px){
  .ib-back{display:none}
  .app-mode .shell{height:calc(100vh - var(--topbar-h)); height:calc(100dvh - var(--topbar-h)); min-height:0; overflow:hidden}
  .app-mode .content{max-width:none; padding:0; margin:0; display:flex; flex-direction:column; min-height:0}
  .app-mode .flash{margin:.6rem 1rem 0}
  /* menu lateral só com ícones, para sobrar espaço para as conversas */
  .app-mode .sidebar{width:68px; padding:.6rem .45rem}
  .app-mode .sidebar .lbl{display:none}
  .app-mode .sidebar a{justify-content:center; padding:.72rem 0}
  .app-mode .sidebar .nav-badge{position:absolute; top:3px; right:5px; margin:0; font-size:.62rem; padding:0 .35rem; min-width:18px}
  .inbox{flex:1; min-height:0; display:grid; grid-template-columns:minmax(300px,380px) 1fr}
  .ib-side{border-right:1px solid var(--border)}
  .toast{bottom:24px}
}

/* tutorial no computador: cartão no meio da tela em vez de folha que sobe */
@media (min-width:900px){
  .install-sheet .sheet-panel{left:50%; right:auto; bottom:auto; top:50%; width:440px; border-radius:18px; opacity:0; transform:translate(-50%,-44%); transition:transform .2s ease,opacity .2s ease}
  .install-sheet.open .sheet-panel{transform:translate(-50%,-50%); opacity:1}
  .install-sheet .sheet-grab{display:none}
}