/**
 * Área de Membros fooba.studio — Comments Engine CSS.
 *
 * Integração com o design system do tema FSE ativo (theme.json / Personalizador).
 *
 * Mapeamento intencional das propriedades do WP → variáveis internas:
 *
 *   --wp--preset--color--primary    → texto principal, headings, autor  (--amf-fg)
 *   --wp--preset--color--secondary  → destaques: links, botões, bordas  (--amf-accent / --amf-link)
 *   --wp--preset--color--tertiary   → texto e ícones secundários/muted  (--amf-muted)
 *   --wp--preset--color--background → fundo da página                   (--amf-bg)
 *   --wp--preset--color--base       → fundo de cards / superfícies      (--amf-surface)
 *
 * As bordas são derivadas de --amf-accent com 18 % de opacidade via color-mix(),
 * mantendo identidade com o secondary do tema sem sobrecarregar visualmente.
 *
 * Fallbacks garantem compatibilidade com temas sem theme.json.
 */

/* ── Design tokens ───────────────────────────────────────────────── */
.amf-comments-app {
	/* Texto principal, headings, nome de autor — primary do tema */
	--amf-fg:          var(--wp--preset--color--primary,    #1a1a2e);

	/* Destaques: botões, links, pills ativos, bordas de foco — secondary do tema */
	--amf-accent:      var(--wp--preset--color--secondary,  #005bea);

	/* Texto de apoio / ícones secundários — tertiary do tema */
	--amf-muted:       var(--wp--preset--color--tertiary,   #717487);

	/* Fundo da página — definido ANTES das derivadas */
	--amf-bg:          var(--wp--preset--color--background, #ffffff);

	/* Bordas sutis: --amf-accent com 18 % sobre --amf-bg.
	   Derivado das variáveis internas para que qualquer override
	   de --amf-accent ou --amf-bg atualice as bordas automaticamente. */
	--amf-border:      color-mix(in srgb, var(--amf-accent) 18%, var(--amf-bg));

	/* Fundo de superfícies internas (cards, hover) — derivado também */
	--amf-surface:     color-mix(in srgb, var(--amf-accent) 6%,  var(--amf-bg));

	/* Links sempre no secondary */
	--amf-link:        var(--wp--preset--color--secondary,  #005bea);

	/* Cor de contraste sobre botões do accent (branco para a maioria dos temas) */
	--amf-accent-text: #fff;

	/* Tipografia do tema */
	--amf-fz-base:     var(--wp--preset--font-size--small,  14px);
	--amf-fz-meta:     12px;
	--amf-fz-author:   13px;
	--amf-font:        var(--wp--preset--font-family--body, inherit);

	/* Geometria */
	--amf-radius-sm:   6px;
	--amf-radius-md:   12px;
	--amf-avatar-lg:   44px;
	--amf-avatar-sm:   32px;
	--amf-gap:         12px;

	font-family: var(--amf-font);
}

/* ── Container ───────────────────────────────────────────────────── */
.amf-comments-app {
	max-width: 680px;
	margin:    0 auto;
	padding:   0;
}

/* ── Header ──────────────────────────────────────────────────────── */
.amf-comments-header { margin-bottom: 20px; }

.amf-comments-title {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   20px;
	font-weight: 700;
	color:       var(--amf-fg);
	margin:      0;
}

.amf-comments-count-badge {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	font-size:       13px;
	font-weight:     500;
	color:           var(--amf-accent);
	background:      var(--amf-surface);
	border:          1px solid var(--amf-border);
	border-radius:   20px;
	padding:         1px 9px;
}

/* ── Sort bar ────────────────────────────────────────────────────── */
.amf-sort-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin:          16px 0;
	padding-bottom:  12px;
	border-bottom:   1px solid var(--amf-border);
}

.amf-count-label {
	font-size:   var(--amf-fz-meta);
	color:       var(--amf-muted);
	font-weight: 500;
}

.amf-sort-controls { display: flex; gap: 4px; }

.amf-sort-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           4px;
	padding:       5px 10px;
	border:        1px solid var(--amf-border);
	border-radius: 20px;
	background:    transparent;
	font-size:     var(--amf-fz-meta);
	color:         var(--amf-muted);
	cursor:        pointer;
	transition:    all 0.15s;
	font-family:   inherit;
}

.amf-sort-btn.is-active {
	border-color: var(--amf-accent);
	color:        var(--amf-accent);
	background:   var(--amf-surface);
	font-weight:  600;
}

/* ── Formulário de novo comentário ───────────────────────────────── */
.amf-form-wrap { margin-bottom: 20px; }

.amf-comment-form {
	border:        1.5px solid var(--amf-accent);
	border-radius: var(--amf-radius-md);
	background:    var(--amf-bg);
	padding:       14px;
	transition:    box-shadow 0.2s;
}

.amf-comment-form:focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--amf-accent) 15%, transparent);
}

.amf-form-top {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
}

.amf-form-avatar {
	width:         var(--amf-avatar-lg);
	height:        var(--amf-avatar-lg);
	border-radius: 50%;
	object-fit:    cover;
	flex-shrink:   0;
}

.amf-form-textarea {
	flex:        1;
	border:      none;
	outline:     none;
	background:  transparent;
	font-size:   var(--amf-fz-base);
	color:       var(--amf-fg);
	resize:      none;
	min-height:  40px;
	max-height:  200px;
	overflow-y:  auto;
	line-height: 1.5;
	font-family: inherit;
}

.amf-form-textarea::placeholder { color: var(--amf-muted); }

.amf-form-actions {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	gap:             8px;
	margin-top:      10px;
	padding-top:     10px;
	border-top:      1px solid var(--amf-border);
}

.amf-form-cancel {
	padding:       8px 16px;
	border:        none;
	border-radius: var(--amf-radius-sm);
	background:    transparent;
	font-size:     var(--amf-fz-base);
	color:         var(--amf-muted);
	cursor:        pointer;
	font-family:   inherit;
}
.amf-form-cancel:hover { color: var(--amf-fg); }

.amf-form-submit {
	padding:       8px 20px;
	border:        none;
	border-radius: 20px;
	background:    var(--amf-accent);
	color:         var(--amf-accent-text);
	font-size:     var(--amf-fz-base);
	font-weight:   600;
	cursor:        pointer;
	transition:    opacity 0.15s;
	font-family:   inherit;
}
.amf-form-submit:hover    { opacity: 0.88; }
.amf-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Reply form inline */
.amf-reply-form {
	border-color:  var(--amf-border);
	border-radius: var(--amf-radius-sm);
	padding:       10px;
	margin-top:    10px;
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
}
.amf-reply-form .amf-form-avatar  { width: var(--amf-avatar-sm); height: var(--amf-avatar-sm); }
.amf-reply-form .amf-form-body    { flex: 1; min-width: 0; }
.amf-reply-form .amf-form-textarea { width: 100%; box-sizing: border-box; }
.amf-reply-form .amf-form-actions  { margin-top: 8px; padding-top: 0; border-top: none; }

/* ── Prompt de login (visitante) ─────────────────────────────────── */
.amf-form-login-prompt {
	border:        1px solid var(--amf-border);
	border-radius: var(--amf-radius-md);
	padding:       20px;
	text-align:    center;
	margin-bottom: 20px;
	background:    var(--amf-surface);
}

.amf-form-login-cta {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	font-size:       var(--amf-fz-base);
	color:           var(--amf-fg);
	margin-bottom:   14px;
}

.amf-form-login-btns {
	display:         flex;
	flex-wrap:       wrap;
	gap:             8px;
	justify-content: center;
}

.amf-form-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         8px 18px;
	border-radius:   20px;
	font-size:       var(--amf-fz-base);
	font-weight:     600;
	text-decoration: none;
	cursor:          pointer;
	transition:      opacity 0.15s;
	font-family:     inherit;
}
.amf-form-btn:hover { opacity: 0.85; }

.amf-form-btn-primary {
	background: var(--amf-accent);
	color:      var(--amf-accent-text);
}
.amf-form-btn-ghost {
	background: transparent;
	color:      var(--amf-accent);
	border:     1px solid var(--amf-accent);
}
.amf-form-btn-google {
	background:  var(--amf-bg);
	color:       #3c4043;
	border:      1px solid var(--amf-border);
	font-weight: 500;
}

/* ── Cada comentário ─────────────────────────────────────────────── */
.amf-comment {
	display: flex;
	gap:     0;
	padding: 12px 0;
}
.amf-comment + .amf-comment { border-top: 1px solid var(--amf-border); }

/* Thread indicator */
.amf-thread-indicator {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	width:          20px;
	flex-shrink:    0;
	margin-right:   8px;
	padding-top:    4px;
}
.amf-thread-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--amf-accent);
	opacity:       0.5;
	flex-shrink:   0;
}
.amf-thread-line {
	width:      2px;
	flex:       1;
	background: var(--amf-border);
	margin-top: 4px;
	min-height: 20px;
}

/* Corpo do comentário */
.amf-comment-inner { flex: 1; min-width: 0; }

.amf-comment-header {
	display:       flex;
	align-items:   center;
	gap:           var(--amf-gap);
	margin-bottom: 6px;
}

.amf-comment-avatar {
	width:         var(--amf-avatar-lg);
	height:        var(--amf-avatar-lg);
	border-radius: 50%;
	object-fit:    cover;
	flex-shrink:   0;
}
.amf-comment.is-reply .amf-comment-avatar { width: var(--amf-avatar-sm); height: var(--amf-avatar-sm); }

.amf-comment-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.amf-comment-author {
	font-size:   var(--amf-fz-author);
	font-weight: 700;
	color:       var(--amf-fg);
}
.amf-meta-sep  { color: var(--amf-muted); font-size: var(--amf-fz-meta); }
.amf-comment-time { font-size: var(--amf-fz-meta); color: var(--amf-muted); }

/* Conteúdo */
.amf-comment-content {
	margin-left: calc( var(--amf-avatar-lg) + var(--amf-gap) );
	font-size:   var(--amf-fz-base);
	color:       var(--amf-fg);
	line-height: 1.55;
}
.amf-comment-content p { margin: 0 0 4px; }
.amf-comment-content p:last-child { margin: 0; }
.amf-comment.is-reply .amf-comment-content { margin-left: calc( var(--amf-avatar-sm) + var(--amf-gap) ); }

/* Estado oculto (disliked) */
.amf-comment-hidden-state {
	margin-left: calc( var(--amf-avatar-lg) + var(--amf-gap) );
	font-size:   var(--amf-fz-meta);
	color:       var(--amf-muted);
	font-style:  italic;
}
.amf-comment-hidden-state p { margin: 4px 0; }

.amf-view-anyway-btn {
	display:         inline;
	background:      none;
	border:          none;
	color:           var(--amf-link);
	cursor:          pointer;
	font-size:       var(--amf-fz-meta);
	text-decoration: underline;
	padding:         0;
	margin-left:     4px;
}

/* Ações: like, dislike, responder */
.amf-comment-actions {
	display:     flex;
	align-items: center;
	gap:         4px;
	margin-top:  8px;
	margin-left: calc( var(--amf-avatar-lg) + var(--amf-gap) );
}
.amf-comment.is-reply .amf-comment-actions { margin-left: calc( var(--amf-avatar-sm) + var(--amf-gap) ); }

.amf-reaction-pill {
	display:       inline-flex;
	align-items:   center;
	gap:           4px;
	padding:       4px 10px;
	border:        1px solid var(--amf-border);
	border-radius: 20px;
	background:    var(--amf-bg);
	font-size:     var(--amf-fz-meta);
	color:         var(--amf-muted);
	cursor:        pointer;
	transition:    all 0.15s;
	font-family:   inherit;
}
.amf-reaction-pill:hover {
	background:   var(--amf-surface);
	border-color: var(--amf-accent);
	color:        var(--amf-accent);
}
.amf-reaction-pill.is-active {
	background:   var(--amf-surface);
	border-color: var(--amf-accent);
	color:        var(--amf-accent);
	font-weight:  600;
}
.amf-reaction-pill .bi { font-size: 15px; line-height: 1; }
.amf-like-count { font-weight: 500; }

.amf-actions-sep { color: var(--amf-border); padding: 0 2px; }

.amf-reply-btn {
	background:     none;
	border:         none;
	font-size:      var(--amf-fz-meta);
	font-weight:    600;
	color:          var(--amf-muted);
	cursor:         pointer;
	padding:        4px 6px;
	border-radius:  4px;
	font-family:    inherit;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.amf-reply-btn:hover { color: var(--amf-accent); background: var(--amf-surface); }

/* ── Respostas ───────────────────────────────────────────────────── */
.amf-replies-section {
	margin-top:  8px;
	margin-left: calc( var(--amf-avatar-lg) + var(--amf-gap) );
}

.amf-view-replies-btn {
	background:      none;
	border:          none;
	font-size:       var(--amf-fz-meta);
	font-weight:     600;
	color:           var(--amf-link);
	cursor:          pointer;
	padding:         0;
	text-decoration: underline;
	font-family:     inherit;
}

.amf-replies-list {
	margin-top:  8px;
	padding:     8px 0 0 12px;
	border-left: 2px solid var(--amf-border);
}
.amf-replies-list .amf-comment { padding: 8px 0; }
.amf-replies-list .amf-comment + .amf-comment { border-top: 1px solid var(--amf-border); }

/* ── Load more ───────────────────────────────────────────────────── */
.amf-load-more-wrap { text-align: center; margin-top: 20px; }

.amf-load-more-btn {
	padding:       10px 28px;
	border:        1.5px solid var(--amf-accent);
	border-radius: 20px;
	background:    var(--amf-bg);
	font-size:     var(--amf-fz-base);
	color:         var(--amf-accent);
	cursor:        pointer;
	font-weight:   600;
	transition:    background 0.15s;
	font-family:   inherit;
}
.amf-load-more-btn:hover { background: var(--amf-surface); }

/* ── Banner de feedback ──────────────────────────────────────────── */
.amf-ce-banner {
	padding:       10px 14px;
	border-radius: var(--amf-radius-sm);
	font-size:     var(--amf-fz-base);
	margin:        10px 0;
}
.amf-ce-banner--info  {
	background: color-mix(in srgb, var(--amf-accent) 10%, var(--amf-bg));
	color:      var(--amf-accent);
	border:     1px solid var(--amf-border);
}
.amf-ce-banner--error { background: #fdecea; color: #842029; }

/* ── Skeleton ────────────────────────────────────────────────────── */
@keyframes amf-skeleton-pulse {
	0%, 100% { opacity: 0.35; }
	50%       { opacity: 0.7; }
}
.amf-skeleton-pulse { animation: amf-skeleton-pulse 1.4s ease-in-out infinite; }

.amf-form-skeleton {
	display:       flex;
	align-items:   center;
	gap:           12px;
	padding:       14px;
	border:        1.5px solid var(--amf-border);
	border-radius: var(--amf-radius-md);
	background:    var(--amf-bg);
}

.amf-sk-avatar {
	width:         44px;
	height:        44px;
	border-radius: 50%;
	background:    var(--amf-border);
	flex-shrink:   0;
}
.amf-sk-avatar-sm { width: 36px; height: 36px; }

.amf-sk-input {
	flex:          1;
	height:        40px;
	border-radius: var(--amf-radius-sm);
	background:    var(--amf-border);
}

.amf-comment-skeleton {
	display:     flex;
	gap:         12px;
	padding:     14px 0;
	align-items: flex-start;
}
.amf-comment-skeleton + .amf-comment-skeleton { border-top: 1px solid var(--amf-border); }

.amf-sk-lines {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            6px;
	padding-top:    4px;
}
.amf-sk-line {
	height:        12px;
	border-radius: 4px;
	background:    var(--amf-border);
}
.amf-sk-line-short  { width: 35%; }
.amf-sk-line-medium { width: 65%; }

/* ── Sem comentários ─────────────────────────────────────────────── */
.amf-no-comments {
	text-align: center;
	color:      var(--amf-muted);
	font-size:  var(--amf-fz-base);
	padding:    32px 0;
}

/* ── Botão report ─────────────────────────────────────────────── */
.amf-report-btn {
	background:    none;
	border:        none;
	cursor:        pointer;
	padding:       4px 6px;
	border-radius: 4px;
	color:         var(--amf-border);
	font-size:     14px;
	line-height:   1;
	margin-left:   4px;
	transition:    color 0.15s;
	font-family:   inherit;
}
.amf-report-btn:hover { color: #d63638; }

/* ── Report form inline ───────────────────────────────────────── */
.amf-report-form-container {
	margin-top:    8px;
	margin-left:   calc( var(--amf-avatar-lg) + var(--amf-gap) );
}

.amf-report-form {
	background:    var(--amf-surface);
	border:        1px solid var(--amf-border);
	border-radius: var(--amf-radius-sm);
	padding:       12px;
}

.amf-report-select,
.amf-report-textarea {
	width:         100%;
	box-sizing:    border-box;
	border:        1px solid var(--amf-border);
	border-radius: var(--amf-radius-sm);
	padding:       8px 10px;
	font-size:     var(--amf-fz-base);
	font-family:   inherit;
	background:    var(--amf-bg);
	color:         var(--amf-fg);
	margin-bottom: 8px;
}

.amf-report-select:focus,
.amf-report-textarea:focus {
	outline:       none;
	border-color:  var(--amf-accent);
}

.amf-report-textarea { resize: vertical; min-height: 60px; }

.amf-report-error {
	background:    #fdecea;
	color:         #842029;
	padding:       6px 10px;
	border-radius: 4px;
	font-size:     12px;
	margin-bottom: 8px;
}

.amf-report-actions {
	display:         flex;
	justify-content: flex-end;
	gap:             8px;
}

.amf-cancel-report-btn {
	background:    none;
	border:        none;
	cursor:        pointer;
	font-size:     var(--amf-fz-meta);
	color:         var(--amf-muted);
	font-family:   inherit;
	padding:       6px 10px;
}
.amf-cancel-report-btn:hover { color: var(--amf-fg); }

.amf-report-submit {
	padding:       6px 14px;
	background:    #d63638;
	color:         #fff;
	border:        none;
	border-radius: var(--amf-radius-sm);
	font-size:     var(--amf-fz-meta);
	font-weight:   600;
	cursor:        pointer;
	font-family:   inherit;
}
.amf-report-submit:hover    { opacity: 0.88; }
.amf-report-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.amf-report-success {
	font-size:   13px;
	color:       #1a7f37;
	display:     flex;
	align-items: center;
	gap:         6px;
	margin:      0;
}

/* ── @mention no conteúdo dos comentários ────────────────────── */
.amf-comment-content .amf-mention,
.amf-comment-content p > a[data-mention] {
	color:       var(--amf-accent);
	font-weight: 600;
}

/* Realça o @Autor quando aparece no início do texto de respostas encadeadas */
.amf-comment.is-reply .amf-comment-content p:first-child {
	color: var(--amf-fg);
}

/* Wrapper do @username renderizado pelo WP ou inline */

/* ── Turnstile nos formulários de comentário ─────────────────── */
.amf-ce-turnstile {
	display:         flex;
	justify-content: center;
	margin:          8px 0;
}