/* ================================================
   Moment Cards — Layout
   ================================================ */
.moment-cards__wrap {
  position: relative;
}

.moment-cards__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 9999;
  width: 100%;
  max-width: 112.0rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(var(--site-menu-height, 6rem) / 2);
}

.moment-cards {
  position: sticky; top: 0; z-index: 1;
  /* Height set by JS to match 5x3 grid area */
  display: flex; align-items: flex-start; justify-content: center;
  overflow: hidden;
  padding-top: calc(var(--site-menu-height, 6rem) / 2);
  box-sizing: content-box;
}

.moment-cards__viewport {
  position: relative; width: 100%; height: 100%;
  overflow: hidden;
}

.moment-cards__spacer { height: 0; pointer-events: none; }

.moment-cards__grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;
  /* Width set by JS */
  aspect-ratio: 144 / 70;
  /* Centered via left:50% + translateX(-50%) in the transform chain */
  position: absolute; left: 50%;
  will-change: transform; transform-origin: top center;
  pointer-events: none;
}

/* Filler cards — lightweight placeholders */
.appview--filler { opacity: 1; }

.appview__filler-line {
  height: 1px;
  background: rgba(255,255,255,0.05);
  border-radius: 1px;
  margin: 2px 6px;
}

.moment-cards__stage {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; z-index: 2;
}

/* ================================================
   AppView — Base
   ================================================ */
.appview {
  position: relative;
  border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 6px; line-height: 1.35;
  color: #c9d1d9;
  border: 1px solid rgba(255,255,255,0.06);
  background: #161b22;
  min-height: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.appview__sidebar {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 5px 3px; overflow: hidden;
}

.appview__main {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
}

.appview__chrome {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 6px; font-size: 5.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; flex-shrink: 0;
}

.appview__toolbar {
  display: flex; gap: 1px; padding: 1px 5px;
  font-size: 5px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.appview__toolbar span { padding: 0 2px; border-radius: 1px; }

.appview__body {
  flex: 1; padding: 3px 6px 4px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0;
}

/* Push content to bottom for chat-style apps (Slack, Discord) */
.appview--slack .appview__body::before,
.appview--discord .appview__body::before {
  content: ''; flex: 1 0 0px;
}


/* --- Messages --- */
.appview__msg {
  display: flex; gap: 4px; align-items: flex-start; padding: 1px 0;
}

.appview__avatar {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; margin-top: 1px;
  background: hsl(var(--hue, 210), 35%, 42%);
}

.appview__msg-content { min-width: 0; }

.appview__msg-head {
  display: flex; align-items: baseline; gap: 2px; margin-bottom: 0;
}

.appview__author { font-size: 5.5px; font-weight: 700; color: #e6edf3; }
.appview__ts { font-size: 4px; font-weight: 400; color: rgba(148,155,164,0.45); }

.appview__text {
  margin: 0; font-size: 5.5px; line-height: 1.3; color: rgba(201,209,217,0.8);
}

.appview__actions {
  font-size: 4.5px; margin-top: 1px; color: rgba(138,180,248,0.6);
}

/* --- Incoming message wrapper (animated) --- */
.appview__incoming {
  max-height: 0; overflow: hidden; opacity: 0; flex-shrink: 0;
}

/* --- Pre-message content blocks --- */
.appview__fields {
  display: flex; flex-direction: column; gap: 1px;
  padding: 2px 0 1px; border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 1px; font-size: 5px;
}

.appview__field { display: flex; gap: 3px; }
.appview__field-label { color: rgba(182,194,207,0.4); min-width: 24px; }
.appview__field-value { color: rgba(182,194,207,0.7); }

.appview__section-head {
  font-size: 4.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; padding: 1px 0;
}

.appview__highlight {
  padding: 1px 3px; margin: 1px 0; font-size: 5px;
  font-style: italic; line-height: 1.3;
}

.appview__email-header {
  padding: 2px 6px; font-size: 4.5px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.appview__email-row { display: flex; gap: 3px; margin-bottom: 0; }
.appview__email-label { color: rgba(154,160,166,0.45); min-width: 14px; }
.appview__email-value { color: rgba(189,193,198,0.8); }

.appview__email-toolbar {
  display: flex; gap: 4px; padding: 2px 6px;
  font-size: 5px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.appview__meeting-meta {
  font-size: 4.5px; color: rgba(204,204,204,0.4);
  padding: 0 6px 1px; flex-shrink: 0;
}

.appview__note {
  margin-bottom: 1px; font-size: 5.5px; color: rgba(204,204,204,0.7);
  padding-left: 7px; position: relative; list-style: none;
}
.appview__note::before {
  content: '\2022'; position: absolute; left: 0; color: rgba(204,204,204,0.25);
}

.appview__summary-row { display: flex; gap: 3px; font-size: 5.5px; margin-bottom: 1px; }
.appview__summary-label {
  font-size: 4.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2px; flex-shrink: 0; min-width: 22px;
}
.appview__summary-value { color: rgba(201,209,217,0.7); }

/* Status pills */
.appview__pill {
  display: inline-block; padding: 0 3px; border-radius: 2px;
  font-size: 4px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2px; margin-left: auto;
}
.appview__pill--done { background: rgba(75,206,151,0.15); color: #4bce97; }
.appview__pill--progress { background: rgba(87,157,255,0.15); color: #579dff; }

.appview__ticket-type {
  width: 6px; height: 6px; border-radius: 1px; flex-shrink: 0;
}


/* ================================================
   Platform: Slack Dark
   ================================================ */
.appview--slack { background: #1a1d21; flex-direction: row; }

.appview--slack .appview__sidebar {
  width: 18px; background: #19171d;
  border-right: 1px solid rgba(255,255,255,0.04);
  padding: 3px 2px; gap: 2px;
}
.appview--slack .appview__ws-icon {
  width: 12px; height: 12px; border-radius: 3px;
  background: #611f69; flex-shrink: 0;
}
.appview--slack .appview__ch-stub {
  width: 10px; height: 1px; border-radius: 1px;
  background: rgba(209,210,211,0.1); flex-shrink: 0;
}
.appview--slack .appview__ch-stub--active {
  width: 11px; background: rgba(209,210,211,0.4);
}

.appview--slack .appview__chrome {
  background: #1a1d21; color: rgba(209,210,211,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: 'Lato', -apple-system, sans-serif;
}
.appview--slack .appview__chrome-hash { opacity: 0.5; font-weight: 700; font-size: 7px; }
.appview--slack .appview__chrome-topic {
  font-size: 4px; font-weight: 400; color: rgba(209,210,211,0.3);
  margin-left: 2px; overflow: hidden; text-overflow: ellipsis;
}

.appview--slack .appview__body {
  background: #1a1d21; font-family: 'Lato', -apple-system, sans-serif;
  padding: 3px 6px 4px; gap: 1px;
}
.appview--slack .appview__msg { padding: 1px 0; }
.appview--slack .appview__avatar { border-radius: 2px; width: 10px; height: 10px; }
.appview--slack .appview__author { color: #d1d2d3; }
.appview--slack .appview__ts { color: rgba(209,210,211,0.35); }
.appview--slack .appview__text { color: rgba(209,210,211,0.85); }
.appview--slack .appview__actions { color: #1d9bd1; }


/* ================================================
   Platform: Discord Dark
   ================================================ */
.appview--discord { background: #313338; flex-direction: row; }

.appview--discord .appview__sidebar {
  width: 16px; background: #1e1f22; padding: 3px 2px; gap: 2px;
}
.appview--discord .appview__server-icon {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.appview--discord .appview__server-icon--active { border-radius: 4px; }

.appview--discord .appview__chrome {
  background: #2b2d31; color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(0,0,0,0.25);
}
.appview--discord .appview__chrome-hash { color: #949ba4; font-weight: 800; font-size: 7px; }

.appview--discord .appview__body { background: #313338; padding: 3px 6px 4px; gap: 1px; }
.appview--discord .appview__msg { padding: 1px 0; }
.appview--discord .appview__avatar { border-radius: 50%; width: 10px; height: 10px; }
.appview--discord .appview__author { color: #f2f3f5; }
.appview--discord .appview__ts { color: #949ba4; }
.appview--discord .appview__text { color: #dbdee1; }
.appview--discord .appview__actions { color: #5865F2; }


/* ================================================
   Platform: Jira Dark (Atlassian)
   ================================================ */
.appview--jira { background: #22272b; }

.appview--jira .appview__chrome {
  background: #1d2125; color: #b6c2cf;
  border-bottom: 1px solid rgba(166,197,226,0.08);
}
.appview--jira .appview__chrome-title { color: #579dff; font-weight: 700; }

.appview--jira .appview__body { background: #22272b; color: #b6c2cf; padding: 3px 8px 4px; }
.appview--jira .appview__section-head { color: rgba(182,194,207,0.45); }
.appview--jira .appview__author {
  color: rgba(182,194,207,0.45); font-size: 7px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.appview--jira .appview__text { color: #9fadbc; }
.appview--jira .appview__actions { color: #579dff; }


/* ================================================
   Platform: Google Docs Dark
   ================================================ */
.appview--gdoc { background: #202124; }

.appview--gdoc .appview__chrome {
  background: #292a2d; color: #9aa0a6;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.appview--gdoc .appview__chrome-icon {
  width: 6px; height: 8px; background: #4285f4;
  border-radius: 1px; flex-shrink: 0;
}

.appview--gdoc .appview__toolbar { color: rgba(154,160,166,0.4); }

.appview--gdoc .appview__highlight {
  background: rgba(251,188,4,0.12);
  border-left: 1px solid rgba(251,188,4,0.4);
  color: #e8eaed;
  font-size: 4.5px;
  padding: 1px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.appview--gdoc .appview__comments {
  border-left: 1px solid rgba(251,188,4,0.25);
  padding: 2px 4px; background: rgba(48,49,52,0.5);
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden; min-height: 0;
  flex: 1;
}
.appview--gdoc .appview__comments .appview__msg { gap: 3px; padding: 1px 0; }

.appview--gdoc .appview__avatar { border-radius: 50%; width: 8px; height: 8px; }
.appview--gdoc .appview__author { color: #8ab4f8; font-size: 5px; }
.appview--gdoc .appview__text { color: #bdc1c6; font-size: 5px; line-height: 1.3; }
.appview--gdoc .appview__actions { color: rgba(138,180,248,0.6); font-size: 4px; }

.appview--gdoc .appview__body { padding: 0; display: flex; flex-direction: column; }
.appview--gdoc .appview__body > .appview__highlight { margin: 1px 4px; }


/* ================================================
   Platform: Gmail Dark
   ================================================ */
.appview--gmail { background: #1f1f1f; }

.appview--gmail .appview__chrome {
  background: #202124; color: #e8eaed; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.appview--gmail .appview__email-toolbar { color: rgba(154,160,166,0.35); }
.appview--gmail .appview__body { background: #1f1f1f; color: #bdc1c6; padding: 4px 8px 5px; }
.appview--gmail .appview__text { color: #bdc1c6; font-size: 9px; line-height: 1.4; }


/* ================================================
   Platform: Meeting Notes (Notion-like)
   ================================================ */
.appview--meeting { background: #191919; }

.appview--meeting .appview__chrome {
  background: #191919; color: rgba(224,224,224,0.85);
  font-size: 10px; font-weight: 700; border-bottom: none;
}

.appview--meeting .appview__body { background: #191919; padding: 0 8px 5px; }


/* ================================================
   Platform: AI Summary
   ================================================ */
.appview--ai-summary {
  background: #0f1629;
  border-top: 2px solid; border-image: linear-gradient(90deg, #9ef0ff, #c084fc) 1;
}

.appview--ai-summary .appview__chrome {
  background: linear-gradient(135deg, #131a2e, #0f1629);
  color: rgba(158,240,255,0.7);
  border-bottom: 1px solid rgba(158,240,255,0.06);
}
.appview--ai-summary .appview__chrome-icon {
  width: 6px; height: 6px;
  background: linear-gradient(135deg, #9ef0ff, #c084fc);
  border-radius: 50%; flex-shrink: 0;
}
.appview--ai-summary .appview__body { background: #0f1629; padding: 4px 8px 5px; }
.appview--ai-summary .appview__summary-label { color: rgba(158,240,255,0.4); }


/* ================================================
   Stage card overrides (larger sizes)
   ================================================ */
/* Stage cards use CSS zoom for pixel-perfect proportions matching grid cards */
.appview--stage {
  position: absolute;
  /* zoom set by JS to match SCALE_END — shadow set by JS to avoid transition pops */
  will-change: transform, opacity;
  overflow: hidden;
}

/* Stage main column must fill the fixed height, not grow */
.appview--stage .appview__main {
  height: 100%; max-height: 100%;
}

.appview--stage.appview--slack .appview__sidebar { display: none; }




/* ================================================
   3D Layer Stack
   ================================================ */
.moment-cards__layer-stack {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 1;
}

/* Glow from between layers — inside layer-stack-inner for 3D participation */
.moment-cards__layer-glow {
  position: absolute;
  inset: -20%;
  border-radius: 20px;
  background: radial-gradient(
    ellipse at center,
    rgba(158,240,255,0.18) 0%,
    rgba(192,132,252,0.12) 25%,
    rgba(255,189,233,0.07) 45%,
    transparent 70%
  );
  filter: blur(24px);
  transform: translateZ(-400px);
  opacity: 0;
  pointer-events: none;
}

/* Width/height set by JS to match zoomed center card */
.moment-cards__layer-stack-inner {
  position: relative;
  transform-style: preserve-3d;
}

/* Iridescent surface on layer cards */
.moment-cards__layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  box-sizing: border-box;
  background:
    conic-gradient(
      from var(--iridescent-angle, 0deg) at 0 0,
      rgba(216,251,255,0.10) 0deg,
      rgba(255,228,246,0.09) 30deg,
      rgba(231,220,255,0.08) 60deg,
      rgba(226,253,255,0.07) 90deg,
      rgba(255,236,249,0.06) 120deg,
      rgba(238,230,255,0.05) 150deg,
      rgba(246,255,255,0.04) 180deg,
      rgba(255,245,252,0.04) 210deg,
      rgba(249,245,255,0.03) 240deg,
      rgba(246,255,255,0.03) 270deg,
      rgba(255,245,252,0.03) 300deg,
      rgba(249,245,255,0.03) 330deg,
      rgba(216,251,255,0.10) 360deg
    ) fixed,
    rgba(14,23,38,0.92);
  background-size: 100vw 100vh, auto;
  background-position: top left, center;
  border: 1px solid rgba(158,240,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 8px; opacity: 0;
  display: flex; flex-direction: column; padding: 20px;
  will-change: transform, opacity; backface-visibility: hidden;
}
.moment-cards__layer-title {
  font-size: 11px; font-weight: 500; color: rgba(158,240,255,0.45);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.moment-cards__layer-content {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.moment-cards__layer-img {
  max-width: 65%; max-height: 80%;
  object-fit: contain;
  opacity: 0.6;
}


/* ================================================
   Beat Overlay — bottom-right narration panel
   ================================================ */
.moment-cards__beat-overlay {
  position: fixed;
  z-index: 100;
  /* Geometry set by JS every frame */
  background: linear-gradient(
    160deg,
    rgba(14, 23, 38, 0.82) 0%,
    rgba(14, 23, 38, 0.68) 100%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 2.4vw, 2rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.moment-cards__beat-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.moment-cards__beat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.moment-cards__beat-headline {
  font-family: 'Roboto Mono', monospace;
  font-size: clamp(1.1rem, 2.2vw, 1.85rem);
  font-weight: 200;
  line-height: 1.4;
  color: #f8fafc;
  margin: 0 0 1rem;
}

.moment-cards__beat-text {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1.3rem, 1.5vw, 1.6rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(248, 250, 252, 0.92);
  margin: 0;
}

/* Beat navigation — dots + progress bar */
.moment-cards__beat-nav {
  display: flex; flex-direction: column;
  gap: 10px;
  padding-top: 1.5rem;
}

.moment-cards__beat-dots {
  display: flex; flex-direction: row;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.moment-cards__beat-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  padding: 0; margin: 0;
  cursor: pointer;
  transition: border-width 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}
.moment-cards__beat-dot:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.moment-cards__beat-dot--active {
  border-width: 3px;
  border-color: rgba(158, 240, 255, 0.85);
}

/* Progress bar */
.moment-cards__beat-progress {
  width: 100%; height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  overflow: hidden;
}
.moment-cards__beat-progress-fill {
  width: 100%; height: 100%;
  background: rgba(158, 240, 255, 0.5);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}


/* ================================================
   Responsive
   ================================================ */
@media (max-width: 40rem) {
  .moment-cards { display: none; }
  .moment-cards__spacer { display: none; }
  .moment-cards__rule { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .appview, .appview__incoming, .moment-cards__layer {
    transition: none !important; animation: none !important;
  }
}