/* Web-host adjustments to the shared wallet stylesheet.
   The extension popup is a fixed 360×600 panel; on the web the same views have
   to work in a phone viewport and in a desktop window, so the panel becomes a
   centred column that fills the screen on small displays. */

html.misaka-web, html.misaka-web body {
  width: auto;
  height: 100%;
  min-height: 100dvh;
  overflow: auto;
}
html.misaka-web body {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0;
}
html.misaka-web .app {
  width: 100%;
  max-width: 420px;
  min-height: 100dvh;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
@media (max-width: 440px) {
  html.misaka-web .app { border-left: 0; border-right: 0; }
}
/* Desktop: keep it a panel rather than stretching a phone UI across a monitor. */
@media (min-width: 720px) and (min-height: 700px) {
  html.misaka-web body { align-items: center; padding: 24px 0; }
  html.misaka-web .app {
    min-height: 0;
    height: min(760px, calc(100dvh - 48px));
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  }
}

/* Comfortable tap targets on a phone, where there is room for them. */
html.misaka-web .tabbar { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
html.misaka-web input, html.misaka-web textarea, html.misaka-web select {
  font-size: 16px; /* under 16px iOS Safari zooms the page on focus */
}

/* The host banner: this is a website, and it cannot make the extension's
   no-remote-code promise. Stated once, at the top, not buried in settings. */
.host-note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 11px; line-height: 1.45; color: var(--muted);
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.host-note a { color: var(--acc); text-decoration: none; }
.host-note a:hover { text-decoration: underline; }

/* Recovering a wallet made by the previous version of this site. */
.legacy-box { display: flex; flex-direction: column; gap: 9px; }
.legacy-box .krow { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.legacy-box .krow:last-child { border-bottom: 0; }
.legacy-box .k { color: var(--muted); flex: 0 0 96px; }
.legacy-box .v { margin-left: auto; text-align: right; word-break: break-all; }