@khorsheed/dsh-mobile 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/README.en.md +109 -0
- package/README.i18n.yaml +3 -3
- package/README.md +60 -83
- package/lib/client.js +244 -39
- package/lib/types/client/MobileChrome.js +1 -1
- package/lib/types/client/MobileLibrary.d.ts +2 -1
- package/lib/types/client/MobileLibrary.js +34 -15
- package/lib/types/client/MobileTools.d.ts +13 -3
- package/lib/types/client/MobileTools.js +7 -5
- package/lib/types/client/catalogReads.d.ts +10 -0
- package/lib/types/client/catalogReads.js +28 -0
- package/lib/types/client/commands.d.ts +18 -0
- package/lib/types/client/commands.js +6 -0
- package/lib/types/client/composerActions.d.ts +3 -3
- package/lib/types/client/composerActions.js +18 -9
- package/lib/types/client/index.js +8 -1
- package/lib/types/client/sheetGestures.d.ts +3 -0
- package/lib/types/client/sheetGestures.js +81 -0
- package/lib/types/client/styles.d.ts +2 -2
- package/lib/types/client/styles.js +26 -7
- package/lib/types/client/surface.js +7 -4
- package/package.json +4 -3
- package/README.zh.md +0 -132
|
@@ -4,8 +4,9 @@ import { ComposerActions } from './composerActions.js';
|
|
|
4
4
|
import { openMobileMembers } from './MobileRooms.js';
|
|
5
5
|
import { MobileIcon } from './MobileIcon.js';
|
|
6
6
|
/** Own only the launcher and grouped navigation; action targets stay host-owned. */
|
|
7
|
-
export function MobileTools({ t, useSession, rooms }) {
|
|
7
|
+
export function MobileTools({ t, useSession, useInput, inputActions, rooms, openCommands }) {
|
|
8
8
|
const sessionId = useSession(s => s.sessionId);
|
|
9
|
+
const draft = useInput(s => s.draft);
|
|
9
10
|
const seat = useRef(null);
|
|
10
11
|
const [actions, setActions] = useState();
|
|
11
12
|
useLayoutEffect(() => {
|
|
@@ -15,9 +16,9 @@ export function MobileTools({ t, useSession, rooms }) {
|
|
|
15
16
|
setActions(controller);
|
|
16
17
|
return () => controller.dispose();
|
|
17
18
|
}, []);
|
|
18
|
-
return _jsx("span", { ref: seat, "data-mobile-tools-seat": true, children: actions && _jsx(Tools, { actions: actions, t: t, invite: rooms.available() ? () => openMobileMembers(sessionId, true) : undefined }) });
|
|
19
|
+
return _jsx("span", { ref: seat, "data-mobile-tools-seat": true, children: actions && _jsx(Tools, { actions: actions, t: t, openCommands: openCommands ? () => openCommands(sessionId, draft, inputActions.captureInsertion()) : undefined, invite: rooms.available() ? () => openMobileMembers(sessionId, true) : undefined }) });
|
|
19
20
|
}
|
|
20
|
-
function Tools({ actions, t, invite }) {
|
|
21
|
+
export function Tools({ actions, t, invite, openCommands }) {
|
|
21
22
|
const targets = useSyncExternalStore(actions.subscribe, actions.getSnapshot);
|
|
22
23
|
const dialog = useRef(null), launcher = useRef(null);
|
|
23
24
|
const close = () => { dialog.current?.close(); launcher.current?.setAttribute('aria-expanded', 'false'); };
|
|
@@ -25,8 +26,9 @@ function Tools({ actions, t, invite }) {
|
|
|
25
26
|
close(); }, [targets.commands, targets.attachments]);
|
|
26
27
|
if (!targets.commands || !targets.attachments)
|
|
27
28
|
return null;
|
|
28
|
-
const invoke = (action) => { close(); actions.invoke(action); };
|
|
29
|
-
return _jsxs(_Fragment, { children: [_jsx("button", { ref: launcher, "data-mobile-tools-open": true, "aria-label": t('inputTools'), "aria-haspopup": "dialog", "aria-expanded": "false", onClick: () => {
|
|
29
|
+
const invoke = (action) => { close(); actions.invoke(action, openCommands); };
|
|
30
|
+
return _jsxs(_Fragment, { children: [_jsx("button", { ref: launcher, "data-mobile-tools-open": true, "aria-label": t('inputTools'), "aria-haspopup": "dialog", "aria-expanded": "false", onClick: () => { if (document.activeElement instanceof HTMLElement)
|
|
31
|
+
document.activeElement.blur(); launcher.current?.focus({ preventScroll: true }); dialog.current?.showModal(); launcher.current?.setAttribute('aria-expanded', 'true'); }, children: _jsx(MobileIcon, { name: "plus" }) }), _jsxs("dialog", { ref: dialog, "data-mobile-tools-dialog": true, "aria-label": t('inputTools'), onClose: () => launcher.current?.setAttribute('aria-expanded', 'false'), onClick: event => { if (event.target === dialog.current) {
|
|
30
32
|
const r = dialog.current.getBoundingClientRect();
|
|
31
33
|
if (event.clientY < r.top || event.clientX < r.left || event.clientX > r.right || event.clientY > r.bottom)
|
|
32
34
|
close();
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/** Bound optional catalog enrichment so cold log reads cannot fan out across the library. */
|
|
2
|
+
export declare class CatalogReads {
|
|
3
|
+
private readonly limit;
|
|
4
|
+
private pending;
|
|
5
|
+
private running;
|
|
6
|
+
constructor(limit?: number);
|
|
7
|
+
add(work: (active: () => boolean) => Promise<void>, priority?: number): () => void;
|
|
8
|
+
private pump;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=catalogReads.d.ts.map
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/** Bound optional catalog enrichment so cold log reads cannot fan out across the library. */
|
|
2
|
+
export class CatalogReads {
|
|
3
|
+
limit;
|
|
4
|
+
pending = [];
|
|
5
|
+
running = 0;
|
|
6
|
+
constructor(limit = 2) {
|
|
7
|
+
this.limit = limit;
|
|
8
|
+
}
|
|
9
|
+
add(work, priority = 1) {
|
|
10
|
+
const item = { cancelled: false, priority, work };
|
|
11
|
+
this.pending.push(item);
|
|
12
|
+
this.pending.sort((a, b) => a.priority - b.priority);
|
|
13
|
+
this.pump();
|
|
14
|
+
return () => { item.cancelled = true; this.pending = this.pending.filter(entry => entry !== item); };
|
|
15
|
+
}
|
|
16
|
+
pump() {
|
|
17
|
+
while (this.running < this.limit && this.pending.length) {
|
|
18
|
+
const item = this.pending.shift();
|
|
19
|
+
if (item.cancelled)
|
|
20
|
+
continue;
|
|
21
|
+
this.running++;
|
|
22
|
+
// The owner APIs have no caller cancellation. Keep their slot until they settle;
|
|
23
|
+
// cancelling only suppresses queued reads and subsequent optional work.
|
|
24
|
+
void Promise.resolve().then(() => item.cancelled ? undefined : item.work(() => !item.cancelled))
|
|
25
|
+
.catch(() => { }).finally(() => { this.running--; this.pump(); });
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Context } from '@deepseek-ai/cordis';
|
|
2
|
+
import type { TokenSpan } from '@deepseek-ai/dsh-client-ui-conversation/client';
|
|
3
|
+
/** Narrow structural face of the host's public inputTriggers.sessionOf API.
|
|
4
|
+
* Candidate discovery, filtering and picks remain owned by the host. */
|
|
5
|
+
export interface MobileCommandController {
|
|
6
|
+
toggleSource(source: string, hit: {
|
|
7
|
+
trigger: '/';
|
|
8
|
+
query: string;
|
|
9
|
+
quoted: boolean;
|
|
10
|
+
position: 'leading' | 'inline';
|
|
11
|
+
span: TokenSpan;
|
|
12
|
+
}): void;
|
|
13
|
+
}
|
|
14
|
+
export interface MobileCommandService {
|
|
15
|
+
sessionOf(ctx: Context): MobileCommandController;
|
|
16
|
+
}
|
|
17
|
+
export declare function openMobileCommands(controller: MobileCommandController | undefined, draft: string, span: TokenSpan): boolean;
|
|
18
|
+
//# sourceMappingURL=commands.d.ts.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export function openMobileCommands(controller, draft, span) {
|
|
2
|
+
if (!controller || typeof controller.toggleSource !== 'function')
|
|
3
|
+
return false;
|
|
4
|
+
controller.toggleSource('command', { trigger: '/', query: '', quoted: false, position: draft.slice(0, span.start).trim() === '' ? 'leading' : 'inline', span });
|
|
5
|
+
return true;
|
|
6
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/** Checked
|
|
1
|
+
/** Checked legacy and 0.1.7 composer bridge. The official editor, chooser, permission menu and
|
|
2
2
|
* confirmation remain mounted and retain their callbacks. Unknown markup falls back. */
|
|
3
3
|
export type ComposerAction = 'commands' | 'attachments' | 'permissions';
|
|
4
4
|
export interface ActionTarget {
|
|
5
|
-
button: HTMLButtonElement;
|
|
5
|
+
button: HTMLButtonElement | HTMLInputElement;
|
|
6
6
|
label: string;
|
|
7
7
|
disabled: boolean;
|
|
8
8
|
}
|
|
@@ -18,7 +18,7 @@ export declare class ComposerActions {
|
|
|
18
18
|
readonly subscribe: (listener: () => void) => () => void;
|
|
19
19
|
private sync;
|
|
20
20
|
private target;
|
|
21
|
-
invoke(action: ComposerAction): boolean;
|
|
21
|
+
invoke(action: ComposerAction, openCommands?: () => boolean): boolean;
|
|
22
22
|
dispose(): void;
|
|
23
23
|
}
|
|
24
24
|
//# sourceMappingURL=composerActions.d.ts.map
|
|
@@ -9,7 +9,7 @@ export class ComposerActions {
|
|
|
9
9
|
this.observer = new MutationObserver(() => this.sync());
|
|
10
10
|
const card = seat.closest('[data-composer-card]');
|
|
11
11
|
if (card)
|
|
12
|
-
this.observer.observe(card, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['disabled', 'aria-label'] });
|
|
12
|
+
this.observer.observe(card, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['disabled', 'aria-label', 'contenteditable'] });
|
|
13
13
|
this.sync();
|
|
14
14
|
}
|
|
15
15
|
getSnapshot = () => this.snapshot;
|
|
@@ -17,14 +17,21 @@ export class ComposerActions {
|
|
|
17
17
|
sync() {
|
|
18
18
|
const card = this.seat.closest('[data-composer-card]');
|
|
19
19
|
const file = card?.querySelector(':scope > div:last-child > div:first-child > input[type=file][hidden]');
|
|
20
|
-
const
|
|
21
|
-
const
|
|
20
|
+
const previous = file?.previousElementSibling;
|
|
21
|
+
const unified = previous instanceof HTMLButtonElement && previous.getAttribute('aria-haspopup') === 'listbox';
|
|
22
|
+
const attachments = unified ? file : previous;
|
|
23
|
+
const commands = unified ? previous : previous?.previousElementSibling;
|
|
22
24
|
const next = {};
|
|
23
|
-
if (commands instanceof HTMLButtonElement && commands.getAttribute('aria-haspopup') === 'listbox' && attachments instanceof HTMLButtonElement) {
|
|
25
|
+
if (commands instanceof HTMLButtonElement && commands.getAttribute('aria-haspopup') === 'listbox' && (attachments instanceof HTMLButtonElement || attachments instanceof HTMLInputElement)) {
|
|
24
26
|
next.commands = this.target(commands);
|
|
25
27
|
next.attachments = this.target(attachments);
|
|
28
|
+
// The new host retains its file input and onChange validation, but folds
|
|
29
|
+
// its button into commands. Match the owner picker admission: editable
|
|
30
|
+
// composer (live, unlocked, not committing) and input enabled (not child).
|
|
31
|
+
if (unified)
|
|
32
|
+
next.attachments.disabled ||= commands.disabled || !card?.querySelector('[contenteditable="true"]');
|
|
26
33
|
const modes = file?.nextElementSibling;
|
|
27
|
-
const permission = modes?.querySelector(':scope > span > button[aria-label]');
|
|
34
|
+
const permission = modes?.querySelector('[data-slot="conversation.input.permission"] button[aria-label], :scope > span > button[aria-label]');
|
|
28
35
|
// PermissionSelect has a text label between optional glyph and chevron spans.
|
|
29
36
|
if (permission?.querySelector(':scope > span:not([aria-hidden])') && permission.querySelector(':scope > span[aria-hidden] svg'))
|
|
30
37
|
next.permissions = this.target(permission);
|
|
@@ -35,7 +42,7 @@ export class ComposerActions {
|
|
|
35
42
|
this.marked.delete(button);
|
|
36
43
|
}
|
|
37
44
|
for (const value of Object.values(next))
|
|
38
|
-
if (!this.marked.has(value.button)) {
|
|
45
|
+
if (value.button instanceof HTMLButtonElement && !this.marked.has(value.button)) {
|
|
39
46
|
value.button.setAttribute('data-mobile-folded-action', '');
|
|
40
47
|
this.marked.add(value.button);
|
|
41
48
|
}
|
|
@@ -48,13 +55,15 @@ export class ComposerActions {
|
|
|
48
55
|
target(button) {
|
|
49
56
|
return { button, label: button.textContent?.trim() || button.getAttribute('aria-label') || '', disabled: button.disabled };
|
|
50
57
|
}
|
|
51
|
-
invoke(action) {
|
|
58
|
+
invoke(action, openCommands) {
|
|
52
59
|
this.sync();
|
|
53
60
|
const target = this.snapshot[action];
|
|
54
61
|
if (!target || target.disabled || !target.button.isConnected)
|
|
55
62
|
return false;
|
|
56
|
-
//
|
|
57
|
-
//
|
|
63
|
+
// Open the public source without focusing Lexical. Older hosts retain
|
|
64
|
+
// their original button behavior when the optional service is absent.
|
|
65
|
+
if (action === 'commands' && openCommands?.())
|
|
66
|
+
return true;
|
|
58
67
|
if (action === 'commands')
|
|
59
68
|
this.seat.closest('[data-composer-card]')?.querySelector('[contenteditable="true"]')?.focus({ preventScroll: true });
|
|
60
69
|
// Synchronous with the user's click, including the native file-picker gesture.
|
|
@@ -6,11 +6,13 @@ import { MobileDirectory, installMobileDirectoryPicker } from './directory.js';
|
|
|
6
6
|
import { MobileNavigation, mainSessionId } from './navigation.js';
|
|
7
7
|
import { MobileWelcome } from './MobileSeats.js';
|
|
8
8
|
import { MobileSubmissionFocus } from './SubmissionFocus.js';
|
|
9
|
+
import { openMobileCommands } from './commands.js';
|
|
9
10
|
import { MobileTools } from './MobileTools.js';
|
|
10
11
|
import { MobileChrome } from './MobileChrome.js';
|
|
11
12
|
import { MobileQueue } from './MobileQueue.js';
|
|
12
13
|
import { MobileRooms } from './rooms.js';
|
|
13
14
|
import { MessageMenu } from './messageMenu.js';
|
|
15
|
+
import { installSheetGestures } from './sheetGestures.js';
|
|
14
16
|
import { installForegroundRecovery } from './foreground.js';
|
|
15
17
|
import { NS, en, zh } from './locales.js';
|
|
16
18
|
export const inject = ['slots', 'locale', 'layout', 'connection'];
|
|
@@ -36,6 +38,7 @@ export function apply(ctx) {
|
|
|
36
38
|
ctx.effect(() => { const off = presentation.subscribe(() => { if (!presentation.getSnapshot().active)
|
|
37
39
|
directory.finish(null); }); return () => { off(); directory.finish(null); }; }, 'mobile: pending directory');
|
|
38
40
|
ctx.slots.inject('shell.overlay', () => ctx.slots.register({ name: 'shell.overlay', id: 'mobile-directory', locale: NS, inject: () => ({ directory, navigation }) }, MobileDirectoryOverlay));
|
|
41
|
+
ctx.effect(() => installSheetGestures(document), 'mobile: sheet dismissal');
|
|
39
42
|
ctx.effect(() => () => { presentation.dispose(); }, 'mobile: presentation');
|
|
40
43
|
ctx.effect(() => {
|
|
41
44
|
let remove;
|
|
@@ -104,7 +107,11 @@ export function apply(ctx) {
|
|
|
104
107
|
let remove;
|
|
105
108
|
const sync = () => {
|
|
106
109
|
if (presentation.getSnapshot().active)
|
|
107
|
-
remove ??= ctx.slots.register({ name: 'conversation.input.left', id: 'mobile-input-tools', order: -100, locale: NS, inject: () => ({ rooms
|
|
110
|
+
remove ??= ctx.slots.register({ name: 'conversation.input.left', id: 'mobile-input-tools', order: -100, locale: NS, inject: () => ({ rooms, openCommands: (id, draft, span) => {
|
|
111
|
+
const actx = ctx.get('sessions')?.scope(id);
|
|
112
|
+
const service = ctx.get('inputTriggers');
|
|
113
|
+
return actx !== undefined && typeof service?.sessionOf === 'function' && openMobileCommands(service.sessionOf(actx), draft, span);
|
|
114
|
+
} }) }, MobileTools);
|
|
108
115
|
else {
|
|
109
116
|
remove?.();
|
|
110
117
|
remove = undefined;
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/** Mobile dismissal delegates to native dialog.close or the Room owner's close handler. */
|
|
2
|
+
export function installSheetGestures(doc) {
|
|
3
|
+
let drag;
|
|
4
|
+
const reset = () => { if (drag)
|
|
5
|
+
drag.sheet.style.transform = drag.transform; drag = undefined; };
|
|
6
|
+
const close = (overlay) => {
|
|
7
|
+
if (overlay.isConnected && doc.documentElement.hasAttribute('data-dsh-mobile')) {
|
|
8
|
+
if (overlay instanceof HTMLDialogElement) {
|
|
9
|
+
overlay.close();
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
overlay.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const down = (event) => {
|
|
16
|
+
reset();
|
|
17
|
+
if (!doc.documentElement.hasAttribute('data-dsh-mobile') || event.touches.length !== 1)
|
|
18
|
+
return;
|
|
19
|
+
const target = event.target;
|
|
20
|
+
const native = target.closest('dialog[data-mobile-tools-dialog][open]');
|
|
21
|
+
const overlay = native ?? target.closest('[data-mobile-room-overlay]');
|
|
22
|
+
const sheet = native ?? overlay?.querySelector('[data-mobile-room-form]');
|
|
23
|
+
if (!sheet || !overlay || !native && doc.querySelector('dialog[open]') || doc.getSelection()?.toString())
|
|
24
|
+
return;
|
|
25
|
+
const point = event.touches[0], bounds = sheet.getBoundingClientRect();
|
|
26
|
+
const outside = native ? target === native && (point.clientY < bounds.top || point.clientY > bounds.bottom || point.clientX < bounds.left || point.clientX > bounds.right) : target === overlay;
|
|
27
|
+
// Only the handle/title band claims drags; the form body keeps native scrolling.
|
|
28
|
+
if (!outside && (sheet.scrollTop > 0 || point.clientY > sheet.getBoundingClientRect().top + 96
|
|
29
|
+
|| target.closest('button,input,textarea,select,details,a,[contenteditable],[role=menu]')))
|
|
30
|
+
return;
|
|
31
|
+
drag = { sheet, overlay, x: point.clientX, y: point.clientY, outside, dragging: false, transform: sheet.style.transform };
|
|
32
|
+
};
|
|
33
|
+
const move = (event) => {
|
|
34
|
+
if (!drag)
|
|
35
|
+
return;
|
|
36
|
+
if (event.touches.length !== 1 || !drag.sheet.isConnected || !doc.documentElement.hasAttribute('data-dsh-mobile')) {
|
|
37
|
+
reset();
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
const dx = event.touches[0].clientX - drag.x, dy = event.touches[0].clientY - drag.y;
|
|
41
|
+
if (drag.outside) {
|
|
42
|
+
if (Math.hypot(dx, dy) > 10)
|
|
43
|
+
reset();
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
if (!drag.dragging && (dy < -10 || Math.abs(dx) > 12 && Math.abs(dx) > Math.abs(dy))) {
|
|
47
|
+
reset();
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
if (!drag.dragging && (dy < 12 || dy < Math.abs(dx) * 1.5))
|
|
51
|
+
return;
|
|
52
|
+
drag.dragging = true;
|
|
53
|
+
drag.sheet.style.transform = `translate3d(0,${Math.max(0, dy)}px,0)`;
|
|
54
|
+
if (event.cancelable)
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
};
|
|
57
|
+
const up = (event) => {
|
|
58
|
+
const from = drag, point = event.changedTouches[0];
|
|
59
|
+
reset();
|
|
60
|
+
if (!from || !point)
|
|
61
|
+
return;
|
|
62
|
+
const dx = point.clientX - from.x, dy = point.clientY - from.y;
|
|
63
|
+
if (from.outside && Math.hypot(dx, dy) <= 10 || from.dragging && dy >= 72 && dy > Math.abs(dx) * 1.5) {
|
|
64
|
+
// Suppress the compatibility mouse sequence; the owner receives one close action.
|
|
65
|
+
if (event.cancelable)
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
close(from.overlay);
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
doc.addEventListener('touchstart', down, { passive: true });
|
|
71
|
+
doc.addEventListener('touchmove', move, { passive: false });
|
|
72
|
+
doc.addEventListener('touchend', up, { passive: false });
|
|
73
|
+
doc.addEventListener('touchcancel', reset);
|
|
74
|
+
return () => {
|
|
75
|
+
reset();
|
|
76
|
+
doc.removeEventListener('touchstart', down);
|
|
77
|
+
doc.removeEventListener('touchmove', move);
|
|
78
|
+
doc.removeEventListener('touchend', up);
|
|
79
|
+
doc.removeEventListener('touchcancel', reset);
|
|
80
|
+
};
|
|
81
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const ORDINARY_TITLE = "[data-slot=\"main.conversation\"] header:has([data-conversation-header-corner]) nav:has(> span:only-child > button:disabled + [data-slot=\"conversation.session.header.lineage\"]:empty)";
|
|
1
|
+
export declare const ORDINARY_TITLE = "[data-slot=\"main.conversation\"] header:has([data-conversation-header-corner]) nav:has(> span:only-child > :is(button:disabled,span:not([data-slot])) + [data-slot=\"conversation.session.header.lineage\"]:empty)";
|
|
2
2
|
/** Local overrides target official slot anchors; frame attributes are verified before activation. */
|
|
3
|
-
export declare const MOBILE_CSS = "\nhtml[data-dsh-mobile] { --mobile-bar: 56px; --mobile-accent: #4d6bfe; }\nhtml[data-dsh-mobile] body { overscroll-behavior: none; }\nhtml[data-dsh-mobile] [data-mobile-frame] {\n background: var(--dsw-alias-bg-base, #fff);\n box-sizing: border-box; height: var(--mobile-height, 100dvh) !important;\n padding-top: var(--mobile-bar); padding-bottom: env(safe-area-inset-bottom, 0px);\n grid-template-columns: 0px minmax(0, 1fr) 0px !important;\n grid-template-rows: minmax(0, 1fr); transition: none !important;\n}\nhtml[data-dsh-mobile] [data-mobile-frame] > div:has(> [data-slot=\"sidebar\"]) {\n position: absolute; inset: var(--mobile-bar) auto 0 0; z-index: 22;\n width: min(88vw, 360px); border-radius: 0 24px 24px 0;\n box-shadow: 16px 0 60px #15244320;\n}\nhtml[data-dsh-mobile] [data-mobile-frame][data-sidebar-collapsed] > div:has(> [data-slot=\"sidebar\"]) { display: none; }\nhtml[data-dsh-mobile] [data-mobile-frame] > div:has(> [data-slot=\"main\"]) { grid-column: 2; grid-row: 1; min-width: 0; }\nhtml[data-dsh-mobile] [data-mobile-frame] > [data-rightbar-col] { grid-column: 3; grid-row: 1; }\nhtml[data-dsh-mobile] [data-mobile-frame]:not([data-rightbar-collapsed]) > [data-rightbar-col] {\n position: absolute; inset: var(--mobile-bar) 0 0; z-index: 24; width: 100%;\n background: var(--dsw-alias-bg-base, white); min-width: 0;\n}\nhtml[data-dsh-mobile] [data-mobile-frame] > [data-side] { display: none; }\nhtml[data-dsh-mobile] [data-mobile-frame] > [data-shell-overlay] { z-index: 23; pointer-events: none; }\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] > div {\n --dsh-chat-content-width: calc(100vw - 48px);\n --dsh-composer-side-clearance: 12px;\n}\nhtml[data-dsh-mobile] [data-composer-card] { border-radius: 24px; }\nhtml[data-dsh-mobile] [data-composer-card] [contenteditable=\"true\"] { font-size: 16px; }\nhtml[data-dsh-mobile] [data-width-handle] { display: none; }\nhtml[data-dsh-mobile] [data-composer-seat] { padding-bottom: 8px; }\nhtml[data-dsh-mobile] [data-conversation-scroll] { overscroll-behavior-y: contain; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.header.tabs\"] { overflow-x: auto; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.left\"],\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.right\"] { max-width: 100%; }\n[data-mobile-toolbar] {\n position: absolute; inset: 0 0 auto; height: var(--mobile-bar, 56px); display: flex;\n align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px;\n box-sizing: border-box; background: var(--dsw-alias-bg-base, #fff);\n border-bottom: 1px solid var(--dsw-alias-border-l3, #edf0f5); pointer-events: auto;\n}\n[data-mobile-toolbar] button, [data-mobile-dialog] button {\n border: 0; border-radius: 16px; min-height: 44px; min-width: 44px;\n padding: 10px 14px; font: inherit; cursor: pointer;\n color: var(--dsw-alias-label-primary, #152443); background: transparent;\n -webkit-tap-highlight-color: transparent;\n}\n[data-mobile-toolbar] button:hover, [data-mobile-dialog] button:hover { background: #4d6bfe12; }\n[data-mobile-toolbar] strong { font-size: 18px; font-weight: 600; letter-spacing: -0.6px; color: var(--mobile-accent, #4d6bfe); }\n[data-mobile-toolbar] small { color: var(--dsw-alias-label-tertiary, #778195); font-size: 11px; display: block; text-align: center; }\n[data-mobile-toolbar] svg { display: block; }\n[data-mobile-shade] { position: absolute; inset: var(--mobile-bar) 0 0 min(88vw, 360px); border: 0; background: #15244330; pointer-events: auto; }\n[data-mobile-dialog] {\n color: var(--dsw-alias-label-primary, #152443); background: var(--dsw-alias-bg-base, white);\n border: 1px solid var(--dsw-alias-border-l3, #e6eaf2); border-radius: 28px;\n width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 24px;\n max-height: calc(100dvh - 48px); overflow-y: auto; box-shadow: 0 24px 90px #15244325;\n}\n[data-mobile-dialog] input { box-sizing: border-box; width: 100%; margin-top: 12px; padding: 14px; border: 1px solid #ccd3df; border-radius: 14px; font: inherit; font-size: 16px; }\n[data-mobile-dialog] button:disabled { opacity: .4; cursor: default; }\n[data-mobile-dialog]::backdrop { background: #15244355; backdrop-filter: blur(8px); }\n[data-mobile-dialog] h2 { margin: 0 0 24px; font-size: 24px; font-weight: 500; }\n[data-mobile-dialog] h3 { font-size: 13px; font-weight: 500; color: var(--dsw-alias-label-tertiary, #778195); margin: 24px 0 10px; }\n[data-mobile-dialog] p { font-size: 13px; line-height: 1.7; color: var(--dsw-alias-label-tertiary, #778195); overflow-wrap: anywhere; }\n[data-mobile-dialog] [role=\"group\"] { display: flex; flex-wrap: wrap; gap: 6px; }\n[data-mobile-dialog] button[aria-pressed=\"true\"] { color: #4d6bfe; background: #4d6bfe12; }\n[data-mobile-dialog] [data-mobile-done] { display: block; width: 100%; margin-top: 24px; background: #4d6bfe; color: white; border-radius: 100px; }\n\n/* Hide an empty ordinary breadcrumb; populated catalogs keep their Host trigger. */\nhtml[data-dsh-mobile]:has([data-mobile-session-title]) [data-slot=\"main.conversation\"] header:has([data-conversation-header-corner]) nav:has(> span:only-child > button:disabled + [data-slot=\"conversation.session.header.lineage\"]:empty) { display:none; }\nhtml[data-dsh-mobile] [data-mobile-lineage-count] { flex-shrink:0; white-space:nowrap; }\n[data-mobile-restore] { position:fixed; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); z-index:1200; pointer-events:auto; min-height:44px; padding:10px 18px; border:1px solid #4d6bfe40; border-radius:24px; background:var(--dsw-alias-bg-base,white); color:#4d6bfe; font:inherit; box-shadow:0 3px 18px #15244318; }\n\n/* Mobile-owned library: scrolling content and a separate keyboard-aware search dock. */\n[data-mobile-library] { position:absolute; inset:var(--mobile-bar,56px) 0 0; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto; background:var(--dsw-alias-bg-base,white); color:var(--dsw-alias-label-primary,#181a20); }\n[data-mobile-library] button { font:inherit; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }\n[data-mobile-library-header] { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:12px; padding:12px 22px 14px; }\n[data-mobile-library] h1 { margin:0; font-size:30px; font-weight:600; letter-spacing:-1px; }\n[data-mobile-grouping] { display:flex; padding:3px; border-radius:13px; background:var(--dsw-alias-bg-module-platform,#f2f3f6); }\n[data-mobile-grouping] button { border:0; border-radius:10px; min-height:44px; padding:0 12px; font-size:12px; background:none; }\n[data-mobile-grouping] button[aria-pressed=true] { background:var(--dsw-alias-button-floating-fill,white); box-shadow:0 1px 4px #17203815; }\n[data-mobile-recents] { flex:1; min-height:0; overflow-y:auto; padding:0 22px 12px; overscroll-behavior:contain; }\n[data-mobile-session-group] h2 { color:var(--dsw-alias-label-tertiary,#727680); font-size:12px; font-weight:500; margin:16px 0 4px; }\n[data-mobile-session-group] ul { list-style:none; padding:0; margin:0; }\n[data-mobile-workspace-group] { display:grid; grid-template-columns:18px minmax(0,1fr) auto 18px; align-items:center; width:100%; gap:9px; padding:14px 0; min-height:48px; text-align:left; background:none; border:0; }\n[data-mobile-workspace-group] svg { display:block; }\n[data-mobile-workspace-group] strong, [data-mobile-workspace-group] small { line-height:20px; margin:0; }\n[data-mobile-workspace-group] strong { min-width:0; overflow-wrap:anywhere; font-size:14px; font-weight:500; }\n[data-mobile-workspace-group] small { color:var(--dsw-alias-label-tertiary,#727680); font-size:12px; }\n[data-mobile-session] { display:flex; align-items:center; gap:12px; width:100%; min-height:78px; padding:16px 0; text-align:left; border:0; border-bottom:1px solid var(--dsw-alias-border-l3,#e8e9ee); background:none; }\n[data-mobile-session-copy] { min-width:0; flex:1; }\n[data-mobile-session-copy] strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:1.5; font-weight:500; }\n[data-mobile-session-copy] small { display:block; color:var(--dsw-alias-label-tertiary,#727680); font-size:12px; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n[data-mobile-session] time { font-size:11px; color:var(--dsw-alias-label-tertiary,#727680); flex-shrink:0; }\n[data-mobile-session]:active { background:#4d6bfe0a; }\n[data-mobile-activity] { font-size:11px; color:var(--mobile-accent,#4d6bfe); white-space:nowrap; }\n[data-mobile-activity]::before { content:''; display:inline-block; width:5px; height:5px; margin-right:5px; vertical-align:middle; border-radius:50%; background:currentColor; }\n[data-mobile-empty] { color:var(--dsw-alias-label-tertiary,#727680); padding:32px 0; text-align:center; font-size:14px; }\n[data-mobile-search-dock] { display:flex; flex-shrink:0; align-items:center; gap:10px; padding:12px 16px max(10px,env(safe-area-inset-bottom)); background:var(--dsw-alias-bg-base,white); }\n[data-mobile-search] { display:flex; flex:1; min-width:0; align-items:center; gap:8px; min-height:50px; border:1px solid var(--dsw-alias-border-l3,#e8e9ee); border-radius:28px; padding:0 16px; background:var(--dsw-alias-bg-module-platform,#f2f3f6); color:var(--dsw-alias-label-tertiary,#727680); }\n[data-mobile-search] svg { flex-shrink:0; }\n[data-mobile-search] input { width:100%; min-width:0; border:0; background:none; color:var(--dsw-alias-label-primary,#181a20); font:inherit; font-size:16px; padding:12px 0; }\n[data-mobile-search]:focus-within { outline:2px solid #4d6bfe65; outline-offset:2px; }\n[data-mobile-scan] { display:grid; place-items:center; width:50px; height:50px; flex-shrink:0; border:1px solid var(--dsw-alias-border-l3,#e8e9ee); background:var(--dsw-alias-bg-module-platform,#f2f3f6); border-radius:50%; }\n[data-mobile-search-cancel] { min-height:50px; min-width:44px; color:var(--mobile-accent,#4d6bfe) !important; background:none; border:0; font-size:14px; }\n[data-mobile-nav-title] { flex:1; min-width:0; text-align:center; }\n[data-mobile-nav-title] strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dsw-alias-label-primary,#181a20); font-size:16px; }\nhtml[data-dsh-mobile] [data-mobile-toolbar] { border-bottom:0; padding:0 12px; }\n[data-mobile-toolbar] button { color:var(--mobile-accent,#4d6bfe); }\n[data-mobile-connection-status] { position:absolute; top:var(--mobile-bar); left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:12px; padding:0 12px; font-size:12px; background:var(--dsw-alias-bg-module-platform,#f2f3f6); pointer-events:auto; z-index:1; }\n[data-mobile-connection-status] button { border:0; background:none; color:var(--mobile-accent,#4d6bfe); min-height:40px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) { --mobile-bar:96px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) [data-mobile-toolbar] { height:56px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) [data-mobile-connection-status] { top:56px; }\n[data-mobile-dialog] { margin:auto 0 0; width:100%; max-width:none; max-height:75dvh; border-radius:26px 26px 0 0; padding-bottom:max(24px,env(safe-area-inset-bottom)); }\n[data-mobile-dialog] [data-mobile-option] { width:100%; display:block; text-align:left; border-radius:0; border-bottom:1px solid var(--dsw-alias-border-l3,#e8e9ee); padding:14px 0; }\n/* Preserve the official composer, controls, confirmations and message actions. */\nhtml[data-dsh-mobile] [data-composer-card] { border-radius:20px; box-shadow:none; background:var(--dsw-alias-bg-module-platform,#f2f3f6); }\nhtml[data-dsh-mobile] [data-composer-card] [data-input-scroll] { max-height:min(28dvh,220px); }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child { flex-wrap:wrap; gap:8px; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div { flex-wrap:wrap; min-width:0; gap:6px; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child { margin-left:auto; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child button { min-height:44px; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] { min-width:0; max-width:min(62vw,270px); }\n/* Dock the same blank-session composer; the checked hero mark anchors its optional headline. */\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] [data-phase=\"hero\"] [data-conversation-scroll] { justify-content:flex-end; }\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] [data-phase=\"hero\"] [data-composer-seat] { flex:1; min-height:0; }\nhtml[data-dsh-mobile] [data-phase=\"hero\"] [data-composer-seat] > div:has([data-slot=\"conversation.hero.brand.mark\"]) { flex:1; align-self:stretch; padding-bottom:8px; }\nhtml[data-dsh-mobile] [data-phase=\"hero\"] [data-composer-seat] > div > div:first-child:has([data-slot=\"conversation.hero.brand.mark\"]) { flex:1; min-height:100px; justify-content:center; }\n/* rc1 semantic menu anchors, only inside the official composer/hero seats. */\nhtml[data-dsh-mobile] :is([data-composer-card],[data-slot=\"conversation.hero.agentPreset\"],[data-slot=\"conversation.hero.workspace\"]) [role=\"menu\"]:not([role=\"menu\"] [role=\"menu\"]) {\n position:fixed !important; inset:auto 12px max(12px,env(safe-area-inset-bottom)) !important; width:auto !important; min-width:0; max-width:none; max-height:min(65dvh,520px); overflow-y:auto; border-radius:24px; padding:12px; z-index:1100;\n}\nhtml[data-dsh-mobile] :is([data-composer-card],[data-slot=\"conversation.hero.agentPreset\"],[data-slot=\"conversation.hero.workspace\"]) [role=\"menuitem\"] { min-height:48px; }\n/* Approved mobile visual system. Native SwiftUI owns its safe area; Safari owns its own. */\n/* Resolve aliases on body: the official theme presenter publishes its palette there.\n Root aliases resolve before body tokens exist and freeze their light fallbacks. */\nhtml[data-dsh-mobile] body { --mobile-face:var(--dsw-alias-button-floating-fill,#fff); --mobile-soft:var(--dsw-alias-bg-module-platform,#f3f4f6); --mobile-line:var(--dsw-alias-border-l3,#eceef1); --mobile-accent:var(--dsw-alias-state-business-primary,#4d6bfe); --mobile-shadow:0 6px 24px #1823380b; }\nhtml[data-mobile-native-insets] [data-mobile-frame] { padding-bottom:0; }\nhtml[data-mobile-native-insets] :is([data-mobile-search-dock],[data-mobile-dialog]) { padding-bottom:8px; }\nhtml[data-dsh-mobile] [data-mobile-toolbar] { height:64px; padding:8px 16px; }\nhtml[data-dsh-mobile] { --mobile-bar:64px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) { --mobile-bar:104px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) [data-mobile-toolbar] { height:64px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) [data-mobile-connection-status] { top:64px; }\n[data-mobile-toolbar] button { display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; corner-shape:round; background:var(--mobile-face); box-shadow:var(--mobile-shadow); color:var(--dsw-alias-label-primary,#202226); }\n[data-mobile-nav-title] strong { font-weight:500; letter-spacing:0; }\n[data-mobile-library] h1 { font-size:26px; font-weight:500; letter-spacing:-.7px; }\n[data-mobile-grouping] { border-radius:19px; }\n[data-mobile-grouping] button { border-radius:16px; min-height:38px; }\n[data-mobile-library-header] { padding:16px 20px; }\n[data-mobile-recents] { padding:0 12px 12px; }\n[data-mobile-workspace-group] { padding:12px 10px; color:var(--dsw-alias-label-tertiary,#74767c)!important; }\n[data-mobile-workspace-group] strong { font-size:13px; font-weight:400; }\n[data-mobile-session-group] h2 { padding:0 10px; }\n[data-mobile-session] { border:0; border-radius:16px; padding:14px 12px; min-height:68px; }\n[data-mobile-session][aria-current=page] { background:var(--mobile-soft); }\n[data-mobile-session-copy] strong { font-size:15px; font-weight:400; }\n[data-mobile-session-copy] small:empty { display:none; }\n[data-mobile-search-dock] { padding:12px 14px max(8px,env(safe-area-inset-bottom)); gap:8px; }\n[data-mobile-search] { min-height:50px; background:var(--mobile-face); border:1px solid var(--mobile-line); box-shadow:var(--mobile-shadow); }\n[data-mobile-search]:focus-within { outline:none; }\n[data-mobile-search] input:focus, html[data-dsh-mobile] [data-composer-card] [contenteditable]:focus { outline:none!important; box-shadow:none!important; }\n[data-mobile-search] input::placeholder { color:var(--dsw-alias-label-secondary,#61666b); opacity:1; }\nhtml[data-dsh-mobile] [data-composer-placeholder] { color:var(--dsw-alias-label-secondary,#61666b); }\n[data-mobile-search] input, html[data-dsh-mobile] [data-composer-card] [contenteditable] { caret-color:var(--mobile-accent); }\nhtml[data-mobile-input=keyboard] [data-mobile-search]:focus-within, html[data-mobile-input=keyboard] [data-composer-card]:has([contenteditable]:focus) { outline:2px solid var(--mobile-accent); outline-offset:3px; }\n[data-mobile-scan], [data-mobile-search-cancel] { display:grid; place-items:center; min-width:50px; width:50px; height:50px; border:1px solid var(--mobile-line); background:var(--mobile-face); box-shadow:var(--mobile-shadow); border-radius:50%; corner-shape:round; color:var(--dsw-alias-label-primary,#202226)!important; }\nhtml[data-dsh-mobile] [data-composer-card] { border-radius:25px; border:1px solid var(--mobile-line); background:var(--mobile-face); box-shadow:var(--mobile-shadow); }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child { gap:4px; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div { gap:3px; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child button { min-height:40px; }\n/* rc1's two direct toolbar buttons precede the hidden attachment input.\n Scope narrowly so plugin buttons, permission menus and send retain their own states. */\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:first-child > button:has(~ input[type=file][hidden]) { width:40px; height:40px; min-width:40px; padding:0; background:transparent; border-radius:50%; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:first-child > button:has(~ input[type=file][hidden]):active:not(:disabled) { background:var(--dsw-alias-interactive-bg-active); }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] { max-width:min(43vw,210px); }\nhtml[data-dsh-mobile] [data-composer-seat] { padding-bottom:2px; }\n/* The compact stats row on both host lines: 0.1.5 mounts it as\n [data-composer-stats]; alpha.2 deleted that attribute and wraps the dock\n (stats pills + context meter) in a real flex row directly after the card.\n On 0.1.5 the sibling selector lands on the display:contents slot wrapper \u2014\n inert for padding/gap, same font-size by inheritance \u2014 so both rules stay. */\nhtml[data-dsh-mobile] [data-composer-stats], html[data-dsh-mobile] [data-composer-card] + div { padding:4px 12px 0; gap:10px; font-size:11px; }\nhtml[data-dsh-mobile] [data-composer-stats] button, html[data-dsh-mobile] [data-composer-card] + div button { min-height:32px; }\n/* Follow the real chain fallback -> stack -> HeroShell path, not display:contents wrappers. */\nhtml[data-dsh-mobile] [data-phase=hero] [data-composer-seat] { flex:1 0 auto; }\nhtml[data-dsh-mobile] [data-phase=hero] [data-chain-overlay-fallback=\"conversation.composer\"] > div:has([data-mobile-welcome]) { flex:1; align-self:stretch; padding-bottom:0; width:100%; }\nhtml[data-dsh-mobile] [data-phase=hero] [data-chain-overlay-fallback=\"conversation.composer\"] > div > div:has([data-mobile-welcome]) { flex:1; height:auto; min-height:160px; padding:24px 16px 40px; }\nhtml[data-dsh-mobile] [data-phase=hero] span:has(> [data-slot=\"conversation.hero.brand.mark\"]):has([data-mobile-welcome]) + span { display:none; }\n[data-mobile-welcome] { text-align:center; }\n[data-mobile-welcome] small { color:var(--mobile-accent); letter-spacing:3px; font-size:13px; }\n[data-mobile-welcome] h2 { font-size:25px; font-weight:500; line-height:1.4; margin:16px 0 9px; letter-spacing:-.6px; }\n[data-mobile-welcome] p { font-size:13px; line-height:1.6; margin:0; color:var(--dsw-alias-label-tertiary,#74767c); }\nhtml[data-dsh-mobile]:has([data-phase=hero]) [data-mobile-toolbar][data-library=false] [data-mobile-new=true] { visibility:hidden; }\nhtml[data-dsh-mobile] [data-phase=hero] div:has(> [data-slot=\"conversation.hero.workspace\"]) { gap:6px; padding:6px 18px; flex-wrap:wrap; }\nhtml[data-dsh-mobile] [data-phase=hero] div:has(> [data-slot=\"conversation.hero.workspace\"]) > button, html[data-dsh-mobile] [data-slot=\"conversation.hero.agentPreset\"] button[aria-haspopup] { border-radius:18px; min-height:40px; font-size:13px; background:var(--mobile-soft); }\n/* Quiet, read-only metadata below the mobile title. */\n[data-mobile-subtitle] { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:3px; font-size:11px; line-height:16px; color:var(--dsw-alias-label-secondary,#61666b); }\n[data-mobile-subtitle] > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n[data-mobile-subtitle] > span:last-child:not(:first-child) { flex-shrink:0; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\nhtml[data-dsh-mobile]:has([data-mobile-session-title]) [data-mobile-header-hidden], [data-mobile-hidden-tab] { display:none!important; }\n/* Fold only the identified official trigger buttons, not their menus or owners. */\n[data-mobile-folded-action] { display:none!important; }\n[data-mobile-tools-seat] { display:contents; }\nhtml[data-dsh-mobile] [data-mobile-tools-open] { display:grid; place-items:center; width:44px; height:44px; min-width:44px; padding:0; border:0; border-radius:50%; corner-shape:round; color:var(--dsw-alias-label-primary); background:var(--mobile-soft); }\n[data-mobile-tools-dialog] { box-sizing:border-box; margin:auto auto 0; width:min(100%,520px); max-width:100%; max-height:75dvh; overflow-y:auto; padding:16px 20px max(20px,env(safe-area-inset-bottom)); border:1px solid var(--mobile-line); border-bottom:0; border-radius:26px 26px 0 0; background:var(--mobile-face); color:var(--dsw-alias-label-primary); box-shadow:0 -8px 40px #0002; }\n[data-mobile-tools-dialog]::backdrop { background:#0005; }\n[data-mobile-tools-dialog] [data-mobile-tools-handle] { width:34px; height:4px; margin:0 auto 12px; border-radius:4px; background:var(--dsw-alias-label-tertiary); opacity:.5; }\n[data-mobile-tools-dialog] header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }\n[data-mobile-tools-dialog] strong { font-size:16px; font-weight:500; }\n[data-mobile-tools-dialog] button { font:inherit; color:inherit; cursor:pointer; border:0; background:transparent; -webkit-tap-highlight-color:transparent; }\n[data-mobile-tools-dialog] button:disabled { opacity:.45; cursor:default; }\n[data-mobile-tools-dialog] header button { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; padding:0; }\n[data-mobile-tools-grid] { display:grid; grid-template-columns:1fr 1fr; gap:12px; }\n[data-mobile-tools-grid] button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:92px; padding:12px; border-radius:20px; background:var(--mobile-soft); font-size:14px; }\n[data-mobile-tools-permission] { display:flex; align-items:center; width:100%; gap:10px; margin-top:12px; min-height:64px; padding:12px 0; text-align:left; font-size:14px!important; }\n[data-mobile-tools-permission] > span { flex-shrink:0; }\n[data-mobile-tools-permission] > small { margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--dsw-alias-label-secondary); }\n[data-mobile-tools-dialog] svg { flex:none; }\nhtml[data-mobile-input=pointer] [data-mobile-tools-dialog] button:focus { outline:none; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child > button:has(>svg):not([aria-haspopup]) { width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; corner-shape:round; transform:none; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child > button:has(>svg):not([aria-haspopup]) > svg { width:20px; height:20px; flex:none; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] { max-width:min(56vw,260px); }\n/* Keep the send row on one line; 0.1.5 also seats the host context meter in it\n (alpha.2 moved the meter into the dock row below the card). */\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child, html[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child { flex-wrap:nowrap; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] { min-width:0; max-width:min(43vw,210px); flex:1 1 auto; }\n/* rc1's model slot uses display:contents. Size its root and restore the label\n after folding the other input controls; unknown renderers keep their markup. */\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] > div { min-width:0; max-width:min(43vw,210px); }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] > div > button[aria-haspopup=\"menu\"]:has(> svg:first-child + span) { max-width:100%; height:44px; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] > div > button[aria-haspopup=\"menu\"] > svg:first-child:has(+ span) { display:none; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] > div > button[aria-haspopup=\"menu\"] > svg:first-child + span { display:block; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child > span:has(> button[aria-haspopup=\"dialog\"] > svg > circle) { position:static; flex:0 0 auto; }\n/* Translucency belongs to surfaces. Foreground colors remain fully opaque. */\nhtml[data-dsh-mobile] body { --mobile-shadow:0 6px 22px color-mix(in srgb,var(--dsw-alias-label-primary) 9%,transparent); --mobile-glass:color-mix(in srgb,var(--mobile-face) 86%,transparent); --mobile-edge:color-mix(in srgb,var(--dsw-alias-label-primary) 14%,transparent); }\nhtml[data-dsh-mobile] :is([data-mobile-toolbar] button,[data-mobile-scan],[data-mobile-search-cancel],[data-mobile-search],[data-mobile-tools-open],[data-composer-card]) {\n background:var(--mobile-glass); border:1px solid var(--mobile-edge); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--dsw-alias-label-primary) 5%,transparent),var(--mobile-shadow);\n -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25);\n}\nhtml[data-dsh-mobile] :is([data-mobile-toolbar] button,[data-mobile-scan],[data-mobile-tools-open]):active { background:var(--mobile-soft); transform:scale(.97); }\nhtml[data-dsh-mobile] [data-mobile-icon] { flex-shrink:0; aspect-ratio:1; }\n@media (prefers-reduced-transparency: reduce) { html[data-dsh-mobile] body { --mobile-glass:var(--mobile-face); } }\n@supports not (backdrop-filter:blur(1px)) { html[data-dsh-mobile] body { --mobile-glass:var(--mobile-face); } }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child { flex:1 1 0; justify-content:flex-end; }\nhtml[data-dsh-mobile] [data-composer-seat] div:has(> textarea):has(> div > button[aria-label]) { border-radius:25px; background:var(--mobile-glass); border:1px solid var(--mobile-edge); box-shadow:var(--mobile-shadow); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }\nhtml[data-dsh-mobile] [data-composer-seat] textarea { font-size:16px; max-height:26dvh; }\nhtml[data-dsh-mobile] [data-composer-seat] div:has(> textarea) > div > button[aria-label] { width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; }\nhtml[data-dsh-mobile] [data-composer-seat]:has([data-mobile-room-queue]) [data-testid=\"room-queue-strip\"] { display:none; }\n[data-mobile-room-queue] { padding:4px 16px; }\n[data-mobile-queue-pill] { border:1px solid var(--mobile-edge); background:var(--mobile-glass); border-radius:20px; padding:8px 14px; min-height:36px; color:var(--dsw-alias-label-primary); }\n[data-mobile-queue-row] { padding:8px 0; border-bottom:1px solid var(--mobile-line); }\n[data-mobile-queue-row] p { overflow-wrap:anywhere; white-space:pre-wrap; font-size:14px; }\n[data-mobile-queue-row] button { min-height:44px; padding:8px 12px; }\n[data-mobile-queue-row] textarea { width:100%; background:var(--mobile-soft); color:var(--dsw-alias-label-primary); border:1px solid var(--mobile-line); border-radius:12px; padding:8px; }\n/* Mobile action surfaces retain each plugin's controls and callback semantics. */\n[data-mobile-message-menu] { position:fixed; margin:0; width:240px; max-width:calc(100vw - 24px); padding:8px; border-radius:22px; border:1px solid var(--mobile-edge); background:var(--mobile-glass); color:var(--dsw-alias-label-primary); box-shadow:var(--mobile-shadow); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }\n[data-mobile-message-menu]::backdrop { background:#0002; }\n[data-mobile-message-menu] button { display:flex; gap:14px; align-items:center; width:100%; min-height:48px; padding:8px 14px; border:0; border-radius:14px; background:none; color:inherit; font:inherit; text-align:left; }\n[data-mobile-message-menu] button:active { background:var(--mobile-soft); }\n[data-mobile-message-menu] svg { width:20px; height:20px; flex:none; }\n[data-mobile-message-menu] button:disabled { opacity:.45; }\n[data-mobile-toolbar]:has([data-mobile-members-open]) > [data-mobile-new] { display:none; }\n[data-mobile-members-open] { position:relative; }\n[data-mobile-members-open] small { position:absolute; bottom:-3px; right:-2px; min-width:16px; border-radius:10px; font-size:10px; background:var(--mobile-soft); color:var(--dsw-alias-label-primary); }\n[data-mobile-room-dialog] { text-align:left; line-height:1.5; }\n[data-mobile-room-dialog] header button { background:var(--mobile-soft); }\n[data-mobile-room-dialog] label { display:block; font-size:13px; margin:16px 0; }\n[data-mobile-room-dialog] :is(input,textarea,select) { display:block; width:100%; box-sizing:border-box; border:1px solid var(--mobile-line); border-radius:14px; padding:12px; margin-top:6px; font:inherit; font-size:16px; background:var(--mobile-soft); color:var(--dsw-alias-label-primary); }\n[data-mobile-room-dialog] [role=alert] { color:var(--dsw-alias-state-danger-primary,#b73535); font-size:13px; }\n[data-mobile-room-hint], [data-mobile-room-dialog] details { font-size:12px; color:var(--dsw-alias-label-secondary); }\n[data-mobile-room-dialog] details { overflow-wrap:anywhere; }\n[data-mobile-member-row] { display:flex; align-items:center; gap:8px; padding:6px 0; }\n[data-mobile-member-chat] { display:flex!important; align-items:center; flex:1; min-width:0; gap:12px; text-align:left; padding:8px 0; }\n[data-mobile-member-chat]:disabled { opacity:1!important; }\n[data-mobile-member-chat] > span:last-child { min-width:0; }\n[data-mobile-member-chat] strong, [data-mobile-member-chat] small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n[data-mobile-member-chat] small { font-size:12px; color:var(--dsw-alias-label-secondary); }\n[data-mobile-avatar] { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:15px; background:var(--mobile-soft); }\n[data-mobile-room-dialog] [data-mobile-room-primary] { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:46px; margin:18px 0 8px; border-radius:16px; background:var(--mobile-accent); color:var(--dsw-alias-bg-base); }\n[data-mobile-room-dialog] :is([data-mobile-room-back],[data-mobile-room-secondary] button,[data-mobile-confirm] button) { min-height:44px; padding:8px 16px; }\n[data-mobile-room-secondary] { display:flex; justify-content:space-between; }\nhtml[data-dsh-mobile] [data-queue-dock] { max-width:100%; }\nhtml[data-dsh-mobile] [data-queue-dock] button { min-height:40px; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.dock\"] section:has(> button[aria-expanded]) > button { min-height:36px; border-radius:20px; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.dock\"] section > ul[aria-label] { position:fixed; inset:auto 12px max(12px,env(safe-area-inset-bottom)); min-width:0; max-width:none; max-height:62dvh; border-radius:24px; padding:12px; z-index:1200; box-shadow:var(--mobile-shadow); }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.dock\"] section > ul[aria-label] button { min-height:44px; }\n@media (prefers-reduced-motion: reduce) { [data-mobile-frame] * { scroll-behavior:auto !important; } }\n\n/* One mobile reading scale; derived from host text size without writing its preference. */\nhtml[data-dsh-mobile] body { --mobile-text:max(17px,var(--dsh-content-font-size,14px)); --mobile-caption:max(14px,var(--dsh-content-font-size-secondary,13px)); }\nhtml[data-dsh-mobile] :is([data-mobile-library],[data-mobile-dialog],[data-mobile-tools-dialog],[data-mobile-message-menu]) { font-size:var(--mobile-text); line-height:1.55; }\nhtml[data-dsh-mobile] :is([data-mobile-nav-title] strong,[data-mobile-session-copy] strong,[data-mobile-search] input,[data-composer-card] [contenteditable],[data-composer-seat] textarea,[data-mobile-member-chat] strong) { font-size:var(--mobile-text); line-height:1.55; }\nhtml[data-dsh-mobile] :is([data-mobile-workspace-group] strong,[data-mobile-tools-grid] button,[data-mobile-tools-permission],[data-mobile-dialog] h3,[data-mobile-grouping] button) { font-size:16px!important; }\nhtml[data-dsh-mobile] :is([data-mobile-subtitle],[data-mobile-nav-title] small,[data-mobile-session-copy] small,[data-mobile-session] time,[data-mobile-workspace-group] small,[data-mobile-session-group] h2,[data-mobile-activity],[data-mobile-room-hint],[data-mobile-member-chat] small,[data-mobile-tools-permission] small,[data-mobile-dialog] p) { font-size:var(--mobile-caption); line-height:1.5; color:var(--dsw-alias-label-secondary); }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] button { font-size:15px; }\nhtml[data-dsh-mobile] [data-conversation-scroll] {\n --dsh-content-font-size:var(--mobile-text); --dsh-content-font-size-secondary:var(--mobile-caption);\n --dsw-font-markdown-base:var(--mobile-text)/1.65 var(--dsw-font-family);\n --dsw-font-markdown-base-font-size:var(--mobile-text); --dsw-font-markdown-base-line-height:1.65;\n --dsw-font-markdown-base-strong:600 var(--mobile-text)/1.65 var(--dsw-font-family);\n --dsw-font-markdown-base-strong-font-size:var(--mobile-text);\n --dsw-font-markdown-base-italic:italic var(--mobile-text)/1.65 var(--dsw-font-family);\n --dsw-font-markdown-base-italic-font-size:var(--mobile-text);\n}\n/* All Room invite/edit entry points retain the same React form and callbacks. */\nhtml[data-dsh-mobile] [data-mobile-header-hidden]:has([data-mobile-room-form]) { display:contents!important; }\nhtml[data-dsh-mobile] [data-mobile-room-overlay] { position:fixed; inset:0; height:var(--mobile-height,100dvh); z-index:1400; align-items:flex-end; justify-content:center; padding:8px; box-sizing:border-box; background:#0005; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }\nhtml[data-dsh-mobile] [data-mobile-room-form] { box-sizing:border-box; width:100%; max-width:560px; max-height:calc(var(--mobile-height,100dvh) - 24px); margin:0; gap:16px; padding:20px 20px max(16px,env(safe-area-inset-bottom)); border-radius:28px; border:1px solid var(--mobile-edge); background:var(--mobile-face); color:var(--dsw-alias-label-primary); box-shadow:var(--mobile-shadow); text-align:left; overflow-y:auto; font-size:var(--mobile-text); }\nhtml[data-dsh-mobile] [data-mobile-room-form]::before { content:''; display:block; flex:none; width:36px; height:4px; border-radius:4px; background:var(--dsw-alias-label-secondary); opacity:.35; align-self:center; margin:-10px 0 0; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div:first-child { font-size:21px; line-height:1.4; font-weight:600; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div:has(> div > label) { flex-direction:column; gap:16px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div > div:has(>label) { gap:18px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div > div:has(>[data-member]) { order:-1; width:auto; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div > div:has(>[data-member]) > span { display:none; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [data-member] { border:0; background:var(--mobile-soft); border-radius:18px; padding:14px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [data-member] p { font-size:14px; margin:6px 0 0; }\nhtml[data-dsh-mobile] [data-mobile-room-form] label { gap:7px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] label > span:first-child { font-size:15px; line-height:1.5; font-weight:500; color:var(--dsw-alias-label-primary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] label > span:last-child:not(:first-child), html[data-dsh-mobile] [data-mobile-room-form] [role=status] { font-size:14px; line-height:1.5; color:var(--dsw-alias-label-secondary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] :is(input,textarea,select) { box-sizing:border-box; min-width:0; min-height:48px; border-radius:14px; padding:11px 12px; font-size:17px; line-height:1.5; background:var(--mobile-soft); border:1px solid var(--mobile-edge); color:var(--dsw-alias-label-primary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] textarea { min-height:94px; resize:vertical; }\nhtml[data-dsh-mobile] [data-mobile-room-form] button { min-height:44px; min-width:44px; font-size:16px; border-radius:14px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] summary { min-height:44px; padding:10px 0; font-size:16px; color:var(--dsw-alias-label-primary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div:last-child { position:sticky; bottom:-16px; background:var(--mobile-face); padding:12px 0 0; margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [role=alert] { font-size:15px; line-height:1.5; }\nhtml[data-dsh-mobile] [data-member] { font-size:16px; }\nhtml[data-dsh-mobile] [data-member] button { min-height:44px; font-size:15px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [data-member] > div:first-child > span:nth-child(2) > span:first-child { font-size:16px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [data-member] p { color:var(--dsw-alias-label-secondary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div:last-child button:disabled { opacity:1; color:var(--dsw-alias-label-secondary); background:var(--mobile-soft); border:1px solid var(--mobile-edge); cursor:default; }\nhtml[data-dsh-mobile] [data-mobile-queue-row] p { font-size:var(--mobile-text); }\nhtml[data-dsh-mobile] [data-mobile-members-open] small { font-size:12px; min-width:18px; }\n\n/* One viewport: the transcript alone scrolls; the official seat keeps its identity. */\nhtml[data-dsh-mobile], html[data-dsh-mobile] body, html[data-dsh-mobile] #root { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }\nhtml[data-dsh-mobile] [data-mobile-frame] { position:fixed; inset:var(--mobile-top,0px) 0 auto; overflow:hidden; }\nhtml[data-dsh-mobile] [data-mobile-frame] > div:has(> [data-slot=\"main\"]) { position:relative; min-height:0; height:100%; overflow:hidden; }\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] > [data-phase] { min-height:0; overflow:hidden; --dsh-chat-content-width:calc(var(--dsh-conversation-column-width,100vw) - 48px); }\nhtml[data-dsh-mobile] [data-phase=active] [data-conversation-scroll] { box-sizing:border-box; padding-bottom:var(--mobile-composer-height,180px); scroll-padding-bottom:12px; }\nhtml[data-dsh-mobile] [data-phase=active] [data-composer-seat] { position:absolute; bottom:0; left:0; right:0; width:auto; padding-top:8px; padding-bottom:4px; background:var(--dsw-alias-bg-base); }\nhtml[data-dsh-mobile] [data-phase=active] [data-conversation-scroll] > div:has(> [data-slot=\"conversation.session\"]) { flex:1 0 auto; }\nhtml[data-dsh-mobile] [data-phase=hero] [data-conversation-scroll] { overscroll-behavior:contain; }\nhtml[data-dsh-mobile] [data-mobile-frame] { --mobile-pane-width:min(84vw,380px); }\n[data-mobile-library-pane] { position:absolute; inset:0 auto 0 0; width:var(--mobile-pane-width,min(84vw,380px)); background:var(--dsw-alias-bg-base); pointer-events:auto; }\n[data-mobile-library-pane][hidden] { display:none; }\nhtml[data-dsh-mobile] [data-mobile-frame][data-sidebar-collapsed]:has([data-mobile-library-pane]) > div:has(> [data-slot=\"sidebar\"]) { display:none; }\n[data-mobile-library-pane] [data-mobile-library] { inset:var(--mobile-bar,64px) 0 0; }\nhtml[data-mobile-library-open] [data-mobile-connection-status] { right:calc(100% - var(--mobile-pane-width) + 12px); }\n[data-mobile-library-toolbar] { height:64px; padding:8px 16px; display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; }\n[data-mobile-library-toolbar] button { display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid var(--mobile-edge); background:var(--mobile-glass); color:var(--dsw-alias-label-primary); box-shadow:var(--mobile-shadow); }\n[data-mobile-library-pane] [data-mobile-library-header] { padding:12px 16px; gap:8px; }\n[data-mobile-library-pane] [data-mobile-library-header] h1 { font-size:26px; }\n[data-mobile-library-pane] [data-mobile-recents] { padding:0 12px 12px; }\n[data-mobile-library-pane] [data-mobile-session] { padding:12px; }\n[data-mobile-library-pane] [data-mobile-session] time { display:none; }\nhtml[data-mobile-library-open] [data-mobile-frame] > div:has(> [data-slot=\"main\"]) { transform:translate3d(var(--mobile-pane-width),0,0); border-left:1px solid var(--mobile-edge); border-radius:0 0 0 28px; }\nhtml[data-mobile-library-open] [data-mobile-toolbar] { transform:translate3d(var(--mobile-pane-width),0,0); width:100%; border-left:1px solid var(--mobile-edge); border-radius:28px 0 0 0; }\n[data-mobile-peek-close] { position:absolute; inset:0 0 0 var(--mobile-pane-width); pointer-events:auto; background:transparent; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; z-index:30; }\n@media(max-width:959px) and (prefers-reduced-motion:no-preference) {\n html[data-dsh-mobile]:not([data-mobile-gesture]) [data-mobile-frame] > div:has(> [data-slot=\"main\"]),\n html[data-dsh-mobile]:not([data-mobile-gesture]) [data-mobile-toolbar] { transition:transform 220ms cubic-bezier(.2,.8,.2,1),border-radius 220ms ease; }\n}\n[data-mobile-title-line] { display:flex; align-items:center; justify-content:center; min-width:0; }\n[data-mobile-title-line] strong { flex:0 1 auto; }\nhtml[data-dsh-mobile] [data-mobile-rename] { display:grid; place-items:center; flex:none; width:28px; min-width:28px; height:32px; min-height:32px; padding:4px; background:none; box-shadow:none; border:0; backdrop-filter:none; }\n[data-mobile-original-rename] { display:none!important; }\n@media(min-width:960px) {\n html[data-dsh-mobile] [data-mobile-frame] { --mobile-pane-width:320px; padding-left:320px; }\n html[data-dsh-mobile] [data-mobile-library-pane][hidden] { display:block; }\n html[data-dsh-mobile] [data-mobile-toolbar] { left:320px; transform:none; width:auto; right:0; border-radius:0; }\n html[data-dsh-mobile] [data-mobile-frame] > div:has(> [data-slot=\"main\"]) { left:0; transform:none; border-left:1px solid var(--mobile-edge); border-radius:0; }\n html[data-dsh-mobile] [data-mobile-peek-close] { display:none; }\n}\n\n[data-mobile-picker-shade] { position:fixed; inset:0; z-index:1099; background:#0005; backdrop-filter:blur(3px); }\nhtml[data-dsh-mobile] [data-mobile-picker] { position:fixed!important; inset:auto 0 0!important; width:min(100%,560px)!important; margin:0 auto; max-width:100%; max-height:75dvh!important; min-width:0!important; box-sizing:border-box; z-index:1100; border-radius:26px 26px 0 0; padding:16px 16px max(20px,env(safe-area-inset-bottom)); background:var(--mobile-face); color:var(--dsw-alias-label-primary); border:1px solid var(--mobile-edge); box-shadow:0 -8px 40px #0002; overflow:auto; }\n[data-mobile-picker-chrome] { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:4px 8px 16px; }\n[data-mobile-picker-chrome] strong { font-size:20px; font-weight:600; }\n[data-mobile-picker-chrome] button { border:0; background:none; color:var(--mobile-accent); min-height:44px; font:inherit; font-size:16px; }\n[data-mobile-picker-chrome] input { width:100%; min-height:46px; box-sizing:border-box; border:1px solid var(--mobile-edge); border-radius:16px; padding:10px 14px; font:inherit; font-size:17px; background:var(--mobile-soft); color:inherit; }\nhtml[data-dsh-mobile] [data-mobile-picker] > [role=presentation] { max-height:none; overflow:visible; }\nhtml[data-dsh-mobile] [data-mobile-picker] [role=menuitem] { min-height:52px; padding:12px; border-radius:14px; font-size:17px; }\nhtml[data-dsh-mobile] [data-mobile-picker] [role=menuitem][hidden] { display:none; }\nhtml[data-dsh-mobile] [data-mobile-picker=preset] [role=menuitem] span > span:last-child { font-size:14px; line-height:1.55; color:var(--dsw-alias-label-secondary); }\n\nhtml[data-mobile-gesture] [data-mobile-library-pane][hidden] { display:block; }\nhtml[data-mobile-gesture] [data-mobile-frame] > div:has(> [data-slot=\"main\"]), html[data-mobile-gesture] [data-mobile-toolbar] { transform:translate3d(var(--mobile-drag-offset),0,0)!important; width:100%; }\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] > [data-phase] header:has([data-conversation-header-corner]) { min-height:0; padding:6px 16px 0; }\nhtml[data-dsh-mobile] [data-mobile-toolbar] [data-mobile-rename] { background:transparent; border:0; border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--dsw-alias-label-secondary); }\nhtml[data-dsh-mobile] [data-mobile-picker=preset] [role=menuitem] > span span:first-child { font-size:17px; font-weight:500; line-height:1.5; }\n\n/* Rename lives above the page, with a keyboard-aware viewport of its own. */\nhtml[data-dsh-mobile] [data-mobile-rename-dialog] { position:fixed; inset:calc(var(--mobile-top,0px) + var(--mobile-height,100dvh) / 2) 0 auto; transform:translateY(-50%); margin:0 auto; max-height:calc(var(--mobile-height,100dvh) - 32px); width:min(360px,calc(100vw - 40px)); padding:24px; border-radius:26px; background:var(--mobile-face); border-color:var(--mobile-edge); }\n[data-mobile-rename-dialog] h2 { font-size:20px; margin:0 0 20px; }\n[data-mobile-rename-dialog] label { font-size:14px; color:var(--dsw-alias-label-secondary); }\n[data-mobile-rename-dialog] input { background:var(--mobile-soft); color:var(--dsw-alias-label-primary); border-color:var(--mobile-edge); font-size:17px; margin-top:8px; }\nhtml[data-dsh-mobile] [data-mobile-rename-dialog] input:focus { outline:none; box-shadow:0 0 0 2px color-mix(in srgb,var(--mobile-accent) 24%,transparent); border-color:var(--mobile-accent); }\n[data-mobile-rename-dialog] footer { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }\n[data-mobile-rename-dialog] [data-mobile-primary] { background:var(--mobile-accent); color:white; border-radius:22px; padding-inline:22px; }\nhtml[data-dsh-mobile] [data-mobile-picker=preset] [role=menuitem] { border-radius:0; }\nhtml[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] { border-top:1px solid var(--mobile-edge); margin-top:8px; padding-top:20px; }\n\n[data-mobile-directory] { width:min(100%,520px); height:min(78dvh,720px); max-height:calc(var(--mobile-height,100dvh) - 24px); margin:auto auto 0; padding:20px 22px max(16px,env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; color:var(--dsw-alias-label-primary); background:var(--mobile-face,var(--dsw-alias-bg-base)); }\n[data-mobile-directory][open] { display:flex; flex-direction:column; }\n[data-mobile-directory] header { display:flex; justify-content:space-between; align-items:center; flex:none; }\n[data-mobile-directory] header h2 { margin:0; font-size:21px; }\n[data-mobile-directory] button { font:inherit; color:inherit; cursor:pointer; background:transparent; border:0; }\n[data-mobile-directory] header button { display:grid; place-items:center; width:44px; height:44px; }\n[data-directory-tabs] { display:flex; gap:4px; padding:4px; margin:12px 0; border-radius:16px; background:var(--mobile-soft); flex:none; }\n[data-directory-tabs] button { flex:1; min-height:42px; border-radius:12px; }\n[data-directory-tabs] button[aria-pressed=true] { background:var(--mobile-face); color:var(--mobile-accent); box-shadow:0 1px 5px #0001; }\n[data-directory-scroll] { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; }\n[data-mobile-directory] [data-directory-row] { display:flex; gap:12px; align-items:center; width:100%; min-height:56px; padding:12px 2px; text-align:left; border-radius:0; border-bottom:1px solid var(--mobile-line); }\n[data-directory-row] > span { flex:1; min-width:0; overflow-wrap:anywhere; }\n[data-directory-row] strong { display:block; font-weight:500; }\n[data-directory-row] small { display:block; color:var(--dsw-alias-label-secondary); font-size:13px; margin-top:4px; }\n[data-directory-row] svg { flex:none; }\n[data-directory-current] { display:flex; align-items:center; gap:10px; font-size:14px; padding:8px 0; overflow-wrap:anywhere; }\n[data-directory-current] svg { flex:none; }\n[data-directory-manual] summary { cursor:pointer; padding:8px 0; font-size:14px; color:var(--mobile-accent); }\n[data-directory-path] { display:flex; align-items:center; gap:8px; }\n[data-directory-path] input { min-width:0; flex:1; }\n[data-mobile-directory] input { color:inherit; background:var(--mobile-soft); border-color:var(--mobile-line); margin:8px 0; }\n[data-directory-location] { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0; font-size:14px; }\n[data-directory-location] button,[data-directory-location] label { display:flex; align-items:center; gap:6px; min-height:40px; }\n[data-directory-location] input { width:18px; }\n[data-mobile-directory] footer { flex:none; padding-top:10px; }\n[data-mobile-directory] [data-mobile-done] { margin-top:0; background:var(--mobile-accent); color:white; min-height:48px; }\n";
|
|
3
|
+
export declare const MOBILE_CSS = "\nhtml[data-dsh-mobile] { --mobile-bar: 56px; --mobile-accent: #4d6bfe; }\nhtml[data-dsh-mobile] body { overscroll-behavior: none; }\nhtml[data-dsh-mobile] [data-mobile-frame] {\n background: var(--dsw-alias-bg-base, #fff);\n box-sizing: border-box; height: var(--mobile-height, 100dvh) !important;\n padding-top: var(--mobile-bar); padding-bottom: env(safe-area-inset-bottom, 0px);\n grid-template-columns: 0px minmax(0, 1fr) 0px !important;\n grid-template-rows: minmax(0, 1fr); transition: none !important;\n}\nhtml[data-dsh-mobile] [data-mobile-frame] > div:has(> [data-slot=\"sidebar\"]) {\n position: absolute; inset: var(--mobile-bar) auto 0 0; z-index: 22;\n width: min(88vw, 360px); border-radius: 0 24px 24px 0;\n box-shadow: 16px 0 60px #15244320;\n}\nhtml[data-dsh-mobile] [data-mobile-frame][data-sidebar-collapsed] > div:has(> [data-slot=\"sidebar\"]) { display: none; }\nhtml[data-dsh-mobile] [data-mobile-frame] > div:has(> [data-slot=\"main\"]) { grid-column: 2; grid-row: 1; min-width: 0; }\nhtml[data-dsh-mobile] [data-mobile-frame] > [data-rightbar-col] { grid-column: 3; grid-row: 1; }\nhtml[data-dsh-mobile] [data-mobile-frame]:not([data-rightbar-collapsed]) > [data-rightbar-col] {\n position: absolute; inset: var(--mobile-bar) 0 0; z-index: 24; width: 100%;\n background: var(--dsw-alias-bg-base, white); min-width: 0;\n}\nhtml[data-dsh-mobile] [data-mobile-frame] > [data-side] { display: none; }\nhtml[data-dsh-mobile] [data-mobile-frame] > [data-shell-overlay] { z-index: 23; pointer-events: none; }\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] > div {\n --dsh-chat-content-width: calc(100vw - 48px);\n --dsh-composer-side-clearance: 12px;\n}\nhtml[data-dsh-mobile] [data-composer-card] { border-radius: 24px; }\nhtml[data-dsh-mobile] [data-composer-card] [contenteditable=\"true\"] { font-size: 16px; }\nhtml[data-dsh-mobile] [data-width-handle] { display: none; }\nhtml[data-dsh-mobile] [data-composer-seat] { padding-bottom: 8px; }\nhtml[data-dsh-mobile] [data-conversation-scroll] { overscroll-behavior-y: contain; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.header.tabs\"] { overflow-x: auto; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.left\"],\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.right\"] { max-width: 100%; }\n[data-mobile-toolbar] {\n position: absolute; inset: 0 0 auto; height: var(--mobile-bar, 56px); display: flex;\n align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px;\n box-sizing: border-box; background: var(--dsw-alias-bg-base, #fff);\n border-bottom: 1px solid var(--dsw-alias-border-l3, #edf0f5); pointer-events: auto;\n}\n[data-mobile-toolbar] button, [data-mobile-dialog] button {\n border: 0; border-radius: 16px; min-height: 44px; min-width: 44px;\n padding: 10px 14px; font: inherit; cursor: pointer;\n color: var(--dsw-alias-label-primary, #152443); background: transparent;\n -webkit-tap-highlight-color: transparent;\n}\n[data-mobile-toolbar] button:hover, [data-mobile-dialog] button:hover { background: #4d6bfe12; }\n[data-mobile-toolbar] strong { font-size: 18px; font-weight: 600; letter-spacing: -0.6px; color: var(--mobile-accent, #4d6bfe); }\n[data-mobile-toolbar] small { color: var(--dsw-alias-label-tertiary, #778195); font-size: 11px; display: block; text-align: center; }\n[data-mobile-toolbar] svg { display: block; }\n[data-mobile-shade] { position: absolute; inset: var(--mobile-bar) 0 0 min(88vw, 360px); border: 0; background: #15244330; pointer-events: auto; }\n[data-mobile-dialog] {\n color: var(--dsw-alias-label-primary, #152443); background: var(--dsw-alias-bg-base, white);\n border: 1px solid var(--dsw-alias-border-l3, #e6eaf2); border-radius: 28px;\n width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 24px;\n max-height: calc(100dvh - 48px); overflow-y: auto; box-shadow: 0 24px 90px #15244325;\n}\n[data-mobile-dialog] input { box-sizing: border-box; width: 100%; margin-top: 12px; padding: 14px; border: 1px solid #ccd3df; border-radius: 14px; font: inherit; font-size: 16px; }\n[data-mobile-dialog] button:disabled { opacity: .4; cursor: default; }\n[data-mobile-dialog]::backdrop { background: #15244355; backdrop-filter: blur(8px); }\n[data-mobile-dialog] h2 { margin: 0 0 24px; font-size: 24px; font-weight: 500; }\n[data-mobile-dialog] h3 { font-size: 13px; font-weight: 500; color: var(--dsw-alias-label-tertiary, #778195); margin: 24px 0 10px; }\n[data-mobile-dialog] p { font-size: 13px; line-height: 1.7; color: var(--dsw-alias-label-tertiary, #778195); overflow-wrap: anywhere; }\n[data-mobile-dialog] [role=\"group\"] { display: flex; flex-wrap: wrap; gap: 6px; }\n[data-mobile-dialog] button[aria-pressed=\"true\"] { color: #4d6bfe; background: #4d6bfe12; }\n[data-mobile-dialog] [data-mobile-done] { display: block; width: 100%; margin-top: 24px; background: #4d6bfe; color: white; border-radius: 100px; }\n\n/* The host trigger menu is translucent; mobile overlays need an opaque face. */\nhtml[data-dsh-mobile] [data-trigger-menu] { background:var(--mobile-face,var(--dsw-alias-bg-base))!important; --dsw-specific-menu:var(--mobile-face,var(--dsw-alias-bg-base)); opacity:1; backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid var(--mobile-edge); padding:8px; border-radius:22px; box-shadow:var(--mobile-shadow); }\nhtml[data-dsh-mobile] [data-trigger-menu] [role=option] { min-height:48px; padding:12px; font-size:16px; line-height:1.45; }\nhtml[data-dsh-mobile] [data-trigger-menu] [role=listbox] { overscroll-behavior:contain; }\n/* Hide an empty ordinary breadcrumb; populated catalogs keep their Host trigger. */\nhtml[data-dsh-mobile]:has([data-mobile-session-title]) [data-slot=\"main.conversation\"] header:has([data-conversation-header-corner]) nav:has(> span:only-child > :is(button:disabled,span:not([data-slot])) + [data-slot=\"conversation.session.header.lineage\"]:empty) { display:none; }\nhtml[data-dsh-mobile] [data-mobile-lineage-count] { flex-shrink:0; white-space:nowrap; }\n[data-mobile-restore] { position:fixed; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); z-index:1200; pointer-events:auto; min-height:44px; padding:10px 18px; border:1px solid #4d6bfe40; border-radius:24px; background:var(--dsw-alias-bg-base,white); color:#4d6bfe; font:inherit; box-shadow:0 3px 18px #15244318; }\n\n/* Mobile-owned library: scrolling content and a separate keyboard-aware search dock. */\n[data-mobile-library] { position:absolute; inset:var(--mobile-bar,56px) 0 0; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto; background:var(--dsw-alias-bg-base,white); color:var(--dsw-alias-label-primary,#181a20); }\n[data-mobile-library] button { font:inherit; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }\n[data-mobile-library-header] { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:12px; padding:12px 22px 14px; }\n[data-mobile-library] h1 { margin:0; font-size:30px; font-weight:600; letter-spacing:-1px; }\n[data-mobile-grouping] { display:flex; padding:3px; border-radius:13px; background:var(--dsw-alias-bg-module-platform,#f2f3f6); }\n[data-mobile-grouping] button { border:0; border-radius:10px; min-height:44px; padding:0 12px; font-size:12px; background:none; }\n[data-mobile-grouping] button[aria-pressed=true] { background:var(--dsw-alias-button-floating-fill,white); box-shadow:0 1px 4px #17203815; }\n[data-mobile-recents] { flex:1; min-height:0; overflow-y:auto; padding:0 22px 12px; overscroll-behavior:contain; }\n[data-mobile-session-group] h2 { color:var(--dsw-alias-label-tertiary,#727680); font-size:12px; font-weight:500; margin:16px 0 4px; }\n[data-mobile-session-group] ul { list-style:none; padding:0; margin:0; }\n[data-mobile-workspace-group] { display:grid; grid-template-columns:18px minmax(0,1fr) auto 18px; align-items:center; width:100%; gap:9px; padding:14px 0; min-height:48px; text-align:left; background:none; border:0; }\n[data-mobile-workspace-group] svg { display:block; }\n[data-mobile-workspace-group] strong, [data-mobile-workspace-group] small { line-height:20px; margin:0; }\n[data-mobile-workspace-group] strong { min-width:0; overflow-wrap:anywhere; font-size:14px; font-weight:500; }\n[data-mobile-workspace-group] small { color:var(--dsw-alias-label-tertiary,#727680); font-size:12px; }\n[data-mobile-session] { display:flex; align-items:center; gap:12px; width:100%; min-height:78px; padding:16px 0; text-align:left; border:0; border-bottom:1px solid var(--dsw-alias-border-l3,#e8e9ee); background:none; }\n[data-mobile-session-copy] { min-width:0; flex:1; }\n[data-mobile-session-copy] strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:1.5; font-weight:500; }\n[data-mobile-session-copy] small { display:block; color:var(--dsw-alias-label-tertiary,#727680); font-size:12px; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n[data-mobile-session] time { font-size:11px; color:var(--dsw-alias-label-tertiary,#727680); flex-shrink:0; }\n[data-mobile-session]:active { background:#4d6bfe0a; }\n[data-mobile-activity] { font-size:11px; color:var(--mobile-accent,#4d6bfe); white-space:nowrap; }\n[data-mobile-activity]::before { content:''; display:inline-block; width:5px; height:5px; margin-right:5px; vertical-align:middle; border-radius:50%; background:currentColor; }\n[data-mobile-empty] { color:var(--dsw-alias-label-tertiary,#727680); padding:32px 0; text-align:center; font-size:14px; }\n[data-mobile-search-dock] { display:flex; flex-shrink:0; align-items:center; gap:10px; padding:12px 16px max(10px,env(safe-area-inset-bottom)); background:var(--dsw-alias-bg-base,white); }\n[data-mobile-search] { display:flex; flex:1; min-width:0; align-items:center; gap:8px; min-height:50px; border:1px solid var(--dsw-alias-border-l3,#e8e9ee); border-radius:28px; padding:0 16px; background:var(--dsw-alias-bg-module-platform,#f2f3f6); color:var(--dsw-alias-label-tertiary,#727680); }\n[data-mobile-search] svg { flex-shrink:0; }\n[data-mobile-search] input { width:100%; min-width:0; border:0; background:none; color:var(--dsw-alias-label-primary,#181a20); font:inherit; font-size:16px; padding:12px 0; }\n[data-mobile-search]:focus-within { outline:2px solid #4d6bfe65; outline-offset:2px; }\n[data-mobile-scan] { display:grid; place-items:center; width:50px; height:50px; flex-shrink:0; border:1px solid var(--dsw-alias-border-l3,#e8e9ee); background:var(--dsw-alias-bg-module-platform,#f2f3f6); border-radius:50%; }\n[data-mobile-search-cancel] { min-height:50px; min-width:44px; color:var(--mobile-accent,#4d6bfe) !important; background:none; border:0; font-size:14px; }\n[data-mobile-nav-title] { flex:1; min-width:0; text-align:center; }\n[data-mobile-nav-title] strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dsw-alias-label-primary,#181a20); font-size:16px; }\nhtml[data-dsh-mobile] [data-mobile-toolbar] { border-bottom:0; padding:0 12px; }\n[data-mobile-toolbar] button { color:var(--mobile-accent,#4d6bfe); }\n[data-mobile-connection-status] { position:absolute; top:var(--mobile-bar); left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:12px; padding:0 12px; font-size:12px; background:var(--dsw-alias-bg-module-platform,#f2f3f6); pointer-events:auto; z-index:1; }\n[data-mobile-connection-status] button { border:0; background:none; color:var(--mobile-accent,#4d6bfe); min-height:40px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) { --mobile-bar:96px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) [data-mobile-toolbar] { height:56px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) [data-mobile-connection-status] { top:56px; }\n[data-mobile-dialog] { margin:auto 0 0; width:100%; max-width:none; max-height:75dvh; border-radius:26px 26px 0 0; padding-bottom:max(24px,env(safe-area-inset-bottom)); }\n[data-mobile-dialog] [data-mobile-option] { width:100%; display:block; text-align:left; border-radius:0; border-bottom:1px solid var(--dsw-alias-border-l3,#e8e9ee); padding:14px 0; }\n/* Preserve the official composer, controls, confirmations and message actions. */\nhtml[data-dsh-mobile] [data-composer-card] { border-radius:20px; box-shadow:none; background:var(--dsw-alias-bg-module-platform,#f2f3f6); }\nhtml[data-dsh-mobile] [data-composer-card] [data-input-scroll] { max-height:min(28dvh,220px); }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child { flex-wrap:wrap; gap:8px; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div { flex-wrap:wrap; min-width:0; gap:6px; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child { margin-left:auto; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child button { min-height:44px; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] { min-width:0; max-width:min(62vw,270px); }\n/* Dock the same blank-session composer; the checked hero mark anchors its optional headline. */\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] [data-phase=\"hero\"] [data-conversation-scroll] { justify-content:flex-end; }\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] [data-phase=\"hero\"] [data-composer-seat] { flex:1; min-height:0; }\nhtml[data-dsh-mobile] [data-phase=\"hero\"] [data-composer-seat] > div:has([data-slot=\"conversation.hero.brand.mark\"]) { flex:1; align-self:stretch; padding-bottom:8px; }\nhtml[data-dsh-mobile] [data-phase=\"hero\"] [data-composer-seat] > div > div:first-child:has([data-slot=\"conversation.hero.brand.mark\"]) { flex:1; min-height:100px; justify-content:center; }\n/* rc1 semantic menu anchors, only inside the official composer/hero seats. */\nhtml[data-dsh-mobile] :is([data-composer-card],[data-slot=\"conversation.hero.agentPreset\"],[data-slot=\"conversation.hero.workspace\"]) [role=\"menu\"]:not([role=\"menu\"] [role=\"menu\"]) {\n position:fixed !important; inset:auto 12px max(12px,env(safe-area-inset-bottom)) !important; width:auto !important; min-width:0; max-width:none; max-height:min(65dvh,520px); overflow-y:auto; border-radius:24px; padding:12px; z-index:1100;\n}\nhtml[data-dsh-mobile] :is([data-composer-card],[data-slot=\"conversation.hero.agentPreset\"],[data-slot=\"conversation.hero.workspace\"]) [role=\"menuitem\"] { min-height:48px; }\n/* Approved mobile visual system. Native SwiftUI owns its safe area; Safari owns its own. */\n/* Resolve aliases on body: the official theme presenter publishes its palette there.\n Root aliases resolve before body tokens exist and freeze their light fallbacks. */\nhtml[data-dsh-mobile] body { --mobile-face:var(--dsw-alias-button-floating-fill,#fff); --mobile-soft:var(--dsw-alias-bg-module-platform,#f3f4f6); --mobile-line:var(--dsw-alias-border-l3,#eceef1); --mobile-accent:var(--dsw-alias-state-business-primary,#4d6bfe); --mobile-shadow:0 6px 24px #1823380b; }\nhtml[data-mobile-native-insets] [data-mobile-frame] { padding-bottom:0; }\nhtml[data-mobile-native-insets] :is([data-mobile-search-dock],[data-mobile-dialog]) { padding-bottom:8px; }\nhtml[data-dsh-mobile] [data-mobile-toolbar] { height:64px; padding:8px 16px; }\nhtml[data-dsh-mobile] { --mobile-bar:64px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) { --mobile-bar:104px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) [data-mobile-toolbar] { height:64px; }\nhtml[data-dsh-mobile]:has([data-mobile-connection-status]) [data-mobile-connection-status] { top:64px; }\n[data-mobile-toolbar] button { display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; corner-shape:round; background:var(--mobile-face); box-shadow:var(--mobile-shadow); color:var(--dsw-alias-label-primary,#202226); }\n[data-mobile-nav-title] strong { font-weight:500; letter-spacing:0; }\n[data-mobile-library] h1 { font-size:26px; font-weight:500; letter-spacing:-.7px; }\n[data-mobile-grouping] { border-radius:19px; }\n[data-mobile-grouping] button { border-radius:16px; min-height:38px; }\n[data-mobile-library-header] { padding:16px 20px; }\n[data-mobile-recents] { padding:0 12px 12px; }\n[data-mobile-workspace-group] { padding:12px 10px; color:var(--dsw-alias-label-tertiary,#74767c)!important; }\n[data-mobile-workspace-group] strong { font-size:13px; font-weight:400; }\n[data-mobile-session-group] h2 { padding:0 10px; }\n[data-mobile-session] { border:0; border-radius:16px; padding:14px 12px; min-height:68px; }\n[data-mobile-session][aria-current=page] { background:var(--mobile-soft); }\n[data-mobile-session-copy] strong { font-size:15px; font-weight:400; }\n[data-mobile-session-copy] small:empty { display:none; }\n[data-mobile-search-dock] { padding:12px 14px max(8px,env(safe-area-inset-bottom)); gap:8px; }\n[data-mobile-search] { min-height:50px; background:var(--mobile-face); border:1px solid var(--mobile-line); box-shadow:var(--mobile-shadow); }\n[data-mobile-search]:focus-within { outline:none; }\n[data-mobile-search] input:focus, html[data-dsh-mobile] [data-composer-card] [contenteditable]:focus { outline:none!important; box-shadow:none!important; }\n[data-mobile-search] input::placeholder { color:var(--dsw-alias-label-secondary,#61666b); opacity:1; }\nhtml[data-dsh-mobile] [data-composer-placeholder] { color:var(--dsw-alias-label-secondary,#61666b); }\n[data-mobile-search] input, html[data-dsh-mobile] [data-composer-card] [contenteditable] { caret-color:var(--mobile-accent); }\nhtml[data-mobile-input=keyboard] [data-mobile-search]:focus-within, html[data-mobile-input=keyboard] [data-composer-card]:has([contenteditable]:focus) { outline:2px solid var(--mobile-accent); outline-offset:3px; }\n[data-mobile-scan], [data-mobile-search-cancel] { display:grid; place-items:center; min-width:50px; width:50px; height:50px; border:1px solid var(--mobile-line); background:var(--mobile-face); box-shadow:var(--mobile-shadow); border-radius:50%; corner-shape:round; color:var(--dsw-alias-label-primary,#202226)!important; }\nhtml[data-dsh-mobile] [data-composer-card] { border-radius:25px; border:1px solid var(--mobile-line); background:var(--mobile-face); box-shadow:var(--mobile-shadow); }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child { gap:4px; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div { gap:3px; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child button { min-height:40px; }\n/* rc1's two direct toolbar buttons precede the hidden attachment input.\n Scope narrowly so plugin buttons, permission menus and send retain their own states. */\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:first-child > button:has(~ input[type=file][hidden]) { width:40px; height:40px; min-width:40px; padding:0; background:transparent; border-radius:50%; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:first-child > button:has(~ input[type=file][hidden]):active:not(:disabled) { background:var(--dsw-alias-interactive-bg-active); }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] { max-width:min(43vw,210px); }\nhtml[data-dsh-mobile] [data-composer-seat] { padding-bottom:2px; }\n/* The compact stats row on both host lines: 0.1.5 mounts it as\n [data-composer-stats]; alpha.2 deleted that attribute and wraps the dock\n (stats pills + context meter) in a real flex row directly after the card.\n On 0.1.5 the sibling selector lands on the display:contents slot wrapper \u2014\n inert for padding/gap, same font-size by inheritance \u2014 so both rules stay. */\nhtml[data-dsh-mobile] [data-composer-stats], html[data-dsh-mobile] [data-composer-card] + div { padding:4px 12px 0; gap:10px; font-size:11px; }\nhtml[data-dsh-mobile] [data-composer-stats] button, html[data-dsh-mobile] [data-composer-card] + div button { min-height:32px; }\n/* Follow the real chain fallback -> stack -> HeroShell path, not display:contents wrappers. */\nhtml[data-dsh-mobile] [data-phase=hero] [data-composer-seat] { flex:1 0 auto; }\nhtml[data-dsh-mobile] [data-phase=hero] [data-chain-overlay-fallback=\"conversation.composer\"] > div:has([data-mobile-welcome]) { flex:1; align-self:stretch; padding-bottom:0; width:100%; }\nhtml[data-dsh-mobile] [data-phase=hero] [data-chain-overlay-fallback=\"conversation.composer\"] > div > div:has([data-mobile-welcome]) { flex:1; height:auto; min-height:160px; padding:24px 16px 40px; }\nhtml[data-dsh-mobile] [data-phase=hero] span:has(> [data-slot=\"conversation.hero.brand.mark\"]):has([data-mobile-welcome]) + span { display:none; }\n[data-mobile-welcome] { text-align:center; }\n[data-mobile-welcome] small { color:var(--mobile-accent); letter-spacing:3px; font-size:13px; }\n[data-mobile-welcome] h2 { font-size:25px; font-weight:500; line-height:1.4; margin:16px 0 9px; letter-spacing:-.6px; }\n[data-mobile-welcome] p { font-size:13px; line-height:1.6; margin:0; color:var(--dsw-alias-label-tertiary,#74767c); }\nhtml[data-dsh-mobile]:has([data-phase=hero]) [data-mobile-toolbar][data-library=false] [data-mobile-new=true] { visibility:hidden; }\nhtml[data-dsh-mobile] [data-phase=hero] div:has(> [data-slot=\"conversation.hero.workspace\"]) { gap:6px; padding:6px 18px; flex-wrap:wrap; }\nhtml[data-dsh-mobile] [data-phase=hero] div:has(> [data-slot=\"conversation.hero.workspace\"]) > button, html[data-dsh-mobile] [data-slot=\"conversation.hero.agentPreset\"] button[aria-haspopup] { border-radius:18px; min-height:40px; font-size:13px; background:var(--mobile-soft); }\n/* Quiet, read-only metadata below the mobile title. */\n[data-mobile-subtitle] { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:3px; font-size:11px; line-height:16px; color:var(--dsw-alias-label-secondary,#61666b); }\n[data-mobile-subtitle] > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n[data-mobile-subtitle] > span:last-child:not(:first-child) { flex-shrink:0; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\nhtml[data-dsh-mobile]:has([data-mobile-session-title]) [data-mobile-header-hidden], [data-mobile-hidden-tab] { display:none!important; }\n/* Fold only the identified official trigger buttons, not their menus or owners. */\n[data-mobile-folded-action] { display:none!important; }\n[data-mobile-tools-seat] { display:contents; }\nhtml[data-dsh-mobile] [data-mobile-tools-open] { display:grid; place-items:center; width:44px; height:44px; min-width:44px; padding:0; border:0; border-radius:50%; corner-shape:round; color:var(--dsw-alias-label-primary); background:var(--mobile-soft); }\n[data-mobile-tools-dialog] { box-sizing:border-box; margin:auto auto 0; width:min(100%,520px); max-width:100%; max-height:75dvh; overscroll-behavior:contain; overflow-y:auto; padding:16px 20px max(20px,env(safe-area-inset-bottom)); border:1px solid var(--mobile-line); border-bottom:0; border-radius:26px 26px 0 0; background:var(--mobile-face); color:var(--dsw-alias-label-primary); box-shadow:0 -8px 40px #0002; }\n[data-mobile-tools-dialog]::backdrop { background:#0005; }\n[data-mobile-tools-dialog] [data-mobile-tools-handle] { width:34px; height:4px; margin:0 auto 12px; touch-action:pan-x; border-radius:4px; background:var(--dsw-alias-label-tertiary); opacity:.5; }\n[data-mobile-tools-dialog] header { touch-action:pan-x; display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }\n[data-mobile-tools-dialog] strong { font-size:20px; font-weight:600; }\n[data-mobile-tools-dialog] button { font:inherit; color:inherit; cursor:pointer; border:0; background:transparent; -webkit-tap-highlight-color:transparent; }\n[data-mobile-tools-dialog] button:disabled { opacity:.45; cursor:default; }\n[data-mobile-tools-dialog] header button { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; padding:0; }\n[data-mobile-tools-grid] { display:grid; grid-template-columns:1fr 1fr; gap:12px; }\n[data-mobile-tools-grid] button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:96px; padding:16px; border-radius:18px; background:var(--mobile-soft); font-size:14px; }\n[data-mobile-tools-permission] { display:flex; align-items:center; width:100%; gap:10px; margin-top:12px; border-top:1px solid var(--mobile-line)!important; min-height:64px; padding:12px 0; text-align:left; font-size:14px!important; }\n[data-mobile-tools-permission] > span { flex-shrink:0; }\n[data-mobile-tools-permission] > small { margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--dsw-alias-label-secondary); }\n[data-mobile-tools-dialog] svg { flex:none; }\nhtml[data-mobile-input=pointer] [data-mobile-tools-dialog] button:focus { outline:none; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child > button:has(>svg):not([aria-haspopup]) { width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; corner-shape:round; transform:none; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child > button:has(>svg):not([aria-haspopup]) > svg { width:20px; height:20px; flex:none; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] { max-width:min(56vw,260px); }\n/* Keep the send row on one line; 0.1.5 also seats the host context meter in it\n (alpha.2 moved the meter into the dock row below the card). */\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child, html[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child { flex-wrap:nowrap; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] { min-width:0; max-width:min(43vw,210px); flex:1 1 auto; }\n/* rc1's model slot uses display:contents. Size its root and restore the label\n after folding the other input controls; unknown renderers keep their markup. */\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] > div { min-width:0; max-width:min(43vw,210px); }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] > div > button[aria-haspopup=\"menu\"]:has(> svg:first-child + span) { max-width:100%; height:44px; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] > div > button[aria-haspopup=\"menu\"] > svg:first-child:has(+ span) { display:none; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] > div > button[aria-haspopup=\"menu\"] > svg:first-child + span { display:block; }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child > span:has(> button[aria-haspopup=\"dialog\"] > svg > circle) { position:static; flex:0 0 auto; }\n/* Translucency belongs to surfaces. Foreground colors remain fully opaque. */\nhtml[data-dsh-mobile] body { --mobile-shadow:0 6px 22px color-mix(in srgb,var(--dsw-alias-label-primary) 9%,transparent); --mobile-glass:color-mix(in srgb,var(--mobile-face) 86%,transparent); --mobile-edge:color-mix(in srgb,var(--dsw-alias-label-primary) 14%,transparent); }\nhtml[data-dsh-mobile] :is([data-mobile-toolbar] button,[data-mobile-scan],[data-mobile-search-cancel],[data-mobile-search],[data-mobile-tools-open],[data-composer-card]) {\n background:var(--mobile-glass); border:1px solid var(--mobile-edge); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--dsw-alias-label-primary) 5%,transparent),var(--mobile-shadow);\n -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25);\n}\nhtml[data-dsh-mobile] :is([data-mobile-toolbar] button,[data-mobile-scan],[data-mobile-tools-open]):active { background:var(--mobile-soft); transform:scale(.97); }\nhtml[data-dsh-mobile] [data-mobile-icon] { flex-shrink:0; aspect-ratio:1; }\n@media (prefers-reduced-transparency: reduce) { html[data-dsh-mobile] body { --mobile-glass:var(--mobile-face); } }\n@supports not (backdrop-filter:blur(1px)) { html[data-dsh-mobile] body { --mobile-glass:var(--mobile-face); } }\nhtml[data-dsh-mobile] [data-composer-card] > div:last-child > div:last-child { flex:1 1 0; justify-content:flex-end; }\nhtml[data-dsh-mobile] [data-composer-seat] div:has(> textarea):has(> div > button[aria-label]) { border-radius:25px; background:var(--mobile-glass); border:1px solid var(--mobile-edge); box-shadow:var(--mobile-shadow); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }\nhtml[data-dsh-mobile] [data-composer-seat] textarea { font-size:16px; max-height:26dvh; }\nhtml[data-dsh-mobile] [data-composer-seat] div:has(> textarea) > div > button[aria-label] { width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; }\nhtml[data-dsh-mobile] [data-composer-seat]:has([data-mobile-room-queue]) [data-testid=\"room-queue-strip\"] { display:none; }\n[data-mobile-room-queue] { padding:4px 16px; }\n[data-mobile-queue-pill] { border:1px solid var(--mobile-edge); background:var(--mobile-glass); border-radius:20px; padding:8px 14px; min-height:36px; color:var(--dsw-alias-label-primary); }\n[data-mobile-queue-row] { padding:8px 0; border-bottom:1px solid var(--mobile-line); }\n[data-mobile-queue-row] p { overflow-wrap:anywhere; white-space:pre-wrap; font-size:14px; }\n[data-mobile-queue-row] button { min-height:44px; padding:8px 12px; }\n[data-mobile-queue-row] textarea { width:100%; background:var(--mobile-soft); color:var(--dsw-alias-label-primary); border:1px solid var(--mobile-line); border-radius:12px; padding:8px; }\n/* Mobile action surfaces retain each plugin's controls and callback semantics. */\n[data-mobile-message-menu] { position:fixed; margin:0; width:240px; max-width:calc(100vw - 24px); padding:8px; border-radius:22px; border:1px solid var(--mobile-edge); background:var(--mobile-glass); color:var(--dsw-alias-label-primary); box-shadow:var(--mobile-shadow); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }\n[data-mobile-message-menu]::backdrop { background:#0002; }\n[data-mobile-message-menu] button { display:flex; gap:14px; align-items:center; width:100%; min-height:48px; padding:8px 14px; border:0; border-radius:14px; background:none; color:inherit; font:inherit; text-align:left; }\n[data-mobile-message-menu] button:active { background:var(--mobile-soft); }\n[data-mobile-message-menu] svg { width:20px; height:20px; flex:none; }\n[data-mobile-message-menu] button:disabled { opacity:.45; }\n[data-mobile-toolbar]:has([data-mobile-members-open]) > [data-mobile-new] { display:none; }\n[data-mobile-members-open] { position:relative; }\n[data-mobile-members-open] small { position:absolute; bottom:-3px; right:-2px; min-width:16px; border-radius:10px; font-size:10px; background:var(--mobile-soft); color:var(--dsw-alias-label-primary); }\n[data-mobile-room-dialog] { text-align:left; line-height:1.5; }\n[data-mobile-room-dialog] header button { background:var(--mobile-soft); }\n[data-mobile-room-dialog] label { display:block; font-size:13px; margin:16px 0; }\n[data-mobile-room-dialog] :is(input,textarea,select) { display:block; width:100%; box-sizing:border-box; border:1px solid var(--mobile-line); border-radius:14px; padding:12px; margin-top:6px; font:inherit; font-size:16px; background:var(--mobile-soft); color:var(--dsw-alias-label-primary); }\n[data-mobile-room-dialog] [role=alert] { color:var(--dsw-alias-state-danger-primary,#b73535); font-size:13px; }\n[data-mobile-room-hint], [data-mobile-room-dialog] details { font-size:12px; color:var(--dsw-alias-label-secondary); }\n[data-mobile-room-dialog] details { overflow-wrap:anywhere; }\n[data-mobile-member-row] { display:flex; align-items:center; gap:8px; padding:6px 0; }\n[data-mobile-member-chat] { display:flex!important; align-items:center; flex:1; min-width:0; gap:12px; text-align:left; padding:8px 0; }\n[data-mobile-member-chat]:disabled { opacity:1!important; }\n[data-mobile-member-chat] > span:last-child { min-width:0; }\n[data-mobile-member-chat] strong, [data-mobile-member-chat] small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n[data-mobile-member-chat] small { font-size:12px; color:var(--dsw-alias-label-secondary); }\n[data-mobile-avatar] { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:15px; background:var(--mobile-soft); }\n[data-mobile-room-dialog] [data-mobile-room-primary] { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:46px; margin:18px 0 8px; border-radius:16px; background:var(--mobile-accent); color:var(--dsw-alias-bg-base); }\n[data-mobile-room-dialog] :is([data-mobile-room-back],[data-mobile-room-secondary] button,[data-mobile-confirm] button) { min-height:44px; padding:8px 16px; }\n[data-mobile-room-secondary] { display:flex; justify-content:space-between; }\nhtml[data-dsh-mobile] [data-queue-dock] { max-width:100%; }\nhtml[data-dsh-mobile] [data-queue-dock] button { min-height:40px; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.dock\"] section:has(> button[aria-expanded]) > button { min-height:36px; border-radius:20px; }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.dock\"] section > ul[aria-label] { position:fixed; inset:auto 12px max(12px,env(safe-area-inset-bottom)); min-width:0; max-width:none; max-height:62dvh; border-radius:24px; padding:12px; z-index:1200; box-shadow:var(--mobile-shadow); }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.dock\"] section > ul[aria-label] button { min-height:44px; }\n@media (prefers-reduced-motion: reduce) { [data-mobile-frame] * { scroll-behavior:auto !important; } }\n\n/* One mobile reading scale; derived from host text size without writing its preference. */\nhtml[data-dsh-mobile] body { --mobile-text:max(17px,var(--dsh-content-font-size,14px)); --mobile-caption:max(14px,var(--dsh-content-font-size-secondary,13px)); }\nhtml[data-dsh-mobile] :is([data-mobile-library],[data-mobile-dialog],[data-mobile-tools-dialog],[data-mobile-message-menu]) { font-size:var(--mobile-text); line-height:1.55; }\nhtml[data-dsh-mobile] :is([data-mobile-nav-title] strong,[data-mobile-session-copy] strong,[data-mobile-search] input,[data-composer-card] [contenteditable],[data-composer-seat] textarea,[data-mobile-member-chat] strong) { font-size:var(--mobile-text); line-height:1.55; }\nhtml[data-dsh-mobile] :is([data-mobile-workspace-group] strong,[data-mobile-tools-grid] button,[data-mobile-tools-permission],[data-mobile-dialog] h3,[data-mobile-grouping] button) { font-size:16px!important; }\nhtml[data-dsh-mobile] :is([data-mobile-subtitle],[data-mobile-nav-title] small,[data-mobile-session-copy] small,[data-mobile-session] time,[data-mobile-workspace-group] small,[data-mobile-session-group] h2,[data-mobile-activity],[data-mobile-room-hint],[data-mobile-member-chat] small,[data-mobile-tools-permission] small,[data-mobile-dialog] p) { font-size:var(--mobile-caption); line-height:1.5; color:var(--dsw-alias-label-secondary); }\nhtml[data-dsh-mobile] [data-slot=\"conversation.input.model\"] button { font-size:15px; }\nhtml[data-dsh-mobile] [data-conversation-scroll] {\n --dsh-content-font-size:var(--mobile-text); --dsh-content-font-size-secondary:var(--mobile-caption);\n --dsw-font-markdown-base:var(--mobile-text)/1.65 var(--dsw-font-family);\n --dsw-font-markdown-base-font-size:var(--mobile-text); --dsw-font-markdown-base-line-height:1.65;\n --dsw-font-markdown-base-strong:600 var(--mobile-text)/1.65 var(--dsw-font-family);\n --dsw-font-markdown-base-strong-font-size:var(--mobile-text);\n --dsw-font-markdown-base-italic:italic var(--mobile-text)/1.65 var(--dsw-font-family);\n --dsw-font-markdown-base-italic-font-size:var(--mobile-text);\n}\n/* All Room invite/edit entry points retain the same React form and callbacks. */\nhtml[data-dsh-mobile] [data-mobile-header-hidden]:has([data-mobile-room-form]) { display:contents!important; }\nhtml[data-dsh-mobile] [data-mobile-room-overlay] { position:fixed; inset:0; height:var(--mobile-height,100dvh); z-index:1400; align-items:flex-end; justify-content:center; padding:8px; box-sizing:border-box; background:#0005; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }\nhtml[data-dsh-mobile] [data-mobile-room-form] { box-sizing:border-box; width:100%; max-width:560px; max-height:calc(var(--mobile-height,100dvh) - 24px); margin:0; gap:16px; padding:20px 20px max(16px,env(safe-area-inset-bottom)); border-radius:28px; border:1px solid var(--mobile-edge); background:var(--mobile-face); color:var(--dsw-alias-label-primary); box-shadow:var(--mobile-shadow); text-align:left; overflow-y:auto; font-size:var(--mobile-text); }\nhtml[data-dsh-mobile] [data-mobile-room-form]::before { content:''; display:block; flex:none; width:36px; height:4px; border-radius:4px; background:var(--dsw-alias-label-secondary); opacity:.35; align-self:center; margin:-10px 0 0; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div:first-child { font-size:21px; line-height:1.4; font-weight:600; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div:has(> div > label) { flex-direction:column; gap:16px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div > div:has(>label) { gap:18px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div > div:has(>[data-member]) { order:-1; width:auto; }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div > div:has(>[data-member]) > span { display:none; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [data-member] { border:0; background:var(--mobile-soft); border-radius:18px; padding:14px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [data-member] p { font-size:14px; margin:6px 0 0; }\nhtml[data-dsh-mobile] [data-mobile-room-form] label { gap:7px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] label > span:first-child { font-size:15px; line-height:1.5; font-weight:500; color:var(--dsw-alias-label-primary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] label > span:last-child:not(:first-child), html[data-dsh-mobile] [data-mobile-room-form] [role=status] { font-size:14px; line-height:1.5; color:var(--dsw-alias-label-secondary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] :is(input,textarea,select) { box-sizing:border-box; min-width:0; min-height:48px; border-radius:14px; padding:11px 12px; font-size:17px; line-height:1.5; background:var(--mobile-soft); border:1px solid var(--mobile-edge); color:var(--dsw-alias-label-primary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] textarea { min-height:94px; resize:vertical; }\nhtml[data-dsh-mobile] [data-mobile-room-form] button { min-height:44px; min-width:44px; font-size:16px; border-radius:14px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] summary { min-height:44px; padding:10px 0; font-size:16px; color:var(--dsw-alias-label-primary); }\n/* Harness model controls are expandable summaries, not native selects. Keep the\n advanced-settings disclosure plain while aligning picker faces with form fields. */\nhtml[data-dsh-mobile] [data-mobile-room-form] details > summary[aria-expanded] { display:flex; align-items:center; box-sizing:border-box; width:100%; max-width:none; min-width:0; min-height:48px; gap:12px; padding:11px 12px; border:1px solid var(--mobile-edge); border-radius:14px; background:var(--mobile-soft); font-size:17px; line-height:1.5; color:var(--dsw-alias-label-primary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] details > summary[aria-expanded] > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\nhtml[data-dsh-mobile] [data-mobile-room-form] details > summary[aria-expanded]::after { flex-shrink:0; margin-inline-start:auto; margin-inline-end:2px; }\n\nhtml[data-dsh-mobile] [data-mobile-room-form] > div:last-child { position:sticky; bottom:-16px; background:var(--mobile-face); padding:12px 0 0; margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [role=alert] { font-size:15px; line-height:1.5; }\nhtml[data-dsh-mobile] [data-member] { font-size:16px; }\nhtml[data-dsh-mobile] [data-member] button { min-height:44px; font-size:15px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [data-member] > div:first-child > span:nth-child(2) > span:first-child { font-size:16px; }\nhtml[data-dsh-mobile] [data-mobile-room-form] [data-member] p { color:var(--dsw-alias-label-secondary); }\nhtml[data-dsh-mobile] [data-mobile-room-form] > div:last-child button:disabled { opacity:1; color:var(--dsw-alias-label-secondary); background:var(--mobile-soft); border:1px solid var(--mobile-edge); cursor:default; }\nhtml[data-dsh-mobile] [data-mobile-queue-row] p { font-size:var(--mobile-text); }\nhtml[data-dsh-mobile] [data-mobile-members-open] small { font-size:12px; min-width:18px; }\n\n/* One viewport: the transcript alone scrolls; the official seat keeps its identity. */\nhtml[data-dsh-mobile], html[data-dsh-mobile] body, html[data-dsh-mobile] #root { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }\nhtml[data-dsh-mobile] [data-mobile-frame] { position:fixed; inset:var(--mobile-top,0px) 0 auto; overflow:hidden; }\nhtml[data-dsh-mobile] [data-mobile-frame] > div:has(> [data-slot=\"main\"]) { position:relative; min-height:0; height:100%; overflow:hidden; }\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] > [data-phase] { min-height:0; overflow:hidden; --dsh-chat-content-width:calc(var(--dsh-conversation-column-width,100vw) - 48px); }\nhtml[data-dsh-mobile] [data-phase=active] [data-conversation-scroll] { box-sizing:border-box; padding-bottom:var(--mobile-composer-height,180px); scroll-padding-bottom:12px; }\nhtml[data-dsh-mobile] [data-phase=active] [data-composer-seat] { position:absolute; bottom:0; left:0; right:0; width:auto; padding-top:8px; padding-bottom:4px; background:var(--dsw-alias-bg-base); }\nhtml[data-dsh-mobile] [data-phase=active] [data-conversation-scroll] > div:has(> [data-slot=\"conversation.session\"]) { flex:1 0 auto; }\nhtml[data-dsh-mobile] [data-phase=hero] [data-conversation-scroll] { overscroll-behavior:contain; }\nhtml[data-dsh-mobile] [data-mobile-frame] { --mobile-pane-width:min(84vw,380px); }\n[data-mobile-library-pane] { position:absolute; inset:0 auto 0 0; width:var(--mobile-pane-width,min(84vw,380px)); background:var(--dsw-alias-bg-base); pointer-events:auto; }\n[data-mobile-library-pane][hidden] { display:none; }\nhtml[data-dsh-mobile] [data-mobile-frame][data-sidebar-collapsed]:has([data-mobile-library-pane]) > div:has(> [data-slot=\"sidebar\"]) { display:none; }\n[data-mobile-library-pane] [data-mobile-library] { inset:var(--mobile-bar,64px) 0 0; }\nhtml[data-mobile-library-open] [data-mobile-connection-status] { right:calc(100% - var(--mobile-pane-width) + 12px); }\n[data-mobile-library-toolbar] { height:64px; padding:8px 16px; display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; }\n[data-mobile-library-toolbar] button { display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid var(--mobile-edge); background:var(--mobile-glass); color:var(--dsw-alias-label-primary); box-shadow:var(--mobile-shadow); }\n[data-mobile-library-pane] [data-mobile-library-header] { padding:12px 16px; gap:8px; }\n[data-mobile-library-pane] [data-mobile-library-header] h1 { font-size:26px; }\n[data-mobile-library-pane] [data-mobile-recents] { padding:0 12px 12px; }\n[data-mobile-library-pane] [data-mobile-session] { padding:12px; }\n[data-mobile-library-pane] [data-mobile-session] time { display:none; }\nhtml[data-mobile-library-open] [data-mobile-frame] > div:has(> [data-slot=\"main\"]) { transform:translate3d(var(--mobile-pane-width),0,0); border-left:1px solid var(--mobile-edge); border-radius:0 0 0 28px; }\nhtml[data-mobile-library-open] [data-mobile-toolbar] { transform:translate3d(var(--mobile-pane-width),0,0); width:100%; border-left:1px solid var(--mobile-edge); border-radius:28px 0 0 0; }\n[data-mobile-peek-close] { position:absolute; inset:0 0 0 var(--mobile-pane-width); pointer-events:auto; background:transparent; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; z-index:30; }\n@media(max-width:959px) and (prefers-reduced-motion:no-preference) {\n html[data-dsh-mobile]:not([data-mobile-gesture]) [data-mobile-frame] > div:has(> [data-slot=\"main\"]),\n html[data-dsh-mobile]:not([data-mobile-gesture]) [data-mobile-toolbar] { transition:transform 220ms cubic-bezier(.2,.8,.2,1),border-radius 220ms ease; }\n}\n[data-mobile-title-line] { display:flex; align-items:center; justify-content:center; min-width:0; }\n[data-mobile-title-line] strong { flex:0 1 auto; }\nhtml[data-dsh-mobile] [data-mobile-rename] { display:grid; place-items:center; flex:none; width:28px; min-width:28px; height:32px; min-height:32px; padding:4px; background:none; box-shadow:none; border:0; backdrop-filter:none; }\n[data-mobile-original-rename] { display:none!important; }\n@media(min-width:960px) {\n html[data-dsh-mobile] [data-mobile-frame] { --mobile-pane-width:320px; padding-left:320px; }\n html[data-dsh-mobile] [data-mobile-library-pane][hidden] { display:block; }\n html[data-dsh-mobile] [data-mobile-toolbar] { left:320px; transform:none; width:auto; right:0; border-radius:0; }\n html[data-dsh-mobile] [data-mobile-frame] > div:has(> [data-slot=\"main\"]) { left:0; transform:none; border-left:1px solid var(--mobile-edge); border-radius:0; }\n html[data-dsh-mobile] [data-mobile-peek-close] { display:none; }\n}\n\n[data-mobile-picker-shade] { position:fixed; inset:0; z-index:1099; background:#0005; backdrop-filter:blur(3px); }\nhtml[data-dsh-mobile] [data-mobile-picker] { position:fixed!important; inset:auto 0 0!important; width:min(100%,560px)!important; margin:0 auto; max-width:100%; max-height:75dvh!important; min-width:0!important; box-sizing:border-box; z-index:1100; border-radius:26px 26px 0 0; padding:16px 16px max(20px,env(safe-area-inset-bottom)); background:var(--mobile-face); color:var(--dsw-alias-label-primary); border:1px solid var(--mobile-edge); box-shadow:0 -8px 40px #0002; overflow:auto; }\n[data-mobile-picker-chrome] { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:4px 8px 16px; }\n[data-mobile-picker-chrome] strong { font-size:20px; font-weight:600; }\n[data-mobile-picker-chrome] button { border:0; background:none; color:var(--mobile-accent); min-height:44px; font:inherit; font-size:16px; }\n[data-mobile-picker-chrome] input { width:100%; min-height:46px; box-sizing:border-box; border:1px solid var(--mobile-edge); border-radius:16px; padding:10px 14px; font:inherit; font-size:17px; background:var(--mobile-soft); color:inherit; }\nhtml[data-dsh-mobile] [data-mobile-picker] > [role=presentation] { max-height:none; overflow:visible; }\nhtml[data-dsh-mobile] [data-mobile-picker] [role=menuitem] { min-height:52px; padding:12px; border-radius:14px; font-size:17px; }\nhtml[data-dsh-mobile] [data-mobile-picker] [role=menuitem][hidden] { display:none; }\n/* Keep the workspace list inside its flex viewport: visible overflow used to\n * paint the last folder over the pinned add-action divider on short screens. */\nhtml[data-dsh-mobile] [data-mobile-picker=workspace] { overflow:hidden; }\nhtml[data-dsh-mobile] [data-mobile-picker=workspace] > [data-mobile-picker-chrome] { flex:none; }\nhtml[data-dsh-mobile] [data-mobile-picker=workspace] > [role=presentation]:nth-child(2) { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }\nhtml[data-dsh-mobile] [data-mobile-picker=workspace] > [role=presentation] > * { flex:none; }\nhtml[data-dsh-mobile] [data-mobile-picker=workspace] > [role=presentation]:nth-child(3):last-child { flex:none; margin-top:8px; padding-top:8px; border-top:1px solid var(--mobile-edge); }\nhtml[data-dsh-mobile] [data-mobile-picker=workspace] [role=menuitem] { box-sizing:border-box; min-height:52px; padding:12px; line-height:28px; }\n\nhtml[data-dsh-mobile] [data-mobile-picker=preset] [role=menuitem] span > span:last-child { font-size:14px; line-height:1.55; color:var(--dsw-alias-label-secondary); }\n\nhtml[data-mobile-gesture] [data-mobile-library-pane][hidden] { display:block; }\nhtml[data-mobile-gesture] [data-mobile-frame] > div:has(> [data-slot=\"main\"]), html[data-mobile-gesture] [data-mobile-toolbar] { transform:translate3d(var(--mobile-drag-offset),0,0)!important; width:100%; }\nhtml[data-dsh-mobile] [data-slot=\"main.conversation\"] > [data-phase] header:has([data-conversation-header-corner]) { min-height:0; padding:6px 16px 0; }\nhtml[data-dsh-mobile] [data-mobile-toolbar] [data-mobile-rename] { background:transparent; border:0; border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--dsw-alias-label-secondary); }\nhtml[data-dsh-mobile] [data-mobile-picker=preset] [role=menuitem] > span span:first-child { font-size:17px; font-weight:500; line-height:1.5; }\n\n/* Rename lives above the page, with a keyboard-aware viewport of its own. */\nhtml[data-dsh-mobile] [data-mobile-rename-dialog] { position:fixed; inset:calc(var(--mobile-top,0px) + var(--mobile-height,100dvh) / 2) 0 auto; transform:translateY(-50%); margin:0 auto; max-height:calc(var(--mobile-height,100dvh) - 32px); width:min(360px,calc(100vw - 40px)); padding:24px; border-radius:26px; background:var(--mobile-face); border-color:var(--mobile-edge); }\n[data-mobile-rename-dialog] h2 { font-size:20px; margin:0 0 20px; }\n[data-mobile-rename-dialog] label { font-size:14px; color:var(--dsw-alias-label-secondary); }\n[data-mobile-rename-dialog] input { background:var(--mobile-soft); color:var(--dsw-alias-label-primary); border-color:var(--mobile-edge); font-size:17px; margin-top:8px; }\nhtml[data-dsh-mobile] [data-mobile-rename-dialog] input:focus { outline:none; box-shadow:0 0 0 2px color-mix(in srgb,var(--mobile-accent) 24%,transparent); border-color:var(--mobile-accent); }\n[data-mobile-rename-dialog] footer { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }\n[data-mobile-rename-dialog] [data-mobile-primary] { background:var(--mobile-accent); color:white; border-radius:22px; padding-inline:22px; }\nhtml[data-dsh-mobile] [data-mobile-picker=preset] [role=menuitem] { border-radius:0; }\nhtml[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] { border-top:1px solid var(--mobile-edge); margin-top:8px; padding-top:20px; }\n\n[data-mobile-directory] { width:min(100%,520px); height:min(78dvh,720px); max-height:calc(var(--mobile-height,100dvh) - 24px); margin:auto auto 0; padding:20px 22px max(16px,env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; color:var(--dsw-alias-label-primary); background:var(--mobile-face,var(--dsw-alias-bg-base)); }\n[data-mobile-directory][open] { display:flex; flex-direction:column; }\n[data-mobile-directory] header { display:flex; justify-content:space-between; align-items:center; flex:none; }\n[data-mobile-directory] header h2 { margin:0; font-size:21px; }\n[data-mobile-directory] button { font:inherit; color:inherit; cursor:pointer; background:transparent; border:0; }\n[data-mobile-directory] header button { display:grid; place-items:center; width:44px; height:44px; }\n[data-directory-tabs] { display:flex; gap:4px; padding:4px; margin:12px 0; border-radius:16px; background:var(--mobile-soft); flex:none; }\n[data-directory-tabs] button { flex:1; min-height:42px; border-radius:12px; }\n[data-directory-tabs] button[aria-pressed=true] { background:var(--mobile-face); color:var(--mobile-accent); box-shadow:0 1px 5px #0001; }\n[data-directory-scroll] { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; }\n[data-mobile-directory] [data-directory-row] { display:flex; gap:12px; align-items:center; width:100%; min-height:56px; padding:12px 2px; text-align:left; border-radius:0; border-bottom:1px solid var(--mobile-line); }\n[data-directory-row] > span { flex:1; min-width:0; overflow-wrap:anywhere; }\n[data-directory-row] strong { display:block; font-weight:500; }\n[data-directory-row] small { display:block; color:var(--dsw-alias-label-secondary); font-size:13px; margin-top:4px; }\n[data-directory-row] svg { flex:none; }\n[data-directory-current] { display:flex; align-items:center; gap:10px; font-size:14px; padding:8px 0; overflow-wrap:anywhere; }\n[data-directory-current] svg { flex:none; }\n[data-directory-manual] summary { cursor:pointer; padding:8px 0; font-size:14px; color:var(--mobile-accent); }\n[data-directory-path] { display:flex; align-items:center; gap:8px; }\n[data-directory-path] input { min-width:0; flex:1; }\n[data-mobile-directory] input { color:inherit; background:var(--mobile-soft); border-color:var(--mobile-line); margin:8px 0; }\n[data-directory-location] { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0; font-size:14px; }\n[data-directory-location] button,[data-directory-location] label { display:flex; align-items:center; gap:6px; min-height:40px; }\n[data-directory-location] input { width:18px; }\n[data-mobile-directory] footer { flex:none; padding-top:10px; }\n[data-mobile-directory] [data-mobile-done] { margin-top:0; background:var(--mobile-accent); color:white; min-height:48px; }\n";
|
|
4
4
|
//# sourceMappingURL=styles.d.ts.map
|