/* =============================================================
   Frankenstein — Mobile Portrait Animation
   Active at viewports < 768px. Desktop build hides this via
   display: none at min-width 768px (set in styles.css).
   ============================================================= */

/* =============================================================
   Mobile portrait stage
   - 4:5 portrait, contained inside section padding
   ============================================================= */
.stage-mobile {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  background: var(--bg, #0E0E0E);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  /* Frame-relative type scale */
  --anim-primary-size:   calc(var(--frame-h) * 0.0225);
  --anim-secondary-size: calc(var(--anim-primary-size) * 0.85);
  --anim-eyebrow-size:   calc(var(--frame-h) * 0.018);
  --anim-tag-size:       calc(var(--frame-h) * 0.017);
  --anim-input-size:     calc(var(--frame-h) * 0.021);
  /* Consciousness panel sizing */
  --consciousness-h: 36%;
  /* Spacing tokens, frame-relative */
  --pad-x: calc(var(--frame-w) * 0.055);
  --pad-y: calc(var(--frame-h) * 0.030);
  --gap-y: calc(var(--frame-h) * 0.018);
}

/* =============================================================
   Top: CONSCIOUSNESS
   Bottom: Chat
   ============================================================= */
.stage-mobile .consciousness {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  top: var(--pad-y);
  height: calc(var(--consciousness-h) - var(--pad-y) * 1.2);
  background: var(--surface, #1A1A1A);
  border: 1px solid rgba(232,228,220,0.18);
  border-radius: 4px;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap-y) * 0.35);
  z-index: 2;
  overflow: hidden;
}
.stage-mobile .c-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: var(--anim-eyebrow-size);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bone, #E8E4DC);
}
.stage-mobile .memory-empty {
  font-family: 'Inter', sans-serif;
  font-size: var(--anim-primary-size);
  color: rgba(232,228,220,0.45);
  transition: opacity 300ms linear;
}
.stage-mobile .memory-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap-y) * 0.75);
  margin-top: calc(var(--gap-y) * -0.2);
  min-height: 0;
}
.stage-mobile .memory-item {
  font-family: 'Inter', sans-serif;
  font-size: var(--anim-primary-size);
  line-height: 1.35;
  color: #E8954B;
  opacity: 0;
  transition: opacity 400ms linear, transform 400ms linear;
  text-wrap: pretty;
}
.stage-mobile .memory-item.in { opacity: 1; }
.stage-mobile .memory-item.out { opacity: 0; transform: translateY(-4px); }

.stage-mobile .chat {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  top: var(--consciousness-h);
  bottom: var(--pad-y);
  background: var(--surface, #1A1A1A);
  border: 1px solid rgba(232,228,220,0.18);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: var(--pad-y) var(--pad-x);
  gap: calc(var(--gap-y) * 1.1);
  overflow: hidden;
  z-index: 2;
}
.stage-mobile .assistant-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: var(--anim-eyebrow-size);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(232,228,220,0.70);
  position: relative;
  height: calc(var(--anim-eyebrow-size) * 1.1);
}
.stage-mobile .header-slot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms linear;
}
.stage-mobile .header-slot.visible { opacity: 1; }

.stage-mobile .main-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap-y) * 0.4);
  overflow: hidden;
  min-height: 0;
}
.stage-mobile .briefing-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--anim-eyebrow-size);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bone, #E8E4DC);
  opacity: 0;
  transition: opacity 400ms linear;
  margin-bottom: calc(var(--gap-y) * 0.3);
}
.stage-mobile .briefing-header.in { opacity: 1; }
.stage-mobile .briefing-line {
  font-family: 'Inter', sans-serif;
  font-size: var(--anim-primary-size);
  font-weight: 400;
  color: var(--bone, #E8E4DC);
  line-height: 1.4;
  opacity: 0;
  transition: opacity 400ms linear;
  margin-bottom: calc(var(--gap-y) * 0.55);
  text-wrap: pretty;
}
.stage-mobile .briefing-line.in { opacity: 1; }

.stage-mobile .artifact-sep {
  width: 60%;
  height: 1px;
  background: rgba(232,149,75,0.18);
  margin-top: calc(var(--gap-y) * 0.3);
  margin-bottom: calc(var(--gap-y) * 0.55);
  opacity: 0;
  transition: opacity 200ms linear;
}
.stage-mobile .artifact-sep.in { opacity: 1; }

.stage-mobile .artifact-line {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--anim-secondary-size) * 0.55);
  font-family: 'Inter', sans-serif;
  font-size: var(--anim-secondary-size);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(232,149,75,0.65);
  opacity: 0;
  transition: opacity 400ms linear;
  margin-bottom: calc(var(--gap-y) * 0.4);
  text-wrap: pretty;
}
.stage-mobile .artifact-line:last-child { margin-bottom: 0; }
.stage-mobile .artifact-line.in { opacity: 1; }
.stage-mobile .artifact-line svg {
  width: calc(var(--anim-secondary-size) * 1.1);
  height: calc(var(--anim-secondary-size) * 1.1);
  flex: 0 0 auto;
  color: rgba(232,149,75,0.65);
  margin-top: calc(var(--anim-secondary-size) * 0.15);
}

.stage-mobile .input-wrap { position: relative; }
.stage-mobile .input {
  height: calc(var(--frame-h) * 0.05);
  min-height: 36px;
  border: 1px solid rgba(232,228,220,0.18);
  border-radius: 4px;
  padding: 0 calc(var(--pad-x) * 0.6);
  display: flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: var(--anim-input-size);
  color: rgba(232,228,220,0.45);
  transition: border-left-color 400ms linear;
}
.stage-mobile .input.amber-border { border-left-color: #E8954B; }
.stage-mobile .input-text {
  position: relative;
  width: 100%;
  height: var(--anim-input-size);
}
.stage-mobile .input-label {
  position: absolute;
  inset: 0;
  line-height: var(--anim-input-size);
  transition: opacity 300ms linear;
}
.stage-mobile .input-label.hidden { opacity: 0; }

/* =============================================================
   Tool tags
   ============================================================= */
.stage-mobile .tag {
  position: absolute;
  width: calc(var(--frame-w) * 0.30);
  min-width: 96px;
  max-width: 130px;
  height: calc(var(--frame-h) * 0.045);
  min-height: 28px;
  background: var(--surface, #1A1A1A);
  border: 1px solid rgba(232,228,220,0.30);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--anim-tag-size) * 0.5);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: var(--anim-tag-size);
  letter-spacing: 0.08em;
  color: rgba(232,228,220,0.70);
  will-change: transform, opacity;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  left: 0; top: 0;
}
.stage-mobile .tag svg {
  width: calc(var(--anim-tag-size) * 0.95);
  height: calc(var(--anim-tag-size) * 0.95);
  flex: 0 0 auto;
  color: rgba(232,228,220,0.70);
}

/* Thread + arc overlays */
.stage-mobile .overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stage-mobile .thread-layer { z-index: 4; }
.stage-mobile .arc-layer    { z-index: 5; }

/* =============================================================
   prefers-reduced-motion: render the briefing end state.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .stage-mobile .memory-item,
  .stage-mobile .briefing-header,
  .stage-mobile .briefing-line,
  .stage-mobile .artifact-sep,
  .stage-mobile .artifact-line { opacity: 1 !important; transition: none !important; }
  .stage-mobile .memory-empty { opacity: 0 !important; }
  .stage-mobile .input { border-left-color: #E8954B !important; }
  .stage-mobile #inputLabelA { opacity: 0 !important; }
  .stage-mobile #inputLabelB { opacity: 1 !important; }
  .stage-mobile .tag,
  .stage-mobile .overlay { display: none !important; }
  .stage-mobile .header-slot { opacity: 0 !important; }
  .stage-mobile .header-slot[data-header="claude"] { opacity: 1 !important; }
}