.app-shell { min-height: 0; height: 100vh; height: 100dvh; }
.workspace { display: block; position: relative; }
.details { display: none; }
.conversations { position: absolute; inset: 0; z-index: 2; border: 0; padding-top: env(safe-area-inset-top); padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
.main-panel { position: absolute; inset: 0; z-index: 3; display: none; }
.workspace.mobile-chat-open .conversations { display: none; }
.workspace.mobile-chat-open .main-panel { display: flex; }
.workspace.mobile-chat-open .mobile-tabs { display: none; }
.workspace.other-view .main-panel { display: flex; }
.chat-header { height: calc(68px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; gap: 7px; }
.chat-header > .avatar { width: 34px; height: 34px; }
.chat-header .icon-btn { width: 34px; min-width: 34px; height: 44px; }
.chat-header .header-actions { gap: 0; }
.chat-title { font-size: 15px; }
.chat-subtitle { font-size: 11px; }
.mobile-back { display: inline-grid; }
.message-scroller { padding: 18px 14px 12px; }
.composer-wrap { padding: 9px 11px calc(9px + env(safe-area-inset-bottom)); }
.message-row { max-width: 91%; }
.message-actions { display: flex; opacity: .55; }
.message-actions .icon-btn { min-width: 32px; height: 44px; }
.message-row { gap: 7px; }
.message-row > .avatar { width: 30px; height: 30px; font-size: 11px; }
.message-meta, .message-caption { font-size: 11px; }
.bubble { padding: 10px 12px; font-size: 14px; }
.bubble-image { max-width: min(240px, 100%); }
.composer-tools .icon-btn { width: 44px; height: 44px; }
.composer-tools { margin-bottom: 4px; }
.composer textarea { font-size: 16px; }
.mobile-tabs { position: fixed; z-index: 5; display: flex; bottom: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-bottom)); background: #f8faf8; border-top: 1px solid var(--line); justify-content: space-around; padding: 0 0 env(safe-area-inset-bottom); }
.mobile-tab { gap: 4px; font-size: 11px; max-width: none; }
.mobile-tab.active { color: var(--mint-deep); }
.mobile-tab .icon { width: 19px; height: 19px; }
.login-screen { padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; max-height: 100dvh; align-items: start; }
.login-layout { grid-template-columns: 1fr; border-radius: 8px; max-width: 490px; }
.login-intro { padding: 29px 25px 25px; }
.login-tagline { font-size: 25px; margin: 30px 0 12px; }
.login-copy { font-size: 12px; }
.login-form { padding: 31px 25px 35px; }
.contact-grid { grid-template-columns: 1fr; }
.calls-view, .moments-view, .contacts-view, .discover-view { padding: calc(24px + env(safe-area-inset-top)) 17px calc(75px + env(safe-area-inset-bottom)); }
.notices-view { padding: calc(24px + env(safe-area-inset-top)) 17px calc(75px + env(safe-area-inset-bottom)); }
.notices-heading h1 { font-size: 23px; }
.notice-entry { width: calc(100% - 16px); margin-inline: 8px; }
.notice-detail h1 { font-size: 23px; }
.module-row { padding: 18px 16px; gap: 13px; }
.view-heading { gap: 12px; align-items: flex-start; margin-bottom: 23px; }
.view-heading h2 { font-size: 24px; }
.view-heading p { font-size: 12px; }
.view-heading > .primary-btn { padding: 0 11px !important; font-size: 12px; }
.view-heading > .primary-btn .icon { width: 16px; height: 16px; }
.profile-summary { padding: 18px 0 28px; gap: 17px; }
.profile-summary .avatar { width: 64px; height: 64px; }
.profile-summary .detail-name { font-size: 23px; }
.settings-row { gap: 12px; }
.settings-row strong { font-size: 14px; }
.settings-row span { font-size: 12px; }
.surface-links { gap: 10px; }
.surface-links a { min-height: 44px; display: inline-flex; align-items: center; }
.modal-backdrop { padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.modal { max-height: 88dvh; }
.modal-head { padding: 14px 18px; }
.modal-head .icon-btn { width: 44px; height: 44px; }
.modal-body { padding: 18px 18px 22px; }
.info-line { min-height: 44px; }
.post-actions button { min-height: 44px; }
.toast-region { right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); }
.preview-banner { padding: 8px 12px; }
@media (min-width: 701px) {
  html[data-surface="h5"] .app-shell { width: 460px; margin-inline: auto; position: relative; border-inline: 1px solid #dce5dc; box-shadow: 0 0 48px rgba(35, 63, 43, .07); }
  html[data-surface="h5"] .mobile-tabs { position: absolute; }
  html[data-surface="h5"] .toast-region { right: calc((100vw - 460px) / 2 + 16px); max-width: 428px; }
  html[data-surface="h5"] .modal { max-width: 428px; }
}