/* Small additions for the live web app (hand-written). The reference design lives in app.css. */
.app .bub.bot:empty { display: none; }

/* Matterport 3D views (README, UI contract: view3d). Same palette and shapes as the reference player/buttons. */
.v3d-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #E1E4E7; border-radius: 16px; background: #fff; }
.v3d-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 22px; background: #242424; color: #FFDF00; display: flex; align-items: center; justify-content: center; }
.v3d-mid { flex: 1 1 auto; min-width: 0; }
.v3d-t { margin: 0; font-weight: 600; font-size: var(--fs-ui); color: #141414; }
.v3d-s { margin: 2px 0 0; font-size: var(--fs-s); color: #4f5559; }
.v3d-btn { flex: 0 0 auto; min-height: 44px; border-radius: 22px; border: none; background: #FFDF00; color: #141414; font-size: calc(16px * var(--k)); font-weight: 600; padding: 0 16px; cursor: pointer; }
.v3d-btn:focus-visible, .v3d-close:focus-visible { outline: 3px solid #147FAF; outline-offset: 2px; }

/* Full-screen dialog over the whole window (also on desktop, outside the phone frame). */
.v3d-ov { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: #141414; color: #fff; }
.v3d-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
.v3d-h { flex: 1 1 auto; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-close { flex: 0 0 auto; min-height: 48px; border-radius: 24px; border: none; background: #FFDF00; color: #141414; font-size: 16px; font-weight: 700; padding: 0 18px; cursor: pointer; }
.v3d-hint { margin: 0; padding: 0 12px 8px; font-size: 14px; color: #c9cdd1; }
.v3d-frame { flex: 1 1 auto; width: 100%; border: 0; background: #000; }
@media (max-width: 380px) { .v3d-hint { display: none; } }

/* "Cómo llegar" guide (js/view3d.js openGuide): the 3D view with a step panel under it (phones) or beside it. */
.v3d-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.v3d-guided .v3d-frame { min-height: 0; }
.v3d-guide { box-sizing: border-box; flex: 0 0 auto; max-height: 48%; overflow-y: auto; background: #fff; color: #141414; border-radius: 20px 20px 0 0;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) {
  .v3d-body { flex-direction: row; }
  .v3d-guide { width: 380px; max-height: none; border-radius: 20px 0 0 0; }
}
.v3d-g-eb { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4f5559; }
.v3d-g-way { margin: 0; font-size: 15px; color: #4f5559; }
.v3d-g-now { display: flex; align-items: center; gap: 14px; }
.v3d-g-big { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 32px; background: #FFDF00; color: #141414; display: flex; align-items: center; justify-content: center; }
.v3d-g-text { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35; }
.v3d-g-nav { display: flex; gap: 10px; }
.v3d-g-nav button { min-height: 52px; border-radius: 26px; font-size: 17px; font-weight: 700; padding: 0 18px; cursor: pointer; }
.v3d-g-prev { flex: 0 0 auto; border: 2px solid #141414; background: #fff; color: #141414; }
.v3d-g-prev:disabled { opacity: .35; cursor: default; }
.v3d-g-next { flex: 1 1 auto; border: none; background: #141414; color: #fff; }
.v3d-g-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.v3d-g-item { width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; border: none; border-radius: 12px; background: none;
  padding: 8px 10px; font: inherit; font-size: 15px; line-height: 1.35; color: #4f5559; cursor: pointer; }
.v3d-g-item[aria-current="step"] { background: #FFF6B3; color: #141414; font-weight: 600; }
.v3d-g-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 14px; background: #F1F3F4; display: flex; align-items: center; justify-content: center; }
.v3d-g-note { margin: 4px 0 0; font-size: 13px; color: #4f5559; }
.v3d-guide button:focus-visible { outline: 3px solid #147FAF; outline-offset: 2px; }

/* Stop audio (js/audio-player.js, css/player-skin.css). The chat card keeps the reference player's look; the
   player itself opens full screen. Stops without a recording keep the card, muted. */
.player-pending .play-off { background: #F1F3F4; color: #4f5559; }
.aud-card { gap: 10px; }
.aud-card .aud-open { display: block; text-align: start; background: none; border: none; padding: 4px 0; margin: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.aud-card .aud-open .pl-t, .aud-card .aud-open .pl-s { display: block; }
.aud-card .aud-open .track { display: block; }
.aud-card .aud-open .fill { display: block; }
.aud-card .aud-exp { flex: none; color: #4f5559; display: flex; pointer-events: none; }
.aud-card .pl-time:empty { display: none; }

.aud-ov { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: #fff; color: #242424;
  --k: 1; --fs: 17px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.aud-ov[hidden] { display: none; }
.aud-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid #E1E4E7; }
.aud-hb { flex: 1 1 auto; min-width: 0; }
.aud-eyebrow { margin: 0; font-size: calc(13px * var(--k)); color: #4f5559; text-transform: uppercase; letter-spacing: .04em; }
.aud-h { margin: 2px 0 0; font-size: calc(18px * var(--k)); font-weight: 700; line-height: 1.25; }
.aud-close { flex: 0 0 auto; min-height: 48px; border-radius: 24px; border: none; background: #FFDF00; color: #141414;
  font-size: calc(16px * var(--k)); font-weight: 700; padding: 0 18px; cursor: pointer; }
.aud-close:focus-visible { outline: 3px solid #147FAF; outline-offset: 2px; }
.aud-body { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }

/* Next-stop sheet: the next stop's photo, so the visitor can recognise it when they get there. */
.tr-photo img { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 16px; background: #F1F3F4; }
@media (max-height: 640px) { .tr-photo img { height: 130px; } }

/* Bot avatar (img/bot-avatar.svg) beside the bot's bubbles; within a run of bot messages only the first shows it. */
.bot-row { display: flex; align-items: flex-start; gap: 8px; align-self: stretch; }
.bot-row .bub.bot, .bot-row .typing { max-width: calc(100% - 64px); }
.bot-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #E1E4E7; padding: 3px; box-sizing: border-box; }
.bot-row + .bot-row .bot-av { visibility: hidden; }
.bot-row:has(.bub.bot:empty) { display: none; }