/* SOCIAL - Stories e Posts das lojas (Genesis API v2.1.20)
 * Só usa tokens do projeto (--kugula-primary, --kugula-dark); nada de cores soltas.
 * Marcação em includes/partials/stories_rail.php e posts_loja.php; comportamento em assets/js/social.js. */

:root {
    --soc-tinta: var(--kugula-dark, #17140F);
    --soc-marca: var(--kugula-primary, #F25A00);
    --soc-papel: #ffffff;
    --soc-linha: rgba(23, 20, 15, 0.12);
    --soc-suave: rgba(23, 20, 15, 0.6);
}

/* ---------- Rail de Stories ---------- */
.soc-stories { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.soc-stories::-webkit-scrollbar { display: none; }
.soc-story-item { flex: 0 0 auto; width: 74px; text-align: center; cursor: pointer; scroll-snap-align: start; background: none; border: 0; padding: 0; color: inherit; }
.soc-story-anel { display: block; width: 68px; height: 68px; border-radius: 50%; padding: 3px; margin: 0 auto 6px; background: linear-gradient(135deg, var(--soc-marca), #ffb067); }
.soc-story-item.soc-visto .soc-story-anel { background: #c9c5be; }
.soc-story-anel img, .soc-story-anel .soc-story-inicial { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--soc-papel); object-fit: cover; background: var(--soc-tinta); color: #fff; font-weight: 700; display: block; }
.soc-story-anel .soc-story-inicial { display: flex; align-items: center; justify-content: center; }
.soc-story-nome { font-size: 0.72rem; line-height: 1.15; display: block; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-story-item:focus-visible { outline: 2px solid var(--soc-marca); outline-offset: 3px; border-radius: 12px; }

/* ---------- Filtro Todas / A seguir / Descobrir (só na rail multi-loja) ---------- */
.soc-stories-card { background: var(--soc-papel); border: 1px solid var(--soc-linha); border-radius: 18px; padding: 16px 18px 6px; margin-bottom: 20px; }
.soc-stories-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.soc-stories-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.soc-stories-titulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--soc-marca); }
.soc-stories-filtro { display: flex; gap: 8px; }
.soc-filtro-pill {
    border: 1px solid var(--soc-linha);
    background: var(--soc-papel);
    color: var(--soc-suave);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.soc-filtro-pill.active { background: var(--soc-tinta); color: #fff; border-color: var(--soc-tinta); }
.soc-filtro-pill:focus-visible { outline: 2px solid var(--soc-marca); outline-offset: 2px; }

/* ---------- Visualizador de Story (ecrã inteiro) ---------- */
.soc-viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 7, 5, 0.96); display: none; align-items: center; justify-content: center; }
.soc-viewer.soc-aberto { display: flex; }
.soc-viewer-cartao { position: relative; width: min(100vw, 440px); height: min(100vh, 780px); background: #000; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
@media (max-width: 520px) { .soc-viewer-cartao { width: 100vw; height: 100vh; border-radius: 0; } }
.soc-barras { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.soc-barra { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.soc-barra > i { display: block; height: 100%; width: 0; background: #fff; }
.soc-barra.soc-feita > i { width: 100%; }
.soc-viewer-topo { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 3; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.soc-viewer-topo strong { font-size: 0.95rem; }
.soc-viewer-topo small { opacity: 0.85; }
.soc-viewer-acoes { margin-left: auto; display: flex; gap: 6px; }
.soc-icone-btn { background: rgba(0, 0, 0, 0.35); color: #fff; border: 0; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.soc-icone-btn:focus-visible { outline: 2px solid #fff; }
.soc-viewer-imagem { flex: 1; width: 100%; object-fit: contain; background: #000; user-select: none; -webkit-user-drag: none; }
.soc-viewer-legenda { position: absolute; left: 0; right: 0; bottom: 58px; padding: 40px 18px 14px; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); font-size: 0.95rem; z-index: 2; }
.soc-viewer-resposta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); }
.soc-viewer-resposta input { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,0.55); background: rgba(0,0,0,0.35); color: #fff; border-radius: 22px; padding: 10px 16px; font: inherit; }
.soc-viewer-resposta input::placeholder { color: rgba(255,255,255,0.75); }
.soc-viewer-resposta input:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.soc-viewer-resposta button { border: 0; border-radius: 22px; padding: 0 16px; background: var(--soc-marca); color: #fff; font-weight: 700; cursor: pointer; }
.soc-viewer-resposta button:disabled { opacity: 0.5; cursor: default; }
.soc-v-avatar, .soc-vp-avatar { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--soc-marca); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; text-shadow: none; border: 2px solid rgba(255, 255, 255, 0.85); }
.soc-viewer-proxima { position: absolute; top: 74px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; max-width: 70%; padding: 5px 5px 5px 14px; border: 0; border-radius: 999px; background: rgba(20, 18, 14, 0.72); color: #fff; font-weight: 600; font-size: 0.8rem; cursor: pointer; }
.soc-viewer-proxima[hidden] { display: none; }
.soc-viewer-proxima .soc-vp-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-viewer-proxima .soc-vp-avatar { background: var(--mercado-selo, #1B7A6B); flex-basis: 26px; height: 26px; font-size: 0.7rem; }
.soc-viewer-proxima:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.soc-viewer-zona { position: absolute; top: 70px; bottom: 90px; width: 35%; z-index: 2; background: none; border: 0; cursor: pointer; }
.soc-viewer-zona.soc-esq { left: 0; }
.soc-viewer-zona.soc-dir { right: 0; width: 65%; }

/* ---------- Posts ---------- */
.soc-posts-titulo { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.soc-posts-vazio { margin: 0; padding: 14px 16px; border: 1px dashed var(--soc-linha); border-radius: 12px; color: var(--soc-suave); font-size: 0.9rem; background: var(--soc-papel); }
.soc-posts { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.soc-posts::-webkit-scrollbar { height: 6px; }
.soc-posts::-webkit-scrollbar-thumb { background: var(--soc-linha); border-radius: 6px; }
.soc-post { flex: 0 0 min(300px, 82%); scroll-snap-align: start; background: var(--soc-papel); border: 1px solid var(--soc-linha); border-radius: 14px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-align: left; padding: 0; color: inherit; }
.soc-post:hover { border-color: var(--soc-marca); }
.soc-post:focus-visible { outline: 2px solid var(--soc-marca); outline-offset: 2px; }
.soc-post-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #eee; display: block; }
.soc-post-corpo { padding: 12px 14px 6px; font-size: 0.9rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.soc-post-meta { padding: 8px 14px 12px; display: flex; gap: 14px; font-size: 0.78rem; color: var(--soc-suave); }

/* ---------- Modal do Post ---------- */
/* Desktop: 2 colunas (imagem | conversa). Mobile: ecrã inteiro. Mockups PostDetalheDesktop/Mobile. */
.soc-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 7, 5, 0.7); display: none; align-items: center; justify-content: center; padding: 16px; }
.soc-modal.soc-aberto { display: flex; }
.soc-modal-caixa {
    background: var(--soc-papel); border-radius: 16px; width: min(1000px, 100%); height: min(88vh, 760px);
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "midia topo" "midia corpo" "midia rodape";
    overflow: hidden; outline: none;
}
.soc-modal-caixa.soc-sem-midia {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "corpo" "rodape";
    width: min(560px, 100%); height: auto; max-height: min(92vh, 760px);
}
.soc-modal-caixa.soc-sem-midia .soc-m-midia { display: none; }
.soc-m-midia { grid-area: midia; position: relative; background: #14120e; display: flex; align-items: center; justify-content: center; min-height: 0; }
.soc-modal-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.soc-m-coracao { position: absolute; left: 50%; top: 50%; font-size: 5rem; line-height: 1; color: #fff; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.6); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.soc-m-coracao.soc-pulsa { animation: soc-coracao 0.7s ease-out; }
@keyframes soc-coracao { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.soc-modal-topo { grid-area: topo; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--soc-linha); }
.soc-m-ident { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.soc-m-linha-nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
.soc-m-autor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-m-selo { color: var(--mercado-selo, #1B7A6B); font-weight: 700; font-size: 0.85rem; }
.soc-m-tempo { font-size: 0.76rem; color: var(--soc-suave); }
.soc-m-avatar { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--soc-marca); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.soc-m-voltar { display: none; }
.soc-m-fechar {
    position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center;
}
.soc-m-fechar:hover { background: rgba(255, 255, 255, 0.28); }
.soc-modal-corpo { grid-area: corpo; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; }
.soc-modal-corpo > .soc-m-texto { order: 1; }
.soc-modal-corpo > .soc-acoes { order: 2; }
.soc-modal-corpo > .soc-m-lista { order: 3; }
.soc-m-rodape { grid-area: rodape; }
.soc-texto { white-space: pre-wrap; word-break: break-word; }
.soc-modal .soc-icone-btn { background: rgba(23, 20, 15, 0.08); color: var(--soc-tinta); }
.soc-acoes { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--soc-linha); border-bottom: 1px solid var(--soc-linha); margin: 12px 0; }
.soc-acao { font-size: 1.05rem; background: none; border: 0; cursor: pointer; font-weight: 600; color: var(--soc-tinta); display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; }
.soc-acao.soc-curtido { color: #c2332f; }
.soc-comentario { display: flex; gap: 10px; padding: 8px 0; }
.soc-comentario-avatar { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--soc-tinta); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.soc-comentario-corpo { flex: 1; min-width: 0; }
.soc-comentario-nome { font-weight: 700; font-size: 0.85rem; }
.soc-comentario-texto { font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; }
.soc-comentario-extra span { white-space: nowrap; }
.soc-comentario-extra { font-size: 0.72rem; color: var(--soc-suave); display: flex; gap: 10px; margin-top: 2px; }
.soc-comentario-extra button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; font-size: inherit; }
.soc-comentario.soc-da-loja { background: rgba(242, 90, 0, 0.08); border-radius: 10px; padding: 8px 10px; }
.soc-selo-loja { background: var(--soc-marca); color: #fff; font-size: 0.62rem; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.soc-removido { font-style: italic; color: var(--soc-suave); }
.soc-vazio { color: var(--soc-suave); font-size: 0.88rem; padding: 10px 0; }
/* NOVO (thread de comentários, API v2.1.24c) */
.soc-comentario-respostas { margin-left: 44px; border-left: 2px solid var(--soc-linha); padding-left: 10px; }
.soc-comentario-resposta { padding: 6px 0; }
.soc-comentario-resposta .soc-comentario-avatar { flex: 0 0 26px; height: 26px; font-size: 0.7rem; }
.soc-ver-respostas { margin: 2px 0 2px 44px; background: none; border: 0; padding: 0; color: var(--soc-tinta); cursor: pointer; font-size: 0.78rem; font-weight: 600; text-decoration: underline; display: block; }
.soc-respondendo-a { font-size: 0.78rem; color: var(--soc-suave); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.soc-respondendo-a button { background: none; border: 0; cursor: pointer; color: inherit; font-size: 0.9rem; line-height: 1; padding: 0; }
.soc-form { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--soc-linha); }
.soc-form textarea { flex: 1; resize: none; border: 1px solid var(--soc-linha); border-radius: 12px; padding: 8px 12px; font: inherit; max-height: 110px; }
.soc-form textarea:focus { outline: 2px solid var(--soc-marca); outline-offset: 0; border-color: transparent; }
.soc-form button { border: 0; border-radius: 12px; padding: 0 16px; background: var(--soc-marca); color: #fff; font-weight: 700; cursor: pointer; }
.soc-form button:disabled { opacity: 0.5; cursor: default; }
.soc-aviso-login { padding: 12px 16px 16px; border-top: 1px solid var(--soc-linha); font-size: 0.88rem; color: var(--soc-suave); }

/* ---------- Diálogo de denúncia ---------- */
.soc-denuncia { position: fixed; inset: 0; z-index: 2100; background: rgba(8, 7, 5, 0.6); display: none; align-items: center; justify-content: center; padding: 16px; }
.soc-denuncia.soc-aberto { display: flex; }
.soc-denuncia-caixa { background: var(--soc-papel); border-radius: 14px; width: min(380px, 100%); padding: 18px; }
.soc-denuncia-caixa h3 { font-size: 1.05rem; margin: 0 0 12px; }
.soc-denuncia-caixa label { display: block; font-size: 0.85rem; padding: 4px 0; cursor: pointer; }
.soc-denuncia-caixa textarea { width: 100%; border: 1px solid var(--soc-linha); border-radius: 10px; padding: 8px 10px; margin-top: 8px; font: inherit; }
.soc-denuncia-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.soc-btn { border: 1px solid var(--soc-linha); background: #fff; border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.soc-btn.soc-primario { background: var(--soc-marca); border-color: var(--soc-marca); color: #fff; }
.soc-btn:disabled { opacity: 0.5; cursor: default; }

@media (prefers-reduced-motion: reduce) { .soc-barra > i { transition: none !important; } }

/* Mobile: o post ocupa o ecrã inteiro (cabeçalho, imagem, conversa, campo fixo em baixo). */
@media (max-width: 767.98px) {
    .soc-modal { padding: 0; align-items: stretch; }
    .soc-modal-caixa, .soc-modal-caixa.soc-sem-midia {
        width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0;
        grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
        grid-template-areas: "topo" "midia" "corpo" "rodape";
    }
    .soc-modal-caixa.soc-sem-midia { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "topo" "corpo" "rodape"; }
    .soc-m-midia { height: 38vh; max-height: 38vh; }
    .soc-m-voltar { display: flex; }
    .soc-m-fechar { display: none; }
    .soc-modal-corpo > .soc-acoes { order: 1; margin-top: 0; }
    .soc-modal-corpo > .soc-m-texto { order: 2; }
    .soc-m-rodape { padding-bottom: env(safe-area-inset-bottom, 0); background: var(--soc-papel); }
}
@media (prefers-reduced-motion: reduce) { .soc-m-coracao.soc-pulsa { animation: none; } }

/* Posts com várias fotos (galeria da API v2.1.98.7) */
.soc-post { position: relative; }
.soc-post-fotos { position: absolute; top: 8px; right: 8px; background: rgba(23, 20, 15, 0.72); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.soc-m-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(23, 20, 15, 0.55); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.soc-m-nav:hover { background: rgba(23, 20, 15, 0.8); }
.soc-m-ant { left: 10px; }
.soc-m-seg { right: 10px; }
.soc-m-contador { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(23, 20, 15, 0.72); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }