/**
 * Área de Membros fooba.studio — Barra Social (bloco amf/social-sidebar).
 *
 * Barra vertical fixa (curtir/descurtir/comentários) + balão flutuante de
 * comentários. Reaproveita os design tokens já definidos por
 * post-reactions.css (--amf-pr-*) e comments-engine.css (--amf-*) — aqui só
 * ficam as regras de POSICIONAMENTO e do CARD do popover.
 */

/* ── Wrapper / Barra fixa ─────────────────────────────────────────── */
.amf-ss-wrap {
	position: relative;
	z-index:  99990;
}

.amf-ss-bar {
	position:      fixed;
	top:           50%;
	transform:     translateY(-50%);
	display:       flex;
	flex-direction: column;
	align-items:   center;
	gap:           16px;
	padding:       16px 10px;
	background:    var(--amf-pr-surface, #fff);
	border:        1px solid var(--amf-pr-border, rgba(0,0,0,0.08));
	border-radius: 999px;
	box-shadow:    0 6px 24px rgba(0,0,0,0.12);
	z-index:       99991;
}

.amf-ss-right .amf-ss-bar { right: 20px; }
.amf-ss-left  .amf-ss-bar { left:  20px; }

/* ── Posição vertical (padrão do painel ou sobrescrita no bloco) ──── */
.amf-ss-v-top .amf-ss-bar,
.amf-ss-v-top .amf-ss-popover,
.amf-ss-v-top .amf-ss-teaser {
	top:       20px;
	bottom:    auto;
	transform: none;
}

.amf-ss-v-bottom .amf-ss-bar,
.amf-ss-v-bottom .amf-ss-popover,
.amf-ss-v-bottom .amf-ss-teaser {
	top:       auto;
	bottom:    20px;
	transform: none;
}

/* ── Divisor entre reações e comentários ─────────────────────────── */
.amf-ss-divider {
	width:      28px;
	height:     1px;
	background: var(--amf-pr-border, rgba(0,0,0,0.12));
}

/* ── Botão de comentários (mesma linguagem visual do .amf-pr-sidebar) ─ */
.amf-ss-comments-btn {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            4px;
	background:     none;
	border:         none;
	padding:        0;
	margin:         0;
	cursor:         pointer;
	color:          var(--amf-pr-fg, #1a1a2e);
	font-family:    inherit;
}

.amf-ss-comments-btn .amf-ss-icon {
	display:        flex;
	align-items:    center;
	justify-content: center;
	width:          44px;
	height:         44px;
	border-radius:  50%;
	background:     var(--amf-pr-surface, #f4f4f6);
	color:          var(--amf-pr-muted, #717487);
	font-size:      1.3em;
	transition:     background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.amf-ss-comments-btn:hover .amf-ss-icon { transform: scale(1.06); }

.amf-ss-comments-btn[aria-expanded="true"] .amf-ss-icon {
	background: var(--amf-pr-accent, #005bea);
	color:      #fff;
}

.amf-ss-comments-btn .amf-ss-count {
	font-size:   12px;
	font-weight: 700;
	min-height:  14px;
}

/* ── Botão de compartilhar (mesma linguagem visual do de comentários) ─ */
.amf-ss-share-btn {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            4px;
	background:     none;
	border:         none;
	padding:        0;
	margin:         0;
	cursor:         pointer;
	color:          var(--amf-pr-fg, #1a1a2e);
	font-family:    inherit;
}

.amf-ss-share-btn .amf-ss-icon {
	display:        flex;
	align-items:    center;
	justify-content: center;
	width:          44px;
	height:         44px;
	border-radius:  50%;
	background:     var(--amf-pr-surface, #f4f4f6);
	color:          var(--amf-pr-muted, #717487);
	font-size:      1.2em;
	transition:     background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.amf-ss-share-btn:hover .amf-ss-icon { transform: scale(1.06); }

.amf-ss-share-btn[aria-expanded="true"] .amf-ss-icon {
	background: var(--amf-pr-accent, #005bea);
	color:      #fff;
}

/* ── Popover de comentários ───────────────────────────────────────── */
.amf-ss-popover {
	position:      fixed;
	top:           50%;
	transform:     translateY(-50%);
	width:         400px;
	max-width:     calc(100vw - 40px);
	max-height:    78vh;
	display:       flex;
	flex-direction: column;
	background:    var(--amf-bg, #fff);
	border-radius: 16px;
	box-shadow:    0 12px 40px rgba(0,0,0,0.22);
	overflow:      hidden;
	z-index:       99992;
}

.amf-ss-popover[hidden] { display: none; }

.amf-ss-right .amf-ss-popover { right: 96px; }
.amf-ss-left  .amf-ss-popover { left:  96px; }

/* Pequena transição de entrada. IMPORTANTE: quem recebe a classe "is-open"
   é o .amf-ss-wrap (ver social-sidebar.js), não o próprio .amf-ss-popover —
   por isso o seletor abaixo precisa ser escopado a partir do wrap. */
.amf-ss-popover {
	opacity:   0;
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.amf-ss-wrap.is-open .amf-ss-popover {
	opacity: 1;
}

/* ── Cabeçalho do popover ─────────────────────────────────────────── */
.amf-ss-popover-header {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	gap:            12px;
	padding:        14px 18px;
	border-bottom:  1px solid var(--amf-border, rgba(0,0,0,0.08));
	flex-shrink:    0;
}

.amf-ss-popover-title {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   15px;
	font-weight: 700;
	color:       var(--amf-fg, #1a1a2e);
}

.amf-ss-popover-count {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	min-width:      20px;
	height:         20px;
	padding:        0 6px;
	border-radius:  999px;
	background:     var(--amf-surface, #f4f4f6);
	color:          var(--amf-muted, #717487);
	font-size:      12px;
	font-weight:    700;
}

.amf-ss-popover-close {
	display:        flex;
	align-items:    center;
	justify-content: center;
	width:          32px;
	height:         32px;
	border-radius:  50%;
	background:     none;
	border:         none;
	color:          var(--amf-muted, #717487);
	cursor:         pointer;
	transition:     background-color 0.15s ease, color 0.15s ease;
}

.amf-ss-popover-close:hover {
	background: var(--amf-surface, #f4f4f6);
	color:      var(--amf-fg, #1a1a2e);
}

/* ── Corpo do popover ─────────────────────────────────────────────── */
.amf-ss-popover-body {
	flex:      1 1 auto;
	min-height: 0; /* crucial: sem isso o scroll interno só "aparece" por acaso */
	overflow-y: auto;
	padding:   16px 18px 20px;
	-webkit-overflow-scrolling: touch;
}

/* O engine de comentários já injeta seu próprio título "Comentários (N)";
   dentro do popover isso duplicaria o cabeçalho acima, então escondemos
   apenas essa instância aninhada. */
.amf-ss-popover-body .amf-comments-header {
	display: none;
}

.amf-ss-popover-body .amf-comments-app {
	max-width: none;
	margin:    0;
}

/* ── Teaser flutuante de comentário ──────────────────────────────── */
.amf-ss-teaser {
	position:      fixed;
	top:           50%;
	transform:     translateY(-50%);
	width:         260px;
	max-width:     calc(100vw - 40px);
	background:    var(--amf-bg, #fff);
	border-radius: 14px;
	box-shadow:    0 10px 30px rgba(0,0,0,0.18);
	padding:       12px 30px 12px 14px;
	cursor:        pointer;
	z-index:       99993;
	animation:     amf-ss-teaser-in 0.45s cubic-bezier(.34,1.56,.64,1);
}

.amf-ss-right .amf-ss-teaser { right: 92px; }
.amf-ss-left  .amf-ss-teaser { left:  92px; }

.amf-ss-teaser.is-leaving {
	animation: amf-ss-teaser-out 0.2s ease forwards;
}

@keyframes amf-ss-teaser-in {
	0%   { opacity: 0; transform: translateY(-50%) scale(0.85); }
	60%  { opacity: 1; transform: translateY(-50%) scale(1.04); }
	100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes amf-ss-teaser-out {
	from { opacity: 1; transform: translateY(-50%) scale(1); }
	to   { opacity: 0; transform: translateY(-50%) scale(0.9); }
}

.amf-ss-teaser-close {
	position:        absolute;
	top:             6px;
	right:           6px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           22px;
	height:          22px;
	border-radius:   50%;
	background:      none;
	border:          none;
	color:           var(--amf-muted, #717487);
	cursor:          pointer;
	font-size:       12px;
}

.amf-ss-teaser-close:hover {
	background: var(--amf-surface, #f4f4f6);
	color:      var(--amf-fg, #1a1a2e);
}

.amf-ss-teaser-body {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
}

.amf-ss-teaser-avatar {
	width:         32px;
	height:        32px;
	border-radius: 50%;
	flex-shrink:   0;
	object-fit:    cover;
}

.amf-ss-teaser-text {
	min-width: 0;
}

.amf-ss-teaser-author {
	display:       block;
	font-size:     12px;
	font-weight:   700;
	color:         var(--amf-fg, #1a1a2e);
	margin-bottom: 3px;
}

.amf-ss-teaser-time {
	font-weight: 400;
	color:       var(--amf-muted, #717487);
}

.amf-ss-teaser-excerpt {
	margin:     0;
	font-size:  13px;
	line-height: 1.4;
	color:      var(--amf-fg, #1a1a2e);
	display:    -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:   hidden;
}

/* ── Bounce ao aumentar (polling em tempo real) ──────────────────── */
@keyframes amf-ss-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.4); }
	60%  { transform: scale(0.92); }
	100% { transform: scale(1); }
}

.amf-ss-count.amf-ss-bump,
.amf-ss-popover-count.amf-ss-bump,
.amf-pr-count.amf-ss-bump {
	display:     inline-block;
	animation:   amf-ss-bump 0.5s ease;
	color:       var(--amf-pr-accent, #005bea);
}

/* ── Lista de opções do popover "Compartilhar" ───────────────────── */
.amf-ss-share-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.amf-ss-share-list li + li {
	margin-top: 4px;
}

.amf-ss-share-link {
	display:        flex;
	align-items:    center;
	gap:            10px;
	width:          100%;
	padding:        10px 12px;
	border-radius:  10px;
	background:     none;
	border:         none;
	text-decoration: none;
	color:          var(--amf-fg, #1a1a2e);
	font-size:      14px;
	font-family:    inherit;
	cursor:         pointer;
	text-align:     left;
	transition:     background-color 0.15s ease;
}

.amf-ss-share-link:hover {
	background: var(--amf-surface, #f4f4f6);
}

.amf-ss-share-link .bi {
	font-size:   18px;
	width:       22px;
	flex-shrink: 0;
	text-align:  center;
}

.amf-ss-share-link .bi-whatsapp    { color: #25D366; }
.amf-ss-share-link .bi-facebook    { color: #1877F2; }
.amf-ss-share-link .bi-twitter-x   { color: var(--amf-fg, #000); }
.amf-ss-share-link .bi-link-45deg,
.amf-ss-share-link .bi-check2,
.amf-ss-share-link .bi-exclamation-triangle { color: var(--amf-muted, #717487); }

/* ── Responsivo ───────────────────────────────────────────────────── */
@media ( max-width: 640px ) {
	/* A barra mantém o mesmo layout vertical (em coluna) do desktop — só o
	   popover se adapta à tela estreita. */

	.amf-ss-popover,
	.amf-ss-right .amf-ss-popover,
	.amf-ss-left .amf-ss-popover {
		right:     12px;
		left:      12px;
		top:       auto;
		bottom:    84px;
		width:     auto;
		max-width: none;
		max-height: 70vh;
		transform: none;
	}
}