.ce-v6-comment-header {
    grid-column: 2 / 3; /* Span content column */
    position: relative;
    z-index: 1;
    display: flex; /* Use flex for alignment */
    gap: var(--ce-space-sm);
    align-items: center;
    /* Reserve space on the right for the dopamine badge so it doesn't overlap menu/meta */
    padding-right: 44px;
}

/* Dopamine badge (top-right) */
.ce-v6-dopamine-badge{
    position:absolute; right: 8px; top: 6px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    padding: 4px 8px; font-size:.8rem; line-height:1;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    pointer-events: none; /* never block clicks on the menu or header */
    z-index: 5;
}
.ce-v6-dopamine-badge.good{ color:#ef4444; filter: drop-shadow(0 2px 6px rgba(239,68,68,.25)); }
.ce-v6-dopamine-badge.dead{ color:#64748b; transform: rotate(12deg); transform-origin: 80% 50%; }
@media (max-width:640px){ 
    .ce-v6-comment-header{ padding-right: 38px; }
    .ce-v6-dopamine-badge{ padding:3px 6px; font-size:.75rem; right:6px; top:4px; }
}
/* Followed chip */
.ce-v6-followed-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    color: #065f46;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
}
.ce-v6-followed-chip::before { content: '✓'; font-weight: 700; }
.ce-v6-comment-avatar {
    grid-row: 1 / 3; /* Span two rows */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.05);
    border: none;
    box-shadow: none;
    position: relative; /* For reaction buttons */
    z-index: 10; /* Ensure avatar is on top */
}

/* Avatar stack: avatar + level chip below (COD-style) */
.ce-v6-avatar-stack { display: grid; grid-template-rows: auto auto; align-items: center; justify-items: center; gap: 4px; position: relative; }
.ce-v6-avatar-stack { --ce-ring-gradient: linear-gradient(135deg, #a855f7, #22d3ee); }
.ce-v6-avatar-stack.ce-v6-level-elite { --ce-ring-gradient: linear-gradient(135deg, #22c55e, #3b82f6); }
.ce-v6-avatar-stack.ce-v6-level-beginner { --ce-ring-gradient: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.ce-v6-avatar-stack > .ce-v6-comment-avatar { position: relative; z-index: 1; background: rgba(0,0,0,0.06); border: 2px solid #fff; }
.ce-v6-comment-avatar::before {
    content: none; /* remove ring overlay to show full profile image */
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        padding: 2px; /* ring thickness */
        background: var(--ce-ring-gradient);
        -webkit-mask:
            radial-gradient(farthest-side, #000 99%, transparent) content-box,
            radial-gradient(farthest-side, #000 99%, transparent);
        -webkit-mask-composite: xor;
                        mask-composite: exclude;
        mask:
            radial-gradient(farthest-side, #000 99%, transparent) content-box,
            radial-gradient(farthest-side, #000 99%, transparent);
        pointer-events: none;
}

.ce-v6-level-chip {
        z-index: 1;
        background: rgba(17, 24, 39, 0.92);
        color: #fff;
        padding: 2px 6px;
        border-radius: 999px;
        font-size: 10px;
        line-height: 1;
        border: 1px solid rgba(255,255,255,0.18);
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

@media (max-width: 640px){
    .ce-v6-comment-avatar { width: 36px; height: 36px; }
        /* thinner ring on small screens */
        .ce-v6-comment-avatar::before { inset: -1.5px; padding: 1.5px; }
    .ce-v6-level-chip { font-size: 9px; padding: 2px 6px; }
}

.ce-v6-comment-avatar:hover .ce-v6-reactions {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.ce-v6-comment-user-info {
    display: flex;
    flex-direction: row; /* Align items horizontally */
    gap: var(--ce-space-sm);
    align-items: baseline;
    min-width: 0;
}

/* Compact timestamp next to avatar on small screens */
@media (max-width: 640px){
    .ce-v6-comment-header{ align-items: flex-start; }
    .ce-v6-comment-user-info{ flex-direction: column; align-items: flex-start; gap: 6px; }
    /* pull the live-clock next to the avatar area */
    .ce-v6-comment-header .ce-v6-live-clock{ margin-left: 4px; }
}
.ce-v6-comment-username { 
    display: inline-flex; 
    align-items: center; 
    gap: clamp(6px, 1.8vw, 10px); 
    font-weight: 600; 
    color: var(--ce-text-primary); 
    font-size: 0.95rem; 
}
.ce-v6-comment-username a { color: inherit; text-decoration: none; }
.ce-v6-comment-username a:hover { text-decoration: underline; }
.ce-v6-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    color: var(--ce-text-secondary);
    font-size: 0.8rem;
}
.ce-v6-comment-meta > * {
    background: none;
    color: var(--ce-text-secondary);
    padding: 0;
    border-radius: 0;
    line-height: 1.2;
}
.ce-v6-comment-meta .ce-v6-meta-pill {
   display: none; /* Hide pills for a cleaner look */
}

.ce-v6-comment-menu { 
    margin-left: auto; /* Push to the far right */
    position: relative; /* anchor for dropdown */
    z-index: 20; /* above reactions */
}
.ce-v6-comment-menu .ce-v6-btn-icon { 
    border-radius: 50%; 
    background: transparent; 
    border-color: transparent; 
    color: var(--ce-text-muted);
    width: 32px;
    height: 32px;
    display: inline-grid; place-items: center;
    cursor: pointer;
}
.ce-v6-comment-menu .ce-v6-btn-icon:hover { 
    background: rgba(0,0,0,0.05); 
    color: var(--ce-text-primary);
}

/* Dropdown menu */
.ce-v6-menu-dropdown {
    position: absolute;
    top: 36px; /* below the icon */
    right: 0;
    min-width: 210px;
    background: var(--ce-glass-bg, rgba(255,255,255,.96));
    border: 1px solid var(--ce-glass-border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.12);
    padding: 8px 0;
    display: none;
    z-index: 50; /* float above badges/reactions */
}
.ce-v6-menu-dropdown.show { display: block; }
.ce-v6-menu-item { padding: 8px 12px; font-size: .9rem; color: var(--ce-text-primary); cursor: pointer; display:flex; align-items:center; gap:8px; }
.ce-v6-menu-item:hover { background: rgba(0,0,0,.05); }