/* src/journey-back-callout.css
 * JOURNEY-BACK-UI-01 — one-time first-use callout, positioned above the
 * recall button.
 */

.jbc {
  position: fixed;
  z-index: 9200;
  width: 220px;
  background: rgba(8, 14, 22, 0.97);
  border: 1px solid rgba(120, 200, 255, 0.5);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(120, 200, 255, 0.18);
  font: 500 12px/1.4 'Segoe UI', system-ui, sans-serif;
  color: #dfe9f5;
}

.jbc__title {
  font-weight: 700;
  font-size: 13px;
  color: #78c8ff;
  margin-bottom: 4px;
}

.jbc__body {
  color: rgba(223, 233, 245, 0.85);
  margin-bottom: 8px;
}

.jbc__ok {
  display: block;
  width: 100%;
  background: rgba(120, 200, 255, 0.14);
  border: 1px solid rgba(120, 200, 255, 0.45);
  border-radius: 5px;
  color: #dfe9f5;
  font: 700 11.5px 'Segoe UI', system-ui, sans-serif;
  padding: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.jbc__ok:hover {
  background: rgba(120, 200, 255, 0.26);
  border-color: #78c8ff;
}