[data-palette="purple"]{--bg:#20212b;--raised:#292a38;--surface:#191b24;--accent:#aaa0f4;--line:#424052;--text:#f0eef5;--muted:#b7b5c3;--selected:color-mix(in srgb,#aaa0f4 22%,#20212b);}
[data-palette="blue"]{--bg:#172430;--raised:#223342;--surface:#111d28;--accent:#89c9ff;--line:#3a5268;--text:#f0eef5;--muted:#b7b5c3;--selected:color-mix(in srgb,#89c9ff 22%,#172430);}
[data-palette="green"]{--bg:#192821;--raised:#24392d;--surface:#121f19;--accent:#8dd7ad;--line:#405e4b;--text:#f0eef5;--muted:#b7b5c3;--selected:color-mix(in srgb,#8dd7ad 22%,#192821);}
[data-palette="amber"]{--bg:#2b241b;--raised:#3b3125;--surface:#211b14;--accent:#efc178;--line:#65533c;--text:#f0eef5;--muted:#b7b5c3;--selected:color-mix(in srgb,#efc178 22%,#2b241b);}
[data-palette="rose"]{--bg:#2c2029;--raised:#3c2b37;--surface:#211820;--accent:#e9a5ce;--line:#62445a;--text:#f0eef5;--muted:#b7b5c3;--selected:color-mix(in srgb,#e9a5ce 22%,#2c2029);}
[data-bubble="purple"]{--bubble-own:#50436d;}.theme-purple{background:#aaa0f4;}
[data-bubble="blue"]{--bubble-own:#284f70;}.theme-blue{background:#89c9ff;}
[data-bubble="green"]{--bubble-own:#2c5844;}.theme-green{background:#8dd7ad;}
[data-bubble="amber"]{--bubble-own:#654d2a;}.theme-amber{background:#efc178;}
[data-bubble="rose"]{--bubble-own:#683e56;}.theme-rose{background:#e9a5ce;}

html[data-palette] :is(.main,.sidebar,.right-panel,.main-head,.content,dialog,.mobile-nav){background-color:var(--bg);color:var(--text)}
html[data-palette] :is(.topbar,.rail,.sidebar-user,input,textarea,select){background-color:var(--surface);color:var(--text)}
html[data-palette] :is(.schedule-card,.request-card,.workspace-card,.activity-row,.composer,.calendar-day,.calendar-blank,.temp-section,.profile-tool,.command-palette){background:var(--raised);color:var(--text);border-color:var(--line)}
html[data-palette] :is(.nav-item.selected,.tabs .selected,.rail button.selected,.calendar-day.selected){background:var(--selected);color:var(--text);border-color:var(--accent)}
html[data-palette] :is(.primary,.composer .primary){background:var(--accent);color:#171820}
html[data-palette] :is(.field,.message p,.request-card p,.nav-item){color:var(--text)}
html[data-palette] :is(.muted,.message time,.message-seen){color:var(--muted)}
[data-chat-background="plain"]{--chat-pattern:none}
[data-chat-background="dots"]{--chat-pattern:radial-gradient(circle at 2px 2px,#ffffff0d 1px,transparent 1.5px);--chat-size:22px 22px}
[data-chat-background="grid"]{--chat-pattern:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);--chat-size:32px 32px}
[data-chat-background="waves"]{--chat-pattern:repeating-radial-gradient(ellipse at 0 0,transparent 0 32px,#ffffff06 33px 34px,transparent 35px 64px);--chat-size:180px 180px}
[data-chat-background="gradient"]{--chat-pattern:linear-gradient(140deg,#ffffff0b,transparent 65%);--chat-size:100% 100%}
.messages,.theme-preview{background-color:var(--bg);background-image:var(--chat-pattern);background-size:var(--chat-size)}
html[data-bubbles="true"] .message{max-width:85%;width:fit-content;margin:0 0 12px;gap:8px;align-items:flex-end}
html[data-bubbles="true"] .message>.grow{background:var(--raised);border:1px solid var(--line);border-radius:15px 15px 15px 4px;padding:9px 13px;min-width:100px;overflow-wrap:anywhere}
html[data-bubbles="true"] .message-own{margin-left:auto;flex-direction:row-reverse}
html[data-bubbles="true"] .message-own>.grow{background:var(--bubble-own);border-radius:15px 15px 4px 15px}
html[data-bubbles="true"] .message p{margin:3px 0;line-height:1.55;color:#f0eef5}
html[data-bubbles="true"] .message-grouped{margin-top:-8px}
html[data-bubbles="true"] .message-grouped>.avatar{visibility:hidden;display:block}
html[data-bubbles="true"] .message .message-metadata{justify-content:flex-end;gap:8px;margin-top:4px}
html[data-bubbles="true"] .message-deleted p{color:var(--muted);opacity:.65}
.company-theme-form fieldset{border:1px solid var(--line);border-radius:10px;padding:12px;margin:16px 0}
.theme-choices{display:flex;flex-wrap:wrap;gap:10px}.theme-choice{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid var(--line);border-radius:8px;cursor:pointer}.theme-choice input{width:auto}.theme-swatch{width:18px;height:18px;border-radius:50%;border:1px solid #aaa}.theme-choice:has(input:checked){border-color:var(--accent);background:var(--selected)}
.theme-preview{padding:20px;border:1px solid var(--line);border-radius:12px;margin:16px 0;display:flex;flex-direction:column;gap:10px;color:var(--text)}
.theme-preview p{padding:12px;max-width:85%;border-radius:12px;background:var(--raised);align-self:flex-start}.theme-preview .theme-outgoing{align-self:flex-end;background:var(--bubble-own)}.theme-preview small{display:block;text-align:right;color:#d0cdd8;margin-top:7px}.theme-preview[data-bubbles="false"] p{background:transparent;align-self:flex-start}
@media(max-width:720px){html[data-bubbles="true"] .message{max-width:94%}html[data-bubbles="true"] .message>.grow{padding:8px 10px}.theme-choice{flex:1 1 42%}}

/* Compact bubbles: content inside, sender and receipts outside. */
html[data-bubbles="true"] .message{max-width:min(78%,560px);margin-bottom:9px;display:block}
html[data-bubbles="true"] .message>.avatar{display:none}
html[data-bubbles="true"] .message>.grow{background:transparent;border:0;border-radius:0;padding:0;min-width:0}
html[data-bubbles="true"] .message .message-bubble{background:var(--raised);border-radius:19px 19px 19px 5px;padding:8px 12px;overflow-wrap:anywhere;min-width:32px}
html[data-bubbles="true"] .message-own .message-bubble{background:var(--bubble-own);border-radius:19px 19px 5px 19px}
html[data-bubbles="true"] .message header{position:static;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;padding:0 5px}
html[data-bubbles="true"] .message header .message-author{font-size:11px;color:var(--muted)}
html[data-bubbles="true"] .message header>.role{display:none}
html[data-bubbles="true"] .message header [data-message-menu]{padding:0 5px;min-height:24px;font-size:12px;line-height:1;background:transparent;border:0}
html[data-bubbles="true"] .message-grouped header{min-height:0;height:0;position:relative;overflow:visible;z-index:1}
html[data-bubbles="true"] .message-grouped header [data-message-menu]{position:absolute;right:3px;top:3px}
html[data-bubbles="true"] .message-grouped .message-bubble{padding-right:32px}
html[data-bubbles="true"] .message .message-bubble>p{font-size:15px;line-height:1.4;padding:0;margin:0}
html[data-bubbles="true"] .message .message-metadata{justify-content:flex-start;flex-wrap:wrap;gap:6px;padding:2px 6px 0;margin:0;font-size:10px;line-height:1.3}
html[data-bubbles="true"] .message-own .message-metadata{justify-content:flex-end}
html[data-bubbles="true"] .message .message-metadata time{margin:0;font-size:10px}
html[data-bubbles="true"] .message .message-seen{font-size:10px;min-height:22px;padding:1px 0}
html[data-bubbles="true"] .message-reactions:empty{display:none}
.composer{padding:2px;border-radius:24px;align-items:end}
.composer textarea{height:40px;min-height:40px;line-height:22px;padding:9px 10px;font-size:15px}
.composer footer{height:40px;gap:0}
.composer footer #slash{min-height:40px;width:28px}
.composer footer #send{width:36px;height:36px;margin:2px;border-radius:50%}
.composer .mobile-photo-attach>button{height:40px;width:40px;padding:9px;background:transparent;border:0}
.theme-preview p{padding:8px 12px;border-radius:19px;font-size:15px;line-height:1.4}
.theme-preview .theme-receipt{align-self:flex-end;background:transparent;padding:0 6px;margin-top:-7px;font-size:10px;color:var(--muted)}
@media(max-width:720px){html[data-bubbles="true"] .message{max-width:86%}.composer textarea{font-size:16px}}

html[data-bubbles="true"] .message .message-bubble{background:var(--bubble-received,var(--raised));color:var(--bubble-received-text,var(--text))}
html[data-bubbles="true"] .message-own .message-bubble{background:var(--bubble-own);color:var(--bubble-own-text,#fff)}
html[data-bubbles="true"] .message .message-bubble p,html[data-bubbles="true"] .message .message-bubble small{color:inherit}
html[data-palette] .primary{color:var(--accent-text,#171820)}
.theme-preview .theme-incoming{background:var(--bubble-received,var(--raised));color:var(--bubble-received-text,var(--text))}.theme-preview .theme-outgoing{color:var(--bubble-own-text,#fff)}
.message-timestamp{padding:0 6px 3px;color:var(--muted);font-size:10px;line-height:1.3}.message-timestamp time{margin:0}.message-own .message-timestamp{text-align:right}
.message-bubble{-webkit-touch-callout:none;touch-action:pan-y pinch-zoom}
.message-menu{width:310px;max-height:calc(100dvh - 24px);overflow:auto;border-radius:18px;background:var(--raised);border-color:var(--line);box-shadow:0 12px 32px #0008}
.message-menu .reaction-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.message-menu .reaction-picker button{display:block;text-align:center;font-size:25px;min-height:44px;padding:5px;border-radius:12px}
.message-menu>button{min-height:40px}
@media(pointer:coarse){.message-bubble{-webkit-user-select:none;user-select:none}html[data-bubbles="true"] .message header [data-message-menu]{opacity:0;width:26px}html[data-bubbles="true"] .message header [data-message-menu]:focus-visible{opacity:1}html[data-bubbles="true"] .message-grouped .message-bubble{padding-right:12px}}
.colour-pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;padding:15px 0}.colour-pickers section{min-width:0}.colour-hex{font-family:monospace}.colour-square{position:relative;height:145px;margin-top:8px;border-radius:8px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--picker-hue,red);touch-action:none;cursor:crosshair;overflow:hidden;border:1px solid var(--line)}.colour-pointer{position:absolute;width:14px;height:14px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #222;transform:translate(-50%,-50%);pointer-events:none}.colour-hue{width:100%;padding:0;background:linear-gradient(to right,red,yellow,lime,cyan,blue,magenta,red);accent-color:var(--accent)}
[data-chat-background="stripes"]{--chat-pattern:repeating-linear-gradient(135deg,#ffffff15 0 18px,transparent 18px 48px);--chat-size:100px 100px}
[data-chat-background="stars"]{--chat-pattern:radial-gradient(circle at 18px 20px,#ffe7aaba 1.5px,transparent 2px),radial-gradient(circle at 65px 55px,#ffffff70 1px,transparent 2px);--chat-size:92px 90px}
[data-chat-background="snow"]{--chat-pattern:radial-gradient(circle at 15px 15px,#ffffff90 2px,transparent 3px),radial-gradient(circle at 55px 65px,#ffffff60 3px,transparent 4px),radial-gradient(circle at 85px 30px,#ffffff90 1px,transparent 2px);--chat-size:105px 95px}
[data-chat-background="confetti"]{--chat-pattern:radial-gradient(ellipse at 15px 20px,#ee8dab90 0 3px,transparent 4px),radial-gradient(ellipse at 65px 35px,#8dcfee90 0 3px,transparent 4px),radial-gradient(ellipse at 35px 65px,#eed58d90 0 3px,transparent 4px);--chat-size:90px 90px}
[data-chat-background="hearts"]{--chat-pattern:url('./icons/chat-hearts.svg');--chat-size:100px 100px}
[data-chat-background="dots"]{--chat-pattern:radial-gradient(circle at 2px 2px,#ffffff28 1.5px,transparent 2px)}
[data-chat-background="grid"]{--chat-pattern:linear-gradient(#ffffff18 1px,transparent 1px),linear-gradient(90deg,#ffffff18 1px,transparent 1px)}
[data-chat-background="waves"]{--chat-pattern:repeating-radial-gradient(ellipse at 0 0,transparent 0 32px,#ffffff1a 33px 35px,transparent 36px 64px)}

/* Keep compact controls inside the pill without clipping attachment menus. */
.composer{min-width:0;box-sizing:border-box;gap:0;padding:2px;overflow:visible}
html[data-palette] .composer textarea{background:transparent;border:0;border-radius:20px;box-shadow:none;min-height:40px;min-width:0;max-width:100%;box-sizing:border-box}
.composer footer{min-width:0;flex-shrink:0;height:40px;align-items:center;padding:0}
.composer footer #send{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;min-width:36px;height:36px;min-height:36px;max-height:36px;line-height:1;padding:0;margin:2px;border-radius:50%;box-sizing:border-box;overflow:hidden}
.composer footer #send::after{display:block;line-height:1;font-size:23px}
.composer .mobile-photo-attach>button{min-height:40px;height:40px;width:36px;min-width:36px;padding:8px;box-sizing:border-box}
.composer footer #slash{flex:0 0 26px;min-width:26px;width:26px;min-height:40px;height:40px;padding:2px}

[data-chat-background="space"]{--chat-pattern:linear-gradient(to bottom,#050813 0%,#050813 1%,#080c182e 8%,#080c182e 92%,#050813 99%,#050813 100%),url('./icons/chat-deep-space-long.png');--chat-size:100% var(--space-tile-height,1200px)}
html[data-chat-background="space"] .messages,.theme-preview[data-chat-background="space"]{background-position:center top;background-repeat:repeat-y;background-size:100% var(--space-tile-height,1200px);background-color:#050813;background-attachment:local}
.messages{background-attachment:local}
html[data-chat-background="space"] .messages :is(.message-timestamp,.message-metadata,.message header){text-shadow:0 1px 3px #000,0 0 5px #000;color:#e5e5ed}
html[data-chat-background="space"] .messages :is(.message-timestamp time,.message-seen,.message-author){color:#e5e5ed}

/* Dialog content shares one scroll flow: sticky profile tabs must not cover titles or forms. */
#modal>header,#modal .profile-tabs{position:static;top:auto}
#modal>header{gap:10px;min-width:0;background:var(--bg);flex-shrink:0}
#modal>header h2{min-width:0;overflow-wrap:anywhere}
#modal>header button{flex-shrink:0}
#modal .tabs{flex-wrap:wrap;overflow:visible;min-width:0;max-width:100%}
#modal .tabs button{white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:100%}
#modal .profile-tabs{background:var(--bg)}
#modal .profile-tab-panel,#modal .profile-tool,#modal form,#modal fieldset{min-width:0;max-width:100%}
#modal .profile-tool{padding:14px;border:1px solid var(--line);border-radius:10px}
#modal .profile-fields{grid-template-columns:minmax(80px,.4fr) minmax(0,1fr)}
#modal .profile-fields dd{min-width:0}
#modal .row{flex-wrap:wrap}
#modal input:not([type=checkbox]):not([type=radio]),#modal select,#modal textarea{max-width:100%;min-width:0}
#modal .pill{white-space:normal;overflow-wrap:anywhere}
#modal .profile-heading{min-width:0;align-items:flex-start}
#modal .profile-heading>div:last-child{flex:1;min-width:0}
#modal .profile-heading h2{overflow-wrap:anywhere}
#modal .scroll{scroll-padding-block:12px}

.messages,.theme-preview{--wallpaper-wash:color-mix(in srgb,var(--bg) calc((1 - var(--wallpaper-opacity,1))*100%),transparent);background-image:linear-gradient(var(--wallpaper-wash),var(--wallpaper-wash)),var(--chat-pattern)}