* {
      box-sizing: border-box;
    }

    /* Overlay and base modal card styles */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: var(--modal-overlay);
      z-index: 110;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--modal-transition);
    }

    .modal-overlay.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-card {
      background: var(--modal-card-bg);
      border: 1px solid var(--modal-card-border);
      box-shadow: var(--modal-card-shadow);
      border-radius: 18px;
      transition: transform var(--modal-transition), opacity var(--modal-transition);
    }

    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;
    }