/* guide.css: floating site guide. Every selector is scoped to .bgd so the host pages' own styles are not changed. */
.bgd, .bgd * { box-sizing: border-box; }
.bgd-btn { position: fixed; right: 16px; bottom: 16px; z-index: 2147483000; min-height: 48px; min-width: 48px; padding: 10px 16px; border-radius: 999px; border: 2px solid #f0b35a; background: #1d2433; color: #f4f1ea; font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.bgd-btn:hover { background: #2a3347; }
.bgd :focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; box-shadow: 0 0 0 5px #1d2433; }
.bgd-panel { position: fixed; right: 16px; bottom: 76px; z-index: 2147483000; width: min(380px, calc(100vw - 32px)); max-height: min(78vh, 680px); overflow: hidden auto; display: none; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: #1d2433; color: #f4f1ea; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 12px 36px rgba(0,0,0,.45); border: 1px solid #343b4d; }
.bgd-panel.bgd-open { display: flex; }
.bgd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bgd-title { margin: 0; font-size: 18px; font-weight: 700; }
.bgd-panel > * { flex-shrink: 0; }
.bgd-mode { font-size: 13px; color: #f4f1ea; border: 1px solid #a3a9b8; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.bgd-mode.bgd-live { border-color: #6fcf9b; color: #6fcf9b; }
.bgd-x { min-height: 44px; min-width: 44px; border: 1px solid #a3a9b8; border-radius: 10px; background: transparent; color: #f4f1ea; font: inherit; cursor: pointer; }
.bgd-greet { margin: 0; }
.bgd-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.bgd-pick, .bgd-open-btn, .bgd-go, .bgd-speak { min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid #f0b35a; background: transparent; color: #f4f1ea; font: inherit; cursor: pointer; text-align: left; }
.bgd-go, .bgd-open-btn { background: #f0b35a; color: #1b1208; font-weight: 700; }
.bgd-speak[aria-pressed="true"] { background: #f0b35a; color: #1b1208; }
.bgd-log { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; padding-right: 2px; }
.bgd-msg { border-radius: 12px; padding: 10px 12px; background: #151b28; border: 1px solid #343b4d; }
.bgd-msg.bgd-user { background: #2a3347; }
.bgd-msg p { margin: 0 0 6px; }
.bgd-msg p:last-child { margin-bottom: 0; }
.bgd-where { font-size: 14px; color: #f0c98a; margin: 4px 0 8px; }
.bgd-cites { font-size: 14px; color: #c9c1b4; margin: 6px 0 0; padding-left: 16px; }
.bgd-form { display: flex; flex-direction: column; gap: 8px; }
.bgd-form label { font-weight: 600; }
.bgd-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bgd-input { flex: 1 1 180px; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid #a3a9b8; background: #f4f1ea; color: #1d2433; font: inherit; }
.bgd-status { font-size: 14px; color: #c9c1b4; min-height: 1.2em; margin: 0; }
.bgd-privacy { font-size: 13px; color: #c9c1b4; margin: 0; border-top: 1px dashed #4a5268; padding-top: 8px; }
.bgd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bgd-hl { outline: 3px solid #f0b35a !important; outline-offset: 4px; }
@media (max-width: 420px) { .bgd-btn { right: 12px; bottom: 12px; } .bgd-panel { right: 12px; bottom: 72px; width: calc(100vw - 24px); } }
@media (prefers-reduced-motion: reduce) { .bgd *, .bgd { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* Docked layout (lead, 27 Oct): the panel never covers the scene. Wide screens: a right-hand column and the page reflows
   narrower, so the whole video (people and corner tiles) stays in frame. Narrow screens: a bottom sheet under the content. */
@media (min-width: 900px) {
  .bgd-panel.bgd-open { top: 0; bottom: 0; right: 0; width: 300px; max-height: none; border-radius: 0; border-width: 0 0 0 1px; }
  body.bgd-docked { padding-right: 300px !important; }
  body.bgd-docked .bgd-btn { right: 316px; }
}
@media (max-width: 899px) {
  .bgd-panel.bgd-open { left: 0; right: 0; bottom: 0; width: auto; max-height: 40vh; border-radius: 14px 14px 0 0; }
  body.bgd-docked { padding-bottom: 41vh !important; }
  body.bgd-docked .bgd-btn { bottom: calc(40vh + 10px); }
}
.bgd-talk { min-height: 52px; width: 100%; border-radius: 12px; border: 2px solid #f0b35a; background: #f0b35a; color: #1b1208; font: 700 17px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; }
.bgd-talk[aria-pressed="true"] { background: #c0392b; border-color: #c0392b; color: #fff; }
.bgd-voice-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #c9c1b4; }
.bgd-voice-note { font-size: 13px; color: #c9c1b4; margin: 0; }

/* Compact docked panel (lead, 27 Oct): narrower column, smaller type. */
@media (min-width: 900px) {
  .bgd-panel.bgd-open { font-size: 14px; padding: 12px; gap: 8px; }
  .bgd-panel .bgd-title { font-size: 16px; }
  .bgd-panel .bgd-pick, .bgd-panel .bgd-open-btn, .bgd-panel .bgd-go { min-height: 36px; padding: 6px 10px; font-size: 13px; }
  .bgd-panel .bgd-x { min-height: 36px; min-width: 36px; font-size: 13px; padding: 0 8px; }
  .bgd-panel .bgd-talk { min-height: 44px; font-size: 15px; }
  .bgd-panel .bgd-input { min-height: 38px; font-size: 14px; }
  .bgd-panel .bgd-voice-row, .bgd-panel .bgd-where, .bgd-panel .bgd-status { font-size: 12.5px; }
  .bgd-panel .bgd-voice-note, .bgd-panel .bgd-privacy, .bgd-panel .bgd-mode { font-size: 11.5px; }
}
/* Clay buttons, site-wide (lead, 27 Oct): soft 3D, tactile press. Visual properties only; each page keeps its layout. */
button { border-radius: 14px !important; transition: transform .09s ease, box-shadow .09s ease, filter .12s ease; }
button:not(:disabled) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 42%, rgba(0,0,0,.10) 100%) !important;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.38), inset 0 -3px 2px rgba(0,0,0,.28), 0 4px 0 rgba(0,0,0,.38), 0 9px 16px rgba(0,0,0,.30) !important;
}
button.clay-ghost:not(:disabled) { background-color: #2c3446 !important; border-color: rgba(240,179,90,.55) !important; color: #f4f1ea !important; }
button:not(:disabled):hover { filter: brightness(1.07); }
button:not(:disabled):active, button[aria-pressed="true"] { transform: translateY(3px); box-shadow: inset 0 3px 6px rgba(0,0,0,.38), inset 0 -1px 1px rgba(255,255,255,.18), 0 1px 0 rgba(0,0,0,.38) !important; }
button:disabled { background-image: none !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { button { transition: none !important; } button:not(:disabled):active { transform: none; } }