/* generated from src/styles/app.css by src/lib/build/preboot-critical-css.ts — do not edit */
:root{color-scheme: light;--c-bg: #f7f8fa;--c-surface: #ffffff;--c-text: #1c2733;--c-skeleton: #e9ecf0;--c-skeleton-sheen: rgb(255 255 255 / 65%);--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2.5rem;--space-gutter: var(--space-4);--radius-xs: 0.375rem;--radius-sm: 0.625rem;--radius-pill: 999px;--weight-regular: 400;--leading-normal: 1.5;--skeleton-h-line: 0.75rem;--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);--motion-loop: 1300ms}
:root[data-theme='dark']{color-scheme: dark;--c-bg: #111113;--c-surface: #1c1c1e;--c-text: #e6e6e6;--c-skeleton: #2a2a2d;--c-skeleton-sheen: rgb(255 255 255 / 8%)}
@media (prefers-color-scheme: dark){
:root:not([data-theme='light']){color-scheme: dark;--c-bg: #111113;--c-surface: #1c1c1e;--c-text: #e6e6e6;--c-skeleton: #2a2a2d;--c-skeleton-sheen: rgb(255 255 255 / 8%)}
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{animation-duration: 0.01ms !important;animation-delay: 0ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;transition-delay: 0ms !important;scroll-behavior: auto !important}
}
*{box-sizing: border-box}
html, body{margin: 0;padding: 0;height: 100%;-webkit-text-size-adjust: 100%;text-size-adjust: 100%;touch-action: manipulation}
body{background: var(--c-bg);color: var(--c-text);font-family: system-ui, -apple-system, 'PingFang SC', 'Noto Sans CJK SC', sans-serif;font-size: 16px;line-height: var(--leading-normal);font-weight: var(--weight-regular);-webkit-font-smoothing: antialiased;overscroll-behavior: none}
#root{height: 100%}
.u-visually-hidden{position: absolute;width: 1px;height: 1px;padding: 0;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0}
.skeleton{position: relative;overflow: hidden;background: var(--c-skeleton);border-radius: var(--radius-sm);color: transparent;user-select: none}
.skeleton::after{content: '';position: absolute;inset: 0;transform: translateX(-100%);background: linear-gradient( 90deg, transparent 0%, var(--c-skeleton-sheen) 50%, transparent 100% );animation: skeleton-sweep var(--motion-loop) var(--ease-standard) infinite}
@keyframes skeleton-sweep{to { transform: translateX(100%); }}
.skeleton-line{height: var(--skeleton-h-line);border-radius: var(--radius-pill)}
.app-shell{position: fixed;top: 0;left: 0;right: 0;height: 100vh;height: 100dvh;display: flex;flex-direction: column;overflow: hidden;background: var(--c-bg)}
.page{flex: 1 0 auto;width: 100%;max-width: 52rem;margin: 0 auto;padding: var(--space-5) var(--space-gutter) var(--space-8);padding-left: calc(var(--space-gutter) + env(safe-area-inset-left));padding-right: calc(var(--space-gutter) + env(safe-area-inset-right))}
.chat-list-page, .room-page, .contacts-page, .settings-page{--conv-avatar-size: 3.5rem;--conv-avatar-radius: var(--radius-xs);--conv-row-pad-y: 0.5625rem;--conv-row-gap: 0.75rem;--conv-bottom-gap: 0.1875rem}
.chat-list-page{padding: 0 0 var(--space-6);background: var(--c-surface)}
.conv-list{margin: 0;padding: 0;list-style: none}
.conv-main{flex: 1;min-width: 0;display: flex;flex-direction: column;gap: var(--conv-bottom-gap)}
.conv-skeleton-avatar{flex: none;width: var(--conv-avatar-size);height: var(--conv-avatar-size);border-radius: var(--conv-avatar-radius)}
.conv-item-skeleton{display: flex;align-items: center;gap: var(--conv-row-gap);padding: var(--conv-row-pad-y) var(--space-4)}
.conv-skeleton-name{width: 45%}
.conv-skeleton-preview{width: 70%}
.app-shell{--rd-row-h: 4.25rem;--rd-avatar: 2.875rem;--rd-avatar-radius: 0.5rem}
.app-shell .chat-list-page .conv-avatar-wrap, .app-shell .chat-list-page .conv-skeleton-avatar{width: var(--rd-avatar);height: var(--rd-avatar)}
.app-shell .chat-list-page .conv-avatar, .app-shell .chat-list-page .conv-avatar-img, .app-shell .chat-list-page .conv-skeleton-avatar{border-radius: var(--rd-avatar-radius)}
.app-shell .chat-list-page .conv-item-skeleton{min-height: var(--rd-row-h);padding-top: 0;padding-bottom: 0}
.skeleton{background: var(--c-skeleton)}
.skeleton-line, .skeleton-title, .skeleton-control, .skeleton-field, .skeleton-thumb{border-radius: var(--radius-xs)}
.skeleton::after{content: none;animation: none}