@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800;900&display=swap");
@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%;
  /* The app renders in Roboto - it is Android's own font and the app sets no
     other, apart from Vibe's wordmark. The web used to name "Inter" first,
     but nothing ever loaded it, so every device quietly fell back to its own
     system font and a desktop browser drew Segoe UI or the Mac face instead.
     Roboto is loaded above, so the web now draws what the app draws. */
  font-family: Roboto, 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;
}

/* AccountsScreen.kt's provider colour map has a zoho entry - 0xFFE42525 -
   which the web's list never had, so a Zoho account drew in the fallback blue. */
.zoho {
  color: #e42525;
}

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

/* The app draws the ring's arc in the same colour as the code
   (AccountsScreen.kt CountdownRing: ringColor = codeColor), so the accent is
   #20883E / #AD8500 / #C62828, not a separate green/amber/red. */
.timer-green {
  border-color: #d9f0df;
  border-top-color: #20883e;
  color: #20883e;
}

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

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

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

.fav.active {
  color: #f1a900;
}

.fab {
  position: absolute;
  right: 20px;
  bottom: 88px;
  width: 57px;
  height: 57px;
  border: 0;
  border-radius: 19px;
  background: #703be2;
  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;
  font-size: 17px;
  font-weight: 700;
  color: #17151d;
}

/* The app's empty-state Add account is a plain purple TextButton, not the
   filled gradient .primary button (AccountsScreen.kt EmptyAccountsState). */
.empty-state .empty-add {
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: #703be2;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* AppSearchIcon is 21dp (AppPageChrome.kt AppTopBar). */
.top-actions .top-search-icon {
  width: 21px;
  height: 21px;
  display: block;
}

.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;
  /* MenuDrawer.kt: Color(0xFF101827).copy(alpha = 0.30f) */
  background: rgba(16, 24, 39, 0.30);
  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;
  /* MenuDrawer.kt: a fixed 320dp sheet, gradient stops at 0 / 0.5 / 1. */
  width: 320px;
  max-width: 100%;
  padding: 19px 15px;
  background: linear-gradient(
    to bottom,
    #faf8ff,
    #f2ecfa 50%,
    #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;
  /* Four of these rows are anchors, because the page behind them has an address that has to
     be linkable and findable. An anchor brings an underline and a visited colour; this keeps
     it looking exactly like the buttons beside it. */
  text-decoration: none;
}

/* 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.
 *
 * The selector is the label span only. It used to be ".drawer-item span", which also matched
 * the icon tile - the tile is a span too - so the tile carried 11px of left padding, its
 * content box shrank, and the centred icon sat 5.5px to the right of where it should be.
 * That is the offset that showed in the drawer but never in the app. */
.drawer-item > span:not([data-app-icon]) {
  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;
}

/* The Plugins row carries a chevron the app draws itself: Icons.Outlined.
   ChevronRight at 18dp, tinted 0xFF8B9AB0 (MenuDrawer.kt:464-470). It is not
   AppChevron, which is 22dp and 0xFF7A6F8C. */
.drawer-item .drawer-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  padding-left: 0;
  display: grid;
  place-items: center;
  color: #8b9ab0;
}

.drawer-item .drawer-chevron svg {
  width: 18px;
  height: 18px;
}

.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 {
  /* the app's destructive red, 0xFFE24B55 - it was #d64242 */
  color: #e24b55 !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; }

/* Every value below is AccountsScreen.kt's own. */
.search-wrap { padding: 12px 18px 4px !important; flex: 0 0 auto; }
.search-box { height: 44px !important; border-radius: 14px !important; padding: 0 12px !important; }
.search-box input { font-size: 14px !important; }
.search-box button { font-size: 22px !important; }
.content { padding: 18px 18px 24px !important; }
.page-heading { margin-bottom: 11px !important; }
.page-heading h1 { font-size: 23px !important; }
.content .page-heading h1 { font-size: 19px !important; letter-spacing: -0.25px !important; }
.small-btn { padding: 8px 11px !important; font-size: 11px !important; }
.account-list { gap: 11px !important; }
.account { gap: 12px !important; padding: 13px !important; border-radius: 18px !important; }
.service-icon { width: 48px !important; height: 48px !important; border-radius: 14px !important; font-size: 21px !important; }
.account-info b { font-size: 14px !important; }
.account-info span { font-size: 11px !important; margin: 3px 0 2px !important; }
.account-info strong { font-size: 23px !important; letter-spacing: 1px !important; }
.timer { width: 35px !important; height: 35px !important; font-size: 10px !important; }

/* The hidden attribute has to win everywhere.

   The chat page carries .chat-page { display: flex }. A display rule in the
   stylesheet beats the browser's own [hidden] { display: none }, so putting
   hidden on such a page did nothing at all. 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 > .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 {
    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;
  }
}

/* The build the page was served from, in plain text at the foot of the drawer.
   It is here so that "it still looks wrong" becomes a number we can both read: if
   this says anything other than the version in index.html, the browser is serving a
   copy it kept, and no amount of redeploying will change what that person sees. */
.drawer-build {
  margin: 10px 0 2px;
  padding: 0 10px;
  color: #a9a2b4;
  font-size: 10px;
  letter-spacing: 0.02em;
}