.shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 340px;
  height: 100vh;
  height: 100dvh;
}
.shell.sem-painel { grid-template-columns: 340px minmax(0, 1fr); }
.shell.sem-painel .painel { display: none; }

/* ── sidebar ───────────────────────────────────────────── */
.sidebar {
  display: flex; flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--linha);
  min-width: 0;
}
.sb-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--bg-header);
  border-bottom: 1px solid var(--linha);
}
.sb-topo .logo { font-size: 20px; line-height: 1; }
.sb-topo h1 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: .2px; }
.sb-topo h1 small { display: block; font-size: 11px; color: var(--texto-2); font-weight: 400; }
.sb-topo .acoes { margin-left: auto; display: flex; gap: 4px; }
.icone-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px; color: var(--texto-2);
}
.icone-btn:hover { background: var(--bg-hover); color: var(--texto); }
.sb-busca { padding: 8px 12px; }
.sb-busca input {
  width: 100%; padding: 8px 12px; border-radius: 10px;
  background: var(--bg-header); border: 1px solid transparent; outline: none;
}
.sb-busca input:focus { border-color: var(--acento); }
.lista-chats { overflow-y: auto; flex: 1; padding-bottom: 12px; }

.chat-item {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid rgba(134,150,160,.08);
}
.chat-item:hover { background: var(--bg-hover); }
.chat-item.ativo { background: var(--bg-ativo); }
.chat-item .info { min-width: 0; flex: 1; }
.chat-item .linha1 { display: flex; gap: 8px; align-items: baseline; }
.chat-item .nome { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .hora { margin-left: auto; font-size: 11px; color: var(--texto-2); flex: none; }
.chat-item .previa { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-item .selo-cfg { font-size: 10px; color: var(--acento); }

.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 600; font-size: 15px;
  background: #374248; color: #e9edef; text-transform: uppercase;
}
.avatar.pequeno { width: 34px; height: 34px; font-size: 13px; }
[data-tema="claro"] .avatar { background: #dfe5e7; color: #556b74; }

/* ── painel direito ────────────────────────────────────── */
.painel {
  background: var(--bg-painel);
  border-left: 1px solid var(--linha);
  overflow-y: auto;
  padding-bottom: 30px;
}

/* ── portão de senha ───────────────────────────────────── */
.portao {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(11, 20, 26, .92);
}
.portao .caixa {
  background: var(--bg-painel); padding: 28px; border-radius: 16px;
  width: min(360px, 92vw); display: grid; gap: 12px; text-align: center;
}
.portao input {
  padding: 12px; border-radius: 10px; border: 1px solid var(--linha);
  background: var(--bg); text-align: center;
}
.portao .erro { color: var(--erro); font-size: 13px; min-height: 18px; }

@media (max-width: 1180px) {
  .shell { grid-template-columns: 300px minmax(0, 1fr); }
  .shell .painel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw);
    z-index: 20; box-shadow: -8px 0 24px rgba(0,0,0,.35);
  }
  .shell.sem-painel .painel { display: none; }
}
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .shell .sidebar { display: none; }
  .shell.mostra-lista .sidebar { display: flex; }
  .shell.mostra-lista .conversa { display: none; }
}