/* Rede social (views/social.js): perfil, botões de post e o feed. */
.sc-page { display: flex; flex-direction: column; gap: 12px; }
.sc-profile { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.sc-pic { display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sc-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-id b { font-family: var(--font-pixel); font-size: 16px; }
.sc-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.sc-stats div { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.sc-stats b { font-family: var(--font-pixel); font-size: 15px; }
.sc-stats span { font-size: 11px; color: var(--muted); }
.sc-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sc-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 8px 10px; text-align: left; white-space: normal;
  font-family: var(--font); font-size: 14px; text-transform: none; letter-spacing: normal; }
.sc-kind-h { display: flex; align-items: center; gap: 6px; }
.sc-kind small { font-size: 11px; opacity: .75; }
.sc-now-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--accent); font-family: var(--font-pixel); }
.sc-now { border-color: var(--accent); }
.sc-kinds + .sc-kinds { margin-top: 8px; }
.sc-dot { display: inline-block; min-width: 18px; padding: 0 4px; background: var(--danger, #c33); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
/* Linha do tempo no estilo de rede social antiga: avatar quadrado, nome, @ e data, ações embaixo. */
.sc-feed { display: flex; flex-direction: column; padding: 0; }
.sc-feed > .empty { padding: 16px; }
.sc-post { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 12px; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.sc-post:last-child { border-bottom: 0; }
.sc-mention { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.sc-av { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.sc-imprensa .sc-av { background: color-mix(in srgb, #3a7bd5 22%, transparent); }
.sc-oficial .sc-av, .sc-companheiro .sc-av { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sc-rival .sc-av { background: color-mix(in srgb, #d54a3a 22%, transparent); }
.sc-meme .sc-av, .sc-fofoca .sc-av { background: color-mix(in srgb, #c9a227 22%, transparent); }
.sc-av-me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-post-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; line-height: 1.2; }
.sc-name { font-size: 14px; overflow-wrap: anywhere; }
.sc-ver { display: inline-grid; place-items: center; }
.sc-handle { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.sc-chip { padding: 1px 5px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.sc-text { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.sc-acts { display: flex; gap: 18px; font-size: 12px; color: var(--muted); }
.sc-acts span { display: inline-flex; align-items: center; gap: 4px; }
.sc-like { color: var(--text); }
.sc-comments { list-style: none; margin: 0; padding: 6px 0 0 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted);
  border-left: 2px solid color-mix(in srgb, var(--text) 12%, transparent); }
.sc-comments b { color: var(--text); }
.sc-reply { padding: 8px; background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 2px solid var(--accent); font-size: 13px; }
.sc-reply p { margin: 4px 0 0; font-size: 14px; }
.sc-tones { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-tone { min-height: 36px; padding: 4px 12px; font-size: 13px; }