/**
 * Reverie House Color System
 * 
 * Standardized color application system for events and UI elements.
 * Combines color sources (user, role, octant) with intensity levels (none, highlight, special).
 * 
 * Color Sources:
 * - user: Uses the dreamer's personal color (from color_hex field)
 * - role: Uses role-specific colors (greeter=blue, mapper=green, cogitarian=orange)
 * - octant: Uses octant-based colors (from octants.css)
 * - none: No special coloring (default styling)
 * 
 * Intensity Levels:
 * - none: Minimal coloring (e.g., just text or subtle border)
 * - faded: Very subtle, 50% transparency tint
 * - highlight: Noticeable background tint, suitable for rows
 * - special: Strong emphasis, used for canon events and important items
 */

/* ============================================================================
   FALLBACK / DEFAULT STYLES
   ============================================================================ */

/* Default row layout and backgrounds (when no special coloring) */
.row-entry {
    display: flex;
    padding: 6px 0 6px 4px;
    border-bottom: 1px solid var(--border, #d0c7f0);
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1.2;
    transition: background 0.15s;
    width: 100%;
    align-items: center;
    min-height: 32px;
    background: #f0f0f0;
    border-left: 4px solid transparent;
    color: #333;
}

.row-entry:nth-child(even) {
    background: var(--bg-white, #ffffff);
}

/* Hover effect - subtle overlay that works with any row color */
.row-entry:hover {
    filter: brightness(0.97);
}

/* Cell layout */
.row-entry .cell {
    padding: 0 1px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.row-entry .cell:first-child {
    padding-left: 32px;
}

.row-entry .cell:last-child {
    padding-right: 32px;
}

/* Column-specific widths (matching database.css) */
.row-entry .cell.epoch {
    flex: 0 0 110px;
    justify-content: flex-start;
}

.row-entry .cell.thread-arrow {
    flex: 0 0 16px;
    justify-content: flex-start;
    padding: 0;
}

.row-entry .cell.avatar {
    flex: 0 0 24px;
    justify-content: center;
    padding: 0;
}

.row-entry .cell.type {
    flex: 0 0 100px;
    justify-content: flex-start;
}

.row-entry .cell.canon {
    flex: 1 1 250px;
    justify-content: flex-start;
    text-align: left;
    padding-left: 8px;
}

.row-entry .cell.key {
    flex: 0 0 110px;
    justify-content: flex-start;
}

.row-entry .cell.uri {
    flex: 0 0 95px;
    justify-content: flex-start;
}

/* Avatar image sizing */
.row-entry .avatar-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
}

/* Thread arrow styling for reactions */
.row-entry .cell.thread-arrow .thread-arrow-icon {
    color: var(--primary);
    font-size: 1.4em;
    opacity: 0.8;
    position: relative;
    top: -3px;
}

/* Default rows with no color source - explicit black text */
.row-entry:not(.color-user):not(.color-role):not(.color-octant):not(.color-souvenir) {
    color: #333;
}

/* ============================================================================
   USER COLOR SYSTEM (Dreamer-specific colors)
   ============================================================================ */

/* None intensity - minimal user color (just a subtle accent) */
.color-user.intensity-none {
    border-left: 2px solid var(--user-color, #8b7355);
    color: color-mix(in srgb, var(--user-color, #8b7355) 60%, #333);
}

/* Highlight intensity - subtle background tint */
.row-entry.color-user.intensity-highlight {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--user-color, #8b7355) 15%, transparent) 0%,
        color-mix(in srgb, var(--user-color, #8b7355) 3%, transparent) 100%
    );
    border-left: 2px solid var(--user-color, #8b7355);
    border-right: none;
    color: color-mix(in srgb, var(--user-color, #8b7355) 85%, #000);
}

/* Special intensity - canon/important highlighting */
.row-entry.color-user.intensity-special {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--user-color, #8b7355) 30%, transparent) 0%,
        color-mix(in srgb, var(--user-color, #8b7355) 8%, transparent) 100%
    );
    border-left: 4px solid var(--user-color, #8b7355);
    border-right: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--user-color, #8b7355) 35%, transparent);
    color: color-mix(in srgb, var(--user-color, #8b7355) 92%, #000);
    font-weight: 600;
}

/* Apply user color uniformly to all cells */
.row-entry.color-user .cell,
.row-entry.color-user .cell * {
    color: inherit;
}

/* Force event text to inherit row color (override inline --text-secondary) */
.row-entry.color-user .cell span[style*="color: var(--text-secondary)"],
.row-entry.color-user.intensity-highlight .cell span,
.row-entry.color-user.intensity-special .cell span {
    color: inherit !important;
}

/* Fallback for browsers that don't support color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    .color-user.intensity-highlight {
        background: rgba(139, 115, 85, 0.1);
        color: #6b5945;
    }
    
    .color-user.intensity-special {
        background: rgba(139, 115, 85, 0.18);
        box-shadow: inset 0 0 0 1px rgba(139, 115, 85, 0.25);
        color: #5b4935;
        font-weight: 500;
    }
}

/* ============================================================================
   DREAM EVENT - Like canon but with #454545, blurred until hovered
   Matches canon intensity-special style but forces grey and adds blur
   ============================================================================ */

.row-entry.event-key-dream.color-user.intensity-special {
    /* Force grey color like a user with #454545 */
    --dream-color: #454545;
    
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--dream-color) 30%, transparent) 0%,
        color-mix(in srgb, var(--dream-color) 8%, transparent) 100%
    );
    border-left: 4px solid var(--dream-color);
    border-right: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dream-color) 35%, transparent);
    color: color-mix(in srgb, var(--dream-color) 92%, #000);
    font-weight: 600;
}

/* Force dream event text to inherit grey color */
.row-entry.event-key-dream.color-user.intensity-special .cell span[style*="color: var(--text-secondary)"],
.row-entry.event-key-dream.color-user.intensity-special .cell span {
    color: inherit !important;
}

/* Blur effect on all cell content - unreadable by default */
.row-entry.event-key-dream.color-user.intensity-special .cell,
.row-entry.event-key-dream.color-user.intensity-special img {
    filter: blur(2.5px);
    transition: filter 0.4s ease-out;
}

/* Clear on hover - readable */
.row-entry.event-key-dream.color-user.intensity-special:hover .cell,
.row-entry.event-key-dream.color-user.intensity-special:hover img {
    filter: blur(0px);
}

/* Override for "ventured a strange dream" - use default styling */
.row-entry.event-key-dream.souvenir-strange {
    background: none;
    border-left: 4px solid transparent;
    box-shadow: none;
    animation: none;
    font-weight: normal;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    .event-key-dream.color-user.intensity-special {
        background: linear-gradient(
            to right,
            rgba(69, 69, 69, 0.30) 0%,
            rgba(69, 69, 69, 0.08) 100%
        );
        border-left: 4px solid #454545;
        box-shadow: inset 0 0 0 1px rgba(69, 69, 69, 0.35);
        color: #3a3a3a;
        font-weight: 600;
    }
}

/* ============================================================================
   NIGHTMARE STYLE - Dark smokey animated for "prepares for the ending"
   ============================================================================ */

.row-entry.event-type-nightmare.intensity-special {
    background:
        /* Primary smoke layers with animated stripes */
        repeating-linear-gradient(
            90deg,
            rgba(35, 35, 45, 0.8) 0px,
            rgba(50, 50, 60, 0.85) 20px,
            rgba(40, 40, 50, 0.8) 40px,
            rgba(55, 55, 65, 0.85) 60px,
            rgba(35, 35, 45, 0.8) 80px
        ),
        /* Deep atmospheric gradients */
        radial-gradient(
            ellipse at 20% 30%,
            rgba(70, 70, 85, 0.6) 0%,
            rgba(50, 50, 65, 0.4) 40%,
            transparent 70%
        ),
        radial-gradient(
            ellipse at 80% 70%,
            rgba(60, 60, 75, 0.5) 0%,
            rgba(45, 45, 60, 0.3) 50%,
            transparent 80%
        ),
        /* Base dark gradient */
        linear-gradient(
            to right,
            rgba(40, 40, 50, 0.9) 0%,
            rgba(55, 55, 65, 0.95) 40%,
            rgba(50, 50, 60, 0.9) 60%,
            rgba(40, 40, 50, 0.9) 100%
        );
    background-size: 300% 100%, 120% 120%, 140% 140%, 100% 100%;
    border-left: 3px solid #2a2a35;
    border-right: none;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.06),
        inset -2px 0 4px rgba(0, 0, 0, 0.2),
        0 3px 8px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    position: relative;
    animation:
        nightmareSmoke 25s linear infinite,
        nightmarePulse 8s ease-in-out infinite;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Enhanced smoke animation with multiple layers */
@keyframes nightmareSmoke {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
    25% {
        background-position: 25% 5%, -5% -3%, 8% 2%, 0% 0%;
    }
    50% {
        background-position: 50% -5%, -10% 5%, -5% -8%, 0% 0%;
    }
    75% {
        background-position: 75% 3%, 5% -2%, 12% 5%, 0% 0%;
    }
    100% {
        background-position: 100% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

/* Subtle pulsing effect for added tension */
@keyframes nightmarePulse {
    0%, 100% {
        filter: brightness(1) contrast(1);
    }
    50% {
        filter: brightness(1.05) contrast(1.02);
    }
}

/* Apply white uniformly to all cells */
.row-entry.event-type-nightmare.intensity-special .cell,
.row-entry.event-type-nightmare.intensity-special .cell * {
    color: #ffffff !important;
    position: relative;
    z-index: 1;
}

/* Override grey event text color for nightmare rows */
.row-entry.event-type-nightmare.intensity-special .cell span[style*="font-style: italic"],
.row-entry.event-type-nightmare.intensity-special .cell span[style*="color: var(--text-secondary)"] {
    color: #ffffff !important;
}

/* Enhanced floating smoke particles with proper layering */
.row-entry.event-type-nightmare.intensity-special::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background:
        /* Primary smoke wisps */
        radial-gradient(circle at 15% 25%, rgba(220, 220, 235, 0.18) 0%, transparent 8%),
        radial-gradient(circle at 45% 75%, rgba(210, 210, 225, 0.15) 0%, transparent 6%),
        radial-gradient(circle at 75% 35%, rgba(225, 225, 240, 0.16) 0%, transparent 7%),
        radial-gradient(circle at 85% 85%, rgba(215, 215, 230, 0.14) 0%, transparent 5%),
        /* Secondary finer particles */
        radial-gradient(circle at 35% 50%, rgba(230, 230, 245, 0.08) 0%, transparent 3%),
        radial-gradient(circle at 65% 15%, rgba(235, 235, 250, 0.06) 0%, transparent 4%),
        radial-gradient(circle at 5% 65%, rgba(225, 225, 240, 0.07) 0%, transparent 3%);
    background-size: 100% 100%;
    pointer-events: none;
    animation: smokeParticles 18s ease-in-out infinite;
    z-index: 0;
}

/* Independent particle animation */
@keyframes smokeParticles {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(0px) translateY(0px);
    }
    25% {
        opacity: 0.8;
        transform: translateX(2px) translateY(-1px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-1px) translateY(1px);
    }
    75% {
        opacity: 0.7;
        transform: translateX(1px) translateY(-0.5px);
    }
}
    opacity: 0.6;
    animation: smokeParticles 15s ease-in-out infinite;
}

@keyframes smokeParticles {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-2px);
    }
}

/* ============================================================================
   DISSIPATE STYLE - Faded grey mist for departed dreamers
   ============================================================================ */

.row-entry.event-type-dissipate.intensity-faded {
    background:
        /* Base misty gradient */
        linear-gradient(
            to right,
            rgba(160, 160, 165, 0.08) 0%,
            rgba(180, 180, 185, 0.04) 30%,
            rgba(170, 170, 175, 0.06) 60%,
            transparent 100%
        ),
        /* Subtle mist particles */
        radial-gradient(
            circle at 25% 40%,
            rgba(200, 200, 210, 0.03) 0%,
            transparent 8%
        ),
        radial-gradient(
            circle at 75% 60%,
            rgba(190, 190, 200, 0.02) 0%,
            transparent 6%
        );
    background-size: 100% 100%, 100% 100%, 100% 100%;
    border-left: 2px solid rgba(140, 140, 145, 0.3);
    border-right: none;
    color: #888;
    opacity: 0.6;
    filter: grayscale(0.9) blur(0.3px);
    position: relative;
    animation: dissipateDrift 45s ease-in-out infinite;
    overflow: hidden;
}

/* Subtle drifting animation for the mist */
@keyframes dissipateDrift {
    0%, 100% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
        opacity: 0.6;
    }
    25% {
        background-position: 5% 2%, -2% 1%, 3% -1%;
        opacity: 0.55;
    }
    50% {
        background-position: -3% -2%, 4% -1%, -1% 2%;
        opacity: 0.5;
    }
    75% {
        background-position: 2% -3%, -4% 2%, 1% 1%;
        opacity: 0.55;
    }
}

/* Apply grey uniformly to all cells */
.row-entry.event-type-dissipate.intensity-faded .cell,
.row-entry.event-type-dissipate.intensity-faded .cell * {
    color: inherit;
    position: relative;
    z-index: 1;
}

/* Force event text to inherit faded grey color */
.row-entry.event-type-dissipate.intensity-faded .cell span[style*="color: var(--text-secondary)"],
.row-entry.event-type-dissipate.intensity-faded .cell span {
    color: inherit !important;
}

/* Subtle border fade effect */
.row-entry.event-type-dissipate.intensity-faded::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(160, 160, 165, 0.05) 20%,
        rgba(160, 160, 165, 0.02) 80%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* ============================================================================
   ROLE COLOR SYSTEM (Worker roles: greeter, mapper, cogitarian)
   ============================================================================ */

/* Greeter - Calm cyan tones */
.row-entry.color-role.role-greeter.intensity-none {
    border-left: 2px solid var(--role-greeter);
    color: color-mix(in srgb, var(--role-greeter) 80%, #333);
}

.row-entry.color-role.role-greeter.intensity-highlight {
    background: linear-gradient(
        to right,
        var(--role-greeter-medium) 0%,
        var(--role-greeter-light) 50%,
        transparent 100%
    );
    border-left: 3px solid var(--role-greeter);
    border-right: none;
    color: var(--role-greeter-dark);
}

.row-entry.color-role.role-greeter.intensity-special {
    background: linear-gradient(
        to right,
        var(--role-greeter-medium) 0%,
        var(--role-greeter-light) 100%
    );
    border-left: 4px solid var(--role-greeter);
    border-right: none;
    box-shadow: inset 0 0 0 1px var(--role-greeter-light);
    color: var(--role-greeter-dark);
    font-weight: 600;
}

/* Apply greeter color uniformly to all cells */
.row-entry.color-role.role-greeter .cell,
.row-entry.color-role.role-greeter .cell * {
    color: inherit;
}

/* Force event text to inherit greeter color */
.row-entry.color-role.role-greeter .cell span[style*="color: var(--text-secondary)"],
.row-entry.color-role.role-greeter.intensity-highlight .cell span,
.row-entry.color-role.role-greeter.intensity-special .cell span {
    color: inherit !important;
}

/* Mapper - Natural lime tones */
.row-entry.color-role.role-mapper.intensity-none {
    border-left: 2px solid var(--role-mapper);
    color: color-mix(in srgb, var(--role-mapper) 80%, #333);
}

.row-entry.color-role.role-mapper.intensity-highlight {
    background: linear-gradient(
        to right,
        var(--role-mapper-medium) 0%,
        var(--role-mapper-light) 50%,
        transparent 100%
    );
    border-left: 3px solid var(--role-mapper);
    border-right: none;
    color: var(--role-mapper-dark);
}

.row-entry.color-role.role-mapper.intensity-special {
    background: linear-gradient(
        to right,
        var(--role-mapper-medium) 0%,
        var(--role-mapper-light) 100%
    );
    border-left: 4px solid var(--role-mapper);
    border-right: none;
    box-shadow: inset 0 0 0 1px var(--role-mapper-light);
    color: var(--role-mapper-dark);
    font-weight: 600;
}

/* Apply mapper color uniformly to all cells */
.row-entry.color-role.role-mapper .cell,
.row-entry.color-role.role-mapper .cell * {
    color: inherit;
}

/* Force event text to inherit mapper color */
.row-entry.color-role.role-mapper .cell span[style*="color: var(--text-secondary)"],
.row-entry.color-role.role-mapper.intensity-highlight .cell span,
.row-entry.color-role.role-mapper.intensity-special .cell span {
    color: inherit !important;
}

/* Cogitarian - Orange-red tones */
.row-entry.color-role.role-cogitarian.intensity-none {
    border-left: 2px solid var(--role-cogitarian);
    color: color-mix(in srgb, var(--role-cogitarian) 80%, #333);
}

.row-entry.color-role.role-cogitarian.intensity-highlight {
    background: linear-gradient(
        to right,
        var(--role-cogitarian-light) 0%,
        transparent 100%
    );
    border-left: 2px solid var(--role-cogitarian);
    border-right: none;
    color: color-mix(in srgb, var(--role-cogitarian) 95%, #000);
}

.row-entry.color-role.role-cogitarian.intensity-special {
    background: linear-gradient(
        to right,
        var(--role-cogitarian-medium) 0%,
        var(--role-cogitarian-light) 100%
    );
    border-left: 3px solid var(--role-cogitarian);
    border-right: none;
    box-shadow: inset 0 0 0 1px var(--role-cogitarian-light);
    color: color-mix(in srgb, var(--role-cogitarian) 90%, #000);
    font-weight: 500;
}

/* Provisioner - Harvest wheat yellow tones */
.row-entry.color-role.role-provisioner.intensity-none {
    border-left: 2px solid var(--role-provisioner);
    color: color-mix(in srgb, var(--role-provisioner) 80%, #333);
}

.row-entry.color-role.role-provisioner.intensity-highlight {
    background: linear-gradient(
        to right,
        var(--role-provisioner-medium) 0%,
        var(--role-provisioner-light) 50%,
        transparent 100%
    );
    border-left: 3px solid var(--role-provisioner);
    border-right: none;
    color: var(--role-provisioner-dark);
}

.row-entry.color-role.role-provisioner.intensity-special {
    background: linear-gradient(
        to right,
        var(--role-provisioner-medium) 0%,
        var(--role-provisioner-light) 100%
    );
    border-left: 4px solid var(--role-provisioner);
    border-right: none;
    box-shadow: inset 0 0 0 1px var(--role-provisioner-light);
    color: var(--role-provisioner-dark);
    font-weight: 600;
}

/* Apply provisioner color uniformly to all cells */
.row-entry.color-role.role-provisioner .cell,
.row-entry.color-role.role-provisioner .cell * {
    color: inherit;
}

/* Force event text to inherit provisioner color */
.row-entry.color-role.role-provisioner .cell span[style*="color: var(--text-secondary)"],
.row-entry.color-role.role-provisioner.intensity-highlight .cell span,
.row-entry.color-role.role-provisioner.intensity-special .cell span {
    color: inherit !important;
}

/* ============================================================================
   OCTANT COLOR SYSTEM (Spectrum-based coloring)
   ============================================================================ */

/* Octant coloring follows same intensity pattern as roles */

/* None intensity - minimal octant color */
.color-octant.intensity-none {
    border-left: 2px solid var(--octant-color, #888);
}

/* Highlight intensity - noticeable octant background */
.color-octant.intensity-highlight {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--octant-color, #888) 12%, transparent) 0%,
        transparent 100%
    );
    border-left: 2px solid var(--octant-color, #888);
    border-right: none;
    color: color-mix(in srgb, var(--octant-color, #888) 90%, #000);
}

/* Special intensity - strong octant emphasis */
.color-octant.intensity-special {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--octant-color, #888) 20%, transparent) 0%,
        color-mix(in srgb, var(--octant-color, #888) 5%, transparent) 100%
    );
    border-left: 3px solid var(--octant-color, #888);
    border-right: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--octant-color, #888) 25%, transparent);
    color: color-mix(in srgb, var(--octant-color, #888) 95%, #000);
    font-weight: 500;
}

/* Apply octant color uniformly to all cells */
.row-entry.color-octant .cell,
.row-entry.color-octant .cell * {
    color: inherit;
}

/* Force event text to inherit octant color */
.row-entry.color-octant .cell span[style*="color: var(--text-secondary)"],
.row-entry.color-octant.intensity-highlight .cell span,
.row-entry.color-octant.intensity-special .cell span {
    color: inherit !important;
}

/* Specific octant classes - these set the --octant-color variable */
.octant-adaptive { --octant-color: var(--octant-adaptive-dark); }
.octant-chaotic { --octant-color: var(--octant-chaotic-dark); }
.octant-intended { --octant-color: var(--octant-intended-dark); }
.octant-prepared { --octant-color: var(--octant-prepared-dark); }
.octant-contented { --octant-color: var(--octant-contented-dark); }
.octant-assertive { --octant-color: var(--octant-assertive-dark); }
.octant-ordered { --octant-color: var(--octant-ordered-dark); }
.octant-guarded { --octant-color: var(--octant-guarded-dark); }
.octant-equilibrium { --octant-color: var(--octant-equilibrium-dark); }
.octant-confused { --octant-color: var(--octant-confused-dark); }
.octant-singling { --octant-color: var(--octant-singling-dark); }
.octant-uncertain { --octant-color: var(--octant-uncertain-dark); } /* legacy alias */

/* Fallback for browsers that don't support color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    .color-octant.intensity-highlight {
        background: rgba(100, 150, 100, 0.08);
    }
    
    .color-octant.intensity-special {
        background: rgba(100, 150, 100, 0.15);
        box-shadow: inset 0 0 0 1px rgba(100, 150, 100, 0.2);
        font-weight: 500;
    }
}

/* ============================================================================
   NONE COLOR SYSTEM (Default/neutral styling)
   ============================================================================ */

.color-none {
    /* No special coloring, uses default table row styling */
}

/* ============================================================================
   HELPER UTILITIES
   ============================================================================ */

/* Icon/badge coloring for role indicators */
.role-badge-greeter {
    color: var(--role-greeter);
    background: var(--role-greeter-light);
    border: 1px solid var(--role-greeter);
}

.role-badge-mapper {
    color: var(--role-mapper);
    background: var(--role-mapper-light);
    border: 1px solid var(--role-mapper);
}

.role-badge-cogitarian {
    color: var(--role-cogitarian);
    background: var(--role-cogitarian-light);
    border: 1px solid var(--role-cogitarian);
}

/* Text emphasis for special events */
.event-special-text {
    font-weight: 600;
}

/* Hover states for colored rows */
.color-user:hover,
.color-role:hover,
.color-octant:hover {
    filter: brightness(0.95) saturate(1.1);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   THREAD LEVEL STYLES (for reaction threading)
   ============================================================================ */

/* Thread level 1 (reactions) */
.thread-level-1 {
    background: rgba(0, 0, 0, 0.03);
    border-left: 4px solid rgba(0, 123, 255, 0.3);
    opacity: 0.9;
}

/* Thread level 2+ (nested reactions) */
.thread-level-2 {
    background: rgba(0, 0, 0, 0.02);
    border-left: 4px solid rgba(0, 123, 255, 0.2);
    opacity: 0.8;
}

.thread-level-3 {
    background: rgba(0, 0, 0, 0.01);
    border-left: 4px solid rgba(0, 123, 255, 0.1);
    opacity: 0.7;
}