/*
 * Krao skin — "Hoàng Kim Navy" (M6 redesign)
 * File ĐỘC LẬP nằm ngoài build pcss của upstream: chỉ override token compound (--cpd-*)
 * và các class mx_* ổn định. KHÔNG sửa logic — rebase upstream không đụng file này.
 * Nạp qua 1 dòng <link> trong src/vector/index.html (sau các theme bundle).
 */

/* ========== 1. Font: Inter (body) + Plus Jakarta Sans (display) — đồng bộ 9Do ========== */

/* Inter vietnamese 400 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Inter latin-ext 400 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin 400 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter vietnamese 500 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Inter latin-ext 500 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin 500 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter vietnamese 600 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Inter latin-ext 600 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin 600 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter vietnamese 700 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-700-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Inter latin-ext 700 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin 700 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans vietnamese 600 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/jakarta-600-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Plus Jakarta Sans latin-ext 600 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/jakarta-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans latin 600 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/jakarta-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans vietnamese 700 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/jakarta-700-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Plus Jakarta Sans latin-ext 700 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/jakarta-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans latin 700 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/jakarta-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans vietnamese 800 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/jakarta-800-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Plus Jakarta Sans latin-ext 800 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/jakarta-800-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans latin 800 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/jakarta-800-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font mặc định toàn app (FontWatcher chỉ ghi đè khi user bật system font).
   _common.pcss set --cpd-font-family-sans (Nunito) TRỰC TIẾP trên phần tử [class^="cpd-theme"]
   (chính là <body>) — custom property khai báo trên element thắng giá trị kế thừa,
   nên phải override đúng element đó. Rule này unlayered → thắng rule layered của upstream. */
:root,
body[class*="cpd-theme"] {
    --cpd-font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

/* Heading dùng Plus Jakarta Sans (display) — đồng bộ 9Do. Áp cả heading trong
   tin nhắn markdown: nhất quán, không hại. */
body[class*="cpd-theme"] h1,
body[class*="cpd-theme"] h2,
body[class*="cpd-theme"] h3,
body[class*="cpd-theme"] .mx_Dialog_title,
body[class*="cpd-theme"] .mx_RoomHeader_heading {
    font-family: var(--krao-font-display, "Plus Jakarta Sans", "Inter", sans-serif);
}

/* Theme legacy (dark-custom) set cứng Nunito trên body — ép lại bằng !important.
   Vùng monospace/code tự set font riêng trên phần tử con nên không bị ảnh hưởng. */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

/* ========== 2. Bảng màu Hoàng Kim Navy — token compound (chỉ áp theme tối) ========== */

body.cpd-theme-dark {
    /* Thang navy = thang "ink" CHÍNH THỨC của hệ sinh thái (9do.com tailwind.config):
       950 #070E22 · 900 #0D1733 · 800 #14224A · 700 #1B2F63 · 600 #244084 · 400 #4C6BBE
       · 300 #7C96D6 · 200 #AEC0E8 · 50 #EEF2FB. Mọi bậc dưới đây là giá trị CÓ THẬT
       trong thang — không chế hex trung gian (bài học chuẩn hóa của 9Do). */
    --krao-navy-0: #070e22; /* ink-950 — space panel */
    --krao-navy-1: #0d1733; /* ink-900 — room list + timeline */
    --krao-navy-2: #0d1733; /* ink-900 — timeline (phân lớp bằng radial 700) */
    --krao-navy-3: #14224a; /* ink-800 — khối nổi: composer, input, dialog */
    --krao-navy-4: #14224a; /* ink-800 — hover trên nền 900 */
    --krao-navy-5: #1b2f63; /* ink-700 — active/selected */
    --krao-line-1: rgba(255, 255, 255, 0.06);
    --krao-line-2: #244084; /* ink-600 — viền interactive/scrollbar */
    --krao-text-1: #eef2fb; /* ink-50 */
    --krao-text-2: #aec0e8; /* ink-200 */
    --krao-text-3: #7c96d6; /* ink-300 */
    /* Vàng = thang "brand" chính thức 9Do: 300 #FFDA5C · 400 #FFCB24 · 500 #FFBF00 */
    --krao-gold: #ffbf00;
    --krao-gold-bright: #ffda5c;
    --krao-gold-deep: #ffcb24;
    --krao-grad-gold: linear-gradient(135deg, #ffda5c, #ffbf00);
    --krao-bubble-in: #14224a;
    --krao-bubble-out: linear-gradient(135deg, #244084, #1b2f63);
    /* Font display cho heading — đồng bộ 9Do */
    --krao-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* nền */
    --cpd-color-bg-canvas-default: var(--krao-navy-2);
    --cpd-color-bg-canvas-disabled: var(--krao-navy-1);
    --cpd-color-bg-subtle-primary: var(--krao-navy-5);
    --cpd-color-bg-subtle-secondary: var(--krao-navy-4);
    --cpd-color-bg-action-secondary-rest: var(--krao-navy-3);
    --cpd-color-bg-action-secondary-hovered: var(--krao-navy-4);
    --cpd-color-bg-action-secondary-pressed: var(--krao-navy-5);

    /* nút chính = vàng, chữ navy */
    --cpd-color-bg-action-primary-rest: var(--krao-gold);
    --cpd-color-bg-action-primary-hovered: var(--krao-gold-bright);
    --cpd-color-bg-action-primary-pressed: var(--krao-gold-deep);
    --cpd-color-text-on-solid-primary: #0d1733;

    /* accent vàng */
    --cpd-color-bg-accent-rest: var(--krao-gold);
    --cpd-color-bg-accent-hovered: var(--krao-gold-bright);
    --cpd-color-bg-accent-pressed: var(--krao-gold-deep);
    --cpd-color-text-action-accent: var(--krao-gold);
    --cpd-color-icon-accent-primary: var(--krao-gold);
    --cpd-color-icon-accent-tertiary: var(--krao-gold);
    --cpd-color-border-accent: var(--krao-gold);

    /* chữ */
    --cpd-color-text-primary: var(--krao-text-1);
    --cpd-color-text-secondary: var(--krao-text-2);
    --cpd-color-text-placeholder: #7c96d6;
    --cpd-color-text-disabled: #4c6bbe;
    --cpd-color-text-action-primary: var(--krao-text-1);

    /* icon */
    --cpd-color-icon-primary: var(--krao-text-1);
    --cpd-color-icon-secondary: var(--krao-text-2);
    --cpd-color-icon-tertiary: #7c96d6;
    --cpd-color-icon-quaternary: var(--krao-text-3);

    /* viền */
    --cpd-color-border-interactive-primary: #244084;
    --cpd-color-border-interactive-secondary: var(--krao-line-2);
    --cpd-color-border-interactive-hovered: var(--krao-gold);
    --cpd-color-border-disabled: var(--krao-navy-5);
    --cpd-color-border-focused: var(--krao-gold);

    /* KHÔNG override ramp token (green-300/gray-300…) — chúng được dùng lại ở
       nơi khác (nút định dạng active, closeButtonMenu) và sẽ gây side-effect.
       Nền bubble đã được set trực tiếp ở section 6. */
}

/* ========== 3. Nền tảng: chọn chữ, scrollbar, focus ========== */

body.cpd-theme-dark ::selection {
    background: rgba(255, 191, 0, 0.35);
}

body.cpd-theme-dark * {
    scrollbar-width: thin;
    scrollbar-color: var(--krao-line-2) transparent;
}
body.cpd-theme-dark *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.cpd-theme-dark *::-webkit-scrollbar-thumb {
    background: var(--krao-line-2);
    border-radius: 8px;
}
body.cpd-theme-dark *::-webkit-scrollbar-track {
    background: transparent;
}

/* ========== 4. Space panel (cột trái ngoài cùng) ========== */

body.cpd-theme-dark .mx_SpacePanel {
    background: var(--krao-navy-0);
    border-right: 1px solid var(--krao-line-1);
}

/* ========== 5. Room list ========== */

body.cpd-theme-dark .mx_RoomListPanel {
    background-color: var(--krao-navy-1);
    border-right: 1px solid var(--krao-line-1);
}

body.cpd-theme-dark .mx_RoomListItemView {
    border-radius: 12px;
    margin: 0 6px;
    width: calc(100% - 12px);
    transition: background-color 0.15s ease;
}
body.cpd-theme-dark .mx_RoomListItemView:hover {
    background-color: var(--krao-navy-4);
}
body.cpd-theme-dark .mx_RoomListItemView_selected,
body.cpd-theme-dark .mx_RoomListItemView_selected:hover {
    background: linear-gradient(90deg, rgba(255, 191, 0, 0.13), rgba(255, 191, 0, 0.03));
    box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.22);
}

/* ========== 6. Khung chat: header, timeline, bubble ========== */

body.cpd-theme-dark .mx_RoomHeader {
    background: rgba(13, 23, 51, 0.72);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--krao-line-1);
}

body.cpd-theme-dark .mx_RoomView_body {
    background:
        radial-gradient(1200px 500px at 80% -10%, #1b2f63 0%, transparent 55%),
        var(--krao-navy-2);
}

/* bubble: bo tròn hơn */
body.cpd-theme-dark .mx_EventTile[data-layout="bubble"] {
    --cornerRadius: 16px;
}

/* bubble người khác */
body.cpd-theme-dark .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line {
    background: var(--krao-bubble-in);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* bubble của mình: navy sáng + viền vàng mờ + glow nhẹ */
body.cpd-theme-dark .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line {
    background: var(--krao-bubble-out);
    box-shadow:
        inset 0 0 0 1px rgba(255, 191, 0, 0.3),
        0 6px 24px -8px rgba(255, 191, 0, 0.15);
}

/* ngăn cách ngày */
body.cpd-theme-dark .mx_DateSeparator_dateContent {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 99px;
    padding: 2px 12px;
}

/* ========== 7. Composer ========== */

body.cpd-theme-dark .mx_MessageComposer_row {
    background: var(--krao-navy-3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    margin: 0 8px 8px;
    padding: 2px 4px 2px 10px;
    transition: border-color 0.15s ease;
}
body.cpd-theme-dark .mx_MessageComposer_row:focus-within {
    border-color: rgba(255, 191, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.08);
}
body.cpd-theme-dark .mx_MessageComposer_sendMessage {
    background: var(--krao-grad-gold);
    box-shadow: 0 4px 16px -4px rgba(255, 191, 0, 0.4);
}
body.cpd-theme-dark .mx_MessageComposer_sendMessage::before {
    background-color: #0d1733;
}

/* trạng thái active của nút định dạng (upstream dùng $accent-300 = green-300,
   trên nền navy sẽ lệch tông — thay bằng vàng mờ) */
body.cpd-theme-dark .mx_FormattingButtons_active {
    background: rgba(255, 191, 0, 0.16);
}
body.cpd-theme-dark .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::after {
    background: rgba(255, 191, 0, 0.16);
}

/* ========== 8. Trang đăng nhập / đăng ký ========== */

/* AuthPage.tsx set ảnh nền lake.jpg bằng inline style → cần !important để thắng */
body.cpd-theme-dark .mx_AuthPage {
    background:
        radial-gradient(900px 480px at 75% -5%, #1b2f63 0%, transparent 60%),
        radial-gradient(700px 420px at 10% 105%, #14224a 0%, transparent 55%),
        var(--krao-navy-1) !important;
}

/* AuthPage.tsx set inline `background: initial` lên modal → cần !important */
body.cpd-theme-dark .mx_AuthPage_modal {
    background: rgba(20, 34, 74, 0.82) !important;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

body.cpd-theme-dark .mx_AuthPage_modalContent {
    background-color: rgba(13, 23, 51, 0.45);
}
body.cpd-theme-dark .mx_AuthHeaderLogo img {
    filter: drop-shadow(0 0 18px rgba(255, 191, 0, 0.35));
}

body.cpd-theme-dark .mx_AuthBody {
    background: transparent;
    color: var(--krao-text-2);
}
body.cpd-theme-dark .mx_AuthBody h1,
body.cpd-theme-dark .mx_AuthBody h2 {
    color: var(--krao-text-1);
    font-weight: 700;
    letter-spacing: -0.3px;
}

body.cpd-theme-dark .mx_AuthFooter {
    opacity: 0.55;
}

/* ========== 9. Field & nút ========== */

body.cpd-theme-dark .mx_Field {
    border-radius: 12px;
    background: rgba(13, 23, 51, 0.75);
    border-color: rgba(255, 255, 255, 0.09);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.cpd-theme-dark .mx_Field:focus-within {
    border-color: var(--krao-gold);
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.12);
}

body.cpd-theme-dark .mx_AccessibleButton_kind_primary,
body.cpd-theme-dark .mx_AccessibleButton_kind_primary_sm {
    background: var(--krao-grad-gold);
    color: #0d1733;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 10px 30px -10px rgba(255, 191, 0, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.cpd-theme-dark .mx_AccessibleButton_kind_primary:hover,
body.cpd-theme-dark .mx_AccessibleButton_kind_primary_sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px -10px rgba(255, 191, 0, 0.6);
}

body.cpd-theme-dark .mx_AccessibleButton_kind_primary_outline {
    border-radius: 12px;
    border-color: rgba(255, 191, 0, 0.5);
    color: var(--krao-gold);
    font-weight: 600;
}

/* nút compound (Login/Register form mới dùng Button của compound) */
body.cpd-theme-dark button[class*="_button_"][data-kind="primary"] {
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 10px 30px -10px rgba(255, 191, 0, 0.5);
}

/* ========== 10. Dialog, menu, toast ========== */

body.cpd-theme-dark .mx_Dialog {
    background-color: var(--krao-navy-3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.65);
}

body.cpd-theme-dark .mx_ContextualMenu {
    background-color: var(--krao-navy-3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
}

body.cpd-theme-dark .mx_Toast_toast {
    background-color: var(--krao-navy-3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

/* ========== 11. Trang chủ (khi chưa vào phòng) ========== */

body.cpd-theme-dark .mx_HomePage_default_buttons .mx_AccessibleButton {
    border-radius: 14px;
}

/* ========== 12. Hoàn thiện M6b — kết quả audit từng surface ========== */

/* 12a. Bộ màu decorative (avatar fallback + tên người dùng compound) — mặc định
   compound là đỏ đô/xanh rêu lệch tông; thay bằng 6 cặp hài hòa navy/vàng.
   Nền tối tint theo hue + chữ sáng cùng hue (contrast ≥ 6:1, qua AA 4.5:1). */
body.cpd-theme-dark {
    --cpd-color-bg-decorative-1: #0f2a5c;
    --cpd-color-text-decorative-1: #6fb1ff;
    --cpd-color-bg-decorative-2: #2a1a52;
    --cpd-color-text-decorative-2: #c792ea;
    --cpd-color-bg-decorative-3: #3b2c00; /* brand-900 */
    --cpd-color-text-decorative-3: #ffda5c; /* brand-300 */
    --cpd-color-bg-decorative-4: #04303a;
    --cpd-color-text-decorative-4: #4fd1c5;
    --cpd-color-bg-decorative-5: #3a1e08;
    --cpd-color-text-decorative-5: #ff9e6e;
    --cpd-color-bg-decorative-6: #3a102a;
    --cpd-color-text-decorative-6: #f98bc0;
}

/* 12b. Một số dialog mới (create-room, theme picker) bọc nội dung trong scope
   `cpd-theme-*` LỒNG BÊN TRONG — token compound re-declare gần hơn nên thắng
   override trên body. Áp lại nhóm accent cho mọi scope lồng. */
body.cpd-theme-dark [class*="cpd-theme"] {
    --cpd-color-bg-accent-rest: var(--krao-gold);
    --cpd-color-bg-accent-hovered: var(--krao-gold-bright);
    --cpd-color-bg-accent-pressed: var(--krao-gold-deep);
    --cpd-color-text-action-accent: var(--krao-gold);
    --cpd-color-icon-accent-primary: var(--krao-gold);
    --cpd-color-icon-accent-tertiary: var(--krao-gold);
    --cpd-color-border-accent: var(--krao-gold);
}

/* 12c. Badge đếm tin chưa đọc loại thường — xám mặc định → navy.
   GIỮ NGUYÊN badge mention (level_highlight, đỏ) và dot (xanh/đỏ) — semantic. */
body.cpd-theme-dark .mx_NotificationBadge:not(.mx_NotificationBadge_level_highlight):not(.mx_NotificationBadge_dot) {
    background-color: #244084;
}

/* 12d. Spotlight (Ctrl+K): option đang chọn xám → navy hover + viền vàng nhẹ */
body.cpd-theme-dark .mx_SpotlightDialog_option:hover,
body.cpd-theme-dark .mx_SpotlightDialog_option[aria-selected="true"] {
    background-color: var(--krao-navy-4);
}
body.cpd-theme-dark .mx_SpotlightDialog_option[aria-selected="true"] {
    box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.25);
}

/* 12e. Khung widget/mini-app (AppsDrawer) đồng bộ tông */
body.cpd-theme-dark .mx_AppTile {
    background: var(--krao-navy-1);
    border: 1px solid var(--krao-line-1);
    border-radius: 12px;
    overflow: hidden;
}
body.cpd-theme-dark .mx_AppTileMenuBar {
    background: var(--krao-navy-3);
    border-bottom: 1px solid var(--krao-line-1);
}

/* ========== 13. Theme SÁNG "Krao Sáng" (Ban Mai) — dual-tone rail navy + nội dung sáng ==========
   Chọn trong Cài đặt → Giao diện. Cùng thang ink/brand 9Do với theme tối.
   Nguyên tắc contrast: vàng #FFBF00 KHÔNG dùng làm chữ trên nền sáng —
   chữ/link accent dùng brand-600 #9A7200 (AA trên trắng); nút đặc vẫn vàng 500 chữ navy. */

body.cpd-theme-light {
    --krao-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --krao-gold: #ffbf00;
    --krao-grad-gold: linear-gradient(135deg, #ffda5c, #ffbf00);

    /* bề mặt */
    --cpd-color-bg-canvas-default: #ffffff;
    --cpd-color-bg-subtle-primary: #d5dff4; /* ink-100 */
    --cpd-color-bg-subtle-secondary: #eef2fb; /* ink-50 */
    --cpd-color-bg-action-secondary-rest: #ffffff;

    /* nút chính = vàng, chữ navy (như theme tối) */
    --cpd-color-bg-action-primary-rest: #ffbf00;
    --cpd-color-bg-action-primary-hovered: #ffcb24;
    --cpd-color-bg-action-primary-pressed: #ffda5c;
    --cpd-color-text-on-solid-primary: #0d1733;

    /* accent: nền đặc vàng, chữ/icon amber đậm đạt AA */
    --cpd-color-bg-accent-rest: #ffbf00;
    --cpd-color-bg-accent-hovered: #ffcb24;
    --cpd-color-bg-accent-pressed: #ffda5c;
    --cpd-color-text-action-accent: #9a7200;
    --cpd-color-icon-accent-primary: #9a7200;
    --cpd-color-icon-accent-tertiary: #9a7200;
    --cpd-color-border-accent: #9a7200;

    /* chữ trên nền sáng — thang ink */
    --cpd-color-text-primary: #0d1733;
    --cpd-color-text-secondary: #244084;
    --cpd-color-text-placeholder: #4c6bbe;
    --cpd-color-text-disabled: #7c96d6;
    --cpd-color-icon-primary: #0d1733;
    --cpd-color-icon-secondary: #244084;
    --cpd-color-icon-tertiary: #4c6bbe;

    /* viền */
    --cpd-color-border-interactive-primary: #aec0e8;
    --cpd-color-border-interactive-secondary: #d5dff4;
    --cpd-color-border-interactive-hovered: #9a7200;
    --cpd-color-border-focused: #9a7200;
}

/* accent cho scope cpd-theme lồng trong (dialog mới) — bản sáng */
body.cpd-theme-light [class*="cpd-theme"] {
    --cpd-color-bg-accent-rest: #ffbf00;
    --cpd-color-bg-accent-hovered: #ffcb24;
    --cpd-color-text-action-accent: #9a7200;
    --cpd-color-icon-accent-primary: #9a7200;
    --cpd-color-border-accent: #9a7200;
}

body.cpd-theme-light ::selection {
    background: rgba(255, 191, 0, 0.35);
}
body.cpd-theme-light * {
    scrollbar-width: thin;
    scrollbar-color: #aec0e8 transparent;
}
body.cpd-theme-light *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.cpd-theme-light *::-webkit-scrollbar-thumb {
    background: #aec0e8;
    border-radius: 8px;
}

/* rail navy — chữ ký dual-tone của Krao Sáng. Token trong rail lật lại bản tối
   (đặt var trên container, con cháu kế thừa). */
body.cpd-theme-light .mx_SpacePanel {
    background: #0d1733;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    --cpd-color-text-primary: #eef2fb;
    --cpd-color-text-secondary: #aec0e8;
    --cpd-color-icon-primary: #eef2fb;
    --cpd-color-icon-secondary: #aec0e8;
    --cpd-color-icon-tertiary: #aec0e8;
    --cpd-color-bg-subtle-primary: #1b2f63;
    --cpd-color-bg-subtle-secondary: #14224a;
}
/* nút compound trong rail set màu literal (không qua var) → ép trực tiếp */
body.cpd-theme-light .mx_SpacePanel button,
body.cpd-theme-light .mx_SpacePanel [class*="icon-button"] {
    color: #aec0e8;
}
body.cpd-theme-light .mx_SpacePanel button:hover {
    color: #eef2fb;
}

/* room list sáng */
body.cpd-theme-light .mx_RoomListPanel {
    background-color: #eef2fb;
    border-right: 1px solid #d5dff4;
}
body.cpd-theme-light .mx_RoomListItemView {
    border-radius: 12px;
    margin: 0 6px;
    width: calc(100% - 12px);
    transition: background-color 0.15s ease;
}
body.cpd-theme-light .mx_RoomListItemView:hover {
    background-color: #ffffff;
}
body.cpd-theme-light .mx_RoomListItemView_selected,
body.cpd-theme-light .mx_RoomListItemView_selected:hover {
    background: linear-gradient(90deg, rgba(255, 191, 0, 0.2), rgba(255, 191, 0, 0.06));
    box-shadow: inset 0 0 0 1px rgba(154, 114, 0, 0.35);
}

/* khung chat sáng */
body.cpd-theme-light .mx_RoomHeader {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #d5dff4;
}
body.cpd-theme-light .mx_RoomView_body {
    background:
        radial-gradient(1200px 500px at 80% -10%, #eef2fb 0%, transparent 55%),
        #ffffff;
}
body.cpd-theme-light .mx_EventTile[data-layout="bubble"] {
    --cornerRadius: 16px;
}
body.cpd-theme-light .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line {
    background: #eef2fb;
    box-shadow: inset 0 0 0 1px rgba(13, 23, 51, 0.06);
}
/* tin của mình: navy đặc chữ sáng — chữ ký Ban Mai */
body.cpd-theme-light .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line {
    background: linear-gradient(135deg, #14224a, #0d1733);
    box-shadow: 0 4px 16px -6px rgba(13, 23, 51, 0.35);
    --cpd-color-text-primary: #eef2fb;
    --cpd-color-text-secondary: #aec0e8;
    color: #eef2fb;
}
body.cpd-theme-light .mx_DateSeparator_dateContent {
    background: #eef2fb;
    border-radius: 99px;
    padding: 2px 12px;
}

/* composer sáng */
body.cpd-theme-light .mx_MessageComposer_row {
    background: #ffffff;
    border: 1px solid #d5dff4;
    border-radius: 16px;
    margin: 0 8px 8px;
    padding: 2px 4px 2px 10px;
    box-shadow: 0 2px 10px rgba(13, 23, 51, 0.05);
    transition: border-color 0.15s ease;
}
body.cpd-theme-light .mx_MessageComposer_row:focus-within {
    border-color: rgba(154, 114, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.15);
}
body.cpd-theme-light .mx_MessageComposer_sendMessage {
    background: var(--krao-grad-gold);
    box-shadow: 0 4px 14px -4px rgba(255, 191, 0, 0.55);
}
body.cpd-theme-light .mx_MessageComposer_sendMessage::before {
    background-color: #0d1733;
}
body.cpd-theme-light .mx_FormattingButtons_active {
    background: rgba(255, 191, 0, 0.22);
}

/* đăng nhập / đăng ký sáng */
body.cpd-theme-light .mx_AuthPage {
    background:
        radial-gradient(900px 480px at 75% -5%, rgba(255, 191, 0, 0.12) 0%, transparent 60%),
        radial-gradient(700px 420px at 10% 105%, #d5dff4 0%, transparent 55%),
        #eef2fb !important;
}
body.cpd-theme-light .mx_AuthPage_modal {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(14px);
    border: 1px solid #d5dff4;
    border-radius: 20px;
    box-shadow: 0 30px 80px -30px rgba(13, 23, 51, 0.25);
    overflow: hidden;
}
body.cpd-theme-light .mx_AuthHeaderLogo img {
    filter: drop-shadow(0 0 14px rgba(255, 191, 0, 0.45));
}
body.cpd-theme-light .mx_AuthBody {
    background: transparent;
    color: #244084;
}
body.cpd-theme-light .mx_AuthBody h1,
body.cpd-theme-light .mx_AuthBody h2 {
    color: #0d1733;
    font-weight: 700;
    letter-spacing: -0.3px;
}
body.cpd-theme-light .mx_Field {
    border-radius: 12px;
    background: #eef2fb;
    border-color: #d5dff4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.cpd-theme-light .mx_Field:focus-within {
    border-color: #9a7200;
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.18);
}

/* nút sáng */
body.cpd-theme-light .mx_AccessibleButton_kind_primary,
body.cpd-theme-light .mx_AccessibleButton_kind_primary_sm {
    background: var(--krao-grad-gold);
    color: #0d1733;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 8px 24px -10px rgba(255, 191, 0, 0.7);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.cpd-theme-light .mx_AccessibleButton_kind_primary:hover,
body.cpd-theme-light .mx_AccessibleButton_kind_primary_sm:hover {
    transform: translateY(-1px);
}
body.cpd-theme-light .mx_AccessibleButton_kind_primary_outline {
    border-radius: 12px;
    border-color: rgba(154, 114, 0, 0.55);
    color: #9a7200;
    font-weight: 600;
}

/* dialog, menu, toast, spotlight sáng */
body.cpd-theme-light .mx_Dialog {
    background-color: #ffffff;
    border: 1px solid #d5dff4;
    border-radius: 16px;
    box-shadow: 0 30px 80px -30px rgba(13, 23, 51, 0.3);
}
body.cpd-theme-light .mx_ContextualMenu,
body.cpd-theme-light .mx_Toast_toast {
    background-color: #ffffff;
    border: 1px solid #d5dff4;
    border-radius: 12px;
    box-shadow: 0 16px 48px -18px rgba(13, 23, 51, 0.3);
}
body.cpd-theme-light .mx_SpotlightDialog_option:hover,
body.cpd-theme-light .mx_SpotlightDialog_option[aria-selected="true"] {
    background-color: #eef2fb;
}
body.cpd-theme-light .mx_SpotlightDialog_option[aria-selected="true"] {
    box-shadow: inset 0 0 0 1px rgba(154, 114, 0, 0.3);
}

/* badge + widget sáng */
body.cpd-theme-light .mx_NotificationBadge:not(.mx_NotificationBadge_level_highlight):not(.mx_NotificationBadge_dot) {
    background-color: #244084;
}
body.cpd-theme-light .mx_AppTile {
    background: #ffffff;
    border: 1px solid #d5dff4;
    border-radius: 12px;
    overflow: hidden;
}
body.cpd-theme-light .mx_AppTileMenuBar {
    background: #eef2fb;
    border-bottom: 1px solid #d5dff4;
}

/* ========== 14. Tôn trọng reduced motion ========== */

@media (prefers-reduced-motion: reduce) {
    body[class*="cpd-theme"] .mx_RoomListItemView,
    body[class*="cpd-theme"] .mx_MessageComposer_row,
    body[class*="cpd-theme"] .mx_Field,
    body[class*="cpd-theme"] .mx_AccessibleButton_kind_primary,
    body[class*="cpd-theme"] .mx_AccessibleButton_kind_primary_sm {
        transition: none;
    }
    body[class*="cpd-theme"] .mx_AccessibleButton_kind_primary:hover,
    body[class*="cpd-theme"] .mx_AccessibleButton_kind_primary_sm:hover {
        transform: none;
    }
}