/* Gully ID PWA shell: the phone tab bar, the install bar and toasts. Shared by every page; class names are gid-* only,
   so the Gully Wallet (W2 Night Signal) keeps its own styles. Colours come from the brand kit tokens (--gid-*). */
.gid-tabbar { display: none; }
@media (max-width: 899px) {
  .gid-tabbar {
    display: grid; grid-template-columns: repeat(var(--gid-tabs, 5), minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--gid-bg, #fff) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--gid-border, #E6E8EC);
  }
  .gid-tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 52px; min-width: 44px; border-radius: 12px; text-decoration: none;
    color: var(--gid-muted, #5B6270); font: 600 11px/1.1 var(--gid-font, Inter, system-ui, sans-serif);
  }
  .gid-tabbar a svg { width: 20px; height: 20px; }
  .gid-tabbar a[aria-current] { color: var(--gid-accent, #00777F); }
  .gid-tabbar a:focus-visible { outline: 2px solid var(--gid-focus, #0096A0); outline-offset: -2px; }
  body.gid-has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

.gid-toasts { position: fixed; z-index: 70; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 899px) { body.gid-has-tabbar .gid-toasts { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .gid-toasts { left: 16px; right: 16px; max-width: none; } }
.gid-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 14px;
  background: #0A1018; color: #E7EEF8; border: 1px solid #22344F; border-left: 3px solid #00F7FC; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(5, 8, 13, .28); font: 400 14px/1.4 var(--gid-font, Inter, system-ui, sans-serif);
  animation: gid-toast-in .24s cubic-bezier(.2, .8, .2, 1);
}
.gid-toast > div { flex: 1; min-width: 0; }
.gid-toast b { display: block; font-weight: 700; }
.gid-toast span { display: block; color: #B5C3D6; font-size: 13px; }
.gid-toast.is-ok { border-left-color: #46FB04; }
.gid-toast.is-warn { border-left-color: #F9AE1B; }
.gid-toast.is-err { border-left-color: #FF7A7A; }
.gid-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.gid-toast-x { flex: none; width: 44px; height: 44px; margin: -10px -2px -10px 0; border: 0; border-radius: 10px; background: transparent; color: #9FB0C8; font: 400 22px/1 system-ui, sans-serif; cursor: pointer; }
.gid-toast-x:hover { color: #fff; }
@keyframes gid-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.gid-install {
  position: fixed; z-index: 65; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 520px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  background: #05080D; color: #E7EEF8; border: 1px solid #22344F; border-radius: 20px;
  box-shadow: 0 20px 50px rgba(5, 8, 13, .35); font: 400 14px/1.4 var(--gid-font, Inter, system-ui, sans-serif);
  animation: gid-toast-in .3s cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 899px) { body.gid-has-tabbar .gid-install, body.gw .gid-install { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
.gid-install img { border-radius: 10px; flex: none; }
.gid-install p { flex: 1 1 180px; margin: 0; min-width: 0; }
.gid-install p b { display: block; font-weight: 700; }
.gid-install p span { color: #B5C3D6; font-size: 13px; }
.gid-install button { min-height: 44px; padding: 0 16px; border-radius: 999px; font: 700 14px var(--gid-font, Inter, system-ui, sans-serif); cursor: pointer; }
.gid-install-no { background: transparent; color: #CFDAE8; border: 1px solid #22344F; }
.gid-install-yes { background: #00F7FC; color: #05080D; border: 1px solid #00F7FC; }
.gid-install button:focus-visible, .gid-toast-x:focus-visible { outline: 2px solid #00F7FC; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .gid-toast, .gid-install { animation: none; } .gid-toast.is-out { transition: none; } }

/* never over an open sheet or dialog */
body:has(.gw-dialog:not([hidden])) .gid-install { display: none; }