@import url("shared/responsive-compact.css");
@import url("shared/safe-layout/safe-layout.css");
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17151d;
}

body {
  background: #eef0f5;
}

/* The app draws no scrollbar. Its screens scroll, and that is all - there is no
   bar down the side. A browser draws a thick dark one, which lands as a hard
   black line against the page on every screen that scrolls: the accounts list,
   the chat, the menu, the drawer. Hidden here, on every element, while the
   scrolling itself is left exactly as it was. */
* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.phone-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: auto;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 20px 70px #00000012;
}

.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 8px;
  border-bottom: 1px solid #f0eef5;
  background: #fff;
}

.icon-btn,
.brand {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #242129;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 23px;
}

.icon-btn:hover {
  background: #f6f2ff;
}

.top-actions {
  display: flex;
  gap: 2px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px;
  text-align: left;
}

/* IndooneTopBarLogo draws its own 48x48 picture - a rounded square turned 45
   degrees, a three-stop gradient over it and two stars - so the box here only
   has to give it room. It used to hold the letter "I" on a purple square. */
.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
}

.brand strong {
  display: block;
  color: #5e2dd2;
  font-size: 19px;
  line-height: 18px;
}

.brand small {
  display: block;
  color: #6f6b77;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1px;
}

.search-wrap {
  padding: 12px 18px 4px;
  background: #fff;
}

.search-box {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid #e6e2ed;
  border-radius: 14px;
  background: #faf9fc;
}

.search-box span {
  font-size: 19px;
  color: #77717f;
}

.search-box input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
}

.search-box button {
  border: 0;
  background: transparent;
  color: #77717f;
  font-size: 22px;
  cursor: pointer;
}

.content {
  padding: 18px 18px 110px;
}

.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 14px;
}

.eyebrow {
  margin: 0 0 3px;
  color: #7650d8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.page-heading h1 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -.5px;
}

.small-btn {
  border: 1px solid #e5e0ed;
  background: #fff;
  color: #5f566b;
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.small-btn:hover {
  border-color: #9b75e7;
  color: #5e2dd2;
}

.account-list {
  display: grid;
  gap: 11px;
}

.account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #ece9f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 20px #2b19520b;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.account:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px #2b195214;
}

.service-icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 900;
  background: #f5f3f8;
}

.google {
  color: #4285f4;
}

.github {
  color: #111;
}

.microsoft {
  color: #ef5b35;
}

.binance {
  color: #d99c00;
}

.dropbox {
  color: #1976ff;
}

.account-info {
  min-width: 0;
  flex: 1;
}

.account-info b {
  display: block;
  font-size: 14px;
}

.account-info span {
  display: block;
  color: #89838f;
  font-size: 11px;
  margin: 3px 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-info strong {
  font-size: 23px;
  letter-spacing: 1px;
  color: #6331db;
}

.timer {
  width: 35px;
  height: 35px;
  border: 3px solid #eadffb;
  border-top-color: #6d35e8;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #5f31d4;
}

.timer-green {
  border-color: #d9f0df;
  border-top-color: #24a148;
  color: #20883e;
}

.timer-yellow {
  border-color: #f4ebc7;
  border-top-color: #d7a500;
  color: #ad8500;
}

.timer-red {
  border-color: #f3d7d7;
  border-top-color: #d93025;
  color: #c62828;
}

.fav {
  border: 0;
  background: transparent;
  color: #b7a8d3;
  font-size: 19px;
  cursor: pointer;
}

.fav.active {
  color: #f1a900;
}

.fab {
  position: absolute;
  right: 20px;
  bottom: 78px;
  width: 57px;
  height: 57px;
  border: 0;
  border-radius: 19px;
  background: linear-gradient(145deg, #5e2ce2, #9346ed);
  color: #fff;
  font-size: 31px;
  line-height: 1;
  box-shadow: 0 12px 26px #6735df45;
  cursor: pointer;
  z-index: 4;
}

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

.bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 67px;
  background: #fff;
  border-top: 1px solid #eeeaf2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 3;
}

.nav-btn {
  width: 50%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #99939f;
  font-size: 20px;
  cursor: pointer;
}

.nav-btn span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
}

.nav-btn.active {
  color: #6b34df;
}

.empty-state {
  text-align: center;
  padding: 70px 20px;
}

.empty-icon {
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: #f3edff;
  color: #703be2;
  font-size: 30px;
}

.empty-state h3 {
  margin: 14px 0 5px;
}

.empty-state p {
  color: #85808b;
  font-size: 13px;
}

.compact {
  width: auto !important;
  padding: 0 24px !important;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 20;
  pointer-events: none;
  /* The panel waits off to the left at -105%. Now that the drawer is only as
     wide as the phone, that waiting position is over the page background
     rather than off the window, so it has to be clipped here. */
  overflow: hidden;
}

.drawer.open {
  pointer-events: auto;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: #1d172755;
  opacity: 0;
  transition: .2s;
}

.drawer.open .drawer-backdrop {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   The menu, to MenuDrawer.kt.

   The app's drawer is a 320dp sheet of soft violet with a 26dp round on its
   two right corners and a 22dp shadow, holding rows of 48dp whose icons sit in
   a 32dp tile. The web had a 310px white sheet, 25px of padding, rows with no
   tile at all, and a keyboard character where each icon should be.
   -------------------------------------------------------------------------- */
.drawer-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 86vw);
  padding: 19px 15px;
  background: linear-gradient(
    to bottom,
    #faf8ff,
    #f2ecfa 55%,
    #f8f4fc
  );
  border-radius: 0 26px 26px 0;
  box-shadow: 0 0 22px rgba(52, 30, 96, 0.22);
  transform: translateX(-105%);
  transition: .23s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.drawer.open .drawer-panel {
  transform: translateX(0);
}

/* the logo 36dp, then the wordmark, then the close button */
.drawer-brand {
  display: flex;
  align-items: center;
  padding: 3px 0 13px 5px;
}

.drawer-brand .brand-mark {
  width: 36px;
  height: 36px;
}

/* 0xFF263753, 19sp, Bold, 9dp in from the logo */
.drawer-brand strong {
  display: block;
  flex: 1;
  padding-left: 9px;
  color: #263753;
  font-size: 19px;
  font-weight: 700;
}

.drawer-brand small {
  color: #77717d;
  font-size: 10px;
  font-weight: 700;
}

/* a 38dp button holding a 20dp Close, tinted 0xFF59677D */
.drawer-close {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  padding: 0;
  color: #59677d;
  cursor: pointer;
}

.drawer-close svg {
  width: 20px;
  height: 20px;
}

/* 0xFFE8DDF4, 1dp, 5dp above and below */
.drawer-divider {
  height: 1px;
  background: #e8ddf4;
  margin: 5px 4px;
}

/* 0xFF8592A8, 10sp, lineHeight 13sp, Bold, letterSpacing 1sp */
.drawer-section-label {
  margin: 0;
  padding: 15px 0 5px 9px;
  color: #8592a8;
  font-size: 10px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* a 48dp row, 15dp corners, 2dp above and below, 10dp in at each side */
.drawer-item {
  width: 100%;
  height: 48px;
  flex: none;
  margin: 2px 0;
  border: 0;
  background: transparent;
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #34445f;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

/* the icon sits in a 32dp tile of its own, 10dp corners, faintly lit from the
   top left; the icon inside is 18dp and tinted 0xFF51627D */
.drawer-item > [data-app-icon] {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(160deg, #ffffff, #f8f4fc);
  color: #51627d;
}

.drawer-item > [data-app-icon] svg {
  width: 18px;
  height: 18px;
}

/* 13sp, lineHeight 17sp, SemiBold, 0xFF34445F, 11dp in from the tile */
.drawer-item span {
  flex: 1;
  padding-left: 11px;
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
}

/* the count badge: 0xFFECE2F7, 8dp corners, 11sp Bold 0xFF6B3FA5 */
.drawer-item b {
  font-size: 11px;
  font-weight: 700;
  background: #ece2f7;
  color: #6b3fa5;
  border-radius: 8px;
  padding: 3px 7px;
}

.drawer-item:hover {
  background: #f4efff;
}

/* New Chat is the one highlighted row: 0xFFEDE3FA behind it, a violet tile
   with a white icon, and a bold 0xFF6E35C8 label */
.drawer-item-new {
  background: #ede3fa;
}

.drawer-item-new > [data-app-icon] {
  background: linear-gradient(160deg, #9a68e8, #6f35c5);
  color: #fff;
  box-shadow: 0 3px 7px rgba(111, 53, 197, 0.28);
}

.drawer-item-new span {
  color: #6e35c8;
  font-weight: 700;
}

.lock-item {
  margin-top: auto;
}

/* Over the app, not over the window: the same width and the same centre, so
   the dimming and the sheet land on the phone and not on the empty space. */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 30;
  background: #19141f55;
  display: grid;
  place-items: end center;
  padding: 14px;
}

.overlay.hidden {
  display: none;
}

/* The menu's pages. MenuDrawer.kt swaps the whole screen for Profile, Memory,
   Plugins and the rest, so this is a page of the shell: the same width and the
   same padding as the accounts page, no card, no dimming, no rise-in. */
.menu-content {
  display: block;
  width: 100%;
  padding: 16px 18px 18px;
  overflow-y: auto;
}

.menu-content[hidden] {
  display: none;
}

.menu-content .menu-feature-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* The account detail view is still a dialog - it opens over the accounts page
   rather than replacing it - so it keeps the card the menu's pages gave up. */
.modal {
  width: min(430px, 100%);
  max-height: min(88vh, calc(100dvh - 28px));
  overflow: auto;
  background: #fff;
  border-radius: 25px;
  padding: 23px;
  box-shadow: 0 -12px 50px #0002;
  animation: up .18s ease;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@keyframes up {
  from {
    transform: translateY(20px);
    opacity: .5;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.3px;
}

.close-btn {
  border: 0;
  background: #f5f2f8;
  width: 35px;
  height: 35px;
  border-radius: 11px;
  font-size: 21px;
  cursor: pointer;
}

.modal p {
  color: #76717d;
  font-size: 13px;
  line-height: 1.55;
}

.tabs {
  display: flex;
  background: #f5f2fa;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 18px;
}

.tabs button {
  flex: 1;
  border: 0;
  padding: 10px;
  border-radius: 9px;
  background: transparent;
  color: #797380;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}

.tabs button.selected {
  background: #fff;
  color: #6330d5;
  box-shadow: 0 2px 8px #0000000d;
}

.field {
  margin: 12px 0;
}

.field label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #625d68;
  margin-bottom: 7px;
  letter-spacing: .4px;
}

.field input,
.field select {
  width: 100%;
  height: 46px;
  border: 1px solid #e3dfe8;
  border-radius: 12px;
  padding: 0 12px;
  background: #fbfafc;
  outline: none;
  font-size: 13px;
}

.field input:focus,
.field select:focus {
  border-color: #8652e7;
  background: #fff;
}

.primary {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(90deg, #6330db, #9147ed);
  color: #fff;
  font-weight: 800;
  margin-top: 10px;
  cursor: pointer;
  box-shadow: 0 7px 16px #7137df22;
}

.secondary {
  width: 100%;
  height: 46px;
  border: 1px solid #e3dfe8;
  border-radius: 13px;
  background: #fff;
  color: #5f5966;
  font-weight: 800;
  margin-top: 9px;
  cursor: pointer;
}

.qr {
  height: 220px;
  border: 2px solid #8b5ae9;
  border-radius: 20px;
  display: grid;
  place-items: center;
  margin: 16px 0;
  background: repeating-linear-gradient(45deg, #fff, #fff 8px, #f8f3ff 8px, #f8f3ff 16px);
  font-size: 85px;
  color: #18151d;
}

.qr-actions {
  display: flex;
  gap: 10px;
}

.qr-actions button {
  flex: 1;
}

.scanner {
  position: relative;
  width: 100%;
  height: 260px;
  background: #111;
  border-radius: 20px;
  overflow: hidden;
}

.scanner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-frame {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 22px;
  box-shadow: 0 0 0 999px #0005;
}

.token {
  text-align: center;
  padding: 12px 0 18px;
}

.token-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border-radius: 18px;
  background: #f2ecff;
  color: #6b35df;
  display: grid;
  place-items: center;
  font-size: 27px;
}

.token-code {
  font-size: 43px;
  font-weight: 900;
  color: #6330db;
  letter-spacing: 3px;
}

.countdown {
  font-size: 12px;
  color: #77717e;
}

.progress {
  height: 5px;
  background: #eee8f7;
  border-radius: 10px;
  overflow: hidden;
  margin: 13px 0 4px;
}

.progress span {
  display: block;
  height: 100%;
  background: #7540df;
  width: 60%;
  border-radius: 10px;
}

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

.detail {
  padding: 13px;
  background: #faf9fc;
  border-radius: 13px;
}

.detail small {
  display: block;
  color: #89838f;
  font-size: 10px;
}

.detail b {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid #eeeaf1;
}

.settings-row:last-child {
  border-bottom: 0;
}

.settings-row span {
  font-size: 13px;
  font-weight: 700;
}

.settings-row small {
  display: block;
  color: #8b8690;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 500;
}

.row-actions {
  display: flex;
  gap: 8px;
}

.toggle {
  width: 45px;
  height: 26px;
  border: 0;
  border-radius: 20px;
  background: #d9d5df;
  position: relative;
  cursor: pointer;
}

.toggle.on {
  background: #6d35e8;
}

.toggle:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .18s;
}

.toggle.on:after {
  left: 22px;
}

.danger {
  color: #d64242 !important;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 50;
  transform: translate(-50%, 15px);
  background: #26212d;
  color: #fff;
  padding: 11px 15px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pin {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.pin button {
  height: 52px;
  border: 1px solid #e7e2ec;
  border-radius: 15px;
  background: #faf9fc;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.pin button:hover {
  background: #f1eaff;
  color: #6632d7;
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px;
}

.pin-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ddd7e4;
}

.pin-dots i.on {
  background: #6d35e8;
}

body.auth-open {
  overflow: hidden;
}

/* Main header brand: keep the logo and Indoone name on one clean row. */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.topbar-left .brand {
  flex: none;
}

.topbar-left .brand > span:last-child {
  display: block;
  min-width: 0;
}

.topbar-left .brand small {
  display: none;
}

.topbar-left .brand strong {
  white-space: nowrap;
  line-height: 1;
}

.menu-top-btn {
  flex: none;
}


/* On a phone the shell is the whole screen. On a desktop it sits beside the
   menu, which is always open there. */
.phone-shell {
  width: 100% !important;
  max-width: 430px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html, body { height: 100%; }

/* Step 3: use one viewport-height flex shell. Header/navigation are fixed
   flex items and the active content region owns the remaining height. */
.phone-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
}

.topbar,
.bottom-nav,
#searchWrap {
  flex: 0 0 auto !important;
}

.account-info strong.code-green { color: #20883e; }
.account-info strong.code-yellow { color: #ad8500; }
.account-info strong.code-red { color: #c62828; }
.account:has(.timer-green) .account-info strong { color: #20883e; }
.account:has(.timer-yellow) .account-info strong { color: #ad8500; }
.account:has(.timer-red) .account-info strong { color: #c62828; }

.search-wrap { padding: 10px 18px 3px !important; flex: 0 0 auto; }
.search-box { height: 40px !important; border-radius: 12px !important; padding: 0 11px !important; }
.search-box input { font-size: 13px !important; }
.search-box button { font-size: 20px !important; }
.content { padding: 16px 18px 18px !important; }
.page-heading { margin-bottom: 11px !important; }
.page-heading h1 { font-size: 23px !important; }
.content .page-heading h1 { font-size: 26px !important; }
.small-btn { padding: 7px 10px !important; font-size: 10px !important; }
.account-list { gap: 9px !important; }
.account { gap: 10px !important; padding: 11px !important; border-radius: 15px !important; }
.service-icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; font-size: 19px !important; }
.account-info b { font-size: 13px !important; }
.account-info span { font-size: 10px !important; margin: 2px 0 4px !important; }
.account-info strong { font-size: 21px !important; }
.timer { width: 33px !important; height: 33px !important; font-size: 10px !important; }

/* The hidden attribute has to win everywhere.

   The chat page carries .chat-page { display: flex } and the Notification
   Center carries .notifications-page { display: flex }. A display rule in the
   stylesheet beats the browser's own [hidden] { display: none }, so putting
   hidden on those pages did nothing at all: the chat stayed up under the
   Notification Center, which is exactly what it looked like. One rule, marked
   important, and the attribute means hidden for every element on the page. */
[hidden] {
  display: none !important;
}

/* Step 4: safe-area sizing/offsets live only in
   shared/safe-layout/safe-layout.css. This file keeps only visual geometry and
   viewport/flex behavior so the same inset is never applied twice. */

#app.phone-shell > #content,
#app.phone-shell > #homeContent,
#app.phone-shell > .notifications-page,
#app.phone-shell > .settings-content,
#app.phone-shell > #modal {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* The chat page owns its own scrolling, so it must not scroll again here. */
#app.phone-shell > #homeContent {
  overflow: hidden !important;
}

/* The bar is the last row of the shell in the app, not something floating
   over the content. Absolute positioning is what put it on top of the
   composer and cut the buttons off. */
.bottom-nav {
  position: static !important;
  flex: 0 0 auto !important;
}


/* Shared headings stay aligned; safe-area padding is handled centrally. */
#app.phone-shell > #content .page-heading,
#app.phone-shell > .settings-content .settings-page-head {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ChromeOS/browser preview: keep the app centered while reusing the same
   safe-area contract as mobile WebView layouts. */
@media (min-width: 700px) {
  #app.phone-shell > #content,
  #app.phone-shell > .settings-content {
    padding-right: calc(18px + var(--indoone-safe-right)) !important;
    padding-left: calc(18px + var(--indoone-safe-left)) !important;
  }

  :root { --indoone-bottom-nav-base: 58px; }
}

/* Shared topbar geometry. Visual details stay in the component layout. */
.topbar {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  column-gap: 10px !important;
}
.topbar-left { display: contents !important; }
.topbar-left .menu-top-btn { grid-column: 1 !important; grid-row: 1 !important; }
.topbar-left .brand { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; margin: 0 !important; }
.top-actions { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; display: flex !important; }
@media (max-width: 360px) {
  .topbar { column-gap: 4px !important; padding-left: 10px !important; padding-right: 10px !important; }
}

@media (min-width: 700px) {
  .bottom-nav { bottom: 0 !important; }
}

/* The three-line button stays on every screen size, and the panel slides in
   over the app rather than pushing it sideways. On a desktop it also comes out
   when the pointer reaches the left edge, which is what the wide screen is
   there for. */
.drawer-hover-zone {
  display: none;
}

@media (min-width: 760px) {
  .drawer-hover-zone {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    /* the shell's left edge: half the window, less half of 430px */
    left: max(0px, calc(50% - 215px));
    width: 14px;
    z-index: 19;
  }
}


/* ==========================================================================
   The desktop layout
   ==========================================================================

   A phone gets the app as it is: one column, the menu in a drawer that slides
   in, the tabs along the bottom.

   A desktop gets room to work in:

     +----------------+---------------------------+---------------+
     |                |  top bar                  |               |
     |   the menu     |---------------------------|   Home        |
     |   always open  |                           |   Lobby       |
     |                |                           |   Settings    |
     |                |---------------------------|               |
     +----------------+---------------------------+---------------+

   The menu is always there, so the hamburger and the drawer's close button
   have nothing to do and are put away. The tabs stay where the app keeps them,
   along the bottom, now across the part of the window the page is in.
   Nothing else changes: every option, every button, every animation.
   ========================================================================== */

/* The desktop shell: the menu standing open on the left, the tabs standing up
   on the right, and the page between them. It needs a wide window AND a real
   pointer. Width alone is not enough: a phone whose browser asks for the
   desktop site reports a wide viewport while still being a phone, and that is
   how the rail and the 264px margin ended up on a handset. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root {
    --menu-w: 264px;
    --nav-w: 92px;
  }

  /* the menu, standing open on the left */
  .drawer {
    left: 0;
    transform: none;
    width: var(--menu-w);
    max-width: var(--menu-w);
    overflow: visible;
    pointer-events: auto;
    z-index: 20;
  }

  .drawer-panel {
    width: 100%;
    transform: none;
    border-right: 1px solid #f0eef5;
    box-shadow: none;
  }

  /* nothing to dim, and nothing to hover for */
  .drawer-backdrop,
  .drawer-hover-zone {
    display: none !important;
  }

  /* the menu is open, so these have no work to do */
  .menu-top-btn,
  .drawer-close {
    display: none !important;
  }

  /* the app takes what is left between the menu and the tabs.
     width has to be the remainder, not 100%: 100% plus a margin is wider than
     the window and the right-hand end falls off the edge. */
  .phone-shell {
    width: calc(100% - var(--menu-w) - var(--nav-w)) !important;
    max-width: none !important;
    margin-left: var(--menu-w) !important;
    margin-right: var(--nav-w) !important;
    box-shadow: none;
    border-left: 1px solid #f0eef5;
  }

  /* the page is the full width of the window minus the menu; keep the reading
     column in the middle of it so a wide window does not stretch every line */
  .chat-page,
  .accounts-content,
  #content,
  #lobbyContent,
  .settings-content,
  [data-notifications-page] {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* the top bar's contents keep to the same column as the page */
  .topbar {
    padding-left: 34px;
    padding-right: 34px;
  }
}