/* GladChat app shell: native-app feel inside the Android WebView */

/* No grey/blue flash when tapping, no long-press menu on buttons */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
a, button, [role="button"], .tab, label {
  -webkit-touch-callout: none;
  touch-action: manipulation; /* no double-tap zoom delay */
}
button, [role="button"], .tab, .tabbar {
  -webkit-user-select: none;
  user-select: none;
}
img {
  -webkit-user-drag: none;
}

/* No loading bar on top when changing page: feels like a native app */
.turbo-progress-bar {
  display: none !important;
}

/* Smooth page change animation (Turbo + Chrome view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .18s;
  animation-timing-function: ease-out;
}
/* Bottom tab bar stays in place while the page content changes */
.tabbar { view-transition-name: gc-tabbar; }
::view-transition-group(gc-tabbar) { animation-duration: 0s; }

/* animations play for everyone, even with "Remove animations" on: this block is kept but never applies */
@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ===== Room dock: room opens in a layer, minimizes into a floating circle ===== */
#gc-room-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: #080014;        /* same as the room page, no visible edge */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* room slides in from the right with a fade (and back out the same way) */
  transform: translate3d(28%, 0, 0);
  transition:
    transform .32s cubic-bezier(.22, .8, .24, 1),
    opacity .26s ease,
    visibility 0s linear .32s;
}
#gc-room-layer.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    transform .34s cubic-bezier(.22, .8, .24, 1),
    opacity .28s ease,
    visibility 0s;
}
#gc-room-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #080014;
}
/* Room open: the page behind is completely frozen (no scroll, no bounce).
   Pages like home.php force html/body scrolling with !important, so the
   lock has to cover html too. */
html.gc-room-open,
html.gc-room-open body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}
html.gc-room-open body > * { pointer-events: none !important; }

#gc-room-bubble {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147482000;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.3), left .28s ease, top .28s ease;
}
#gc-room-bubble.is-visible { opacity: 1; transform: none; pointer-events: auto; }
#gc-room-bubble.is-dragging { transition: none; }
#gc-room-bubble:active .gc-rb-disc { filter: brightness(.95); }
.gc-rb-disc {
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #7c5cff, #ff6b9d, #ffb86b, #7c5cff);
  box-shadow: 0 8px 22px rgba(80, 40, 160, .35);
  animation: gcRbSpin 8s linear infinite;
}
.gc-rb-disc img {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #e9e6ff;
  pointer-events: none;
}
.gc-rb-wave {
  position: absolute;
  left: 50%;
  bottom: -5px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 15px;
  padding: 3px 7px;
  border-radius: 10px;
  background: #7c5cff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  transform: translateX(-50%);
}
.gc-rb-wave i {
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: #fff;
  transform: scaleY(.35);
  transform-origin: bottom;
  animation: gcRbWave .9s ease-in-out infinite;   /* transform only: no layout/paint per frame */
}
.gc-rb-wave i:nth-child(2) { animation-delay: .15s; }
.gc-rb-wave i:nth-child(3) { animation-delay: .3s; }
@keyframes gcRbSpin { to { transform: rotate(360deg); } }
@keyframes gcRbWave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
/* animations play for everyone, even with "Remove animations" on: this block is kept but never applies */
@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  .gc-rb-disc, .gc-rb-wave i { animation: none; }
}

/* ===== Performance (low-end phones) ===== */

/* Instant press feedback (added on touchstart by lite-mode.js) */
.gc-press { opacity: .7 !important; transition: none !important; }

/* Tab bar background is already solid: the blur only cost GPU time */
.tabbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Optimistic tab switch while the next page loads */
.tabbar .tab.gc-tab-loading .tab-ico { transform: scale(.92); }

/* Lite mode (low-end / lagging phone): EVERY animation still plays, for everyone.
   Only the one thing that really costs weak GPUs goes: the live blur behind panels
   (it is repainted every frame). Panels get a solid colour instead, so they look the same. */
html.gc-lite *,
html.gc-lite *::before,
html.gc-lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.gc-lite .appbar { background-color: var(--color-k-surface, #fff) !important; }

/* Smooth everywhere: animated layers get their own GPU layer only while moving */
#gc-room-layer { will-change: transform, opacity; backface-visibility: hidden; }

/* ===== Full width on every phone =====
   Several screens were capped at 430px and centered. Phones set to a smaller
   "Display size" (common in the Android app) are wider than 430px, which left
   empty strips at the sides. Tablets (>= 768px) keep the phone-style frame.
   ("html body" prefix: page CSS loads later and must not win.) */
@media (max-width: 767px) {
  :root { --device-width: 100%; }
  html, html body { background: var(--color-k-surface, #fff) !important; }
  html body .device-frame,
  html body .home-main-header,
  html body .gc-store,
  html body .tabbar {
    max-width: none !important;
  }
  html body .device-frame {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }
}

/* ===== Tab bar: "My Room" label on the same line as the other labels =====
   It used a hand-positioned label; with Android's font scaling it slid under
   the round button. Now it sits in the normal flow exactly like the others,
   and the round button floats above it at a fixed distance.
   ("html body" prefix: the tab bar's own inline CSS comes later.) */
html body .tabbar .tab-center {
  transform: none !important;
}
html body .tabbar .tab-center::before {
  content: '';
  display: block;
  width: 36px;
  height: 32px;
  flex-shrink: 0;
}
html body .tabbar .tab-center .tab-label {
  position: static !important;
  transform: none !important;
  width: auto !important;
}
html body .tabbar .tab-center .tab-ico {
  top: -20px !important;
}
@media (max-width: 400px) {
  html body .tabbar .tab-center::before { width: 33px; height: 29px; }
  html body .tabbar .tab-center .tab-ico { top: -22px !important; }
}

/* =========================================================
   LOW-END PHONES (html.gc-lite): opening / closing / page-change
   animations still play; decorations that loop forever stop, and
   long lists skip drawing the cards that are off the screen.
   ========================================================= */
html.gc-lite .gc-rb-disc,
html.gc-lite .gc-rb-wave i,
html.gc-lite .room-rank-crown,
html.gc-lite .hero-streak::before,
html.gc-lite .flame-emoji,
html.gc-lite .claim-card .claim-gift,
html.gc-lite .room-card.has-room-frame .room-frame-wrap::before,
html.gc-lite .dg-card::before,
html.gc-lite .dg-hero-coin,
html.gc-lite .dg-day.is-today .dg-coin,
html.gc-lite .dg-day.is-today::after,
html.gc-lite .dg-claim::before { animation: none !important; }

/* long lists: cards off the screen are not drawn until scrolled near */
html.gc-lite .gc-conversation,
html.gc-lite .sq-card,
html.gc-lite .gc-up-moment,
html.gc-lite .fl-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}