/* =========================================================
   GateWallet — overlay system: bottom sheets, modals and the
   Google Authenticator gate surfaces (.ga-*).

   Direction: native Telegram pastiche. One true surface per
   overlay, separation by spacing and single hairlines — no
   decorative borders, no gradient washes, no icon tiles.

   Owned by core/ui.js (sheets/modals) and core/authgate.js
   (.ga-*). Loaded after wallet.css; notifications stay in
   app.css untouched.
   ========================================================= */

/* ---------------------------------------------------------
   0. Overlay tokens
   --------------------------------------------------------- */
.sheet-back,
.modal-back {
  --ov-bg: #15161C;                          /* true graphite sheet surface */
  --ov-bg-hi: #1C1D24;                       /* modal card, one step up */
  --ov-hairline: rgba(255, 255, 255, .07);
  --ov-hairline-hi: rgba(255, 255, 255, .10);
  --ov-grip: rgba(255, 255, 255, .16);
  --ov-press: rgba(255, 255, 255, .05);
  --ov-key: rgba(255, 255, 255, .03);
  --ov-key-line: rgba(255, 255, 255, .05);
  --ov-key-press: rgba(255, 255, 255, .08);
  /* Subtle spring: lands with a breath of overshoot, never bounces. */
  --ov-spring: cubic-bezier(.24, 1.12, .32, 1);
}

/* ---------------------------------------------------------
   1. Bottom sheet
   --------------------------------------------------------- */
.sheet-back {
  position: fixed; inset: 0; z-index: 190;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end;
  animation: fadeIn var(--dur-fast) var(--ease-out) both;
}
.sheet-back.out { animation: fadeOut var(--dur-fast) var(--ease-in) forwards; }

.sheet {
  width: 100%;
  background: var(--ov-bg);
  border-radius: 20px 20px 0 0;
  /* Hairline top edge instead of a border box. */
  box-shadow: 0 -1px 0 var(--ov-hairline-hi), 0 -18px 48px rgba(0, 0, 0, .42);
  padding: 0 0 calc(14px + var(--safe-b));
  max-height: 86dvh; overflow-y: auto;
  animation: sheetIn .32s var(--ov-spring) both;
  will-change: transform;
}
.sheet-back.out .sheet { animation: sheetOut .2s var(--ease-in) forwards; }
.sheet.dragging { animation: none !important; transition: none !important; }

@keyframes sheetIn {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes sheetOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(0, 26px, 0); }
}

.sheet-grip {
  width: 32px; height: 3px; border-radius: 2px;
  background: var(--ov-grip);
  margin: 6px auto;
}

/* Title row: left-aligned, optional right-side action. Sticks while the
   sheet scrolls so long content keeps its name. */
.sheet-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 2px 16px 10px;
  background: var(--ov-bg);
}
.sheet-head h3 {
  flex: 1; min-width: 0; margin: 0;
  font-size: 17px; font-weight: 700; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet-head-act {
  flex: 0 0 auto;
  font-size: 14.5px; font-weight: 600; color: var(--accent);
  padding: 4px 0;
}

.sheet-content { min-height: 0; }
.sheet-body { padding: 0 16px; }

/* Single-choice rows (optionSheet): full-bleed, hairline-separated. */
.sheet-opt {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 12px 16px;
  font-size: 15px;
  transition: background var(--dur-fast) var(--ease-out);
  animation: rowIn .26s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
.sheet-opt + .sheet-opt::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0;
  height: 1px; background: var(--ov-hairline);
}
.sheet-opt:active { background: var(--ov-press); }
.sheet-opt.on { color: var(--accent); }
.sheet-opt .so-c { margin-left: auto; color: var(--accent); }
.sheet-opt .so-c svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------
   2. Modal — compact centred card, Telegram-style action list
   --------------------------------------------------------- */
.modal-back {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center; padding: 26px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fadeIn var(--dur) var(--ease-out) both;
}
.modal-back.out { animation: fadeOut 160ms var(--ease-in) forwards; }

.modal-card {
  width: 100%; max-width: 300px;
  background: var(--ov-bg-hi);
  border-radius: 14px; overflow: hidden;
  text-align: center;
  box-shadow: 0 0 0 1px var(--ov-hairline), var(--shadow-3);
  animation: modalIn .26s var(--ov-spring) both;
}
.modal-back.out .modal-card { animation: modalOut .16s var(--ease-in) forwards; }

@keyframes modalIn {
  from { opacity: 0; transform: scale(.94) translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes modalOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(.97); }
}

.modal-body { padding: 20px 18px 18px; }
/* Icon-less by default; when a caller insists, it renders small and quiet. */
.modal-ic {
  width: 40px; height: 40px; margin: 18px auto -6px;
  display: grid; place-items: center;
  color: var(--text-dim);
}
.modal-ic svg { width: 24px; height: 24px; }
.modal-ic.error { color: var(--down); }
.modal-ic.success { color: var(--up); }
.modal-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.modal-title + .modal-msg { margin-top: 7px; }
.modal-msg {
  font-size: 13.5px; color: var(--text-dim);
  line-height: 1.5; white-space: pre-line;
}

/* Vertical stack of full-width quiet buttons separated by hairlines. */
.modal-actions {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--ov-hairline);
}
.modal-act {
  width: 100%; min-height: 46px; padding: 12px 14px;
  font-size: 15.5px; font-weight: 500; color: var(--text);
  transition: background var(--dur-fast) var(--ease-out);
}
.modal-act:active { background: var(--ov-press); }
.modal-act + .modal-act { border-top: 1px solid var(--ov-hairline); }
.modal-act.is-primary { color: var(--accent); font-weight: 650; }
.modal-act.is-danger { color: var(--down); font-weight: 600; }

/* ---------------------------------------------------------
   3. Google Authenticator gate (.ga-*)
   --------------------------------------------------------- */
.ga { padding: 0 16px 6px; overflow: hidden; }
.ga-step { display: flex; flex-direction: column; }

/* The challenge/setup sheets draw exactly one hairline: under the title row. */
.sheet.ga-sheet .sheet-head { padding-bottom: 12px; box-shadow: 0 1px 0 var(--ov-hairline); }
.sheet.ga-sheet .sheet-content { padding-top: 12px; }

.ga-title { margin: 4px 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.ga-sub { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }

/* Intro rows: plain small glyphs, hairline separation, no tiles. */
.ga-list { margin: 0 0 6px; }
.ga-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  font-size: 12.5px; line-height: 1.45; color: var(--text-dim);
}
.ga-row + .ga-row::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 0;
  height: 1px; background: var(--ov-hairline);
}
.ga-row-ic { flex: 0 0 auto; width: 16px; color: var(--text-mute); }
.ga-row-ic svg { width: 16px; height: 16px; }

.ga-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.ga-head b { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.ga-n { font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

/* QR on a clean white tile, 12px padding. */
.ga-qr {
  width: fit-content; margin: 2px auto 14px; padding: 12px;
  background: #fff; border-radius: 12px;
}
.ga-qr svg { display: block; width: 186px; height: 186px; }

/* Setup key: hairline-bounded band, 4x2 mono grid, quiet copy control. */
.ga-key {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; margin: 0 0 2px;
  border-top: 1px solid var(--ov-hairline);
  border-bottom: 1px solid var(--ov-hairline);
}
.ga-key-t { flex: 1; min-width: 0; }
.ga-key-t > span { display: block; font-size: 10.5px; color: var(--text-mute); margin-bottom: 3px; }
.ga-key-t .mono {
  display: grid; grid-template-columns: repeat(4, minmax(0, max-content));
  gap: 2px 10px;
  font-family: var(--fm); font-size: 12px; font-weight: 600;
  letter-spacing: .4px; line-height: 1.5;
}
.ga-key-t .mono i { font-style: normal; }
.ga-copy {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ga-copy:active { background: var(--ov-press); transform: scale(.92); }
.ga-copy svg { width: 16px; height: 16px; }

.ga-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-mute); text-align: center; }
.ga-hint { margin: 12px 0 2px; font-size: 11.5px; color: var(--text-mute); text-align: center; }
.ga-cta { margin-top: 16px; }
.ga-quiet {
  margin-top: 4px; width: 100%; min-height: 42px;
  font-size: 14.5px; font-weight: 600; color: var(--text-dim);
}

/* Segmented 6-digit code: larger cells, caret pulse in the active one. */
.ga-code { outline: none; }
.ga-cells {
  display: flex; gap: 8px; justify-content: center;
  margin: 4px 0 2px; touch-action: manipulation;
}
.ga-cell {
  flex: 0 1 44px; width: 44px; min-width: 34px; height: 54px;
  border-radius: 10px;
  border: 1px solid var(--ov-hairline-hi); background: var(--ov-key);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm); font-size: 22px; font-weight: 700; font-style: normal;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.ga-cell.filled { border-color: rgba(247, 166, 0, .45); }
.ga-cell.active { border-color: var(--accent); }
.ga-cell.active::after {
  content: ""; width: 2px; height: 22px; border-radius: 1px;
  background: var(--accent);
  animation: gaCaret 1.06s steps(2, start) infinite;
}
@keyframes gaCaret { 50% { opacity: 0; } }
.ga-cell.ok { border-color: var(--up); color: var(--up); }
.ga-code.busy .ga-cells { opacity: .72; }
.ga-cells.shake { animation: gaShake .4s var(--ease-out); }
@keyframes gaShake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-9px); }
  38% { transform: translateX(8px); }
  58% { transform: translateX(-6px); }
  78% { transform: translateX(4px); }
}
.ga-err { margin: 10px 0 0; min-height: 0; font-size: 12px; color: var(--down); text-align: center; }

/* In-sheet keypad — same recipe as the top-up pad (the design language). */
.ga-pad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 14px;
}
.ga-key-btn {
  height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ov-key); border: 1px solid var(--ov-key-line);
  color: var(--text); font-size: 20px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ga-key-btn:active { background: var(--ov-key-press); transform: scale(.94); }
.ga-key-btn.is-x { color: var(--text-dim); }
.ga-key-btn svg { width: 22px; height: 22px; }
.ga-pad-blank { pointer-events: none; background: none; border-color: transparent; }

.ga-done { align-items: center; text-align: center; padding: 12px 0 14px; }
.ga-done-ic { color: var(--up); animation: popIn .45s var(--ease-spring) both; }
.ga-done-ic svg { width: 52px; height: 52px; }
.ga-done .ga-title { margin-top: 12px; }
.ga-done .ga-sub { margin-bottom: 0; }

/* Short viewports: cells and keys compress so nothing scrolls. */
@media (max-height: 700px) {
  .ga-cell { height: 48px; }
  .ga-key-btn { height: 46px; }
  .ga-qr svg { width: 158px; height: 158px; }
}