/** Viewport breakpoints (px) for the CRM desk workspace. */
export declare const LAYOUT_BREAKPOINTS: {
    /** Phone/tablet boundary (see LAYOUT_MEDIA for the full phone rule). */
    readonly tablet: 768;
    /** From this width the desktop desk layout applies; below it the desk uses the tablet or phone layout. */
    readonly minWorkspace: 1024;
    /** From this width the folder panel stays inline; below it, it overlays the list. */
    readonly folderInline: 1600;
    /** From this width a bot thread's "Phiên hỗ trợ" panel is always on screen; below it, a drawer. */
    readonly supportPanelInline: 1280;
    /** From this width the info panel sits inline; below it, it is an overlay drawer. */
    readonly infoInline: 1600;
    /** From this width the "new message" button shows its label; below it, an icon with a tooltip. */
    readonly composeLabel: 1440;
};
/** Panel widths (px) of the desk workspace. */
export declare const LAYOUT_WIDTHS: {
    readonly folder: 220;
    readonly folderCollapsed: 48;
    readonly list: 320;
    readonly listCompact: 300;
    readonly infoInline: 330;
    readonly infoDrawer: 360;
    readonly chatMin: 480;
};
/** Media queries behind the viewport tiers; keep in sync with the phone/touch variants in apps/web/tailwind.config.js. */
export declare const LAYOUT_MEDIA: {
    readonly phone: `not all and (min-width: 768px), (pointer: coarse) and (max-height: 499px) and (max-width: ${number}px)`;
    readonly belowDesktop: "not all and (min-width: 1024px)";
    readonly touch: `(hover: none) and (pointer: coarse) and (max-width: ${number}px)`;
    readonly touchAnyWidth: "(hover: none) and (pointer: coarse)";
};
//# sourceMappingURL=layout.d.ts.map