/* ═══════════════════════════════════════════════════════
   MOBILE-UI — base visual mobile-first (SP1).
   Componentes partilhados pelo chat (SP2) e agendas (SP3);
   estilo de referência: app móvel do calendário Outlook.
   Prefixo mui- para não colidir com o design system do shell.
   Spec: docs/superpowers/specs/2026-07-18-chat-conta-office-design.md §4.6
   ═══════════════════════════════════════════════════════ */

/* ─── lista de itens (avatar + título + subtítulo + meta + badge) ─── */
.mui-list{ display:flex; flex-direction:column; }
.mui-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px;
  align-items:center; padding:10px 14px; cursor:pointer;
  border-bottom:1px solid var(--line,#ececec); background:transparent;
}
.mui-item:hover{ background:var(--bg2, #f6f6f7); }
/* um item que é um BOTÃO (as folhas de opções do chat) herdava do browser o
   texto centrado e a letra de 13,3px; e sem avatar o corpo caía na coluna
   `auto` com a `1fr` vazia ao lado (QA de 23/09, menu de um membro) */
button.mui-item{ width:100%; text-align:left; font:inherit; color:inherit; }
.mui-item > .mui-item-body:only-child{ grid-column:1 / -1; }
/* numa FOLHA de opções o subtítulo explica o que o botão faz — cortado com
   «…» a explicação perdia-se (revisão de 23/09, «retira-lhe primeiro este
   papel» nunca se via). Nas listas de conversas continua numa linha só. */
#muiSheet button.mui-item .mui-item-sub{ white-space:normal; }
.mui-avatar{
  width:40px; height:40px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:600;
  font-size:15px; color:#fff; background:var(--cyan,#0f6cbd);
  flex:none; overflow:hidden;
}
.mui-item-body{ min-width:0; }
.mui-item-title{
  font-size:14px; font-weight:600; color:var(--text, #1b1b1f);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mui-item-sub{
  font-size:12.5px; color:var(--text3, #75757c);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mui-item-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  font-size:11px; color:var(--text3, #75757c); flex:none;
}
.mui-badge{
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--cyan,#0f6cbd); color:#fff; font-size:11px;
  font-weight:700; display:inline-flex; align-items:center; justify-content:center;
}

/* ─── bottom sheet (mobile) / painel modal (desktop) ─── */
.mui-sheet-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1200;
  display:flex; align-items:flex-end; justify-content:center;
}
.mui-sheet{
  background:var(--bg, #fff); width:100%; max-width:560px;
  border-radius:16px 16px 0 0; padding:16px;
  max-height:85vh; overflow-y:auto; animation:mui-up .18s ease-out;
}
@keyframes mui-up{ from{ transform:translateY(24px); opacity:.6 } to{ transform:none; opacity:1 } }
@media (min-width:768px){
  /* PRESA AO TOPO e não ao centro (28/09): centrada, a folha mudava de sítio
     sempre que a altura mudava — uma sugestão que chega, uma opção a mais, um
     campo que cresce —, e o botão que se ia carregar fugia debaixo do rato (no
     assistente do grupo novo o clique chegou a cair no «Voltar»). Presa ao
     topo, cresce para baixo e o que já lá estava fica no sítio. */
  .mui-sheet-backdrop{ align-items:flex-start; padding-top:max(24px, 11vh); box-sizing:border-box; }
  .mui-sheet{ border-radius:16px; max-height:calc(100vh - max(24px, 11vh) - 24px); }
}

/* ─── barra de ações fixa em baixo (páginas de criar/editar) ─── */
.mui-actionbar{
  position:sticky; bottom:0; display:flex; gap:10px; justify-content:flex-end;
  padding:12px 14px; background:var(--bg, #fff);
  border-top:1px solid var(--line,#ececec);
}

/* ─── formulário página-inteira (estilo Outlook mobile) ─── */
.mui-form{ display:flex; flex-direction:column; max-width:640px; margin:0 auto; }
.mui-form-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-bottom:1px solid var(--line,#ececec); font-size:14px;
  color:var(--text, #1b1b1f);
}
.mui-form-row label{ flex:1; }

/* ─── interruptor (toggle) ─── */
.mui-toggle{ position:relative; width:42px; height:24px; flex:none; }
.mui-toggle input{ opacity:0; width:0; height:0; }
.mui-toggle i{
  position:absolute; inset:0; border-radius:12px; cursor:pointer;
  background:var(--line,#cfcfd4); transition:background .15s;
}
.mui-toggle i::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.mui-toggle input:checked + i{ background:var(--cyan,#0f6cbd); }
.mui-toggle input:checked + i::after{ transform:translateX(18px); }

/* ─── campo de pesquisa com sugestões ─── */
.mui-search{ position:relative; }
.mui-search input{
  width:100%; padding:9px 12px; border-radius:10px; font-size:14px;
  border:1px solid var(--line,#cfcfd4); background:var(--bg2, #f6f6f7);
  color:var(--text, #1b1b1f); outline:none;
}
.mui-search input:focus{ border-color:var(--cyan,#0f6cbd); background:var(--bg, #fff); }
.mui-search-sug{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:1210;
  background:var(--bg, #fff); border:1px solid var(--line,#ececec);
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:280px; overflow-y:auto;
}