/* ============================================================
   Comments — shared, non-scoped styles.

   These rules used to live in CommentSection.razor.css, but
   Blazor's CSS isolation only attaches the scoped attribute
   to elements inside the matching .razor file. That meant
   none of the CommentItem-rendered markup (list items, badges,
   meta row, text, actions, replies) actually received the
   rules — so the text looked unformatted, the author/staff
   highlights were invisible, and the meta row had no gap
   between the name, the badge and the timestamp ("ReaderAuthorjust now").
   Hoisting to a plain stylesheet makes the vocabulary available
   to every component in the thread tree.
   ============================================================ */

/* ---- Root container ---- */
.comment-section {
    display: flex;
    flex-direction: column;
    gap: var(--os-space-lg);
}

/* ---- Compose area (top-level + reply) ---- */
.comment-section__compose {
    display: flex;
    gap: var(--os-space-sm);
    background-color: var(--os-surface);
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-lg);
    padding: var(--os-space-md);
    box-shadow: var(--os-shadow-sm);
    transition: border-color var(--os-transition-fast), box-shadow var(--os-transition-fast);
}

.comment-section__compose:focus-within {
    border-color: var(--os-primary);
    box-shadow: 0 0 0 3px rgba(var(--os-primary-rgb, 27, 110, 194), 0.12);
}

.comment-section__compose-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--os-radius-full);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6d28d9, #3b1f6e);
    color: #fff;
    font-weight: var(--os-font-weight-semibold);
    font-size: var(--os-font-size-sm);
}

.comment-section__compose-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.comment-section__compose-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--os-space-sm);
}

.comment-section__input {
    width: 100%;
    resize: vertical;
    min-height: 64px;
    background-color: transparent;
    color: var(--os-text-primary);
    border: none;
    padding: 0;
    font-family: var(--os-font-family);
    font-size: var(--os-font-size-md);
    line-height: 1.5;
    box-sizing: border-box;
}

.comment-section__input:focus {
    outline: none;
}

.comment-section__input::placeholder {
    color: var(--os-text-tertiary, var(--os-text-secondary));
}

.comment-section__compose-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--os-space-sm);
}

.comment-section__char-count {
    font-size: var(--os-font-size-xs);
    color: var(--os-text-secondary);
    font-variant-numeric: tabular-nums;
}

.comment-section__compose-buttons {
    display: flex;
    gap: var(--os-space-xs);
}

.comment-section__post-btn {
    padding: var(--os-space-xs) var(--os-space-lg);
    font-size: var(--os-font-size-sm);
    border-radius: var(--os-radius-full);
}

/* ---- Sign-in hint (anonymous users) ---- */
.comment-section__sign-in-hint {
    font-size: var(--os-font-size-sm);
    color: var(--os-text-secondary);
    padding: var(--os-space-md);
    border: 1px dashed var(--os-border);
    border-radius: var(--os-radius-md);
    text-align: center;
    margin: 0;
}

/* ---- Empty state ---- */
.comment-section__empty {
    font-size: var(--os-font-size-sm);
    color: var(--os-text-secondary);
    text-align: center;
    padding: var(--os-space-xl) 0;
    margin: 0;
}

/* ---- Comment list ---- */
.comment-section__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--os-space-md);
}

.comment-section__item {
    display: flex;
    gap: var(--os-space-md);
    padding: var(--os-space-md);
    border-radius: var(--os-radius-lg);
    background-color: var(--os-surface);
    border: 1px solid var(--os-border);
    align-items: flex-start;
    transition: box-shadow var(--os-transition-fast), border-color var(--os-transition-fast);
    position: relative;
}

.comment-section__item:hover {
    box-shadow: var(--os-shadow-sm);
}

/* ---- Avatar ---- */
.comment-section__avatar-wrap {
    width: 40px;
    height: 40px;
    border-radius: var(--os-radius-full);
    overflow: hidden;
    background-color: var(--os-surface-variant);
    flex-shrink: 0;
}

.comment-section__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Avatar fallback (initials) */
.comment-section__avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #6d28d9, #3b1f6e);
    font-weight: var(--os-font-weight-semibold);
    font-size: var(--os-font-size-sm);
}

/* ---- Body ---- */
.comment-section__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--os-space-xs);
}

/* Meta row: author • badge • time */
.comment-section__meta {
    display: flex;
    align-items: center;
    gap: var(--os-space-sm);
    flex-wrap: wrap;
    row-gap: 4px;
}

.comment-section__author {
    font-size: var(--os-font-size-sm);
    font-weight: var(--os-font-weight-semibold);
    color: var(--os-text-primary);
}

/* Explicit bullet separator between identity block and timestamp.
   Uses ::before so it never renders when the badges are absent at
   the start of a row. The badge elements carry their own margin. */
.comment-section__date {
    font-size: var(--os-font-size-xs);
    color: var(--os-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--os-space-sm);
}

.comment-section__date::before {
    content: "·";
    color: var(--os-text-tertiary, var(--os-text-secondary));
    opacity: 0.6;
    font-weight: var(--os-font-weight-bold);
}

.comment-section__edited {
    font-size: var(--os-font-size-xs);
    color: var(--os-text-tertiary, var(--os-text-secondary));
    font-style: italic;
}

/* ---- Text ---- */
.comment-section__text {
    margin: 0;
    font-size: var(--os-font-size-md);
    color: var(--os-text-primary);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-section__text--deleted,
.comment-section__text--hidden {
    color: var(--os-text-tertiary, var(--os-text-secondary));
    font-style: italic;
}

/* Slightly muted background tint distinguishes the moderator-hidden
   placeholder from the author-deleted placeholder so a glance tells
   them apart without reading the text. */
.comment-section__text--hidden {
    padding: var(--os-space-xs) var(--os-space-sm);
    border-radius: var(--os-radius-sm);
    background-color: var(--os-surface-elevated, transparent);
}

/* ---- Action row: likes + reply + edit + delete ---- */
.comment-section__actions {
    display: flex;
    align-items: center;
    gap: var(--os-space-md);
    margin-top: var(--os-space-xs);
    flex-wrap: wrap;
}

.comment-section__likes {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--os-text-secondary);
    font-size: var(--os-font-size-xs);
    user-select: none;
}

.comment-section__like-icon {
    flex-shrink: 0;
    color: var(--os-primary);
    transition: transform var(--os-transition-fast);
}

/* Interactive like toggle — the read-only .comment-section__likes div used
   for anonymous/self-author rows is unchanged. Button variant carries
   cursor + hover chrome, and the --active modifier fills the icon. */
.comment-section__likes--button {
    background: none;
    border: 1px solid transparent;
    padding: 4px 10px;
    margin: -4px -10px;
    border-radius: var(--os-radius-full);
    cursor: pointer;
    transition: background-color var(--os-transition-fast), border-color var(--os-transition-fast);
}

.comment-section__likes--button:hover {
    background-color: color-mix(in srgb, var(--os-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--os-primary) 20%, transparent);
}

.comment-section__likes--button:hover .comment-section__like-icon {
    transform: scale(1.1);
}

.comment-section__likes--active {
    color: var(--os-primary);
    font-weight: var(--os-font-weight-semibold);
}

.comment-section__likes--active .comment-section__like-icon {
    color: var(--os-primary);
}

.comment-section__action-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--os-radius-sm);
    font-size: var(--os-font-size-xs);
    font-weight: var(--os-font-weight-medium);
    color: var(--os-text-secondary);
    cursor: pointer;
    transition: background-color var(--os-transition-fast), color var(--os-transition-fast);
}

.comment-section__action-btn:hover {
    background-color: var(--os-surface-variant);
    color: var(--os-text-primary);
}

.comment-section__action-btn--primary {
    color: var(--os-primary);
}

.comment-section__action-btn--danger {
    color: var(--os-danger, #dc2626);
}

.comment-section__action-btn--danger:hover {
    background-color: color-mix(in srgb, var(--os-danger, #dc2626) 10%, transparent);
    color: var(--os-danger, #dc2626);
}

/* Reply button keeps the old class name for Playwright + external callers. */
.comment-section__reply-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--os-radius-sm);
    font-size: var(--os-font-size-xs);
    font-weight: var(--os-font-weight-medium);
    color: var(--os-primary);
    cursor: pointer;
    transition: background-color var(--os-transition-fast);
}

.comment-section__reply-btn:hover {
    background-color: color-mix(in srgb, var(--os-primary) 10%, transparent);
}

/* ---- Reply compose form ---- */
.comment-section__reply-form {
    margin-top: var(--os-space-sm);
}

/* ---- Edit compose form ---- */
.comment-section__edit-form {
    margin-top: var(--os-space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--os-space-xs);
}

.comment-section__edit-input {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    background-color: var(--os-surface-variant);
    color: var(--os-text-primary);
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-sm);
    padding: var(--os-space-sm);
    font-family: var(--os-font-family);
    font-size: var(--os-font-size-md);
    line-height: 1.5;
    box-sizing: border-box;
}

.comment-section__edit-input:focus {
    outline: none;
    border-color: var(--os-primary);
    box-shadow: 0 0 0 3px rgba(var(--os-primary-rgb, 27, 110, 194), 0.12);
}

/* ---- Delete confirmation banner ---- */
.comment-section__delete-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--os-space-sm);
    margin-top: var(--os-space-xs);
    padding: var(--os-space-sm) var(--os-space-md);
    background-color: color-mix(in srgb, var(--os-danger, #dc2626) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--os-danger, #dc2626) 30%, transparent);
    border-radius: var(--os-radius-md);
    font-size: var(--os-font-size-sm);
    color: var(--os-text-primary);
    flex-wrap: wrap;
}

.comment-section__delete-confirm-actions {
    display: flex;
    gap: var(--os-space-xs);
}

/* ---- Badges (author + staff + edited) ---- */
.comment-section__badge {
    font-size: 10px;
    font-weight: var(--os-font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--os-radius-full);
    line-height: 1.4;
    white-space: nowrap;
}

/* Story author: warm gold/amber */
.comment-section__badge--author {
    background: color-mix(in srgb, #f59e0b 22%, transparent);
    color: #92400e;
    border: 1px solid color-mix(in srgb, #f59e0b 55%, transparent);
}

/* OutaStory staff: platform primary purple */
.comment-section__badge--staff {
    background: color-mix(in srgb, var(--os-primary) 22%, transparent);
    color: var(--os-primary);
    border: 1px solid color-mix(in srgb, var(--os-primary) 55%, transparent);
}

/* ---- Highlighted rows (author / staff) ----
   Scope these to the item only at depth 0; nested (data-depth >= 1) backgrounds
   come from the depth rules below, so we only override the border accent. */
.comment-section__item--author {
    border-left: 3px solid #f59e0b;
    background: color-mix(in srgb, #f59e0b 6%, var(--os-surface));
}

.comment-section__item--staff {
    border-left: 3px solid var(--os-primary);
    background: color-mix(in srgb, var(--os-primary) 7%, var(--os-surface));
}

/* ---- Thread indentation ---- */
.comment-section__replies {
    list-style: none;
    margin: var(--os-space-sm) 0 0;
    padding: 0 0 0 var(--os-space-lg);
    border-left: 2px solid color-mix(in srgb, var(--os-primary) 20%, var(--os-border));
    display: flex;
    flex-direction: column;
    gap: var(--os-space-sm);
}

/* Depth-based surface tinting keeps deep threads legible without drifting
   into a pure grey soup. Highlight classes win via more specific selectors
   for author/staff rows even when nested. */
.comment-section__item[data-depth="1"] {
    background: color-mix(in srgb, var(--os-surface-variant) 35%, var(--os-surface));
}

.comment-section__item[data-depth="2"] {
    background: color-mix(in srgb, var(--os-surface-variant) 60%, var(--os-surface));
}

.comment-section__item[data-depth="3"] {
    background: var(--os-surface-variant);
}

/* Re-assert author/staff tint when the row is nested — selectors combining
   both classes beat the depth attribute's specificity. */
.comment-section__item.comment-section__item--author[data-depth="1"],
.comment-section__item.comment-section__item--author[data-depth="2"],
.comment-section__item.comment-section__item--author[data-depth="3"] {
    background: color-mix(in srgb, #f59e0b 6%, var(--os-surface));
}

.comment-section__item.comment-section__item--staff[data-depth="1"],
.comment-section__item.comment-section__item--staff[data-depth="2"],
.comment-section__item.comment-section__item--staff[data-depth="3"] {
    background: color-mix(in srgb, var(--os-primary) 7%, var(--os-surface));
}

/* ---- Mobile polish ---- */
@media (max-width: 480px) {
    .comment-section__item {
        padding: var(--os-space-sm);
        gap: var(--os-space-sm);
    }

    .comment-section__avatar-wrap {
        width: 32px;
        height: 32px;
    }

    .comment-section__replies {
        padding-left: var(--os-space-md);
    }
}