/* Ask the Guide widget — Street Smart NYC brand theme.
 * Palette: deep navy #0F2342 · gold #C9A86A · ivory #F5EFE2 · teal #6BA393 */

.atg-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  display: flex; align-items: center; gap: 10px;
  background: #0F2342; color: #F5EFE2;
  border: 2px solid #C9A86A; border-radius: 999px;
  padding: 8px 18px 8px 8px; cursor: pointer;
  font: 600 15px/1.2 system-ui, -apple-system, sans-serif;
  box-shadow: 0 8px 24px rgba(15, 35, 66, .35);
  transition: transform .15s ease;
}
.atg-launcher:hover { transform: translateY(-2px); }
.atg-launcher img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #0F2342; }
.atg-launcher.atg-hidden { display: none; }

/* B.G. hint bubble (Step 5) */
.atg-hint {
  position: fixed; right: 20px; bottom: 84px; z-index: 9998;
  width: 300px; max-width: calc(100vw - 40px);
  display: flex; gap: 10px; align-items: flex-start;
  background: #0F2342; color: #F5EFE2;
  border: 2px solid #C9A86A; border-radius: 14px;
  padding: 12px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 35, 66, .35);
  font: 14px/1.45 system-ui, -apple-system, sans-serif;
  animation: atg-pop .25s ease;
}
@keyframes atg-pop { from { transform: translateY(8px); opacity: 0; } }
.atg-hint img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.atg-hint p { margin: 0; flex: 1; }
.atg-hint-nav { display: flex; flex-direction: column; gap: 4px; flex: none; }
.atg-hint-nav button {
  background: none; border: 1px solid rgba(201, 168, 106, .5); color: #C9A86A;
  border-radius: 8px; font-size: 12px; padding: 2px 8px; cursor: pointer;
}
.atg-hint-nav button:hover { background: rgba(201, 168, 106, .15); }
.atg-hint-nav button:disabled { opacity: .45; cursor: default; }

.atg-bg-pointer {
  position: fixed; z-index: 9997; width: 76px; height: 76px;
  object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(15, 35, 66, .3));
  animation: atg-point .35s ease;
}
@keyframes atg-point { from { transform: translateY(8px) scale(.92); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .atg-bg-pointer, .atg-hint { animation: none; }
}

.atg-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 380px; max-width: calc(100vw - 40px); height: 560px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: #0F2342; color: #F5EFE2;
  border: 2px solid #C9A86A; border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
  font: 15px/1.5 system-ui, -apple-system, sans-serif;
}
.atg-panel[hidden] { display: none; }

.atg-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: rgba(201, 168, 106, .12);
  border-bottom: 1px solid rgba(201, 168, 106, .35);
}
.atg-stage {
  width: 84px; height: 84px; border-radius: 12px; overflow: hidden; flex: none;
  background: #0F2342 center/cover no-repeat;
}
.atg-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.atg-stage.atg-still video { display: none; }
.atg-title { flex: 1; min-width: 0; }
.atg-title strong { display: block; font-size: 16px; color: #C9A86A; }
.atg-title span { display: block; font-size: 12px; opacity: .75; }
.atg-close {
  background: none; border: none; color: #F5EFE2; font-size: 18px;
  cursor: pointer; padding: 6px; opacity: .7;
}
.atg-close:hover { opacity: 1; }

.atg-messages {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.atg-msg {
  max-width: 85%; padding: 10px 14px; border-radius: 14px;
  white-space: pre-wrap; word-wrap: break-word;
}
.atg-guide { align-self: flex-start; background: rgba(245, 239, 226, .1); border: 1px solid rgba(201, 168, 106, .3); }
.atg-you { align-self: flex-end; background: #C9A86A; color: #0F2342; font-weight: 500; }

.atg-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(201, 168, 106, .35); }
.atg-form input {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px;
  border: 1px solid rgba(201, 168, 106, .5); background: rgba(245, 239, 226, .08);
  color: #F5EFE2; font-size: 15px; outline: none;
}
.atg-form input:focus { border-color: #C9A86A; }
.atg-form input::placeholder { color: rgba(245, 239, 226, .45); }
.atg-form button {
  padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer;
  background: #C9A86A; color: #0F2342; font-weight: 700; font-size: 15px;
}
.atg-form button:disabled { opacity: .5; cursor: default; }

@media (max-width: 480px) {
  .atg-panel { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
  .atg-launcher { right: 10px; bottom: 10px; }
}