/* guide.css — the docent's panel.
   Owned by the tour-guide module; mounts inside #guide-root only.

   The card sits over live, unpredictable artwork, so legibility comes from an
   opaque-enough plate plus a text shadow rather than from a blur alone —
   a blurred panel over a bright canvas is still a bright panel. */

.guide-panel {
  /* The corner minimap occupies ~184px of the bottom-right on the fine-pointer
     layout, so the centred card is also clamped to stay clear of it. Below
     720px the HUD moves the map into the top-right stack and the second term
     stops binding. */
  --guide-w: min(680px, calc(100vw - 32px), calc(100vw - 384px));

  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  width: var(--guide-w);
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: none; /* only the card's own controls are clickable */
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
}

.guide-panel.is-idle {
  opacity: 0.001;
  translate: -50% 14px;
  pointer-events: none;
}
.guide-panel.is-idle .guide-card { pointer-events: none; }

@media (pointer: coarse), (max-width: 720px) {
  /* The HUD moves the minimap into its top-right stack at this size, so the
     card no longer has to dodge it. Bottom offset is set in the 700px block. */
  .guide-panel { --guide-w: min(680px, calc(100vw - 24px)); }
}

.guide-panel.is-hidden {
  opacity: 0 !important;
  visibility: hidden;
  transition-duration: 0.2s;
}

.guide-card {
  pointer-events: auto;
  border-radius: var(--radius);
  border: 1px solid var(--panel-line);
  background:
    linear-gradient(180deg, rgba(22, 20, 30, 0.9), rgba(11, 10, 16, 0.94));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 48px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  overflow: hidden;
}

/* --- Header ------------------------------------------------------------- */

.guide-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 9px 14px;
  border-bottom: 1px solid rgba(233, 226, 208, 0.09);
}

.guide-mark {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff3d9, var(--gold) 62%, rgba(201, 162, 39, 0) 100%);
  box-shadow: 0 0 10px rgba(230, 200, 96, 0.7);
}
.guide-panel.is-speaking .guide-mark { animation: guide-pulse 1.5s var(--ease) infinite; }

@keyframes guide-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.35); opacity: 1; }
}

.guide-who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.guide-who b {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.guide-who i {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.85;
}

.guide-context {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 44%;
}

.guide-icon {
  flex: none;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid rgba(233, 226, 208, 0.2);
  background: rgba(244, 241, 234, 0.05);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.guide-icon:hover { background: rgba(244, 241, 234, 0.13); border-color: rgba(233, 226, 208, 0.4); }

/* --- Speech ------------------------------------------------------------- */

.guide-body { padding: 13px 16px 14px; }

.guide-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--paper);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  min-height: 1.6em;
}
.guide-text:empty { display: none; }

/* Typewriter caret while a line is still arriving. */
.guide-panel.is-speaking .guide-text::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.14em;
  background: var(--gold-soft);
  animation: guide-caret 1s steps(2, start) infinite;
}
@keyframes guide-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.guide-more {
  margin-top: 10px;
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.42);
  background: rgba(201, 162, 39, 0.1);
  color: var(--gold-soft);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.guide-more:hover { background: rgba(201, 162, 39, 0.24); }

.guide-deep {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 2px solid rgba(201, 162, 39, 0.5);
  border-radius: 0 8px 8px 0;
  background: rgba(244, 241, 234, 0.045);
  font-size: 0.92rem;
  line-height: 1.68;
  color: rgba(244, 241, 234, 0.86);
}

/* --- Tools (expanded only) ---------------------------------------------- */

.guide-tools {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
  overflow: hidden;
  border-top: 1px solid transparent;
}
.guide-panel.is-open .guide-tools {
  grid-template-rows: 1fr;
  border-top-color: rgba(233, 226, 208, 0.09);
}
/* The 0fr→1fr collapse only governs the first row, so everything inside the
   drawer shares one wrapper. */
.guide-tools-inner { min-height: 0; overflow: hidden; }

.guide-panel.is-open .guide-buttons,
.guide-panel.is-open .guide-ask,
.guide-panel.is-open .guide-chips { opacity: 1; }

.guide-buttons,
.guide-ask,
.guide-chips { opacity: 0; transition: opacity 0.3s var(--ease) 0.08s; }

.guide-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 16px 0;
}

.guide-btn {
  font: inherit;
  font-size: 0.83rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(233, 226, 208, 0.2);
  background: rgba(244, 241, 234, 0.06);
  color: var(--paper);
  cursor: pointer;
  transition: all 0.22s var(--ease);
}
.guide-btn:hover:not(:disabled) {
  background: rgba(244, 241, 234, 0.14);
  border-color: rgba(233, 226, 208, 0.4);
}
.guide-btn:disabled { opacity: 0.38; cursor: default; }
.guide-btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

.guide-btn.is-primary {
  border-color: rgba(201, 162, 39, 0.55);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.26), rgba(201, 162, 39, 0.1));
}
.guide-btn.is-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.4), rgba(201, 162, 39, 0.18));
}

.guide-voice[aria-pressed='true'] {
  border-color: rgba(201, 162, 39, 0.5);
  color: var(--gold-soft);
}

.guide-ask {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
}
.guide-ask input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(233, 226, 208, 0.2);
  background: rgba(8, 7, 12, 0.6);
  color: var(--paper);
}
.guide-ask input::placeholder { color: rgba(244, 241, 234, 0.4); }
.guide-ask input:focus {
  outline: none;
  border-color: rgba(201, 162, 39, 0.6);
  background: rgba(8, 7, 12, 0.85);
}

.guide-chips {
  display: flex;
  gap: 7px;
  padding: 11px 16px 15px;
  overflow-x: auto;
  scrollbar-width: none;
}
.guide-chips::-webkit-scrollbar { display: none; }

.guide-chip {
  flex: none;
  font: inherit;
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(233, 226, 208, 0.24);
  background: transparent;
  color: rgba(244, 241, 234, 0.72);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.guide-chip:hover {
  color: var(--paper);
  border-style: solid;
  border-color: rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.1);
}

/* --- Phones ------------------------------------------------------------- */

@media (max-width: 700px) {
  .guide-panel {
    --guide-w: calc(100vw - 20px);
    /* Sits above the navigation module's touch controls, which own the bottom
       corners (joystick left, interact button right) and the hint line under
       them. Anchored low enough to stay out of the artwork's way. */
    bottom: calc(126px + env(safe-area-inset-bottom, 0px));
  }
  .guide-body { padding: 11px 13px 12px; }
  .guide-text { font-size: 0.94rem; line-height: 1.55; }
  .guide-deep { font-size: 0.86rem; }
  .guide-context { display: none; }
  .guide-buttons { padding: 11px 13px 0; }
  .guide-btn { font-size: 0.78rem; padding: 7px 12px; }
  .guide-ask { padding: 10px 13px 0; }
  .guide-chips { padding: 9px 13px 13px; }
}

/* Short landscape phones: keep the card from eating the whole view. */
@media (max-height: 480px) {
  .guide-body { padding: 9px 14px 10px; }
  .guide-text { font-size: 0.88rem; }
  .guide-deep { max-height: 22vh; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-panel.is-speaking .guide-mark,
  .guide-panel.is-speaking .guide-text::after { animation: none; }
}