/* WEB3 adapter -- the Safari layer's CSS (extra / web-only; see adapter/safari.js for the two host regimes). Linked by the generated index.html
   AFTER the renderer's own stylesheets; it edits no renderer rule, it only adds the browser-regime terms. env() is 0 outside a notched
   iOS viewport, so in Chromium and on desktop browsers every rule below leaves the desktop layout unchanged. */

/* insets: the app box stays edge-to-edge (its background fills the notch / home-indicator areas, as Android draws behind the system
   bars), its CONTENT is inset -- Android's edge-to-edge + WindowInsets, one formula */
html[data-wk-web] .wk-app,
html[data-wk-web] .wk-full {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

/* keyboard (iOS): the app box follows the visual viewport while the keyboard is up (adapter/safari.js sets the vars) */
html[data-wk-kb] .wk-app,
html[data-wk-kb] .wk-full {
  bottom: auto;
  height: var(--wk-vvh, 100%);
  transform: translateY(var(--wk-vvtop, 0px));
  padding-bottom: 0;   /* the keyboard covers the home indicator */
}

/* the shell never rubber-bands or scrolls behind the fixed app box; the panes scroll inside it */
html[data-wk-web], html[data-wk-web] body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-wk-web] { -webkit-tap-highlight-color: transparent; }
html[data-wk-web] button, html[data-wk-web] [role="button"], html[data-wk-web] a { touch-action: manipulation; }

/* iOS: no system callout / magnifier over a long-press that opens the app's own menu; text fields keep theirs */
html[data-wk-ios] .wk-app, html[data-wk-ios] .wk-full, html[data-wk-ios] .wk-overlays { -webkit-touch-callout: none; }
html[data-wk-ios] input, html[data-wk-ios] textarea, html[data-wk-ios] [contenteditable="true"] { -webkit-touch-callout: default; }

/* iOS zooms the page on focus of a field under 16 px: on a touch screen the fields are at least 16 px (Android's composer text is 16 sp) */
@media (pointer: coarse) {
  html[data-wk-web] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  html[data-wk-web] textarea,
  html[data-wk-web] select { font-size: max(16px, 1em) !important; }
}

/* r3 (review C3): calls are not built on the web -- the Settings "Call devices" card (screens/devpick.js buildDevicesCard: card
   .set-calldevices, its label the element before it, core/kit.js pageCard) is hidden, as the desktop hides a capability it lacks.
   :has() is iOS 15.4+; older WebKit keeps the bare label (the card itself is hidden everywhere). */
html[data-wk-nocalls] .set-calldevices,
html[data-wk-nocalls] *:has(+ .set-calldevices) { display: none !important; }

/* r3 (review L3): a long-press on these opens the app's menu (adapter/safari.js) -- no WebKit selection / loupe / callout under it.
   Text fields are not listed; text copy stays in the menu (Copy text), as on Android. */
html[data-wk-ios] .post-row, html[data-wk-ios] .rooms-row, html[data-wk-ios] .wk-chip, html[data-wk-ios] .wk-tab,
html[data-wk-ios] .wk-kit-row, html[data-wk-ios] button, html[data-wk-ios] img {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* r3 (review L4): the 3 renderer heights in 100vh (core/base.css:117 dialog, :156 sheet, screens/signin.css:10) -- iOS's 100vh is the LARGE
   viewport (toolbar hidden); dvh follows the toolbar. The vh line stays first as the fallback for a WebKit without dvh (< 15.4). */
html[data-wk-web] .wk-dialog { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
html[data-wk-web] .wk-sheet { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
html[data-wk-web] .signin-root { min-height: 100vh; min-height: 100dvh; }

/* r5 (LOOK 1-3): the web's signed-out screen (adapter/auth.js) -- the Android first screen, as W1/78/SITE/draft/auth_overlay.fragment.html
   draws it (dark field with the accent light, brand, title, line, ONE gradient button, the wallets, the foot links). Over the renderer's
   own sign-in START view only; the renderer's pairing step and the app are never covered. */
.wk-web-auth {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 600px at 80% -10%, rgba(124, 92, 240, 0.26), transparent 70%),
              radial-gradient(700px 500px at -10% 110%, rgba(91, 140, 240, 0.14), transparent 70%), #0b0a17;
  color: #ece9fb; font-family: var(--wk-font, inherit);
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.wk-web-auth .wa-box { width: 100%; max-width: 400px; box-sizing: border-box; margin: auto; padding: 36px 32px 28px; border-radius: 20px;
  background: rgba(24, 22, 44, 0.88); border: 1px solid rgba(160, 150, 230, 0.18); box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; }
.wk-web-auth .wa-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 28px; font-size: 30px; font-weight: 800;
  letter-spacing: 0.06em; color: #9e86ff; }
.wk-web-auth .wa-brand img { width: 40px; height: 40px; border-radius: 10px; }
.wk-web-auth .wa-title { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: #f2f0ff; }
.wk-web-auth .wa-sub { margin: 0 0 26px; font-size: 15px; line-height: 1.45; color: #a9a3c9; }
.wk-web-auth .wa-status { margin: 0 0 8px; font-size: 13px; color: #8d88ad; min-height: 0; }
.wk-web-auth .wa-status:empty { display: none; }
.wk-web-auth .wa-claim { margin: 0 0 12px; font-size: 13px; color: #a9a3c9; overflow-wrap: anywhere; }
.wk-web-auth .wa-btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 52px; padding: 14px;
  border: 0; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, #7c5cf0 0%, #4f8df0 100%);
  box-shadow: 0 2px 16px rgba(124, 92, 240, 0.4); }
.wk-web-auth .wa-btn:disabled, .wk-web-auth .wa-btn.off { background: #24223a; color: #6f6a8f; box-shadow: none; cursor: default; pointer-events: none; }
.wk-web-auth .wa-wallets-row { display: flex; flex-direction: column; gap: 10px; }
.wk-web-auth .wa-icons { display: flex; justify-content: center; gap: 14px; margin: 16px 0 0; }
.wk-web-auth .wa-icons img { width: 28px; height: 28px; border-radius: 8px; opacity: 0.9; }
.wk-web-auth .wa-link { margin: 14px auto 0; border: 0; background: none; font: inherit; font-size: 15px; color: #9e86ff; cursor: pointer; min-height: 44px; }
.wk-web-auth .wa-error { color: #ff6b81; font-size: 13px; margin-top: 10px; text-align: center; }
.wk-web-auth .wa-foot { display: flex; justify-content: center; gap: 18px; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(160, 150, 230, 0.18); font-size: 13px; }
.wk-web-auth .wa-foot a { color: #8d88ad; text-decoration: none; }
@media (max-width: 480px) {
  .wk-web-auth { align-items: flex-start; }
  .wk-web-auth .wa-box { background: transparent; border: 0; box-shadow: none; padding: 28px 12px 16px; }
}
/* r5 (LOOK 3): the web pairing step draws the QR it now has (adapter/pair.js); an empty QR box never shows (no QR = no box) */
html[data-wk-web] .signin-qr:not(:has(img)) { display: none; }