/* SC-VOYAGE-TIME: the look of a Voyage that takes time. Three pieces:
   Rook's course card (js/rook-course-popup.js), the slipspace star stream's
   canvas (js/slipspace-stream.js), and the arrival countdown readout
   (js/voyage-countdown.js). The course card is Rook's: navigation is Rook's
   job, so it is docked at the interior's RIGHT edge, the side Rook's arrival
   card sits (css/cosmos-rook.css), sliding in from the right, painted in the
   same green, with 44px replies. Its look is given here in full rather than
   shared with the arrival card, but it uses the same green palette. Showing it
   takes Vela's card over the raised record (js/vela-notebook-popup.js) down, so
   one confirm stands on screen at a time. The top below is only what shows
   before js/rook-course-popup.js places the card under the part of the page
   header that hangs over the interior; it is not the resting position. */
.rook-course {
  position: absolute;
  z-index: 6;
  right: 12px;
  top: 12px;
  width: min(260px, 64%);
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(100, 180, 140, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, #0f1a18, #080d10);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  transform: translateX(calc(100% + 16px));
  opacity: 0;
  transition: transform var(--rook-course-slide-ms, 260ms) ease, opacity var(--rook-course-slide-ms, 260ms) ease;
}
.rook-course[hidden] { display: none; }
.rook-course.rook-course-in { transform: translateX(0); opacity: 1; }
.rook-course-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(100, 180, 140, 0.3); }
.rook-course-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rook-course-body { flex: 1 1 auto; min-width: 0; }
.rook-course-name { color: #7ad4a0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.rook-course-text { color: #c8ddd4; font-size: 14px; line-height: 1.45; font-style: italic; margin: 0 0 10px; }
.rook-course-actions { display: flex; flex-direction: column; gap: 6px; }
.rook-course-btn {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(100, 180, 140, 0.24);
  border-radius: 8px;
  background: rgba(24, 44, 38, 0.55);
  color: #b8e0cc;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.rook-course-btn:hover { background: rgba(36, 60, 50, 0.75); border-color: rgba(100, 180, 140, 0.45); }
.rook-course-btn:active { background: rgba(44, 70, 58, 0.85); }
/* The slipspace star stream draws here, on its own canvas over the reveal's
   canvases inside .reveal-container (js/app.js appends it there). It shows
   through the interior windows the same way the jump flash does. It takes no
   pointer and sits above the reveal canvases so the stream, and then the
   arrival flash, paint over whatever the reveal last drew. */
.slipspace-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  border-radius: 8px;
  pointer-events: none;
}
.slipspace-canvas[hidden] { display: none; }
/* The voyage countdown readout has moved onto the cockpit's own countdown screen
   (pane "3" of the Ship Interior): js/voyage-slipspace.js writes the MM:SS text
   into it and css/cosmos-ship.css styles it (the SC-COCKPIT-SCREENS section).
   Nothing is drawn here for it. */
/* SC-VOYAGE-TIME: the crew chatter over the star stream while a Voyage is under way
   (js/jump-chatter-view.js). The lines are added to the Ship Interior and take no
   pointer. Vela's sit at the left edge and a little higher, Rook's at the right and
   a little lower, so a Vela line and a Rook line never cross even mid-fade. Both sit
   in the band above the crew seat buttons: a line's box grows upward from its bottom
   edge, so longer text moves further away from the buttons and never covers a
   portrait. The width cap keeps each line on its speaker's own half at every screen
   width, so the side a line is on always says who is talking. Each line fades in on its
   own, holds, and fades out, and all are gone before the arrival card. The dark
   backing and the text shadow keep them readable over both the star streaks and the
   interior art. The layer is fixed to the viewport, not to the Ship Interior's own
   scrolled box, so the lines sit where they are meant to whatever the interior art's
   size; it still lives inside the interior view, so it is hidden whenever another
   view is showing. */
.jump-chatter {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(40% + 64px);
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jump-chatter-line {
  max-width: min(72%, 440px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(4, 8, 16, 0.44);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.jump-chatter-line.jump-chatter-in { opacity: 1; transform: translateY(0); }
/* The lines stack in one column whose bottom edge sits a gap above the top of the
   crew seat buttons, and the column grows upward as lines are added, so no line can
   reach a portrait however long its text runs or however short the screen is. The
   buttons sit at bottom 40% and are a fixed 48px tall, so the offset is measured
   from both; css/cosmos-vela.css and css/cosmos-rook.css own those two numbers.
   Stacking also means a Vela line and a Rook line can never cover each other, which
   a pair of independently placed boxes cannot promise once text wraps. Each line
   sits against its speaker's own edge, so the side of the screen says who is
   talking before the name is read. */
.jump-chatter-vela { align-self: flex-start; align-items: flex-start; text-align: left; }
.jump-chatter-rook { align-self: flex-end; align-items: flex-end; text-align: right; }
.jump-chatter-who { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.jump-chatter-vela .jump-chatter-who { color: #9fd0ff; }
.jump-chatter-rook .jump-chatter-who { color: #7ad4a0; }
.jump-chatter-text { font-size: 13px; line-height: 1.4; font-style: italic; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.jump-chatter-vela .jump-chatter-text { color: #dbe6f5; }
.jump-chatter-rook .jump-chatter-text { color: #c8ddd4; }
@media (prefers-reduced-motion: reduce) {
  .jump-chatter-line { transform: none; transition: opacity 320ms ease; }
  .jump-chatter-line.jump-chatter-in { transform: none; }
}