/* Fanxing dialog skins
 * Theme color frames each dialog; semantic colors remain distinct.
 * No dotted/star-field backdrop effects are used. */

:root {
    --fx-dialog-navy: rgba(6, 14, 31, .985);
    --fx-dialog-line: rgba(82, 164, 255, .25);
    --fx-dialog-text: #eef6ff;
    --fx-dialog-muted: rgba(194, 216, 245, .56);
    --fx-dialog-field: rgba(5, 14, 31, .58);
    --fx-purple: #9168ef;
    --fx-cyan: #63c9ff;
    --fx-green: #35d7a1;
    --fx-gold: #ffd04a;
    --fx-rose: #ff6f88;
}

body.chat-shell :is(#contactModalOverlay, #confirmModal, #feedbackOverlay),
body.chat-shell :is(.settings-modern-modal, .role-manager-modal, .asset-selector-modal, .asset-editor-modal, .extend-video-modal) :is(.modal-overlay, .role-manager-backdrop, .asset-selector-backdrop, .asset-editor-backdrop) {
    background: rgba(2, 7, 18, .76);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

body.chat-shell :is(
    #contactModal,
    #feedbackDrawer,
    #confirmModal .fx-confirm-modal,
    .settings-modal-content,
    .role-manager-panel,
    .asset-selector-panel,
    .asset-editor-panel,
    .ultra-premium-modal,
    .extend-video-content,
    .welcome-modal-content
) {
    border: 1px solid var(--fx-dialog-line);
    color: var(--fx-dialog-text);
    background: linear-gradient(145deg, rgba(9, 27, 53, .99), var(--fx-dialog-navy) 58%, rgba(17, 18, 43, .99));
    box-shadow: 0 30px 100px rgba(0, 0, 0, .64), 0 0 58px rgba(42, 137, 255, .12);
}

body.chat-shell :is(#contactModal, #feedbackDrawer, .settings-modal-content, .role-manager-panel, .asset-selector-panel, .asset-editor-panel, .ultra-premium-modal, .extend-video-content) {
    overflow: hidden;
}

.fx-dialog-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fx-dialog-heading > span:last-child { min-width: 0; }
body.chat-shell .settings-modal-content .settings-header-text.fx-dialog-heading {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
}
body.chat-shell .settings-modal-content .settings-header-text.fx-dialog-heading > span:last-child {
    display: block;
    flex: 1;
}
.fx-dialog-icon {
    position: relative;
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(108, 184, 255, .5);
    border-radius: 13px;
    color: var(--fx-cyan);
    background: rgba(46, 138, 235, .13);
    box-shadow: 0 0 22px rgba(46, 145, 255, .15);
    animation: fxDialogIconFloat 3.4s ease-in-out infinite;
}
.fx-dialog-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid currentColor;
    border-radius: 16px;
    opacity: .18;
    animation: fxDialogIconPulse 2.4s ease-out infinite;
}
.fx-dialog-icon svg { width: 21px; height: 21px; }
.fx-icon-feedback { color: #b58aff; border-color: rgba(174, 124, 255, .5); background: rgba(132, 81, 219, .14); }
.fx-icon-contact { color: #58ddb0; border-color: rgba(67, 217, 165, .48); background: rgba(24, 161, 116, .13); }
.fx-icon-settings { color: #75c9ff; }
.fx-dialog-kicker { display: block; margin-bottom: 2px; color: var(--fx-cyan); font-size: 9px; font-weight: 800; letter-spacing: .17em; line-height: 1.2; }
.fx-dialog-heading h3 { margin: 0; color: #f3f8ff; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.fx-dialog-heading p { margin: 3px 0 0; color: var(--fx-dialog-muted); font-size: 11px; }
.fx-dialog-heading p i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--fx-green); box-shadow: 0 0 8px rgba(53, 215, 161, .6); }
@keyframes fxDialogIconFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }
@keyframes fxDialogIconPulse { 0% { transform: scale(.9); opacity: .24; } 78%, 100% { transform: scale(1.18); opacity: 0; } }

body.chat-shell :is(.ms-feedback-header, .ms-contact-header, .settings-modal-content > .modal-header, .role-manager-header, .asset-selector-header, .asset-editor-header, .up-modal-header) {
    border-bottom: 1px solid rgba(103, 171, 246, .13);
    background: linear-gradient(90deg, rgba(35, 118, 225, .14), rgba(39, 76, 157, .035) 65%, transparent);
}

body.chat-shell :is(.ms-modal-close, .close-modal, .role-manager-close, .asset-selector-close, .up-close-btn) {
    border: 1px solid rgba(147, 190, 244, .13);
    border-radius: 10px;
    color: rgba(208, 228, 253, .58);
    background: rgba(255, 255, 255, .025);
}
body.chat-shell :is(.ms-modal-close, .close-modal, .role-manager-close, .asset-selector-close, .up-close-btn):hover {
    border-color: rgba(111, 183, 255, .3);
    color: #fff;
    background: rgba(65, 147, 235, .12);
}

/* Feedback — violet focus, cyan fields, green completion. */
body.chat-shell #feedbackDrawer { width: min(490px, calc(100vw - 28px)); border-color: rgba(156, 105, 239, .34); }
body.chat-shell .ms-feedback-header {
    box-sizing: border-box;
    height: auto !important;
    min-height: 92px;
    padding: 14px 22px;
}
body.chat-shell #feedbackDrawer .fx-dialog-kicker { color: #b78cff; }
body.chat-shell .ms-feedback-body { padding: 22px; }
body.chat-shell #feedbackDrawer .form-group { margin-bottom: 16px; }
body.chat-shell #feedbackDrawer .form-group label { display: block; margin-bottom: 7px; color: rgba(230, 238, 252, .76); font-size: 12px; font-weight: 700; }
body.chat-shell #feedbackDrawer .optional { color: rgba(181, 202, 230, .42); font-weight: 500; }
body.chat-shell #feedbackDrawer .ms-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(126, 169, 226, .17);
    border-radius: 12px;
    color: #edf6ff;
    background: var(--fx-dialog-field);
    outline: none;
}
body.chat-shell #feedbackDrawer .ms-input:focus { border-color: #9970e8; background: rgba(67, 41, 113, .18); box-shadow: 0 0 0 3px rgba(143, 94, 225, .1), 0 0 22px rgba(115, 78, 196, .1); }
body.chat-shell #feedbackDrawer select.ms-input option { color: #eef5ff; background: #0c1427; }
body.chat-shell #feedbackDrawer .feedback-submit-btn {
    min-height: 46px;
    border: 1px solid rgba(165, 117, 243, .56);
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(100deg, #7551c8, #5a76d7);
    box-shadow: 0 8px 24px rgba(99, 75, 191, .24);
}
body.chat-shell #feedbackDrawer .feedback-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(109, 79, 207, .34); }
body.chat-shell #feedbackDrawer .feedback-submit-btn.success { border-color: rgba(45, 205, 147, .55); background: linear-gradient(100deg, #078b63, #087768); }

/* Contact — calm human-support green with a purple QR halo. */
body.chat-shell #contactModal { width: min(510px, calc(100vw - 28px)); border-color: rgba(58, 211, 162, .28); }
body.chat-shell .ms-contact-header { padding: 20px 22px; }
body.chat-shell #contactModal .fx-dialog-kicker { color: #54d9ab; }
body.chat-shell .ms-contact-body { padding: 20px 22px 23px; }
body.chat-shell .ms-contact-profile { padding: 5px 0 12px; }
body.chat-shell .contact-avatar { border: 2px solid rgba(59, 215, 164, .55); box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 22px rgba(45, 210, 154, .12); }
body.chat-shell .contact-name { color: #f1fbf7; }
body.chat-shell .contact-subtitle, body.chat-shell .contact-qr-hint { color: rgba(195, 226, 215, .55); }
body.chat-shell .ms-contact-qr-wrapper { border: 1px solid rgba(162, 116, 235, .28); background: rgba(119, 75, 187, .1); box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 22px rgba(143, 96, 219, .11); }
body.chat-shell .contact-card { border: 1px solid rgba(96, 178, 214, .14); border-radius: 13px; background: rgba(24, 62, 96, .12); }
body.chat-shell .contact-card:hover { border-color: rgba(57, 210, 159, .28); background: rgba(21, 103, 80, .12); }
body.chat-shell .wechat-icon { color: #49d9a7; background: rgba(24, 174, 121, .12); }
body.chat-shell .time-icon { color: var(--fx-gold); background: rgba(255, 190, 43, .1); }
body.chat-shell .contact-card .info-label { color: rgba(182, 211, 231, .48); }
body.chat-shell .contact-card .info-value { color: #eaf5ff; }
body.chat-shell .copy-btn { border: 1px solid rgba(48, 205, 151, .24); color: #63dfb4; background: rgba(19, 144, 102, .11); }

/* Preferences — blue work surface, gold parameter cues, green save. */
body.chat-shell .settings-modal-content { border-color: rgba(80, 160, 255, .3); }
body.chat-shell .settings-modal-content > .modal-header { padding: 21px 24px; }
body.chat-shell .settings-modal-tabs { border-bottom: 1px solid rgba(105, 170, 245, .12); background: rgba(10, 26, 52, .36); }
body.chat-shell .settings-tab-btn { color: rgba(190, 213, 242, .5); }
body.chat-shell .settings-tab-btn.active { color: #79caff; }
body.chat-shell .settings-tab-btn.active::after { background: linear-gradient(90deg, #62c6ff, #8c7aff); box-shadow: 0 0 12px rgba(87, 181, 255, .28); }
body.chat-shell .settings-modal-body { background: transparent; }
body.chat-shell .settings-group { border: 1px solid rgba(104, 166, 238, .13); border-radius: 16px; background: rgba(20, 53, 91, .1); }
body.chat-shell .settings-group-kicker { color: #78c9ff; }
body.chat-shell .settings-group-head h4 { color: #eef7ff; }
body.chat-shell .settings-group-head p, body.chat-shell .setting-hint, body.chat-shell .settings-footnote { color: rgba(184, 209, 239, .48); }
body.chat-shell .setting-item > label { color: rgba(226, 238, 253, .78); }
body.chat-shell .setting-input, body.chat-shell .local-save-path { border-color: rgba(108, 168, 235, .17); color: #eef7ff; background: rgba(4, 14, 31, .48); }
body.chat-shell .setting-input:focus { border-color: #65bfff; box-shadow: 0 0 0 3px rgba(69, 159, 239, .1); }
body.chat-shell .setting-range { accent-color: #f2bb35; }
body.chat-shell .setting-range-value { color: var(--fx-gold); background: rgba(255, 191, 44, .1); }
body.chat-shell .settings-modal-content > .modal-footer { border-top: 1px solid rgba(99, 162, 236, .12); background: rgba(5, 15, 32, .32); }
body.chat-shell #saveSettings { border: 1px solid rgba(38, 214, 153, .52); color: #effff9; background: linear-gradient(100deg, #078e65, #087667); box-shadow: 0 8px 22px rgba(6, 144, 100, .22); }

/* Role manager — purple identity, green creation action. */
body.chat-shell .role-manager-panel { border-color: rgba(144, 102, 231, .3) !important; }
body.chat-shell .role-manager-header { background: linear-gradient(90deg, rgba(115, 73, 198, .16), rgba(35, 77, 151, .035) 65%, transparent); }
body.chat-shell .role-manager-kicker { color: #b68cff; }
body.chat-shell .role-manager-heading h3 { color: #f4f0ff; }
body.chat-shell .role-manager-heading p { color: rgba(207, 194, 234, .54); }
body.chat-shell .role-manager-tabs { border-bottom-color: rgba(137, 101, 209, .13); background: rgba(38, 24, 67, .2); }
body.chat-shell .role-manager-tab { color: rgba(211, 200, 232, .5); }
body.chat-shell .role-manager-tab.active { color: #c09bff; }
body.chat-shell .role-manager-tab.active::after { background: linear-gradient(90deg, #a777f3, #70bfff); }
body.chat-shell :is(.role-library-pane, .role-preview-pane, .role-manager-current) { border-color: rgba(135, 103, 202, .14); background: rgba(30, 25, 59, .16); }
body.chat-shell :is(.role-form-field input, .role-form-field textarea) { border-color: rgba(139, 108, 205, .17); color: #f3efff; background: rgba(14, 12, 31, .48); }
body.chat-shell :is(.role-form-field input, .role-form-field textarea):focus { border-color: #9d73e7; box-shadow: 0 0 0 3px rgba(148, 99, 225, .1); }
body.chat-shell .role-primary-btn { border-color: rgba(41, 211, 151, .48); color: #f2fff9; background: linear-gradient(100deg, #078f66, #087667); }

/* Asset surfaces — warm gold identity with blue selection states. */
body.chat-shell :is(.asset-selector-panel, .asset-editor-panel) { border-color: rgba(232, 168, 42, .26); }
body.chat-shell :is(.asset-selector-header, .asset-editor-header) { background: linear-gradient(90deg, rgba(165, 104, 18, .14), rgba(53, 83, 148, .035) 65%, transparent); }
body.chat-shell :is(.asset-selector-kicker, .asset-editor-kicker) { color: #e8b84d; }
body.chat-shell :is(.asset-selector-heading h3, .asset-editor-header h3) { color: #fff5dc; }
body.chat-shell :is(.asset-selector-heading p, .asset-editor-subtitle, .asset-selector-summary) { color: rgba(230, 213, 177, .5); }
body.chat-shell .asset-selector-toolbar { border-bottom-color: rgba(218, 163, 55, .1); background: rgba(45, 32, 14, .14); }
body.chat-shell .asset-selector-search, body.chat-shell :is(.asset-editor-field input, .asset-editor-field textarea) { border-color: rgba(218, 163, 55, .15); color: #f7f2e7; background: rgba(16, 14, 12, .42); }
body.chat-shell .asset-selector-search:focus-within, body.chat-shell :is(.asset-editor-field input, .asset-editor-field textarea):focus { border-color: #d9a93d; box-shadow: 0 0 0 3px rgba(218, 166, 51, .09); }
body.chat-shell .asset-selector-tab.active { color: #ffd36d; }
body.chat-shell .asset-head-btn.primary, body.chat-shell #assetEditorSave { border-color: rgba(61, 196, 246, .45); color: #effbff; background: linear-gradient(100deg, #147eae, #4968c1); }

/* Compact confirmation — rose warning, neutral cancel. */
body.chat-shell #confirmModal .fx-confirm-modal { width: min(410px, calc(100vw - 28px)); max-width: 410px; border-color: rgba(255, 106, 133, .3); }
body.chat-shell #confirmModal .fx-confirm-header { padding: 23px 25px 10px; border-bottom: 0; }
body.chat-shell #confirmModal .fx-confirm-icon { display: grid; width: 43px; height: 43px; margin-right: 12px; place-items: center; border: 1px solid rgba(255, 103, 130, .35); border-radius: 13px; color: var(--fx-rose); background: rgba(213, 52, 83, .11); box-shadow: 0 0 20px rgba(231, 65, 95, .12); }
body.chat-shell #confirmModal #confirmTitle { margin: 0; color: #fff1f4; font-size: 18px; background: none; -webkit-text-fill-color: currentColor; animation: none; }
body.chat-shell #confirmModal .fx-dialog-kicker { color: #ff8da2; }
body.chat-shell #confirmModal .fx-confirm-body { padding: 12px 25px 24px; }
body.chat-shell #confirmModal #confirmMessage { margin: 0 0 22px; color: rgba(233, 220, 226, .72); font-size: 14px; line-height: 1.65; }
body.chat-shell #confirmModal .fx-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
body.chat-shell #confirmModal .fx-confirm-cancel, body.chat-shell #confirmModal .fx-confirm-ok { position: static; display: inline-flex; width: auto; height: auto; min-width: 94px; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 11px; font-size: 13px; cursor: pointer; }
body.chat-shell #confirmModal .fx-confirm-cancel { border: 1px solid rgba(150, 178, 214, .13); color: rgba(211, 225, 243, .65); background: rgba(255,255,255,.035); }
body.chat-shell #confirmModal .fx-confirm-ok { border: 1px solid rgba(255, 102, 130, .38); color: #ff9aad; background: rgba(211, 48, 80, .13); box-shadow: 0 8px 22px rgba(191, 43, 71, .1); }
body.chat-shell #confirmModal .fx-confirm-ok:hover { color: #fff; background: linear-gradient(100deg, #c93656, #a62c4a); transform: translateY(-1px); }

/* Remaining work dialogs inherit the system with their own action colors. */
body.chat-shell .extend-video-content { border-color: rgba(75, 182, 255, .28); }
body.chat-shell .extend-video-content h3 { color: #f1f8ff; }
body.chat-shell .extend-video-tip, body.chat-shell .extend-video-content .form-hint { color: var(--fx-dialog-muted); }
body.chat-shell .extend-video-content :is(textarea, input) { border-color: rgba(105, 172, 243, .17); color: #edf6ff; background: var(--fx-dialog-field); }
body.chat-shell .extend-video-content .btn-primary { background: linear-gradient(100deg, #147eae, #5268d1); }
body.chat-shell .ultra-premium-modal { border-color: rgba(132, 95, 219, .28); }
body.chat-shell .up-status-card { border-color: rgba(49, 207, 151, .18); background: rgba(16, 124, 89, .1); }
body.chat-shell .up-input { border-color: rgba(133, 104, 204, .16); color: #f1effa; background: rgba(14, 12, 31, .48); }
body.chat-shell .up-btn-primary { background: linear-gradient(100deg, #7552c7, #536dd2); }

/* Light mode: clean lavender workspaces with preserved semantic accents. */
body.chat-shell.theme-light :is(#contactModalOverlay, #confirmModal, #feedbackOverlay),
body.chat-shell.theme-light :is(.settings-modern-modal, .role-manager-modal, .asset-selector-modal, .asset-editor-modal, .extend-video-modal) :is(.modal-overlay, .role-manager-backdrop, .asset-selector-backdrop, .asset-editor-backdrop) { background: rgba(39, 28, 69, .24); }
body.chat-shell.theme-light :is(#contactModal, #feedbackDrawer, #confirmModal .fx-confirm-modal, .settings-modal-content, .role-manager-panel, .asset-selector-panel, .asset-editor-panel, .ultra-premium-modal, .extend-video-content, .welcome-modal-content) {
    border-color: rgba(119, 76, 191, .26) !important;
    color: #332544;
    background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,244,255,.995) 62%, rgba(242,235,255,.99)) !important;
    box-shadow: 0 30px 90px rgba(67,42,110,.22), 0 0 52px rgba(121,78,196,.1) !important;
}
body.chat-shell.theme-light :is(.ms-feedback-header, .ms-contact-header, .settings-modal-content > .modal-header, .role-manager-header, .asset-selector-header, .asset-editor-header, .up-modal-header) { border-bottom-color: rgba(105, 72, 158, .12); background: linear-gradient(90deg, rgba(143, 94, 220, .11), rgba(169, 120, 232, .025) 66%, transparent); }
body.chat-shell.theme-light .fx-dialog-heading h3 { color: #3b2854; }
body.chat-shell.theme-light .fx-dialog-heading p { color: #7b6d8e; }
body.chat-shell.theme-light .fx-dialog-icon { color: #7950c3; border-color: rgba(127, 79, 201, .35); background: rgba(133, 83, 207, .09); box-shadow: 0 0 18px rgba(110,70,178,.1); }
body.chat-shell.theme-light .fx-icon-contact { color: #07845d; border-color: rgba(8, 145, 99, .3); background: rgba(10, 153, 105, .08); }
body.chat-shell.theme-light :is(.ms-modal-close, .close-modal, .role-manager-close, .asset-selector-close, .up-close-btn) { border-color: rgba(89, 61, 127, .1); color: #7b6e8a; background: rgba(91, 62, 132, .025); }
body.chat-shell.theme-light #feedbackDrawer .form-group label, body.chat-shell.theme-light .setting-item > label { color: #51435f; }
body.chat-shell.theme-light #feedbackDrawer .ms-input, body.chat-shell.theme-light :is(.setting-input, .local-save-path, .role-form-field input, .role-form-field textarea, .asset-selector-search, .asset-editor-field input, .asset-editor-field textarea, .extend-video-content textarea, .extend-video-content input, .up-input) { border-color: rgba(103, 72, 145, .15); color: #392a4b; background: rgba(255,255,255,.76); }
body.chat-shell.theme-light #feedbackDrawer .ms-input:focus { border-color: #8655cb; background: #fff; }
body.chat-shell.theme-light #feedbackDrawer select.ms-input option { color: #392a4b; background: #fff; }
body.chat-shell.theme-light .contact-name, body.chat-shell.theme-light .contact-card .info-value { color: #30443d; }
body.chat-shell.theme-light .contact-subtitle, body.chat-shell.theme-light .contact-qr-hint, body.chat-shell.theme-light .contact-card .info-label { color: #74847e; }
body.chat-shell.theme-light .contact-card { border-color: rgba(41, 139, 105, .13); background: rgba(255,255,255,.65); }
body.chat-shell.theme-light .ms-contact-qr-wrapper { background: rgba(132, 82, 207, .07); }
body.chat-shell.theme-light .settings-modal-tabs { background: rgba(102, 69, 151, .035); }
body.chat-shell.theme-light .settings-group, body.chat-shell.theme-light :is(.role-library-pane, .role-preview-pane, .role-manager-current) { border-color: rgba(103, 72, 145, .12); background: rgba(255,255,255,.58); }
body.chat-shell.theme-light .settings-group-head h4, body.chat-shell.theme-light .role-manager-heading h3, body.chat-shell.theme-light :is(.asset-selector-heading h3, .asset-editor-header h3), body.chat-shell.theme-light .extend-video-content h3 { color: #3d2d50; }
body.chat-shell.theme-light :is(.settings-group-head p, .setting-hint, .settings-footnote, .role-manager-heading p, .asset-selector-heading p, .asset-editor-subtitle, .asset-selector-summary, .extend-video-tip, .extend-video-content .form-hint) { color: #7e718c; }
body.chat-shell.theme-light .settings-modal-content > .modal-footer { border-top-color: rgba(102, 71, 146, .1); background: rgba(86, 58, 126, .025); }
body.chat-shell.theme-light #confirmModal #confirmTitle { color: #572e3b; }
body.chat-shell.theme-light #confirmModal #confirmMessage { color: #715c64; }
body.chat-shell.theme-light #confirmModal .fx-confirm-cancel { border-color: rgba(92, 64, 128, .1); color: #74677f; background: rgba(86, 60, 119, .04); }

/* ============================================================================
   Restrained site palette
   Dark mode = navy + cool blue. Light mode = white/lavender + purple.
   Green/red are reserved for status feedback; no dialog gets its own rainbow.
   ============================================================================ */
body.chat-shell:not(.theme-light) :is(
    #contactModal,
    #feedbackDrawer,
    .settings-modal-content,
    .role-manager-panel,
    .asset-selector-panel,
    .asset-editor-panel,
    .ultra-premium-modal,
    .extend-video-content,
    .welcome-modal-content
) {
    border-color: rgba(76, 156, 255, .28) !important;
    background: linear-gradient(145deg, rgba(9, 27, 53, .99), rgba(6, 14, 31, .99) 58%, rgba(12, 19, 42, .99)) !important;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .64), 0 0 54px rgba(42, 137, 255, .11) !important;
}
body.chat-shell:not(.theme-light) :is(.fx-dialog-icon, .fx-icon-feedback, .fx-icon-contact, .fx-icon-settings) {
    border-color: rgba(91, 177, 255, .46);
    color: #69c4ff;
    background: rgba(43, 135, 229, .12);
    box-shadow: 0 0 20px rgba(45, 145, 255, .14);
}
body.chat-shell:not(.theme-light) :is(
    #feedbackDrawer .fx-dialog-kicker,
    #contactModal .fx-dialog-kicker,
    .settings-modal-content .fx-dialog-kicker,
    .role-manager-kicker,
    .asset-selector-kicker,
    .asset-editor-kicker,
    .settings-group-kicker
) { color: #6cc4ff; }
body.chat-shell:not(.theme-light) :is(.ms-feedback-header, .ms-contact-header, .settings-modal-content > .modal-header, .role-manager-header, .asset-selector-header, .asset-editor-header, .up-modal-header) {
    border-bottom-color: rgba(103, 171, 246, .13);
    background: linear-gradient(90deg, rgba(35, 118, 225, .14), rgba(39, 76, 157, .035) 65%, transparent);
}
body.chat-shell:not(.theme-light) #feedbackDrawer .feedback-submit-btn,
body.chat-shell:not(.theme-light) #saveSettings,
body.chat-shell:not(.theme-light) .role-primary-btn,
body.chat-shell:not(.theme-light) .asset-head-btn.primary,
body.chat-shell:not(.theme-light) #assetEditorSave,
body.chat-shell:not(.theme-light) .extend-video-content .btn-primary,
body.chat-shell:not(.theme-light) .up-btn-primary {
    border-color: rgba(83, 171, 255, .5);
    color: #f1f8ff;
    background: linear-gradient(100deg, #176fae, #365fbd);
    box-shadow: 0 8px 22px rgba(35, 105, 194, .2);
}
body.chat-shell:not(.theme-light) #feedbackDrawer .feedback-submit-btn:hover,
body.chat-shell:not(.theme-light) #saveSettings:hover,
body.chat-shell:not(.theme-light) .role-primary-btn:hover,
body.chat-shell:not(.theme-light) .asset-head-btn.primary:hover,
body.chat-shell:not(.theme-light) #assetEditorSave:hover {
    background: linear-gradient(100deg, #1b82c7, #416fd0);
    box-shadow: 0 10px 27px rgba(37, 112, 207, .28);
}
body.chat-shell:not(.theme-light) :is(.settings-tab-btn.active, .role-manager-tab.active, .asset-selector-tab.active) { color: #78c9ff; }
body.chat-shell:not(.theme-light) :is(.settings-tab-btn.active, .role-manager-tab.active)::after { background: linear-gradient(90deg, #58bcff, #7189ee); box-shadow: 0 0 11px rgba(76, 172, 255, .23); }
body.chat-shell:not(.theme-light) :is(.setting-range, .setting-toggle) { accent-color: #58b8f4; }
body.chat-shell:not(.theme-light) .setting-range-value { color: #78c9ff; background: rgba(61, 157, 225, .1); }
body.chat-shell:not(.theme-light) :is(.role-library-pane, .role-preview-pane, .role-manager-current, .contact-card, .settings-group) {
    border-color: rgba(103, 166, 238, .13);
    background: rgba(20, 53, 91, .1);
}
body.chat-shell:not(.theme-light) :is(.role-form-field input, .role-form-field textarea, .asset-selector-search, .asset-editor-field input, .asset-editor-field textarea) {
    border-color: rgba(108, 168, 235, .17);
    color: #eef7ff;
    background: rgba(4, 14, 31, .48);
}
body.chat-shell:not(.theme-light) :is(.role-form-field input, .role-form-field textarea, .asset-selector-search, .asset-editor-field input, .asset-editor-field textarea):focus,
body.chat-shell:not(.theme-light) .asset-selector-search:focus-within {
    border-color: #65bfff;
    box-shadow: 0 0 0 3px rgba(69, 159, 239, .1);
}
body.chat-shell:not(.theme-light) :is(.asset-selector-heading h3, .asset-editor-header h3) { color: #eef7ff; }
body.chat-shell:not(.theme-light) :is(.asset-selector-heading p, .asset-editor-subtitle, .asset-selector-summary) { color: rgba(184, 209, 239, .48); }
body.chat-shell:not(.theme-light) .ms-contact-qr-wrapper { border-color: rgba(91, 171, 255, .24); background: rgba(45, 112, 190, .09); box-shadow: 0 10px 28px rgba(0,0,0,.25), 0 0 19px rgba(53,137,231,.09); }
body.chat-shell:not(.theme-light) .contact-avatar { border-color: rgba(92, 179, 255, .48); box-shadow: 0 8px 22px rgba(0,0,0,.27), 0 0 18px rgba(48,146,237,.1); }
body.chat-shell:not(.theme-light) .copy-btn { border-color: rgba(86, 171, 244, .23); color: #77caff; background: rgba(36, 122, 196, .1); }
body.chat-shell:not(.theme-light) .time-icon { color: #78c9ff; background: rgba(48, 138, 218, .1); }

body.chat-shell.theme-light :is(
    #contactModal,
    #feedbackDrawer,
    .settings-modal-content,
    .role-manager-panel,
    .asset-selector-panel,
    .asset-editor-panel,
    .ultra-premium-modal,
    .extend-video-content,
    .welcome-modal-content
) {
    border-color: rgba(119, 76, 191, .25) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,244,255,.995) 62%, rgba(243,237,255,.99)) !important;
    box-shadow: 0 30px 90px rgba(67,42,110,.2), 0 0 46px rgba(121,78,196,.08) !important;
}
body.chat-shell.theme-light :is(.fx-dialog-icon, .fx-icon-feedback, .fx-icon-contact, .fx-icon-settings) {
    border-color: rgba(127, 79, 201, .34);
    color: #7950c3;
    background: rgba(133, 83, 207, .085);
    box-shadow: 0 0 17px rgba(110,70,178,.09);
}
body.chat-shell.theme-light :is(
    #feedbackDrawer .fx-dialog-kicker,
    #contactModal .fx-dialog-kicker,
    .settings-modal-content .fx-dialog-kicker,
    .role-manager-kicker,
    .asset-selector-kicker,
    .asset-editor-kicker,
    .settings-group-kicker
) { color: #7950c3; }
body.chat-shell.theme-light :is(.ms-feedback-header, .ms-contact-header, .settings-modal-content > .modal-header, .role-manager-header, .asset-selector-header, .asset-editor-header, .up-modal-header) {
    border-bottom-color: rgba(105, 72, 158, .12);
    background: linear-gradient(90deg, rgba(143, 94, 220, .105), rgba(169, 120, 232, .02) 66%, transparent);
}
body.chat-shell.theme-light #feedbackDrawer .feedback-submit-btn,
body.chat-shell.theme-light #saveSettings,
body.chat-shell.theme-light .role-primary-btn,
body.chat-shell.theme-light .asset-head-btn.primary,
body.chat-shell.theme-light #assetEditorSave,
body.chat-shell.theme-light .extend-video-content .btn-primary,
body.chat-shell.theme-light .up-btn-primary {
    border-color: rgba(121, 77, 194, .42);
    color: #fff;
    background: linear-gradient(100deg, #7750bd, #665cc5);
    box-shadow: 0 8px 21px rgba(99, 70, 169, .17);
}
body.chat-shell.theme-light #feedbackDrawer .feedback-submit-btn:hover,
body.chat-shell.theme-light #saveSettings:hover,
body.chat-shell.theme-light .role-primary-btn:hover,
body.chat-shell.theme-light .asset-head-btn.primary:hover,
body.chat-shell.theme-light #assetEditorSave:hover {
    background: linear-gradient(100deg, #6e45b7, #5951ba);
    box-shadow: 0 10px 25px rgba(95, 64, 164, .23);
}
body.chat-shell.theme-light :is(.settings-tab-btn.active, .role-manager-tab.active, .asset-selector-tab.active) { color: #7248b8; }
body.chat-shell.theme-light :is(.settings-tab-btn.active, .role-manager-tab.active)::after { background: linear-gradient(90deg, #8755cc, #6d64c9); box-shadow: 0 0 10px rgba(113, 72, 184, .18); }
body.chat-shell.theme-light :is(.setting-range, .setting-toggle) { accent-color: #7b50bd; }
body.chat-shell.theme-light .setting-range-value { color: #7045b4; background: rgba(119, 75, 185, .075); }
body.chat-shell.theme-light :is(.role-library-pane, .role-preview-pane, .role-manager-current, .contact-card, .settings-group) {
    border-color: rgba(103, 72, 145, .11);
    background: rgba(255,255,255,.58);
}
body.chat-shell.theme-light .ms-contact-qr-wrapper { border-color: rgba(119, 76, 191, .18); background: rgba(132, 82, 207, .055); box-shadow: 0 9px 25px rgba(73,48,112,.09); }
body.chat-shell.theme-light .contact-avatar { border-color: rgba(122, 78, 193, .32); box-shadow: 0 7px 20px rgba(69,45,106,.11); }
body.chat-shell.theme-light .copy-btn { border-color: rgba(119, 76, 191, .17); color: #7248b8; background: rgba(119, 76, 191, .065); }
body.chat-shell.theme-light :is(.wechat-icon, .time-icon) { color: #7950c3; background: rgba(127, 79, 201, .075); }

/* Destructive confirmations remain rose; success indicators remain green. */
body.chat-shell #confirmModal .fx-confirm-modal { border-color: rgba(255, 106, 133, .3) !important; }
body.chat-shell .fx-dialog-heading p i,
body.chat-shell .up-status-dot,
body.chat-shell .feedback-submit-btn.success { --fx-status-color: #35c991; }

@media (max-width: 620px) {
    .fx-dialog-icon { width: 39px; height: 39px; }
    .fx-dialog-heading h3 { font-size: 17px; }
    .fx-dialog-heading p { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.chat-shell :is(.ms-feedback-header, .ms-contact-header, .settings-modal-content > .modal-header) { padding: 18px; }
    body.chat-shell :is(.ms-feedback-body, .ms-contact-body) { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-dialog-icon, .fx-dialog-icon::after { animation: none !important; }
}