/* Motor general de comentarios — bottom-sheet (Kicks hoy, Mercado mañana).
   Mismo chrome de sheet que el resto de la app: backdrop + panel deslizante,
   scrollbar invisible, safe-area abajo. */
@layer components {
    /* GOTCHA de la casa: estos elementos declaran display flex/grid, que
       pisa el `[hidden] { display: none }` del reset (misma especificidad,
       capa posterior gana) — el override explícito es obligatorio. */
    .comments-modal[hidden],
    .comments-modal__backdrop[hidden],
    .comments-modal__replying[hidden] {
        display: none;
    }

    /* Contrato de lib/sheet.js: openSheet() quita [hidden] y añade `.active`
       en el siguiente frame; close() solo quita `.active` — el estado
       no-activo debe ser invisible E inerte via CSS. */
    .comments-modal__backdrop {
        position: fixed;
        inset: 0;
        background: var(--color-overlay);
        z-index: 300;
        opacity: 0;
        transition: opacity var(--duration-normal) var(--easing-default);
        pointer-events: none;
    }

    .comments-modal__backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    .comments-modal {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 310;
        display: flex;
        flex-direction: column;
        max-block-size: 78dvh;
        background: var(--color-surface);
        border-start-start-radius: var(--radius-lg);
        border-start-end-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        /* Columna a ancho móvil también en desktop, como el propio feed. */
        margin-inline: auto;
        inline-size: min(100%, 430px);
        transform: translateY(100%);
        transition: transform var(--duration-normal) var(--easing-default);
        pointer-events: none;
    }

    .comments-modal.active {
        transform: translateY(0);
        pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .comments-modal,
        .comments-modal__backdrop {
            transition: none;
        }
    }

    .comments-modal__header {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-4) var(--space-4) var(--space-2);
    }

    .comments-modal__handle {
        position: absolute;
        inset-block-start: 6px;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        inline-size: 40px;
        block-size: 4px;
        border-radius: var(--radius-full);
        background: var(--color-border);
    }

    .comments-modal__title {
        font-size: var(--text-base);
        font-weight: var(--weight-bold);
        color: var(--color-text);
    }

    .comments-modal__count {
        color: var(--color-accent);
        margin-inline-start: var(--space-1);
    }

    .comments-modal__close {
        margin-inline-start: auto;
        inline-size: var(--touch-target);
        block-size: var(--touch-target);
        display: grid;
        place-items: center;
        border: 0;
        background: none;
        color: var(--color-text-secondary);
        cursor: pointer;
    }

    .comments-modal__close svg {
        inline-size: 20px;
        block-size: 20px;
    }

    .comments-modal__body {
        flex: 1;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-width: none;
        padding: 0 var(--space-4) var(--space-4);
    }

    .comments-modal__body::-webkit-scrollbar {
        display: none;
    }

    .comments-modal__empty,
    .comments-modal__notice {
        padding: var(--space-8) var(--space-4);
        text-align: center;
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
    }

    /* ── Fila ──────────────────────────────────────────────────────────── */
    .comment {
        display: flex;
        gap: var(--space-2);
        padding-block: var(--space-2);
    }

    .comment__avatar {
        flex: none;
        inline-size: 36px;
        block-size: 36px;
        border-radius: var(--radius-full);
        display: grid;
        place-items: center;
        font-size: var(--text-xs);
        font-weight: var(--weight-bold);
        color: #fff;
        /* El matiz por usuario lo pone el JS via --_hue (hash del nick). */
        background: oklch(0.55 0.14 var(--_hue, 200));
        text-transform: uppercase;
    }

    /* Avatar real superpuesto a las iniciales (mismo círculo): si el CDN no
       tiene imagen (403), el JS retira el img y las iniciales quedan debajo.
       El span necesita position para el overlay; overflow recorta al círculo
       (también en las replies, que heredan un avatar más pequeño). */
    .comment__avatar {
        position: relative;
        overflow: hidden;
    }

    .comment__avatar-img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    .comment__main {
        flex: 1;
        min-inline-size: 0;
    }

    .comment__head {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .comment__nick {
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        color: var(--color-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comment__verified {
        flex: none;
        inline-size: 14px;
        block-size: 14px;
        color: var(--color-accent);
    }

    .comment__time {
        margin-inline-start: auto;
        flex: none;
        font-size: var(--text-xs);
        color: var(--color-text-secondary);
    }

    .comment__text {
        margin-block-start: 2px;
        font-size: var(--text-sm);
        color: var(--color-text);
        overflow-wrap: anywhere;
    }

    .comment__actions {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        margin-block-start: var(--space-1);
    }

    /* Hit area de 44px sin engordar la fila: el alto extra se compensa con
       margen negativo (los 24px efectivos de antes fallaban touch-target). */
    .comment__like,
    .comment__reply {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        border: 0;
        background: none;
        padding: 0;
        min-block-size: var(--touch-target);
        margin-block: calc((24px - var(--touch-target)) / 2);
        font-size: var(--text-xs);
        color: var(--color-text-secondary);
        cursor: pointer;
    }

    .comment__like svg {
        inline-size: 16px;
        block-size: 16px;
    }

    .comment__like.is-on {
        color: var(--color-accent);
    }

    .comment__like.is-on svg {
        fill: currentcolor;
    }

    /* "Ver respuestas (n)" — carga lazy del hilo. */
    .comment__more-replies {
        border: 0;
        background: none;
        padding: 0;
        min-block-size: var(--touch-target);
        margin-block: calc((24px - var(--touch-target)) / 2);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        color: var(--color-text-secondary);
        cursor: pointer;
    }

    .comment__more-replies:disabled {
        cursor: default;
        opacity: 0.6;
    }

    /* "Ver más comentarios" — paginación por cursor de la lista raíz. */
    .comments-modal__more {
        border: 0;
        background: none;
        min-block-size: var(--touch-target);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        color: var(--color-accent);
        cursor: pointer;
    }

    /* Respuestas: un nivel, indentadas, sin botón de respuesta propio. */
    .comment__replies {
        margin-block-start: var(--space-1);
    }

    .comment__replies .comment {
        padding-block: var(--space-1);
    }

    .comment__replies .comment__avatar {
        inline-size: 28px;
        block-size: 28px;
    }

    .comment__replies .comment__reply {
        display: none;
    }

    /* ── Composer ──────────────────────────────────────────────────────── */
    .comments-modal__composer {
        border-block-start: var(--border-1) solid var(--color-border);
        padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
    }

    .comments-modal__replying {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        margin-block-end: var(--space-1);
        font-size: var(--text-xs);
        color: var(--color-text-secondary);
    }

    .comments-modal__replying button {
        border: 0;
        background: none;
        color: var(--color-text-secondary);
        cursor: pointer;
        display: grid;
        place-items: center;
        /* 44px de hit area comprimidos visualmente (icono de 14px). */
        inline-size: var(--touch-target);
        block-size: var(--touch-target);
        margin: calc((14px - var(--touch-target)) / 2);
    }

    .comments-modal__replying button svg {
        inline-size: 14px;
        block-size: 14px;
    }

    .comments-modal__compose-row {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .comments-modal__me {
        position: relative;
        overflow: hidden;
        flex: none;
        inline-size: 36px;
        block-size: 36px;
        border-radius: var(--radius-full);
        display: grid;
        place-items: center;
        font-size: var(--text-xs);
        font-weight: var(--weight-bold);
        background: var(--color-accent);
        color: var(--color-on-accent);
    }

    /* Tu avatar real superpuesto al "TÚ" (helper user-avatar): si el CDN no lo
       tiene (403), el onerror lo retira y queda el "TÚ" sobre el acento. */
    .comments-modal__me-img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    .comments-modal__input {
        flex: 1;
        min-inline-size: 0;
        block-size: var(--touch-target);
        padding-inline: var(--space-4);
        border: var(--border-1) solid var(--color-border);
        border-radius: var(--radius-full);
        background: var(--color-surface-hover);
        color: var(--color-text);
        font-size: var(--text-sm);
    }

    .comments-modal__input:focus-visible {
        outline: var(--border-2) solid var(--color-focus-ring);
        outline-offset: -1px;
    }

    .comments-modal__send {
        flex: none;
        inline-size: var(--touch-target);
        block-size: var(--touch-target);
        display: grid;
        place-items: center;
        border: 0;
        border-radius: var(--radius-full);
        background: none;
        color: var(--color-text-secondary);
        cursor: pointer;
    }

    .comments-modal__send svg {
        inline-size: 20px;
        block-size: 20px;
    }

    .comments-modal__send:not(:disabled):hover,
    .comments-modal__send:not(:disabled):focus-visible {
        color: var(--color-accent);
    }

    /* ── Skeleton del primer fetch — siluetas con shimmer ─────────────── */
    .comments-skel {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 14px 16px;
    }

    /* GOTCHA de la casa (ver cabecera): display pisa [hidden] del reset. */
    .comments-skel[hidden] { display: none; }

    .comments-skel__row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .comments-skel__avatar {
        flex: none;
        inline-size: 32px;
        block-size: 32px;
        border-radius: 50%;
    }

    .comments-skel__lines {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding-block-start: 3px;
    }

    .comments-skel__line {
        block-size: 11px;
        border-radius: var(--radius-full);
        inline-size: 86%;
    }

    .comments-skel__line--head { inline-size: 38%; }

    .comments-skel__row:nth-child(2) .comments-skel__line { inline-size: 64%; }

    .comments-skel__avatar,
    .comments-skel__line {
        background: linear-gradient(
            90deg,
            var(--color-surface) 25%,
            var(--color-surface-hover) 45%,
            var(--color-surface) 65%
        );
        background-size: 240% 100%;
        animation: comments-skel-shimmer 1.3s ease-in-out infinite;
    }

    @keyframes comments-skel-shimmer {
        from { background-position: 130% 0; }
        to { background-position: -110% 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .comments-skel__avatar,
        .comments-skel__line { animation: none; }
    }
}