/* App shell + animations for the Invest mini app.
   Design tokens come from css/ds/colors_and_type.css. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
#app { height: 100%; }

.app-shell {
  position: relative;
  height: 100vh;
  height: 100dvh;
  max-width: 480px;      /* keep it phone-width and centered outside Telegram / on tablets */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  color: var(--fg-1);
  overflow: hidden;
}

.glass-top {
  position: relative;
  z-index: 6;
  flex: none;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  background: var(--bg-1); /* solid fallback for WebViews without color-mix()/oklch */
  background: color-mix(in oklch, var(--bg-1) 66%, transparent);
  border-bottom: 1px solid var(--border-1);
  border-bottom: 1px solid color-mix(in oklch, var(--border-1) 50%, transparent);
  /* Clear the device notch AND Telegram's floating top controls (Close/collapse/menu).
     Telegram vars are published from JS (TG.applyInsets); env() is the browser fallback. */
  padding-top: calc(var(--tg-safe-top, env(safe-area-inset-top, 0px)) + var(--tg-content-top, 0px));
}

.scroll {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { width: 0; height: 0; }

/* Inside Telegram we drop our own header (native bar covers it); the content itself
   must then clear the device notch + Telegram's floating top controls. */
.tg .scroll { padding-top: calc(var(--tg-safe-top, 0px) + var(--tg-content-top, 0px)); }

.main-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 14px 16px calc(20px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-bottom, 0px)));
  background: var(--bg-1); /* solid fallback for WebViews without color-mix()/oklch */
  background: linear-gradient(to top, color-mix(in oklch, var(--bg-1) 92%, transparent) 60%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

input { font-family: inherit; }
input:focus:not(:focus-visible) { outline: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }

/* Visible keyboard focus (was globally suppressed). */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* Big amount entry ($ + digits): the focus ring wraps the whole "$250" with
   padding, so the currency mark sits attached to the number and the ring never
   hugs the digits. The inner input keeps no outline of its own. */
.amount-field { display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 18px; border-radius: 16px; max-width: 100%; }
.amount-field:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.amount-field input:focus-visible { outline: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 65% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes chartdraw { from { stroke-dashoffset: 1300; } to { stroke-dashoffset: 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@keyframes glowdrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(46px, 34px) scale(1.1); }
  66% { transform: translate(-34px, 22px) scale(.95); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

/* Ambient brand glow (dark theme only) — restores the atmosphere from the design. */
.theme-dark .app-shell::before,
.theme-dark .app-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.theme-dark .app-shell::before {
  top: -160px; left: -120px; width: 420px; height: 420px;
  background: radial-gradient(circle, hsl(106 94% 12%), transparent 68%);
  animation: glowdrift 16s ease-in-out infinite;
}
.theme-dark .app-shell::after {
  top: -60px; right: -160px; width: 360px; height: 360px;
  background: radial-gradient(circle, hsl(150 90% 10%), transparent 70%);
  animation: glowdrift 20s ease-in-out infinite reverse;
}