:root {
      --bg: #eef3f9;
      --panel: #ffffff;
      --panel-soft: rgba(255, 255, 255, 0.84);
      --panel-border: #d7e1ec;
      --surface-base: #ffffff;
      --surface-elevated: rgba(255, 255, 255, 0.92);
      --surface-glass: rgba(255, 255, 255, 0.78);
      --surface-strong: #f7fbff;
      --line-soft: rgba(215, 225, 236, 0.82);
      --line-strong: rgba(208, 220, 234, 0.96);
      --list-row: rgba(255, 255, 255, 0.96);
      --list-row-hover: rgba(246, 250, 255, 0.98);
      --list-row-active: rgba(233, 242, 255, 0.88);
      --header-glass: rgba(255, 255, 255, 0.72);
      --composer-surface: rgba(255, 255, 255, 0.86);
      --input-bg: rgba(255, 255, 255, 0.95);
      --text: #102033;
      --muted: #6c7a8f;
      --accent: #1f7aec;
      --accent-dark: #1664c4;
      --accent-soft: #e9f2ff;
      --danger-soft: #ffe8e8;
      --danger-text: #b42318;
      --bubble-self: #d9ebff;
      --bubble-other: #ffffff;
      --shadow: 0 18px 40px rgba(17, 34, 68, 0.08);
    }

    html.theme-dark {
      --bg: #08111d;
      --panel: #0f1827;
      --panel-soft: rgba(16, 24, 38, 0.9);
      --panel-border: #22324b;
      --surface-base: #0d1625;
      --surface-elevated: rgba(16, 24, 38, 0.96);
      --surface-glass: rgba(13, 20, 33, 0.76);
      --surface-strong: #132033;
      --line-soft: rgba(46, 62, 88, 0.72);
      --line-strong: rgba(54, 73, 104, 0.96);
      --list-row: rgba(15, 24, 38, 0.96);
      --list-row-hover: rgba(18, 30, 48, 0.98);
      --list-row-active: rgba(24, 45, 74, 0.92);
      --header-glass: rgba(9, 16, 28, 0.78);
      --composer-surface: rgba(11, 18, 29, 0.9);
      --input-bg: rgba(7, 13, 22, 0.96);
      --text: #edf4ff;
      --muted: #91a4c1;
      --accent: #1f7aec;
      --accent-dark: #8dc1ff;
      --accent-soft: rgba(31, 122, 236, 0.22);
      --danger-soft: rgba(180, 35, 24, 0.18);
      --danger-text: #ff9494;
      --bubble-self: linear-gradient(180deg, rgba(16, 62, 110, 0.98) 0%, rgba(13, 50, 90, 0.98) 100%);
      --bubble-other: linear-gradient(180deg, rgba(19, 30, 47, 0.98) 0%, rgba(15, 24, 38, 0.98) 100%);
      --shadow: 0 20px 44px rgba(2, 8, 18, 0.42);
    }

    * {
      box-sizing: border-box;
    }

    body,
    body * {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    input,
    textarea,
    .message-text,
    .message-bubble,
    .profile-name-input.is-editing {
      -webkit-user-select: text;
      user-select: text;
      -webkit-touch-callout: default;
    }

    html, body {
      margin: 0;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
      touch-action: pan-x pan-y;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background-color: var(--bg);
      background:
        radial-gradient(circle at top left, rgba(31, 122, 236, 0.10), transparent 28%),
        linear-gradient(180deg, #f7faff 0%, var(--bg) 100%);
      color: var(--text);
    }

    html.theme-dark,
    html.theme-dark body {
      background:
        radial-gradient(circle at top left, rgba(31, 122, 236, 0.20), transparent 24%),
        radial-gradient(circle at top right, rgba(68, 123, 255, 0.10), transparent 22%),
        linear-gradient(180deg, #0c1626 0%, var(--bg) 42%, #070f1b 100%);
    }

    .screen {
      position: fixed;
      inset: 0;
      overflow-y: auto;
      padding: 16px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(16px);
      transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0s linear 0.28s;
    }

    .screen.active,
    .screen.entering,
    .screen.leaving {
      visibility: visible;
      transition-delay: 0s;
    }

    .screen.active,
    .screen.entering {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      z-index: 2;
    }

    .screen.leaving {
      opacity: 0;
      transform: translateY(10px);
      z-index: 1;
    }

    .screen.no-transition {
      transition: none !important;
    }

    html.preopen-app #appScreen {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition: none !important;
      z-index: 2;
      height: 100dvh;
      min-height: 100dvh;
      padding: 0;
      overflow: hidden;
      overscroll-behavior: none;
    }

    html.preopen-app .app-screen-shell {
      width: min(100%, 520px);
      height: 100dvh;
      min-height: 100dvh;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      padding-top: 0;
      padding-bottom: 0;
      overflow: hidden;
    }

    html.preopen-app .app-shell {
      position: relative;
      flex: 1 1 auto;
      width: 100%;
      height: auto;
      min-height: 0;
      max-height: 100%;
      display: block;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(215, 225, 236, 0.88);
      border-radius: 0;
      border-top: 0;
      box-shadow: 0 18px 42px rgba(17, 34, 68, 0.08);
      backdrop-filter: blur(16px);
      overflow: hidden;
    }

    html.theme-dark.preopen-app .app-shell {
      background:
        linear-gradient(180deg, rgba(15, 25, 42, 0.96), rgba(10, 18, 31, 0.98));
      border-color: rgba(30, 45, 67, 0.96);
      box-shadow: 0 22px 56px rgba(2, 8, 18, 0.42);
    }

    html.preopen-app .sidebar {
      width: 100%;
      min-width: 0;
      height: 100%;
      min-height: 0;
      max-height: none;
      display: flex;
      flex-direction: column;
      border-right: 0;
      border-bottom: 0;
      background: transparent;
      overflow: hidden;
    }

    html.preopen-app .sidebar-panels-track {
      flex: 1 1 auto;
      min-height: 0;
    }

    html.preopen-app .sidebar-panel {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      min-width: 100%;
      min-height: 0;
    }

    html.preopen-app #loginScreen,
    html.preopen-app #onboardingScreen {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: none;
      transition: none !important;
    }

    html.preopen-chat #chatPanel {
      visibility: visible;
      transform: translate3d(0, 0, 0);
      opacity: 1;
      pointer-events: auto;
      transition: none !important;
    }

    html.preopen-chat #bottomTabs {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: none !important;
    }

    html.preboot-app #appScreen {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transform: none !important;
      transition: none !important;
    }

    .login-screen {
      width: 100%;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 0;
    }

    .auth-screen-shell {
      width: 100%;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding:
        calc(env(safe-area-inset-top, 0px) + 20px)
        20px
        calc(env(safe-area-inset-bottom, 0px) + 20px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    html.theme-dark .login-card,
    html.theme-dark .onboarding-card,
    html.theme-dark .chat-panel,
    html.theme-dark .profile-panel,
    html.theme-dark .profile-card,
    html.theme-dark .settings-profile,
    html.theme-dark .settings-edit-card,
    html.theme-dark .settings-link-card,
    html.theme-dark .settings-detail-card,
    html.theme-dark .forward-preview-card,
    html.theme-dark .chat-contact-banner,
    html.theme-dark .chat-pinned-banner,
    html.theme-dark .chat-search-panel,
    html.theme-dark .composer,
    html.theme-dark .sidebar-item,
    html.theme-dark .shared-file-item,
    html.theme-dark .shared-link-item,
    html.theme-dark .shared-voice-item,
    html.theme-dark .shared-media-item,
    html.theme-dark .composer-sticker-picker,
    html.theme-dark .composer-mention-picker,
    html.theme-dark .chat-compose-actions-card,
    html.theme-dark .message-actions-toolbar,
    html.theme-dark .chat-info-public-card,
    html.theme-dark .chat-info-meta-card,
    html.theme-dark .chat-info-onboarding-card,
    html.theme-dark .chat-info-permissions-card,
    html.theme-dark .chat-info-invite-card {
      background: var(--panel-soft);
      border-color: var(--panel-border);
      box-shadow: var(--shadow);
      color: var(--text);
    }

    html.theme-dark .chat-header,
    html.theme-dark .sidebar-panel-header,
    html.theme-dark .profile-panel-header,
    html.theme-dark .bottom-tabs {
      background: rgba(9, 17, 29, 0.74);
      border-color: rgba(30, 45, 67, 0.82);
      color: var(--text);
      backdrop-filter: blur(20px) saturate(1.35);
      -webkit-backdrop-filter: blur(20px) saturate(1.35);
    }

    html.theme-dark .input,
    html.theme-dark .chat-search-input,
    html.theme-dark textarea,
    html.theme-dark select,
    html.theme-dark .phone-input,
    html.theme-dark .chat-list-search-input,
    html.theme-dark .composer-input {
      background: rgba(7, 14, 25, 0.78);
      border-color: rgba(33, 49, 73, 0.96);
      color: var(--text);
    }

    html.theme-dark input::placeholder,
    html.theme-dark textarea::placeholder {
      color: rgba(154, 169, 188, 0.82);
    }

    html.theme-dark .message-row.other .message-bubble {
      background: var(--bubble-other);
      border-color: rgba(39, 50, 65, 0.92);
    }

    html.theme-dark .message-row.self .message-bubble {
      background: var(--bubble-self);
      border-color: rgba(94, 168, 255, 0.2);
    }

    html.theme-dark .button-secondary,
    html.theme-dark .chat-search-close,
    html.theme-dark .shared-file-sort-button,
    html.theme-dark .shared-file-filter-chip {
      background: rgba(12, 22, 37, 0.92);
      border-color: rgba(30, 45, 67, 0.96);
      color: var(--text);
    }

    html.theme-dark .settings-link-card:active,
    html.theme-dark .shared-file-item:active,
    html.theme-dark .shared-link-item:active,
    html.theme-dark .shared-voice-item:active {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(94, 168, 255, 0.22);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    }

    html.theme-dark .settings-toggle-switch {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(39, 50, 65, 0.96);
    }

    html.theme-dark .settings-toggle-input:checked + .settings-toggle-switch {
      background: rgba(94, 168, 255, 0.28);
      border-color: rgba(94, 168, 255, 0.5);
    }

    html.theme-dark .settings-toggle-switch::before {
      background: #f7fbff;
    }

    html.theme-dark .settings-link-copy strong,
    html.theme-dark .settings-toggle-copy strong,
    html.theme-dark .sidebar-item-title,
    html.theme-dark .profile-name,
    html.theme-dark .chat-title,
    html.theme-dark .profile-panel-title {
      color: var(--text);
    }

    html.theme-dark .settings-link-copy span,
    html.theme-dark .settings-link-value,
    html.theme-dark .settings-toggle-copy span,
    html.theme-dark .sidebar-item-subtitle,
    html.theme-dark .chat-subtitle,
    html.theme-dark .contacts-meta,
    html.theme-dark .status-line,
    html.theme-dark .shared-file-meta,
    html.theme-dark .shared-link-domain,
    html.theme-dark .shared-voice-meta {
      color: var(--muted);
    }

    html.theme-dark .app-shell,
    html.theme-dark .sidebar,
    html.theme-dark .sidebar-panel,
    html.theme-dark .chat-panel,
    html.theme-dark .profile-panel {
      background-color: transparent;
    }

    html.theme-dark .sidebar-item,
    html.theme-dark .chat-search-history-row,
    html.theme-dark .chat-search-result,
    html.theme-dark .chat-folder-manage-item,
    html.theme-dark .chat-folder-chat-option {
      background: rgba(8, 15, 26, 0.16);
      border-color: rgba(30, 45, 67, 0.78);
    }

    html.theme-dark .sidebar-item.active {
      background: rgba(24, 51, 88, 0.66);
      border-color: rgba(31, 122, 236, 0.34);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item {
      background: rgba(12, 21, 34, 0.98);
      border-color: rgba(30, 45, 67, 0.78);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item.active,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item:hover {
      background: rgba(12, 21, 34, 0.98);
    }

    html.theme-dark .sidebar-item:active,
    html.theme-dark .chat-search-result:active,
    html.theme-dark .chat-folder-chat-option:active {
      background: rgba(18, 36, 61, 0.82);
    }

    html.theme-dark .chat-folder-chip {
      background: rgba(11, 20, 34, 0.86);
      border-color: rgba(30, 45, 67, 0.88);
      color: var(--muted);
    }

    html.theme-dark .chat-folder-chip.active {
      background: rgba(18, 50, 93, 0.84);
      border-color: rgba(31, 122, 236, 0.42);
      color: #dbeaff;
      box-shadow: 0 10px 24px rgba(8, 20, 38, 0.32);
    }

    html.theme-dark .chat-list-actions-card {
      background: rgba(12, 21, 34, 0.96);
      border-color: rgba(30, 45, 67, 0.92);
      box-shadow: 0 24px 56px rgba(2, 7, 14, 0.48);
    }

    html.theme-dark .chat-list-actions-card.is-below-anchor::before {
      border-left-color: rgba(30, 45, 67, 0.92);
      border-top-color: rgba(30, 45, 67, 0.92);
    }

    html.theme-dark .chat-list-actions-card.is-above-anchor::before {
      border-right-color: rgba(30, 45, 67, 0.92);
      border-bottom-color: rgba(30, 45, 67, 0.92);
    }

    html.theme-dark .chat-list-quick-action,
    html.theme-dark .chat-list-folder-picker-option {
      background: rgba(16, 29, 46, 0.96);
      color: var(--text);
      box-shadow: inset 0 0 0 1px rgba(38, 56, 80, 0.92);
    }

    html.theme-dark .chat-list-quick-action.is-danger {
      background: rgba(78, 24, 37, 0.96);
      color: #ffd9e0;
      box-shadow: inset 0 0 0 1px rgba(126, 52, 67, 0.9);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-action-target {
      background: rgba(18, 50, 93, 0.84);
      box-shadow: 0 18px 38px rgba(2, 7, 14, 0.34);
    }

    html.theme-dark .contacts-sort-option {
      background: rgba(16, 29, 46, 0.96);
      color: var(--text);
      box-shadow: inset 0 0 0 1px rgba(38, 56, 80, 0.92);
    }

    html.theme-dark .contacts-sort-option.is-active {
      background: rgba(18, 50, 93, 0.84);
      color: #dbeaff;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.42);
    }

    html.theme-dark .contacts-sort-popover-modal .contacts-sort-card {
      background: rgba(12, 21, 34, 0.96);
      border-color: rgba(30, 45, 67, 0.92);
      box-shadow: 0 24px 56px rgba(2, 7, 14, 0.48);
    }

    html.theme-dark #contactsSortButton::after {
      box-shadow: 0 0 0 2px rgba(12, 21, 34, 0.96);
    }

    html.theme-dark #contactsSortButton.is-open {
      background: rgba(18, 50, 93, 0.84);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.42);
    }

    html.theme-dark .chat-list-folder-picker {
      border-top-color: rgba(30, 45, 67, 0.92);
    }

    html.theme-dark .chat-search-button,
    html.theme-dark .chat-search-nav-button,
    html.theme-dark .chat-back-button,
    html.theme-dark .chat-search-clear,
    html.theme-dark .composer-sticker-button,
    html.theme-dark .sidebar-header-action,
    html.theme-dark .chat-folder-manage-order {
      background: rgba(12, 22, 37, 0.9);
      border-color: rgba(30, 45, 67, 0.92);
      color: var(--accent-dark);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    html.theme-dark .chat-search-clear {
      color: var(--muted);
    }

    html.theme-dark .composer-input-shell {
      background: rgba(10, 18, 31, 0.94);
      border-color: rgba(30, 45, 67, 0.94);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    html.theme-dark .composer-reply-banner,
    html.theme-dark .composer-edit-banner {
      background: rgba(12, 24, 40, 0.96);
      border-color: rgba(31, 122, 236, 0.2);
    }

    html.theme-dark .message-link-preview {
      background: rgba(10, 18, 31, 0.94);
      border-color: rgba(30, 45, 67, 0.94);
      box-shadow: 0 10px 28px rgba(2, 8, 18, 0.28);
    }

    html.theme-dark .message-footer-badge {
      background: rgba(7, 15, 26, 0.72);
      border-color: rgba(53, 73, 102, 0.52);
      color: #d8e7ff;
    }

    html.theme-dark .message-row.self .message-footer-badge {
      background: rgba(7, 19, 34, 0.56);
      border-color: rgba(112, 172, 255, 0.26);
    }

    html.theme-dark .message-reactions,
    html.theme-dark .message-reactions-picker,
    html.theme-dark .message-reactions-picker-floating,
    html.theme-dark .message-actions-toolbar {
      background: rgba(10, 18, 31, 0.96);
      border-color: rgba(30, 45, 67, 0.92);
      box-shadow: 0 16px 36px rgba(2, 8, 18, 0.34);
    }

    html.theme-dark .status-badge,
    html.theme-dark .sidebar-header-action-count {
      background: rgba(31, 122, 236, 0.18);
      color: #dbeaff;
    }

    html.theme-dark .chat-contact-banner,
    html.theme-dark .chat-pinned-banner {
      background: rgba(11, 21, 36, 0.88);
      border-color: rgba(30, 45, 67, 0.88);
      box-shadow: 0 12px 30px rgba(2, 8, 18, 0.24);
    }

    html.theme-dark .bottom-tab-button {
      color: var(--muted);
    }

    html.theme-dark .bottom-tab-button.active {
      color: #dcebff;
    }

    html.theme-dark .composer-sticker-tabs {
      background: rgba(9, 17, 29, 0.94);
      border-color: rgba(30, 45, 67, 0.9);
    }

    html.theme-dark .composer-sticker-tab.active {
      background: rgba(31, 122, 236, 0.18);
      color: var(--accent-dark);
    }

    html.theme-dark .composer-sticker-option {
      background: linear-gradient(180deg, rgba(18, 34, 56, 0.98) 0%, rgba(12, 24, 40, 0.98) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .login-card {
      width: 100%;
      max-width: 420px;
      padding: 36px 32px 28px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(215, 225, 236, 0.9);
      border-radius: 30px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }

    .auth-card-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      min-height: 100%;
    }

    .auth-card-body > * {
      width: 100%;
    }

    .login-logo {
      margin-bottom: 22px;
      text-align: center;
    }

    .onboarding-card {
      width: 100%;
      max-width: 440px;
      padding: 36px 32px 28px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(215, 225, 236, 0.9);
      border-radius: 30px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      text-align: center;
    }

    .onboarding-avatar-wrap {
      display: grid;
      justify-items: center;
      gap: 14px;
      margin-bottom: 24px;
    }

    .onboarding-avatar {
      width: 108px;
      height: 108px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(215, 225, 236, 0.95);
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 34px;
      font-weight: 800;
      letter-spacing: 0.02em;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .onboarding-avatar.has-image {
      background: #fff;
    }

    .onboarding-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .onboarding-form {
      display: grid;
      gap: 16px;
      text-align: left;
    }

    .onboarding-upload {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border: 0;
      border-radius: 14px;
      background: #edf3fb;
      color: var(--text);
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    }

    .onboarding-upload:hover {
      transform: translateY(-1px);
    }

    .onboarding-upload:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .hidden-input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .login-logo-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 108px;
      height: 44px;
      padding: 0 18px;
      border-radius: 16px;
      background: linear-gradient(180deg, #eff6ff 0%, #e4efff 100%);
      color: var(--accent-dark);
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 0.08em;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.10);
    }

    .login-brand {
      width: 100%;
      margin-bottom: 24px;
      text-align: center;
    }

    .login-brand h1 {
      margin: 0 0 10px;
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .login-brand p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
      font-size: 15px;
    }

    .login-step {
      width: 100%;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
    }

    .step-indicator {
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-dark);
      font-weight: 700;
      transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease;
    }

    .step-indicator.bump {
      transform: scale(1.08);
      box-shadow: 0 8px 20px rgba(31, 122, 236, 0.18);
    }

    .login-progress {
      width: 100%;
      margin: -4px 0 10px;
      height: 6px;
      border-radius: 999px;
      background: rgba(233, 242, 255, 0.72);
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.04);
    }

    .login-progress-bar {
      width: 50%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent) 0%, #5fa4ff 100%);
      transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 4px 12px rgba(31, 122, 236, 0.18);
    }

    .field-group label {
      display: block;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }

    .phone-field {
      display: grid;
      gap: 8px;
    }

    .phone-input-wrap {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 0 14px;
      height: 56px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: var(--panel);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .phone-input-wrap:focus-within {
      border-color: rgba(31, 122, 236, 0.55);
      box-shadow: 0 0 0 4px rgba(31, 122, 236, 0.10);
    }

    .phone-prefix {
      min-width: 132px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding-right: 10px;
      border-right: 1px solid rgba(215, 225, 236, 0.9);
      white-space: nowrap;
    }

    .phone-flag {
      font-size: 22px;
      line-height: 1;
    }

    .phone-code {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent-dark);
    }

    .phone-input {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 16px;
    }

    .phone-meta {
      min-height: 16px;
      font-size: 12px;
      color: var(--muted);
    }

    .contact-search-input-wrap {
      position: relative;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      height: 50px;
      padding: 0 14px;
      border-radius: 16px;
    }

    .contact-search-input-wrap.has-flag {
      padding-left: 50px;
    }

    .contact-search-flag {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%) scale(0.92);
      font-size: 20px;
      line-height: 1;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .contact-search-input-wrap.has-flag .contact-search-flag {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    .input,
    .composer textarea {
      width: 100%;
      border: 1px solid var(--panel-border);
      outline: none;
      background: var(--panel);
      color: var(--text);
      font: inherit;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .input {
      height: 48px;
      padding: 0 16px;
      border-radius: 16px;
      font-size: 16px;
    }

    .input:focus,
    .composer textarea:focus {
      border-color: rgba(31, 122, 236, 0.55);
      box-shadow: 0 0 0 4px rgba(31, 122, 236, 0.10);
    }

    .button {
      height: 48px;
      border: 0;
      border-radius: 16px;
      padding: 0 18px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    }

    .button:hover {
      transform: translateY(-1px);
    }

    .button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .button:active:not(:disabled) {
      transform: scale(0.985);
    }

    .button-primary {
      background: var(--accent);
      color: #fff;
    }

    .button-primary:hover {
      background: var(--accent-dark);
    }

    .button-secondary {
      background: #edf3fb;
      color: var(--text);
    }

    .button-danger {
      background: var(--danger-soft);
      color: var(--danger-text);
    }

    .text-button {
      margin-top: 12px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--accent-dark);
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .text-button:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .text-button:active:not(:disabled) {
      transform: translateY(1px);
    }

    .login-form,
    .code-form {
      display: grid;
      gap: 14px;
      width: 100%;
      min-height: 0;
      align-content: start;
    }

    .auth-panel-stack {
      position: relative;
      width: 100%;
      min-height: 0;
    }

    .auth-panel {
      position: absolute;
      inset: 0;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(18px);
      transition:
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.28s;
      will-change: transform, opacity;
    }

    .auth-panel.active,
    .auth-panel.entering,
    .auth-panel.leaving {
      visibility: visible;
      transition-delay: 0s;
    }

    .auth-panel.active,
    .auth-panel.entering {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }

    .auth-panel.leaving {
      opacity: 0;
      transform: translateX(-18px);
    }

    .code-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .otp-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }

    .otp-input {
      height: 56px;
      padding: 0;
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.04em;
      appearance: none;
      -webkit-appearance: none;
      border-color: rgba(215, 225, 236, 0.95);
      background: rgba(248, 251, 255, 0.96);
      transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
    }

    .otp-input.filled {
      border-color: rgba(31, 122, 236, 0.34);
      background: rgba(233, 242, 255, 0.88);
      color: var(--accent-dark);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .otp-input:active {
      transform: scale(0.985);
    }

    .otp-input.invalid {
      border-color: rgba(180, 35, 24, 0.42);
      background: rgba(255, 232, 232, 0.72);
      color: var(--danger-text);
      box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.08);
    }

    .code-hint {
      margin-top: 8px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
      text-align: center;
    }

    .status-line {
      margin-top: 18px;
      min-height: 18px;
      font-size: 13px;
      color: var(--muted);
      text-align: center;
    }

    .status-line.error {
      color: var(--danger-text);
    }

    .status-line.success {
      color: #1d7b4f;
    }

    .app-screen-shell {
      max-width: 1180px;
      margin: 0 auto;
      padding-bottom: 92px;
    }

    .app-shell {
      max-width: 1180px;
      min-height: calc(100vh - 32px);
      display: flex;
      background: rgba(255, 255, 255, 0.74);
      border: 1px solid rgba(215, 225, 236, 0.9);
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(12px);
    }

    .sidebar {
      width: 320px;
      min-width: 320px;
      position: relative;
      display: flex;
      flex-direction: column;
      border-right: 1px solid rgba(215, 225, 236, 0.9);
      background: rgba(250, 252, 255, 0.88);
    }

    .sidebar-header,
    .chat-header {
      padding: 18px;
      border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      background: var(--panel-soft);
    }

    .brand {
      margin-bottom: 14px;
    }

    .brand h2,
    .chat-title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .brand p,
    .chat-subtitle {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--muted);
    }

    .chat-subtitle.is-online {
      color: #18794e;
      font-weight: 500;
    }

    .chat-subtitle.is-recent {
      color: #5f748f;
      font-weight: 500;
    }

    .chat-subtitle.is-offline {
      color: var(--muted);
      font-weight: 400;
    }

    .sidebar-panels-track {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      transform: translate3d(0, 0, 0);
      transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .sidebar-panels-track.no-transition {
      transition: none !important;
    }

    .sidebar-panel {
      position: relative;
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      min-width: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      pointer-events: none;
    }

    .sidebar-panel.active {
      pointer-events: auto;
    }

    .sidebar-search {
      padding: 0 18px 14px;
    }

    .chat-list-search-wrap {
      position: relative;
    }

    .chat-list-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: 14px;
      line-height: 1;
      pointer-events: none;
      z-index: 1;
    }

    .chat-list-search-input {
      padding-left: 40px;
    }

    .chat-folders-bar {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 0 18px 12px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .chat-folders-bar::-webkit-scrollbar {
      display: none;
    }

    .chat-folder-chip {
      border: 1px solid rgba(215, 225, 236, 0.92);
      background: rgba(255, 255, 255, 0.82);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
    }

    .chat-folder-chip.active {
      background: var(--folder-soft, rgba(31, 122, 236, 0.12));
      border-color: var(--folder-accent, var(--accent));
      color: var(--folder-accent, var(--accent-dark));
    }

    .chat-folder-chip:active {
      transform: scale(0.98);
    }

    .sidebar-panel-header {
      padding: 18px 18px 10px;
      text-align: center;
      flex-shrink: 0;
    }

    .sidebar-panel-header-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    .sidebar-panel-header-row > :first-child:empty,
    .sidebar-panel-header-row > :last-child:empty {
      width: 36px;
      height: 36px;
    }

    .sidebar-panel-title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .sidebar-header-action {
      min-width: 36px;
      height: 36px;
      padding: 0 12px;
      border: 0;
      border-radius: 999px;
      background: rgba(236, 244, 255, 0.95);
      color: var(--accent-dark);
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      -webkit-tap-highlight-color: transparent;
    }

    .sidebar-header-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .sidebar-header-icon-action {
      width: 36px;
      min-width: 36px;
      padding: 0;
      font-size: 24px;
      line-height: 1;
    }

    .sidebar-header-action[hidden] {
      display: none;
    }

    .sidebar-header-action-count {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.14);
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .contacts-meta {
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .contacts-sort-card {
      width: min(320px, calc(100vw - 24px));
      padding-bottom: 12px;
    }

    .contacts-sort-popover-modal {
      align-items: stretch;
      justify-content: flex-start;
      padding: 0;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 115;
    }

    .contacts-sort-popover-modal .contacts-sort-card {
      position: absolute;
      width: min(260px, calc(100vw - 24px));
      padding: 12px;
      border-radius: 22px;
      box-shadow: 0 20px 44px rgba(17, 34, 68, 0.16);
    }

    .contacts-sort-popover-modal .profile-card-header {
      display: none;
    }

    .contacts-sort-popover-modal .profile-main-name {
      margin: 0 0 10px;
      font-size: 15px;
      line-height: 1.2;
    }

    .contacts-sort-options {
      display: grid;
      gap: 10px;
    }

    .contacts-sort-option {
      border: 0;
      border-radius: 18px;
      padding: 14px 16px;
      display: grid;
      grid-template-columns: 20px 1fr auto;
      align-items: center;
      gap: 12px;
      background: rgba(245, 249, 255, 0.96);
      color: var(--text);
      text-align: left;
      font-size: 14px;
      font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(207, 220, 237, 0.72);
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
    }

    .contacts-sort-option i {
      color: var(--accent-dark);
      font-size: 16px;
      line-height: 1;
    }

    .contacts-sort-option::after {
      content: '\f00c';
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 14px;
      color: var(--accent-dark);
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .contacts-sort-option.is-active {
      background: rgba(233, 242, 255, 0.98);
      color: var(--accent-dark);
      box-shadow: inset 0 0 0 1px rgba(164, 196, 234, 0.84);
    }

    .contacts-sort-option.is-active::after {
      opacity: 1;
      transform: scale(1);
    }

    .contacts-sort-option:active {
      transform: scale(0.985);
    }

    #contactsSortButton {
      position: relative;
    }

    #contactsSortButton::after {
      content: '';
      position: absolute;
      top: 7px;
      right: 7px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent-dark);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.96);
      opacity: 0;
      transform: scale(0.7);
      transition: opacity 0.16s ease, transform 0.16s ease;
      pointer-events: none;
    }

    #contactsSortButton.has-custom-sort::after,
    #contactsSortButton.is-open::after {
      opacity: 1;
      transform: scale(1);
    }

    #contactsSortButton.is-open {
      background: rgba(233, 242, 255, 0.98);
      box-shadow: inset 0 0 0 1px rgba(164, 196, 234, 0.84);
    }

    .sidebar-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .sidebar-list .list-empty {
      margin: 12px 18px 0;
    }

    .sidebar-list-section-title {
      padding: 10px 18px 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .sidebar-list-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 18px 8px;
    }

    .sidebar-list-section-header .sidebar-list-section-title {
      padding: 0;
    }

    .sidebar-list-section-action {
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 700;
      color: var(--accent-dark);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-history-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      width: 100%;
      border-bottom: 1px solid rgba(226, 233, 242, 0.92);
      padding: 0 18px;
      background: transparent;
    }

    .chat-search-history-button {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 14px 0;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-history-remove {
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 999px;
      background: rgba(238, 243, 251, 0.92);
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
    }

    .chat-search-highlight {
      display: inline;
      padding: 0 2px;
      border-radius: 5px;
      background: rgba(31, 122, 236, 0.14);
      color: inherit;
      font-weight: 700;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    .chat-search-phone-match {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-search-message-extra {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .list-empty,
    .messages-empty {
      padding: 20px;
      border: 1px dashed var(--panel-border);
      border-radius: 20px;
      text-align: center;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.72);
    }

    .sidebar-item {
      width: 100%;
      flex-shrink: 0;
      border: 0;
      border-bottom: 1px solid rgba(226, 233, 242, 0.92);
      background: transparent;
      border-radius: 0;
      padding: 14px 18px;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.15s ease;
    }

    .chat-list-swipe-shell {
      position: relative;
      overflow: hidden;
      border-radius: 0;
      width: 100%;
      flex-shrink: 0;
      touch-action: pan-y;
      --chat-left-progress: 0;
      --chat-right-progress: 0;
    }

    .chat-list-actions {
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: stretch;
      gap: 0;
      padding: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }

    .chat-list-actions-track {
      display: flex;
      align-items: stretch;
      gap: 0;
      will-change: transform;
    }

    .chat-list-actions-left {
      right: 0;
      width: 300px;
      justify-content: flex-end;
    }

    .chat-list-actions-right {
      left: 0;
      width: 200px;
      justify-content: flex-start;
    }

    .chat-list-swipe-shell.is-removing {
      pointer-events: none;
    }

    .chat-list-swipe-shell.is-archive-actions .chat-list-actions {
      grid-template-columns: 92px 92px 84px 96px;
    }

    .chat-list-action-button {
      height: 100%;
      width: 100px;
      border: 0;
      border-radius: 0;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      -webkit-tap-highlight-color: transparent;
      pointer-events: none;
      transform: translate3d(0, 0, 0);
      transition: background 0.18s ease, transform 0.16s ease, box-shadow 0.16s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      overflow: hidden;
    }

    .chat-list-action-content {
      display: grid;
      gap: 8px;
      justify-items: center;
      text-align: center;
      line-height: 1.1;
    }

    .chat-list-action-content i {
      font-size: 18px;
      line-height: 1;
    }

    .chat-list-actions-left .chat-list-actions-track {
      transform: translate3d(calc((1 - var(--chat-left-progress)) * 22px), 0, 0);
    }

    .chat-list-actions-right .chat-list-actions-track {
      transform: translate3d(calc((1 - var(--chat-right-progress)) * -22px), 0, 0);
    }

    .chat-list-actions-left .chat-list-action-button {
      transform-origin: right center;
      transform:
        translate3d(calc((1 - var(--chat-left-progress)) * (12px + (var(--chat-action-order, 0) * 8px))), 0, 0)
        scaleX(calc(0.18 + (var(--chat-left-progress) * 0.82)))
        scaleY(calc(0.86 + (var(--chat-left-progress) * 0.14)));
    }

    .chat-list-actions-right .chat-list-action-button {
      transform-origin: left center;
      transform:
        translate3d(calc((1 - var(--chat-right-progress)) * (-12px - (var(--chat-action-order, 0) * 8px))), 0, 0)
        scaleX(calc(0.18 + (var(--chat-right-progress) * 0.82)))
        scaleY(calc(0.86 + (var(--chat-right-progress) * 0.14)));
    }

    .chat-list-actions-left .chat-list-action-content {
      transform: translate3d(calc((1 - var(--chat-left-progress)) * 6px), 0, 0) scale(calc(0.8 + (var(--chat-left-progress) * 0.2)));
      transform-origin: center;
      transition: transform 0.16s ease;
    }

    .chat-list-actions-right .chat-list-action-content {
      transform: translate3d(calc((1 - var(--chat-right-progress)) * -6px), 0, 0) scale(calc(0.8 + (var(--chat-right-progress) * 0.2)));
      transform-origin: center;
      transition: transform 0.16s ease;
    }

    .chat-list-swipe-shell.is-revealed-left .chat-list-actions-left .chat-list-action-button,
    .chat-list-swipe-shell.is-revealed-right .chat-list-actions-right .chat-list-action-button {
      pointer-events: auto;
    }

    .chat-list-action-button.archive {
      background: linear-gradient(180deg, #6ab3ff 0%, #4589f3 100%);
    }

    .chat-list-action-button.pin {
      background: linear-gradient(180deg, #6f95ff 0%, #4d6df0 100%);
    }

    .chat-list-action-button.mute {
      background: linear-gradient(180deg, #8da0ba 0%, #65768b 100%);
    }

    .chat-list-action-button.delete {
      background: linear-gradient(180deg, #ff7f8f 0%, #ef4f67 100%);
    }

    .chat-list-action-button.unread {
      background: linear-gradient(180deg, #5fd3bd 0%, #2eb89d 100%);
    }

    .chat-list-swipe-shell > .sidebar-item {
      position: relative;
      z-index: 1;
      will-change: transform;
      background: rgba(255, 255, 255, 0.98);
    }

    .chat-list-swipe-shell > .sidebar-item.active {
      background: rgba(255, 255, 255, 0.98);
    }

    .chat-list-swipe-shell > .sidebar-item:hover {
      background: rgba(255, 255, 255, 0.98);
    }

    .chat-list-swipe-shell > .sidebar-item:active {
      background: rgba(233, 242, 255, 0.4);
    }

    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat {
      background: rgba(239, 244, 250, 0.84);
      -webkit-tap-highlight-color: transparent;
    }

    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat.active,
    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:hover,
    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:focus-visible {
      background: rgba(239, 244, 250, 0.84);
    }

    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:active {
      background: rgba(229, 238, 249, 0.96);
    }

    .chat-list-action-button.restore {
      background: #4e89de;
    }

    .sidebar-item-title {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-item-title.is-pinned::before {
      content: '\f08d';
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      margin-right: 6px;
      font-size: 12px;
      vertical-align: 1px;
      opacity: 0.82;
    }

    .sidebar-item-title.is-muted::after {
      content: '\f1f6';
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      margin-left: 6px;
      font-size: 12px;
      vertical-align: 1px;
      opacity: 0.82;
    }

    .sidebar-item-meta {
      font-size: 12px;
      color: var(--muted);
    }

    .sidebar-item-rich {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .sidebar-avatar {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 16px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .sidebar-avatar.has-image {
      background: #fff;
    }

    .sidebar-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .sidebar-item-body {
      min-width: 0;
    }

    .sidebar-item-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 8px;
    }

    .sidebar-item-time {
      flex-shrink: 0;
      font-size: 11px;
      line-height: 1.3;
      color: var(--muted);
      white-space: nowrap;
    }

    .sidebar-item-secondary {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-item-secondary.is-typing {
      color: var(--accent-dark);
      font-weight: 600;
    }

    .sidebar-item-inline-action {
      margin-left: auto;
      border: 0;
      background: rgba(31, 122, 236, 0.08);
      color: var(--accent-dark);
      border-radius: 999px;
      height: 28px;
      padding: 0 11px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
      align-self: center;
    }

    .sidebar-item-inline-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .typing-inline-indicator {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-left: 6px;
      vertical-align: middle;
    }

    .typing-inline-indicator span {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0.32;
      animation: typingInlinePulse 1s infinite ease-in-out;
    }

    .typing-inline-indicator span:nth-child(2) {
      animation-delay: 0.14s;
    }

    .typing-inline-indicator span:nth-child(3) {
      animation-delay: 0.28s;
    }

    @keyframes typingInlinePulse {
      0%, 80%, 100% {
        opacity: 0.28;
        transform: translateY(0);
      }
      40% {
        opacity: 1;
        transform: translateY(-1px);
      }
    }

    .sidebar-item-footer {
      margin-top: 4px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
    }

    .sidebar-item-badge {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      line-height: 20px;
      text-align: center;
      justify-self: end;
    }

    .blocked-users-card {
      margin-top: 14px;
    }

    .blocked-list-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .blocked-list-action {
      flex-shrink: 0;
      min-width: 108px;
      padding: 10px 12px;
      border: 0;
      border-radius: 12px;
      background: rgba(78, 137, 222, 0.12);
      color: var(--accent-dark);
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      -webkit-tap-highlight-color: transparent;
    }

    .blocked-list-action:active {
      background: rgba(78, 137, 222, 0.18);
    }

    .chat-panel {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .chat-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 44px;
    }

    .chat-profile-button,
    .message-profile-button {
      border: 0;
      background: transparent;
      padding: 0;
      color: inherit;
      font: inherit;
      text-align: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-profile-button {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      text-align: left;
      min-height: 44px;
    }

    .chat-profile-button > div:last-child {
      min-width: 0;
      min-height: 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .chat-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .chat-search-button {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      background: rgba(236, 244, 255, 0.95);
      color: var(--accent-dark);
      font-size: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-panel {
      display: none;
      padding: 12px 18px 10px;
      border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      background: var(--panel-soft);
    }

    .chat-search-panel.active {
      display: block;
    }

    .chat-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .chat-search-input-wrap {
      position: relative;
      min-width: 0;
    }

    .chat-search-input {
      width: 100%;
      min-height: 44px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 14px;
      padding: 0 44px 0 14px;
      font-size: 15px;
      background: rgba(255, 255, 255, 0.96);
    }

    .chat-search-clear {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%) scale(0.9);
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 999px;
      background: rgba(123, 141, 168, 0.16);
      color: rgba(90, 102, 121, 0.95);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-clear.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(-50%) scale(1);
    }

    .chat-search-clear:active {
      background: rgba(123, 141, 168, 0.24);
      transform: translateY(-50%) scale(0.95);
    }

    .chat-search-close {
      min-width: 44px;
      min-height: 44px;
      border: 0;
      border-radius: 14px;
      background: transparent;
      color: var(--accent-dark);
      font-size: 16px;
      font-weight: 700;
      padding: 0 4px;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-navigator {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .chat-search-nav-button {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      background: rgba(236, 244, 255, 0.95);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-nav-button:disabled {
      opacity: 0.45;
    }

    .chat-search-counter {
      min-width: 56px;
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
      color: var(--muted);
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .chat-search-results {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid rgba(226, 233, 242, 0.92);
    }

    .chat-search-results:empty {
      display: none;
    }

    .forward-preview-card {
      width: min(100%, 420px);
      margin: 0 auto 14px;
      padding: 14px 16px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.84);
      display: grid;
      gap: 6px;
      text-align: left;
      appearance: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
    }

    .forward-preview-card.is-clickable {
      cursor: pointer;
    }

    .forward-preview-card.is-clickable:active {
      transform: scale(0.992);
      box-shadow: 0 10px 22px rgba(17, 34, 68, 0.06);
    }

    .forward-preview-card:disabled {
      cursor: default;
    }

    .forward-preview-label {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }

    .forward-preview-author {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--accent-dark);
    }

    .forward-preview-text {
      font-size: 14px;
      line-height: 1.45;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .forward-list {
      background: rgba(255, 255, 255, 0.82);
      border-top: 1px solid rgba(223, 231, 241, 0.92);
      border-bottom: 1px solid rgba(223, 231, 241, 0.92);
    }

    .chat-search-result {
      width: 100%;
      border: 0;
      border-bottom: 1px solid rgba(226, 233, 242, 0.92);
      background: transparent;
      text-align: left;
      padding: 12px 0;
      display: grid;
      gap: 4px;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-result.is-active {
      background: rgba(236, 244, 255, 0.78);
    }

    .chat-search-result-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    .chat-search-result-author {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent-dark);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-search-result-time {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }

    .chat-search-result-text {
      font-size: 13px;
      line-height: 1.4;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-search-status {
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .chat-header-avatar {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 16px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .chat-header-avatar.has-image,
    .message-author-avatar.has-image {
      background: #fff;
    }

    .chat-header-avatar img,
    .message-author-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .status-badge {
      flex-shrink: 0;
      min-width: 76px;
      min-height: 32px;
      padding: 8px 12px;
      border-radius: 999px;
      background: #ecf4ff;
      color: var(--accent-dark);
      font-size: 12px;
      font-weight: 600;
    }

    .status-badge:empty {
      display: none;
    }

    .messages {
      flex: 1;
      min-height: 320px;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      scroll-behavior: smooth;
      position: relative;
    }

    .chat-scroll-date-indicator {
      position: absolute;
      left: 50%;
      top: 16px;
      z-index: 6;
      transform: translateX(-50%) translateY(-6px);
      opacity: 0;
      pointer-events: none;
      padding: 9px 15px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(246, 250, 255, 0.42));
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-shadow:
        0 10px 28px rgba(17, 34, 68, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
      backdrop-filter: blur(20px) saturate(1.15);
      -webkit-backdrop-filter: blur(20px) saturate(1.15);
      color: rgba(35, 50, 70, 0.9);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1;
      white-space: nowrap;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .chat-scroll-date-indicator.is-visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .message-day-separator {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 14px 0 10px;
      pointer-events: none;
    }

    .message-day-separator-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 7px 13px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(246, 250, 255, 0.34));
      border: 1px solid rgba(255, 255, 255, 0.46);
      box-shadow:
        0 8px 22px rgba(17, 34, 68, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
      backdrop-filter: blur(16px) saturate(1.08);
      -webkit-backdrop-filter: blur(16px) saturate(1.08);
      color: rgba(35, 50, 70, 0.82);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1;
      white-space: nowrap;
    }

    .message-row {
      display: flex;
      position: relative;
      touch-action: pan-y;
    }

    .message-row.self {
      justify-content: flex-end;
    }

    .message-row.other {
      justify-content: flex-start;
    }

    .message-row.system {
      justify-content: center;
    }

    .message-row.is-grouped-with-previous {
      margin-top: -6px;
    }

    .message-bubble {
      max-width: min(80%, 560px);
      padding: 12px 14px;
      border-radius: 18px;
      box-shadow: 0 8px 20px rgba(17, 34, 68, 0.05);
      border: 1px solid rgba(216, 224, 234, 0.95);
      word-break: break-word;
      position: relative;
      transform: translate3d(0, 0, 0);
      transition: transform 0.22s ease;
    }

    .message-row.self .message-bubble {
      background: var(--bubble-self);
      border-bottom-right-radius: 6px;
    }

    .message-row.other .message-bubble {
      background: var(--bubble-other);
      border-bottom-left-radius: 6px;
    }

    .message-row.system .message-bubble {
      max-width: min(88%, 460px);
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(233, 239, 247, 0.96);
      border: 1px solid rgba(216, 224, 234, 0.92);
      box-shadow: none;
    }

    .message-header {
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: var(--muted);
    }

    .message-header-spacer {
      flex: 1 1 auto;
    }

    .message-bottom-row {
      margin-top: 8px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
    }

    .message-bottom-row.is-sticker {
      margin-top: 6px;
    }

    .message-bottom-row:not(.has-reactions) {
      justify-content: flex-end;
    }

    .message-footer {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 6px;
      font-size: 11px;
      line-height: 1;
      color: var(--muted);
      text-align: right;
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .message-footer:empty {
      display: none;
    }

    .message-footer-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(236, 242, 250, 0.92);
      border: 1px solid rgba(216, 224, 234, 0.84);
      box-shadow: 0 4px 10px rgba(17, 34, 68, 0.04);
    }

    .message-row.self .message-footer-badge {
      background: rgba(219, 235, 255, 0.92);
      border-color: rgba(173, 205, 244, 0.9);
    }

    .message-footer.is-sticker {
      gap: 5px;
    }

    .message-ticks {
      font-size: 13px;
      line-height: 1;
      letter-spacing: -0.08em;
      color: rgba(108, 122, 143, 0.88);
      font-weight: 700;
      margin-left: -2px;
    }

    .message-views {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: rgba(108, 122, 143, 0.88);
      font-weight: 600;
    }

    .message-views i {
      font-size: 11px;
    }

    .message-ticks.seen {
      color: var(--accent-dark);
    }

    .message-action-button {
      width: 26px;
      height: 26px;
      border: 0;
      border-radius: 999px;
      background: rgba(238, 243, 251, 0.92);
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-panel.is-message-actions-open .chat-header,
    .chat-panel.is-message-actions-open .chat-search-panel,
    .chat-panel.is-message-actions-open .composer {
      filter: blur(8px);
      opacity: 0.24;
      pointer-events: none;
      transition: filter 0.18s ease, opacity 0.18s ease;
    }

    .messages.is-actions-open .message-row {
      filter: blur(8px);
      opacity: 0.22;
      pointer-events: none;
      transition: filter 0.18s ease, opacity 0.18s ease;
    }

    .messages.is-actions-open .message-row.is-action-target {
      filter: none !important;
      opacity: 1 !important;
      pointer-events: auto;
      z-index: 121;
      transform: translateY(var(--message-action-shift-y, 0px));
      transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
    }

    .messages.is-actions-open .message-row.is-action-target .message-bubble {
      box-shadow: 0 18px 36px rgba(17, 34, 68, 0.16);
      transform: scale(1.012);
      transition: box-shadow 0.18s ease, transform 0.18s ease;
    }

    #messageActionsModal {
      align-items: stretch;
      justify-content: flex-start;
      padding: 0;
      background: rgba(7, 12, 20, 0.08);
      z-index: 120;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #messageActionsModal .message-actions-card {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: auto;
      height: auto;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      z-index: 122;
      visibility: hidden;
      pointer-events: none;
      transform: none !important;
      opacity: 1 !important;
      transition: none !important;
    }

    #chatListActionsModal {
      background: rgba(7, 12, 20, 0.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 118;
    }

    .chat-list-actions-card {
      position: absolute;
      width: min(320px, calc(100vw - 24px));
      padding: 14px 14px 12px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 22px 50px rgba(17, 34, 68, 0.18);
      border: 1px solid rgba(225, 234, 244, 0.92);
      transform-origin: top right;
      opacity: 0;
      transform: translateY(6px) scale(0.985);
      transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #chatListActionsModal.active .chat-list-actions-card {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .chat-list-actions-card::before {
      content: '';
      position: absolute;
      right: 18px;
      width: 14px;
      height: 14px;
      background: inherit;
      transform: rotate(45deg);
      box-sizing: border-box;
    }

    .chat-list-actions-card.is-below-anchor::before {
      top: -7px;
      border-left: 1px solid rgba(225, 234, 244, 0.92);
      border-top: 1px solid rgba(225, 234, 244, 0.92);
    }

    .chat-list-actions-card.is-above-anchor::before {
      bottom: -7px;
      border-right: 1px solid rgba(225, 234, 244, 0.92);
      border-bottom: 1px solid rgba(225, 234, 244, 0.92);
    }

    .chat-list-actions-card .profile-card-header {
      margin-bottom: 8px;
    }

    .chat-list-actions-card .profile-main-name {
      margin: 0 0 12px;
      font-size: 18px;
      line-height: 1.2;
    }

    .chat-list-actions-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .chat-list-quick-action {
      border: 0;
      border-radius: 18px;
      min-height: 78px;
      padding: 10px 8px;
      background: linear-gradient(180deg, rgba(245, 249, 255, 0.96) 0%, rgba(234, 242, 252, 0.96) 100%);
      color: #26415f;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 8px;
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.15;
      transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
      box-shadow: inset 0 0 0 1px rgba(207, 220, 237, 0.72);
      -webkit-tap-highlight-color: transparent;
    }

    .chat-list-quick-action i {
      font-size: 18px;
      line-height: 1;
      color: var(--accent-dark);
    }

    .chat-list-quick-action:active {
      transform: scale(0.97);
    }

    .chat-list-quick-action.is-danger {
      background: linear-gradient(180deg, rgba(255, 242, 244, 0.98) 0%, rgba(255, 229, 233, 0.98) 100%);
      color: #8e3040;
      box-shadow: inset 0 0 0 1px rgba(246, 195, 203, 0.82);
    }

    .chat-list-quick-action.is-danger i {
      color: #d44f63;
    }

    .chat-list-swipe-shell > .sidebar-item.is-action-target {
      background: rgba(233, 242, 255, 0.98);
      box-shadow: 0 16px 36px rgba(17, 34, 68, 0.12);
      transform: scale(0.992);
      transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat.is-action-target {
      background: rgba(229, 238, 249, 0.98);
    }

    .chat-list-folder-picker {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(226, 233, 242, 0.94);
    }

    .chat-list-folder-picker-head {
      margin-bottom: 10px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.01em;
    }

    .chat-list-folder-picker-options {
      display: grid;
      gap: 8px;
      max-height: 220px;
      overflow: auto;
    }

    .chat-list-folder-picker-option {
      border: 0;
      border-radius: 16px;
      padding: 12px 13px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      background: rgba(245, 249, 255, 0.95);
      color: var(--text);
      text-align: left;
      box-shadow: inset 0 0 0 1px rgba(207, 220, 237, 0.72);
      -webkit-tap-highlight-color: transparent;
    }

    .chat-list-folder-picker-option:active {
      transform: scale(0.985);
    }

    .chat-list-folder-picker-option:disabled {
      opacity: 0.52;
    }

    .chat-list-folder-picker-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--folder-accent);
      box-shadow: 0 0 0 3px rgba(31, 122, 236, 0.12);
    }

    .chat-list-folder-picker-option span {
      font-size: 14px;
      font-weight: 700;
    }

    .chat-list-folder-picker-option i {
      font-size: 14px;
      color: var(--accent-dark);
    }

    .message-reactions-picker-floating {
      position: absolute;
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: min(calc(100vw - 24px), 340px);
      margin: 0 !important;
      padding: 7px 9px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 16px 34px rgba(17, 34, 68, 0.14);
      z-index: 123;
      pointer-events: auto;
    }

    .message-actions-spacer {
      display: none;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    .message-actions-toolbar {
      position: absolute;
      margin-top: 0 !important;
      width: max-content;
      display: inline-flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      align-items: center;
      max-width: min(calc(100vw - 24px), 340px);
      z-index: 123;
      pointer-events: auto;
    }

    .message-actions-toolbar .button {
      width: auto;
      min-width: 0;
      min-height: 34px;
      padding: 8px 11px;
      border-radius: 999px;
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
      box-shadow: 0 14px 30px rgba(17, 34, 68, 0.14);
    }

    #cancelMessageActionButton,
    #messageActionsModal .profile-card-header,
    #messageActionsTitle,
    #messageActionsText {
      display: none !important;
    }

    .message-swipe-indicator {
      position: absolute;
      top: 50%;
      left: 10px;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.12);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      transform: translateY(-50%) scale(0.84);
      opacity: 0;
      transition: opacity 0.18s ease, transform 0.18s ease;
      pointer-events: none;
    }

    .message-row.self .message-swipe-indicator {
      left: auto;
      right: 10px;
    }

    .message-row.is-swipe-ready .message-swipe-indicator {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    .message-author {
      font-weight: 700;
      color: #3b4a60;
    }

    .message-author-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .message-author-avatar {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
    }

    .message-text {
      font-size: 15px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .message-row.system .message-text {
      font-size: 13px;
      line-height: 1.35;
      text-align: center;
      color: #586779;
    }

    .message-mention {
      border: 0;
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      line-height: inherit;
      cursor: pointer;
      color: #0f63d8;
      font-weight: 800;
      background: rgba(31, 122, 236, 0.14);
      border-radius: 8px;
      padding: 0 4px;
      margin: 0;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      -webkit-tap-highlight-color: transparent;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.12);
    }

    .message-mention-static {
      display: inline-block;
      cursor: default;
    }

    .message-forwarded {
      margin-bottom: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
    }

    .message-forwarded::before {
      content: '\f3e5';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      font-size: 12px;
      color: var(--accent-dark);
      opacity: 0.85;
    }

    .message-forwarded-author {
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--accent-dark);
      -webkit-tap-highlight-color: transparent;
    }

    .message-forwarded-author.is-hidden {
      color: var(--muted);
    }

    .message-reply-preview {
      width: 100%;
      margin: 0 0 10px;
      padding: 10px 11px 10px 12px;
      border: 0;
      border-radius: 15px;
      background: rgba(239, 245, 255, 0.94);
      border-left: 3px solid rgba(31, 122, 236, 0.82);
      display: grid;
      gap: 3px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .message-row.other .message-reply-preview {
      background: rgba(246, 248, 252, 0.96);
    }

    .message-reply-author {
      font-size: 12px;
      line-height: 1.3;
      font-weight: 700;
      color: var(--accent-dark);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .message-reply-text {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .message-row.is-highlighted .message-bubble {
      box-shadow:
        0 0 0 1px rgba(31, 122, 236, 0.2),
        0 10px 24px rgba(31, 122, 236, 0.12);
      border-color: rgba(31, 122, 236, 0.24);
    }

    .message-image {
      margin-bottom: 10px;
      border-radius: 18px;
      overflow: hidden;
      background: rgba(227, 236, 247, 0.7);
      border: 1px solid rgba(215, 225, 236, 0.9);
    }

    .message-image img {
      display: block;
      width: 100%;
      max-width: min(72vw, 320px);
      max-height: 320px;
      object-fit: cover;
      background: #fff;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .message-bubble.is-sticker {
      padding: 0;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .message-bubble.is-sticker .message-header {
      margin-bottom: 2px;
      padding: 0 4px;
    }

    .message-bubble.is-sticker .message-footer {
      margin-top: 6px;
      padding: 0 4px;
    }

    .message-image.is-sticker {
      margin-bottom: 0;
      border: none;
      background: transparent;
      border-radius: 14px;
      overflow: visible;
    }

    .message-image.is-sticker img {
      max-width: min(46vw, 176px);
      max-height: 176px;
      object-fit: contain;
      background: transparent;
      cursor: default;
      pointer-events: none;
    }

    .message-video {
      margin-bottom: 10px;
      border-radius: 18px;
      overflow: hidden;
      background: rgba(227, 236, 247, 0.7);
      border: 1px solid rgba(215, 225, 236, 0.9);
    }

    .message-video video {
      display: block;
      width: 100%;
      max-width: min(72vw, 320px);
      max-height: 360px;
      background: #0b0f14;
      object-fit: contain;
      -webkit-tap-highlight-color: transparent;
    }

    .message-reactions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: flex-start;
      flex: 1 1 auto;
      min-width: 0;
    }

    .message-reaction-chip {
      min-width: 38px;
      height: 28px;
      padding: 0 9px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 999px;
      background: rgba(246, 249, 253, 0.96);
      color: var(--text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 700;
      -webkit-tap-highlight-color: transparent;
    }

    .message-reaction-chip.is-active {
      background: rgba(31, 122, 236, 0.12);
      border-color: rgba(31, 122, 236, 0.22);
      color: var(--accent-dark);
    }

    .message-reaction-count {
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .message-reactions-picker {
      margin: 10px 0 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .message-reaction-picker-button {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 999px;
      background: rgba(247, 250, 255, 0.96);
      font-size: 20px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .message-reaction-picker-button.is-active {
      background: rgba(31, 122, 236, 0.12);
      border-color: rgba(31, 122, 236, 0.22);
    }

    .composer {
      padding: 14px 18px 18px;
      border-top: 1px solid rgba(215, 225, 236, 0.9);
      background: var(--panel-soft);
    }

    .composer textarea {
      min-height: 52px;
      max-height: 150px;
      resize: vertical;
      padding: 14px;
      border-radius: 18px;
      line-height: 1.45;
    }

    .composer-form {
      display: block;
    }

    .composer-form.is-sticker-open .composer-field-group {
      transform: translateY(-2px);
    }

    .composer-attachments {
      display: grid;
      gap: 10px;
      margin-bottom: 10px;
    }

    .composer-mention-picker {
      display: none;
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid rgba(215, 225, 236, 0.96);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 12px 28px rgba(17, 34, 68, 0.08);
      gap: 4px;
    }

    .composer-mention-picker.active {
      display: grid;
    }

    .composer-sticker-picker {
      display: grid;
      margin-top: 0;
      border: 1px solid rgba(215, 225, 236, 0.96);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 34px rgba(17, 34, 68, 0.1);
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(14px);
      pointer-events: none;
      margin-bottom: 0;
      transition:
        max-height 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease,
        transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        margin-bottom 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .composer-sticker-picker.active {
      max-height: 336px;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      margin-top: 10px;
      margin-bottom: 2px;
    }

    .composer-sticker-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      padding: 6px;
      border-bottom: 1px solid rgba(228, 235, 244, 0.92);
      background: rgba(246, 249, 253, 0.94);
    }

    .composer-sticker-tab {
      height: 38px;
      border: 0;
      border-radius: 16px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-sticker-tab.active {
      background: rgba(31, 122, 236, 0.12);
      color: var(--accent-dark);
    }

    .composer-sticker-grid {
      display: none;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 12px;
      max-height: 260px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .composer-sticker-grid.active {
      display: grid;
    }

    .composer-sticker-option {
      aspect-ratio: 1;
      border: 0;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(241, 247, 255, 0.96) 0%, rgba(230, 239, 255, 0.98) 100%);
      color: var(--accent-dark);
      display: grid;
      place-items: center;
      padding: 0;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-sticker-option img,
    .composer-sticker-option video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #0b0f14;
    }

    .composer-sticker-option span {
      font-size: 44px;
      line-height: 1;
    }

    .composer-mention-option {
      width: 100%;
      border: 0;
      background: transparent;
      border-radius: 14px;
      padding: 10px 12px;
      display: grid;
      gap: 2px;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-mention-option.is-active {
      background: rgba(31, 122, 236, 0.1);
    }

    .composer-mention-option-title {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--text);
    }

    .composer-mention-option-subtitle {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
    }

    .composer-edit-banner {
      display: none;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
      padding: 10px 12px;
      border: 1px solid rgba(31, 122, 236, 0.16);
      border-radius: 18px;
      background: rgba(235, 243, 255, 0.94);
    }

    .composer-edit-banner.active {
      display: grid;
    }

    .composer-reply-banner {
      display: none;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      padding: 8px 10px 8px 12px;
      border: 1px solid rgba(31, 122, 236, 0.12);
      border-radius: 14px;
      background: rgba(248, 251, 255, 0.92);
      position: relative;
      overflow: hidden;
    }

    .composer-reply-banner::before {
      content: '';
      position: absolute;
      left: 0;
      top: 7px;
      bottom: 7px;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(31, 122, 236, 0.96) 0%, rgba(31, 122, 236, 0.62) 100%);
    }

    .composer-reply-banner.active {
      display: grid;
    }

    .composer-reply-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
      padding-left: 4px;
    }

    .composer-reply-copy strong {
      font-size: 12px;
      line-height: 1.25;
      font-weight: 700;
      color: var(--accent-dark);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .composer-reply-copy span {
      font-size: 12px;
      line-height: 1.3;
      color: var(--muted);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .composer-reply-banner .composer-remove-attachment {
      width: 28px;
      height: 28px;
      min-width: 28px;
      border-radius: 10px;
      background: rgba(236, 243, 251, 0.92);
      color: var(--muted);
      font-size: 15px;
    }

    .composer-edit-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
      text-align: left;
    }

    .composer-edit-copy strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--accent-dark);
    }

    .composer-edit-copy span {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .message-text.is-deleted {
      font-style: italic;
      color: var(--muted);
    }

    .message-link {
      color: var(--accent-dark);
      font-weight: 600;
      text-decoration: none;
      word-break: break-word;
      border-bottom: 1px solid rgba(31, 122, 236, 0.18);
    }

    .message-link:active {
      opacity: 0.74;
    }

    .message-link-preview {
      margin-top: 10px;
      width: min(100%, 320px);
      border: 1px solid rgba(214, 224, 236, 0.94);
      border-radius: 18px;
      background: rgba(247, 250, 255, 0.96);
      overflow: hidden;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      text-align: left;
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, opacity 0.16s ease;
    }

    .message-row.self .message-link-preview {
      background: rgba(243, 248, 255, 0.96);
      border-color: rgba(187, 209, 241, 0.96);
    }

    .message-link-preview:active {
      transform: scale(0.992);
      box-shadow: 0 10px 22px rgba(17, 34, 68, 0.06);
    }

    .message-link-preview-image {
      width: 100%;
      aspect-ratio: 1.72;
      background: linear-gradient(180deg, rgba(231, 238, 248, 0.88), rgba(220, 230, 242, 0.92));
      overflow: hidden;
    }

    .message-link-preview-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .message-link-preview-body {
      display: grid;
      gap: 4px;
      padding: 12px 13px 13px;
    }

    .message-link-preview-site {
      font-size: 11px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--accent-dark);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .message-link-preview-title {
      font-size: 14px;
      line-height: 1.4;
      font-weight: 700;
      color: var(--text);
      word-break: break-word;
    }

    .message-link-preview-description {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
      word-break: break-word;
    }

    .message-link-preview-url {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      word-break: break-all;
    }

    .composer-image-preview {
      display: none;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
    }

    .composer-image-preview.active {
      display: grid;
    }

    .composer-audio-preview {
      display: none;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
    }

    .composer-audio-preview.active {
      display: grid;
    }

    .composer-video-preview {
      display: none;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
    }

    .composer-video-preview.active {
      display: grid;
    }

    .composer-video-thumb {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      overflow: hidden;
      background: #0b0f14;
      border: 1px solid rgba(215, 225, 236, 0.9);
      flex-shrink: 0;
      position: relative;
    }

    .composer-video-thumb::after {
      content: '▶';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.92);
      font-size: 16px;
      font-weight: 700;
      background: linear-gradient(180deg, rgba(7, 12, 20, 0.08), rgba(7, 12, 20, 0.28));
      pointer-events: none;
    }

    .composer-video-thumb video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #0b0f14;
    }

    .composer-file-preview {
      display: none;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
    }

    .composer-file-preview.active {
      display: grid;
    }

    .composer-file-icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      border: 1px solid rgba(215, 225, 236, 0.95);
      color: var(--accent-dark);
      font-size: 22px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .composer-audio-copy {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .composer-audio-copy strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--text);
    }

    .composer-audio-copy span {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }

    .composer-audio-player {
      width: 100%;
      min-width: 0;
      height: 36px;
    }

    .composer-image-thumb {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      overflow: hidden;
      background: rgba(227, 236, 247, 0.7);
      border: 1px solid rgba(215, 225, 236, 0.9);
      flex-shrink: 0;
    }

    .composer-image-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .composer-image-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .composer-image-copy strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--text);
    }

    .composer-image-copy span {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .composer-remove-attachment {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 999px;
      background: rgba(238, 243, 251, 0.95);
      color: var(--muted);
      font-size: 22px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-field-group {
      display: grid;
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
      min-height: 48px;
      transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .composer-input-shell {
      position: relative;
      min-width: 0;
    }

    .composer-input-shell textarea {
      padding-right: 58px;
    }

    .composer-input-shell.has-send textarea {
      padding-right: 102px;
    }

    .composer-attach-button {
      width: 44px;
      height: 44px;
      border: 1px solid var(--panel-border);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--accent-dark);
      font-size: 23px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .composer-send-button {
      position: absolute;
      right: 6px;
      bottom: 6px;
      width: 38px;
      max-width: 38px;
      min-width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 999px;
      font-size: 18px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(0.88);
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
      left: auto;
      flex: 0 0 38px;
    }

    .composer-send-button.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: scale(1);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .composer-voice-button {
      width: 44px;
      height: 44px;
      border: 1px solid var(--panel-border);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--accent-dark);
      font-size: 19px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: none;
      transition: width 0.18s ease, opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

    .composer-sticker-button {
      width: 44px;
      height: 44px;
      border: 1px solid rgba(214, 225, 239, 0.98);
      border-radius: 16px;
      background: rgba(248, 251, 255, 0.96);
      color: #6b7d97;
      font-size: 18px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .composer-sticker-button.is-inline {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border-color: transparent;
      border-width: 0;
      background: transparent;
      color: #8a96a8;
      box-shadow: none;
      font-size: 15px;
      z-index: 2;
    }

    .composer-input-shell.has-send .composer-sticker-button.is-inline {
      right: 50px;
    }

    .composer-sticker-button.is-inline:hover,
    .composer-sticker-button.is-inline:focus-visible {
      background: transparent;
      border-color: transparent;
      color: #6f7c90;
      box-shadow: none;
    }

    .composer-sticker-button:hover,
    .composer-sticker-button:focus-visible {
      background: rgba(239, 245, 255, 0.98);
      border-color: rgba(188, 207, 233, 0.98);
      color: var(--accent-dark);
    }

    .composer-poll-button {
      color: #5977a6;
    }

    .poll-options-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .poll-option-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .poll-option-remove {
      min-width: 42px;
      width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 14px;
    }

    .poll-add-option {
      align-self: flex-start;
    }

    .composer-voice-button.is-recording {
      background: rgba(255, 237, 237, 0.96);
      border-color: rgba(226, 90, 90, 0.28);
      color: #d94444;
    }

    .composer-voice-button.is-hidden {
      width: 0;
      min-width: 0;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.88);
      overflow: hidden;
      border-width: 0;
      padding: 0;
    }

    .composer-recording-bar {
      min-width: 0;
      height: 44px;
      border: 1px solid rgba(220, 228, 238, 0.96);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.96);
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 16px;
      overflow: hidden;
      position: relative;
    }

    .composer-recording-bar.active {
      display: flex;
      grid-column: 3 / 4;
    }

    .composer-recording-meta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      min-width: 0;
    }

    .composer-recording-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #ef4444;
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
      animation: composerRecordingBlink 1.05s ease-in-out infinite;
      flex-shrink: 0;
    }

    .composer-recording-timer {
      font-size: 14px;
      line-height: 1;
      font-weight: 700;
      color: #d94444;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
    }

    .composer-recording-cancel {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: 13px;
      line-height: 1;
      font-weight: 700;
      color: var(--muted);
      transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .composer-recording-bar.is-canceling .composer-recording-cancel {
      color: #d94444;
      transform: translateX(-50%) scale(1.03);
    }

    .composer-recording-bar.is-locked .composer-recording-cancel {
      color: var(--accent);
    }

    .composer-recording-cancel.is-actionable {
      pointer-events: auto;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-recording-cancel.is-actionable:active {
      transform: translateX(-50%) scale(0.97);
    }

    .composer-recording-lock-hint {
      position: absolute;
      right: 8px;
      bottom: 100%;
      margin-bottom: 10px;
      width: 42px;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 3;
    }

    .composer-recording-lock-hint.is-visible {
      display: flex;
    }

    .composer-recording-lock-track {
      position: absolute;
      bottom: -10px;
      width: 4px;
      height: 54px;
      border-radius: 999px;
      background: rgba(123, 141, 168, 0.18);
    }

    .composer-recording-lock-icon {
      position: relative;
      width: 32px;
      height: 32px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(220, 228, 238, 0.96);
      color: var(--accent);
      box-shadow: 0 12px 26px rgba(24, 44, 79, 0.12);
      transform: translateY(0);
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .composer-recording-lock-hint.is-armed .composer-recording-lock-icon {
      transform: translateY(-8px) scale(1.05);
      box-shadow: 0 16px 32px rgba(78, 124, 255, 0.18);
      background: rgba(237, 244, 255, 0.98);
    }

    .composer-field-group.is-recording-locked .composer-recording-lock-hint {
      display: none;
    }

    .composer-voice-button.is-pressing {
      transform: scale(1.06);
      background: rgba(237, 244, 255, 0.98);
      border-color: rgba(78, 124, 255, 0.34);
    }

    .composer-voice-button.is-locked {
      background: rgba(78, 124, 255, 0.12);
      border-color: rgba(78, 124, 255, 0.32);
      color: var(--accent);
    }

    .composer-field-group.is-recording .composer-input-shell {
      display: none;
    }

    .composer-field-group.is-recording .composer-sticker-button,
    .composer-field-group.is-recording .composer-attach-button {
      opacity: 0.4;
      pointer-events: none;
    }

    .composer-attach-button.is-recording-hidden,
    .composer-sticker-button.is-recording-hidden {
      width: 0;
      min-width: 0;
      opacity: 0;
      transform: translateX(-18px) scale(0.86);
      pointer-events: none;
      overflow: hidden;
      border-width: 0;
      padding: 0;
    }

    @keyframes composerRecordingBlink {
      0%,
      100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.42);
      }
      50% {
        opacity: 0.4;
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
      }
    }

    .message-audio {
      margin-bottom: 10px;
      width: min(72vw, 320px);
      padding: 10px 12px 11px;
      border-radius: 16px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      background: rgba(245, 249, 255, 0.92);
      border: 1px solid rgba(215, 225, 236, 0.92);
    }

    .message-row.self .message-audio {
      background: rgba(234, 244, 255, 0.94);
      border-color: rgba(191, 214, 241, 0.95);
    }

    .message-audio-button {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 999px;
      background: var(--accent-dark);
      color: #fff;
      font-size: 16px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
      transition: transform 0.22s ease, background 0.22s ease;
    }

    .message-audio.is-playing .message-audio-button {
      transform: scale(1.04);
      background: #1769d0;
    }

    .message-audio.is-playing .message-audio-button i::before {
      content: "\f04c";
    }

    .message-audio-progress {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .message-audio-waveform {
      position: relative;
      width: 100%;
      height: 22px;
      overflow: hidden;
      border-radius: 10px;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(31, 122, 236, 0.16) 0 4px,
          transparent 4px 8px
        );
      mask-image:
        linear-gradient(
          180deg,
          transparent 0%,
          rgba(0, 0, 0, 0.7) 18%,
          rgba(0, 0, 0, 1) 40%,
          rgba(0, 0, 0, 1) 60%,
          rgba(0, 0, 0, 0.7) 82%,
          transparent 100%
        );
    }

    .message-audio-waveform::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.18), transparent 26%, transparent 74%, rgba(255,255,255,0.08)),
        repeating-linear-gradient(
          90deg,
          rgba(31, 122, 236, 0.09) 0 4px,
          transparent 4px 8px
        );
      opacity: 0;
      transition: opacity 0.22s ease;
      pointer-events: none;
    }

    .message-audio.is-playing .message-audio-waveform::before {
      opacity: 1;
    }

    .message-audio-waveform-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0%;
      background:
        repeating-linear-gradient(
          90deg,
          #1f7aec 0 4px,
          transparent 4px 8px
        );
      pointer-events: none;
    }

    .message-audio-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      line-height: 1.3;
      color: var(--muted);
    }

    .message-audio-time {
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }

    .message-audio-speed {
      min-width: 42px;
      height: 34px;
      border: 0;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.1);
      color: var(--accent-dark);
      font-size: 12px;
      font-weight: 700;
      padding: 0 10px;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
      transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .message-audio.is-playing .message-audio-speed {
      background: rgba(31, 122, 236, 0.14);
      transform: translateY(-0.5px);
    }

    .message-audio-native {
      display: none;
    }

    .message-file {
      width: min(72vw, 320px);
      margin-bottom: 10px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      background: rgba(245, 249, 255, 0.92);
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      color: inherit;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }

    .message-row.self .message-file {
      background: rgba(234, 244, 255, 0.94);
      border-color: rgba(191, 214, 241, 0.95);
    }

    .message-file-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      border: 1px solid rgba(215, 225, 236, 0.95);
      color: var(--accent-dark);
      font-size: 18px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .message-file-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .message-file-name {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-file-meta {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-contact {
      width: min(72vw, 320px);
      margin-bottom: 10px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      background: rgba(245, 249, 255, 0.92);
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      text-align: left;
      color: inherit;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }

    .message-row.self .message-contact {
      background: rgba(234, 244, 255, 0.94);
      border-color: rgba(191, 214, 241, 0.95);
    }

    .message-contact-avatar {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 16px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      flex-shrink: 0;
    }

    .message-contact-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .message-contact-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .message-contact-label {
      font-size: 11px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--accent-dark);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .message-contact-name {
      font-size: 15px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-contact-secondary {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-poll {
      width: min(74vw, 340px);
      margin-bottom: 10px;
      display: grid;
      gap: 10px;
    }

    .message-poll-question {
      font-size: 15px;
      line-height: 1.4;
      font-weight: 700;
      color: var(--text);
    }

    .message-poll-options {
      display: grid;
      gap: 8px;
    }

    .message-poll-option {
      position: relative;
      overflow: hidden;
      width: 100%;
      border: 1px solid rgba(214, 225, 239, 0.92);
      border-radius: 15px;
      background: rgba(246, 249, 255, 0.94);
      padding: 11px 13px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      text-align: left;
      color: inherit;
      -webkit-tap-highlight-color: transparent;
    }

    .message-row.self .message-poll-option {
      background: rgba(235, 244, 255, 0.95);
      border-color: rgba(192, 214, 241, 0.95);
    }

    .message-poll-option.is-selected {
      border-color: rgba(107, 149, 214, 0.55);
      color: var(--accent-dark);
    }

    .message-poll-option[disabled] {
      opacity: 0.92;
    }

    .message-poll-option-bar {
      position: absolute;
      inset: 0 auto 0 0;
      background: linear-gradient(90deg, rgba(111, 155, 223, 0.2) 0%, rgba(111, 155, 223, 0.05) 100%);
      pointer-events: none;
    }

    .message-poll-option-label,
    .message-poll-option-meta {
      position: relative;
      z-index: 1;
    }

    .message-poll-option-label {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 600;
      color: var(--text);
    }

    .message-poll-option-meta {
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
      color: var(--muted);
    }

    .message-poll-summary {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
    }

    .helper-text {
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
    }

    .settings-actions {
      padding: 0 18px 18px;
      margin-top: 12px;
    }

    .settings-card {
      margin: 0 18px;
      padding: 18px;
      border: 1px solid var(--panel-border);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--muted);
      line-height: 1.5;
    }

    .settings-links {
      margin: 0 18px 12px;
      display: grid;
      gap: 10px;
    }

    .settings-link-card {
      width: 100%;
      border: 1px solid var(--panel-border);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.78);
      padding: 16px 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

    .settings-link-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .settings-link-copy strong {
      font-size: 15px;
      line-height: 1.3;
      color: var(--text);
    }

    .settings-link-copy span {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .settings-link-chevron {
      font-size: 16px;
      line-height: 1;
      color: var(--muted);
      transition: transform 0.18s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .settings-action-card {
      position: relative;
      align-items: start;
      min-height: 76px;
      padding-right: 54px;
    }

    .settings-link-action-icon {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(31, 122, 236, 0.1);
      color: var(--accent-dark);
      font-size: 14px;
      line-height: 1;
    }

    .settings-link-card.is-open .settings-link-chevron {
      transform: rotate(90deg);
    }

    .profile-link-card {
      margin-top: 16px;
    }

    .settings-link-value {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .settings-detail-card {
      width: min(100%, 420px);
      margin: 0 auto;
      padding: 18px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 14px 34px rgba(17, 34, 68, 0.08);
      display: grid;
      gap: 14px;
    }

    .settings-detail-note {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted);
    }

    .settings-profile {
      margin: 0 18px 12px;
      padding: 18px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      border: 1px solid var(--panel-border);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 8px 24px rgba(17, 34, 68, 0.05);
    }

    .settings-profile-main {
      min-width: 0;
    }

    .settings-profile-avatar {
      width: 64px;
      height: 64px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 22px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .settings-profile-avatar.has-image {
      background: #fff;
    }

    .settings-profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .settings-profile-name {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    .settings-profile-phone {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .settings-profile-actions {
      align-self: start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .settings-profile-icon-button {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 12px;
      background: rgba(236, 244, 255, 0.9);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      -webkit-tap-highlight-color: transparent;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    .settings-profile-icon-button:active {
      transform: scale(0.96);
    }

    html.theme-dark .settings-profile-icon-button {
      background: rgba(12, 22, 37, 0.92);
      color: var(--accent-dark);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .settings-profile-username-button,
    .profile-main-username-button {
      margin: 4px 0 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--accent-dark);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      display: none;
      -webkit-tap-highlight-color: transparent;
    }

    .settings-profile-username-button.is-visible,
    .profile-main-username-button.is-visible {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .settings-profile-username-button::after,
    .profile-main-username-button::after {
      content: '⋯';
      color: rgba(22, 100, 196, 0.52);
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
    }

    .profile-main-username-button {
      text-align: center;
      justify-content: center;
    }

    .settings-profile-edit {
      margin: 0 18px 12px;
    }

    .settings-edit-card {
      margin: 0 18px 12px;
      padding: 18px;
      border: 1px solid var(--panel-border);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.78);
      display: none;
      gap: 14px;
    }

    .settings-edit-card.active {
      display: grid;
    }

    .settings-edit-avatar {
      display: grid;
      justify-items: center;
      gap: 12px;
    }

    .profile-qr-card {
      width: min(100%, 360px);
      text-align: center;
    }

    .profile-qr-body {
      display: grid;
      gap: 14px;
      justify-items: center;
    }

    .profile-qr-image {
      width: 220px;
      height: 220px;
      max-width: 100%;
      border-radius: 22px;
      border: 1px solid var(--panel-border);
      background: #fff;
      padding: 12px;
      object-fit: contain;
      box-shadow: 0 10px 26px rgba(17, 34, 68, 0.08);
    }

    .profile-qr-link {
      width: 100%;
      font-size: 13px;
      line-height: 1.5;
      color: var(--muted);
      word-break: break-all;
    }

    html.theme-dark .profile-qr-image {
      background: #ffffff;
      border-color: rgba(30, 45, 67, 0.96);
      box-shadow: 0 12px 30px rgba(2, 8, 18, 0.3);
    }

    .settings-edit-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .settings-toggle {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.76);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

    .settings-toggle-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .settings-toggle-copy strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--text);
    }

    .settings-toggle-copy span {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }

    .settings-toggle-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .settings-toggle-switch {
      width: 46px;
      height: 28px;
      border-radius: 999px;
      background: #d7e1ec;
      position: relative;
      transition: background 0.2s ease;
      flex-shrink: 0;
      justify-self: end;
      -webkit-tap-highlight-color: transparent;
    }

    .settings-toggle-switch::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 4px 10px rgba(17, 34, 68, 0.14);
      transition: transform 0.2s ease;
    }

    .settings-toggle-input:checked + .settings-toggle-switch {
      background: var(--accent);
    }

    .settings-toggle-input:checked + .settings-toggle-switch::after {
      transform: translateX(18px);
    }

    .chat-info-permissions {
      display: grid;
      gap: 12px;
      padding: 14px 0 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }

    .chat-info-permissions-head {
      display: grid;
      gap: 4px;
      padding: 0 2px 2px;
      background: transparent;
      border: 0;
    }

    .chat-info-permissions-head strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--text);
    }

    .chat-info-permissions-head span {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .chat-info-permissions .settings-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 58px;
      padding: 14px 16px;
      border: 1px solid rgba(220, 228, 238, 0.96);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 22px rgba(27, 45, 80, 0.06);
    }

    .chat-info-permissions .settings-toggle-copy {
      flex: 1 1 auto;
      gap: 0;
    }

    .chat-info-permissions .settings-toggle-switch {
      flex: 0 0 auto;
      align-self: center;
      margin-left: 0;
    }

    .chat-info-permissions.is-disabled .settings-toggle {
      opacity: 0.62;
    }

    .chat-info-permissions .settings-toggle-copy strong {
      font-size: 14px;
      line-height: 1.35;
    }

    .chat-info-public-cta,
    .chat-info-public-highlights,
    .chat-info-public-preview {
      margin-top: 14px;
    }

    .chat-info-public-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      padding: 8px 12px;
      margin: 2px auto 0;
      border-radius: 999px;
      background: rgba(70, 129, 226, 0.12);
      color: var(--accent-strong);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .chat-info-public-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 2px;
    }

    .chat-info-public-meta-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(214, 226, 242, 0.96);
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .chat-info-public-cta {
      display: grid;
      gap: 6px;
      margin-top: 14px;
      padding: 16px 18px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(31, 122, 236, 0.08), rgba(31, 122, 236, 0.04));
      border: 1px solid rgba(31, 122, 236, 0.14);
      text-align: left;
    }

    .chat-info-public-cta strong {
      font-size: 14px;
      line-height: 1.35;
      color: var(--text);
    }

    .chat-info-public-cta span {
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .profile-actions.is-public-preview {
      gap: 12px;
      margin-top: 18px;
    }

    .profile-actions.is-public-preview .button {
      min-height: 50px;
    }

    .profile-actions.is-public-preview .button.button-primary {
      box-shadow: 0 14px 28px rgba(31, 122, 236, 0.18);
    }

    .chat-info-public-highlights {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .chat-info-public-highlight {
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(217, 228, 241, 0.98);
      text-align: left;
      box-shadow: 0 2px 10px rgba(53, 78, 117, 0.04);
    }

    .chat-info-public-highlight strong {
      display: block;
      font-size: 13px;
      line-height: 1.35;
      color: var(--text);
      margin-bottom: 4px;
    }

    .chat-info-public-highlight span {
      display: block;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .chat-info-public-preview {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .chat-info-public-preview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 4px;
    }

    .chat-info-public-preview-head strong {
      font-size: 14px;
      line-height: 1.35;
      color: var(--text);
    }

    .chat-info-public-preview-head span {
      font-size: 12px;
      color: var(--muted);
    }

    .chat-info-public-preview-list {
      display: grid;
      gap: 10px;
    }

    .chat-info-public-preview-item {
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(217, 228, 241, 0.98);
      text-align: left;
      box-shadow: 0 2px 10px rgba(53, 78, 117, 0.04);
    }

    .chat-info-public-preview-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }

    .chat-info-public-preview-author {
      min-width: 0;
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-info-public-preview-time {
      flex-shrink: 0;
      font-size: 11px;
      color: var(--muted);
    }

    .chat-info-public-preview-text {
      font-size: 13px;
      line-height: 1.5;
      color: var(--text);
      word-break: break-word;
    }

    .chat-info-public-preview-type {
      display: inline-flex;
      align-items: center;
      margin-bottom: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(70, 129, 226, 0.1);
      color: var(--accent-strong);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .app-language-options {
      display: grid;
      gap: 10px;
    }

    .app-language-option {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.84);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .app-language-option.is-active {
      border-color: rgba(31, 122, 236, 0.24);
      background: linear-gradient(180deg, #eef5ff 0%, #deebff 100%);
    }

    .app-language-option-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .app-language-option-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
    }

    .app-language-option-subtitle {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .app-language-option-check {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1.5px solid rgba(31, 122, 236, 0.24);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.78);
    }

    .app-language-option:not(.is-active) .app-language-option-check {
      color: transparent;
    }

    .bottom-tabs {
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      width: min(calc(100% - 24px), 1180px);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 10px;
      border: 1px solid rgba(215, 225, 236, 0.94);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 18px 40px rgba(17, 34, 68, 0.10);
      backdrop-filter: blur(14px);
      z-index: 20;
      overflow: hidden;
      isolation: isolate;
    }

    .bottom-tabs-indicator {
      --indicator-x: 0px;
      --indicator-y: 0px;
      --indicator-scale-x: 0.94;
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      border-radius: 18px;
      background: linear-gradient(180deg, #eef5ff 0%, #deebff 100%);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
      opacity: 0;
      transform: translate3d(var(--indicator-x), var(--indicator-y), 0) scaleX(var(--indicator-scale-x));
      transform-origin: center center;
      transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
      pointer-events: none;
      z-index: 0;
    }

    .bottom-tabs-indicator.prerender {
      transition: none !important;
    }

    .bottom-tabs-indicator.ready {
      opacity: 1;
      --indicator-scale-x: 1;
    }

    .bottom-tabs-indicator.is-moving {
      --indicator-scale-x: 1.06;
    }

    .bottom-tab-button {
      position: relative;
      z-index: 1;
      height: 50px;
      border: 0;
      border-radius: 16px;
      background: transparent;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

    .bottom-tab-button:hover {
      transform: translateY(-1px);
    }

    .bottom-tab-button.active {
      color: var(--accent-dark);
    }

    .bottom-tab-button.active:hover {
      color: var(--accent-dark);
    }

    .chat-profile-button,
    .message-profile-button,
    .chat-search-button,
    .profile-edit-button,
    .profile-main-username-button,
    .settings-profile-username-button,
    .settings-link-card,
    .sidebar-item-inline-action,
    .blocked-list-action,
    .chat-list-action-button,
    .message-action-button,
    .composer-attach-button,
    .composer-sticker-button,
    .composer-voice-button,
    .composer-send-button,
    .shared-media-item,
    .shared-file-item,
    .shared-link-item,
    .shared-voice-item,
    .shared-file-filter-chip,
    .shared-file-sort-button {
      transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease,
        opacity 0.16s ease,
        box-shadow 0.16s ease;
    }

    .chat-profile-button:active,
    .message-profile-button:active,
    .profile-main-username-button:active,
    .settings-profile-username-button:active {
      opacity: 0.74;
      transform: scale(0.992);
    }

    .chat-search-button:active,
    .profile-edit-button:active,
    .message-action-button:active,
    .composer-attach-button:active,
    .composer-sticker-button:active,
    .composer-voice-button:active:not(.is-hidden),
    .composer-send-button:active,
    .blocked-list-action:active,
    .chat-list-action-button:active,
    .shared-file-filter-chip:active,
    .shared-file-sort-button:active,
    .bottom-tab-button:active {
      transform: scale(0.975);
    }

    .settings-link-card:active,
    .shared-file-item:active,
    .shared-link-item:active,
    .shared-voice-item:active {
      background: rgba(248, 251, 255, 0.94);
      border-color: rgba(188, 209, 238, 0.96);
      box-shadow: 0 12px 28px rgba(17, 34, 68, 0.06);
    }

    .shared-media-item:active {
      transform: scale(0.986);
      box-shadow: 0 12px 28px rgba(17, 34, 68, 0.08);
    }

    .sidebar-item-inline-action {
      cursor: pointer;
    }

    .sidebar-item-inline-action:active {
      background: rgba(31, 122, 236, 0.16);
      transform: scale(0.98);
    }

    .button:focus-visible,
    .text-button:focus-visible,
    .chat-profile-button:focus-visible,
    .message-profile-button:focus-visible,
    .chat-search-button:focus-visible,
    .profile-edit-button:focus-visible,
    .profile-main-username-button:focus-visible,
    .settings-profile-username-button:focus-visible,
    .settings-link-card:focus-visible,
    .sidebar-item-inline-action:focus-visible,
    .blocked-list-action:focus-visible,
    .chat-list-action-button:focus-visible,
    .message-action-button:focus-visible,
    .composer-attach-button:focus-visible,
    .composer-sticker-button:focus-visible,
    .composer-voice-button:focus-visible,
    .composer-send-button:focus-visible,
    .shared-media-item:focus-visible,
    .shared-file-item:focus-visible,
    .shared-link-item:focus-visible,
    .shared-voice-item:focus-visible,
    .shared-file-filter-chip:focus-visible,
    .shared-file-sort-button:focus-visible,
    .bottom-tab-button:focus-visible {
      outline: 2px solid rgba(31, 122, 236, 0.42);
      outline-offset: 2px;
    }

    .profile-modal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(13, 26, 44, 0.36);
      backdrop-filter: blur(8px);
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.24s ease, visibility 0.24s ease;
    }

    .profile-modal.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .profile-panel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 24;
      background:
        radial-gradient(circle at top, rgba(31, 122, 236, 0.09), transparent 36%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
      visibility: hidden;
      transform: translate3d(100%, 0, 0);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s linear 0.28s;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .profile-panel.active {
      visibility: visible;
      transform: translate3d(0, 0, 0);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .profile-panel.no-transition {
      transition: none !important;
    }

    .profile-panel-header {
      padding: 14px 16px 12px;
      border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      flex-shrink: 0;
    }

    .profile-panel-header-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .profile-panel-title {
      margin: 0;
      text-align: center;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .profile-panel-body {
      min-height: 0;
      flex: 1 1 auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 26px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .compose-panel-content {
      width: min(100%, 560px);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .compose-panel-subtitle {
      margin: 0;
    }

    .compose-panel-actions {
      padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px));
      flex-shrink: 0;
      background: linear-gradient(180deg, rgba(247, 251, 255, 0), rgba(247, 251, 255, 0.92) 28%, rgba(247, 251, 255, 0.98) 100%);
    }

    .chat-info-member-role {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }

    .compose-contact-row {
      position: relative;
      width: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      text-align: left;
      display: block;
      -webkit-tap-highlight-color: transparent;
    }

    .compose-contact-row .sidebar-item-rich {
      align-items: center;
    }

    .compose-contact-check {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 1px solid rgba(31, 122, 236, 0.22);
      background: rgba(255, 255, 255, 0.88);
      color: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }

    .compose-contact-row.is-selected .compose-contact-check {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      transform: scale(1.03);
    }

    .profile-card {
      width: min(100%, 420px);
      padding: 28px 24px 22px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 18px 48px rgba(17, 34, 68, 0.14);
      text-align: center;
      transform: translateY(22px) scale(0.98);
      opacity: 0;
      transition: transform 0.26s ease, opacity 0.26s ease;
    }

    .profile-modal.active .profile-card {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .profile-card-header {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
    }

    .chat-folders-modal-card {
      width: min(100%, 520px);
      max-height: min(88vh, 760px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .chat-folders-modal-layout {
      display: grid;
      gap: 18px;
      min-height: 0;
      overflow-y: auto;
      padding-right: 4px;
    }

    .chat-folders-modal-section {
      display: grid;
      gap: 12px;
    }

    .chat-folders-modal-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .chat-folder-create-button {
      width: auto;
      padding-inline: 14px;
    }

    .chat-folder-color-options {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .chat-folder-color-option {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 2px solid transparent;
      background: var(--folder-accent);
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    }

    .chat-folder-color-option.active {
      border-color: var(--text);
    }

    .chat-folder-manage-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.72);
    }

    .chat-folder-manage-item.is-editing {
      border-color: var(--accent);
      box-shadow: 0 10px 24px rgba(31, 122, 236, 0.1);
    }

    .chat-folder-manage-main {
      border: 0;
      background: transparent;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      text-align: left;
      cursor: pointer;
    }

    .chat-folder-manage-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: var(--folder-accent);
      flex-shrink: 0;
    }

    .chat-folder-manage-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .chat-folder-manage-copy strong {
      font-size: 14px;
      color: var(--text);
    }

    .chat-folder-manage-copy span {
      font-size: 12px;
      color: var(--muted);
    }

    .chat-folder-manage-actions {
      display: flex;
      gap: 6px;
    }

    .chat-folder-manage-order {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid var(--panel-border);
      background: rgba(255, 255, 255, 0.82);
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .chat-folder-chat-option {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(226, 233, 242, 0.92);
      cursor: pointer;
      text-align: left;
    }

    .chat-folder-chat-option-input {
      width: 18px;
      height: 18px;
      margin: 0;
    }

    .chat-folder-chat-option-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .profile-panel-content {
      width: min(100%, 420px);
      margin: 0 auto;
      text-align: center;
    }

    .media-viewer {
      --viewer-drag-y: 0px;
      --viewer-scale: 1;
      --viewer-media-x: 0px;
      --viewer-media-y: 0px;
      --viewer-radius: 0px;
      --viewer-backdrop-opacity: 1;
      position: fixed;
      inset: 0;
      z-index: 60;
      background: transparent;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.24s ease, visibility 0s linear 0.24s;
      display: flex;
      flex-direction: column;
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      box-sizing: border-box;
      overflow: hidden;
    }

    .media-viewer::before,
    .media-viewer::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      background: var(--bg);
      pointer-events: none;
      z-index: 0;
    }

    .media-viewer::before {
      top: 0;
      height: env(safe-area-inset-top);
    }

    .media-viewer::after {
      bottom: 0;
      height: env(safe-area-inset-bottom);
    }

    .media-viewer.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .media-viewer-body {
      flex: 1 1 auto;
      height: 100%;
      position: relative;
      z-index: 1;
      isolation: isolate;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      overflow: hidden;
      touch-action: none;
    }

    .media-viewer-body::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(7, 12, 20, 0.96);
      opacity: var(--viewer-backdrop-opacity);
      transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
      z-index: 0;
    }

    .media-viewer.dragging .media-viewer-body::before {
      transition: none;
    }

    .media-viewer-image {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 100vw;
      max-height: 100%;
      display: block;
      margin: auto;
      border-radius: var(--viewer-radius);
      background: #111;
      object-fit: contain;
      box-shadow: none;
      user-select: none;
      -webkit-user-drag: none;
      transform-origin: center center;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
      image-rendering: auto;
      transform: translate3d(var(--viewer-media-x), calc(var(--viewer-media-y) + var(--viewer-drag-y)), 0) scale(var(--viewer-scale));
      transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .media-viewer.dragging .media-viewer-image {
      transition: none;
    }

    .media-viewer-clone {
      position: fixed;
      z-index: 61;
      display: block;
      margin: 0;
      object-fit: cover;
      background: #111;
      pointer-events: none;
      will-change: top, left, width, height, border-radius, opacity, transform;
      transition:
        top 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
    }

    .profile-close {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      background: #edf3fb;
      color: var(--muted);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .profile-main-avatar {
      width: 96px;
      height: 96px;
      margin: 0 auto 16px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 30px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .profile-main-avatar.has-image {
      background: #fff;
    }

    .profile-main-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .profile-main-name {
      margin: 0;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
    }

    .profile-name-row {
      display: flex;
      justify-content: center;
      align-items: center;
      width: fit-content;
      max-width: 100%;
      margin: 0 auto;
    }

    .profile-name-input {
      width: auto;
      min-width: 6ch;
      max-width: min(260px, calc(100vw - 180px));
      box-sizing: border-box;
      min-height: 48px;
      padding: 8px 14px;
      border: 0;
      border-radius: 16px;
      background: transparent;
      box-shadow: none;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      text-align: center;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
      transition:
        width 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
    }

    .profile-name-input:focus {
      outline: none;
      box-shadow: none;
      border: 0;
    }

    .profile-name-input[readonly] {
      cursor: default;
      pointer-events: none;
      caret-color: transparent;
    }

    .profile-name-input.is-editing {
      background: rgba(255, 255, 255, 0.98);
      box-shadow:
        inset 0 0 0 1px rgba(31, 122, 236, 0.2),
        0 0 0 4px rgba(31, 122, 236, 0.08);
      transform: translateY(-1px);
    }

    .profile-name-measure {
      position: absolute;
      left: -9999px;
      top: -9999px;
      visibility: hidden;
      white-space: pre;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.03em;
      padding: 8px 14px;
    }

    .profile-edit-button {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: #edf3fb;
      color: var(--accent-dark);
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    }

    .profile-edit-button.is-active {
      background: rgba(31, 122, 236, 0.14);
      transform: translateY(-1px);
    }

    .confirm-copy {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .profile-main-phone {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .message-checklist,
    .message-location {
      width: min(74vw, 340px);
      margin-bottom: 10px;
      padding: 13px 14px;
      border-radius: 16px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      background: rgba(245, 249, 255, 0.92);
      color: inherit;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }

    .message-row.self .message-checklist,
    .message-row.self .message-location {
      background: rgba(234, 244, 255, 0.94);
      border-color: rgba(191, 214, 241, 0.95);
    }

    .message-checklist {
      display: grid;
      gap: 10px;
    }

    .message-checklist-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    .message-checklist-items {
      display: grid;
      gap: 8px;
    }

    .message-checklist-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .message-checklist-bullet {
      color: var(--accent-dark);
      font-size: 13px;
      line-height: 1.3;
      padding-top: 2px;
    }

    .message-location {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      text-decoration: none;
    }

    .message-location-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      border: 1px solid rgba(215, 225, 236, 0.95);
      color: var(--accent-dark);
      font-size: 18px;
    }

    .message-location-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .message-location-label {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-location-meta {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
    }

    .message-location-live-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(228, 54, 54, 0.12);
      color: #c53b3b;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .profile-language {
      margin-top: 14px;
      text-align: left;
    }

    .profile-actions {
      margin-top: 24px;
      display: grid;
      gap: 10px;
    }

    .attach-actions-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attach-action-button {
      min-height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .attach-action-button i {
      font-size: 16px;
    }

    .location-actions-grid {
      grid-template-columns: 1fr;
    }

    .attach-contact-list {
      max-height: min(44vh, 360px);
      overflow-y: auto;
      margin-top: 8px;
      border-top: 1px solid rgba(230, 236, 244, 0.9);
      border-bottom: 1px solid rgba(230, 236, 244, 0.9);
    }

    .shared-media-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }

    .shared-media-tab {
      min-height: 42px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.82);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .shared-media-tab.active {
      background: linear-gradient(180deg, #eef5ff 0%, #deebff 100%);
      color: var(--accent-dark);
      border-color: rgba(31, 122, 236, 0.2);
    }

    .shared-media-status {
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
      text-align: center;
    }

    .shared-media-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .shared-media-item {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      appearance: none;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.82);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .shared-media-item-overlay {
      position: absolute;
      inset: auto 0 0 0;
      padding: 22px 10px 10px;
      background: linear-gradient(180deg, rgba(7, 12, 20, 0) 0%, rgba(7, 12, 20, 0.72) 58%, rgba(7, 12, 20, 0.86) 100%);
      color: #fff;
      display: grid;
      gap: 4px;
      text-align: left;
    }

    .shared-media-item-label {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.16);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
    }

    .shared-media-item-meta {
      font-size: 11px;
      line-height: 1.35;
      color: rgba(255, 255, 255, 0.88);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .shared-media-item-caption {
      font-size: 12px;
      line-height: 1.35;
      color: rgba(255, 255, 255, 0.94);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .shared-media-item img,
    .shared-media-item video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: #0f172a;
    }

    .shared-media-item.is-video video {
      transform: scale(1.02);
      filter: saturate(0.92) contrast(1.02);
    }

    .shared-media-item-play {
      position: absolute;
      inset: 50% auto auto 50%;
      transform: translate(-50%, -50%);
      width: 52px;
      height: 52px;
      border-radius: 999px;
      background: rgba(7, 12, 20, 0.72);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      line-height: 1;
      backdrop-filter: blur(10px);
      box-shadow: 0 12px 28px rgba(7, 12, 20, 0.28);
      pointer-events: none;
    }

    .shared-media-item-badge {
      position: absolute;
      right: 8px;
      bottom: 8px;
      min-width: 28px;
      min-height: 28px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(7, 12, 20, 0.72);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      backdrop-filter: blur(8px);
    }

    .shared-list {
      display: grid;
      gap: 10px;
    }

    .shared-section {
      display: grid;
      gap: 10px;
    }

    .shared-section + .shared-section {
      margin-top: 18px;
    }

    .shared-section-title {
      position: sticky;
      top: 0;
      z-index: 3;
      padding: 8px 2px;
      font-size: 12px;
      line-height: 1.3;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      background: linear-gradient(180deg, rgba(247, 250, 253, 0.96) 0%, rgba(247, 250, 253, 0.88) 100%);
      backdrop-filter: blur(10px);
    }

    .shared-section-body {
      display: grid;
      gap: 10px;
    }

    .shared-file-item,
    .shared-link-item,
    .shared-voice-item {
      width: 100%;
      appearance: none;
      border: 1px solid rgba(215, 225, 236, 0.92);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.84);
      padding: 14px 16px;
      display: grid;
      gap: 6px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 10px 26px rgba(17, 34, 68, 0.05);
    }

    .shared-file-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .shared-file-controls::-webkit-scrollbar {
      display: none;
    }

    .shared-file-filter-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: max-content;
    }

    .shared-file-filter-chip,
    .shared-file-sort-button {
      border: 1px solid rgba(216, 225, 236, 0.96);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.84);
      color: var(--muted);
      min-height: 34px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
    }

    .shared-file-filter-chip.active,
    .shared-file-sort-button {
      color: var(--accent-dark);
      border-color: rgba(163, 198, 239, 0.96);
      background: rgba(232, 242, 255, 0.92);
    }

    .shared-file-filter-chip:not(.active):active,
    .shared-file-sort-button:active {
      transform: scale(0.98);
    }

    .shared-file-head,
    .shared-link-head,
    .shared-voice-head {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
    }

    .shared-file-icon,
    .shared-link-icon,
    .shared-voice-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: linear-gradient(180deg, #eef5ff 0%, #deebff 100%);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      flex-shrink: 0;
    }

    .chat-back-button i,
    .profile-close i,
    .profile-edit-button i,
    .composer-sticker-button i,
    .composer-voice-button i,
    .composer-send-button i,
    .settings-link-chevron i,
    .message-audio-button i,
    .shared-media-item-play i,
    .shared-media-item-badge i,
    .shared-voice-icon i,
    .shared-link-icon i,
    .compose-contact-check i {
      pointer-events: none;
    }

    .shared-file-name,
    .shared-link-url,
    .shared-voice-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .shared-file-meta,
    .shared-link-meta,
    .shared-link-text,
    .shared-voice-meta {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .shared-file-kicker,
    .shared-link-kicker,
    .shared-voice-kicker {
      display: inline-flex;
      align-items: center;
      align-self: start;
      width: fit-content;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.08);
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .shared-voice-item audio,
    .shared-video-inline {
      width: 100%;
      margin-top: 2px;
      border-radius: 14px;
      overflow: hidden;
      background: #0f172a;
      accent-color: var(--accent-dark);
    }

    .shared-voice-item .message-audio {
      width: 100%;
      margin: 2px 0 0;
    }

    .shared-media-caption,
    .shared-file-caption,
    .shared-voice-caption {
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .shared-link-text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .shared-empty {
      padding: 18px 12px;
      text-align: center;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      html,
      body {
        background: #ffffff !important;
        background-color: #ffffff !important;
      }

      body {
        padding: 0;
      }

      .screen {
        padding: 0;
      }

      .login-screen,
      .app-shell {
        min-height: 100vh;
      }

      .login-card,
      .app-shell {
        border-radius: 0;
        border: 0;
      }

      .app-screen-shell {
        padding-bottom: 88px;
      }

      .bottom-tabs {
        bottom: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
      }
    }

    @media (max-width: 760px) {
      .app-shell {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        min-width: 0;
        max-height: 380px;
        border-right: 0;
        border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      }

      .composer-form,
      .code-actions {
        grid-template-columns: 1fr;
      }

      .phone-input-wrap {
        grid-template-columns: 1fr;
        height: auto;
        gap: 8px;
        padding: 12px 14px;
      }

      .phone-prefix {
        min-width: 0;
        padding-right: 0;
        padding-bottom: 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      }

      .otp-grid {
        gap: 8px;
      }

      .button {
        width: 100%;
      }

      .composer-send-button {
        width: 38px;
        max-width: 38px;
        min-width: 38px;
      }

      .message-bubble {
        max-width: 88%;
      }

      #removeContactModal {
        align-items: flex-end;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
      }

      #removeContactModal .profile-card {
        width: 100%;
        max-width: none;
        padding: 22px 20px 18px;
        border-radius: 26px 26px 18px 18px;
        max-height: min(82vh, 760px);
        overflow-y: auto;
        transform: translateY(36px);
      }

      #removeContactModal.active .profile-card {
        transform: translateY(0);
      }

      #removeContactModal .profile-card-header {
        position: sticky;
        top: 0;
        z-index: 1;
        margin: -4px 0 12px;
        padding-bottom: 4px;
        background: rgba(255, 255, 255, 0.92);
      }

      #usernameActionsModal,
      #inviteLinkActionsModal,
      #sharedMediaActionsModal {
        align-items: flex-end;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
      }

      #usernameActionsModal .profile-card,
      #inviteLinkActionsModal .profile-card,
      #sharedMediaActionsModal .profile-card {
        width: 100%;
        max-width: none;
        padding: 22px 20px 18px;
        border-radius: 26px 26px 18px 18px;
        max-height: min(82vh, 760px);
        overflow-y: auto;
        transform: translateY(36px);
      }

      #usernameActionsModal.active .profile-card,
      #inviteLinkActionsModal.active .profile-card,
      #sharedMediaActionsModal.active .profile-card {
        transform: translateY(0);
      }

      #usernameActionsModal .profile-card-header,
      #inviteLinkActionsModal .profile-card-header,
      #sharedMediaActionsModal .profile-card-header {
        position: sticky;
        top: 0;
        z-index: 1;
        margin: -4px 0 12px;
        padding-bottom: 4px;
        background: rgba(255, 255, 255, 0.92);
      }

      .login-card {
        padding: 24px;
      }

      .onboarding-card {
        padding: 24px;
      }

      .login-brand h1 {
        font-size: 28px;
      }

      .login-brand p {
        font-size: 14px;
      }
    }

    /* Mobile-first app shell overrides */
    html,
    body {
      background: #ffffff;
      background-color: #ffffff;
    }

    #appScreen {
      height: 100dvh;
      min-height: 100dvh;
      padding: 0;
      overflow: hidden;
      overscroll-behavior: none;
      background: #ffffff;
    }

    .app-screen-shell {
      width: min(100%, 520px);
      height: 100dvh;
      min-height: 100dvh;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding-top: 0;
      padding-bottom: 0;
      background: #ffffff;
    }

    .app-screen-shell::before {
      display: none;
    }

    .app-shell {
      position: relative;
      flex: 1 1 auto;
      height: auto;
      min-height: 0;
      max-height: 100%;
      display: block;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(215, 225, 236, 0.88);
      border-radius: 0;
      border-top: 0;
      box-shadow: 0 18px 42px rgba(17, 34, 68, 0.08);
      backdrop-filter: blur(16px);
      overflow: hidden;
    }

    .sidebar {
      width: 100%;
      min-width: 0;
      height: 100%;
      min-height: 0;
      max-height: none;
      display: flex;
      flex-direction: column;
      border-right: 0;
      border-bottom: 0;
      background: transparent;
      overflow: hidden;
    }

    .sidebar-header {
      padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px 10px;
      border-bottom: 0;
      background: transparent;
    }

    .brand {
      margin-bottom: 8px;
    }

    .brand h2 {
      font-size: 22px;
      letter-spacing: -0.03em;
    }

    .brand p {
      margin-top: 6px;
      font-size: 13px;
    }

    .sidebar-panels-track {
      flex: 1 1 auto;
      min-height: 0;
    }

    .sidebar-panel {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      min-width: 100%;
      min-height: 0;
    }

    #settingsPanel {
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    }

    .sidebar-search {
      padding: 18px 18px 14px;
    }

    .sidebar-panel-header {
      padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 10px;
    }

    .sidebar-list {
      padding: 0 0 calc(112px + env(safe-area-inset-bottom, 0px));
      gap: 0;
    }

    .sidebar-item {
      padding: 14px 18px;
      border-radius: 0;
      background: transparent;
      border-color: rgba(226, 233, 242, 0.92);
      box-shadow: none;
    }

    .sidebar-item.active {
      background: transparent;
      border-color: rgba(226, 233, 242, 0.92);
    }

    .sidebar-item.is-pinned-chat,
    .sidebar-item.is-pinned-chat.active,
    .sidebar-item.is-pinned-chat:hover,
    .sidebar-item.is-pinned-chat:focus-visible {
      background: rgba(239, 244, 250, 0.9);
    }

    .sidebar-item.is-pinned-chat:active {
      background: rgba(229, 238, 249, 0.96);
    }

    .sidebar-item-title {
      font-size: 16px;
    }

    .sidebar-item-meta,
    .sidebar-item-secondary,
    .contacts-meta {
      font-size: 12px;
    }

    .chat-panel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 12;
      background:
        radial-gradient(circle at top, rgba(31, 122, 236, 0.09), transparent 36%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
      visibility: hidden;
      transform: translate3d(100%, 0, 0);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s linear 0.28s;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .chat-panel.active {
      visibility: visible;
      transform: translate3d(0, 0, 0);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .chat-panel.no-transition,
    .bottom-tabs.no-transition,
    .bottom-tabs.no-transition.hidden {
      transition: none !important;
    }

    .chat-header {
      padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
      border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      position: sticky;
      top: 0;
      z-index: 3;
      flex-shrink: 0;
    }

    .chat-header-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .profile-panel-header {
      padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
    }

    .chat-back-button {
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 14px;
      background: rgba(237, 243, 251, 0.96);
      color: var(--text);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .chat-profile-button {
      min-width: 0;
    }

    .chat-title {
      font-size: 17px;
      letter-spacing: -0.02em;
    }

    .chat-subtitle {
      margin-top: 3px;
      font-size: 12px;
      line-height: 1.4;
    }

    .status-badge {
      max-width: 96px;
      padding: 7px 10px;
      text-align: center;
      font-size: 11px;
    }

    .messages {
      min-height: 0;
      flex: 1 1 auto;
      padding: 16px 14px 8px;
      gap: 10px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .chat-contact-banner {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px;
      margin: 10px 14px 0;
      border-radius: 18px;
      border: 1px solid rgba(215, 225, 236, 0.9);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 10px 24px rgba(17, 34, 68, 0.04);
      flex-shrink: 0;
    }

    .chat-contact-banner.active {
      display: flex;
    }

    .chat-contact-banner-copy {
      min-width: 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .chat-contact-banner-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .chat-contact-banner-add {
      min-width: auto;
      height: 36px;
      padding: 0 14px;
      border-radius: 12px;
      font-size: 14px;
    }

    .chat-contact-banner-close {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 12px;
      background: rgba(237, 243, 251, 0.96);
      color: var(--muted);
      font-size: 18px;
      line-height: 1;
      flex-shrink: 0;
      cursor: pointer;
    }

    .chat-pinned-banner {
      padding: 8px 12px;
      gap: 8px;
    }

    .chat-pinned-banner-copy {
      flex: 1;
      min-width: 0;
      border: 0;
      background: transparent;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding: 0;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-pinned-banner-icon {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      background: rgba(31, 122, 236, 0.09);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }

    .chat-pinned-banner-text {
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .chat-pinned-banner-label {
      font-size: 11px;
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: var(--muted);
      text-transform: none;
    }

    .chat-pinned-banner-preview {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .message-bubble {
      max-width: 88%;
      padding: 12px 13px;
      border-radius: 20px;
    }

    .composer {
      margin-top: auto;
      flex-shrink: 0;
      padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      position: sticky;
      bottom: 0;
      z-index: 3;
    }

    .composer .field-group label,
    .helper-text {
      display: none;
    }

    .composer textarea {
      min-height: 50px;
      padding: 13px 14px;
      border-radius: 16px;
      resize: none;
    }

    .bottom-tabs {
      position: fixed;
      left: 50%;
      bottom: 0;
      width: min(100%, 520px);
      transform: translateX(-50%);
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
      border-radius: 24px 24px 0 0;
      border-bottom: 0;
      border-left: 0;
      border-right: 0;
      box-shadow: 0 -10px 28px rgba(17, 34, 68, 0.08);
    }

    .bottom-tabs.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(-50%) translateY(24px);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
    }

    .bottom-tab-button {
      height: 52px;
      border-radius: 18px;
    }

    @media (max-width: 560px) {
      .screen {
        padding: 0;
      }

      .login-screen {
        min-height: 100dvh;
      }

      .login-brand h1 {
        font-size: clamp(20px, 5.8vw, 22px);
        line-height: 1.15;
        letter-spacing: -0.03em;
        white-space: nowrap;
      }

      .auth-screen-shell {
        height: 100dvh;
        min-height: 100dvh;
        padding: 0;
        place-items: stretch;
        overflow: hidden;
      }

      .login-card,
      .onboarding-card {
        max-width: none;
        height: 100dvh;
        min-height: 100dvh;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        overflow: hidden;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.94);
        padding:
          calc(env(safe-area-inset-top, 0px) + 24px)
          24px
          calc(env(safe-area-inset-bottom, 0px) + 24px);
      }

      .auth-card-body {
        min-height: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 28px;
      }

      .auth-panel-stack {
        width: 100%;
      }

      .auth-panel {
        position: absolute;
        inset: 0;
      }

      .login-card .status-line,
      .onboarding-card .status-line {
        margin-top: 0;
        padding-top: 18px;
      }

      html,
      body,
      #appScreen,
      .app-screen-shell {
        width: 100%;
      }

      .app-shell,
      .login-card,
      .onboarding-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .app-screen-shell {
        width: 100%;
      }

      .status-badge {
        display: none;
      }
    }

    html.theme-dark .app-shell {
      background:
        linear-gradient(180deg, rgba(10, 17, 29, 0.97) 0%, rgba(8, 14, 24, 0.985) 100%);
      border-color: rgba(34, 50, 75, 0.92);
      box-shadow:
        0 22px 56px rgba(2, 8, 18, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    html.theme-dark .sidebar-panel-header,
    html.theme-dark .chat-header,
    html.theme-dark .profile-panel-header,
    html.theme-dark .bottom-tabs {
      background: var(--header-glass);
      border-color: var(--line-soft);
      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(24px) saturate(1.45);
      -webkit-backdrop-filter: blur(24px) saturate(1.45);
    }

    html.theme-dark .sidebar,
    html.theme-dark .sidebar-panel,
    html.theme-dark .profile-panel,
    html.theme-dark .messages,
    html.theme-dark .settings-screen-scroll,
    html.theme-dark .profile-panel-content {
      background: transparent;
    }

    html.theme-dark .chat-panel {
      background:
        radial-gradient(circle at top, rgba(31, 122, 236, 0.14), transparent 34%),
        linear-gradient(180deg, #0a1422 0%, #09111d 100%);
    }

    html.theme-dark .sidebar-item,
    html.theme-dark .chat-search-history-row,
    html.theme-dark .chat-search-result,
    html.theme-dark .chat-folder-manage-item,
    html.theme-dark .chat-folder-chat-option,
    html.theme-dark .shared-file-item,
    html.theme-dark .shared-link-item,
    html.theme-dark .shared-voice-item,
    html.theme-dark .shared-media-item,
    html.theme-dark .settings-link-card,
    html.theme-dark .settings-detail-card,
    html.theme-dark .settings-profile,
    html.theme-dark .settings-edit-card,
    html.theme-dark .forward-preview-card,
    html.theme-dark .chat-contact-banner,
    html.theme-dark .chat-pinned-banner,
    html.theme-dark .chat-search-panel,
    html.theme-dark .composer,
    html.theme-dark .composer-sticker-picker,
    html.theme-dark .composer-mention-picker,
    html.theme-dark .profile-card,
    html.theme-dark .chat-compose-actions-card,
    html.theme-dark .message-actions-toolbar,
    html.theme-dark .message-reactions,
    html.theme-dark .message-reactions-picker,
    html.theme-dark .message-reactions-picker-floating,
    html.theme-dark .chat-info-public-card,
    html.theme-dark .chat-info-meta-card,
    html.theme-dark .chat-info-onboarding-card,
    html.theme-dark .chat-info-permissions-card,
    html.theme-dark .chat-info-invite-card {
      background: var(--surface-elevated);
      border-color: var(--line-soft);
      box-shadow: var(--shadow);
    }

    html.theme-dark .sidebar-item,
    html.theme-dark .chat-search-history-row,
    html.theme-dark .chat-search-result,
    html.theme-dark .chat-folder-chat-option {
      background: transparent;
      box-shadow: none;
    }

    html.theme-dark .sidebar-item.active {
      background: rgba(22, 43, 70, 0.88);
      border-color: rgba(61, 121, 200, 0.24);
    }

    html.theme-dark .sidebar-item:active,
    html.theme-dark .chat-search-result:active,
    html.theme-dark .chat-folder-chat-option:active,
    html.theme-dark .shared-file-item:active,
    html.theme-dark .shared-link-item:active,
    html.theme-dark .shared-voice-item:active {
      background: rgba(22, 38, 60, 0.94);
      border-color: rgba(72, 113, 169, 0.32);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item {
      background: var(--list-row);
      border-bottom-color: rgba(42, 58, 84, 0.76);
      box-shadow: none;
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item.active,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item:hover,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item:focus-visible {
      background: var(--list-row-hover);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item:active {
      background: var(--list-row-active);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat.active,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:hover,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:focus-visible {
      background: rgba(18, 31, 49, 0.98);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:active {
      background: rgba(22, 38, 60, 0.98);
    }

    html.theme-dark .chat-folder-chip {
      background: rgba(11, 18, 29, 0.9);
      border-color: rgba(41, 58, 83, 0.88);
      color: var(--muted);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    html.theme-dark .chat-folder-chip.active {
      background: rgba(24, 48, 80, 0.92);
      border-color: rgba(69, 126, 203, 0.42);
      color: #e7f1ff;
      box-shadow: 0 12px 28px rgba(3, 10, 20, 0.28);
    }

    html.theme-dark .input,
    html.theme-dark .chat-search-input,
    html.theme-dark textarea,
    html.theme-dark select,
    html.theme-dark .phone-input,
    html.theme-dark .chat-list-search-input,
    html.theme-dark .composer-input,
    html.theme-dark .composer-input-shell,
    html.theme-dark .composer-recording-bar,
    html.theme-dark .composer-image-preview,
    html.theme-dark .composer-audio-preview,
    html.theme-dark .composer-video-preview,
    html.theme-dark .composer-file-preview {
      background: var(--input-bg);
      border-color: var(--line-strong);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    html.theme-dark .composer {
      background: var(--composer-surface);
      border-top-color: var(--line-soft);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(22px) saturate(1.25);
      -webkit-backdrop-filter: blur(22px) saturate(1.25);
    }

    html.theme-dark .composer-attach-button,
    html.theme-dark .composer-voice-button,
    html.theme-dark .composer-sticker-button,
    html.theme-dark .chat-search-button,
    html.theme-dark .chat-search-nav-button,
    html.theme-dark .chat-back-button,
    html.theme-dark .chat-search-clear,
    html.theme-dark .sidebar-header-action,
    html.theme-dark .chat-folder-manage-order,
    html.theme-dark .button-secondary,
    html.theme-dark .shared-file-sort-button,
    html.theme-dark .shared-file-filter-chip {
      background: rgba(16, 26, 40, 0.96);
      border-color: rgba(46, 65, 94, 0.94);
      color: var(--accent-dark);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    html.theme-dark .composer-sticker-button.is-inline,
    html.theme-dark .chat-search-clear {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      color: #7f93b0;
    }

    html.theme-dark .composer-sticker-button.is-inline:hover,
    html.theme-dark .composer-sticker-button.is-inline:focus-visible,
    html.theme-dark .chat-search-clear:hover,
    html.theme-dark .chat-search-clear:focus-visible {
      background: transparent;
      color: #9ab7df;
    }

    html.theme-dark .message-row.other .message-bubble {
      background: var(--bubble-other);
      border-color: rgba(53, 72, 103, 0.7);
      box-shadow: 0 10px 24px rgba(2, 8, 18, 0.24);
    }

    html.theme-dark .message-row.self .message-bubble {
      background: var(--bubble-self);
      border-color: rgba(86, 156, 239, 0.26);
      box-shadow: 0 10px 24px rgba(2, 8, 18, 0.18);
    }

    html.theme-dark .message-row.system .message-bubble {
      background: rgba(18, 30, 48, 0.84);
      border-color: rgba(53, 72, 103, 0.46);
      color: #c6d6eb;
    }

    html.theme-dark .message-row.system .message-text,
    html.theme-dark .message-header,
    html.theme-dark .message-footer,
    html.theme-dark .message-footer-badge,
    html.theme-dark .message-views,
    html.theme-dark .message-ticks {
      color: #9aafca;
    }

    html.theme-dark .message-footer-badge {
      background: rgba(9, 16, 28, 0.7);
      border-color: rgba(53, 72, 103, 0.5);
      box-shadow: 0 6px 14px rgba(2, 8, 18, 0.2);
    }

    html.theme-dark .message-row.self .message-footer-badge {
      background: rgba(8, 18, 32, 0.46);
      border-color: rgba(104, 163, 241, 0.26);
    }

    html.theme-dark .message-reply-preview {
      background: rgba(10, 18, 31, 0.88);
      border-left-color: rgba(97, 165, 244, 0.92);
    }

    html.theme-dark .message-row.other .message-reply-preview {
      background: rgba(12, 22, 36, 0.92);
    }

    html.theme-dark .message-link-preview {
      background: rgba(12, 20, 32, 0.96);
      border-color: rgba(44, 61, 88, 0.92);
      box-shadow: 0 14px 30px rgba(2, 8, 18, 0.28);
    }

    html.theme-dark .message-image,
    html.theme-dark .message-video {
      background: rgba(12, 20, 32, 0.9);
      border-color: rgba(49, 66, 92, 0.88);
    }

    html.theme-dark .message-reaction-chip {
      background: rgba(10, 18, 30, 0.94);
      border-color: rgba(52, 70, 98, 0.94);
      color: #d7e8ff;
    }

    html.theme-dark .message-reaction-chip.is-active {
      background: rgba(30, 72, 124, 0.3);
      border-color: rgba(88, 143, 221, 0.4);
      color: #eaf3ff;
    }

    html.theme-dark .message-reaction-picker-button {
      background: rgba(10, 18, 30, 0.94);
      border-color: rgba(52, 70, 98, 0.94);
    }

    html.theme-dark .message-action-button,
    html.theme-dark .composer-remove-attachment {
      background: rgba(16, 26, 40, 0.96);
      border: 1px solid rgba(45, 63, 90, 0.92);
      color: #93a8c4;
    }

    html.theme-dark .message-mention {
      color: #b8d7ff;
      background: rgba(31, 122, 236, 0.22);
      box-shadow: inset 0 0 0 1px rgba(88, 152, 231, 0.18);
    }

    html.theme-dark .profile-card,
    html.theme-dark .chat-list-actions-card,
    html.theme-dark .contacts-sort-popover-modal .contacts-sort-card {
      background:
        linear-gradient(180deg, rgba(15, 24, 38, 0.98) 0%, rgba(10, 18, 30, 0.98) 100%);
      border-color: rgba(38, 54, 78, 0.96);
      box-shadow: 0 24px 56px rgba(2, 7, 14, 0.5);
    }

    html.theme-dark .chat-list-actions-card.is-below-anchor::before {
      border-left-color: rgba(38, 54, 78, 0.96);
      border-top-color: rgba(38, 54, 78, 0.96);
    }

    html.theme-dark .chat-list-actions-card.is-above-anchor::before {
      border-right-color: rgba(38, 54, 78, 0.96);
      border-bottom-color: rgba(38, 54, 78, 0.96);
    }

    html.theme-dark .chat-list-quick-action,
    html.theme-dark .chat-list-folder-picker-option,
    html.theme-dark .contacts-sort-option {
      background: linear-gradient(180deg, rgba(18, 31, 49, 0.98) 0%, rgba(14, 24, 38, 0.98) 100%);
      color: #e5f0ff;
      box-shadow: inset 0 0 0 1px rgba(52, 70, 98, 0.9);
    }

    html.theme-dark .contacts-sort-option.is-active,
    html.theme-dark .chat-list-quick-action:not(.is-danger):active,
    html.theme-dark .chat-list-folder-picker-option:active {
      background: linear-gradient(180deg, rgba(25, 52, 86, 0.98) 0%, rgba(20, 43, 73, 0.98) 100%);
      box-shadow: inset 0 0 0 1px rgba(76, 128, 202, 0.48);
    }

    html.theme-dark .chat-list-quick-action.is-danger {
      background: linear-gradient(180deg, rgba(83, 28, 40, 0.98) 0%, rgba(63, 22, 31, 0.98) 100%);
      color: #ffd6de;
      box-shadow: inset 0 0 0 1px rgba(130, 55, 71, 0.9);
    }

    html.theme-dark .composer-sticker-tabs,
    html.theme-dark .chat-folders-modal-section,
    html.theme-dark .chat-folder-manage-form {
      background: rgba(10, 18, 30, 0.68);
      border-color: rgba(39, 56, 80, 0.88);
    }

    html.theme-dark .composer-sticker-option {
      background: linear-gradient(180deg, rgba(20, 34, 54, 0.98) 0%, rgba(14, 24, 38, 0.98) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    html.theme-dark .bottom-tab-button {
      color: #8297b5;
      text-shadow: none;
    }

    html.theme-dark .bottom-tab-button.active {
      color: #e9f2ff;
      text-shadow: 0 1px 8px rgba(12, 18, 28, 0.36);
      -webkit-text-fill-color: #e9f2ff;
    }

    html.theme-dark .bottom-tabs-indicator {
      background: linear-gradient(180deg, rgba(29, 57, 96, 0.98) 0%, rgba(21, 42, 72, 0.98) 100%);
      box-shadow:
        inset 0 0 0 1px rgba(95, 146, 218, 0.18),
        0 12px 24px rgba(2, 8, 18, 0.24);
    }

    html.theme-dark .status-badge,
    html.theme-dark .sidebar-header-action-count {
      background: rgba(31, 122, 236, 0.22);
      color: #e8f2ff;
      box-shadow: inset 0 0 0 1px rgba(81, 136, 210, 0.2);
    }

    html.theme-dark .profile-modal {
      background: rgba(2, 7, 14, 0.5);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    @media (hover: none) {
      .button,
      .text-button,
      .onboarding-upload,
      .sidebar-item,
      .bottom-tab-button,
      .chat-back-button,
      .composer-attach-button,
      .composer-remove-attachment {
        -webkit-tap-highlight-color: transparent;
      }

      .onboarding-upload:hover,
      .button:hover,
      .button-primary:hover,
      .sidebar-item:hover,
      .bottom-tab-button:hover {
        transform: none;
      }

      .button-primary:hover {
        background: var(--accent);
      }

      .onboarding-upload:hover {
        background: #edf3fb;
      }

      .sidebar-item:hover {
        background: rgba(255, 255, 255, 0.72);
      }

      .bottom-tab-button:hover {
        background: transparent;
        color: var(--muted);
      }

      .bottom-tab-button.active:hover {
        color: var(--accent-dark);
      }
    }