/* ====================================================
   GC Comments v3 — "La Lobby"
   Dark-first · mobile-first · premium editorial
   ==================================================== */

:root {
	--gc-bg:          #0a0a0a;
	--gc-surface:     #141414;
	--gc-surface2:    #1a1c20;
	--gc-border:      rgba(255,255,255,.07);
	--gc-text:        #ededed;
	--gc-text2:       #c9ced6;
	--gc-muted:       #8a94a1;
	--gc-accent:      #d4b45a;
	--gc-accent-dim:  rgba(212,180,90,.14);
	--gc-accent-text: #e6c970;
	--gc-success:     #34c759;
	--gc-warning:     #d4b45a;
	--gc-r:           16px;
	--gc-r-sm:        10px;
	--gc-font:        -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif;

	--gc-pos-1: #22c55e;      /* d'accordo — verde iOS */
	--gc-pos-2: #ef4444;      /* troppo alto — rosso iOS */
	--gc-pos-3: #d4b45a;      /* troppo basso — oro brand */
	--gc-pos-4: #8a94a1;      /* non giocato — neutro */
}

html[data-theme="light"] .gc-teaser,
html[data-theme="light"] .gc-lobby {
	--gc-bg:          #ffffff;
	--gc-surface:     #ffffff;
	--gc-surface2:    #faf9f6;
	--gc-border:      rgba(15,23,42,.08);
	--gc-text:        #0f172a;
	--gc-text2:       #2b323b;
	--gc-muted:       #5a6372;
	--gc-accent:      #c3860f;
	--gc-accent-dim:  rgba(195,134,15,.12);
	--gc-accent-text: #a8770a;
	--gc-warning:     #c3860f;
}

/* ═══════════════════════════════════════════════════
   VISIBILITY
   ═══════════════════════════════════════════════════ */

.is-hidden {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	pointer-events: none;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	transition: opacity .3s ease, max-height .4s ease, margin .3s ease;
}
.is-visible {
	opacity: 1;
	max-height: 2000px;
	pointer-events: auto;
	transition: opacity .3s ease, max-height .5s ease;
}

/* ═══════════════════════════════════════════════════
   TEASER (top of article)
   ═══════════════════════════════════════════════════ */

.gc-teaser {
	background: var(--gc-surface);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-r);
	padding: 16px 20px;
	margin-bottom: 28px;
}

.gc-teaser__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.gc-teaser__badge {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: #fff;
	background: var(--gc-accent);
	border-radius: 4px;
	padding: 3px 10px;
	flex-shrink: 0;
}

.gc-teaser__question {
	font-size: 15px;
	font-weight: 700;
	color: var(--gc-text);
}

.gc-teaser__count {
	font-size: 12px;
	color: var(--gc-muted);
	flex-shrink: 0;
}
/* Question prende lo spazio elastico → entrambi i count restano
   raggruppati a destra, separati solo dal gap del header */
.gc-teaser__header .gc-teaser__question { margin-right: auto; }
.gc-teaser__count--lobby {
	color: var(--gc-muted);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	transition: color .15s ease, border-color .15s ease;
}
.gc-teaser__count--lobby:hover {
	color: #d4b45a;
	border-bottom-color: #d4b45a;
}
[data-theme="light"] .gc-teaser__count--lobby:hover {
	color: #b8860b;
	border-bottom-color: #b8860b;
}

.gc-teaser__buttons {
	display: flex;
	gap: 8px;
}

.gc-teaser__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--gc-surface2);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-r-sm);
	padding: 10px 8px;
	cursor: pointer;
	transition: all .15s ease;
}

.gc-teaser__btn:hover {
	border-color: var(--gc-accent);
	background: var(--gc-accent-dim);
	transform: translateY(-1px);
}

.gc-teaser__emoji {
	font-size: 18px;
	line-height: 1;
}

.gc-teaser__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--gc-text2);
}

.gc-teaser__btn:hover .gc-teaser__label {
	color: var(--gc-accent);
}

.gc-teaser__count-badge {
	font-size: 11px;
	font-weight: 700;
	color: var(--gc-muted);
	background: var(--gc-border);
	border-radius: 100px;
	padding: 1px 7px;
	min-width: 18px;
	text-align: center;
	line-height: 1.5;
}

@media (max-width: 520px) {
	.gc-teaser__buttons {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.gc-teaser__question {
		font-size: 14px;
	}
}

/* ═══════════════════════════════════════════════════
   CONTAINER
   ═══════════════════════════════════════════════════ */

.gc-lobby {
	font-family: var(--gc-font);
	color: var(--gc-text);
	background: transparent;
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 20px 48px;
}

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */

.gc-lobby__header {
	margin-bottom: 20px;
}

.gc-lobby__badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: #fff;
	background: var(--gc-accent);
	border: none;
	border-radius: 6px;
	padding: 6px 16px;
	margin-bottom: 14px;
	box-shadow: 0 2px 8px var(--gc-accent-dim);
}

.gc-lobby__question {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--gc-text);
}

/* ═══════════════════════════════════════════════════
   POSITION BUTTONS — Step 1
   ═══════════════════════════════════════════════════ */

.gc-positions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 24px;
}

.gc-position {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--gc-surface);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-r);
	padding: 18px 8px 14px;
	cursor: pointer;
	transition: all .2s ease;
	text-align: center;
}

.gc-position:hover {
	transform: translateY(-2px);
	border-color: var(--gc-accent);
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.gc-position:active {
	transform: scale(0.97);
}

.gc-position__emoji {
	font-size: 28px;
	line-height: 1;
}

.gc-position__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--gc-text2);
	line-height: 1.3;
}

/* — Selected state — */
.gc-position.is-active {
	border-color: var(--gc-accent);
	background: var(--gc-accent-dim);
	box-shadow: 0 0 0 2px var(--gc-accent-dim);
}
.gc-position.is-active .gc-position__label {
	color: var(--gc-accent);
}

/* — Position-specific active colors — */
.gc-position[data-value="ci_credo"].is-active,
.gc-position[data-value="daccordo"].is-active,
.gc-position[data-value="funziona"].is-active {
	border-color: var(--gc-pos-1);
	background: rgba(34,197,94,.10);
	box-shadow: 0 0 0 2px rgba(34,197,94,.20);
}
.gc-position[data-value="ci_credo"].is-active .gc-position__label,
.gc-position[data-value="daccordo"].is-active .gc-position__label,
.gc-position[data-value="funziona"].is-active .gc-position__label { color: var(--gc-pos-1); }

.gc-position[data-value="ho_dubbi"].is-active,
.gc-position[data-value="troppo_alto"].is-active,
.gc-position[data-value="in_parte"].is-active {
	border-color: var(--gc-pos-2);
	background: rgba(245,158,11,.10);
	box-shadow: 0 0 0 2px rgba(245,158,11,.20);
}
.gc-position[data-value="ho_dubbi"].is-active .gc-position__label,
.gc-position[data-value="troppo_alto"].is-active .gc-position__label,
.gc-position[data-value="in_parte"].is-active .gc-position__label { color: var(--gc-pos-2); }

.gc-position[data-value="voglio_vedere"].is-active,
.gc-position[data-value="troppo_basso"].is-active,
.gc-position[data-value="va_aggiornata"].is-active {
	border-color: var(--gc-pos-3);
	background: rgba(59,130,246,.10);
	box-shadow: 0 0 0 2px rgba(59,130,246,.20);
}
.gc-position[data-value="voglio_vedere"].is-active .gc-position__label,
.gc-position[data-value="troppo_basso"].is-active .gc-position__label,
.gc-position[data-value="va_aggiornata"].is-active .gc-position__label { color: var(--gc-pos-3); }

.gc-position[data-value="passo"].is-active,
.gc-position[data-value="non_giocato"].is-active,
.gc-position[data-value="non_funziona"].is-active {
	border-color: var(--gc-pos-4);
	background: rgba(107,114,128,.10);
	box-shadow: 0 0 0 2px rgba(107,114,128,.20);
}
.gc-position[data-value="passo"].is-active .gc-position__label,
.gc-position[data-value="non_giocato"].is-active .gc-position__label,
.gc-position[data-value="non_funziona"].is-active .gc-position__label { color: var(--gc-pos-4); }

/* ═══════════════════════════════════════════════════
   TEMPERATURE
   ═══════════════════════════════════════════════════ */

.gc-temperature {
	background: var(--gc-surface);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-r);
	padding: 18px 20px;
	margin-bottom: 24px;
}

.gc-temperature__title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--gc-muted);
	margin: 0 0 12px;
}

.gc-temperature__bar {
	display: flex;
	height: 8px;
	border-radius: 100px;
	overflow: hidden;
	background: var(--gc-surface2);
	margin-bottom: 12px;
}

.gc-temperature__segment {
	height: 100%;
	transition: width .6s ease;
	min-width: 0;
}
.gc-temperature__segment:first-child { border-radius: 100px 0 0 100px; }
.gc-temperature__segment:last-child  { border-radius: 0 100px 100px 0; }
.gc-temperature__segment:only-child  { border-radius: 100px; }

.gc-temperature__segment--pos-1 { background: var(--gc-pos-1); }
.gc-temperature__segment--pos-2 { background: var(--gc-pos-2); }
.gc-temperature__segment--pos-3 { background: var(--gc-pos-3); }
.gc-temperature__segment--pos-4 { background: var(--gc-pos-4); }

.gc-temperature__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.gc-temperature__item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--gc-text2);
}

.gc-temperature__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.gc-temperature__dot--pos-1 { background: var(--gc-pos-1); }
.gc-temperature__dot--pos-2 { background: var(--gc-pos-2); }
.gc-temperature__dot--pos-3 { background: var(--gc-pos-3); }
.gc-temperature__dot--pos-4 { background: var(--gc-pos-4); }

.gc-temperature__total {
	font-size: 12px;
	color: var(--gc-muted);
	margin: 10px 0 0;
	text-align: right;
}

.gc-temperature--empty {
	text-align: center;
	color: var(--gc-muted);
	font-size: 13px;
	padding: 14px 20px;
}

.gc-temperature--empty p {
	margin: 0;
}

/* Stato conferma dopo selezione posizione */
.gc-temperature__selected {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 16px 20px;
}

.gc-temperature__selected-top {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--gc-text);
}

.gc-temperature__selected-emoji {
	font-size: 22px;
}

.gc-temperature__selected-hint {
	font-size: 12px;
	color: var(--gc-muted);
}

/* ═══════════════════════════════════════════════════
   TAG PILLS — Step 2
   ═══════════════════════════════════════════════════ */

.gc-tags {
	margin-bottom: 20px;
}

.gc-tags__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--gc-text2);
	margin: 0 0 10px;
}

.gc-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gc-tag {
	background: var(--gc-surface2);
	border: 1px solid var(--gc-border);
	color: var(--gc-text2);
	border-radius: 100px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all .15s ease;
	line-height: 1;
}
.gc-tag:hover {
	border-color: var(--gc-accent);
	color: var(--gc-accent);
}
.gc-tag.is-active {
	background: var(--gc-accent-dim);
	border-color: var(--gc-accent);
	color: var(--gc-accent);
	font-weight: 600;
}

.gc-tags__hint {
	font-size: 12px;
	color: var(--gc-muted);
	margin: 8px 0 0;
	font-style: italic;
}

/* ═══════════════════════════════════════════════════
   FORM — Step 3
   ═══════════════════════════════════════════════════ */

.gc-form {
	background: var(--gc-surface);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-r);
	padding: 24px;
	margin-bottom: 32px;
}

.gc-form__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--gc-text);
	margin: 0 0 4px;
	line-height: 1.3;
}

.gc-form__subtitle {
	font-size: 14px;
	color: var(--gc-muted);
	margin: 0 0 16px;
	font-style: italic;
	line-height: 1.5;
}

.gc-input,
.gc-textarea {
	width: 100%;
	background: var(--gc-bg);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-r-sm);
	color: var(--gc-text);
	font-family: var(--gc-font);
	font-size: 16px;
	padding: 11px 14px;
	box-sizing: border-box;
	transition: border-color .2s ease;
}

.gc-input {
	height: 44px;
}

.gc-input:focus,
.gc-textarea:focus {
	outline: none;
	border-color: var(--gc-accent);
	box-shadow: 0 0 0 2px var(--gc-accent-dim);
}
.gc-input::placeholder,
.gc-textarea::placeholder {
	color: var(--gc-muted);
}

.gc-textarea {
	resize: vertical;
	min-height: 120px;
	margin-bottom: 10px;
}

.gc-form__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}

/* — Reply banner — */
.gc-reply-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--gc-accent-dim);
	border: 1px solid var(--gc-accent);
	border-radius: var(--gc-r-sm);
	padding: 8px 14px;
	font-size: 13px;
	margin-bottom: 10px;
	color: var(--gc-accent);
}
.gc-cancel-reply {
	background: none;
	border: none;
	color: var(--gc-accent);
	cursor: pointer;
	margin-left: auto;
	font-size: 16px;
	padding: 0 2px;
	line-height: 1;
}

/* — Form footer — */
.gc-form__footer {
	margin-top: 14px;
}

.gc-char-count {
	font-size: 12px;
	color: var(--gc-muted);
	font-variant-numeric: tabular-nums;
	text-align: right;
	margin-bottom: 10px;
}

.gc-submit {
	background: var(--gc-accent);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
	width: 100%;
}
.gc-submit:hover    { background: var(--gc-accent-text); }
.gc-submit:disabled { opacity: .4; cursor: not-allowed; }

.gc-privacy-note {
	font-size: 11px;
	color: var(--gc-muted);
	margin: 12px 0 0;
	line-height: 1.5;
}

/* — Feedback — */
.gc-feedback {
	border-radius: var(--gc-r-sm);
	padding: 12px 16px;
	font-size: 14px;
	margin-bottom: 16px;
}
.gc-feedback--success { background: rgba(52,208,88,.10);  color: var(--gc-success); }
.gc-feedback--error   { background: rgba(239,68,68,.08);  color: #ef4444;           }
.gc-feedback--info    { background: rgba(224,155,19,.10);  color: var(--gc-warning);  }

/* — Alert — */
.gc-alert {
	padding: 12px 16px;
	border-radius: var(--gc-r-sm);
	margin-bottom: 20px;
	font-size: 14px;
}
.gc-alert--success {
	background: rgba(52,208,88,.10);
	border: 1px solid var(--gc-success);
	color: var(--gc-success);
}

/* ═══════════════════════════════════════════════════
   OPINIONS LIST
   ═══════════════════════════════════════════════════ */

.gc-opinions {
	display: flex;
	flex-direction: column;
}

.gc-opinions__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.gc-opinions__heading {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--gc-muted);
	margin: 0;
}

.gc-opinions__sort {
	display: flex;
	gap: 4px;
}

.gc-sort-btn {
	background: none;
	border: 1px solid var(--gc-border);
	color: var(--gc-muted);
	border-radius: 100px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
}
.gc-sort-btn:hover {
	color: var(--gc-text2);
	border-color: var(--gc-text2);
}
.gc-sort-btn.is-active {
	color: var(--gc-accent);
	border-color: var(--gc-accent);
	background: var(--gc-accent-dim);
}

.gc-opinions__empty {
	color: var(--gc-muted);
	font-size: 14px;
	font-style: italic;
}

/* ═══════════════════════════════════════════════════
   OPINION CARD
   ═══════════════════════════════════════════════════ */

.gc-opinion {
	background: var(--gc-surface);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-r);
	padding: 20px;
	margin-bottom: 10px;
}

.gc-opinion--editorial {
	/* Card "Redazione": leggermente più visibile delle opinioni community,
	   senza diventare un alert. Bordo accento + tinta sottile + glow morbido. */
	border-color: rgba(212,180,90,.45);
	background: linear-gradient(180deg, rgba(212,180,90,.06), rgba(212,180,90,.02) 60%, transparent);
	box-shadow: 0 0 0 1px rgba(212,180,90,.12), 0 1px 8px rgba(212,180,90,.05);
}
html[data-theme="light"] .gc-opinion--editorial {
	background: linear-gradient(180deg, rgba(195,134,15,.06), rgba(195,134,15,.02) 60%, transparent);
	box-shadow: 0 0 0 1px rgba(195,134,15,.10), 0 1px 8px rgba(195,134,15,.04);
}

/* — Badges — */
.gc-opinion__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.gc-opinion__position {
	display: inline-flex;
	align-items: center;
	border-radius: 100px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	line-height: 1.4;
}

.gc-opinion__position--pos-1 { background: rgba(34,197,94,.12);  color: var(--gc-pos-1); }
.gc-opinion__position--pos-2 { background: rgba(245,158,11,.12); color: var(--gc-pos-2); }
.gc-opinion__position--pos-3 { background: rgba(59,130,246,.12);  color: var(--gc-pos-3); }
.gc-opinion__position--pos-4 { background: rgba(107,114,128,.12); color: var(--gc-pos-4); }

.gc-opinion__tag {
	display: inline-flex;
	align-items: center;
	background: var(--gc-surface2);
	color: var(--gc-text2);
	border: 1px solid var(--gc-border);
	border-radius: 100px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
	line-height: 1.4;
}

.gc-opinion__badge-editorial {
	display: inline-flex;
	align-items: center;
	background: var(--gc-accent-dim);
	color: var(--gc-accent);
	border-radius: 100px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

/* — Body — */
.gc-opinion__body {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 12px;
	color: var(--gc-text2);
	word-break: break-word;
}

/* — Footer — */
.gc-opinion__footer {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.gc-opinion__author {
	font-weight: 600;
	font-size: 13px;
	color: var(--gc-text);
}

.gc-opinion__date {
	font-size: 12px;
	color: var(--gc-muted);
}

.gc-opinion__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* — Upvote — */
.gc-btn-upvote {
	background: none;
	border: 1px solid var(--gc-border);
	color: var(--gc-muted);
	border-radius: var(--gc-r-sm);
	padding: 4px 12px;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s ease;
	display: flex;
	align-items: center;
	gap: 5px;
}
.gc-btn-upvote:hover {
	color: var(--gc-accent);
	border-color: var(--gc-accent);
	background: var(--gc-accent-dim);
}
.gc-btn-upvote--voted {
	color: var(--gc-accent);
	border-color: var(--gc-accent);
}
.gc-btn-upvote:disabled { opacity: .35; cursor: not-allowed; }

/* — Downvote (look identico all'upvote, condivide variabili tema dark/light) — */
.gc-btn-downvote,
button.gc-btn-downvote {
	background: none !important;
	border: 1px solid var(--gc-border) !important;
	color: var(--gc-muted) !important;
	border-radius: var(--gc-r-sm) !important;
	padding: 4px 12px !important;
	font-size: 13px !important;
	cursor: pointer;
	transition: all .15s ease;
	display: flex !important;
	align-items: center;
	gap: 5px;
	box-shadow: none !important;
	text-shadow: none !important;
}
.gc-btn-downvote:hover,
button.gc-btn-downvote:hover {
	color: var(--gc-accent) !important;
	border-color: var(--gc-accent) !important;
	background: var(--gc-accent-dim) !important;
}
.gc-btn-downvote--voted,
button.gc-btn-downvote--voted {
	color: var(--gc-accent) !important;
	border-color: var(--gc-accent) !important;
}
.gc-btn-downvote:disabled { opacity: .35; cursor: not-allowed; }

/* Anche l'upvote: rinforza per battere temi che sovrascrivono i button */
button.gc-btn-upvote {
	background: none !important;
	border: 1px solid var(--gc-border) !important;
	color: var(--gc-muted) !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
button.gc-btn-upvote:hover {
	color: var(--gc-accent) !important;
	border-color: var(--gc-accent) !important;
	background: var(--gc-accent-dim) !important;
}
button.gc-btn-upvote--voted {
	color: var(--gc-accent) !important;
	border-color: var(--gc-accent) !important;
}

/* — Buried (commento nascosto per troppi dislike) — */
.gc-opinion--buried > .gc-opinion__badges,
.gc-opinion--buried > .gc-opinion__body,
.gc-opinion--buried > .gc-opinion__footer {
	display: none !important;
}
.gc-opinion--buried {
	background: transparent !important;
	border-style: dashed !important;
}
/* Opacity .7 SOLO sul "head" e "toggle" del buried — non eredita ai children
   (così la reply Redazione a un commento buried resta a piena leggibilità). */
.gc-opinion--buried > .gc-buried-head,
.gc-opinion--buried > .gc-buried-toggle,
.gc-opinion--buried > .gc-opinion__buried-body {
	opacity: .7;
}
.gc-buried-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--gc-muted);
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.gc-buried-author {
	font-weight: 600;
	color: var(--gc-muted);
}
.gc-buried-meta {
	font-size: 11px;
	opacity: .85;
}
.gc-buried-toggle {
	background: transparent !important;
	border: 1px dashed var(--gc-border) !important;
	color: var(--gc-muted) !important;
	border-radius: var(--gc-r-sm) !important;
	padding: 8px 14px !important;
	font-size: 12px !important;
	cursor: pointer !important;
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	transition: all .15s ease;
	box-shadow: none !important;
	text-shadow: none !important;
	user-select: none;
	font-style: italic;
	position: relative;
	z-index: 2;
	pointer-events: auto !important;
}
.gc-buried-toggle:hover {
	color: var(--gc-text) !important;
	border-color: var(--gc-accent) !important;
	background: var(--gc-accent-dim) !important;
}
.gc-opinion__buried-body { margin-top: 10px; }
.gc-opinion__buried-body[hidden],
.gc-opinion--buried .gc-opinion__buried-body[hidden] { display: none !important; }

/* — Reply button — */
.gc-btn-reply {
	background: none;
	border: none;
	color: var(--gc-muted);
	font-size: 13px;
	cursor: pointer;
	padding: 4px 0;
	transition: color .15s ease;
}
.gc-btn-reply:hover { color: var(--gc-text); }

/* — Reply card (thread-line style, no compounding indent) — */
.gc-opinion--reply {
	margin-left: 0;
	background: rgba(255,255,255,.025);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-r-sm);
	padding: 14px 16px;
	position: relative;
}

/* Reply-to chip (mostrato dal livello 2 in poi: "↳ in risposta a @user") */
.gc-opinion__reply-to {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: var(--gc-muted);
	margin-bottom: 6px;
	line-height: 1.3;
}
.gc-opinion__reply-to strong {
	color: var(--gc-accent);
	font-weight: 600;
}

/* Garantisce che il body non venga schiacciato da contenitori flex/grid esterni */
.gc-opinion,
.gc-opinion__body {
	min-width: 0;
}
.gc-opinion__body {
	overflow-wrap: anywhere;
}

.gc-opinion--editorial .gc-opinion__body {
	color: var(--gc-text);
}

/* — Quick opinion (no text) — */
.gc-opinion--quick {
	padding: 12px 16px;
}
.gc-opinion--quick .gc-opinion__badges {
	margin-bottom: 0;
}
.gc-opinion--quick .gc-opinion__footer {
	margin-top: 6px;
}

/* — Text encourage hint — */
.gc-text-encourage {
	font-size: 12px;
	color: var(--gc-muted);
	margin: 8px 0 0;
	font-style: italic;
	text-align: center;
}
.gc-text-encourage:empty {
	display: none;
}

.gc-logged-in {
	font-size: 13px;
	color: var(--gc-text2);
	margin: 0 0 10px;
}
.gc-logged-in strong {
	color: var(--gc-accent);
}

/* — Legacy comment (no position) — */
.gc-opinion--legacy {
	border-style: dashed;
	opacity: .85;
}

.gc-opinion__badge-legacy {
	display: inline-flex;
	align-items: center;
	background: var(--gc-surface2);
	color: var(--gc-muted);
	border: 1px solid var(--gc-border);
	border-radius: 100px;
	padding: 3px 10px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
}

/* — Thread-line per le risposte — indent costante, mai cumulato.
   Una sola linea verticale sottile fa da threading visivo (stile forum moderni). */
.gc-replies {
	margin: 12px 0 0 14px;
	padding-left: 14px;
	border-left: 2px solid var(--gc-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gc-replies > .gc-opinion--reply {
	margin: 0;
}
/* Hover sulla thread line: leggero accent per dare gerarchia "viva" */
.gc-replies:hover {
	border-left-color: var(--gc-accent-dim);
}
/* Dal 3° livello in poi: niente ulteriore indent né border, le replies stanno sulla
   stessa thread del livello 2 (la gerarchia è preservata dal "↳ in risposta a @user"). */
.gc-replies .gc-replies .gc-replies {
	margin-left: 0;
	padding-left: 0;
	border-left: none;
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════ */

html[data-theme="light"] .gc-input,
html[data-theme="light"] .gc-textarea {
	background: #ffffff;
	border-color: #e3e7ee;
}
html[data-theme="light"] .gc-input:focus,
html[data-theme="light"] .gc-textarea:focus {
	border-color: var(--gc-accent);
	box-shadow: 0 0 0 2px var(--gc-accent-dim);
}

html[data-theme="light"] .gc-opinion--reply {
	background: #f8fafc;
	border-color: var(--gc-accent-dim);
}

/* ═══════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════ */

@media (max-width: 520px) {
	/* Aggressive padding reduction on mobile: massimizza larghezza testo a tutti i livelli */
	.gc-lobby {
		padding: 24px 8px 32px; /* 14px → 8px laterale = +12px utili */
	}
	.gc-lobby__question {
		font-size: 19px;
	}
	.gc-positions {
		grid-template-columns: repeat(2, 1fr);
	}
	.gc-position {
		padding: 14px 8px 12px;
	}
	.gc-position__emoji {
		font-size: 24px;
	}
	.gc-form {
		padding: 16px;
	}
	.gc-form__fields {
		grid-template-columns: 1fr;
	}
	.gc-opinion {
		padding: 14px 12px; /* 16x14 → 14x12 */
	}
	/* === MOBILE COMMENTS — Facebook-style flat threading ===
	   Sotto i 520px, le risposte non sono più card annidate (l'indent cumulativo schiaccia
	   il testo in colonna a 80-100px su parole italiane lunghe).
	   Strategia:
	     1. Tutte le risposte di QUALSIASI profondità sono visivamente "flat" sotto un'unica
	        thread-line verticale (come FB/Twitter).
	     2. La gerarchia è preservata SOLO via "↳ in risposta a @user" sopra il body.
	     3. Card senza bordo né background né padding card-style: il contenuto respira a
	        tutta la larghezza disponibile.
	     4. Hyphens automatico per parole lunghe italiane (otti-mizzazione invece che spezzare). */
	/* Replies indent ridotto al minimo: solo thread-line + 8px (risparmiamo 12px laterali).
	   Tutti i livelli profondi NON aggiungono indent: thread-line solo al livello 1. */
	.gc-replies {
		margin: 10px 0 0 0;
		padding-left: 8px;
		border-left: 2px solid rgba(255,255,255,.08);
		gap: 10px;
	}
	.gc-replies .gc-replies {
		margin: 8px 0 0 0;
		padding-left: 0;
		border-left: none;
	}
	/* Reply card: niente più card visiva, solo contenuto */
	.gc-opinion--reply {
		background: transparent;
		border: none;
		padding: 0;
		border-radius: 0;
	}
	/* Buried su mobile: niente box dashed attorno al wrapper (la toggle interna ha già
	   il suo dashed border, basta quello). Cancella esplicitamente il border-style. */
	.gc-opinion--reply.gc-opinion--buried,
	.gc-opinion--buried {
		border: none !important;
		padding: 0 !important;
		background: transparent !important;
	}
	/* Le reply dentro un buried NON sono buried loro stesse: piena leggibilità */
	.gc-opinion--buried > .gc-replies {
		opacity: 1;
		margin-top: 8px;
	}

	/* MA se la reply è una RISPOSTA UFFICIALE Redazione, mantieni la card oro
	   (deve distinguersi dalle community reply). */
	.gc-opinion--reply.gc-opinion--editorial {
		background: linear-gradient(180deg, rgba(212,180,90,.08), rgba(212,180,90,.02) 70%, transparent);
		border: 1px solid rgba(212,180,90,.4);
		border-radius: 10px;
		padding: 12px 12px; /* era 14x16, ridotto per dare più spazio al testo */
		box-shadow: 0 1px 6px rgba(212,180,90,.06);
	}
	html[data-theme="light"] .gc-opinion--reply.gc-opinion--editorial {
		background: linear-gradient(180deg, rgba(195,134,15,.07), rgba(195,134,15,.02) 70%, transparent);
		border-color: rgba(195,134,15,.4);
	}
	/* Body delle reply: font leggermente ridotto + hyphens per parole italiane lunghe */
	.gc-opinion--reply .gc-opinion__body,
	.gc-opinion__body {
		font-size: 14px;
		line-height: 1.55;
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: anywhere;
		word-break: normal;
	}
	/* Reply-to: chip piccolo e compatto */
	.gc-opinion__reply-to {
		font-size: 11px;
		margin-bottom: 4px;
	}
	/* Header reply compatto: niente avatar grande, solo nome + tempo */
	.gc-opinion--reply .gc-opinion__header {
		gap: 6px;
		margin-bottom: 4px;
	}
	.gc-opinion--reply .gc-opinion__avatar {
		width: 22px;
		height: 22px;
		font-size: 11px;
	}
	.gc-opinion--reply .gc-opinion__name {
		font-size: 13px;
	}
	/* Footer azioni reply: più piccolo */
	.gc-opinion--reply .gc-opinion__footer {
		gap: 8px;
		margin-top: 6px;
	}
	.gc-opinion--reply .gc-opinion__author {
		font-size: 12px;
	}
	.gc-opinion--reply .gc-opinion__date {
		font-size: 10px;
	}
	.gc-submit {
		position: sticky;
		bottom: 12px;
		width: 100%;
	}
	.gc-temperature {
		padding: 14px 16px;
	}
	.gc-temperature__legend {
		gap: 8px 12px;
	}
}