:root {
    color-scheme: light;
    --device-corner-radius: 24px;
    --app-vh: 100vh;
    --corner-from-safe-area: clamp(18px, calc(env(safe-area-inset-top) * 0.9), 44px);
    --safe-top: 0px;
    --safe-right: 0px;
    --safe-bottom: 0px;
    --safe-left: 0px;
    --grid-blue: #102c42;
    --grid-blue-rgb: 16, 44, 66;
    --backdrop-blue: #0b2133;
    --backdrop-blu-rgbe: 11, 33, 51;
    --backdrop-blue-rgb: 11, 33, 51;
    --overlay-blue: #4e84a4;
    --overlay-blue-rgb: 78, 132, 164;
    --text-blue: #c2e7ff;
    --text-blue-rgb: 194, 231, 255;
    --ink-rgb: 12, 34, 60;
    --brand-rgb: 16, 44, 66;
    --shadow-rgb: 15, 41, 68;
    --surface-rgb: 255, 255, 255;
    --surface-soft-rgb: 244, 248, 252;
    --accent-rgb: 29, 122, 168;
    --primary-bg: #102c42;
    --primary-gradient: linear-gradient(135deg, #102c42, #1f5a7c);
    --primary-gradient-wide: linear-gradient(135deg, #102c42, #3b86a9);
    --app-bg: #ffffff;
    --body-bg: #ffffff;
    --surface-0: #ffffff;
    --surface-1: rgba(255, 255, 255, 0.94);
    --surface-2: rgba(var(--surface-soft-rgb), 0.9);
    --surface-3: rgba(234, 242, 249, 0.92);
    --surface-solid-soft: #f5f8ff;
    --surface-solid-muted: #eef3ff;
    --surface-gradient: linear-gradient(150deg, rgba(var(--surface-rgb), 0.98), rgba(var(--surface-soft-rgb), 0.96));
    --surface-gradient-strong: linear-gradient(180deg, rgba(var(--surface-rgb), 0.99), rgba(var(--surface-soft-rgb), 0.98));
    --surface-gradient-subtle: linear-gradient(180deg, rgba(var(--surface-rgb), 0.96), rgba(var(--surface-soft-rgb), 0.92));
    --page-header-gradient: linear-gradient(135deg, rgba(var(--surface-rgb), 0.99) 0%, rgba(249, 252, 255, 0.98) 48%, rgba(242, 247, 252, 0.96) 100%);
    --shell-gradient: linear-gradient(145deg, var(--grid-blue) 0%, #163b5c 42%, #050910 100%);
    --nav-panel-gradient: linear-gradient(180deg, rgba(19, 54, 82, 0.97), rgba(9, 23, 38, 0.98));
    --logo-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(221, 239, 255, 0.92));
    --text-strong: rgba(var(--ink-rgb), 0.94);
    --text: rgba(var(--ink-rgb), 0.82);
    --text-muted: rgba(var(--ink-rgb), 0.66);
    --text-soft: rgba(var(--ink-rgb), 0.54);
    --text-disabled: rgba(var(--ink-rgb), 0.42);
    --text-on-accent: #ffffff;
    --border-hairline: rgba(var(--ink-rgb), 0.06);
    --border-faint: rgba(var(--ink-rgb), 0.08);
    --border-subtle: rgba(var(--ink-rgb), 0.12);
    --border: rgba(var(--ink-rgb), 0.16);
    --border-strong: rgba(var(--ink-rgb), 0.24);
    --tint-faint: rgba(var(--brand-rgb), 0.03);
    --tint-soft: rgba(var(--brand-rgb), 0.06);
    --tint: rgba(var(--brand-rgb), 0.1);
    --tint-strong: rgba(var(--brand-rgb), 0.16);
    --focus-ring: rgba(var(--brand-rgb), 0.16);
    --shadow-sm: 0 10px 22px rgba(var(--shadow-rgb), 0.08);
    --shadow-md: 0 18px 34px rgba(var(--shadow-rgb), 0.1);
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.28);
    --modal-backdrop: rgba(8, 22, 34, 0.54);
    --highlight-bg: rgba(255, 196, 64, 0.55);
    --danger-text: #b42318;
    --danger-count-text: #ab1313;
    --danger-count-on-fill: #ffffff;
    --danger-bg: rgba(180, 35, 24, 0.08);
    --danger-border: rgba(180, 35, 24, 0.35);
    --danger-surface-1: rgba(254, 242, 242, 0.98);
    --danger-surface-2: rgba(254, 226, 226, 0.98);
    --success-text: #166534;
    --success-bg: rgba(22, 101, 52, 0.12);
    --success-surface-1: rgba(225, 248, 236, 0.98);
    --success-surface-2: rgba(206, 238, 221, 0.98);
    --warning-text: #8a3a0a;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --warning-surface: rgba(255, 249, 237, 0.96);
    --scrollbar-thumb: rgba(var(--brand-rgb), 0.28);
    --scrollbar-thumb-hover: rgba(var(--brand-rgb), 0.42);
    --input-bg: var(--surface-0);
    --input-readonly-bg: linear-gradient(90deg, #f3f3f3 0%, #f3f3f3 35%, #ebe6e6 150%);
    --input-disabled-bg: linear-gradient(90deg, #bebebe 0%, #d1d1d1 35%, #d1d1d1 70%);
    --input-label-shadow: 0 0 0 var(--surface-0), 1px 0 0 var(--surface-0), -1px 0 0 var(--surface-0), 0 1px 0 var(--surface-0), 0 -1px 0 var(--surface-0), 1px 1px 0 var(--surface-0), -1px 1px 0 var(--surface-0), 1px -1px 0 var(--surface-0), -1px -1px 0 var(--surface-0), 0 0 8px rgba(var(--surface-rgb), 1), 0 0 16px rgba(var(--surface-rgb), 0.95), 0 0 28px rgba(var(--surface-rgb), 0.85), 0 0 44px rgba(var(--surface-rgb), 0.7), 0 0 64px rgba(var(--surface-rgb), 0.55), 0 0 90px rgba(var(--surface-rgb), 0.4);
    --themed-svg-icon-filter: none;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --grid-blue: #071320;
    --grid-blue-rgb: 7, 19, 32;
    --backdrop-blue: #071320;
    --backdrop-blu-rgbe: 7, 19, 32;
    --backdrop-blue-rgb: 7, 19, 32;
    --overlay-blue: #5fb5dc;
    --overlay-blue-rgb: 95, 181, 220;
    --text-blue: #d8f0ff;
    --text-blue-rgb: 216, 240, 255;
    --ink-rgb: 226, 241, 252;
    --brand-rgb: 118, 207, 243;
    --shadow-rgb: 0, 0, 0;
    --surface-rgb: 17, 27, 39;
    --surface-soft-rgb: 24, 38, 52;
    --accent-rgb: 118, 207, 243;
    --primary-bg: #1e6388;
    --primary-gradient: linear-gradient(135deg, #1a5577, #2482aa);
    --primary-gradient-wide: linear-gradient(135deg, #1b5f84, #38a4cb);
    --app-bg: #071019;
    --body-bg: #0b141f;
    --surface-0: #111b27;
    --surface-1: rgba(17, 27, 39, 0.94);
    --surface-2: rgba(24, 38, 52, 0.9);
    --surface-3: rgba(33, 50, 66, 0.9);
    --surface-solid-soft: #162333;
    --surface-solid-muted: #1b2b3d;
    --surface-gradient: linear-gradient(150deg, rgba(20, 32, 45, 0.98), rgba(10, 17, 27, 0.96));
    --surface-gradient-strong: linear-gradient(180deg, rgba(22, 35, 49, 0.99), rgba(13, 22, 34, 0.98));
    --surface-gradient-subtle: linear-gradient(180deg, rgba(18, 30, 42, 0.96), rgba(10, 17, 27, 0.94));
    --page-header-gradient: linear-gradient(135deg, rgba(24, 40, 56, 0.98) 0%, rgba(19, 32, 47, 0.98) 52%, rgba(14, 25, 38, 0.96) 100%);
    --shell-gradient: linear-gradient(145deg, #06111d 0%, #102941 48%, #02060d 100%);
    --nav-panel-gradient: linear-gradient(180deg, rgba(13, 33, 51, 0.98), rgba(4, 12, 22, 0.99));
    --logo-gradient: linear-gradient(180deg, rgba(232, 248, 255, 0.98), rgba(124, 205, 243, 0.84));
    --text-strong: rgba(var(--ink-rgb), 0.96);
    --text: rgba(var(--ink-rgb), 0.84);
    --text-muted: rgba(var(--ink-rgb), 0.68);
    --text-soft: rgba(var(--ink-rgb), 0.55);
    --text-disabled: rgba(var(--ink-rgb), 0.38);
    --text-on-accent: #ffffff;
    --border-hairline: rgba(var(--ink-rgb), 0.08);
    --border-faint: rgba(var(--ink-rgb), 0.1);
    --border-subtle: rgba(var(--ink-rgb), 0.14);
    --border: rgba(var(--ink-rgb), 0.2);
    --border-strong: rgba(var(--ink-rgb), 0.28);
    --tint-faint: rgba(var(--brand-rgb), 0.05);
    --tint-soft: rgba(var(--brand-rgb), 0.09);
    --tint: rgba(var(--brand-rgb), 0.14);
    --tint-strong: rgba(var(--brand-rgb), 0.22);
    --focus-ring: rgba(var(--brand-rgb), 0.24);
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.26);
    --shadow-md: 0 20px 42px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.52);
    --modal-backdrop: rgba(1, 6, 12, 0.72);
    --highlight-bg: rgba(245, 183, 78, 0.48);
    --danger-text: #ffb4aa;
    --danger-count-text: #ff6658;
    --danger-count-on-fill: #2a0705;
    --danger-bg: rgba(255, 120, 108, 0.12);
    --danger-border: rgba(255, 160, 150, 0.28);
    --danger-surface-1: rgba(75, 28, 34, 0.88);
    --danger-surface-2: rgba(93, 34, 39, 0.9);
    --success-text: #9fe7b4;
    --success-bg: rgba(86, 188, 118, 0.13);
    --success-surface-1: rgba(23, 61, 43, 0.88);
    --success-surface-2: rgba(30, 76, 52, 0.9);
    --warning-text: #ffd28a;
    --warning-bg: rgba(251, 191, 36, 0.15);
    --warning-surface: rgba(78, 56, 24, 0.88);
    --scrollbar-thumb: rgba(var(--brand-rgb), 0.32);
    --scrollbar-thumb-hover: rgba(var(--brand-rgb), 0.5);
    --input-bg: rgba(12, 20, 31, 0.96);
    --input-readonly-bg: linear-gradient(90deg, #141f2c 0%, #172636 40%, #1b2f44 150%);
    --input-disabled-bg: linear-gradient(90deg, #25313d 0%, #2d3c4a 35%, #25313d 70%);
    --input-label-shadow: 0 0 0 var(--surface-0), 1px 0 0 var(--surface-0), -1px 0 0 var(--surface-0), 0 1px 0 var(--surface-0), 0 -1px 0 var(--surface-0), 1px 1px 0 var(--surface-0), -1px 1px 0 var(--surface-0), 1px -1px 0 var(--surface-0), -1px -1px 0 var(--surface-0), 0 0 10px rgba(var(--surface-rgb), 0.95), 0 0 22px rgba(var(--surface-rgb), 0.8), 0 0 40px rgba(var(--surface-rgb), 0.6);
    --themed-svg-icon-filter: brightness(0) saturate(100%) invert(91%) sepia(12%) saturate(643%) hue-rotate(171deg) brightness(101%) contrast(96%);
}
body {
    font-family: 'Lexend', sans-serif;
    background: var(--app-bg);
    color: var(--text);
}

select {
    background-color: var(--input-bg);
    color: var(--text-strong);
    color-scheme: inherit;
}

select option {
    background-color: var(--surface-0);
    color: var(--text-strong);
}

:root[data-theme="dark"] :is(
    .page-header__action-glyph,
    .page-header__action-create-close,
    .page-header__help-close-icon,
    img.header-btn,
    .chats-icon-btn img,
    .wochat-compose__attach-icon,
    .wo-panel-discussion-compose__attach-icon,
    .wo-panel-message__action-img,
    .wo-panel-header__icon,
    .wo-panel-pill__icon,
    .assets-btn-plus,
    .assets-btn-upload,
    .assets-btn-copy,
    .assets-panel-action img,
    .icon-btn img,
    .fsvg-selected-preview svg,
    .fsvg-selected-preview img,
    .fsvg-item-icon img,
    .fi-icon-img
) {
    filter: var(--themed-svg-icon-filter);
}

/* #region */
/* #endregion */

.hidden {
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
}

.foot {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-content: flex-end;
}

.floating-input.is-disabled,
.floating-input.read-only {
    pointer-events: none; /* 1) makes everything inside non-interactable */
}

    .floating-input.read-only input,
    .floating-input.read-only textarea {
        background: var(--input-readonly-bg);
        transition: background 0.25s ease;
    }

    .floating-input.is-disabled input,
    .floating-input.is-disabled textarea {
        /* 2) background darken w/ transition */
        /* keep your existing transition, extend it */
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease, color 0.25s ease;
        /* 4) shimmer */
        background-image: var(--fi-disabled-bg);
        background-size: 200% 100%;
        animation: fi-shimmer 2s linear infinite;
    }

    /* Ensure the floating label is readable on disabled (optional but usually needed) */
    .floating-input.is-disabled label {
        color: var(--text-on-accent);
        background: transparent;
        transition: color 0.25s ease text-shadow 0.25s ease;
    }

    /* Float on focus or when there’s content (needs placeholder=" ") */
    .floating-input.is-disabled input:focus + label,
    .floating-input.is-disabled input:not(:placeholder-shown) + label,
    .floating-input.is-disabled textarea:focus + label,
    .floating-input.is-disabled textarea:not(:placeholder-shown) + label {
        color: var(--text-muted);
        text-shadow: var(--input-label-shadow);
    }


@keyframes fi-shimmer {
    0% {
        background-position: 0% 0;
    }

    50% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0% 0;
    }
}

/*
    FLOATING INPUT
*/

.floating-input {
    --fi-radius: 10px;
    --fi-border: rgba(var(--ink-rgb), 0.2);
    --fi-blue: rgb(var(--brand-rgb));
    --fi-error: #dc2626;
    --fi-textarea-height: 3rem;
    --fi-disabled-bg: var(--input-disabled-bg);
    position: relative;
    max-width: 100%;
    margin: 0 0 0.9rem;
    margin-right: 1.6rem;
    margin-top: 0.4rem;
    padding-bottom: 0;
    transition: padding-bottom 0.2s ease;
}

    .floating-input.has-error,
    .floating-input.has-info {
        padding-bottom: 1rem;
    }

        .floating-input.has-error.no-error-space,
        .floating-input.no-error-space {
            padding-bottom: 0 !important;
        }

    .floating-input .fld {
        position: relative;
    }

    /* INPUT */
    .floating-input input,
    .floating-input textarea
    {
        font-family: 'Lexend', sans-serif !important;
        width: 100%;
        padding: 0.6rem 0.75rem;
        border-radius: var(--fi-radius);
        border: 1px solid var(--fi-border);
        font-size: 0.85rem;
        outline: none;
        background: var(--input-bg);
        color: var(--text-strong);
        caret-color: rgb(var(--brand-rgb));
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .floating-input input,
        .floating-input textarea,
        .floating-input select {
            color-scheme: inherit;
        }

        .floating-input input::placeholder, 
        .floating-input textarea::placeholder {
            font-family: 'Lexend', sans-serif;
        }

        /* Focus styling without moving layout */
        .floating-input input:focus,
        .floating-input textarea:focus {
            border-color: var(--fi-blue);
            box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.16);
        }

    /* LABEL (floats) */
    .floating-input label {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 4px;
        background: transparent;
        color: var(--text-soft);
        font-size: 0.8rem;
        pointer-events: none;
        transition: top 0.2s ease, transform 0.2s ease, font-size 0.2s ease, color 0.2s ease, text-shadow 0.1s ease;
        user-select: none;
    }

    /* Float on focus or when there’s content (needs placeholder=" ") */
    .floating-input input:focus + label,
    .floating-input input:not(:placeholder-shown) + label,
    .floating-input textarea:focus + label,
    .floating-input textarea:not(:placeholder-shown) + label {
        top: 0;
        transform: translateY(-50%);
        text-shadow: var(--input-label-shadow);
        font-size: 0.7rem;
        color: var(--fi-blue);
        padding: 0;
    }

    /* REQUIRED ASTERISK */
    .floating-input.required label span::before {
        content: "*";
        color: var(--fi-error);
        margin-left: 2px;
    }

    /* ERROR STATE: styles are applied to the wrapper, not by shifting margins */
    .floating-input.has-error input,
    .floating-input.has-error textarea {
        border-color: var(--fi-error);
        box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.08);
    }

    .floating-input.has-error label {
        color: var(--fi-error) !important;
    }

    /* ERROR BUBBLE: absolutely positioned INSIDE OUTER container,
   but OUTER reserves space so it won't overlap other controls */
    .floating-input .err,
    .floating-input .info {
        position: absolute;
        left: 4px;
        bottom: 0.1rem;
        font-size: 10px;
        color: var(--fi-error);
        background: transparent;
        padding: 2px 6px;
        border-radius: 4px;
        opacity: 0;
        transform: translateY(-0.4rem);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        user-select: none;
    }

    .floating-input.has-error .err,
    .floating-input.has-info .info {
        opacity: 1;
        transform: translateY(0);
    }

    /* Optional: if you want the error bubble to "rise" from under the input more */
    .floating-input .err.raise {
        bottom: 0.25rem;
    }

    .floating-input .info {
        color: var(--text-muted) !important;
    }

    .floating-input.has-error .char-count,
    .floating-input.has-info .char-count {
        bottom: 1.05rem;
    }

.char-count.near-limit {
    color: #dc2626; /* same red as error */
}

/* app.css */
.fi-summary-overlay {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* theme-driven (your goal) */
    color: var(--text-strong);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 160ms ease, color 160ms ease;
}

    /* state helpers */
    .fi-summary-overlay.visible {
        opacity: 1;
    }

    .fi-summary-overlay.hidden {
        opacity: 0;
    }

    /* disabled variant */
    .fi-summary-overlay.is-disabled {
        opacity: 0.5;
    }

.fi-summary-overlay {
    left: var(--fi-summary-left, 1rem);
    right: var(--fi-summary-right, 3.25rem);
}



/*
        CONFIRM VIA
    */

.confirm-via {
    position: relative;
    max-width: 100%;
    margin: 0 0 0.9rem;
    margin-right: 1.6rem;
    margin-top: 0.4rem;

}

    /* Make the label permanently float/overlap the border */
    .confirm-via .confirm-label {
        position: absolute;
        left: 10px;
        top: 0;
        transform: translateY(-50%);
        padding: 0 4px;
        text-shadow: var(--input-label-shadow);
        font-size: 0.7rem;
        color: var(--text-strong);
        pointer-events: none;
        transition: color 0.2s ease;
        z-index: 1;
    }

    .confirm-via.is-disabled .confirm-label {
        color: var(--text-muted);
    }

    /* Match your focus/active color behavior */
    .confirm-via.enabled .confirm-label {
        color: var(--fi-blue);
    }

    .confirm-via .confirm-box {
        width: 100%;
        padding: 0.6rem 0.75rem 0.5rem;
        border-radius: 10px;
        border: 1px solid rgba(var(--ink-rgb), 0.2);
        background: var(--surface-0);
        display: flex;
        gap: 1rem;
        align-items: center;
        /* key bits */
        flex-wrap: nowrap; /* keep everything on one line */
        overflow-x: auto; /* allow horizontal scroll */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* nicer on iOS */
    }

    .confirm-via.is-disabled {
        pointer-events: none;
    }

    .confirm-via.is-disabled .confirm-box {
        background: var(--surface-2);
        /* keep your existing transition, extend it */
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease, color 0.25s ease;
        /* 4) shimmer */
        background-image: var(--input-disabled-bg);
        background-size: 200% 100%;
        animation: fi-shimmer 2s linear infinite;
    }

    .confirm-via.enabled .confirm-box:focus-within {
        border-color: var(--fi-blue);
        box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.16);
    }

    .confirm-via.disabled {
        opacity: 0.6;
    }

    .confirm-via .confirm-option {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.9rem;
        /* key bit */
        flex: 0 0 auto; /* do not shrink; take natural width */
        white-space: nowrap; /* keep label text from wrapping */
        transition: opacity 0.25s ease;
    }

    .confirm-via.is-disabled .confirm-option {
        opacity: 0.5;
    }

    .confirm-option input[type="radio"] {
        width: 16px;
        height: 16px;
        accent-color: rgb(var(--brand-rgb));
        cursor: pointer;
        transform: translateY(-2px);
    }

    .confirm-via.disabled .confirm-option input[type="radio"],
    .confirm-option.disabled input[type="radio"] {
        cursor: not-allowed;
    }

    .confirm-option.disabled {
        color: var(--text-disabled);
    }

.confirm-container {
    position: relative; /* anchor for overlay */
    opacity: 1;
    pointer-events: auto;
    cursor: unset;
}

    .confirm-container.disabled::after {
        content: "";
        border-radius: 10px;
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
        background: var(--surface-3);
        opacity: 0.5;
        z-index: 10;
        pointer-events: none; /* clicks still blocked by container */
    }


.save-button {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #0f9d58 0%, #0bbf77 60%, #34d399 100%);
    color: var(--text-on-accent);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 30px;
    min-width: 80px;
    transition: all 0.16s ease;
    justify-self: center;
}

    .save-button.disabled,
    .save-button:disabled {
        opacity: 0.5;
        background: linear-gradient(135deg, #697058 0%, #2f462b 60%, #697058 100%);
        cursor: default;
        box-shadow: none;
    }

    .save-button:hover:not(:disabled) {
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
    }

.delete-button {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #9d0f0f 0%, #bf0b0b 60%, #d33434 100%);
    color: var(--text-on-accent);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 30px;
    min-width: 80px;
    transition: all 0.16s ease;
    justify-self: center;
    margin-bottom: 0.5rem;
}

    .delete-button.disabled,
    .delete-button:disabled {
        opacity: 0.5;
        background: linear-gradient(135deg, #705858 0%, #462b2b 60%, #705858 100%);
        cursor: default;
        box-shadow: none;
    }

    .delete-button:hover:not(:disabled) {
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
    }

/* #region Scrollbars */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

    /* Chromium / Edge / Safari */
    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb);
        border-radius: 999px;
        /* Creates the “floating pill” look */
        border: 2px solid transparent;
        background-clip: content-box;
    }

        *::-webkit-scrollbar-thumb:hover {
            background-color: var(--scrollbar-thumb-hover);
        }

    *::-webkit-scrollbar-corner {
        background: transparent;
    }

    *::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

/* #endregion Scrollbars */

/* #region Fonts */

@font-face {
    font-family: 'Lexend';
    font-weight: 100 900;
    src: url("/_content/InQ.Shared/fonts/Lexend_Deca/LexendDeca-VariableFont_wght.ttf") format("truetype-variations");
}

@font-face {
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 400;
    src: url('/_content/InQ.Shared/fonts/lobster-two/LobsterTwo-Regular.ttf') format('truetype'),
}

@font-face {
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 700;
    src: url('/_content/InQ.Shared/fonts/lobster-two/LobsterTwo-Bold.ttf') format('truetype'),
}

@font-face {
    font-family: 'Lobster';
    font-style: italic;
    font-weight: 700;
    src: url('/_content/InQ.Shared/fonts/lobster-two/LobsterTwo-BoldItalic.ttf') format('truetype'),
}

@font-face {
    font-family: 'Lobster';
    font-style: italic;
    font-weight: 400;
    src: url('/_content/InQ.Shared/fonts/lobster-two/LobsterTwo-Italic.ttf') format('truetype'),
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('/_content/InQ.Shared/fonts/poppins/Poppins-Regular.ttf') format('truetype'),
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('/_content/InQ.Shared/fonts/poppins/Poppins-Bold.ttf') format('truetype'),
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    src: url('/_content/InQ.Shared/fonts/poppins/Poppins-Italic.ttf') format('truetype'),
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    src: url('/_content/InQ.Shared/fonts/poppins/Poppins-Thin.ttf') format('truetype'),
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    src: url('/_content/InQ.Shared/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype'),
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('/_content/InQ.Shared/fonts/poppins/Poppins-Medium.ttf') format('truetype'),
}

/* #endregion Fonts */