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

// ── Aspects (header block on character sheet) ─────────────────────────────
.aspects-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba($chi-title, 0.3);
    border-radius: 0.25rem;
    font-size: 0.85rem;
    width: 100%;

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

        .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); }
    }
}

// ── Identity text blocks ──────────────────────────────────────────────────

.identity-text-wrapper {
    flex: 1 1 100%;
    align-items: stretch;
    gap: 0.5rem;

    .identity-text-block {
        flex: 1 1 0;
        min-width: 0;
    }
}

// ── Notes tab ─────────────────────────────────────────────────────────────

article.tab.notes {
    flex: 1 1 100%;
    min-height: 0;

    .notes-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        .editor {
            flex: 1 1 auto;
            min-height: 300px;
        }
    }
}

// ── 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 {
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem 0.9rem;
    font-size: 0.88rem;
    background: rgba($l5r5e-black, 0.15);
    border-radius: 0.3rem;
    overflow: hidden;

    // Ring-coloured left accent bar (thicker)
    .chi-ring-bar {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 6px;
        border-radius: 6px 0 0 6px;
        &.air   { background: linear-gradient(to bottom, $l5r5e-air, darken($l5r5e-air, 15%)); }
        &.water { background: linear-gradient(to bottom, $l5r5e-water, darken($l5r5e-water, 15%)); }
        &.fire  { background: linear-gradient(to bottom, $l5r5e-fire, darken($l5r5e-fire, 15%)); }
        &.earth { background: linear-gradient(to bottom, $l5r5e-earth, darken($l5r5e-earth, 15%)); }
        &.void  { background: linear-gradient(to bottom, lighten($l5r5e-void, 20%), $l5r5e-void); }
    }

    // ── Header ──────────────────────────────────────────────────────────────
    .chi-chat-header {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        margin-bottom: 0.4rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid rgba($l5r5e-title, 0.25);

        .profile-img {
            width: 2.8rem;
            height: 2.8rem;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid rgba($chi-title, 0.5);
            flex-shrink: 0;
        }
        .chi-chat-actor {
            flex: 1;
            min-width: 0;
            strong { font-family: $font-secondary; color: $chi-title; font-size: 1rem; display: block; }
            .chi-chat-quick-info { font-size: 0.72rem; color: $l5r5e-label; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        }
        .chi-chat-badges {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            align-items: flex-end;
            flex-shrink: 0;

            .chi-ring-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
                padding: 0.15rem 0.45rem;
                border-radius: 1rem;
                font-size: 0.8rem;
                font-weight: bold;
                border: 1px solid;
                i { font-size: 1.05rem; }
                .chi-ring-name { font-size: 0.75rem; font-weight: normal; }
                .chi-ring-val  { font-size: 1rem; font-weight: bold; }
                &.air   { color: $l5r5e-air;        background: rgba($l5r5e-air, 0.12);   border-color: rgba($l5r5e-air, 0.35); }
                &.water { color: $l5r5e-water;       background: rgba($l5r5e-water, 0.12); border-color: rgba($l5r5e-water, 0.35); }
                &.fire  { color: $l5r5e-fire;        background: rgba($l5r5e-fire, 0.12);  border-color: rgba($l5r5e-fire, 0.35); }
                &.earth { color: $l5r5e-earth;       background: rgba($l5r5e-earth, 0.12); border-color: rgba($l5r5e-earth, 0.35); }
                &.void  { color: $l5r5e-void-light;  background: rgba($l5r5e-void, 0.15);  border-color: rgba($l5r5e-void-light, 0.4); }
            }
            .chi-aspect-badge, .chi-assistance-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.2rem;
                padding: 0.1rem 0.35rem;
                border-radius: 0.2rem;
                font-size: 0.75rem;
                border: 1px solid;
                .chi-badge-label { font-size: 0.72rem; }
            }
            .chi-aspect-badge {
                &.solar { color: $chi-solar; background: rgba($chi-solar, 0.15); border-color: rgba($chi-solar, 0.4); }
                &.lunar { color: $chi-lunar; background: rgba($chi-lunar, 0.15); border-color: rgba($chi-lunar, 0.4); }
            }
            .chi-assistance-badge {
                color: $l5r5e-label;
                background: rgba($l5r5e-label, 0.1);
                border-color: rgba($l5r5e-label, 0.3);
            }
        }
    }

    // ── Context: skill (rank) → difficulty ──────────────────────────────────
    .chi-chat-context {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-bottom: 0.3rem;
        font-size: 0.82rem;

        .chi-ctx-skill   { font-weight: bold; color: $chi-title; }
        .chi-ctx-rank    {
            font-size: 0.7rem; padding: 0.05rem 0.3rem;
            border-radius: 0.8rem; opacity: 0.85;
            background: rgba($chi-title, 0.12); color: $chi-title;
        }
        .chi-ctx-arrow   { color: $l5r5e-label; }
        .chi-ctx-diff-name { color: $chi-subtitle; font-weight: bold; }
        .chi-ctx-diff-val  { color: $chi-subtitle; font-size: 0.78rem; }
    }

    // ── Formula line ─────────────────────────────────────────────────────────
    .chi-chat-formula {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-bottom: 0.45rem;
        font-size: 0.8rem;
        color: $l5r5e-label;
        padding: 0.2rem 0.35rem;
        background: rgba($l5r5e-black, 0.15);
        border-radius: 0.2rem;

        .chi-fml-base {
            font-weight: bold;
            &.air   { color: $l5r5e-air; }
            &.water { color: $l5r5e-water; }
            &.fire  { color: $l5r5e-fire; }
            &.earth { color: $l5r5e-earth; }
            &.void  { color: $l5r5e-void; }
        }
        .chi-fml-mult {
            padding: 0.05rem 0.3rem;
            border-radius: 0.2rem;
            font-size: 0.78rem;
            em { font-style: normal; }
            &.solar { color: $chi-solar; background: rgba($chi-solar, 0.1); }
            &.lunar { color: $chi-lunar; background: rgba($chi-lunar, 0.1); }
            &:not(.solar):not(.lunar) { color: $l5r5e-label; background: rgba($l5r5e-label, 0.08); }
        }
        .chi-fml-bonus  { color: $chi-subtitle; font-size: 0.78rem; }
        .chi-fml-mod    { font-size: 0.78rem; }
        .chi-fml-pos    { color: $chi-subtitle; }
        .chi-fml-neg    { color: $l5r5e-red; }
        .chi-fml-eq     { color: $l5r5e-bold; font-weight: bold; margin-left: 0.1rem; }
    }

    // ── Dice section labels (raw / adjusted) ────────────────────────────────
    .chi-dice-section-label {
        font-size: 0.7rem;
        color: $l5r5e-label;
        font-style: italic;
        margin-bottom: 0.15rem;
        margin-top: 0.2rem;
        padding-left: 0.2rem;
    }

    // ── Dice pool ────────────────────────────────────────────────────────────
    .chi-chat-dice-pool {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-bottom: 0.45rem;
        padding: 0.4rem;
        background: rgba($l5r5e-black, 0.25);
        border-radius: 0.3rem;

        &.chi-dice-raw {
            opacity: 0.6;
            margin-bottom: 0.1rem;
            padding: 0.25rem 0.4rem;
            background: rgba($l5r5e-black, 0.1);

            .chi-die {
                min-width: 1.6rem;
                height: 1.6rem;
                font-size: 0.85rem;
            }
        }

        .chi-die {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.4rem;
            height: 2.4rem;
            padding: 0 0.25rem;
            border-radius: 0.35rem;
            font-weight: bold;
            font-size: 1.15rem;
            background: rgba($l5r5e-black, 0.65);
            border: 1px solid rgba($l5r5e-title, 0.35);
            color: $white;
            position: relative;
            box-shadow: inset 0 1px 0 rgba($white, 0.07), 0 1px 3px rgba($l5r5e-black, 0.4);

            &.die-low  {
                color: $l5r5e-red;
                background: rgba($l5r5e-red, 0.14);
                border-color: rgba($l5r5e-red, 0.5);
                box-shadow: inset 0 1px 0 rgba($white, 0.05), 0 0 6px rgba($l5r5e-red, 0.15);
            }
            &.die-high {
                color: $chi-solar;
                background: rgba($chi-solar, 0.14);
                border-color: rgba($chi-solar, 0.5);
                box-shadow: inset 0 1px 0 rgba($white, 0.1), 0 0 8px rgba($chi-solar, 0.2);
            }
            .die-adj-icon {
                position: absolute;
                top: -0.3rem;
                right: -0.2rem;
                font-size: 0.6rem;
                color: $chi-solar;
                filter: drop-shadow(0 0 2px rgba($chi-solar, 0.8));
            }
        }
    }

    // ── Breakdown equation ───────────────────────────────────────────────────
    .chi-chat-breakdown {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.3rem;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        padding: 0.3rem 0.5rem;
        background: rgba($l5r5e-black, 0.15);
        border-radius: 0.25rem;

        .chi-bd-op     { color: $l5r5e-label; font-size: 0.85rem; }
        .chi-bd-part   { font-weight: bold; }
        .chi-bd-sum    { color: $l5r5e-bold; font-size: 1rem; }
        .chi-bd-pos    { color: $chi-subtitle; }
        .chi-bd-neg    { color: $l5r5e-red; }
        .chi-bd-eq     { color: $l5r5e-label; font-size: 0.85rem; }
        .chi-bd-total  { color: $l5r5e-title; font-weight: bold; font-size: 1.15rem; }
        .chi-bd-vs     { color: $l5r5e-label; font-size: 0.85rem; margin: 0 0.1rem; }
        .chi-bd-diff   { color: darken($chi-subtitle, 15%); font-size: 1rem; font-weight: bold; }
    }

    // ── Result banner ────────────────────────────────────────────────────────
    .chi-chat-result {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-family: $font-tertiary;
        padding: 0.45rem 0.7rem;
        border-radius: 0.3rem;
        letter-spacing: 0.03em;

        &.chi-success {
            background: rgba($chi-subtitle, 0.18);
            border: 1px solid rgba($chi-subtitle, 0.5);
            color: darken($chi-subtitle, 30%);
            box-shadow: 0 0 10px rgba($chi-subtitle, 0.1);
        }
        &.chi-failure {
            background: rgba($l5r5e-red, 0.12);
            border: 1px solid rgba($l5r5e-red, 0.45);
            color: darken($l5r5e-red, 20%);
            box-shadow: 0 0 10px rgba($l5r5e-red, 0.08);
        }

        .chi-result-icon {
            font-size: 1.4rem;
            flex-shrink: 0;
        }
        .chi-result-body {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
            flex: 1;
        }
        .chi-result-text {
            font-size: 1.05rem;
            font-weight: bold;
        }
        .chi-result-delta {
            font-size: 0.8rem;
            font-weight: normal;
            opacity: 0.9;
            padding: 0.05rem 0.35rem;
            border-radius: 0.8rem;
            display: inline-block;
        }
        .chi-result-bonus {
            background: rgba($chi-subtitle, 0.2);
            border: 1px solid rgba($chi-subtitle, 0.4);
        }
        .chi-result-miss {
            background: rgba($l5r5e-red, 0.12);
            border: 1px solid rgba($l5r5e-red, 0.3);
        }
    }
}

// ── 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;
}

// ── Invocations tab ───────────────────────────────────────────────────────
.invocations-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .invocations-roll-header {
        display: flex;
        justify-content: center;
        padding: 0.25rem 0;

        .invocation-roll-btn {
            cursor: pointer;
            font-family: inherit;
            font-size: 1rem;
            font-weight: bold;
            padding: 0.3rem 1.5rem;
        }
    }

    .invocations-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        align-items: start;

        .invocation-column {
            width: 100%;
        }
    }
}