/* ============================================================
   New Sharing — hub (public/index.html)
   Só compõe os componentes de components.css. Sem cor, raio, sombra
   ou tamanho literal: tudo vem dos tokens. Base = celular (360px).
   Índice: topbar · estados · login · app · salas · listas · amigos
           mensagens · modais
   ============================================================ */

.public-rooms { margin-block: var(--sp-4); }
.public-room-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.public-room-item .grow { min-width: 0; overflow-wrap: anywhere; }
.public-room-item .subtle { display: block; font-size: var(--text-xs); }
.public-room-item .item-actions { display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-end;flex-shrink:0; }
.public-rooms [role="status"]:empty { display: none; }
html { scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); }

/* ---------------- topbar ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: var(--page-max);
  min-height: var(--topbar-h);
  margin-inline: auto;
  padding: max(var(--sp-2), env(safe-area-inset-top)) max(var(--sp-4), env(safe-area-inset-right)) var(--sp-2) max(var(--sp-4), env(safe-area-inset-left));
}

.topbar .brand { flex: 0 0 auto; min-height: var(--control-h); }

/* entrada rápida por código: só a partir de 640px (no celular a aba Salas já tem o campo) */
.topbar-join { display: none; flex: 0 1 20rem; min-width: 0; margin-left: var(--sp-2); }
@media (min-width: 40rem) { .topbar-join { display: flex; } }
/* na aba Salas o campo de código já está na página: não repetir na topbar */
body[data-tab="rooms"] .topbar-join { display: none; }

.topbar-end {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  margin-left: auto;
}

/* indicador de conexão: só o ponto no celular; o texto fica para leitor de tela */
.conn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg-3);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.conn-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (min-width: 40rem) {
  .conn-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* menu do avatar */
.user-menu { position: relative; min-width: 0; }
.user-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-2);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--fg);
  font-weight: 550;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.user-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.user-btn[aria-expanded="true"] { background: var(--surface-3); border-color: var(--line-strong); }
.user-btn .ico { color: var(--fg-3); }
.user-name { display: none; max-width: 10rem; }
@media (min-width: 40rem) { .user-name { display: block; } }
@media (pointer: coarse) { .user-btn { min-height: var(--control-h-lg); } }

.user-menu .menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  width: max-content;
  min-width: 14rem;
  max-width: calc(100vw - 2 * var(--sp-4));
}
.menu-head {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
}
.menu-head .subtle { font-size: var(--text-xs); }
.menu-items { display: flex; flex-direction: column; }

/* ---------------- estados: carregando, offline, login ---------------- */
.auth {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: var(--sp-8) max(var(--sp-4), env(safe-area-inset-right)) var(--sp-16) max(var(--sp-4), env(safe-area-inset-left));
}

.sk-eyebrow { width: 40%; height: var(--sp-4); }
.sk-title { width: 85%; height: var(--sp-10); }
.sk-card { width: 100%; height: 22rem; border-radius: var(--r-lg); }
.sk-row { width: 100%; height: 3.5rem; border-radius: var(--r-md); }

.hero { display: flex; flex-direction: column; gap: var(--sp-3); }
.hero h1 { font-size: var(--text-2xl); letter-spacing: var(--track-hero); }
.perks { display: flex; flex-direction: column; gap: var(--sp-2); color: var(--fg-2); }
.perks li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.perks .ico { margin-top: 0.2em; color: var(--fg-3); font-size: var(--text-md); }

.auth-tabs .tab { flex: 1 1 0; justify-content: center; }

/* ---------------- app: página, abas, cabeçalhos ---------------- */
.page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--sp-4) max(var(--sp-4), env(safe-area-inset-right)) var(--sp-16) max(var(--sp-4), env(safe-area-inset-left));
}
.panel { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
}
.page-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 16rem;
  min-width: 0;
}
.page-head h2 { font-size: var(--text-xl); }

/* nota de estado vazio, discreta (sem caixa nem botão: o CTA já está nos cartões acima) */
.empty-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--fg-2);
  font-size: var(--text-sm);
  text-align: center;
}
.empty-inline .ico { color: var(--fg-3); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.section-head h3 { font-size: var(--text-md); }

/* ---------------- salas ---------------- */
.rooms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-4);
}
@media (min-width: 40rem) { .rooms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------- listas (salas, recentes, amigos) ---------------- */
.list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.list > li + li { border-top: 1px solid var(--line); }

.item-main { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 12rem; min-width: 0; }
.item-title { font-weight: 600; }
.item-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); color: var(--fg-2); font-size: var(--text-sm); }
.item-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }

/* ---------------- amigos ---------------- */
.friend-add { flex: 1 1 18rem; max-width: 26rem; min-width: 0; }

.person { min-height: var(--control-h-lg); }
.person-main {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 12rem;
  min-width: 0;
  margin: calc(-1 * var(--sp-1));
  padding: var(--sp-1);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.person-main:hover { background: var(--surface-2); }
.person-text { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-weight: 600; }
.person-sub { display: flex; align-items: center; gap: var(--sp-2); color: var(--fg-3); font-size: var(--text-xs); }
.person-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.person-ask { color: var(--fg-2); font-size: var(--text-sm); }

/* toque: alvo mínimo de 44px nas ações das listas */
@media (pointer: coarse) {
  .item-actions .btn, .person-actions .btn { min-height: var(--control-h-lg); }
  .person-actions .btn.icon { width: var(--control-h-lg); }
}

/* ---------------- mensagens (master/detail) ---------------- */
.dm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: clamp(26rem, calc(100dvh - 16rem), 46rem);
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
@media (min-width: 40rem) {
  .dm { grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); }
  .dm-list { border-right: 1px solid var(--line); }
}
/* celular: um painel por vez (lista ou conversa) */
@media (max-width: 39.99rem) {
  .dm:not(.is-thread) .dm-thread { display: none; }
  .dm.is-thread .dm-list { display: none; }
}

.dm-list { min-width: 0; min-height: 0; overflow-y: auto; }
.dm-state { padding: var(--sp-3); }
.dm-convos { display: flex; flex-direction: column; }
.dm-conv {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.dm-conv:hover { background: var(--surface-2); }
.dm-conv[aria-current="true"] { background: var(--surface-3); }
.dm-conv-text { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.dm-conv-name { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-weight: 600; }
.dm-conv-last { color: var(--fg-2); font-size: var(--text-sm); }

.dm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dm-placeholder { flex: 1 1 0; justify-content: center; }
.dm-pane { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }

.dm-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.dm-back { flex: 0 0 auto; }
@media (min-width: 40rem) { .dm-back { display: none; } }
.dm-head-text { display: flex; flex-direction: column; min-width: 0; }
.dm-sub { color: var(--ok); font-size: var(--text-xs); }
.dm-sub:empty { display: none; }

.dm-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-2);
  color: var(--fg-3);
  font-size: var(--text-xs);
}

.msgs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4);
}
.msg {
  align-self: flex-start;
  max-width: min(32rem, 85%);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
  overflow-wrap: anywhere;
}
.msg.mine {
  align-self: flex-end;
  background: var(--accent-weak);
  border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
}
.msg-text { white-space: pre-wrap; }
.msg-text a { text-decoration: underline; overflow-wrap: anywhere; }
.msg-time { display: block; margin-top: var(--sp-1); color: var(--fg-3); font-size: var(--text-xs); }

.dm-err { padding: 0 var(--sp-4); }
.composer {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) max(var(--sp-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

/* ---------------- modais ---------------- */
.profile-head { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; padding-right: var(--sp-8); }
.profile-text { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.profile-text h3 { overflow-wrap: anywhere; }
.cred-link b { font-size: var(--text-sm); }

/* Seleção Rara identity */
.public-rooms.is-empty { margin-block: var(--sp-3); padding: var(--sp-2) 0; gap: 0; background: transparent; border: 0; box-shadow: none; }
.public-rooms.is-empty > :not([role="status"]) { display: none; }
.public-rooms.is-empty [role="status"] { color: var(--fg-3); font-size: var(--text-sm); }