/* Door 02 is not a screenshot. It is Relay's own capsule, rebuilt here from the
   rules that ship in the app: .glass, .glass-live, .kbd, .pill-btn and
   .voice-hint are copied out of the desktop build's stylesheet and scoped to
   .capsule-mount so nothing leaks onto the rest of the lane.

   On the lane the capsule is behind the glass, in the lower pane of the sash
   window, over the violet aurora: a lit screen seen from the street. It hung
   on the wall above the window for a while, ghosted and desaturated, and a
   product panel floating on a painting is the one thing this page cannot do.
   Two units set the scale: --r is a hundredth of the panel and carries the
   padding, the corners and the gaps, so the glass keeps the app's proportions
   at any size; --u carries the type, and it opens up on the lane because a
   sash window is a small screen at a distance. On the phone sheet the same
   capsule is 20 rem wide and the two units are the same number, which is the
   app's own scale. When the window is the near door the screen brightens and
   types its line. */

.capsule-mount {
  --color-ink: #fafafa;
  --color-ink-dim: #a1a1aa;
  /* matches the app mark: violet to light purple */
  --color-accent: #7c3aed;
  --color-accent-2: #c084fc;

  /* the pane's own width, in lane pixels */
  --cw: calc(var(--w) * var(--lane-w));
  --r: calc(var(--cw) * 0.01);
  --u: calc(var(--cw) * 0.0235);

  position: absolute;
  /* above the art inside the opening, under the glass falloff that
     .opening::after lays over the whole hole */
  z-index: 3;
  left: 7%;
  right: 7%;
  bottom: 5%;
  display: grid;
  gap: calc(var(--r) * 3);
  pointer-events: none;
  opacity: 0.88;
  transition: opacity 560ms ease, filter 560ms ease;
}
.door.is-near .capsule-mount,
.door.is-lit .capsule-mount { opacity: 1; filter: brightness(1.12); }

.capsule-mount .capsule {
  display: flex;
  /* in the window the panel is a narrow one, so the mark sits over the line
     instead of beside it and the sentence gets the whole pane to run in */
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: calc(var(--r) * 3.2);
  padding: calc(var(--r) * 3.3) calc(var(--r) * 3.8);
  border-radius: calc(var(--r) * 4);
  font-family: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.capsule-mount .relay-mark {
  width: calc(var(--u) * 5.5);
  height: calc(var(--u) * 5.5);
  flex: none;
  border-radius: calc(var(--r) * 2.2);
}
.capsule-mount .capsule-body {
  display: grid;
  gap: calc(var(--r) * 1.8);
  min-width: 0;
  width: 100%;
}
.capsule-mount .said {
  font-size: calc(var(--u) * 4);
  line-height: 1.3;
  min-height: 1.3em;
  color: var(--color-ink);
}
.door.is-typing .said::after {
  content: '';
  display: inline-block;
  width: 0.06em;
  height: 1em;
  margin-left: 0.12em;
  translate: 0 0.12em;
  background: var(--color-accent-2);
  animation: relay-caret 900ms steps(2) infinite;
}
@keyframes relay-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.capsule-mount .footer-row { display: flex; gap: calc(var(--r) * 2); }

/* Frosted glass: more translucent and a heavier blur than a flat panel, so the
   capsule reads as light frosted glass floating over whatever is behind it. */
.capsule-mount .glass {
  background: linear-gradient(180deg, rgba(26, 27, 34, 0.62), rgba(14, 15, 20, 0.58));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 20px 52px -22px rgba(0, 0, 0, 0.8),
    0 4px 16px -8px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* the same glass with a soft accent glow bleeding out beneath, used while the
   mic is live. The full shadow set repeats because box-shadow does not stack
   across classes. */
.capsule-mount .glass-live {
  box-shadow:
    0 20px 52px -22px rgba(0, 0, 0, 0.8),
    0 10px 30px -10px color-mix(in srgb, var(--color-accent) 42%, transparent),
    0 2px 20px -6px color-mix(in srgb, var(--color-accent-2) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* keybind chip */
.capsule-mount .kbd {
  display: inline-flex;
  align-items: center;
  font-size: calc(var(--u) * 2.9);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: calc(var(--r) * 0.6) calc(var(--r) * 1.7);
  border-radius: calc(var(--r) * 1.4);
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

/* ghost action button used in result footers */
.capsule-mount .pill-btn {
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 6);
  padding: 0 calc(var(--r) * 2.8);
  border-radius: calc(var(--r) * 1.9);
  font-size: calc(var(--u) * 3.2);
  font-weight: 550;
  color: var(--color-ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
}
.capsule-mount .pill-btn-primary {
  color: #fff;
  border-color: transparent;
  background-image: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
}

/* voice-control hint row */
.capsule-mount .voice-hint {
  display: flex;
  align-items: center;
  /* a pane is not a desktop: the row is allowed to fall onto a second line
     rather than squeezing its last three words into a column */
  flex-wrap: wrap;
  gap: calc(var(--r) * 1.4);
  row-gap: calc(var(--r) * 0.8);
  font-size: calc(var(--u) * 3);
  line-height: 1.4;
  color: var(--color-ink-dim);
}
.capsule-mount .voice-hint b { color: var(--color-ink); font-weight: 600; }

/* on a sheet the capsule sits at the foot of the picture, over the wet stone,
   at the app's own scale: there the sentence is meant to be read */
@media (max-width: 900px), (orientation: portrait), (prefers-reduced-motion: reduce) {
  .capsule-mount {
    --cw: min(20rem, calc(100vw - 2 * var(--gut)));
    --u: calc(var(--cw) * 0.01);
    position: absolute;
    left: 50%;
    right: auto;
    bottom: clamp(1rem, 4vh, 2.4rem);
    width: var(--cw);
    margin-left: calc(var(--cw) / -2);
    opacity: 1;
    filter: none;
  }
  .capsule-mount .capsule { flex-direction: row; align-items: center; }
  .capsule-mount .said { font-size: calc(var(--u) * 4.2); }
}

/* a short sheet has no room for the capsule under the picture, so it goes and
   the lit window carries the door on its own */
@media (max-width: 900px) and (max-height: 660px) {
  .capsule-mount { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .capsule-mount { transition: none; }
  .door.is-typing .said::after { animation: none; }
}

/* the phone sheet has no glass to put the capsule behind, so the lit window carries the door */
@media (max-width: 900px), (orientation: portrait), (prefers-reduced-motion: reduce) {
  .capsule-mount { display: none; }
}