/* ============================================================================
 * IzeChat — Adaptive Experience Engine (AEE)  ·  Connectivity banner + chips
 * ---------------------------------------------------------------------------
 * Only loaded when the AEE flag is on. The banner slides in from the top,
 * NEVER blocks touch (pointer-events:none), and self-dismisses for transient
 * states. Per-item status chips (⏳ ↻ ✓ ⚠) annotate queued writes.
 * ========================================================================== */

/* When AEE is loaded, its banner is the authoritative offline indicator, so
   suppress the older static IzeXM pill to avoid a double message. */
html.ize-mode-offline body::after { content: none !important; display: none !important; }

/* ---- Connectivity banner ------------------------------------------------- */
#aee-banner {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 2147483000;
  transform: translateY(-100%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: calc(env(safe-area-inset-top, 0px) + 9px) 14px 9px;
  text-align: center;
  color: #fff;
  pointer-events: none;            /* never blocks the UI beneath it */
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
#aee-banner.aee-show { transform: translateY(0); }

.aee-b-offline { background: #b45309; }              /* amber  */
.aee-b-poor    { background: #475569; }              /* slate  */
.aee-b-recon,
.aee-b-sync    { background: #1d4ed8; }              /* blue   */
.aee-b-online  { background: #15803d; }              /* green  */

/* Animated dots for syncing/reconnecting. */
.aee-b-sync::after,
.aee-b-recon::after {
  content: "";
  display: inline-block;
  width: 1em; text-align: left;
  animation: aee-dots 1.2s steps(4, end) infinite;
}
@keyframes aee-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---- Per-item status chips (queued writes) ------------------------------- */
.aee-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; white-space: nowrap; }
.aee-chip[data-status]::before { margin-inline-end: 4px; }
.aee-chip[data-status="queued"]::before   { content: "⏳ Queued";  color: #b45309; }
.aee-chip[data-status="sending"]::before  { content: "↻ Sending";  color: #1d4ed8; }
.aee-chip[data-status="retrying"]::before { content: "↻ Retrying"; color: #b45309; }
.aee-chip[data-status="synced"]::before   { content: "✓ Sent";     color: #15803d; }
.aee-chip[data-status="failed"]::before   { content: "⚠ Failed";   color: #dc2626; }

/* Optimistic "pending" comment bubble (Phase 3 integration). */
.aee-pending-comment {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 13px; opacity: .62;
  transition: opacity .2s ease;
}
.aee-pending-comment[data-aee-status="failed"] { opacity: 1; }
.aee-pending-comment .aee-pending-text { overflow-wrap: anywhere; }

/* Dark theme: keep the chips readable on dark surfaces. */
@media (prefers-color-scheme: dark) {
  .aee-chip[data-status="queued"]::before,
  .aee-chip[data-status="retrying"]::before { color: #f0a35a; }
  .aee-chip[data-status="sending"]::before  { color: #7ba3ff; }
  .aee-chip[data-status="synced"]::before   { color: #4ade80; }
}
html.dark_active .aee-chip[data-status="sending"]::before { color: #7ba3ff; }
html.dark_active .aee-chip[data-status="queued"]::before,
html.dark_active .aee-chip[data-status="retrying"]::before { color: #f0a35a; }
html.dark_active .aee-chip[data-status="synced"]::before   { color: #4ade80; }

/* Respect reduced motion and AEE lean modes. */
html.ize-lean #aee-banner { transition: none; }
html.ize-lean .aee-b-sync::after,
html.ize-lean .aee-b-recon::after { animation: none; content: "…"; }
@media (prefers-reduced-motion: reduce) {
  #aee-banner { transition: none; }
  .aee-b-sync::after, .aee-b-recon::after { animation: none; content: "…"; }
}

/* ---- Data Saver (adaptive quality on slow/metered networks) --------------
 * Applied by ize-aee-datasaver.js as html.aee-savedata. Purely presentational
 * and additive: freeze decorative motion, defer off-screen paint/decode, and
 * drop expensive visual effects to cut CPU + data on entry-level devices. */
html.aee-savedata *,
html.aee-savedata *::before,
html.aee-savedata *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
html.aee-savedata .skel,
html.aee-savedata .wow_side_usrs .skel { animation: none !important; background-image: none !important; }
html.aee-savedata .post-container > .post,
html.aee-savedata #posts > .post,
html.aee-savedata .product-item,
html.aee-savedata .comment-container .comment {
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}
html.aee-savedata [style*="backdrop-filter"],
html.aee-savedata .backdrop,
html.aee-savedata .blur {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ---- Offline chat send (AEE 4b) -------------------------------------------
   The optimistic bubble reuses the theme's own outgoing-message classes, so it
   only needs the "not delivered yet" affordance layered on top. */
.aee-pending-message .messages-wrapper { opacity: .72; }
.aee-pending-message[data-aee-status="synced"] .messages-wrapper { opacity: 1; }
.aee-pending-message[data-aee-status="failed"] .messages-wrapper { opacity: 1; }
.aee-pending-message .aee-chip { display: block; margin-top: 3px; text-align: end; }
.aee-pending-message .aee-retry {
  display: block; margin-top: 4px; padding: 0; border: 0; background: none;
  font-size: 11.5px; font-weight: 600; color: #dc2626; cursor: pointer; text-align: end; width: 100%;
}
@media (prefers-color-scheme: dark) {
  .aee-pending-message .aee-retry { color: #f87171; }
}
html.dark_active .aee-pending-message .aee-retry { color: #f87171; }
.aee-pending-message .aee-pending-media img {
  max-width: 190px; max-height: 240px; width: auto; height: auto;
  border-radius: 10px; display: block;
}