// ── Note banner (Brief portal) ─────────────────────────────────────────────
// Portals over the page wordmark + h2 header area when shown — `position:
// fixed` w. `z-index: 10000` lifts it above every game overlay (gate /
// role-select / sig / sky backdrops at z 100-200, tray at 310, kit bag at
// 318+, etc.) the same way `#id_guard_portal` does. Without this lift the
// Brief would land in document flow inside `.container` (after the
// `#id_brief_banner_anchor` div) and disappear behind any `position: fixed`
// overlay that sat above it in the z-stack — e.g. on room.html the gate
// overlay's Gaussian-blur backdrop ate the Brief alive.

.note-banner {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    z-index: 10000;
    max-width: 960px;       // match `.container` max-width so wide viewports
    margin-left: auto;      // see the Brief centred above the page rather
    margin-right: auto;     // than stretched across landscape sidebars
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: rgba(var(--tooltip-bg), 0.82);
    backdrop-filter: blur(8px);
    border: 0.1rem solid rgba(var(--secUser), 0.4);
    border-radius: 0.5rem;

    .note-banner__body {
        flex: 1;
        min-width: 0;
    }

    .note-banner__title {
        margin: 0;
        font-weight: bold;
    }

    .note-banner__description,
    .note-banner__timestamp {
        margin: 0.1rem 0 0;
        font-size: 0.85rem;
        opacity: 0.75;
    }

    // Default (no square_url) — flat blue chip placeholder.
    .note-banner__image {
        width: 3rem;
        height: 3rem;
        flex-shrink: 0;
        background: rgba(var(--priUser), 0.15);
        border-radius: 2px;
    }

    // Note-unlock variant — clickable <a> jumping to /billboard/my-notes/.
    // Mirrors the Stargazer dotted-`?` square in my_notes.html so a brief
    // visually parses as a note-card preview. Pairs with the
    // `note-item__image-box` class added on the JS side so the banner picks
    // up the same dashed border + hover.
    a.note-banner__image {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .note-banner__nvm,
    .note-banner__fyi {
        flex-shrink: 0;
    }

    // Transient message-banner variants (magic-link confirmation, errors).
    // No DB Brief row — just inherits the Gaussian-glass shell from the
    // .note-banner base & shifts the border colour for level=error/warning.
    &.note-banner--message .note-banner__description {
        opacity: 1;            // message body is the whole content; full opacity
    }

    &.note-banner--error,
    &.note-banner--warning {
        border-color: rgba(var(--priRd), 0.6);
    }
}

// ── Notes page ─────────────────────────────────────────────────────────────

.note-page {
    padding: 0.75rem 1.5rem;
}

.note-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    @media (min-width: 900px)  { grid-template-columns: repeat(3, 1fr); }
    @media (min-width: 1200px) { grid-template-columns: repeat(4, 1fr); }
}

// DON/DOFF equip buttons — positioned outside the top-left corner,
// matching the .tt-equip-btns pattern from the game kit tooltip.
.note-don-doff {
    position: absolute;
    left: -1rem;
    top: -1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s;

    .btn { margin: 0; }
}

.note-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
    background-color: rgba(var(--tooltip-bg), 0.75);
    backdrop-filter: blur(6px);
    border: 0.1rem solid rgba(var(--secUser), 0.4);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;

    // Hover glow — only when no note is click-locked on the page
    body:not(.notes-locked) &:hover {
        border-color: rgba(var(--terUser), 1);
        box-shadow: 0 0 10px rgba(var(--ninUser), 0.35);
        .note-item__title { color: rgba(var(--terUser), 1); }
        .note-don-doff { opacity: 1; }
    }

    // Palette modal open (existing)
    &.note-item--active {
        border-color: rgba(var(--terUser), 1);
        box-shadow: 0 0 10px rgba(var(--ninUser), 0.35);
        .note-item__title { color: rgba(var(--terUser), 1); }
    }

    // Click-locked: glow + DON/DOFF always visible
    &.note-item--locked,
    &.note-item--donned {
        border-color: rgba(var(--terUser), 1);
        box-shadow: 0 0 10px rgba(var(--ninUser), 0.35);
        .note-item__title { color: rgba(var(--terUser), 1); }
        .note-don-doff { opacity: 1; }
    }

    .note-item__body {
        flex: 1;
        min-width: 0;
    }

    .note-item__title {
        margin: 0;
        font-weight: bold;
        font-size: 1rem;
        transition: color 0.15s;
    }

    .note-item__description {
        margin: 0.25rem 0 0;
        font-size: 0.8rem;
        opacity: 0.75;
    }

    .note-recognitions {
        margin-top: 0.5rem;
    }

    .note-recognitions__header {
        font-size: 0.65rem;
        font-weight: 600;
        opacity: 0.55;
        letter-spacing: 0.04em;
        margin-bottom: 0.15rem;
    }

    .note-recognitions__list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0.75rem;
        opacity: 0.8;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;

        strong { font-weight: 700; }
    }

    .note-recognitions__dim {
        opacity: 0.6;
        font-size: 0.65rem;
    }
}

// Image box — right-side; must have a defined size so Selenium can interact with it.
.note-item__image-box {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--priUser), 0.12);
    border: 1px dashed rgba(var(--terUser), 0.75);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: rgba(var(--terUser), 0.75);
    opacity: 0.6;

    &:hover { opacity: 1; }

    &--label {
        font-size: 1.1rem;
        font-weight: bold;
        color: rgba(var(--secUser), 0.6);
        opacity: 1;
        cursor: default;
        border-style: solid;
        border-color: rgba(var(--secUser), 0.6);
        &:hover { opacity: 1; }
    }
}

// Confirmed palette swatch — right-side thumbnail, shares the canonical
// gradient w. .swatch via palette-swatch-bg mixin (single source of truth).
.note-item__palette {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 0.25rem;
    @include palette-swatch-bg;
}

// ── Palette modal ──────────────────────────────────────────────────────────

.note-palette-modal {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    background-color: rgba(var(--tooltip-bg), 0.92);
    backdrop-filter: blur(8px);
    border: 0.1rem solid rgba(var(--secUser), 0.4);
    border-radius: 0.5rem;
    padding: 0.75rem;
    gap: 0.5rem;
    min-width: 14rem;

    &:not([hidden]) { display: flex; flex-direction: column; }

    // Each palette swatch option inside the modal
    > [class*="palette-"] {
        display: flex;
        align-items: center;
        gap: 0.75rem;

        .note-swatch-body {
            width: 3.25rem;
            height: 3.25rem;
            border-radius: 0.25rem;
            cursor: pointer;
            @include palette-swatch-bg;
            flex-shrink: 0;
            transition: border-color 0.12s, box-shadow 0.12s;

            &:hover {
                border-color: rgba(var(--terUser), 1);
                box-shadow: 0 0 6px rgba(var(--ninUser), 0.3);
            }

            &.previewing {
                border: 0.2rem solid rgba(var(--ninUser), 1);
                box-shadow: 0 0 0.75rem rgba(var(--ninUser), 0.6);
            }
        }

        .note-swatch-label {
            flex: 1;
            min-width: 0;
            color: rgba(var(--terUser), 1);
            font-size: 1rem;
            font-weight: bold;
            line-height: 1.2;
        }
    }
}

// ── Confirm submenu — floats below modal, out of its flow ─────────────────

.note-palette-confirm {
    // display controlled entirely by JS (style.display) — hidden until a swatch is previewed
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 201;
    background-color: rgba(var(--tooltip-bg), 0.92);
    backdrop-filter: blur(8px);
    border: 0.1rem solid rgba(var(--secUser), 0.4);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;

    p {
        flex: 1;
        margin: 0;
        font-size: 0.85rem;
    }
}
