/* Vela crew chat: branching dialogue with disposition tracking.
   Dark-panel style matching the profile popup (css/cosmos-profile.css). */
/* js/crew-seat-icons.js sets left and top from the interior artwork's own
   cover-fit, so this button lands on the headrest of the left seat at every
   window size. The left and bottom here are only what shows before that first
   placement runs; they are not the resting position. */
.ship-vela-btn { left: 23%; bottom: calc(19% - 60px); width: 96px; height: 96px; padding: 0; border-radius: 50%; overflow: hidden; }
.ship-vela-btn { position: relative; }
.ship-vela-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vela-chat-overlay { position: absolute; inset: 0; z-index: 8; background: rgba(4, 8, 16, 0.7); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.vela-chat-overlay[hidden] { display: none; }
.vela-chat-card { position: relative; width: min(380px, 100%); max-height: 80vh; overflow-y: auto; background: linear-gradient(180deg, #0d1526, #080d18); border: 1px solid rgba(120, 160, 220, 0.28); border-radius: 16px; box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6); padding: 24px 22px 20px; text-align: center; }
.vela-chat-avatar { width: 160px; height: 160px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(159, 208, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4); }
.vela-chat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vela-chat-name { color: #9fd0ff; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.vela-chat-disposition { color: #7a8da6; font-size: 12px; letter-spacing: 0.04em; margin-bottom: 12px; }
.vela-chat-bubble { color: #dbe6f5; font-size: 15px; line-height: 1.55; margin: 0 0 14px; font-style: italic; }
.vela-chat-options { display: flex; flex-direction: column; gap: 8px; }
.vela-chat-option { text-align: left; padding: 10px 14px; border-radius: 8px; font-size: 14px; line-height: 1.4; cursor: pointer; background: rgba(30, 44, 70, 0.5); border: 1px solid rgba(120, 160, 220, 0.2); color: #cfe3ff; }
.vela-chat-option:hover { background: rgba(44, 62, 96, 0.7); border-color: rgba(120, 160, 220, 0.4); }
.vela-chat-option:active { background: rgba(50, 70, 110, 0.8); }
.vela-chat-option.locked { opacity: 0.35; cursor: default; font-size: 13px; color: #6a7b94; }
.vela-chat-back { color: #7a8da6; font-size: 13px; background: transparent; border-color: rgba(120, 160, 220, 0.1); text-align: center; }
.vela-chat-back:hover { background: rgba(30, 44, 70, 0.3); color: #9fb0cc; }
.vela-chat-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: transparent; color: #7a8da6; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vela-chat-close:hover { color: var(--accent); }
/* Vela's small card while the record of destinations is raised over the Ship
   Interior (js/vela-notebook-popup.js builds the markup into #ship at boot).
   She sits in the left seat, so the card is docked at the top-left corner and
   slides in from the left edge; it paints above the raised page (z-index 4)
   and under the crew chat overlays (z-index 8). Its width is capped by the
   script when the card reaches down beside the drawn page. */
.vela-note {
  position: absolute;
  z-index: 6;
  left: 12px;
  top: 12px;
  width: min(260px, 64%);
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(120, 160, 220, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 21, 38, 0.96), rgba(8, 13, 24, 0.96));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  transform: translateX(calc(-100% - 16px));
  opacity: 0;
  transition: transform var(--vela-note-slide-ms, 260ms) ease, opacity var(--vela-note-slide-ms, 260ms) ease;
}
.vela-note[hidden] { display: none; }
.vela-note.vela-note-in { transform: translateX(0); opacity: 1; }
.vela-note-avatar { flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(159, 208, 255, 0.3); }
.vela-note-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vela-note-body { flex: 1 1 auto; min-width: 0; }
.vela-note-name { color: #9fd0ff; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.vela-note-text { color: #dbe6f5; font-size: 14px; line-height: 1.45; font-style: italic; margin: 0 0 10px; }
.vela-note-actions { display: flex; flex-direction: column; gap: 6px; }
.vela-note-btn {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(120, 160, 220, 0.24);
  border-radius: 8px;
  background: rgba(30, 44, 70, 0.55);
  color: #cfe3ff;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.vela-note-btn:hover { background: rgba(44, 62, 96, 0.75); border-color: rgba(120, 160, 220, 0.45); }
.vela-note-btn:active { background: rgba(50, 70, 110, 0.85); }
/* Vela's first-time hint card (js/vela-hint-popup.js builds the markup into the
   page body at boot). It reuses the record-of-destinations card's look above
   (the shared .vela-note-avatar, .vela-note-name and .vela-note-text style the
   avatar, name and line). The layer is fixed over the whole window but takes no
   pointer events itself, so a tap that misses the card reaches the screen
   underneath; only the card is a pointer target. The card is docked to the left
   edge, where Vela sits, and slides in from there. z-index 240 puts it over the
   discovery beat and the survey-scan overlay so its own Escape step reads as
   closing the topmost thing on screen. It carries no reply buttons, so nothing
   here moves her regard. */
.vela-hint-layer { position: fixed; inset: 0; z-index: 240; pointer-events: none; display: flex; align-items: center; justify-content: flex-start; padding: 12px; }
.vela-hint-layer[hidden] { display: none; }
.vela-hint {
  pointer-events: auto;
  max-width: min(260px, 64%);
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(120, 160, 220, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 21, 38, 0.96), rgba(8, 13, 24, 0.96));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  transform: translateX(calc(-100% - 16px));
  opacity: 0;
  transition: transform var(--vela-hint-slide-ms, 260ms) ease, opacity var(--vela-hint-slide-ms, 260ms) ease;
  cursor: pointer;
}
.vela-hint.vela-hint-in { transform: translateX(0); opacity: 1; }
/* The floating number that shows a crew disposition change
   (js/disposition-float.js). It is here rather than in a file of its own
   because both crew share it: Vela's chat, Rook's chat, the arrival cards and
   the card over the raised record of destinations all show the same number.
   The script measures the element the number belongs to -- the chat's
   disposition readout, or the crew name on a card -- and sets the top and
   left below, so the number sits at that element's top right corner. It is
   fixed to the window and out of the normal flow, so nothing on the page moves
   when it appears and it stays put after the card that asked the question has
   gone. z-index 220 puts it over the ship interior (z-index 2), the page
   header (z-index 100) and the crew card itself (.ship-welcome, z-index 210
   in css/cosmos-ship.css): the card and the number are both fixed children of
   the page, so a lower number would paint behind the card that asked the
   question and never be seen. It rises a little and fades out over 900ms, the
   same time the script waits before removing it. */
.disp-float {
  position: fixed;
  z-index: 220;
  pointer-events: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  animation: disp-float-rise 900ms ease-out forwards;
}
.disp-float-up { color: #7ad4a0; }
.disp-float-down { color: #f87171; }
@keyframes disp-float-rise {
  0% { opacity: 0; transform: translateY(2px); }
  18% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-16px); }
}
/* With reduced motion the number still appears and fades, it just does not move. */
@media (prefers-reduced-motion: reduce) {
  .disp-float { animation: disp-float-fade 900ms ease-out forwards; }
}
@keyframes disp-float-fade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}