/* Opstan Mobile PWA overrides. The core design/functionality is copied from the browser extension. */
:root {
  color-scheme: dark;
}

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding: 10px;
}

.topbar {
  margin-bottom: 8px;
}

.brand {
  font-size: 25px;
}

.subtitle {
  max-width: 280px;
}

.tabs {
  gap: 6px;
  margin-bottom: 8px;
}

.tab {
  padding: 8px 5px;
  font-size: 11px;
}

.tabpane.active {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Wallet and Send need natural vertical scrolling on phones. */
#walletTab.active,
#sendTab.active,
#networkTab.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px !important;
}

#walletTab.active #walletOpenView:not(.hidden),
#walletTab.active #walletLockedView:not(.hidden),
#sendTab.active .card,
#networkTab.active .network-scroll {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#walletTab.active #walletCoinOpsBox,
#networkTab.active .ops-box,
#networkTab.active #logBox {
  max-height: none !important;
  overflow: visible !important;
}

/* Channels: phone-friendly two-level layout while preserving extension controls. */
#channelsTab.active {
  height: 100% !important;
  overflow: hidden !important;
}

#channelsTab.active .channels-shell {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#channelsTab.active .channel-sidebar {
  height: auto !important;
  max-height: 178px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 8px !important;
}

#channelsTab.active .sidebar-title,
#channelsTab.active .sidebar-note {
  display: none !important;
}

#channelsTab.active .channel-list,
#channelsTab.active .gui-channel-list {
  flex: 1 1 auto !important;
  min-height: 52px !important;
  max-height: 86px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#channelsTab.active .channel-main {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#channelsTab.active .channel-header {
  flex-wrap: wrap;
  gap: 7px;
}

#channelsTab.active .channel-title-row h2 {
  font-size: 17px;
}

#channelsTab.active .channel-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#channelsTab.active .compact-btn {
  width: 100%;
  padding: 8px 5px;
  font-size: 11px;
}

#channelsTab.active .message-scroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px !important;
}

.msg-bubble {
  max-width: 100%;
}

.modal {
  padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

.modal-card {
  width: min(620px, 100%) !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 700px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .app {
    width: min(700px, 100vw) !important;
    height: min(860px, 100vh) !important;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  #channelsTab.active .channels-shell {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  #channelsTab.active .channel-sidebar {
    height: 100% !important;
    max-height: 100% !important;
  }
  #channelsTab.active .sidebar-title,
  #channelsTab.active .sidebar-note {
    display: block !important;
  }
  #channelsTab.active .channel-list,
  #channelsTab.active .gui-channel-list {
    max-height: none !important;
  }
  #channelsTab.active .channel-actions {
    width: auto;
    display: flex;
  }
}

/* v1.0.9 PWA phone polish */
.app {
  transform: translateZ(0);
}

.card,
.channel-sidebar,
.channel-main,
.modal-card {
  transform: translateZ(0);
  backface-visibility: hidden;
}

#channelsTab.active .channel-sidebar,
#channelsTab.active .channel-main {
  animation: opstanMobilePanelIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#channelsTab.active .channel-main {
  animation-delay: 35ms;
}

@keyframes opstanMobilePanelIn {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 699px) {
  button, .tab {
    min-height: 40px;
  }

  .tab {
    border-radius: 14px;
  }

  .card,
  .channel-sidebar,
  .channel-main {
    border-radius: 20px !important;
  }
}


/* v1.0.24 final stability: keep shell fixed and scroll panes internally on real phones. */
html.opstan-phone-ui,
body.opstan-phone-ui {
  height: var(--opstan-stable-vh, 100dvh) !important;
  max-height: var(--opstan-stable-vh, 100dvh) !important;
  overflow: hidden !important;
}
body.opstan-phone-ui .app {
  height: var(--opstan-stable-vh, 100dvh) !important;
  max-height: var(--opstan-stable-vh, 100dvh) !important;
}