/* Ownership: cross-layout dashboard foundations and shared components. */

/* Tokens */
:root {
    --ehly-primary-active: var(--ehly-primary-hover);
    --ehly-primary-border: var(--ehly-primary);
    --ehly-primary-hover-border: var(--ehly-primary-hover);
    --ehly-outline-primary-active: var(--ehly-primary);
    --ehly-primary-selected-border: var(--ehly-primary);
    --ehly-primary-selected-text: var(--ehly-primary-control-text);
    --ehly-link-color-rgb: var(--ehly-primary-rgb);
    --ehly-link-hover-color: var(--ehly-primary-hover);
    --ehly-link-hover-color-rgb: var(--ehly-primary-rgb);
    --ehly-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.06);
    --ehly-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08);
}

html[data-ehly-theme="ehly"] {
    color-scheme: light;
    --ehly-page-bg: #FFFFFF;
    --ehly-surface: #FFFFFF;
    --ehly-surface-rgb: 255, 255, 255;
    --ehly-text: #212529;
    --ehly-text-rgb: 33, 37, 41;
    --ehly-muted: #6C757D;
    --ehly-muted-rgb: 108, 117, 125;
    --ehly-border: #DEE2E6;
    --ehly-control-border: #DEE2E6;
    --ehly-utility-border: #6C757D;
    --ehly-hover-border: #ADB5BD;
    --ehly-border-translucent: rgba(0, 0, 0, 0.12);
    --ehly-valid: #1BBC68;
    --ehly-valid-rgb: 27, 188, 104;
    --ehly-invalid: #DC3545;
    --ehly-invalid-rgb: 220, 53, 69;
    --ehly-primary: #2944AD;
    --ehly-primary-rgb: 41, 68, 173;
    --ehly-primary-hover: #21368A;
    --ehly-primary-control-text: #2944AD;
    --ehly-on-primary: #FFFFFF;
    --ehly-on-primary-muted: rgba(255, 255, 255, 0.82);
    --ehly-accent: #2563EB;
    --ehly-navigation-accent: #2563EB;
    --ehly-focus: #2944AD;
    --ehly-focus-rgb: 41, 68, 173;
    --ehly-primary-text-emphasis: #101B45;
    --ehly-primary-bg-subtle: #D4DAF0;
    --ehly-primary-border-subtle: #A9B4E1;
    --ehly-secondary-bg: #F8F9FA;
    --ehly-secondary-bg-rgb: 248, 249, 250;
    --ehly-tertiary-bg: #F3F4F6;
    --ehly-tertiary-bg-rgb: 243, 244, 246;
    --ehly-surface-hover: #F8F9FA;
    --ehly-surface-selected: #F3F7FF;
    --ehly-overlay: rgba(233, 236, 239, 0.75);
    --ehly-code-bg: rgba(0, 0, 0, 0.06);
    --ehly-content-border: rgba(0, 0, 0, 0.15);
    --ehly-search-bg: #FFEB3B;
    --ehly-search-color: #212529;
    --ehly-assistant-message-bg: rgba(96, 125, 189, 0.15);
    --ehly-human-message-bg: rgba(151, 124, 204, 0.15);
    --ehly-user-message-bg: rgba(28, 188, 104, 0.15);
    --ehly-success: #3BCB7E;
    --ehly-success-rgb: 59, 203, 126;
    --ehly-success-hover: #1BBC68;
    --ehly-on-success: #071E11;
    --ehly-info: #0DCAF0;
    --ehly-info-rgb: 13, 202, 240;
    --ehly-info-hover: #0BB5D8;
    --ehly-on-info: #062029;
    --ehly-warning: #E99E22;
    --ehly-warning-rgb: 233, 158, 34;
    --ehly-warning-hover: #D88D15;
    --ehly-on-warning: #251700;
    --ehly-danger: #DC3545;
    --ehly-danger-rgb: 220, 53, 69;
    --ehly-danger-hover: #BB2D3B;
    --ehly-on-danger: #FFFFFF;
}

html[data-ehly-theme="ember"] {
    color-scheme: light;
    --ehly-page-bg: #FAFAFA;
    --ehly-surface: #FFFFFF;
    --ehly-surface-rgb: 255, 255, 255;
    --ehly-text: #2D1A1D;
    --ehly-text-rgb: 45, 26, 29;
    --ehly-muted: #6E6764;
    --ehly-muted-rgb: 110, 103, 100;
    --ehly-border: rgba(45, 26, 29, 0.16);
    --ehly-control-border: var(--ehly-border);
    --ehly-utility-border: #8A7A7D;
    --ehly-hover-border: #8A7A7D;
    --ehly-border-translucent: rgba(45, 26, 29, 0.13);
    --ehly-valid: #42BB6E;
    --ehly-valid-rgb: 66, 187, 110;
    --ehly-invalid: #D41400;
    --ehly-invalid-rgb: 212, 20, 0;
    --ehly-primary: #FA762B;
    --ehly-primary-rgb: 250, 118, 43;
    --ehly-primary-hover: #F0641E;
    --ehly-primary-active: #E55A15;
    --ehly-primary-border: #C6470C;
    --ehly-primary-hover-border: #C6470C;
    --ehly-outline-primary-active: #E55A15;
    --ehly-primary-selected-border: #C6470C;
    --ehly-primary-control-text: #C6470C;
    --ehly-primary-control-text-rgb: 198, 71, 12;
    --ehly-primary-selected-text: #7E2D08;
    --ehly-primary-selected-text-rgb: 126, 45, 8;
    --ehly-link-color-rgb: var(--ehly-primary-control-text-rgb);
    --ehly-link-hover-color: var(--ehly-primary-selected-text);
    --ehly-link-hover-color-rgb: var(--ehly-primary-selected-text-rgb);
    --ehly-on-primary: #2D1A1D;
    --ehly-on-primary-muted: rgba(45, 26, 29, 0.9);
    --ehly-accent: #FAB030;
    --ehly-navigation-accent: #7E2D08;
    --ehly-focus: #C6470C;
    --ehly-focus-rgb: 198, 71, 12;
    --ehly-primary-text-emphasis: #7E2D08;
    --ehly-primary-bg-subtle: #FDE0D2;
    --ehly-primary-border-subtle: #F9AA83;
    --ehly-secondary-bg: #F8F5F4;
    --ehly-secondary-bg-rgb: 248, 245, 244;
    --ehly-tertiary-bg: #F3EEEC;
    --ehly-tertiary-bg-rgb: 243, 238, 236;
    --ehly-surface-hover: #F8F5F4;
    --ehly-surface-selected: #FFF0E8;
    --ehly-overlay: rgba(243, 238, 236, 0.82);
    --ehly-code-bg: rgba(45, 26, 29, 0.07);
    --ehly-content-border: rgba(45, 26, 29, 0.18);
    --ehly-search-bg: #FFE09A;
    --ehly-search-color: #2D1A1D;
    --ehly-assistant-message-bg: #F7F5F4;
    --ehly-human-message-bg: #F1E5E7;
    --ehly-user-message-bg: rgba(250, 118, 43, 0.17);
    --ehly-message-link: #A83A08;
    --ehly-message-link-hover: #7E2D08;
    --ehly-message-code: #A12B67;
    --ehly-success: #4BCB7B;
    --ehly-success-rgb: 75, 203, 123;
    --ehly-success-hover: #42BB6E;
    --ehly-on-success: #102615;
    --ehly-info: #0E7490;
    --ehly-info-rgb: 14, 116, 144;
    --ehly-info-hover: #0B6078;
    --ehly-on-info: #FFFFFF;
    --ehly-warning: #FAB030;
    --ehly-warning-rgb: 250, 176, 48;
    --ehly-warning-hover: #E59B17;
    --ehly-on-warning: #2D1A1D;
    --ehly-danger: #D41400;
    --ehly-danger-rgb: 212, 20, 0;
    --ehly-danger-hover: #B91200;
    --ehly-on-danger: #FFFFFF;
}

html[data-ehly-theme="violet"] {
    color-scheme: light;
    --ehly-page-bg: #F8F7FC;
    --ehly-surface: #FFFFFF;
    --ehly-surface-rgb: 255, 255, 255;
    --ehly-text: #262238;
    --ehly-text-rgb: 38, 34, 56;
    --ehly-muted: #6B657A;
    --ehly-muted-rgb: 107, 101, 122;
    --ehly-border: #DED9EA;
    --ehly-control-border: #DED9EA;
    --ehly-utility-border: #8B829C;
    --ehly-hover-border: #8B829C;
    --ehly-border-translucent: rgba(38, 34, 56, 0.14);
    --ehly-valid: #198754;
    --ehly-valid-rgb: 25, 135, 84;
    --ehly-invalid: #DC3545;
    --ehly-invalid-rgb: 220, 53, 69;
    --ehly-primary: #6D28D9;
    --ehly-primary-rgb: 109, 40, 217;
    --ehly-primary-hover: #5B21B6;
    --ehly-primary-control-text: #6D28D9;
    --ehly-on-primary: #FFFFFF;
    --ehly-on-primary-muted: rgba(255, 255, 255, 0.82);
    --ehly-accent: #A78BFA;
    --ehly-navigation-accent: #6D28D9;
    --ehly-focus: #7C3AED;
    --ehly-focus-rgb: 124, 58, 237;
    --ehly-primary-text-emphasis: #3B1677;
    --ehly-primary-bg-subtle: #E9DDFB;
    --ehly-primary-border-subtle: #CDB5F4;
    --ehly-secondary-bg: #F4F1FA;
    --ehly-secondary-bg-rgb: 244, 241, 250;
    --ehly-tertiary-bg: #EEEAF6;
    --ehly-tertiary-bg-rgb: 238, 234, 246;
    --ehly-surface-hover: #F4F1FA;
    --ehly-surface-selected: #F0E9FF;
    --ehly-overlay: rgba(238, 234, 246, 0.82);
    --ehly-code-bg: rgba(38, 34, 56, 0.07);
    --ehly-content-border: rgba(38, 34, 56, 0.17);
    --ehly-search-bg: #FDE68A;
    --ehly-search-color: #262238;
    --ehly-assistant-message-bg: rgba(109, 40, 217, 0.11);
    --ehly-human-message-bg: rgba(151, 52, 117, 0.13);
    --ehly-user-message-bg: rgba(25, 135, 84, 0.14);
    --ehly-success: #198754;
    --ehly-success-rgb: 25, 135, 84;
    --ehly-success-hover: #146C43;
    --ehly-on-success: #FFFFFF;
    --ehly-info: #0F6CBD;
    --ehly-info-rgb: 15, 108, 189;
    --ehly-info-hover: #0C5799;
    --ehly-on-info: #FFFFFF;
    --ehly-warning: #F59E0B;
    --ehly-warning-rgb: 245, 158, 11;
    --ehly-warning-hover: #D98905;
    --ehly-on-warning: #262238;
    --ehly-danger: #DC3545;
    --ehly-danger-rgb: 220, 53, 69;
    --ehly-danger-hover: #BB2D3B;
    --ehly-on-danger: #FFFFFF;
}

html[data-ehly-theme="midnight"] {
    color-scheme: dark;
    --ehly-page-bg: #0B1220;
    --ehly-surface: #111827;
    --ehly-surface-rgb: 17, 24, 39;
    --ehly-text: #F3F4F6;
    --ehly-text-rgb: 243, 244, 246;
    --ehly-muted: #9CA3AF;
    --ehly-muted-rgb: 156, 163, 175;
    --ehly-border: #334155;
    --ehly-control-border: #334155;
    --ehly-utility-border: #64748B;
    --ehly-hover-border: #64748B;
    --ehly-border-translucent: rgba(226, 232, 240, 0.16);
    --ehly-valid: #86EFAC;
    --ehly-valid-rgb: 134, 239, 172;
    --ehly-invalid: #F87171;
    --ehly-invalid-rgb: 248, 113, 113;
    --ehly-primary: #60A5FA;
    --ehly-primary-rgb: 96, 165, 250;
    --ehly-primary-hover: #93C5FD;
    --ehly-primary-control-text: #93C5FD;
    --ehly-on-primary: #0B1220;
    --ehly-on-primary-muted: rgba(11, 18, 32, 0.76);
    --ehly-accent: #A78BFA;
    --ehly-navigation-accent: #93C5FD;
    --ehly-focus: #93C5FD;
    --ehly-focus-rgb: 147, 197, 253;
    --ehly-primary-text-emphasis: #BFDBFE;
    --ehly-primary-bg-subtle: #172554;
    --ehly-primary-border-subtle: #1D4ED8;
    --ehly-secondary-bg: #1E293B;
    --ehly-secondary-bg-rgb: 30, 41, 59;
    --ehly-tertiary-bg: #182235;
    --ehly-tertiary-bg-rgb: 24, 34, 53;
    --ehly-surface-hover: #1E293B;
    --ehly-surface-selected: #172554;
    --ehly-overlay: rgba(11, 18, 32, 0.82);
    --ehly-code-bg: rgba(255, 255, 255, 0.08);
    --ehly-content-border: rgba(226, 232, 240, 0.22);
    --ehly-search-bg: #854D0E;
    --ehly-search-color: #FEF3C7;
    --ehly-assistant-message-bg: rgba(96, 165, 250, 0.18);
    --ehly-human-message-bg: rgba(167, 139, 250, 0.19);
    --ehly-user-message-bg: rgba(74, 222, 128, 0.17);
    --ehly-success: #4ADE80;
    --ehly-success-rgb: 74, 222, 128;
    --ehly-success-hover: #86EFAC;
    --ehly-on-success: #0B1220;
    --ehly-info: #38BDF8;
    --ehly-info-rgb: 56, 189, 248;
    --ehly-info-hover: #7DD3FC;
    --ehly-on-info: #0B1220;
    --ehly-warning: #FBBF24;
    --ehly-warning-rgb: 251, 191, 36;
    --ehly-warning-hover: #FCD34D;
    --ehly-on-warning: #0B1220;
    --ehly-danger: #F87171;
    --ehly-danger-rgb: 248, 113, 113;
    --ehly-danger-hover: #FCA5A5;
    --ehly-on-danger: #0B1220;
    --ehly-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.34);
    --ehly-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.44);
}

html[data-ehly-theme="ember-night"] {
    color-scheme: dark;
    --ehly-page-bg: #1B1113;
    --ehly-surface: #27191C;
    --ehly-surface-rgb: 39, 25, 28;
    --ehly-text: #FFF7F2;
    --ehly-text-rgb: 255, 247, 242;
    --ehly-muted: #C8B8B4;
    --ehly-muted-rgb: 200, 184, 180;
    --ehly-border: #4B3539;
    --ehly-control-border: #4B3539;
    --ehly-utility-border: #826A70;
    --ehly-hover-border: #826A70;
    --ehly-border-translucent: rgba(255, 237, 229, 0.17);
    --ehly-valid: #86EFAC;
    --ehly-valid-rgb: 134, 239, 172;
    --ehly-invalid: #FF7A6B;
    --ehly-invalid-rgb: 255, 122, 107;
    --ehly-primary: #FF8A4C;
    --ehly-primary-rgb: 255, 138, 76;
    --ehly-primary-hover: #FFAA7A;
    --ehly-primary-control-text: #FFAA7A;
    --ehly-on-primary: #1B1113;
    --ehly-on-primary-muted: rgba(27, 17, 19, 0.76);
    --ehly-accent: #FAB030;
    --ehly-navigation-accent: #FFAA7A;
    --ehly-focus: #FFAA7A;
    --ehly-focus-rgb: 255, 170, 122;
    --ehly-primary-text-emphasis: #FFC4A6;
    --ehly-primary-bg-subtle: #4A241D;
    --ehly-primary-border-subtle: #A64D2C;
    --ehly-secondary-bg: #352326;
    --ehly-secondary-bg-rgb: 53, 35, 38;
    --ehly-tertiary-bg: #302023;
    --ehly-tertiary-bg-rgb: 48, 32, 35;
    --ehly-surface-hover: #352326;
    --ehly-surface-selected: #4A241D;
    --ehly-overlay: rgba(27, 17, 19, 0.84);
    --ehly-code-bg: rgba(255, 247, 242, 0.08);
    --ehly-content-border: rgba(255, 237, 229, 0.23);
    --ehly-search-bg: #7C4A12;
    --ehly-search-color: #FFF3CD;
    --ehly-assistant-message-bg: #35272A;
    --ehly-human-message-bg: #4A2A32;
    --ehly-user-message-bg: rgba(255, 138, 76, 0.22);
    --ehly-success: #4ADE80;
    --ehly-success-rgb: 74, 222, 128;
    --ehly-success-hover: #86EFAC;
    --ehly-on-success: #1B1113;
    --ehly-info: #67E8F9;
    --ehly-info-rgb: 103, 232, 249;
    --ehly-info-hover: #A5F3FC;
    --ehly-on-info: #1B1113;
    --ehly-warning: #FBBF24;
    --ehly-warning-rgb: 251, 191, 36;
    --ehly-warning-hover: #FCD34D;
    --ehly-on-warning: #1B1113;
    --ehly-danger: #FF7A6B;
    --ehly-danger-rgb: 255, 122, 107;
    --ehly-danger-hover: #FFA096;
    --ehly-on-danger: #1B1113;
    --ehly-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.36);
    --ehly-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.46);
}

html[data-ehly-theme] {
    --bs-body-color: var(--ehly-text);
    --bs-body-color-rgb: var(--ehly-text-rgb);
    --bs-body-bg: var(--ehly-surface);
    --bs-body-bg-rgb: var(--ehly-surface-rgb);
    --bs-emphasis-color: var(--ehly-text);
    --bs-emphasis-color-rgb: var(--ehly-text-rgb);
    --bs-secondary-color: var(--ehly-muted);
    --bs-secondary-color-rgb: var(--ehly-muted-rgb);
    --bs-secondary-bg: var(--ehly-secondary-bg);
    --bs-secondary-bg-rgb: var(--ehly-secondary-bg-rgb);
    --bs-tertiary-bg: var(--ehly-tertiary-bg);
    --bs-tertiary-bg-rgb: var(--ehly-tertiary-bg-rgb);
    --bs-border-color: var(--ehly-border);
    --bs-border-color-translucent: var(--ehly-border-translucent);
    --bs-primary: var(--ehly-primary);
    --bs-primary-rgb: var(--ehly-primary-rgb);
    --bs-primary-text-emphasis: var(--ehly-primary-text-emphasis);
    --bs-primary-bg-subtle: var(--ehly-primary-bg-subtle);
    --bs-primary-border-subtle: var(--ehly-primary-border-subtle);
    --bs-success: var(--ehly-success);
    --bs-success-rgb: var(--ehly-success-rgb);
    --bs-info: var(--ehly-info);
    --bs-info-rgb: var(--ehly-info-rgb);
    --bs-warning: var(--ehly-warning);
    --bs-warning-rgb: var(--ehly-warning-rgb);
    --bs-danger: var(--ehly-danger);
    --bs-danger-rgb: var(--ehly-danger-rgb);
    --bs-form-valid-color: var(--ehly-valid);
    --bs-form-valid-border-color: var(--ehly-valid);
    --bs-form-invalid-color: var(--ehly-invalid);
    --bs-form-invalid-border-color: var(--ehly-invalid);
    --bs-link-color: var(--ehly-primary-control-text);
    --bs-link-color-rgb: var(--ehly-link-color-rgb);
    --bs-link-hover-color: var(--ehly-link-hover-color);
    --bs-link-hover-color-rgb: var(--ehly-link-hover-color-rgb);
    --bs-focus-ring-color: rgba(var(--ehly-focus-rgb), 0.3);
}

html[data-ehly-theme="ehly"] {
    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #E9ECEF;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-bg: #F8F9FA;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
}

html[data-bs-theme="light"][data-ehly-theme] {
    --bs-secondary-text-emphasis: #2B2F32;
    --bs-secondary-bg-subtle: #E2E3E5;
    --bs-secondary-border-subtle: #C4C8CB;
    --bs-success-text-emphasis: #0B4B2A;
    --bs-success-bg-subtle: #D1F2E1;
    --bs-success-border-subtle: #A4E4C3;
    --bs-info-text-emphasis: #055160;
    --bs-info-bg-subtle: #CFF4FC;
    --bs-info-border-subtle: #9EEAF9;
    --bs-warning-text-emphasis: #5D3F0E;
    --bs-warning-bg-subtle: #FBECD3;
    --bs-warning-border-subtle: #F6D8A7;
    --bs-danger-text-emphasis: #58151C;
    --bs-danger-bg-subtle: #F8D7DA;
    --bs-danger-border-subtle: #F1AEB5;
    --ehly-tag-blue-text: #101B45;
    --ehly-tag-blue-bg: #D4DAEF;
    --ehly-tag-blue-border: #A9B4DE;
    --ehly-tag-grey-text: #2B2F32;
    --ehly-tag-grey-bg: #E2E3E5;
    --ehly-tag-grey-border: #C4C8CB;
    --ehly-tag-green-text: #0B4B2A;
    --ehly-tag-green-bg: #D1F2E1;
    --ehly-tag-green-border: #A4E4C3;
    --ehly-tag-yellow-text: #5D3F0E;
    --ehly-tag-yellow-bg: #FBECD3;
    --ehly-tag-yellow-border: #F6D8A7;
    --ehly-tag-red-text: #58151C;
    --ehly-tag-red-bg: #F8D7DA;
    --ehly-tag-red-border: #F1AEB5;
    --ehly-tag-cyan-text: #055160;
    --ehly-tag-cyan-bg: #CFF4FC;
    --ehly-tag-cyan-border: #9EEAF9;
}

html[data-bs-theme="dark"][data-ehly-theme] {
    --bs-secondary-text-emphasis: #D1D5DB;
    --bs-secondary-bg-subtle: #27313F;
    --bs-secondary-border-subtle: #64748B;
    --bs-success-text-emphasis: #86E7AE;
    --bs-success-bg-subtle: #123923;
    --bs-success-border-subtle: #27623E;
    --bs-info-text-emphasis: #A5F3FC;
    --bs-info-bg-subtle: #164E63;
    --bs-info-border-subtle: #155E75;
    --bs-warning-text-emphasis: #FDE68A;
    --bs-warning-bg-subtle: #422E0A;
    --bs-warning-border-subtle: #745611;
    --bs-danger-text-emphasis: #FCA5A5;
    --bs-danger-bg-subtle: #451A1A;
    --bs-danger-border-subtle: #7F1D1D;
    --ehly-tag-blue-text: #BFDBFE;
    --ehly-tag-blue-bg: #172554;
    --ehly-tag-blue-border: #1D4ED8;
    --ehly-tag-grey-text: #E5E7EB;
    --ehly-tag-grey-bg: #27313F;
    --ehly-tag-grey-border: #64748B;
    --ehly-tag-green-text: #BBF7D0;
    --ehly-tag-green-bg: #14532D;
    --ehly-tag-green-border: #22C55E;
    --ehly-tag-yellow-text: #FDE68A;
    --ehly-tag-yellow-bg: #422006;
    --ehly-tag-yellow-border: #CA8A04;
    --ehly-tag-red-text: #FECACA;
    --ehly-tag-red-bg: #450A0A;
    --ehly-tag-red-border: #DC2626;
    --ehly-tag-cyan-text: #CFFAFE;
    --ehly-tag-cyan-bg: #164E63;
    --ehly-tag-cyan-border: #0891B2;
}

/* Dark logo assets use brand-relative light blue #9EB2F5 while preserving the other brand colours. */
html[data-bs-theme="light"][data-ehly-theme] .theme-logo-dark,
html[data-bs-theme="dark"][data-ehly-theme] .theme-logo-light {
    display: none;
}

/* Base elements */
body {
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
}

html[data-ehly-theme] body {
    color: var(--ehly-text);
    background-color: var(--ehly-page-bg);
}

html[data-ehly-theme] .btn-primary {
    --bs-btn-color: var(--ehly-on-primary);
    --bs-btn-bg: var(--ehly-primary);
    --bs-btn-border-color: var(--ehly-primary-border);
    --bs-btn-hover-color: var(--ehly-on-primary);
    --bs-btn-hover-bg: var(--ehly-primary-hover);
    --bs-btn-hover-border-color: var(--ehly-primary-hover-border);
    --bs-btn-focus-shadow-rgb: var(--ehly-focus-rgb);
    --bs-btn-active-color: var(--ehly-on-primary);
    --bs-btn-active-bg: var(--ehly-primary-active);
    --bs-btn-active-border-color: var(--ehly-primary-hover-border);
    --bs-btn-disabled-color: var(--ehly-on-primary);
    --bs-btn-disabled-bg: var(--ehly-primary);
    --bs-btn-disabled-border-color: var(--ehly-primary-border);
}

html[data-ehly-theme] .btn-outline-primary {
    --bs-btn-color: var(--ehly-primary-control-text);
    --bs-btn-border-color: var(--ehly-primary-control-text);
    --bs-btn-hover-color: var(--ehly-on-primary);
    --bs-btn-hover-bg: var(--ehly-primary);
    --bs-btn-hover-border-color: var(--ehly-primary-border);
    --bs-btn-focus-shadow-rgb: var(--ehly-focus-rgb);
    --bs-btn-active-color: var(--ehly-on-primary);
    --bs-btn-active-bg: var(--ehly-outline-primary-active);
    --bs-btn-active-border-color: var(--ehly-primary-border);
    --bs-btn-disabled-color: var(--ehly-primary-control-text);
    --bs-btn-disabled-border-color: var(--ehly-primary-control-text);
}

html[data-ehly-theme] .btn-secondary {
    --bs-btn-color: var(--ehly-text);
    --bs-btn-bg: var(--ehly-secondary-bg);
    --bs-btn-border-color: var(--ehly-utility-border);
    --bs-btn-hover-color: var(--ehly-text);
    --bs-btn-hover-bg: var(--ehly-tertiary-bg);
    --bs-btn-hover-border-color: var(--ehly-utility-border);
    --bs-btn-active-color: var(--ehly-text);
    --bs-btn-active-bg: var(--ehly-tertiary-bg);
    --bs-btn-active-border-color: var(--ehly-utility-border);
    --bs-btn-disabled-color: var(--ehly-muted);
    --bs-btn-disabled-bg: var(--ehly-secondary-bg);
    --bs-btn-disabled-border-color: var(--ehly-border);
}

html[data-ehly-theme] .btn-outline-secondary {
    --bs-btn-color: var(--ehly-muted);
    --bs-btn-border-color: var(--ehly-utility-border);
    --bs-btn-hover-color: var(--ehly-surface);
    --bs-btn-hover-bg: var(--ehly-muted);
    --bs-btn-hover-border-color: var(--ehly-muted);
    --bs-btn-active-color: var(--ehly-surface);
    --bs-btn-active-bg: var(--ehly-muted);
    --bs-btn-active-border-color: var(--ehly-muted);
    --bs-btn-disabled-color: var(--ehly-muted);
    --bs-btn-disabled-border-color: var(--ehly-border);
}

html[data-ehly-theme] .btn-success {
    --bs-btn-color: var(--ehly-on-success);
    --bs-btn-bg: var(--ehly-success);
    --bs-btn-border-color: var(--ehly-success);
    --bs-btn-hover-color: var(--ehly-on-success);
    --bs-btn-hover-bg: var(--ehly-success-hover);
    --bs-btn-hover-border-color: var(--ehly-success-hover);
    --bs-btn-focus-shadow-rgb: var(--ehly-success-rgb);
    --bs-btn-active-color: var(--ehly-on-success);
    --bs-btn-active-bg: var(--ehly-success-hover);
    --bs-btn-active-border-color: var(--ehly-success-hover);
    --bs-btn-disabled-color: var(--ehly-on-success);
    --bs-btn-disabled-bg: var(--ehly-success);
    --bs-btn-disabled-border-color: var(--ehly-success);
}

html[data-ehly-theme] .btn-info {
    --bs-btn-color: var(--ehly-on-info);
    --bs-btn-bg: var(--ehly-info);
    --bs-btn-border-color: var(--ehly-info);
    --bs-btn-hover-color: var(--ehly-on-info);
    --bs-btn-hover-bg: var(--ehly-info-hover);
    --bs-btn-hover-border-color: var(--ehly-info-hover);
    --bs-btn-focus-shadow-rgb: var(--ehly-info-rgb);
    --bs-btn-active-color: var(--ehly-on-info);
    --bs-btn-active-bg: var(--ehly-info-hover);
    --bs-btn-active-border-color: var(--ehly-info-hover);
    --bs-btn-disabled-color: var(--ehly-on-info);
    --bs-btn-disabled-bg: var(--ehly-info);
    --bs-btn-disabled-border-color: var(--ehly-info);
}

html[data-ehly-theme] .btn-warning {
    --bs-btn-color: var(--ehly-on-warning);
    --bs-btn-bg: var(--ehly-warning);
    --bs-btn-border-color: var(--ehly-warning);
    --bs-btn-hover-color: var(--ehly-on-warning);
    --bs-btn-hover-bg: var(--ehly-warning-hover);
    --bs-btn-hover-border-color: var(--ehly-warning-hover);
    --bs-btn-focus-shadow-rgb: var(--ehly-warning-rgb);
    --bs-btn-active-color: var(--ehly-on-warning);
    --bs-btn-active-bg: var(--ehly-warning-hover);
    --bs-btn-active-border-color: var(--ehly-warning-hover);
    --bs-btn-disabled-color: var(--ehly-on-warning);
    --bs-btn-disabled-bg: var(--ehly-warning);
    --bs-btn-disabled-border-color: var(--ehly-warning);
}

html[data-ehly-theme] .btn-danger {
    --bs-btn-color: var(--ehly-on-danger);
    --bs-btn-bg: var(--ehly-danger);
    --bs-btn-border-color: var(--ehly-danger);
    --bs-btn-hover-color: var(--ehly-on-danger);
    --bs-btn-hover-bg: var(--ehly-danger-hover);
    --bs-btn-hover-border-color: var(--ehly-danger-hover);
    --bs-btn-focus-shadow-rgb: var(--ehly-danger-rgb);
    --bs-btn-active-color: var(--ehly-on-danger);
    --bs-btn-active-bg: var(--ehly-danger-hover);
    --bs-btn-active-border-color: var(--ehly-danger-hover);
    --bs-btn-disabled-color: var(--ehly-on-danger);
    --bs-btn-disabled-bg: var(--ehly-danger);
    --bs-btn-disabled-border-color: var(--ehly-danger);
}

html[data-ehly-theme] .btn-outline-danger {
    --bs-btn-color: var(--ehly-danger);
    --bs-btn-border-color: var(--ehly-danger);
    --bs-btn-hover-color: var(--ehly-on-danger);
    --bs-btn-hover-bg: var(--ehly-danger);
    --bs-btn-hover-border-color: var(--ehly-danger);
    --bs-btn-focus-shadow-rgb: var(--ehly-danger-rgb);
    --bs-btn-active-color: var(--ehly-on-danger);
    --bs-btn-active-bg: var(--ehly-danger-hover);
    --bs-btn-active-border-color: var(--ehly-danger-hover);
    --bs-btn-disabled-color: var(--ehly-danger);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ehly-danger);
}

html[data-ehly-theme="ehly"] .btn-primary {
    --bs-btn-hover-bg: #233A93;
    --bs-btn-hover-border-color: #21368A;
    --bs-btn-active-bg: #1F3382;
    --bs-btn-active-border-color: #1F3382;
}

html[data-ehly-theme="ehly"] .btn-outline-secondary {
    --bs-btn-disabled-border-color: #6C757D;
}

html[data-ehly-theme="ehly"] .btn-warning {
    --bs-btn-color: #000000;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #ECAD43;
    --bs-btn-hover-border-color: #EBA838;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #EDB14E;
    --bs-btn-active-border-color: #EBA838;
    --bs-btn-disabled-color: #000000;
}

html[data-ehly-theme="ehly"] .btn-danger {
    --bs-btn-hover-border-color: #B02A37;
    --bs-btn-active-bg: #B02A37;
    --bs-btn-active-border-color: #A52834;
}

html[data-ehly-theme="ehly"] .btn-outline-danger {
    --bs-btn-active-bg: #DC3545;
    --bs-btn-active-border-color: #DC3545;
}

html[data-ehly-theme] .text-bg-success,
html[data-ehly-theme] .badge.bg-success {
    color: var(--ehly-on-success) !important;
}

html[data-ehly-theme] .text-bg-info,
html[data-ehly-theme] .badge.bg-info {
    color: var(--ehly-on-info) !important;
}

html[data-ehly-theme] .text-bg-warning,
html[data-ehly-theme] .badge.bg-warning {
    color: var(--ehly-on-warning) !important;
}

html[data-ehly-theme] .text-bg-danger,
html[data-ehly-theme] .badge.bg-danger {
    color: var(--ehly-on-danger) !important;
}

html[data-ehly-theme] .text-primary,
html[data-ehly-theme] .link-primary {
    color: var(--ehly-primary-control-text) !important;
}

html[data-ehly-theme] .text-success {
    color: var(--bs-success-text-emphasis) !important;
}

html[data-ehly-theme] .text-info {
    color: var(--bs-info-text-emphasis) !important;
}

html[data-ehly-theme] .text-warning {
    color: var(--bs-warning-text-emphasis) !important;
}

html[data-ehly-theme] .text-danger {
    color: var(--bs-danger-text-emphasis) !important;
}

html[data-ehly-theme] .text-bg-primary,
html[data-ehly-theme] .badge.bg-primary {
    color: var(--ehly-on-primary) !important;
}

html[data-ehly-theme] .progress {
    --bs-progress-bar-color: var(--ehly-on-primary);
    --bs-progress-bar-bg: var(--ehly-primary);
}

html[data-ehly-theme]:not([data-ehly-theme="ehly"]) .btn-link {
    --bs-btn-focus-shadow-rgb: var(--ehly-focus-rgb);
}

html[data-ehly-theme] .btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(var(--ehly-focus-rgb), 0.25);
}

/* Whiten the icon itself so Bootstrap's dark filter does not bleach the focus ring. */
html[data-bs-theme="dark"][data-ehly-theme] .btn-close {
    filter: none;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 0 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}

html[data-ehly-theme] .dropdown-menu {
    --bs-dropdown-link-active-color: var(--ehly-on-primary);
    --bs-dropdown-link-active-bg: var(--ehly-primary);
}

html[data-ehly-theme] .list-group {
    --bs-list-group-active-color: var(--ehly-on-primary);
    --bs-list-group-active-bg: var(--ehly-primary);
    --bs-list-group-active-border-color: var(--ehly-primary-selected-border);
}

html[data-ehly-theme] .nav-pills {
    --bs-nav-pills-link-active-color: var(--ehly-on-primary);
    --bs-nav-pills-link-active-bg: var(--ehly-primary);
}

html[data-ehly-theme] .pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--ehly-focus-rgb), 0.25);
    --bs-pagination-active-color: var(--ehly-on-primary);
    --bs-pagination-active-bg: var(--ehly-primary);
    --bs-pagination-active-border-color: var(--ehly-primary-selected-border);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 !important;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/* Layout */
#msgListContainer {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    overflow: hidden;
}

#msgList,
#inboxMessageList {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

#msgListPlaceholder:not(.d-none) {
    flex: 1 1 auto;
    min-height: 0;
}

#msgListPlaceholder:not(.d-none) + #msgList {
    flex: 0 0 0;
}

#threadList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-radius: 0;
}

/* Forms and buttons */
.form-label {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-control,
.form-select {
    font-size: 0.9rem;
}

.form-control::placeholder {
    color: var(--bs-gray-500);
}

html[data-ehly-theme] .form-control::placeholder {
    color: var(--ehly-muted);
}

html[data-ehly-theme] .form-control,
html[data-ehly-theme] .form-select,
html[data-ehly-theme] .form-check-input {
    border-color: var(--ehly-control-border);
}

html[data-ehly-theme] .form-control:focus,
html[data-ehly-theme] .form-select:focus,
html[data-ehly-theme] .form-check-input:focus {
    border-color: var(--ehly-focus);
    box-shadow: 0 0 0 0.25rem rgba(var(--ehly-focus-rgb), 0.25);
}

html[data-ehly-theme] .form-control.is-valid,
html[data-ehly-theme] .form-select.is-valid,
html[data-ehly-theme] .form-check-input.is-valid {
    border-color: var(--ehly-valid);
}

html[data-ehly-theme] .form-control.is-valid:focus,
html[data-ehly-theme] .form-select.is-valid:focus,
html[data-ehly-theme] .form-check-input.is-valid:focus {
    border-color: var(--ehly-valid);
    box-shadow: 0 0 0 0.25rem rgba(var(--ehly-valid-rgb), 0.25);
}

html[data-ehly-theme] .form-control.is-invalid,
html[data-ehly-theme] .form-select.is-invalid,
html[data-ehly-theme] .form-check-input.is-invalid {
    border-color: var(--ehly-invalid);
}

html[data-ehly-theme] .form-control.is-invalid:focus,
html[data-ehly-theme] .form-select.is-invalid:focus,
html[data-ehly-theme] .form-check-input.is-invalid:focus {
    border-color: var(--ehly-invalid);
    box-shadow: 0 0 0 0.25rem rgba(var(--ehly-invalid-rgb), 0.25);
}

html[data-bs-theme="light"][data-ehly-theme] .form-check-input:checked,
html[data-bs-theme="light"][data-ehly-theme] .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--ehly-primary-control-text);
    border-color: var(--ehly-primary-control-text);
}

html[data-bs-theme="dark"][data-ehly-theme] .form-check-input:checked,
html[data-bs-theme="dark"][data-ehly-theme] .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--ehly-primary);
    border-color: var(--ehly-primary);
}

html[data-ehly-theme="midnight"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B1220' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

html[data-ehly-theme="midnight"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230B1220'/%3e%3c/svg%3e");
}

html[data-ehly-theme="midnight"] .form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B1220' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

html[data-ehly-theme="ember-night"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231B1113' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

html[data-ehly-theme="ember-night"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231B1113'/%3e%3c/svg%3e");
}

html[data-ehly-theme="ember-night"] .form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231B1113' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

/* SVG images cannot inherit CSS tokens; these thumb fills mirror each theme's focus colour. */
html[data-ehly-theme="ember"] .form-switch .form-check-input:not(:checked):focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C6470C'/%3e%3c/svg%3e");
}

html[data-ehly-theme="violet"] .form-switch .form-check-input:not(:checked):focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237C3AED'/%3e%3c/svg%3e");
}

html[data-ehly-theme="midnight"] .form-switch .form-check-input:not(:checked):focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2393C5FD'/%3e%3c/svg%3e");
}

html[data-ehly-theme="ember-night"] .form-switch .form-check-input:not(:checked):focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFAA7A'/%3e%3c/svg%3e");
}

html[data-ehly-theme] .form-check-input.is-valid:checked {
    background-color: var(--ehly-valid);
    border-color: var(--ehly-valid);
}

html[data-ehly-theme] .form-check-input.is-invalid:checked {
    background-color: var(--ehly-invalid);
    border-color: var(--ehly-invalid);
}

html[data-ehly-theme] .form-range::-webkit-slider-thumb {
    background-color: var(--ehly-primary);
}

html[data-ehly-theme] .form-range::-webkit-slider-thumb:active {
    background-color: var(--ehly-primary-bg-subtle);
}

html[data-ehly-theme] .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--ehly-surface), 0 0 0 0.25rem rgba(var(--ehly-focus-rgb), 0.25);
}

html[data-ehly-theme] .form-range::-moz-range-thumb {
    background-color: var(--ehly-primary);
}

html[data-ehly-theme] .form-range::-moz-range-thumb:active {
    background-color: var(--ehly-primary-bg-subtle);
}

html[data-ehly-theme] .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--ehly-surface), 0 0 0 0.25rem rgba(var(--ehly-focus-rgb), 0.25);
}

html[data-ehly-theme="ember"] .form-range::-webkit-slider-thumb {
    border: 1px solid var(--ehly-primary-control-text);
}

html[data-ehly-theme="ember"] .form-range::-moz-range-thumb {
    border: 1px solid var(--ehly-primary-control-text);
}

.focus-ring-gutter {
    padding: 0.25rem;
}

.btn {
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
}

.btn-sm {
    font-size: 0.8rem;
}

.btn-xs {
    font-size: 0.6rem;
}

.composer-textarea {
    flex: 1 1 0;
    min-width: 0;
    resize: none;
}

#msgBoxContainer {
    flex: 0 0 auto;
}

.composer-attachment-status {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    color: var(--ehly-muted);
    font-size: 0.75rem;
}

.composer-attachment-status > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-reset-btn {
    max-height: 1.5rem;
}

.settings-reasoning-desktop,
.settings-reasoning-mobile {
    display: none;
}

.settings-reasoning-range-container,
.settings-reasoning-cards,
.settings-reasoning-card {
    min-width: 0;
}

.settings-reasoning-ticks {
    display: flex;
    justify-content: space-between;
    margin: -0.25rem 0.45rem 0.5rem;
}

.settings-reasoning-tick {
    width: 0.4rem;
    height: 0.4rem;
    background-color: var(--bs-gray-400);
    border-radius: 50%;
}

.settings-reasoning-tick-selected {
    background-color: var(--ehly-primary-selected-border);
}

.settings-reasoning-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 0.65rem;
    color: var(--bs-body-color);
    font: inherit;
    text-align: left;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow-wrap: anywhere;
}

button.settings-reasoning-card {
    cursor: pointer;
}

button.settings-reasoning-card:hover {
    background-color: var(--ehly-surface-hover);
    border-color: var(--ehly-hover-border);
}

button.settings-reasoning-card:focus-visible {
    outline: 2px solid rgba(var(--ehly-focus-rgb), 0.45);
    outline-offset: 2px;
}

.settings-reasoning-card-selected {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-color: var(--ehly-primary-selected-border);
    box-shadow: 0 0 0 1px var(--ehly-primary-selected-border);
}

button.settings-reasoning-card-selected:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-color: var(--ehly-primary-selected-border);
}

.settings-reasoning-card-heading {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.settings-reasoning-card-level,
.settings-reasoning-card-cost {
    min-width: 0;
}

.settings-reasoning-card-selected-marker {
    visibility: hidden;
    flex: 0 0 auto;
    color: var(--ehly-primary-selected-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.settings-reasoning-card-selected .settings-reasoning-card-selected-marker {
    visibility: visible;
}

.settings-reasoning-card-cost {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

html[data-ehly-theme="ehly"] .settings-reasoning-card:not(.settings-reasoning-card-selected) .settings-reasoning-card-cost {
    color: #495057;
}

.settings-reasoning-card-selected .settings-reasoning-card-cost {
    color: var(--bs-secondary-text-emphasis);
}

.assistant-danger-zone h5 {
    font-size: 0.85rem;
}

.assistant-danger-zone h6 {
    font-size: 0.85rem;
}

.assistant-danger-zone p,
.assistant-danger-zone .btn {
    font-size: 0.8rem;
}

/* Test Run */
.thread-list-toolbar.focus-ring-gutter .thread-list-toolbar-row {
    gap: 0.25rem;
    margin-bottom: 0.25rem !important;
}

.thread-btn {
    padding: 0.5rem 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.thread-btn .thread-title,
.thread-btn small {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
}

.thread-btn .thread-title {
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.thread-btn small {
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.thread-timestamp,
.thread-reply-mode {
    font-size: 0.6rem;
    line-height: 0.6rem;
}

.thread-timestamp {
    text-align: right;
}

.thread-reply-mode {
    text-align: left;
}

.msg {
    position: relative;
    min-width: 0;
    max-width: calc(100% - 0.5rem);
    margin: 0.25rem;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
}

.msg .msg-content {
    min-width: 0;
    max-width: 100%;
    font-size: 1em;
    line-height: 1.45;
    overflow-wrap: break-word;
}

.msg .msg-content h1,
.msg .msg-content h2,
.msg .msg-content h3,
.msg .msg-content h4,
.msg .msg-content h5,
.msg .msg-content h6 {
    margin: 0.6em 0 0.3em !important;
    font-weight: 600;
    line-height: 1.25;
}

.msg .msg-content h1 {
    font-size: 1.4em;
}

.msg .msg-content h2 {
    font-size: 1.32em;
}

.msg .msg-content h3 {
    font-size: 1.25em;
}

.msg .msg-content h4 {
    font-size: 1.18em;
}

.msg .msg-content h5 {
    font-size: 1.12em;
}

.msg .msg-content h6 {
    font-size: 1.06em;
}

.msg .msg-content > :first-child {
    margin-top: 0 !important;
}

.msg .msg-content p {
    margin: 0 0 0.55em;
}

.msg .msg-content > p:not(:last-child) {
    margin-bottom: 0.55em;
}

.msg .msg-content ul,
.msg .msg-content ol {
    margin: 0 0 0.55em;
    padding-left: 1.4em;
}

.msg .msg-content li {
    margin: 0;
}

.msg .msg-content li + li {
    margin-top: 0.2em;
}

.msg .msg-content li > p {
    margin-bottom: 0.2em;
}

.msg .msg-content li > p:last-child {
    margin-bottom: 0;
}

.msg .msg-content li > ul,
.msg .msg-content li > ol {
    margin: 0.25em 0;
}

.msg .msg-content blockquote {
    margin: 0.55em 0;
    padding-left: 0.75em;
    line-height: 1.45;
    border-left: 0.2em solid currentColor;
    opacity: 0.75;
}

.msg .msg-content blockquote > :last-child {
    margin-bottom: 0;
}

.msg .msg-content code {
    font-size: 0.9em;
}

.msg .msg-content :not(pre) > code {
    padding: 0.1em 0.3em;
    background-color: var(--ehly-code-bg);
    border-radius: 0.2em;
}

.msg .msg-content pre {
    max-width: 100%;
    margin: 0.55em 0;
    padding: 0.55em 0.7em;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.45;
    background-color: var(--ehly-code-bg);
    border-radius: 0.25em;
}

.msg .msg-content pre code {
    padding: 0;
    color: inherit;
    font-size: inherit;
    background: none;
}

.msg .msg-content table {
    display: block;
    max-width: 100%;
    margin: 0.55em 0;
    overflow-x: auto;
    font-size: 0.92em;
    line-height: 1.4;
    border-collapse: collapse;
}

.msg .msg-content th,
.msg .msg-content td {
    padding: 0.3em 0.45em;
    border: 1px solid var(--ehly-content-border);
}

.msg .msg-content a {
    overflow-wrap: anywhere;
}

html[data-ehly-theme="ember"] .msg .msg-content a {
    color: var(--ehly-message-link);
}

html[data-ehly-theme="ember"] .msg .msg-content a:hover {
    color: var(--ehly-message-link-hover);
}

html[data-ehly-theme="ember"] .msg .msg-content code {
    color: var(--ehly-message-code);
}

.msg .msg-content hr {
    margin: 0.65em 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.2;
}

.msg .msg-content > :last-child {
    margin-bottom: 0 !important;
}

.msg-timestamp {
    color: var(--ehly-muted);
    font-size: 0.5rem;
    line-height: 0.5rem;
    text-align: right;
    transform: translate(0.75rem, 0.25rem);
}

.msg-delivery:not(:empty) {
    display: inline-flex;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.message-delivery-icon {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--ehly-muted);
}

.message-delivery-icon.delivery-read {
    color: var(--ehly-primary-control-text);
}

.message-delivery-icon.delivery-failed {
    color: var(--ehly-danger);
}

.msg-img {
    display: block;
    max-width: 20rem;
    max-height: 20rem;
    border-radius: 0.25rem;
}

#imgModalImg {
    width: 100%;
    height: 100%;
    border-radius: 0.25rem;
}

.assistant-msg {
    margin-right: auto;
    background-color: var(--ehly-assistant-message-bg);
}

.human_assistant-msg,
.human_assistant_image-msg,
.human_assistant_audio-msg,
.human_assistant_video-msg,
.human_assistant_document-msg {
    margin-right: auto;
    background-color: var(--ehly-human-message-bg);
}

.user-msg,
.user_image-msg,
.user_audio-msg,
.user_document-msg,
.user_video-msg,
.user_sticker-msg,
.user_contact-msg,
.user_whatsapp_own_contact-msg {
    margin-left: auto;
    background-color: var(--ehly-user-message-bg);
}

.audio-message-label,
.video-message-label {
    margin-bottom: 0.25rem;
    color: var(--ehly-muted);
    font-size: 0.75rem;
}

.video-message-label,
.document-template-text {
    margin-top: 0.5rem;
}

.audio-transcription {
    margin-bottom: 0.5rem;
}

.audio-player,
.video-player {
    width: 100%;
    max-width: 300px;
}

.audio-player {
    height: 40px;
    border-radius: 0.25rem;
}

.audio-player::-webkit-media-controls-enclosure {
    border-radius: 0.25rem;
}

.video-player {
    border-radius: 0.25rem;
}

.chat-placeholder {
    min-height: 50vh;
}

.chat-placeholder-icon {
    width: 4rem;
    color: var(--ehly-primary-control-text);
}

.chat-placeholder-title {
    font-weight: 600;
}

.test-run-wa-input {
    width: 100%;
}

/* Account and organisation */
.form-info {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* Shared disabled overlays */
#leadsCollectionDisabledOverlay,
#customAPIDisabledOverlay,
#humanReplyDisabledOverlay,
#leadsCollectionWhatsappNotificationDisabledOverlay,
#whatsappIntegrationDisabledOverlay,
#telegramIntegrationDisabledOverlay,
#broadcastsDisabledOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--bs-danger);
    background-color: var(--ehly-overlay);
}

/* Vendor overrides */
.modal-header .btn-close {
    margin-right: 0;
}

.select2-container .select2-selection--single {
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--ehly-control-border);
    border-radius: var(--bs-border-radius);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 2.25rem;
    padding-left: 0.75rem;
    color: var(--bs-body-color);
    line-height: calc(1.5em + 0.75rem);
}

.select2-container .select2-selection--single .select2-selection__arrow {
    right: 0.75rem;
    height: 100%;
}

.select2-container--open .select2-selection--single {
    border-color: var(--ehly-focus);
    box-shadow: 0 0 0 0.2rem rgba(var(--ehly-focus-rgb), 0.14);
}

.select2-dropdown {
    overflow: hidden;
    color: var(--bs-body-color);
    background-color: var(--ehly-surface);
    border: 1px solid var(--ehly-border-translucent);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--ehly-shadow-hover);
}

.select2-dropdown .select2-search--dropdown {
    padding: 0.5rem 0.75rem;
    background-color: var(--ehly-secondary-bg);
    border-bottom: 1px solid var(--ehly-border-translucent);
}

html[data-ehly-theme="ehly"] .select2-dropdown {
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.16);
}

html[data-ehly-theme="ehly"] .select2-dropdown .select2-search--dropdown {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.select2-dropdown .select2-search--dropdown .select2-search__field {
    padding: 0;
    color: var(--bs-body-color);
    background-color: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}

.select2-dropdown .select2-results__option {
    color: var(--bs-body-color);
    background-color: var(--ehly-surface);
}

.select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--bs-body-color);
    background-color: var(--ehly-surface-hover);
}

html[data-bs-theme="dark"][data-ehly-theme] .select2-dropdown .select2-results__option--selected {
    color: var(--bs-body-color);
    background-color: var(--ehly-surface-selected);
}

html[data-bs-theme="dark"][data-ehly-theme] .select2-dropdown .select2-results__option--selected.select2-results__option--highlighted {
    color: var(--ehly-on-primary);
    background-color: var(--ehly-primary);
}

html[data-ehly-theme] .select2-dropdown .select2-results__option--disabled {
    color: var(--ehly-muted);
}

html[data-ehly-theme="ehly"] .select2-dropdown .select2-results__option--disabled {
    color: #999999;
}

html[data-bs-theme="dark"][data-ehly-theme] .select2-dropdown .select2-results__option--disabled {
    background-color: var(--ehly-surface);
}

html[data-bs-theme="dark"][data-ehly-theme] .select2-container--default.select2-container--disabled .select2-selection--single,
html[data-bs-theme="dark"][data-ehly-theme] .select2-container--default.select2-container--disabled .select2-selection--multiple {
    color: var(--bs-secondary-color);
    background-color: var(--ehly-tertiary-bg);
    border-color: var(--ehly-border);
}

html[data-bs-theme="dark"][data-ehly-theme] .select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: var(--bs-secondary-color);
}

.select2-dropdown.select2-dropdown--below {
    border-top: 0;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

.select2-dropdown.select2-dropdown--above {
    border-bottom: 0;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

/* Behavioral and state selectors */
.unread-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.5rem 0;
}

.unread-divider span {
    color: var(--bs-danger);
    font-size: 0.8rem;
    font-weight: 500;
}

.unread-divider hr {
    flex-grow: 1;
    margin: 0 0.5rem;
    border: 0;
    border-top: 1px solid var(--bs-danger);
    opacity: 1;
}

.search-highlight {
    margin: 0;
    padding: 0;
    color: var(--ehly-search-color);
    background-color: var(--ehly-search-bg);
}

.cancelled-message {
    text-decoration: line-through;
    opacity: 0.5;
}

.uploading-image {
    position: relative;
    display: inline-block;
}

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Utilities */
.svg-icon {
    display: inline-block;
    width: inherit;
    height: inherit;
    vertical-align: middle;
}

.alert {
    position: fixed;
    top: 0.25rem;
    left: 50%;
    z-index: 2000;
    padding: 0.5rem 1rem;
    transform: translateX(-50%);
}

.section-nav-panel {
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.growing-collection-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.growing-collection-controls {
    flex: 0 0 auto;
    min-width: 0;
}

.growing-collection-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

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

.inbox-thread-list-panel {
    display: flex;
    flex: 0 0 20rem;
    flex-direction: column;
    width: 20rem;
    min-width: 15rem;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--bs-border-color);
}

#inboxThreadList {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-radius: 0;
}

.inbox-transcript-panel {
    min-width: 0;
    flex: 1;
}

.thread-list-toolbar {
    padding-right: 0.375rem;
    padding-left: 0.375rem;
}

.thread-list-toolbar-row {
    gap: 0.5rem;
    min-width: 0;
}

.thread-list-toolbar-row > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.thread-list-toolbar-row > .btn {
    flex: 0 0 auto;
}

.inbox-thread-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 0.35rem;
    padding-right: 0.45rem;
    padding-left: 0.55rem;
    cursor: pointer;
}

.inbox-thread-unread {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    vertical-align: middle;
    color: var(--ehly-primary-control-text);
    background: currentColor;
    border-radius: 50%;
}

.inbox-thread-name {
    grid-column: 1;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-thread-time {
    grid-column: 2;
    white-space: nowrap;
}

.inbox-thread-row.unread .inbox-thread-name {
    color: var(--ehly-primary-control-text);
    font-weight: 600;
}

.inbox-thread-preview,
.inbox-thread-meta {
    grid-column: 1 / 3;
    min-width: 0;
    margin-top: 0.25rem;
}

.inbox-thread-meta,
.inbox-contact-metadata {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.inbox-thread-reply-mode {
    flex: 0 0 auto;
    margin-left: auto;
}

.inbox-contact-tag-strip {
    display: flex;
    flex: 1 1 0;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.inbox-contact-tag-strip > .contact-tag-pill {
    display: block;
    flex: 0 0 auto;
    max-width: min(12rem, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-thread-row.active .text-muted {
    color: var(--ehly-on-primary-muted) !important;
}

.inbox-transcript-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.inbox-contact-summary,
.inbox-contact-heading,
.inbox-contact-channel,
#inboxSenderLabel,
.inbox-contact-identity {
    min-width: 0;
}

.inbox-contact-heading,
.inbox-contact-channel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

#inboxSenderLabel,
.inbox-contact-identity {
    overflow-wrap: anywhere;
}

.inbox-contact-metadata,
#inboxAccountMeta {
    margin-top: 0.125rem;
}

.inbox-contact-metadata .inbox-contact-channel {
    flex: 0 0 auto;
}

.messaging-channel-logo {
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
}

.messaging-account-summary > .messaging-channel-logo {
    width: 24px;
    height: 24px;
}

#inboxContactChannel {
    position: relative;
    padding-left: 2em;
}

/* The logo sits inside the existing pill's padding/line box without increasing its height. */
#inboxContactChannel > .messaging-channel-logo {
    position: absolute;
    top: 50%;
    left: 0.5em;
    width: 1.1em;
    height: 1.1em;
    transform: translateY(-50%);
}

.inbox-contact-identity {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

#inboxMessageList {
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
}

#inboxComposer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.25rem;
    padding: 0.5rem;
}

.contact-row,
.contact-list-row,
.inbox-thread-row {
    text-align: left;
}

.function-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    margin: 0.25rem 0rem;
}

.function-toolbar-search > .form-control,
.function-toolbar-search > .form-select {
    flex: 1 1 16rem;
    min-width: 10rem;
}

.function-toolbar-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    align-items: center;
}

.compact-action {
    min-height: 2.15rem;
    white-space: nowrap;
}

.compact-form .form-control,
.compact-form .form-select,
.compact-form .btn:not(.btn-close) {
    font-size: 0.9rem;
}

.label-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.label-action-row > :first-child {
    min-width: 0;
    margin-bottom: 0 !important;
}

.btn.label-action-btn,
.compact-form .btn.label-action-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 1.65rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
}

.function-state {
    padding: 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

#inboxFilterBtn .filter-active-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    color: var(--ehly-primary-control-text);
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--ehly-surface);
    border: 1px solid var(--ehly-primary-selected-border);
    border-radius: 999px;
}

.inbox-filter-row,
.contact-filter-bar,
.contact-list-picker-toolbar,
.active-filter-chips,
.contact-tag-list {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.inbox-filter-row > .form-select {
    min-width: 0;
}

.inbox-filter-row > .form-select,
#inboxChannelScopeValue {
    flex: 1 1 auto;
}

.contact-filter-bar {
    flex-wrap: wrap;
}

.collection-sort-status,
.collection-sort-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.collection-sort-status {
    flex-wrap: wrap;
    justify-content: space-between;
    min-width: 0;
}

.collection-sort-group {
    min-width: 0;
}

.collection-sort-options .btn {
    white-space: nowrap;
}

.collection-count {
    flex: 0 0 auto;
    margin-left: auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    text-align: right;
    white-space: nowrap;
}

.contact-filter-bar > .form-select,
.contact-filter-bar > div {
    flex: 1 1 11rem;
}

.contact-filter-bar > .btn {
    flex: 0 0 auto;
}

.contact-list-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.contact-list-row > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-list-row > span {
    flex: 0 0 auto;
    white-space: nowrap;
}

.active-filter-chips,
.contact-tag-list {
    flex-wrap: wrap;
}

.active-filter-chip {
    padding: 0.15rem 0.5rem;
    color: var(--bs-primary-text-emphasis);
    font-size: 0.78rem;
    background: var(--bs-primary-bg-subtle);
    border: 0;
    border-radius: 999px;
}

.contact-tag-pill,
.contact-user-tag {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    border: 1px solid;
}

.contact-tag--blue {
    color: var(--ehly-tag-blue-text) !important;
    background: var(--ehly-tag-blue-bg) !important;
    border-color: var(--ehly-tag-blue-border) !important;
}

.contact-tag--grey {
    color: var(--ehly-tag-grey-text) !important;
    background: var(--ehly-tag-grey-bg) !important;
    border-color: var(--ehly-tag-grey-border) !important;
}

.contact-tag--green {
    color: var(--ehly-tag-green-text) !important;
    background: var(--ehly-tag-green-bg) !important;
    border-color: var(--ehly-tag-green-border) !important;
}

.contact-tag--yellow {
    color: var(--ehly-tag-yellow-text) !important;
    background: var(--ehly-tag-yellow-bg) !important;
    border-color: var(--ehly-tag-yellow-border) !important;
}

.contact-tag--red {
    color: var(--ehly-tag-red-text) !important;
    background: var(--ehly-tag-red-bg) !important;
    border-color: var(--ehly-tag-red-border) !important;
}

.contact-tag--cyan {
    color: var(--ehly-tag-cyan-text) !important;
    background: var(--ehly-tag-cyan-bg) !important;
    border-color: var(--ehly-tag-cyan-border) !important;
}

.inbox-channel-pill {
    color: var(--bs-secondary-text-emphasis) !important;
    background: var(--bs-secondary-bg-subtle) !important;
    border: 1px solid var(--bs-secondary-border-subtle);
}

.contact-tag-select + .select2-container {
    flex: 1 1 14rem;
    min-width: 11rem;
}

.contact-tag-select + .select2-container .select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    min-height: 2.15rem;
    padding: 0.18rem 0.35rem;
    color: var(--bs-body-color);
    background-color: var(--ehly-surface);
    border-color: var(--ehly-control-border);
    border-radius: var(--bs-border-radius);
}

.contact-tag-select + .select2-container .select2-selection__rendered {
    display: contents;
    padding: 0;
}

.contact-tag-select + .select2-container .select2-selection__choice {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
}

.contact-tag-select + .select2-container .select2-selection__choice__display {
    padding: 0;
}

.contact-tag-select + .select2-container .select2-selection__choice__display > .contact-tag-pill {
    max-width: 100%;
    padding-right: 1.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-tag-select + .select2-container .select2-selection__choice__remove {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    left: auto;
    z-index: 1;
    padding: 0;
    color: currentColor;
    font-size: 0.8em;
    line-height: 1;
    background: transparent;
    border: 0;
    transform: translateY(-50%);
}

.contact-tag-select + .select2-container .select2-selection__choice__remove:hover,
.contact-tag-select + .select2-container .select2-selection__choice__remove:focus {
    color: var(--bs-body-color);
    background: transparent;
}

.contact-tag-select + .select2-container .select2-search--inline {
    margin: 0;
}

.contact-tag-select + .select2-container .select2-search__field {
    height: 1.4rem;
    min-width: 8rem;
    margin: 0 !important;
    padding: 0 0.1rem !important;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.4rem;
    vertical-align: middle;
}

.contact-tag-select + .select2-container.select2-container--focus .select2-selection--multiple,
.contact-tag-select + .select2-container.select2-container--open .select2-selection--multiple {
    border-color: var(--ehly-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--ehly-focus-rgb), 0.14);
}

.select2-dropdown.contact-tag-select-dropdown .select2-results__group,
.select2-dropdown.contact-tag-select-dropdown .select2-results__option {
    padding: 0.25rem 0.5rem;
}

.select2-dropdown.contact-tag-select-dropdown .select2-results__option--group {
    padding: 0;
}

.select2-dropdown.contact-tag-select-dropdown .select2-results__options--nested .select2-results__option {
    margin-left: 0;
    padding-left: 0.5rem;
}

.contact-tag-select-option {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-tag-remove {
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: 1;
    background: transparent;
    border: 0;
}

.contact-tag-menu {
    width: min(20rem, 80vw);
    max-height: 18rem;
    overflow-y: auto;
}

.contact-tag-option {
    padding: 0.25rem 0.5rem;
}

.contact-list-search-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.contact-list-search-toolbar > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-list-search-toolbar > .form-select {
    flex: 0 0 9rem;
    width: 9rem;
}

.contact-list-picker-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
}

.contact-list-picker-toolbar > .form-select {
    flex: 0 0 11rem;
    width: 11rem;
}

#contactListPickerScopeFilter {
    flex: 1 1 14rem;
    min-width: 0;
}

.contact-list-tag-filter {
    flex: 1 1 14rem;
    min-width: 11rem;
}

.contact-list-tag-filter .select2-container {
    min-width: 0;
}

#contactListClearFilters {
    flex: 0 0 auto;
}

.contact-list-picker-rows {
    min-height: 16rem;
}

.contact-list-show-filter,
.contact-list-result-toolbar,
.contact-list-selected-count,
.contact-list-page-status,
.contact-list-pager {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.contact-list-show-filter {
    flex: 0 0 auto;
}

.contact-list-show-filter .btn {
    white-space: nowrap;
}

.contact-list-result-toolbar {
    flex-wrap: wrap;
    min-width: 0;
    padding: 0.25rem 0;
}

.contact-list-selected-count {
    justify-content: flex-end;
    margin-left: auto;
    white-space: nowrap;
}

.contact-list-page-status {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
}

.contact-list-pager {
    flex: 0 0 auto;
}

.contact-picker-row {
    display: grid;
    grid-template-columns: auto minmax(10rem, 0.8fr) minmax(0, 1.7fr);
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    cursor: pointer;
}

.contact-picker-row > .form-check-input {
    margin: 0;
}

.contact-picker-summary {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.contact-row {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contact-row-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-picker-metadata {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
}

.contact-row-summary {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
    margin-top: 0.15rem;
    overflow: hidden;
    white-space: nowrap;
}

.contact-row-metadata {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-row-tags {
    display: inline-flex;
    flex: 0 1 auto;
    gap: 0.25rem;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.contact-tag-overflow-pill {
    color: var(--bs-secondary-text-emphasis);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

@media (max-width: 575.98px) {
    .collection-sort-status {
        align-items: flex-end;
    }

    .collection-sort-group {
        align-items: stretch;
        flex: 1 1 100%;
        flex-direction: column;
    }

    .contact-list-result-toolbar > :first-child {
        flex: 1 1 100%;
    }

    .collection-sort-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .collection-sort-options .btn {
        margin-left: 0 !important;
        border-radius: var(--bs-border-radius) !important;
    }
}

@media (max-width: 991.98px) {
    .contact-picker-row {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .contact-picker-row > .form-check-input {
        grid-row: 1 / 3;
        margin-top: 0.2rem;
    }

    .contact-picker-summary {
        grid-column: 2;
        display: flex;
        overflow: hidden;
    }

    .contact-picker-metadata {
        display: contents;
    }
}

.contact-endpoint-row {
    display: block;
    margin-bottom: 0.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.contact-endpoint-row:last-child {
    margin-bottom: 0;
}

.contact-endpoint-heading {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.contact-endpoint-heading > strong {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
}

.contact-endpoint-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.contact-endpoint-label {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.contact-endpoint-link {
    align-self: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

.contact-endpoint-actions,
.contact-detail-actions {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    flex: 0 0 auto;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-detail-group {
    min-width: 0;
}

.contact-detail-group h4 {
    margin-bottom: 0.35rem !important;
    color: var(--bs-secondary-color);
}

.contact-detail-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.contact-detail-row:last-child {
    border-bottom: 0;
}

.contact-detail-value {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
}

.contact-detail-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-detail-label {
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.contact-management-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.contact-management-tag {
    min-width: 0;
}

.contact-management-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.contact-tag-colour-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.contact-tag-colour-option {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    cursor: pointer;
}

.contact-tag-colour-swatch {
    display: inline-flex;
    min-width: 4.5rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid;
    border-radius: 999px;
}

.whatsapp-template-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.whatsapp-template-panel {
    min-width: 0;
}

.whatsapp-template-composer h3,
.whatsapp-template-section-title {
    font-weight: 600;
}

.whatsapp-message-preview {
    min-height: 9rem;
    padding: 0.85rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

.whatsapp-template-part + .whatsapp-template-part {
    margin-top: 0.55rem;
}

.whatsapp-template-header {
    font-weight: 600;
}

.whatsapp-template-footer {
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
}

.whatsapp-template-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.whatsapp-template-button-preview {
    min-width: 0;
    padding: 0.4rem 0.55rem;
    text-align: center;
    white-space: normal;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.whatsapp-template-button-label {
    color: var(--ehly-primary-control-text);
    font-size: 0.82rem;
    font-weight: 500;
}

.whatsapp-template-button-destination {
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.whatsapp-template-mapping,
.whatsapp-template-media-mapping {
    display: grid;
    grid-template-columns: minmax(8rem, 0.65fr) minmax(11rem, 0.75fr) minmax(10rem, 1fr);
    gap: 0.5rem;
    align-items: end;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.whatsapp-template-media-mapping {
    grid-template-columns: minmax(8rem, 0.65fr) minmax(0, 1.75fr);
}

.whatsapp-template-mapping:last-child,
.whatsapp-template-media-mapping:last-child {
    border-bottom: 0;
}

.whatsapp-template-mapping-key {
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whatsapp-template-media-control,
.whatsapp-template-selected-media {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.whatsapp-template-media-control {
    flex-wrap: wrap;
}

.whatsapp-template-media-input {
    flex: 1 1 16rem;
}

.whatsapp-template-selected-media {
    flex: 1 1 100%;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
}

.whatsapp-template-selected-media span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whatsapp-template-media-placeholder,
.whatsapp-template-document-preview {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.55rem;
    color: var(--bs-secondary-color);
}

.whatsapp-template-image-preview,
.whatsapp-template-video-preview {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 14rem;
    margin-bottom: 0.55rem;
    border-radius: var(--bs-border-radius);
}

@media (max-width: 767.98px) {
    .whatsapp-template-preview-grid,
    .whatsapp-template-mapping,
    .whatsapp-template-media-mapping {
        grid-template-columns: 1fr;
    }
}

.settings-section-title {
    margin-bottom: 0.75rem !important;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.organisation-settings-section,
.assistant-settings-section,
.account-settings-section {
    padding: 1rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.organisation-settings-section:first-child,
.assistant-settings-section:first-child,
.account-settings-section:first-child {
    padding-top: 0;
}

.organisation-settings-section:last-child,
.assistant-settings-section:last-child,
.account-settings-section:last-child {
    border-bottom: 0;
}

.settings-input-action-row {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.settings-input-action-row > .form-control,
.settings-input-action-row > .form-select {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-input-action-row > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.organisation-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
}

.organisation-feature-grid .form-info {
    margin-bottom: 0;
}

.organisation-schedule-row {
    display: grid;
    grid-template-columns: max-content minmax(2.75rem, 0.45fr) minmax(5rem, 0.8fr) max-content minmax(6.75rem, 1fr);
    gap: 0.25rem;
    align-items: center;
    width: min(100%, 34rem);
}

.organisation-schedule-row > * {
    min-width: 0;
    margin: 0;
}

.organisation-schedule-row > span {
    white-space: nowrap;
}

.organisation-schedule-row > .form-control,
.organisation-schedule-row > .form-select {
    width: 100%;
}