#root,
body,
html {
  height: 100%;
}

body {
  overflow: hidden;
}

#root {
  display: flex;
}

:root {
  --cs-initial-bg: rgb(242, 237, 231);
  --cs-browser-surface: rgb(255, 253, 250);
  background: var(--cs-browser-surface);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cs-initial-bg: rgb(15, 18, 24);
    --cs-browser-surface: rgb(26, 32, 41);
  }
}

html,
body {
  min-height: 100%;
  background: var(--cs-browser-surface);
}

#root,
body > div:first-child {
  min-height: 100%;
  background: var(--cs-initial-bg);
}

html,
body,
#root,
body > div:first-child,
#web-mobile-shell,
body > div > [aria-modal="true"][role="dialog"] {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"],
[role="textbox"],
[data-cs-text-selectable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Subtle thin scrollbars everywhere (desktop/admin included). The mobile
   shell block below overrides these with its own frame-scoped variables. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.32) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.32);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
  background-clip: padding-box;
}

#web-mobile-shell {
  --cs-scrollbar-size: 10px;
  --cs-scrollbar-track: rgba(100, 116, 139, 0.24);
  --cs-scrollbar-thumb: rgba(100, 116, 139, 0.44);
  --cs-scrollbar-thumb-hover: rgba(100, 116, 139, 0.58);
}

#web-mobile-shell * {
  scrollbar-width: thin;
  scrollbar-color: var(--cs-scrollbar-thumb) var(--cs-scrollbar-track);
}

#web-mobile-shell *::-webkit-scrollbar {
  width: var(--cs-scrollbar-size);
  height: var(--cs-scrollbar-size);
}

#web-mobile-shell *::-webkit-scrollbar-corner {
  background: transparent;
}

#web-mobile-shell *::-webkit-scrollbar-track {
  background: var(--cs-scrollbar-track);
  border-radius: 999px;
}

#web-mobile-shell *::-webkit-scrollbar-thumb {
  background: var(--cs-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

#web-mobile-shell *::-webkit-scrollbar-thumb:hover {
  background: var(--cs-scrollbar-thumb-hover);
  background-clip: padding-box;
}

#web-mobile-shell [data-web-drag-scroll="true"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#web-mobile-shell [data-web-drag-scroll="true"]::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* React Native Modal portals mount under body with fixed full-viewport bounds.
   Constrain them to the mobile shell frame when it is active. */
body > div > [aria-modal="true"][role="dialog"] {
  left: var(--cs-shell-left, 0px) !important;
  top: var(--cs-shell-top, 0px) !important;
  width: var(--cs-shell-width, 100vw) !important;
  height: var(--cs-shell-height, 100vh) !important;
  right: auto !important;
  bottom: auto !important;
  border-radius: var(--cs-shell-radius, 0px);
  overflow: hidden;
}