/* ============================================================

   LAOS Intersport — style.css

   Customer-facing pages. Mobile-first, green theme, Lao text.

   WhatsApp-style bubbles with tails. PWA install banner, lightbox,

   voice-note player, animations.

   ============================================================ */



/* -------------------- Design tokens -------------------- */

:root {

  /* Brand palette (verified LAOS logo) */

  --brand: #00AEEF;          /* primary green */

  --brand-dark: #0089B5;     /* dark green */

  --brand-light: #4CAF50;    /* bright green accent */

  --gold: #DF0024;           /* gold */

  --gold-orange: #EA580C;    /* orange (game gradient end) */

  --red: #DF0024;            /* accent / blocked */



  /* Surfaces */

  --bg: #F4F7FB;             /* customer app bg (light) */

  --surface: #FFFFFF;        /* white cards */

  --chat-bg: #E7F0E7;        /* chat thread bg (light green-gray) */



  /* Text */

  --text: #0F172A;           /* slate-900 */

  --text-muted: #64748B;     /* muted */

  --border: #E2E8F0;         /* light border */



  /* Admin (not used in customer pages but available) */

  --admin-sidebar: #0B2A1A;

  --admin-surface: #15301F;

  --admin-accent: #4CAF50;



  /* Bubble */

  --bubble-out: linear-gradient(135deg, #00AEEF 0%, #0089B5 100%);

  --bubble-in: #FFFFFF;



  /* Effects */

  --radius: 14px;

  --radius-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);

  --shadow-md: 0 4px 16px rgba(0,0,0,.10);

  --shadow-lg: 0 10px 30px rgba(0,0,0,.16);

  --tap: 48px;               /* min touch target */

  --maxw: 480px;             /* customer max width */

  --safe-top: env(safe-area-inset-top, 0px);

  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --safe-left: env(safe-area-inset-left, 0px);

  --safe-right: env(safe-area-inset-right, 0px);

}



/* -------------------- Reset -------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {

  font-family: 'Noto Sans Lao', 'Inter', system-ui, -apple-system, sans-serif;

  background: var(--bg);

  color: var(--text);

  font-size: 16px;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

  overscroll-behavior-y: none;

}

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

input, textarea { font-family: inherit; font-size: 16px; }

a { color: inherit; text-decoration: none; }

.num, time { font-family: 'Inter', sans-serif; }



.app {

  max-width: var(--maxw);

  margin: 0 auto;

  min-height: 100vh;

  min-height: 100dvh;

  position: relative;

}



/* Chat page: lock body scroll so the composer stays pinned above the keyboard */

body:has(#chat-root) { overflow: hidden; height: 100vh; height: 100dvh; }



/* ============================================================

   WHATSAPP-STYLE COMPOSER + NOTIF TOGGLE (2026-08-13)

   ============================================================ */



/* Chat page: override .app max-width so chat fills full viewport */

body:has(#chat-root) .app {

  max-width: 100% !important;

}

body:has(#chat-root) .chat {

  max-width: 100% !important;

  width: 100% !important;

}



/* Chat header: full width */

.chat-header {

  padding: calc(8px + var(--safe-top)) 8px 8px !important;

  gap: 8px !important;

}



/* Notification toggle button in header */

.chat-header__notif {

  width: 40px; height: 40px;

  flex: 0 0 40px;

  display: grid; place-items: center;

  border-radius: 50%;

  background: var(--surface);

  border: 1px solid var(--border);

  color: var(--brand);

  transition: all .2s ease;

  position: relative;

  margin-left: auto;

}

.chat-header__notif:active { background: var(--border); transform: scale(.92); }

.chat-header__notif--active { color: var(--brand); }

.chat-header__notif--active::after {

  content: '';

  position: absolute;

  top: 7px; right: 7px;

  width: 8px; height: 8px;

  border-radius: 50%;

  background: var(--brand-light);

  border: 2px solid var(--surface);

}

.chat-header__notif--off { color: var(--text-muted); opacity: .45; }

.chat-header__notif .notif-icon-off { display: none; }

.chat-header__notif--off .notif-icon-on { display: none; }

.chat-header__notif--off .notif-icon-off { display: block; }

.chat-header__notif--denied { color: var(--red); border-color: var(--red); opacity: .6; }

.chat-header__notif--active .notif-icon-on { display: block; }

.chat-header__notif--active .notif-icon-off { display: none; }





/* ============================================================

   Animations

   ============================================================ */

@keyframes springUp {

  0%   { opacity: 0; transform: translateY(40px) scale(.96); }

  60%  { opacity: 1; transform: translateY(-6px) scale(1.01); }

  100% { opacity: 1; transform: translateY(0) scale(1); }

}

@keyframes fadeInUp {

  from { opacity: 0; transform: translateY(16px); }

  to   { opacity: 1; transform: translateY(0); }

}

@keyframes staggerIn {

  from { opacity: 0; transform: translateY(24px) scale(.97); }

  to   { opacity: 1; transform: translateY(0) scale(1); }

}

@keyframes bubbleScaleIn {

  from { opacity: 0; transform: scale(.8); }

  to   { opacity: 1; transform: scale(1); }

}

@keyframes pressDown {

  to { transform: scale(.94); }

}

@keyframes typingBounce {

  0%, 60%, 100% { transform: translateY(0); opacity: .4; }

  30% { transform: translateY(-5px); opacity: 1; }

}

@keyframes spin {

  to { transform: rotate(360deg); }

}

@keyframes pulse {

  0%, 100% { transform: scale(1); opacity: 1; }

  50% { transform: scale(1.3); opacity: .6; }

}



.btn-press:active { animation: pressDown .12s ease forwards; }



/* ============================================================

   Install banner

   ============================================================ */

.install-banner {

  position: fixed;

  left: 50%;

  transform: translateX(-50%) translateY(-120%);

  bottom: auto;

  top: calc(var(--safe-top) + 8px);

  width: calc(100% - 24px);

  max-width: var(--maxw);

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  z-index: 1000;

  transition: transform .4s cubic-bezier(.2,.9,.3,1.2), opacity .3s;

  opacity: 0;

}

.install-banner--show { transform: translateX(-50%) translateY(0); opacity: 1; }

.install-banner__icon {

  width: 38px; height: 38px; flex: 0 0 38px;

  border-radius: 10px;

  background: linear-gradient(135deg, var(--brand), var(--brand-dark));

  color: #fff;

  display: grid; place-items: center;

}

.install-banner__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.install-banner__text strong { font-size: 14px; color: var(--text); }

.install-banner__text span { font-size: 12px; color: var(--text-muted); }

.install-banner__btn {

  background: linear-gradient(135deg, var(--brand), var(--brand-dark));

  color: #fff; font-weight: 600; font-size: 14px;

  padding: 9px 16px; border-radius: 10px; white-space: nowrap;

}

.install-banner__close { font-size: 22px; color: var(--text-muted); padding: 4px 8px; line-height: 1; }



/* ============================================================

   Toasts

   ============================================================ */

.toast-container {

  position: fixed;

  left: 50%; transform: translateX(-50%);

  bottom: calc(80px + var(--safe-bottom));

  z-index: 1100;

  display: flex; flex-direction: column; gap: 8px;

  width: calc(100% - 32px); max-width: var(--maxw);

  pointer-events: none;

}

.toast {

  background: var(--text);

  color: #fff;

  padding: 12px 16px;

  border-radius: 12px;

  font-size: 14px;

  box-shadow: var(--shadow-md);

  opacity: 0; transform: translateY(20px);

  transition: opacity .3s, transform .3s;

  text-align: center;

}

.toast--show { opacity: 1; transform: translateY(0); }

.toast--success { background: var(--brand-dark); }

.toast--error { background: var(--red); }



/* ============================================================

   Lightbox

   ============================================================ */

.lightbox {

  position: fixed; inset: 0;

  background: rgba(0,0,0,.92);

  z-index: 2000;

  display: grid; place-items: center;

  opacity: 0; transition: opacity .25s;

  padding: 24px;

}

.lightbox[hidden] { display: none; }

.lightbox--show { opacity: 1; }

.lightbox__img { max-width: 95vw; max-height: 88vh; border-radius: 8px; }

.lightbox__close {

  position: absolute; top: calc(12px + var(--safe-top)); right: 16px;

  width: 44px; height: 44px; border-radius: 50%;

  background: rgba(255,255,255,.15); color: #fff;

  font-size: 28px; line-height: 1; display: grid; place-items: center;

}



/* ============================================================

   Topbar (shared header)

   ============================================================ */

.topbar {

  position: sticky; top: 0; z-index: 50;

  display: flex; align-items: center; justify-content: space-between;

  padding: calc(8px + var(--safe-top)) 12px 8px;

  background: var(--surface);

  border-bottom: 1px solid var(--border);

  min-height: calc(56px + var(--safe-top));

}

.topbar__brand { display: flex; align-items: center; gap: 10px; }

.topbar__logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }

.topbar__name { font-weight: 700; font-size: 17px; color: var(--brand-dark); }

.topbar__center {

  position: absolute; left: 50%; transform: translateX(-50%);

  font-size: 17px; font-weight: 600;

}

.topbar__icon-btn {

  width: var(--tap); height: var(--tap);

  display: grid; place-items: center;

  border-radius: 12px; color: var(--text);

  transition: background .15s;

}

.topbar__icon-btn:active { background: var(--border); }

.topbar__icon-btn.spin svg { animation: spin .6s linear; }



/* ============================================================

   Login screen

   ============================================================ */

.login-screen {

  min-height: 100vh; min-height: 100dvh;

  display: flex; flex-direction: column;

}

.login-hero {

  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);

  color: #fff;

  padding: calc(56px + var(--safe-top)) 24px 64px;

  text-align: center;

  position: relative;

  overflow: hidden;

}

.login-hero::after {

  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 40px;

  background: var(--bg); border-radius: 40px 40px 0 0;

}

.login-hero__logo {

  width: 92px; height: 92px; margin: 0 auto 14px;

  border-radius: 22px; overflow: hidden;

  background: rgba(255,255,255,.18);

  box-shadow: 0 8px 24px rgba(0,0,0,.25);

  animation: springUp .7s cubic-bezier(.2,.9,.3,1.2) both;

}

.login-hero__logo img { width: 100%; height: 100%; object-fit: cover; }

.login-hero__title { font-size: 30px; font-weight: 700; letter-spacing: .5px; animation: fadeInUp .6s .1s both; }

.login-hero__tagline {

  margin-top: 6px; font-size: 16px; opacity: .92;

  animation: fadeInUp .6s .2s both;

}



.login-card {

  flex: 1;

  background: var(--bg);

  margin: -24px 18px 0;

  padding: 28px 22px calc(28px + var(--safe-bottom));

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);

  animation: springUp .6s .15s cubic-bezier(.2,.9,.3,1.2) both;

  position: relative; z-index: 2;

}

.login-card__heading { font-size: 20px; font-weight: 700; margin-bottom: 18px; color: var(--text); }

.login-error {

  display: flex; align-items: center; gap: 8px;

  background: #FDECEC; color: var(--red);

  border: 1px solid #F5C2C2;

  padding: 10px 12px; border-radius: 12px;

  font-size: 14px; margin-bottom: 14px;

  animation: bubbleScaleIn .3s ease;

}

.login-field { display: block; margin-bottom: 16px; }

.login-field__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--text); }

.login-field__wrap {

  position: relative; display: flex; align-items: center;

  background: var(--surface); border: 1.5px solid var(--border);

  border-radius: 12px; transition: border-color .2s, box-shadow .2s;

}

.login-field__wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(46,125,50,.15); }

.login-field__icon { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; }

.login-field__wrap input {

  width: 100%; border: none; outline: none;

  background: transparent; padding: 14px 14px 14px 42px;

  font-size: 16px; color: var(--text); border-radius: 12px;

}

.login-submit {

  width: 100%; margin-top: 6px;

  padding: 15px; border-radius: 12px;

  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);

  color: #fff; font-size: 17px; font-weight: 700;

  box-shadow: 0 6px 18px rgba(27,94,32,.35);

  transition: transform .12s, box-shadow .2s;

}

.login-submit:active { transform: scale(.97); box-shadow: 0 3px 10px rgba(27,94,32,.3); }

.login-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-muted); }



/* ============================================================

   Home

   ============================================================ */

.home { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.home-grid {

  flex: 1;

  display: flex; flex-direction: column; gap: 16px;

  padding: 18px 16px calc(20px + var(--safe-bottom));

}

.home-tile {

  position: relative;

  flex: 1; min-height: 42vh;

  border-radius: var(--radius-lg);

  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;

  padding: 26px 24px;

  color: #fff;

  box-shadow: var(--shadow-md);

  overflow: hidden;

  opacity: 0;

  animation: staggerIn .55s var(--delay, 0ms) cubic-bezier(.2,.9,.3,1.1) forwards;

  transition: transform .12s;

}

.home-tile:active { transform: scale(.97); }

.home-tile--chat {

  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-dark) 100%);

}

.home-tile--game {

  background: linear-gradient(150deg, var(--gold) 0%, var(--gold-orange) 100%);

}

.home-tile--download {

  background: linear-gradient(150deg, var(--brand-dark) 0%, #0A1929 100%);

}

.home-tile__icon {

  position: absolute; top: 22px; right: 22px;

  width: 64px; height: 64px; border-radius: 18px;

  background: rgba(255,255,255,.22);

  display: grid; place-items: center;

  backdrop-filter: blur(4px);

}

.home-tile__body { display: flex; flex-direction: column; gap: 2px; }

.home-tile__title { font-size: 28px; font-weight: 700; line-height: 1.1; }

.home-tile__subtitle { font-size: 15px; opacity: .92; }

.home-tile__badge {

  position: absolute; top: 22px; left: 22px;

  min-width: 26px; height: 26px; padding: 0 8px;

  border-radius: 13px; background: var(--red); color: #fff;

  font-size: 14px; font-weight: 700;

  display: grid; place-items: center;

  box-shadow: 0 2px 8px rgba(198,40,40,.5);

  animation: bubbleScaleIn .4s ease;

}



/* ============================================================

   Chat

   ============================================================ */

.chat {

  display: flex; flex-direction: column;

  height: 100vh; height: 100dvh;

  max-width: 100%; margin: 0 auto;

  background: var(--chat-bg);

  overflow: hidden;

}



/* Header */

.chat-header {

  position: sticky; top: 0; z-index: 40;

  flex-shrink: 0;

  display: flex; align-items: center; gap: 10px;

  padding: calc(8px + var(--safe-top)) 10px 8px;

  background: var(--surface);

  border-bottom: 1px solid var(--border);

  box-shadow: var(--shadow-sm);

}

.chat-header__back {

  width: var(--tap); height: var(--tap);

  display: grid; place-items: center; border-radius: 10px;

  color: var(--brand-dark);

}

.chat-header__back:active { background: var(--border); }

.chat-header__avatar {

  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;

  background: var(--chat-bg); flex: 0 0 40px;

}

.chat-header__avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-header__meta { display: flex; flex-direction: column; line-height: 1.25; }

.chat-header__name { font-weight: 700; font-size: 16px; color: var(--text); }

.chat-header__status { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

.chat-header__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-light); box-shadow: 0 0 0 2px rgba(76,175,80,.2); }



/* Thread */

.chat-thread {

  flex: 1; overflow-y: auto; overflow-x: hidden;

  padding: 8px 0;

  -webkit-overflow-scrolling: touch;

  scroll-behavior: smooth;

}

.chat-thread__pad-top { height: 4px; }



/* Date separator */

.date-sep {

  display: flex; justify-content: center; margin: 14px 0 10px;

}

.date-sep__pill {

  background: rgba(15,23,42,.12); color: var(--text);

  font-size: 12px; font-weight: 600;

  padding: 4px 12px; border-radius: 10px;

  backdrop-filter: blur(4px);

}



/* Bubbles */

.msg-row { display: flex; padding: 2px 12px; margin-bottom: 2px; animation: bubbleScaleIn .22s ease; }

.msg-row--out { justify-content: flex-end; }

.msg-row--in { justify-content: flex-start; }



.bubble {

  position: relative;

  max-width: 78%;

  padding: 8px 10px 7px;

  border-radius: 14px;

  font-size: 15.5px;

  word-wrap: break-word; overflow-wrap: break-word;

  box-shadow: var(--shadow-sm);

  line-height: 1.4;

}

.bubble--out {

  background: var(--bubble-out);

  color: #fff;

  border-bottom-right-radius: 5px;

}

.bubble--in {

  background: var(--bubble-in);

  color: var(--text);

  border: 1px solid var(--border);

  border-bottom-left-radius: 5px;

}

/* tails */

.bubble--out::after {

  content: ''; position: absolute; right: -7px; bottom: 0;

  width: 0; height: 0;

  border-left: 8px solid var(--brand-dark);

  border-top: 8px solid transparent;

  border-bottom: 0;

}

.bubble--in::after {

  content: ''; position: absolute; left: -7px; bottom: 0;

  width: 0; height: 0;

  border-right: 8px solid var(--bubble-in);

  border-top: 8px solid transparent;

  border-bottom: 0;

}

.bubble__text { white-space: pre-wrap; }

.bubble__meta {

  display: inline-flex; align-items: center; gap: 4px;

  float: right; margin: 4px 0 0 6px;

  font-size: 11px; font-family: 'Inter', sans-serif;

}

.bubble--out .bubble__meta { color: rgba(255,255,255,.78); }

.bubble--in .bubble__meta { color: var(--text-muted); }

.tick { display: inline-flex; }

.tick--read { color: #4FC3F7; }



/* Image bubble */

.bubble--img { padding: 4px; background: transparent; box-shadow: none; }

.bubble--img .bubble__media {

  border-radius: 12px; overflow: hidden; max-width: 280px; cursor: pointer;

}

.bubble--img img { width: 100%; height: auto; display: block; }

.bubble--img .bubble__meta { background: rgba(0,0,0,.45); border-radius: 8px; padding: 2px 6px; color: #fff; }



/* Audio / voice note bubble */

.bubble--audio { min-width: 200px; }

.vn {

  display: flex; align-items: center; gap: 10px;

  padding: 4px 2px;

}

.vn__play {

  width: 38px; height: 38px; flex: 0 0 38px;

  border-radius: 50%; display: grid; place-items: center;

  background: rgba(255,255,255,.25); color: #fff;

}

.bubble--in .vn__play { background: var(--brand); color: #fff; }

.vn__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.vn__wave { height: 26px; display: flex; align-items: center; gap: 2px; cursor: pointer; }

.vn__bar { flex: 1; background: rgba(255,255,255,.4); border-radius: 2px; min-width: 2px; transition: background .15s; }

.bubble--in .vn__bar { background: rgba(46,125,50,.35); }

.vn__bar--played { background: #fff; }

.bubble--in .vn__bar--played { background: var(--brand-dark); }

.vn__time { font-size: 11px; font-family: 'Inter', sans-serif; }

.bubble--out .vn__time { color: rgba(255,255,255,.8); }

.bubble--in .vn__time { color: var(--text-muted); }



/* Typing indicator */

.typing {

  flex-shrink: 0;

  z-index: 99;

  background: var(--chat-bg);

  display: flex; gap: 4px; align-items: center;

  padding: 4px 18px 2px; height: 26px;

  max-width: var(--maxw);

  margin: 0 auto;

}

.typing__dot {

  width: 8px; height: 8px; border-radius: 50%;

  background: var(--text-muted); opacity: .5;

  animation: typingBounce 1.2s infinite;

}

.typing__dot:nth-child(2) { animation-delay: .15s; }

.typing__dot:nth-child(3) { animation-delay: .3s; }



/* Quick replies */

.quick-replies {

  flex-shrink: 0;

  z-index: 98;

  background: var(--chat-bg);

  display: flex; gap: 8px; overflow-x: auto;

  padding: 6px 12px; scrollbar-width: none;

  max-width: var(--maxw);

  margin: 0 auto;

}

.quick-replies::-webkit-scrollbar { display: none; }

.quick-reply {

  flex: 0 0 auto; white-space: nowrap;

  background: var(--surface); border: 1px solid var(--border);

  color: var(--brand-dark); font-size: 14px; font-weight: 500;

  padding: 8px 14px; border-radius: 18px;

  box-shadow: var(--shadow-sm);

}

.quick-reply:active { background: var(--chat-bg); }



/* Composer */

.composer {

  flex-shrink: 0;

  z-index: 100;

  display: flex; align-items: flex-end; gap: 6px;

  padding: 6px 8px;

  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));

  background: var(--surface);

  border-top: 1px solid var(--border);

  max-width: 100%;

  margin: 0 auto;

  width: 100%;

}

.composer__btn {

  width: var(--tap); height: var(--tap);

  min-width: 44px; min-height: 44px;

  display: grid; place-items: center; border-radius: 50%;

  color: var(--brand-dark); flex: 0 0 var(--tap);

  flex-shrink: 0;

  transition: background .15s, transform .1s;

}

.composer__btn svg { width: 24px; height: 24px; pointer-events: none; }

.composer__btn:active { background: var(--chat-bg); transform: scale(.92); }

.composer__input-wrap { flex: 1; min-width: 0; }

.composer__input {

  width: 100%;

  min-height: 42px; max-height: 140px;

  border: 1.5px solid var(--border); outline: none;

  background: var(--surface); border-radius: 20px;

  padding: 8px 16px; font-size: 16px; line-height: 24px;

  color: var(--text);

  resize: none; overflow-y: auto;

  -webkit-appearance: none;

  box-sizing: border-box;

}

.composer__input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0,174,239,.15); }

.composer__send {

  background: linear-gradient(135deg, var(--brand-light), var(--brand));

  color: #fff;

  box-shadow: 0 3px 10px rgba(46,125,50,.4);

}

.composer__send:active { background: var(--brand-dark); }

.composer__mic.recording-active {

  background: var(--red); color: #fff;

  animation: pulse 1s infinite;

}



/* Recording overlay */

.recording {

  position: absolute; inset: 0;

  background: var(--surface);

  display: flex; align-items: center; justify-content: center; gap: 12px;

  z-index: 5; padding: 0 16px;

  border-radius: 0;

}

.recording__pulse {

  width: 14px; height: 14px; border-radius: 50%;

  background: var(--red); animation: pulse 1s infinite;

}

.recording__text { font-size: 15px; color: var(--text); font-weight: 500; }

.recording__text b { font-family: 'Inter', sans-serif; }

.recording__hint { font-size: 13px; color: var(--text-muted); }



/* ============================================================

   Game links

   ============================================================ */

.games { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: 80px; }

.dl-page { padding-bottom: 80px; }



.ptr {

  height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px;

  color: var(--text-muted); font-size: 13px;

  overflow: hidden; opacity: 0;

  transition: opacity .2s;

}

.ptr__spinner {

  width: 18px; height: 18px; border-radius: 50%;

  border: 2px solid var(--border); border-top-color: var(--brand);

  display: none;

}

.ptr--loading .ptr__spinner { display: block; animation: spin .7s linear infinite; }

.ptr--loading .ptr__text { display: inline; }



.chips {

  display: flex; gap: 8px; padding: 10px 14px;

  overflow-x: auto; scrollbar-width: none;

  border-bottom: 1px solid var(--border);

}

.chips::-webkit-scrollbar { display: none; }

.chip {

  flex: 0 0 auto; white-space: nowrap;

  padding: 8px 16px; border-radius: 18px;

  background: var(--surface); border: 1px solid var(--border);

  color: var(--text-muted); font-size: 14px; font-weight: 500;

}

.chip--active {

  background: linear-gradient(135deg, var(--brand), var(--brand-dark));

  color: #fff; border-color: transparent;

}



.game-list { padding: 12px 14px calc(80px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px; }

.game-card {

  display: flex; align-items: center; gap: 12px;

  background: var(--surface); border: 1px solid var(--border);

  border-radius: var(--radius); padding: 10px;

  box-shadow: var(--shadow-sm);

  animation: fadeInUp .35s ease both;

  transition: transform .12s;

}

.game-card:active { transform: scale(.98); }

.game-card--blocked {

  opacity: .55; border-color: var(--red); border-width: 1.5px;

  background: #FFF5F5;

}

.game-card__thumb {

  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 10px; overflow: hidden;

  background: var(--chat-bg);

}

.game-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.game-card__thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 26px; }

.game-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.game-card__title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.game-card__url { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.game-card__chip {

  align-self: flex-start; font-size: 11px; font-weight: 600;

  padding: 2px 9px; border-radius: 8px; margin-top: 2px;

}

.game-card__chip--ok { background: rgba(46,125,50,.12); color: var(--brand-dark); }

.game-card__chip--blocked { background: rgba(198,40,40,.12); color: var(--red); }

.game-card__change {

  flex: 0 0 auto; padding: 8px 14px; border-radius: 10px;

  background: var(--gold); color: var(--text); font-size: 13px; font-weight: 600;

}

.game-card__change:active { transform: scale(.94); }

.game-empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-size: 15px; }





/* ============================================================

   Bottom Navigation (shared)

   ============================================================ */

.bottom-nav {

  position: fixed;

  bottom: 0; left: 0; right: 0;

  z-index: 100;

  background: var(--surface);

  border-top: 1px solid var(--border);

  display: flex;

  padding-bottom: env(safe-area-inset-bottom, 0px);

  max-width: var(--maxw);

  margin: 0 auto;

  box-shadow: 0 -2px 10px rgba(0,0,0,.06);

}

.bottom-nav__tab {

  flex: 1;

  display: flex; flex-direction: column;

  align-items: center; justify-content: center;

  gap: 2px;

  padding: 8px 0;

  min-height: 56px;

  text-decoration: none;

  color: var(--text-muted);

  font-size: 11px;

  font-weight: 500;

  transition: color .15s;

}

.bottom-nav__tab--active { color: var(--brand); font-weight: 600; }

.bottom-nav__icon { width: 24px; height: 24px; pointer-events: none; }

.bottom-nav__label { font-size: 11px; line-height: 1; }



/* ============================================================

   Home - compact dashboard cards (redesigned)

   ============================================================ */

.home-welcome { text-align: center; padding: 24px 20px 8px; }

.home-welcome__avatar {

  width: 56px; height: 56px; border-radius: 50%;

  margin: 0 auto 10px; overflow: hidden;

  background: linear-gradient(135deg, var(--brand), var(--brand-dark));

  display: grid; place-items: center;

  box-shadow: var(--shadow-md);

}

.home-welcome__avatar img { width: 100%; height: 100%; object-fit: cover; }

.home-welcome__title { font-size: 24px; font-weight: 700; color: var(--text); animation: fadeInUp .5s both; }

.home-welcome__sub { font-size: 14px; color: var(--text-muted); margin-top: 6px; animation: fadeInUp .5s .1s both; }



.home-cards { display: flex; gap: 12px; padding: 16px 14px 80px; animation: fadeInUp .5s .15s both; }

.home-card {

  flex: 1; display: flex; flex-direction: row; align-items: center; gap: 12px;

  min-height: 120px; border-radius: 16px;

  padding: 16px 14px; color: #fff;

  box-shadow: var(--shadow-md);

  position: relative; overflow: hidden;

  transition: transform .12s;

}

.home-card:active { transform: scale(.97); }

.home-card--chat { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }

.home-card--game { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-orange) 100%); }

.home-card__icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: rgba(255,255,255,.22); display: grid; place-items: center; }

.home-card__icon svg { width: 28px; height: 28px; }

.home-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.home-card__title { font-size: 16px; font-weight: 700; }

.home-card__sub { font-size: 12px; opacity: .9; }

.home-card__badge {

  position: absolute; top: 8px; right: 8px;

  min-width: 22px; height: 22px; padding: 0 6px;

  border-radius: 11px; background: var(--red); color: #fff;

  font-size: 12px; font-weight: 700;

  display: grid; place-items: center;

  box-shadow: 0 2px 6px rgba(198,40,40,.5);

  animation: bubbleScaleIn .4s ease;

}/* ============================================================

   Responsive tweaks

   ============================================================ */

@media (min-width: 481px) {

  .app { box-shadow: 0 0 40px rgba(0,0,0,.08); }

}

@media (max-width: 360px) {

  .home-tile__title { font-size: 24px; }

  .bubble { max-width: 84%; }

}



/* Reduce motion */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

}





/* ============================================================

   COMPOSER VISIBILITY FIX (2026-08-12)

   Ensures chat input bar is always visible at the bottom on mobile.

   ============================================================ */



/* Critical: [hidden] attribute must work even when display:flex/grid is set */

.recording[hidden] { display: none !important; }

.typing[hidden] { display: none !important; }

.quick-replies[hidden] { display: none !important; }

.composer__send[hidden] { display: none !important; }

.lightbox[hidden] { display: none !important; }



/* Composer: fixed at bottom, always visible */

.composer {

  position: relative !important;

  flex-shrink: 0 !important;

  bottom: auto !important;

  left: auto !important;

  right: auto !important;

  z-index: 100 !important;

  background: var(--surface) !important;

  border-top: 1px solid var(--border) !important;

  padding: 6px 8px !important;

  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;

  display: flex !important;

  align-items: flex-end !important;

  gap: 6px !important;

  max-width: 100% !important;

  margin: 0 auto !important;

  width: 100% !important;

  box-shadow: 0 -2px 10px rgba(0,0,0,.05) !important;

}



/* Chat thread: leave room for the fixed composer */

.chat-thread {

  padding-bottom: 8px !important;

}



/* Input field */

.composer__input {

  width: 100% !important;

  min-height: 42px !important;

  max-height: 140px !important;

  border: 1.5px solid var(--border) !important;

  border-radius: 20px !important;

  padding: 8px 16px !important;

  font-size: 16px !important;

  line-height: 24px !important;

  background: var(--surface) !important;

  color: var(--text) !important;

  resize: none !important;

  overflow-y: auto !important;

  box-sizing: border-box !important;

}



/* Buttons: 44px minimum touch target */

.composer__btn {

  min-width: 44px !important;

  min-height: 44px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 50% !important;

}

/* END COMPOSER VISIBILITY FIX */





/* ============================================================

   WHATSAPP-STYLE COMPOSER BAR (2026-08-13)

   Tight, full-width, pinned to bottom. Buttons grouped.

   ============================================================ */

.composer {

  position: relative !important;

  flex-shrink: 0 !important;

  z-index: 100 !important;

  display: flex !important;

  align-items: flex-end !important;

  gap: 3px !important;

  padding: 6px 6px !important;

  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;

  background: var(--surface) !important;

  border-top: 1px solid var(--border) !important;

  width: 100% !important;

  max-width: 100% !important;

  margin: 0 !important;

  box-shadow: 0 -1px 6px rgba(0,0,0,.06) !important;

}

.composer__btn {

  width: 42px !important;

  height: 42px !important;

  min-width: 42px !important;

  min-height: 42px !important;

  flex: 0 0 42px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 50% !important;

  flex-shrink: 0 !important;

}

.composer__btn svg { width: 22px !important; height: 22px !important; pointer-events: none; }

.composer__input-wrap {

  flex: 1 1 auto !important;

  min-width: 0 !important;

}

.composer__input {

  width: 100% !important;

  min-height: 42px !important;

  max-height: 120px !important;

  border: 1.5px solid var(--border) !important;

  border-radius: 22px !important;

  padding: 9px 16px !important;

  font-size: 16px !important;

  line-height: 24px !important;

  background: var(--surface) !important;

  color: var(--text) !important;

  resize: none !important;

  overflow-y: auto !important;

  box-sizing: border-box !important;

  outline: none !important;

}

.composer__input:focus {

  border-color: var(--brand) !important;

  box-shadow: 0 0 0 2px rgba(0,174,239,.12) !important;

}

.composer__send {

  background: linear-gradient(135deg, var(--brand-light), var(--brand)) !important;

  color: #fff !important;

  box-shadow: 0 2px 8px rgba(46,125,50,.35) !important;

}

.composer__send:active { transform: scale(.92) !important; }

.composer__attach { color: var(--text-muted) !important; }

.composer__attach:active { background: var(--chat-bg) !important; }

.composer__mic { color: var(--text-muted) !important; }

.composer__mic.recording-active {

  background: var(--red) !important;

  color: #fff !important;

  animation: pulse 1s infinite !important;

}

.chat-thread { padding-bottom: 4px !important; }

.composer__send[hidden] { display: none !important; }

.recording[hidden] { display: none !important; }

.typing[hidden] { display: none !important; }

.quick-replies[hidden] { display: none !important; }

/* END WHATSAPP-STYLE COMPOSER BAR */



/* ============================================================

   NOTIFICATION PERMISSION BANNER (Problem 3)

   ============================================================ */

.notif-banner {

  position: fixed; top: 0; left: 0; right: 0; z-index: 300;

  background: linear-gradient(135deg, #00AEEF 0%, #0089B5 100%);

  color: #fff;

  padding: 14px 16px;

  padding-top: calc(14px + env(safe-area-inset-top, 0px));

  display: flex; align-items: center; gap: 12px;

  box-shadow: 0 4px 20px rgba(0,0,0,.3);

  animation: notifSlideDown .35s ease;

  max-width: 100%;

}

.notif-banner[hidden] { display: none !important; }

@keyframes notifSlideDown {

  from { transform: translateY(-100%); opacity: 0; }

  to   { transform: translateY(0); opacity: 1; }

}

.notif-banner__icon { font-size: 26px; flex-shrink: 0; line-height: 1; }

.notif-banner__body { flex: 1; min-width: 0; }

.notif-banner__title { font-size: 15px; font-weight: 700; line-height: 1.3; }

.notif-banner__sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }

.notif-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }

.notif-banner__btn {

  padding: 9px 18px; border-radius: 20px; font-size: 14px; font-weight: 700;

  border: none; cursor: pointer; white-space: nowrap;

  font-family: inherit;

}

.notif-banner__btn--allow {

  background: #fff; color: #00AEEF;

  box-shadow: 0 2px 8px rgba(0,0,0,.2);

}

.notif-banner__btn--allow:active { transform: scale(.95); }

.notif-banner__btn--deny {

  background: rgba(255,255,255,.22); color: #fff;

}

.notif-banner__btn--deny:active { background: rgba(255,255,255,.35); }

@media (max-width: 360px) {

  .notif-banner__btn { padding: 8px 14px; font-size: 13px; }

  .notif-banner__title { font-size: 14px; }

}

/* END notification banner */





/* ============================================================

   COMPOSER STICKY FIX v2 (2026-08-14)

   Robust fix: locks .app container, prevents body scroll,

   ensures composer is ALWAYS at the bottom on mobile.

   Works without :has() support via JS-set inline styles.

   ============================================================ */



/* Chat page: lock everything — NO position:fixed (breaks keyboard on Android) */
body:has(#chat-root) {
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
}


body:has(#chat-root) .app {

  max-width: 100% !important;

  height: 100dvh !important;

  max-height: 100dvh !important;

  overflow: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  position: relative !important;

}



body:has(#chat-root) .chat {

  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

  height: 100% !important;

  min-height: 0 !important;

  overflow: hidden !important;

  max-width: 100% !important;

  width: 100% !important;

}



/* Chat thread: must scroll independently */

body:has(#chat-root) .chat-thread {

  flex: 1 1 0 !important;

  min-height: 0 !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch !important;

}



/* Composer: always pinned at bottom, never scrolls away */

body:has(#chat-root) .composer {

  flex-shrink: 0 !important;

  position: relative !important;

  z-index: 100 !important;

  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;

}



/* Typing indicator + quick replies: don't push composer off screen */

body:has(#chat-root) .typing,

body:has(#chat-root) .quick-replies {

  flex-shrink: 0 !important;

}



/* For browsers without :has() support, use a fallback class set by JS */

body.chat-mode {

  overflow: hidden !important;

  height: 100vh !important;

  height: 100dvh !important;

  width: 100% !important;

}

body.chat-mode .app {

  max-width: 100% !important;

  height: 100dvh !important;

  overflow: hidden !important;

  display: flex !important;

  flex-direction: column !important;

}

body.chat-mode .chat {

  flex: 1 !important;

  overflow: hidden !important;

  height: 100% !important;

  min-height: 0 !important;

}

body.chat-mode .chat-thread {

  flex: 1 1 0 !important;

  min-height: 0 !important;

  overflow-y: auto !important;

}

body.chat-mode .composer {

  flex-shrink: 0 !important;

}

/* END COMPOSER STICKY FIX v2 */



/* ============================================================
   FIX: Send button icon + Mic button hide + Logo visibility
   (2026-08-14e)
   ============================================================ */

/* Mic button must hide when user types (hidden attribute approach)
   .composer__mic[hidden] has specificity (0,2,0) which beats
   .composer__btn (0,1,0) even with !important */
.composer__mic[hidden] { display: none !important; }

/* Ensure send button SVG icon is always white and visible */
.composer__send svg { fill: #fff !important; }

/* Ensure send button always has gradient background (fallback + gradient) */
.composer__send {
  background-color: var(--brand) !important;
  background-image: linear-gradient(135deg, var(--brand-light), var(--brand)) !important;
  color: #fff !important;
}

/* Ensure avatar logo image is always visible */
.chat-header__avatar img {
  opacity: 1 !important;
  visibility: visible !important;
}