/* Tourney Jester product skin for the reusable TFM Guide Runtime. */
.tfm-guide-layer {
  --tfm-guide-accent: #c9a45c;
  --tfm-guide-glow: #c9a45ccc;
  --tfm-guide-surface: #14110e;
  --tfm-guide-text: #eee3c8;
  z-index: 136;
  font-family: var(--tj-serif, Georgia, serif);
}

.tfm-guide-bubble {
  width: min(320px, calc(100vw - 20px));
  padding: 15px 16px 13px;
  border: 1px solid rgba(201, 164, 92, .72);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(31, 25, 18, .98), rgba(13, 12, 10, .98));
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .58),
    inset 0 1px 0 rgba(238, 227, 200, .08),
    0 0 28px rgba(201, 164, 92, .24);
  transition: opacity 160ms ease;
}

.tfm-guide-message {
  color: var(--tj-parchment, #eee3c8);
  font: 600 14px/1.48 var(--tj-serif, Georgia, serif);
}

.tfm-guide-message::before {
  content: "Jax · ";
  color: var(--tj-gold-bright, #e3c77d);
  font-family: var(--tj-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tfm-guide-recovery {
  padding-top: 8px;
  border-top: 1px solid rgba(201, 164, 92, .18);
  color: var(--tj-ink-2, #c7baa0);
  font: 11px/1.48 var(--tj-mono, ui-monospace, monospace);
}

.tfm-guide-controls {
  justify-content: flex-end;
}

.tfm-guide-layer[data-mode="follow"] .tfm-guide-resume,
.tfm-guide-layer[data-mode="pinned"] .tfm-guide-pin {
  display: none;
}

.tfm-guide-control {
  min-width: 52px;
  border-color: rgba(201, 164, 92, .42);
  border-radius: 9px;
  color: var(--tj-parchment, #eee3c8);
  background: linear-gradient(180deg, rgba(201, 164, 92, .17), rgba(201, 164, 92, .08));
  font: 9px var(--tj-mono, ui-monospace, monospace);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tfm-guide-control:hover {
  border-color: var(--tj-gold, #c9a45c);
  color: var(--tj-gold-bright, #e3c77d);
}

.tfm-guide-avatar {
  width: clamp(78px, 10vw, 104px);
  height: clamp(78px, 10vw, 104px);
  padding: 3px;
  border: 0;
  border-radius: 30px;
  background: radial-gradient(circle, rgba(201, 164, 92, .12), transparent 68%);
  box-shadow: 0 0 34px rgba(201, 164, 92, .34);
}

.tfm-guide-avatar img {
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(201, 164, 92, .35));
}

.tfm-guide-target {
  outline-color: var(--tj-gold-bright, #e3c77d) !important;
  box-shadow:
    0 0 0 6px rgba(201, 164, 92, .16),
    0 0 28px rgba(201, 164, 92, .34) !important;
}

body[data-app-view="loaded"] #jax.tfm-guide-facade,
body[data-app-view="setup"] #jax.tfm-guide-facade,
#jaxBtn.tfm-guide-facade {
  transition:
    left 320ms cubic-bezier(.2, .8, .2, 1),
    top 320ms cubic-bezier(.2, .8, .2, 1),
    filter 180ms ease,
    box-shadow 180ms ease;
}

@media (max-width: 600px) {
  /*
   * The setup shell already reserves a Jax-and-chat coach row. On narrow
   * screens the live guide becomes the sole visible voice so its actionable
   * bubble cannot compete with the older static setup prompt. Visibility
   * preserves the row and avatar slot; inert/faulted guide states fail open.
   */
  body[data-jax-coach-status="ready"][data-jax-coach-screen^="setup."] .setup-coach .chat {
    visibility: hidden;
  }

  body[data-jax-coach-status="ready"][data-jax-coach-screen^="setup."] .setup-coach {
    min-height: 286px;
    align-items: start;
  }

  body[data-jax-coach-status="ready"][data-jax-coach-screen^="setup."] .tfm-guide-bubble {
    max-height: min(54vh, 230px);
  }

  .tfm-guide-bubble {
    width: min(300px, calc(100vw - 20px));
    max-height: min(38vh, 230px);
    padding: 13px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .tfm-guide-controls {
    gap: 6px;
  }

  .tfm-guide-control {
    min-width: 48px;
    padding: 7px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #jax.tfm-guide-facade,
  body #jaxBtn.tfm-guide-facade {
    transition: none;
  }
}

@media (forced-colors: active) {
  .tfm-guide-message::before,
  .tfm-guide-recovery {
    color: CanvasText;
  }
}