/* A Terra Liberty app shell (Build H).
   Everything here is gated on html.atl-pwa, the class app-shell.js adds only when
   the site runs as an installed PWA (display-mode standalone, or iOS standalone).
   In a normal browser the class is absent, so none of this shows and the public
   website is unchanged. */

/* ===== Bottom tab bar ===== */
.atl-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  background: var(--cream, #FAF7F2);
  border-top: 1px solid var(--cream-mid, #E8E1D6);
  box-shadow: 0 -4px 18px rgba(44, 32, 16, 0.10);
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.atl-pwa .atl-tabbar { display: flex; }
html.atl-pwa body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

.atl-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--brown-light, #998070);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
}
.atl-tab__icon { position: relative; line-height: 0; }
.atl-tab svg { width: 24px; height: 24px; display: block; }
.atl-tab__label { line-height: 1; }
.atl-tab--active { color: var(--terracotta-accent, #C4714A); }

/* Unread dot on the Chat tab (legacy boolean dot, kept for any cached markup) */
.atl-tab__dot {
  display: none;
  position: absolute;
  top: -2px; right: -5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--terracotta, #D4865A);
  border: 2px solid var(--cream, #FAF7F2);
}
.atl-tab--has-unread .atl-tab__dot { display: block; }

/* Chat tab unread badge (Stage 7): a muted-red circle with the count. */
.atl-tab__badge {
  position: absolute;
  top: -6px; right: -10px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #b94a4a;            /* muted red, not bright primary */
  color: #fff;
  border: 2px solid var(--cream, #FAF7F2);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atl-tab__badge[hidden] { display: none; }

/* Home tab new-content pulse (Stage 7): small terracotta dot, slow gentle pulse. */
.atl-tab__pulse {
  position: absolute;
  top: -2px; right: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--terracotta, #D4865A);
  border: 2px solid var(--cream, #FAF7F2);
  animation: atl-tab-pulse 2.4s ease-in-out infinite;
}
.atl-tab__pulse[hidden] { display: none; }
@keyframes atl-tab-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .atl-tab__pulse { animation: none; }
}

/* ===== Concierge as the third tab slot (Build J.5 Stage 4.6). The round
   terracotta bubble sits centred over the third of four even slots
   (Home, Chat, Concierge, You), rising slightly above the bar like Instagram's
   compose button. It never overlaps the neighbouring Chat or You icons because
   those sit in their own slots, well clear horizontally. ===== */
html.atl-pwa .atl-cc-btn {
  position: fixed;
  left: 62.5%;                 /* centre of slot 3 of 4 */
  right: auto;
  transform: translateX(-50%);
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));   /* bottom aligns with tab icons; top lifts above the bar */
  width: 52px;
  height: 52px;
  z-index: 1001;
}
html.atl-pwa .atl-cc-btn svg,
html.atl-pwa .atl-cc-btn .atl-cc-btn-ico { width: 24px; height: 24px; }
html.atl-pwa .atl-cc-tip { display: none; }   /* tip is bottom-right, wrong in tab mode */

/* The launcher's scroll-aware hide (concierge.js) must never apply in PWA: the
   bubble lives in the fixed tab bar and has to stay put at all times. Neutralise
   the scrolled-hidden class so a scroll down never makes Concierge vanish.
   Browser mode keeps the scroll-hide. */
html.atl-pwa .atl-cc-btn.atl-cc-btn--scrolled-hidden {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* The Concierge tab slot itself: a button reset, an empty icon box that reserves
   the bubble's space, and a label beneath the floating bubble like the others. */
.atl-tab--cc { background: none; border: none; font: inherit; }
.atl-tab__icon--cc { display: block; width: 24px; height: 24px; }
html.atl-pwa .atl-tab--cc .atl-tab__label { color: var(--terracotta-accent, #C4714A); font-weight: 700; }

/* ===== Desktop PWA: tabs feel wrong on a wide window, hide them and fall back
   to the existing top navigation. A left-sidebar layout is reserved for later. */
@media (min-width: 900px) {
  html.atl-pwa .atl-tabbar { display: none; }
  html.atl-pwa body { padding-bottom: 0; }
  html.atl-pwa .atl-cc-btn { left: auto; right: 24px; transform: none; bottom: 24px; width: 56px; height: 56px; }
}

/* ===== First-launch onboarding overlay ===== */
html.atl-ob-open { overflow: hidden; }
.atl-ob {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--terracotta, #D4865A);
  color: var(--cream, #FAF7F2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 28px;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.atl-ob.atl-ob--out { opacity: 0; pointer-events: none; }
.atl-ob__inner { max-width: 30rem; width: 100%; }
.atl-ob__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.1rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 14px;
}
.atl-ob__sub {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.92;
  margin: 0 0 32px;
}
.atl-ob__cta {
  display: inline-block;
  background: var(--cream, #FAF7F2);
  color: var(--brown-dark, #2C2010);
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.atl-ob__cta:disabled { opacity: 0.6; cursor: default; }
.atl-ob__skip {
  display: block;
  margin: 18px auto 0;
  background: none;
  border: none;
  color: var(--cream, #FAF7F2);
  opacity: 0.85;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: underline;
}
.atl-ob__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 34px;
}
.atl-ob__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cream, #FAF7F2);
  opacity: 0.4;
}
.atl-ob__dot--on { opacity: 1; }

/* ===== Install banner (browser mode only) ===== */
.atl-install-banner {
  display: flex; align-items: center; gap: 0.75rem; justify-content: space-between;
  background: var(--brown-dark, #2C2010); color: var(--cream, #FAF7F2);
  padding: 0.6rem 1rem; font-size: 0.9rem;
}
.atl-install-banner__text { flex: 1; line-height: 1.4; }
.atl-install-banner__actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.atl-install-btn {
  background: var(--terracotta, #D4865A); color: #fff; border: none; border-radius: 99px;
  padding: 0.4rem 1rem; font-size: 0.85rem; cursor: pointer;
}
.atl-install-x { background: none; border: none; color: var(--cream, #FAF7F2); cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 4px; }

.atl-install-modal {
  position: fixed; inset: 0; z-index: 2100; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(44, 32, 16, 0.5);
}
.atl-install-modal.atl-open { display: flex; }
.atl-install-modal__box {
  background: var(--cream, #FAF7F2); color: var(--brown-dark, #2C2010);
  border-radius: 14px; padding: 1.4rem; max-width: 380px; width: 100%;
}
.atl-install-modal__box h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; margin: 0 0 0.6rem; }
.atl-install-modal__box p { font-size: 0.92rem; line-height: 1.5; margin: 0 0 0.6rem; }
.atl-install-modal__box .atl-install-btn { margin-top: 0.5rem; }