/* Ícone da porta ao lado do nome da sala (channels.js); para quem administra, é o botão que abre o painel da porta. */
.ch-porta { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: transparent; }
.ch-porta svg { width: 15px; height: 15px; }
button.ch-porta { cursor: pointer; }
button.ch-porta:hover { background: var(--surface-2); }
.ch-bater { position: relative; z-index: 1; flex: none; font-size: 10px; padding: 3px 6px; }
/* Resumo do acesso das salas alugadas e da dos Desenvolvedores, abaixo do nome. */
.ch-door { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px 5px 30px; font-size: 10px; }
.ch-door .chip { font-size: 10px; padding: 3px 6px; }
.door-closed { color: #fbbf24; }
.door-open { color: #5eead4; }
.ch-name[aria-disabled="true"] { opacity: .68; }
.porta-estado { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.porta-pessoas { display: grid; gap: 8px; max-height: 35vh; overflow: auto; }
.porta-busca { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; }
.porta-busca:focus { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.porta-pessoa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.porta-pessoa > div { min-width: 0; overflow-wrap: anywhere; }
.porta-pessoa small { display: block; color: var(--muted); font-size: 11px; }
.porta-pessoa button { flex-shrink: 0; }
button.ch-porta:focus-visible, .ch-bater:focus-visible, .porta-pessoa button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }