/* ════════════════════════════════════════════════════════════════════════
   conn-status.css - variant B "zwevende glazen toast" connection-status layer.

   Loaded on EVERY page (alongside src/shared/conn-status.js), so EVERYTHING
   here is namespaced (.bb-conn-* / .bb-error-card / .bb-skeleton) per the CSS
   Cascade Scoping Rule - no naked .toast / .card / .skeleton selectors that
   could cascade into other pages.

   No 3px border-left / inset-ribbon accents anywhere (forbidden). The toast
   uses a FULL hairline border, matching the live-tour mini-player + floating
   bottom-nav Liquid-Glass language. Backbase palette only (navy #091C35,
   blue #3366FF, cyan #69FEFF). White text is used ONLY on the navy glass
   surface (lightness < 25%), per the Colour Rule.
   ════════════════════════════════════════════════════════════════════════ */

/* Local tokens so this file is self-sufficient even on pages that do not load
   shared-prototype.css. They fall back to the shared --bb-* tokens where those
   exist, otherwise to literal Backbase values. */
:root {
  --bb-conn-navy: #091C35;
  --bb-conn-cyan: #69FEFF;
  --bb-conn-green: #69E6A8;
  --bb-conn-ease: cubic-bezier(.16, .84, .44, 1);
  /* The floating bottom-nav sits at bottom:max(12px, safe-bottom) and is ~64px
     tall, so the toast must clear roughly 12 + 64 + 16 = 92px plus the safe
     area. We pin it above that stack, centred, with a comfortable gap that
     holds across notched and non-notched devices (both shift up together). */
  --bb-conn-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
}

/* ── floating glass toast (the global online/offline indicator) ──────────── */
.bb-conn-toast {
  position: fixed;
  left: 50%;
  bottom: var(--bb-conn-bottom);
  transform: translateX(-50%) translateY(140%);
  z-index: 1300; /* above the shell bottom-nav (1100) + page chrome */
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 16px;
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  /* Navy frosted glass - same material as the mini-player + bottom nav. */
  background: rgba(9, 28, 53, 0.86);
  color: #fff;
  border: 1px solid rgba(105, 254, 255, 0.22);
  box-shadow: 0 18px 48px rgba(9, 28, 53, 0.40);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  transition: transform .42s var(--bb-conn-ease), opacity .3s var(--bb-conn-ease);
}
.bb-conn-toast.is-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bb-conn-label { display: block; }

/* Status dot - cyan + pulsing while offline, solid green for the online
   confirmation. Subtle, not a spinner. */
.bb-conn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--bb-conn-cyan);
}
.bb-conn-toast[data-state="offline"] .bb-conn-dot {
  background: var(--bb-conn-cyan);
  box-shadow: 0 0 0 0 rgba(105, 254, 255, 0.55);
  animation: bb-conn-pulse 1.6s ease-out infinite;
}
.bb-conn-toast[data-state="online"] .bb-conn-dot {
  background: var(--bb-conn-green);
  animation: none;
}
@keyframes bb-conn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(105, 254, 255, 0.55); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px rgba(105, 254, 255, 0); opacity: .7; }
  100% { box-shadow: 0 0 0 0 rgba(105, 254, 255, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-conn-toast[data-state="offline"] .bb-conn-dot { animation: none; }
  .bb-conn-toast { transition: opacity .2s ease; }
}

/* The toast is navy glass in BOTH themes (matches the always-navy bottom nav),
   so there is no per-theme override needed - it reads identically in light and
   dark, which is exactly what the captain asked for of the bottom chrome. */

/* ════════════════════════════════════════════════════════════════════════
   REUSABLE SURFACES (extracted from variant B for later adoption by other
   pages). Namespaced, full borders only, tint bg + same-hue dark text.
   ════════════════════════════════════════════════════════════════════════ */

/* ── .bb-error-card : a glass error overlay for a failed data fetch ────────
   Drop it as an absolutely-positioned child inside a position:relative data
   container (e.g. an AIS / list card) to cover it with a frosted "could not
   load + retry" state. */
.bb-error-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #091C35;
  background: rgba(243, 246, 249, 0.70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
:root[data-theme="dark"] .bb-error-card,
[data-theme="dark"] .bb-error-card {
  color: #F3F6F9;
  background: rgba(5, 8, 15, 0.60);
}
.bb-error-card .bb-error-glyph {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  /* Red TINT bg + same-hue dark ink (Colour Rule) - no saturated fill. */
  background: #FFE8E4;
  color: #8A1C0F;
}
:root[data-theme="dark"] .bb-error-card .bb-error-glyph,
[data-theme="dark"] .bb-error-card .bb-error-glyph {
  background: rgba(255, 96, 71, 0.18);
  color: #FFA493;
}
.bb-error-card .bb-error-glyph svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}
.bb-error-card .bb-error-title {
  font-size: 14.5px;
  font-weight: 700;
  color: inherit;
}
.bb-error-card .bb-error-text {
  font-size: 12.5px;
  max-width: 280px;
  line-height: 1.45;
  color: inherit;
  opacity: 0.75;
}
.bb-error-card .bb-error-retry {
  margin-top: 4px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;            /* white on the saturated blue CTA only */
  background: #3366FF;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
}
.bb-error-card .bb-error-retry:hover { filter: brightness(1.04); }

/* ── .bb-skeleton : soft shimmer loading placeholder ───────────────────────
   Apply to a block (.bb-skeleton) for the base, add .bb-skeleton--dot for a
   round avatar or .bb-skeleton--bar for a text line. The shimmer sweep is the
   only motion. */
.bb-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(9, 28, 53, 0.07);
}
:root[data-theme="dark"] .bb-skeleton,
[data-theme="dark"] .bb-skeleton {
  background: rgba(243, 246, 249, 0.08);
}
.bb-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: bb-skeleton-shimmer 1.4s infinite;
}
:root[data-theme="dark"] .bb-skeleton::after,
[data-theme="dark"] .bb-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}
.bb-skeleton--dot { width: 34px; height: 34px; border-radius: 50%; }
.bb-skeleton--bar { height: 11px; border-radius: 6px; }
@keyframes bb-skeleton-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .bb-skeleton::after { animation: none; }
}