/* Team comments + flags
   ----------------------
   Per-tile speech-bubble badge in the action row + click-to-open popover.
   Borrows the Mention-popover mechanics (click-toggle-close, Esc, outside-
   click, 180ms fade) + .card-footer-author attribution styling for comment
   bubbles. Purple flag state is the only new token — everything else uses
   existing design tokens from :root.
   See COMMENTS_PLAN.md for the design brief. */

/* ------- Card footer tweak: make room for the badge -------------------- */
/* Original .card-footer was `justify-content: space-between` with 2 spans
   (author / date). A third span would distribute awkwardly; instead we
   left-anchor the author, push date + badge to the right cluster via
   margin-left: auto on date. */
.card-footer { justify-content: flex-start; }
.card-footer-date { margin-left: auto; }

/* ------- Badge ---------------------------------------------------------- */
/* Bare speech-bubble glyph + optional count. No circle, no button shell —
   colour is the only state indicator. Matches the filter-lozenge icon
   treatment so tile + header read as one visual family. */
.tile-comment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-dim, rgba(255,255,255,0.60));
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    transition: color 140ms ease;
}
.tile-comment-badge:hover { color: var(--text, #fff); }
.tile-comment-badge .comment-bubble-icon {
    display: inline-block;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    vertical-align: middle;
}
.tile-comment-badge .badge-count {
    font-weight: 600;
    font-size: 11px;
}
/* Action-row variant — match the heart row's 30 px control height and use
   the same tighter, brighter count treatment so both social counts read as
   a single aligned pair. */
.card-actions-right .tile-comment-badge {
    height: 30px;
    gap: 3px;
}
.card-actions-right .tile-comment-badge .badge-count {
    font-size: 10px;
    font-weight: 700;
}
/* Large tile view: fixed comment slot to match the fixed heart slot in the
   same row. Bubble stays anchored; the number appears inside reserved space
   without pushing either icon around. */
.gallery-grid:not(.list-view) .card-actions-right:has(.tile-comment-badge) .tile-comment-badge {
    display: grid;
    grid-template-columns: 17px 14px;
    column-gap: 3px;
    width: 34px;
    gap: 0;
    align-items: center;
    justify-content: start;
}
.gallery-grid:not(.list-view) .card-actions-right:has(.tile-comment-badge) .tile-comment-badge .badge-count {
    display: block;
    width: 14px;
    text-align: right;
    transform: translateX(-2px);
}
.gallery-grid.list-view .card-actions-right .tile-comment-badge {
    display: grid;
    grid-template-columns: 17px 14px;
    column-gap: 3px;
    width: 34px;
    gap: 0;
    align-items: center;
    justify-content: start;
}
.gallery-grid.list-view .card-actions-right .tile-comment-badge .badge-count {
    display: block;
    width: 14px;
    text-align: right;
    transform: translateX(-2px);
}
/* Modal footers (audio preview lightbox + image/video editor overlays):
   apply the same fixed 34px slot so heart + bubble don't shift sideways
   when a comment count arrives. Without this rule the badge widens
   reactively (gap + count width) and pushes the heart leftward. With
   the grid-template, the bubble icon parks at the left of the slot,
   the count appears in the reserved 14px on its right; nothing else
   moves regardless of count digits. */
.preview-actions-row .card-actions-right .tile-comment-badge,
.editor-actions-row .card-actions-right .tile-comment-badge {
    display: grid;
    grid-template-columns: 17px 14px;
    column-gap: 3px;
    width: 34px;
    gap: 0;
    align-items: center;
    justify-content: start;
}
.preview-actions-row .card-actions-right .tile-comment-badge .badge-count,
.editor-actions-row .card-actions-right .tile-comment-badge .badge-count {
    display: block;
    width: 14px;
    text-align: right;
    transform: translateX(-2px);
}

/* Has-comments or is-flagged: bubble goes purple either way. A flag is
   semantically "a no-content comment" — both states mean the tile has
   team attention on it. Count number is only rendered when comments > 0,
   so a flagged-only tile shows a bare purple bubble. */
.tile-comment-badge.has-comments,
.tile-comment-badge.is-flagged { color: var(--flag, #a855f7); }
.tile-comment-badge.has-comments:hover,
.tile-comment-badge.is-flagged:hover { filter: brightness(1.15); }

/* Grid view: same everywhere. List view: badge sits on the right edge of
   the footer column alongside the date — no extra rule needed since the
   list-view footer uses a flex-column layout where badge naturally wraps
   below the date. */

/* ------- Popover ------------------------------------------------------- */
/* Anchored to the clicked badge, auto-flipped above/below on the viewport
   edge. Non-modal — click outside or Esc dismisses. 180ms fade-in matches
   the Mention-popover timing. */
.comment-popover {
    position: fixed;  /* use viewport coords so tile scroll doesn't detach */
    z-index: 10050;   /* above modals (200-250), below error toast (100000) */
    width: min(540px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: 480px;
    background: var(--bg-card, #2a2a2a);
    border: 1px solid var(--border, #3a3a3a);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}
.comment-popover.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.comment-popover.flip-above {
    transform: translateY(4px);
}
.comment-popover.flip-above.is-visible {
    transform: translateY(0);
}

.comment-popover-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 14px;
    border-bottom: 1px solid var(--border, #3a3a3a);
    font-size: 12px;
    color: var(--text-dim, rgba(255,255,255,0.60));
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.comment-popover-title {
    flex: 1 1 auto;
}
.comment-flag-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-light, rgba(255,255,255,0.08));
    background: transparent;
    color: var(--text-dim, rgba(255,255,255,0.60));
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
    transition: all 140ms ease;
}
.comment-flag-toggle:hover {
    border-color: var(--border, #3a3a3a);
    color: var(--text, #fff);
}
.comment-flag-toggle.is-on {
    background: var(--flag, #a855f7);
    border-color: var(--flag, #a855f7);
    color: #fff;
}
.comment-flag-toggle.is-on:hover {
    filter: brightness(1.12);
}
.comment-flag-toggle svg {
    width: 15px;
    height: 15px;
    display: block;
}
.comment-popover-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-dim, rgba(255,255,255,0.60));
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
    transition: color 140ms ease;
}
.comment-popover-close:hover { color: var(--text, #fff); }

/* Thread area — scrollable when overflowing. Each comment is a .comment-
   bubble with its own avatar + text. Borrowed styling from .agent-bubble
   but tighter (less padding, no streaming affordances). */
.comment-popover-thread {
    flex: 0 1 auto;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 340px;
}
/* Empty state collapses so the popover is just a single-line composer. The
   input's "Comment" placeholder is the affordance. */
.comment-popover-thread:empty { padding: 0; }
.comment-bubble {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    position: relative;
}
.comment-avatar {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, var(--accent));
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.comment-body {
    flex: 1 1 auto;
    min-width: 0;
}
.comment-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    color: var(--text-dim, rgba(255,255,255,0.60));
    margin-bottom: 2px;
}
.comment-meta-name {
    color: var(--text, #fff);
    font-weight: 600;
    font-size: 12px;
}
.comment-meta-time {
    font-variant-numeric: tabular-nums;
}
.comment-text {
    color: var(--text, #fff);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.comment-delete-btn {
    position: absolute;
    top: 2px;
    right: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, rgba(255,255,255,0.35));
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: none;
    transition: all 140ms ease;
}
.comment-bubble:hover .comment-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.comment-delete-btn:hover {
    color: rgba(239, 68, 68, 0.9);
    background: rgba(239, 68, 68, 0.08);
}

.comment-thread-loading,
.comment-thread-error {
    color: var(--text-muted, rgba(255,255,255,0.35));
    font-size: 12px;
    font-style: italic;
    text-align: center;
    padding: 10px;
}
.comment-thread-error { color: rgba(239, 68, 68, 0.9); font-style: normal; }

/* Input row — textarea + send button. Mimics the AGENT composer's send
   button shape so the visual language carries. */
.comment-popover-footer {
    padding: 8px 10px 10px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex: 0 0 auto;
}
.comment-input {
    flex: 1 1 auto;
    min-height: 30px;
    max-height: 120px;
    resize: none;
    padding: 6px 10px;
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 6px;
    background: var(--bg-input, #252525);
    color: var(--text, #fff);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    outline: none;
    transition: border-color 140ms ease;
}
.comment-input:focus {
    border-color: var(--accent, var(--accent));
}
.comment-input::placeholder {
    color: var(--text-placeholder, rgba(255,255,255,0.25));
}
/* Send button — matches the AGENT send button shell exactly (30x30, 6px
   radius, filled accent, white ↑ glyph). Always visually active — never
   disabled-greyed. Empty-text click focuses the textarea instead of
   dispatching, so the button never reads as broken. */
.comment-send-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--accent, var(--accent));
    color: #fff;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 140ms ease;
}
.comment-send-btn:hover { background: var(--accent-hover, var(--accent-hover)); }
.comment-send-btn svg { width: 14px; height: 14px; display: block; }

/* Edit state inside a comment bubble — inline textarea replaces the text. */
.comment-bubble.is-editing .comment-text { display: none; }
.comment-edit-box {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.comment-bubble.is-editing .comment-edit-box { display: flex; }
.comment-edit-input {
    width: 100%;
    min-height: 32px;
    max-height: 160px;
    padding: 6px 10px;
    border: 1px solid var(--accent, var(--accent));
    border-radius: 6px;
    background: var(--bg-input, #252525);
    color: var(--text, #fff);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    resize: vertical;
    outline: none;
}
.comment-edit-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.comment-edit-btn-save,
.comment-edit-btn-cancel {
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid var(--border, #3a3a3a);
    background: transparent;
    color: var(--text-dim, rgba(255,255,255,0.60));
    font-size: 11px;
    cursor: pointer;
}
.comment-edit-btn-save {
    background: var(--accent, var(--accent));
    border-color: var(--accent, var(--accent));
    color: #fff;
}
.comment-edit-btn-save:hover { background: var(--accent-hover, var(--accent-hover)); }
.comment-edit-btn-cancel:hover { color: var(--text, #fff); }

/* Pencil button sits next to the × on own comments; both hover-reveal. */
.comment-edit-btn {
    position: absolute;
    top: 2px;
    right: 22px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, rgba(255,255,255,0.35));
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: none;
    transition: all 140ms ease;
}
.comment-bubble:hover .comment-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.comment-edit-btn:hover { color: var(--text, #fff); background: rgba(255,255,255,0.06); }
.comment-meta-edited {
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,0.35));
    font-style: italic;
}