/* ==========================================================================
   COMUNIDADE DO SHOW (2026-09-20)
   --------------------------------------------------------------------------
   Carregado só por layouts/embed.blade.php, a página que vai dentro do
   <iframe class="community-embed"> de shows/show.blade.php (ver
   .community-embed em showsderock.css e docs/prompts/comunidade-do-show.md).

   Reaproveita tokens (--bg/--border/--cyan/--red/--muted etc.) e os botões
   .primary-cta/.outline-cta de showsderock.css, e o par
   .auth-gate-cta/[data-auth-guest-only]/[data-auth-user-only] de
   internal-headers.css (mesmo padrão de participation/suggest-artist.blade.php)
   — nada disso é redefinido aqui.
   ========================================================================== */

/* O widget ocupa 100% da área do iframe -- só o padding é a "margem do quadro",
   sem coluna centralizada artificial (era assim no teste de conceito estático
   em docs/templates/site/ e não bate com o layout publicado). */
.cm-widget { display:grid; gap:22px; padding:20px; }

/* Barra de rolagem da própria página do iframe (ela cresce e rola por dentro,
   não a página do show) -- cores da paleta, não o cinza padrão do navegador. */
html { scrollbar-width:thin; scrollbar-color:var(--border) var(--bg); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { border:2px solid var(--bg); border-radius:6px; background:var(--border); }
::-webkit-scrollbar-thumb:hover { background:var(--cyan); }

.cm-composer { display:grid; gap:10px; }
.cm-composer .auth-gate-cta { margin:0; }
.cm-composer-form { display:grid; gap:10px; }
.cm-composer-head { display:flex; align-items:flex-start; gap:12px; }
.cm-composer-head textarea { flex:1; min-height:64px; }
.cm-reply-form { display:flex; align-items:flex-start; gap:10px; margin-top:14px; }
.cm-reply-form .cm-reply-form-body { flex:1; display:grid; gap:8px; }

.cm-composer textarea,
.cm-reply-form textarea { width:100%; resize:vertical; border:1px solid var(--border); background:var(--input); color:var(--high); padding:10px 12px; font:inherit; font-size:.85rem; line-height:1.5; }
.cm-composer textarea:focus-visible,
.cm-reply-form textarea:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }

.cm-composer-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cm-composer-foot .primary-cta,
.cm-composer-foot .outline-cta { width:auto; margin:0; padding:0 20px; min-height:36px; }
[data-cm-counter] { color:var(--muted); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.03em; }
[data-cm-counter].is-limit { color:var(--red); }

.cm-avatar { display:grid; flex-shrink:0; place-items:center; width:34px; height:34px; border-radius:50%; background:color-mix(in srgb,var(--cyan) 20%,transparent); color:var(--cyan); font-family:var(--font-mono); font-size:.72rem; font-weight:700; }
.cm-reply .cm-avatar { width:28px; height:28px; font-size:.64rem; }

.cm-list { display:grid; gap:14px; }
.cm-post { border:1px solid var(--border); padding:18px; background:rgba(18,26,35,.32); }
.cm-post-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.cm-post-head b { display:block; color:var(--high); font-size:.8rem; }
.cm-post-head small { color:var(--muted); font-family:var(--font-mono); font-size:.68rem; }
.cm-body { margin:0 0 12px; color:var(--medium); font-size:.85rem; line-height:1.6; word-break:break-word; white-space:pre-line; }

.cm-actions { display:flex; align-items:center; gap:6px; }
.cm-actions-reply { margin-top:8px; }
.cm-react,
.cm-reply-toggle { display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; padding:6px 10px; background:transparent; color:var(--muted); font-family:var(--font-mono); font-size:.72rem; transition:color .14s var(--ease),background .14s var(--ease),border-color .14s var(--ease); }
.cm-react[disabled],
.cm-reply-toggle[disabled] { opacity:.5; cursor:default; }
.cm-react svg { width:15px; height:15px; }
.cm-react:hover,
.cm-reply-toggle:hover { color:var(--high); background:rgba(255,255,255,.04); }
.cm-react[data-cm-like].is-active { border-color:color-mix(in srgb,var(--red) 45%,transparent); color:var(--red); }
.cm-react[data-cm-dislike].is-active { border-color:var(--border); background:rgba(183,195,208,.1); color:var(--high); }
.cm-reply-toggle[aria-expanded="true"] { color:var(--cyan); }

.cm-replies[hidden] { display:none; }
.cm-replies { margin-top:14px; padding-top:14px; border-top:1px solid var(--divider); }
.cm-reply-list { display:grid; gap:14px; }
.cm-reply-list:empty { display:none; }
.cm-reply { display:flex; align-items:flex-start; gap:10px; }
.cm-reply-head { display:flex; align-items:baseline; gap:8px; margin-bottom:3px; }
.cm-reply-head b { color:var(--high); font-size:.76rem; }
.cm-reply-head small { color:var(--muted); font-family:var(--font-mono); font-size:.65rem; }
.cm-reply p { margin:0; color:var(--medium); font-size:.8rem; line-height:1.55; word-break:break-word; white-space:pre-line; }

.cm-empty[hidden] { display:none; }
.cm-empty { margin:0; padding:26px 18px; border:1px dashed var(--border); color:var(--muted); font-family:var(--font-mono); font-size:.78rem; text-align:center; }

@media(max-width:480px) {
  .cm-widget { padding:16px; }
  .cm-composer-head,
  .cm-reply-form { gap:8px; }
}