:root {
    --bg: #03090d;
    --panel: #071119;
    --panel2: #0a161e;
    --panel3: #0d1b24;
    --border: #263842;
    --border-soft: #172832;

    --gold: #d8a64d;
    --gold-bright: #f0c66f;
    --gold-dark: #795520;
    --gold-soft: rgba(216,166,77,.12);

    --cyan: #49c8e8;

    --text: #e8edf0;
    --soft: #a8b6c0;
    --muted: #70828e;

    --success: #36d98b;
    --danger: #e56b6b;
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #4d5660 #071017;
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    display: grid;
    grid-template-rows: 78px 1fr 32px;
    overflow: hidden;
    font-family: "Segoe UI", Inter, system-ui, sans-serif;
    color: var(--text);

    background:
        radial-gradient(circle at 75% -15%,
            rgba(28,111,140,.16),
            transparent 38%),
        linear-gradient(145deg,
            #02070b,
            #071118 50%,
            #02070b);
}

/* HEADER */

header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 22px;

    background:
        linear-gradient(90deg,
            #061018,
            #0a1821 55%,
            #061018);

    border-bottom: 1px solid var(--gold-dark);
    box-shadow: 0 5px 25px rgba(0,0,0,.45);
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            var(--gold),
            transparent);

    opacity: .35;
}

.logo {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--gold-bright);
    text-shadow: 0 0 18px rgba(216,166,77,.18);
}

.logo::after {
    content: "MAILCORE EDITION";
    display: block;
    margin-top: 2px;

    font-family: "Segoe UI", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #b88d49;
}

.header-spacer {
    flex: 1;
}

/* BUTTONS */

button {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);

    background:
        linear-gradient(180deg,
            #101d25,
            #09141b);

    transition:
        border-color .15s,
        background .15s,
        box-shadow .15s,
        transform .08s;
}

button:hover {
    border-color: var(--gold);

    background:
        linear-gradient(180deg,
            #19262d,
            #10191e);

    box-shadow: 0 0 16px rgba(216,166,77,.10);
}

button:active {
    transform: translateY(1px);
}

button:disabled {
    opacity: .5;
    cursor: default;
}

.primary {
    color: #f6d99c;
    border-color: #80602b;

    background:
        linear-gradient(180deg,
            #302716,
            #17140e);
}

.primary:hover {
    color: #fff0c6;
    border-color: var(--gold-bright);

    background:
        linear-gradient(180deg,
            #44351c,
            #21190e);
}

/* LAYOUT */

.layout {
    min-height: 0;
    display: grid;

    grid-template-columns:
        250px
        430px
        minmax(400px, 1fr);
}

/* SIDEBAR */

.sidebar {
    position: relative;
    padding: 22px 14px;
    overflow-y: auto;

    background:
        linear-gradient(180deg,
            #071119,
            #050d13);

    border-right: 1px solid var(--border);
}

.sidebar::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(216,166,77,.35),
            transparent);
}

.nav-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 10px 9px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--gold);
    text-transform: uppercase;
}

.nav-title::after {
    content: "";
    flex: 1;
    height: 1px;

    background:
        linear-gradient(90deg,
            var(--gold-dark),
            transparent);
}

.nav-item {
    position: relative;
    margin-bottom: 4px;
    padding: 11px 12px;

    border: 1px solid transparent;
    border-radius: 6px;

    color: #d5dde2;
    cursor: pointer;
    transition: all .15s;
}

.nav-item:hover {
    color: white;
    background: var(--panel3);
    border-color: var(--border);
}

.nav-item.active {
    color: #ffe3a5;

    background:
        linear-gradient(90deg,
            rgba(216,166,77,.15),
            rgba(216,166,77,.035));

    border-color: rgba(216,166,77,.30);
    box-shadow: inset 3px 0 0 var(--gold);
}

.account {
    margin: 2px 0;
    padding: 9px 11px;
    border-radius: 5px;

    font-size: 13px;
    color: var(--soft);
    overflow-wrap: anywhere;
    cursor: pointer;
}

.account:hover {
    color: var(--gold-bright);
    background: rgba(216,166,77,.06);
}

.account small {
    color: var(--muted);
}

/* MESSAGE LIST */

.message-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #071017;
    border-right: 1px solid var(--border);
}

.column-header {
    padding: 18px;

    font-family: Georgia, serif;
    font-size: 19px;
    color: #f2d398;

    background:
        linear-gradient(180deg,
            #0b161d,
            #081219);

    border-bottom: 1px solid var(--border);
}

.message-list {
    flex: 1;
    overflow-y: auto;
}

.message,
.sent-message {
    position: relative;
    padding: 15px 17px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255,255,255,.008));

    transition: background .12s;
}

.message:hover,
.sent-message:hover {
    background: #0d1a22;
}

.message.selected {
    background:
        linear-gradient(90deg,
            rgba(216,166,77,.12),
            rgba(216,166,77,.025));

    box-shadow: inset 3px 0 0 var(--gold);
}

.message.new::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 19px;
    width: 6px;
    height: 6px;
    border-radius: 50%;

    background: var(--gold);
    box-shadow: 0 0 8px rgba(216,166,77,.6);
}

.message-from {
    padding-left: 4px;
    font-size: 13px;
    color: #9db3c1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-subject {
    margin-top: 4px;
    padding-left: 4px;
    color: #e9eef1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message.new .message-subject {
    color: #fff5dc;
    font-weight: 650;
}

.message-date {
    margin-top: 7px;
    padding-left: 4px;
    font-size: 11px;
    color: #718491;
}

/* READER */

.reader {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    background:
        linear-gradient(180deg,
            #071119,
            #050d13);
}

.reader-empty {
    margin: auto;
    color: #718591;
}

.reader-header {
    padding: 24px 28px 17px;

    background:
        linear-gradient(180deg,
            #0b161d,
            #081219);

    border-bottom: 1px solid var(--border);
}

.reader-subject {
    margin-bottom: 15px;
    font-family: Georgia, serif;
    font-size: 25px;
    color: #f1d39b;
}

.reader-meta {
    font-size: 13px;
    color: #9dafba;
    line-height: 1.7;
}

.reader-meta strong {
    color: #d4dde2;
}

.reader-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 28px;
    background: #071017;
    border-bottom: 1px solid var(--border);
}

.reader-toolbar button:first-child {
    color: #f3ce85;
    border-color: #755623;
}

.reader-body {
    flex: 1;
    padding: 26px 30px;
    overflow-y: auto;
    line-height: 1.65;
    color: #dce3e7;

    background:
        radial-gradient(circle at 80% 0%,
            rgba(39,132,158,.055),
            transparent 35%);
}

.reader-text {
    white-space: pre-wrap;
}

.mail-frame {
    width: 100%;
    min-height: 650px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
}

/* ATTACHMENTS */

.attachments {
    padding: 12px 28px;
    border-top: 1px solid var(--border);
    background: #081219;
    font-size: 13px;
}

.attachment {
    display: inline-block;
    margin: 5px 7px 5px 0;
    padding: 7px 11px;

    border: 1px solid #394b56;
    border-radius: 5px;

    background: #0d1a22;
    color: #cbd6dc;
}

/* STATUS */

.status {
    display: flex;
    align-items: center;
    padding: 0 15px;

    font-size: 11px;
    color: #7f929e;

    background: #030a0f;
    border-top: 1px solid #3a3528;
}

.status::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 10px;

    border-radius: 50%;
    background: var(--success);

    box-shadow: 0 0 8px rgba(54,217,139,.45);
}

/* ERRORS */

.error {
    padding: 16px;
    color: #ff8585;
    background: rgba(229,107,107,.05);
    border-left: 3px solid var(--danger);
}

/* COMPOSE / REPLY */

.compose-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    background: rgba(0,5,9,.76);
    backdrop-filter: blur(3px);
}

.compose-overlay.open {
    display: flex;
}

.compose-window {
    position: relative;
    width: min(790px, 92vw);
    max-height: 90vh;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    border: 1px solid #9c7131;
    border-radius: 9px;

    background:
        linear-gradient(145deg,
            #0b171f,
            #071118);

    box-shadow:
        0 30px 90px rgba(0,0,0,.65),
        0 0 25px rgba(216,166,77,.09);
}

.compose-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;

    color: #f4d598;

    background:
        linear-gradient(180deg,
            #10202a,
            #0a151d);

    border-bottom: 1px solid #514126;
}

.compose-title {
    flex: 1;
    font-family: Georgia, serif;
    font-size: 20px;
}

.compose-close {
    padding: 2px 8px;
    font-size: 22px;
    color: #c9d1d6;
    background: transparent;
    border: 0;
}

.compose-form {
    padding: 20px 24px;
    overflow-y: auto;
}

.compose-row {
    margin-bottom: 14px;
}

.compose-row label {
    display: block;
    margin-bottom: 6px;

    font-size: 12px;
    font-weight: 650;
    color: #d4bd8e;
}

.compose-row input,
.compose-row select,
.compose-row textarea {
    width: 100%;
    padding: 10px 11px;

    font: inherit;
    color: #e8eef1;
    background: #050d12;

    border: 1px solid #394b56;
    border-radius: 6px;

    outline: none;

    transition:
        border-color .15s,
        box-shadow .15s;
}

.compose-row input:focus,
.compose-row select:focus,
.compose-row textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(216,166,77,.11);
}

.compose-row select option {
    background: #071118;
    color: #e8eef1;
}

.compose-row textarea {
    min-height: 280px;
    resize: vertical;
    line-height: 1.55;
}

.compose-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;

    background: #071017;
    border-top: 1px solid #514126;
}

.compose-send {
    padding: 9px 20px;
    color: #ffe0a0;
    border-color: #9b6d27;

    background:
        linear-gradient(180deg,
            #3b2d16,
            #1c160d);
}

.compose-send:hover {
    border-color: var(--gold-bright);

    background:
        linear-gradient(180deg,
            #4d391b,
            #261c0e);
}

.compose-cancel {
    background: #0c1820;
}

.compose-message {
    flex: 1;
    font-size: 13px;
    color: var(--soft);
}

/* SCROLLBAR */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #071017;
}

::-webkit-scrollbar-thumb {
    background: #3a4851;
    border-radius: 10px;
    border: 2px solid #071017;
}

::-webkit-scrollbar-thumb:hover {
    background: #8a6934;
}

@media (max-width: 1050px) {
    .layout {
        grid-template-columns:
            210px
            350px
            minmax(350px, 1fr);
    }

    .logo {
        font-size: 21px;
    }
}

/* =========================================================
   ANKHCORE BRANDING
   ========================================================= */

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 270px;
}

.ankhcore-logo {
    display: block;

    width: 58px;
    height: 58px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 7px rgba(216,166,77,.16));

    user-select: none;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand .logo::after {
    content: none;
}

.brand-subtitle {
    margin-top: 3px;

    font-size: 9px;
    font-weight: 650;

    letter-spacing: 3px;

    color: #b88d49;
}

@media (max-width: 1050px) {
    .brand {
        min-width: 225px;
        gap: 9px;
    }

    .ankhcore-logo {
        width: 50px;
        height: 50px;
    }

    .brand-subtitle {
        letter-spacing: 2px;
    }
}

/* R2.2 SEARCH + COUNTERS */

.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.nav-count {
    min-width: 25px;

    padding: 2px 7px;

    text-align: center;

    font-size: 11px;

    color: #e3c17d;

    background: rgba(216,166,77,.10);

    border: 1px solid rgba(216,166,77,.18);
    border-radius: 20px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 10px 12px;

    padding: 0 11px;

    background: #050d12;

    border: 1px solid #263842;
    border-radius: 6px;
}

.search-box:focus-within {
    border-color: #8e6a30;

    box-shadow:
        0 0 0 2px rgba(216,166,77,.07);
}

.search-icon {
    font-size: 20px;
    color: #6f8794;
}

.search-box input {
    width: 100%;

    padding: 10px 0;

    color: #dce5e9;

    background: transparent;

    border: 0;
    outline: 0;

    font: inherit;
}

.search-box input::placeholder {
    color: #617681;
}

/* =========================================================
   ACCOUNT SETTINGS
   ========================================================= */

.account-overlay {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    z-index: 1100;

    background: rgba(0,5,9,.78);
    backdrop-filter: blur(4px);
}

.account-overlay.open {
    display: flex;
}

.account-window {
    width: min(1050px, 94vw);
    height: min(720px, 90vh);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #0b171f,
            #071118);

    border: 1px solid #8f692f;
    border-radius: 9px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.68),
        0 0 28px rgba(216,166,77,.08);
}

.account-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 22px;

    background:
        linear-gradient(180deg,
            #10202a,
            #0a151d);

    border-bottom: 1px solid #514126;
}

.account-settings-title {
    font-family: Georgia, serif;
    font-size: 23px;
    color: #f1d39b;
}

.account-settings-subtitle {
    margin-top: 3px;

    font-size: 12px;
    color: #778b97;
}

.account-settings-body {
    min-height: 0;
    flex: 1;

    display: grid;
    grid-template-columns: 340px 1fr;
}

.account-settings-list {
    overflow-y: auto;

    padding: 12px;

    background: #061017;

    border-right: 1px solid #263842;
}

.settings-account {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 12px;

    margin-bottom: 5px;

    cursor: pointer;

    border: 1px solid transparent;
    border-radius: 6px;
}

.settings-account:hover {
    background: #0d1a22;
    border-color: #263842;
}

.settings-account.selected {
    background:
        linear-gradient(90deg,
            rgba(216,166,77,.13),
            rgba(216,166,77,.025));

    border-color: rgba(216,166,77,.30);

    box-shadow:
        inset 3px 0 0 #d8a64d;
}

.account-status-dot {
    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    border-radius: 50%;
}

.account-status-dot.ready {
    background: #36d98b;
    box-shadow: 0 0 8px rgba(54,217,139,.45);
}

.account-status-dot.pending {
    background: #a37c3e;
}

.settings-account-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.settings-account-text strong {
    overflow: hidden;
    text-overflow: ellipsis;

    color: #dce5e9;
}

.settings-account-text small {
    color: #718591;
}

.account-settings-detail {
    min-width: 0;

    padding: 28px 32px;

    overflow-y: auto;

    background:
        radial-gradient(circle at 80% 0%,
            rgba(39,132,158,.055),
            transparent 35%);
}

.settings-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 28px;
}

.settings-detail-header h2 {
    margin: 0;

    font-family: Georgia, serif;
    font-weight: 500;

    color: #f1d39b;
}

.settings-provider {
    margin-top: 5px;

    color: #748995;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.4px;
}

.settings-state {
    padding: 6px 10px;

    border-radius: 20px;

    font-size: 12px;
}

.settings-state.ready {
    color: #67e7a8;

    background: rgba(54,217,139,.08);

    border: 1px solid rgba(54,217,139,.20);
}

.settings-state.pending {
    color: #e3bd75;

    background: rgba(216,166,77,.08);

    border: 1px solid rgba(216,166,77,.20);
}

.settings-grid {
    display: grid;

    grid-template-columns: 145px 1fr;

    gap: 12px 18px;

    font-size: 14px;
}

.settings-label {
    color: #718591;
}

.settings-separator {
    height: 1px;

    margin: 28px 0;

    background:
        linear-gradient(90deg,
            #514126,
            transparent);
}

.settings-password-block label {
    display: block;

    margin-bottom: 7px;

    color: #d4bd8e;
    font-size: 12px;
    font-weight: 650;
}

.settings-password-block input {
    width: min(520px, 100%);

    padding: 10px 11px;

    color: #e8eef1;

    background: #050d12;

    border: 1px solid #394b56;
    border-radius: 6px;

    outline: none;
}

.settings-password-block input:focus {
    border-color: #d8a64d;

    box-shadow:
        0 0 0 2px rgba(216,166,77,.10);
}

.settings-password-hint {
    margin-top: 7px;

    font-size: 11px;

    color: #647984;
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 22px;
}

.settings-message {
    margin-left: 5px;

    font-size: 13px;

    color: #a8b6c0;
}

.settings-loading {
    padding: 20px;

    color: #718591;
}

@media (max-width: 850px) {
    .account-settings-body {
        grid-template-columns: 280px 1fr;
    }
}

/* =========================================================
   ACCOUNT EDITOR
   ========================================================= */

.account-list-column {
    min-height: 0;
    display: flex;
    flex-direction: column;

    background: #061017;

    border-right: 1px solid #263842;
}

.account-list-column .account-settings-list {
    flex: 1;
    min-height: 0;

    border-right: 0;
}

.account-list-actions {
    padding: 12px;

    border-bottom: 1px solid #263842;
}

.account-add-button {
    width: 100%;

    color: #f0c66f;

    border-color: #795520;

    background:
        linear-gradient(
            180deg,
            #261f13,
            #12110d
        );
}

.account-add-button:hover {
    border-color: #d8a64d;

    background:
        linear-gradient(
            180deg,
            #342919,
            #18140d
        );
}


/* EDITOR OVERLAY */

.account-editor-overlay {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    z-index: 1200;

    background: rgba(0,5,9,.82);

    backdrop-filter: blur(5px);
}

.account-editor-overlay.open {
    display: flex;
}

.account-editor-window {
    width: min(820px, 94vw);
    max-height: 92vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #0b171f,
            #071118
        );

    border: 1px solid #8f692f;
    border-radius: 9px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.72),
        0 0 28px rgba(216,166,77,.08);
}

.account-editor-body {
    padding: 24px 28px;

    overflow-y: auto;
}


/* ABSCHNITTE */

.editor-section-title {
    margin: 28px 0 15px;
    padding-bottom: 8px;

    font-family: Georgia, serif;
    font-size: 17px;

    color: #e2bd77;

    border-bottom: 1px solid #403720;
}

.editor-section-title:first-of-type {
    margin-top: 0;
}


/* FORM GRID */

.editor-grid {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    gap: 13px 18px;

    align-items: center;
}

.editor-grid > label {
    font-size: 13px;

    color: #8497a2;
}

.editor-grid input[type="text"],
.editor-grid input[type="email"],
.editor-grid input[type="number"],
.editor-grid input[type="password"],
.editor-grid select {
    width: 100%;

    padding: 10px 11px;

    font: inherit;

    color: #e8eef1;

    background: #050d12;

    border: 1px solid #394b56;
    border-radius: 6px;

    outline: none;
}

.editor-grid input:focus,
.editor-grid select:focus {
    border-color: #d8a64d;

    box-shadow:
        0 0 0 2px rgba(216,166,77,.09);
}

.editor-grid select option {
    color: #e8eef1;

    background: #071118;
}


/* CHECKBOXES */

.editor-checkbox {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 13px;

    color: #b8c4cb;
}

.editor-checkbox input {
    width: 16px;
    height: 16px;

    accent-color: #c99942;
}


/* PASSWORT + AUGE */

.password-field {
    position: relative;

    width: 100%;
    max-width: 520px;
}

.password-field input {
    width: 100%;

    padding-right: 50px !important;
}

.password-toggle {
    position: absolute;

    right: 4px;
    top: 50%;

    transform: translateY(-50%);

    width: 40px;
    height: 32px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;

    color: #d8a64d;

    background: transparent;

    border: 0;
    border-left: 1px solid #263842;

    border-radius: 0;

    cursor: pointer;
}

.password-toggle:hover {
    color: #f0c66f;

    background:
        rgba(216,166,77,.06);

    border-color: #795520;

    box-shadow: none;
}

.password-toggle:active {
    transform: translateY(-50%);
}


/* ACTION BAR */

.account-editor-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 14px 28px;

    background: #071017;

    border-top: 1px solid #514126;
}

.account-editor-actions .settings-message {
    flex: 1;

    min-width: 0;

    margin-left: 8px;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .editor-grid {
        grid-template-columns: 1fr;

        gap: 6px;
    }

    .editor-grid > label {
        margin-top: 8px;
    }

    .account-editor-actions {
        flex-wrap: wrap;
    }
}

/* =========================================================
   MESSAGE LIST SCROLL FIX
   ========================================================= */

.layout {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.message-column {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.message-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.sidebar,
.reader {
    min-height: 0;
}

.reader {
    height: 100%;
}

.reader-body {
    min-height: 0;
    overflow-y: auto;
}

/* Scrollbar in der Nachrichtenliste etwas sichtbarer */

.message-list {
    scrollbar-width: thin;
    scrollbar-color: #72572d #071017;
}

.message-list::-webkit-scrollbar {
    width: 9px;
}

.message-list::-webkit-scrollbar-track {
    background: #071017;
}

.message-list::-webkit-scrollbar-thumb {
    background: #72572d;
    border-radius: 10px;
    border: 2px solid #071017;
}

.message-list::-webkit-scrollbar-thumb:hover {
    background: #a27b3a;
}

/* =========================================================
   MESSAGE READ / UNREAD TOGGLE
   ========================================================= */

.message-topline {
    display: flex;
    align-items: center;

    gap: 8px;
}

.message-topline .message-from {
    flex: 1;
    min-width: 0;
}

.message-read-toggle {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 13px;

    background: transparent;

    box-shadow: none;
}

.message-read-toggle.unread {
    color: #e5b455;

    border-color:
        rgba(216,166,77,.35);
}

.message-read-toggle.unread:hover {
    color: #ffd681;

    background:
        rgba(216,166,77,.10);

    border-color: #d8a64d;
}

.message-read-toggle.read {
    color: #687d88;

    border-color:
        rgba(104,125,136,.25);
}

.message-read-toggle.read:hover {
    color: #b8c7ce;

    background:
        rgba(130,150,160,.08);

    border-color: #687d88;
}

/* MARK ALL READ */

.column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mark-all-read {
    padding: 6px 9px;

    font-family:
        "Segoe UI",
        sans-serif;

    font-size: 11px;
    font-weight: 500;

    color: #cba85f;

    background:
        rgba(216,166,77,.05);

    border-color:
        rgba(216,166,77,.25);
}

.mark-all-read:hover {
    color: #f0c66f;

    background:
        rgba(216,166,77,.10);

    border-color: #795520;
}

/* =========================================================
   FOLDERS R1
   ========================================================= */

.folder-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.folder-add {
    width: 25px;
    height: 25px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    line-height: 1;

    color: #d8a64d;

    background: transparent;

    border: 1px solid transparent;
    border-radius: 4px;
}

.folder-add:hover {
    color: #f0c66f;

    background:
        rgba(216,166,77,.08);

    border-color:
        rgba(216,166,77,.25);
}

.folder-nav-name {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 7px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-icon {
    flex: 0 0 auto;

    font-size: 14px;
}

.folder-empty {
    padding: 7px 14px 10px;

    font-size: 11px;
    font-style: italic;

    color: #586a74;
}


/* FOLDER DIALOG */

.folder-dialog-overlay {
    position: fixed;
    inset: 0;

    z-index: 1300;

    display: none;
    align-items: center;
    justify-content: center;

    background:
        rgba(0,5,9,.82);

    backdrop-filter: blur(5px);
}

.folder-dialog-overlay.open {
    display: flex;
}

.folder-dialog {
    width: min(440px, 92vw);

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #0b171f,
            #071118
        );

    border: 1px solid #8f692f;
    border-radius: 8px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.7);
}

.folder-dialog-title {
    margin-bottom: 18px;

    font-family: Georgia, serif;
    font-size: 20px;

    color: #e2bd77;
}

.folder-dialog-label {
    margin-bottom: 6px;

    font-size: 12px;

    color: #8497a2;
}

.folder-dialog input {
    width: 100%;

    padding: 10px 11px;

    color: #e8eef1;

    background: #050d12;

    border: 1px solid #394b56;
    border-radius: 6px;

    outline: none;
}

.folder-dialog input:focus {
    border-color: #d8a64d;

    box-shadow:
        0 0 0 2px
        rgba(216,166,77,.09);
}

.folder-dialog .settings-message {
    min-height: 20px;

    margin-top: 8px;
}

.folder-dialog-actions {
    margin-top: 12px;

    display: flex;
    gap: 9px;
}

/* =========================================================
   MOVE MESSAGE
   ========================================================= */

.move-folder-select {
    width: 100%;

    padding: 10px 11px;

    font: inherit;

    color: #e8eef1;

    background: #050d12;

    border: 1px solid #394b56;
    border-radius: 6px;

    outline: none;
}

.move-folder-select:focus {
    border-color: #d8a64d;

    box-shadow:
        0 0 0 2px
        rgba(216,166,77,.09);
}

.move-folder-select option {
    color: #e8eef1;
    background: #071118;
}

/* SYSTEM FOLDERS */

.folder-system-title {
    margin: 12px 14px 5px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: #6f8089;
}

.system-folder .folder-icon {
    font-size: 13px;
}

.system-folder {
    color: #aebbc1;
}

/* =========================================================
   DESTRUCTIVE ACTIONS
   ========================================================= */

.danger-button {
    color: #e58b8b;

    border-color:
        rgba(180,70,70,.45);

    background:
        rgba(120,25,25,.12);
}

.danger-button:hover {
    color: #ffb0b0;

    border-color: #a94b4b;

    background:
        rgba(150,35,35,.20);
}

/* =========================================================
   RESPONSIVE MAIL LAYOUT R1
   ========================================================= */

/*
 * Grid/Flex-Kinder dürfen kleiner als ihr Inhalt werden.
 * Besonders wichtig für Reader und Nachrichtenliste.
 */

.layout,
.message-column,
.reader {
    min-width: 0;
}


/* ---------------------------------------------------------
   READER
   --------------------------------------------------------- */

.reader {
    overflow-x: hidden;
    overflow-y: auto;
}

.reader-header,
.reader-toolbar,
.reader-body,
.attachments {
    max-width: 100%;
    min-width: 0;
}


/* ---------------------------------------------------------
   TOOLBAR
   --------------------------------------------------------- */

.reader-toolbar {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    padding: 10px 28px;
}

.reader-toolbar button {
    flex: 0 0 auto;

    min-width: 0;

    padding: 9px 13px;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   MAIL BODY
   --------------------------------------------------------- */

.reader-body {
    overflow-wrap: anywhere;
    word-break: normal;
}

.reader-text {
    max-width: 100%;

    overflow-wrap: anywhere;
}


/*
 * HTML-Mails dürfen durch feste Breiten von Absendern
 * den Reader nicht verbreitern.
 */

.reader-body img {
    max-width: 100% !important;
    height: auto !important;
}

.reader-body table {
    max-width: 100% !important;
}

.reader-body iframe {
    max-width: 100%;
}


/* Lange URLs / Header / technische Inhalte */

.reader a,
.reader-meta {
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   MITTLERE NACHRICHTENSPALTE
   --------------------------------------------------------- */

.message-list,
.message,
.sent-message {
    min-width: 0;
}

.message-from,
.message-subject,
.message-date {
    min-width: 0;
}

.message-subject {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------------------------------------------------------
   KLEINERE DESKTOP-FENSTER
   --------------------------------------------------------- */

@media (max-width: 1250px) {

    .reader-toolbar {
        gap: 6px;

        padding-left: 18px;
        padding-right: 18px;
    }

    .reader-toolbar button {
        padding: 8px 10px;

        font-size: 12px;
    }

    .reader-header,
    .reader-body {
        padding-left: 22px;
        padding-right: 22px;
    }
}


/* ---------------------------------------------------------
   NOCH SCHMALER
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .reader-toolbar button {
        padding: 7px 8px;

        font-size: 11px;
    }

    .reader-header,
    .reader-body {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* =========================================================
   FOLDER ACTIONS R3
   ========================================================= */
.folder-nav { position: relative; }
.folder-nav-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
.folder-more {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9cafb8;
    background: transparent;
    border-color: transparent;
}
.folder-more:hover {
    color: #f0c66f;
    background: rgba(216,166,77,.08);
    border-color: rgba(216,166,77,.25);
}
.folder-action-menu {
    display: none;
    position: absolute;
    z-index: 50;
    right: 8px;
    top: calc(100% - 3px);
    min-width: 150px;
    padding: 5px;
    background: #071119;
    border: 1px solid #514126;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.folder-action-menu.open {
    display: grid;
    gap: 4px;
}
.folder-action-menu button {
    width: 100%;
    text-align: left;
    padding: 7px 9px;
    font-size: 12px;
}

/* ---------------------------------------------------------
   ANKH-MAIL MEHRFACHAUSWAHL
   --------------------------------------------------------- */

.message-selection-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.message-selection-count {
    margin-right: auto;
    font-size: 13px;
    opacity: 0.85;
}

.message-selection-toolbar button:disabled {
    opacity: 0.45;
    cursor: default;
}

.message {
    position: relative;
}

.message-selection {
    float: left;
    padding: 2px 9px 0 0;
}

.message-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.message-content {
    overflow: hidden;
}

.message.multi-selected {
    outline: 1px solid currentColor;
    outline-offset: -1px;
}