/* ---------- Caspian on the front page (js/guest.js): a guide for visitors ---------- */
.gst-w { position: fixed; right: 20px; bottom: 14px; z-index: 44; transition: transform .75s var(--ease); }
.gst-pet { position: relative; display: block; width: 72px; height: 78px; cursor: pointer; opacity: .94; transition: opacity .15s; }
.gst-pet:hover, .gst-w.tour .gst-pet { opacity: 1; }
.gst-pet:focus-visible { outline: 2px solid var(--amber-line); outline-offset: 4px; border-radius: var(--r-2); }
.gst-s { display: block; width: 72px; height: 78px; background: var(--gst-pet) 0 0 / 800% 700% no-repeat; }
/* what he says: above his head at home, at his left while he shows something */
.gst-say { position: absolute; right: 0; bottom: 86px; width: 290px; padding: 14px 14px 12px; background: var(--bg-2); border: 1px solid var(--amber-line); border-radius: var(--r-3); box-shadow: var(--shadow); animation: gst-pop .18s var(--ease); }
.gst-say[hidden] { display: none; }
.gst-say p { margin: 0 18px 12px 0; font-size: 13.5px; line-height: 1.5; color: var(--fg); }
.gst-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.gst-f span { flex: 1; font-size: 11.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.gst-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 6px; font-size: 16px; line-height: 1; color: var(--fg-3); transition: color .15s, background .15s; }
.gst-x:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }
@keyframes gst-pop { from { opacity: 0; transform: translateY(4px); } }
/* the part he is standing by */
.gst-on { outline: 2px solid var(--amber); outline-offset: 8px; border-radius: var(--r-3); }
body.auth .gst-on { outline-offset: 3px; border-radius: var(--r-2); }
@media (min-width: 761px) { .gst-w.tour .gst-say { right: 80px; bottom: 0; width: 270px; } }
@media (max-width: 760px) {
  .gst-w { right: 10px; bottom: 10px; }
  .gst-pet, .gst-s { width: 48px; height: 52px; }
  .gst-say { bottom: 60px; width: min(290px, calc(100vw - 20px)); }
  /* showing something: a bar across the bottom, he at its left */
  .gst-w.tour { display: flex; align-items: center; gap: 10px; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 8px 10px; transform: none !important;
    background: var(--bg-2); border: 1px solid var(--amber-line); border-radius: var(--r-3); box-shadow: var(--shadow); }
  .gst-w.tour .gst-pet { order: -1; flex: none; }
  .gst-w.tour .gst-say { position: static; flex: 1; width: auto; padding: 0; background: none; border: 0; box-shadow: none; animation: none; }
  .gst-w.tour .gst-x { top: 2px; right: 2px; }
  .gst-w.tour.coach { top: 8px; bottom: auto; }           /* a form's button is at the bottom, and so is the keyboard: he talks from the top */
}