// ── Chiaroscuro UI Styles ──────────────────────────────────────────────────

// ── Aspects (header block on character sheet) ─────────────────────────────
.aspects-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba($chi-title, 0.3);
    border-radius: 0.25rem;
    font-size: 0.85rem;

    .aspect-fields {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem;
        flex: 1;

        .attribute-label {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            &:nth-child(1) { color: $chi-solar; } // solar
            &:nth-child(2) { color: $chi-lunar; } // lunar
            input[type="number"] {
                width: 3rem;
                text-align: center;
            }
        }

        .gauge-bar-wrapper {
            flex: 0 0 100%;
            height: 0.4rem;
            background: linear-gradient(to right, $chi-lunar, rgba(128,128,128,0.3) 50%, $chi-solar);
            border-radius: 0.25rem;
            position: relative;
            overflow: hidden;
            .gauge-bar {
                position: absolute;
                top: 0;
                height: 100%;
                border-radius: 0.25rem;
                opacity: 0.8;
            }
        }
    }
}

// ── État badges (character sheet header) ─────────────────────────────────
.etat-summary {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0;
    font-size: 0.8rem;
    .etat-summary-label {
        color: $l5r5e-label;
        font-style: italic;
        margin-right: 0.2rem;
    }
    .etat-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.1rem 0.35rem;
        border-radius: 0.2rem;
        background: rgba($chi-title, 0.18);
        border: 1px solid rgba($chi-title, 0.4);
        color: $chi-title;
        cursor: default;
        &:hover { background: rgba($chi-title, 0.32); }
    }
}

// ── NPC Danger levels (identity.html) ────────────────────────────────────
.danger-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.2rem 0;
}

.danger-wrapper {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    .danger-select {
        font-size: 0.85rem;
        background: $l5r5e-white;
        border: 0 none;
        color: $l5r5e-bold;
        font-family: $font-primary;
    }
}

.danger-icons {
    display: flex;
    gap: 0.15rem;
    .danger-icon {
        font-size: 0.9rem;
        &.fa-skull { color: $l5r5e-red; }
        &.fa-star   { color: $l5r5e-shuji; }
    }
}

// ── Chiaroscuro Dice Dialog ───────────────────────────────────────────────
&.chiaroscuro-dice-dialog {
    // Header: portrait + actor name
    .chi-dice-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        border-bottom: 1px solid rgba($chi-title, 0.3);
        .profile-img {
            width: 3rem;
            height: 3rem;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid rgba($chi-title, 0.5);
        }
        .chi-dice-actor-info {
            display: flex;
            flex-direction: column;
            strong { font-family: $font-secondary; font-size: 1.1rem; color: $chi-title; }
            .chi-dice-quick-info { font-size: 0.8rem; color: $l5r5e-label; font-style: italic; }
        }
    }

    // Section fieldsets
    .chi-dice-section {
        flex: 0 0 100%;
        border: 1px solid rgba($chi-subtitle, 0.35);
        border-radius: 0.25rem;
        margin: 0.35rem 0.5rem 0;
        padding: 0.25rem 0.5rem 0.4rem;
        legend {
            font-family: $font-tertiary;
            font-size: 0.8rem;
            color: $chi-subtitle;
            padding: 0 0.25rem;
        }
    }

    // Ring selector
    .chi-rings {
        display: flex;
        flex-wrap: wrap;
        gap: 0.2rem;
        list-style: none;
        padding: 0;
        margin: 0;
        li { flex: 1; }
        .ring-selection-chi {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.2rem;
            border-radius: 0.2rem;
            border: 1px solid rgba($l5r5e-title, 0.2);
            cursor: pointer;
            font-size: 0.75rem;
            &:hover { border-color: rgba($chi-title, 0.6); background: rgba($chi-title, 0.08); }
            &.ring-selected {
                border-color: $chi-title;
                background: rgba($chi-title, 0.15);
                strong { text-decoration: underline; }
            }
            i { font-size: 1.5rem; }
            .ring-value { font-weight: bold; font-size: 0.9rem; }
        }
        .earth.ring-selection-chi  { color: $l5r5e-earth; }
        .air.ring-selection-chi    { color: $l5r5e-air; }
        .water.ring-selection-chi  { color: $l5r5e-water; }
        .fire.ring-selection-chi   { color: $l5r5e-fire; }
        .void.ring-selection-chi   { color: $l5r5e-void-light; }
    }

    // Skill info row
    .chi-skill-row {
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
        .chi-skill-name  { font-weight: bold; flex: 1; }
        .chi-skill-rank  { font-size: 0.8rem; color: $l5r5e-label; }
        .chi-skill-bonus { font-size: 0.85rem; color: $chi-solar; font-weight: bold; }
    }

    // Difficulty + modifier row
    .chi-difficulty-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        select { flex: 1; }
        .chi-modifier-label {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.85rem;
            white-space: nowrap;
        }
    }

    // Options checkboxes
    .chi-options-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.15rem 0;
        label {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.9rem;
        }
        .chi-auto-aspect { font-size: 0.8rem; color: $l5r5e-label; }
    }

    // Dice total summary
    .chi-dice-total-summary {
        flex: 0 0 100%;
        text-align: center;
        padding: 0.4rem;
        font-size: 0.9rem;
        .chi-total-dice { font-size: 1.3rem; color: $chi-title; margin: 0 0.2rem; }
    }

    // Submit button
    .chi-dice-submit {
        flex: 0 0 100%;
        padding: 0.4rem 0.5rem;
        button[type="submit"] {
            width: 100%;
            background: rgba($chi-title, 0.85);
            border: 1px solid $chi-title;
            color: $white;
            font-family: $font-tertiary;
            font-size: 1rem;
            padding: 0.4rem;
            cursor: pointer;
            border-radius: 0.2rem;
            &:hover { background: $chi-title; }
        }
    }
}

// ── Chiaroscuro Chat Roll ─────────────────────────────────────────────────
.chiaroscuro-chat-roll {
    padding: 0.35rem;
    font-size: 0.9rem;

    // Header: portrait + actor + badges
    .chi-chat-header {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.3rem;
        .profile-img {
            width: 2.5rem;
            height: 2.5rem;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid rgba($chi-title, 0.5);
        }
        .chi-chat-actor {
            flex: 1;
            strong { font-family: $font-secondary; color: $chi-title; }
            .chi-chat-quick-info { font-size: 0.75rem; color: $l5r5e-label; font-style: italic; }
        }
        .chi-chat-badges {
            display: flex;
            gap: 0.2rem;
            align-items: center;
            .chi-aspect-badge {
                font-size: 1rem;
                &.solar { color: $chi-solar; }
                &.lunar { color: $chi-lunar; }
            }
            .chi-assistance-badge { color: $l5r5e-label; font-size: 1rem; }
        }
    }

    // Description line
    .chi-chat-desc {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        margin-bottom: 0.3rem;
        font-size: 0.85rem;
        .chi-chat-skill { font-weight: bold; color: $chi-title; }
        .chi-chat-vs    { color: $l5r5e-label; }
        .chi-chat-diff  { color: $chi-subtitle; font-style: italic; }
    }

    // Dice pool
    .chi-chat-dice-pool {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin-bottom: 0.35rem;
        .chi-die {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 0.25rem;
            font-weight: bold;
            font-size: 1rem;
            background: rgba($l5r5e-black, 0.35);
            border: 1px solid rgba($l5r5e-title, 0.4);
            position: relative;
            &.die-low  { color: $l5r5e-red; border-color: rgba($l5r5e-red, 0.5); }
            &.die-high { color: $chi-solar; border-color: rgba($chi-solar, 0.5); }
            .die-adj-icon {
                position: absolute;
                top: -0.3rem;
                right: -0.2rem;
                font-size: 0.6rem;
                color: $chi-solar;
            }
        }
    }

    // Breakdown
    .chi-chat-breakdown {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
        color: $l5r5e-label;
        strong { color: $white; }
    }

    // Result banner
    .chi-chat-result {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-family: $font-tertiary;
        font-size: 1rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.2rem;
        &.chi-success {
            background: rgba($chi-subtitle, 0.25);
            border: 1px solid rgba($chi-subtitle, 0.5);
            color: $chi-subtitle;
        }
        &.chi-failure {
            background: rgba($l5r5e-red, 0.12);
            border: 1px solid rgba($l5r5e-red, 0.35);
            color: $l5r5e-red;
        }
        .chi-bonus-successes {
            font-size: 0.85rem;
            opacity: 0.85;
        }
    }
}

// ── Skill rank: bonus display ──────────────────────────────────────────────
.skill-bonus {
    color: $chi-solar;
    font-size: 0.8rem;
    font-weight: bold;
    margin-left: 0.2rem;
}

// ── Default ring indicator ────────────────────────────────────────────────
.rings .default-ring {
    text-decoration: underline 2px $chi-title;
    text-underline-offset: 2px;
    cursor: pointer;
}