/* assets/css/model.css
 * Model profile page styles (stable + mobile-friendly)
 * - Hero aspect ratio: 854 / 480 (matches MJPEG stream)
 * - Prevents sidebar from dropping under main (min-width:0 / overflow guards)
 * - Works cleanly with Bootstrap grid
 */

/* =========================
 * GRID / FLEX SHRINK FIX (CRITICAL)
 * ========================= */
.container, .row, [class^="col-"], [class*=" col-"] { min-width: 0; }
.row { align-items: flex-start; }

.card, .card-body, .tab-content, .tab-pane { min-width: 0; }
.d-flex { min-width: 0; }
.title-bar { min-width: 0; }
.title-bar h1 { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* Tabs should wrap, not force width */
#profileTabs { flex-wrap: wrap; gap: .25rem; }
#profileTabs .nav-link { white-space: nowrap; }

/* =========================
 * SIDEBAR
 * ========================= */
.profile-sidebar { min-width: 0; }
.profile-sidebar dd { overflow-wrap: anywhere; word-break: break-word; }

@media (min-width: 992px){
  .profile-sidebar { position: sticky; top: 84px; }
}

/* =========================
 * TITLE / STATS
 * ========================= */
.title-bar { gap: .75rem; }
.title-bar h1 { margin: 0; }

.stat-chip{
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .84rem;
  white-space: nowrap;
}

.badge-outline{
  border: 1px solid #ced4da;
  background: #fff;
  color: #6c757d;
}

/* =========================
 * HERO (player) — 854x480
 * ========================= */
.hero-wrap{ position: relative; }

.live-hero{
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 854 / 480; /* UPDATED */
  background: #111;
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* Fallback for older browsers (rare): keep height sane */
@supports not (aspect-ratio: 1 / 1){
  .live-hero::before{
    content:"";
    display:block;
    padding-top: 56.2%; /* 480/854 ≈ 56.2% */
  }
  .live-hero > *{
    position:absolute;
    inset:0;
  }
}

.live-hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* BADGES top-left */
.hero-badges{
  position: absolute;
  left: .75rem;
  top: .75rem;
  z-index: 6;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
  max-width: calc(100% - 1.5rem);
}

.hero-badges .badge,
.badge-hero{
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  padding: .28rem .55rem;
  border-radius: .5rem;
  font-weight: 600;
  letter-spacing: .02em;
  backdrop-filter: blur(2px);
}

/* HUD bottom-left */
.live-hero-hud{
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 8;
}

/* Hide any text/status if present */
.live-hero-hud .live-meta,
#liveStatusText{ display: none !important; }

.live-toggle{
  padding: 4px 10px;
  line-height: 1.1;
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.35);
}

/* NAV ARROWS */
.nav-arrow{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.6);
  color: #fff;
  z-index: 7;
  transition: opacity .15s ease, background-color .15s ease, transform .15s ease;
}

#prevBtn, #nextBtn{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
#prevBtn{ left: 12px !important; }
#nextBtn{ right: 12px !important; }

.nav-arrow:hover{
  background-color: rgba(0,0,0,.4);
  transform: translateY(-50%) translateY(-1px) !important;
}

@media (hover: hover){
  .hero-wrap .nav-arrow{ opacity: 0; }
  .hero-wrap:hover .nav-arrow{ opacity: .9; }
}
@media (hover: none){
  .hero-wrap .nav-arrow{ opacity: .85; }
}

/* Optional pulse */
.live-hero.is-live::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow:
    0 0 0 2px rgba(220, 53, 69, 0.45),
    0 0 0 6px rgba(220, 53, 69, 0.12);
  animation: livePulse 1.6s ease-in-out infinite;
}
.live-hero:not(.is-live)::after{ animation:none; box-shadow:none; }

@keyframes livePulse{
  0%{ box-shadow: 0 0 0 2px rgba(220,53,69,.38), 0 0 0 6px rgba(220,53,69,.10); }
  50%{ box-shadow: 0 0 0 2px rgba(220,53,69,.62), 0 0 0 10px rgba(220,53,69,.16); }
  100%{ box-shadow: 0 0 0 2px rgba(220,53,69,.38), 0 0 0 6px rgba(220,53,69,.10); }
}

@media (prefers-reduced-motion: reduce){
  .live-hero.is-live::after{ animation:none; }
}

/* =========================
 * GALLERY / RELATED
 * ========================= */
.gallery img{ aspect-ratio: 1 / 1; object-fit: cover; }
.related img.card-img-top{ aspect-ratio: 4 / 3; object-fit: cover; }

.nav-neighbor{ white-space: nowrap; }

/* Popover */
.popover{ max-width: 320px; }
.popover .neighbor-tip-img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: .5rem;
  margin-bottom: .35rem;
}
.popover .neighbor-tip-title{ white-space: normal; margin: 0; }

/* Share */
.share-btn{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  border:1px solid #e9ecef;
  background:#fff;
  border-radius:12px;
  padding:.55rem .65rem;
  font-size:.95rem;
}
.share-btn:hover{ background:#f8f9fa; }
.share-btn .icon{ display:inline-flex; }

/* QR */
.qr-card{ border-top: 1px solid #f0f1f2; padding-top: .75rem; }
.qr-title{ font-size: .95rem; margin: 0 0 .5rem; }
.qr-wrap{ display:flex; justify-content:center; }

/* Shortcuts */
.shortcuts-bar{
  font-size: .9rem;
  background:#f8f9fa;
  border:1px solid #e9ecef;
  border-radius:12px;
  padding:.5rem .75rem;
}

/* Mobile */
@media (max-width: 576px){
  #prevBtn{ left: 8px !important; }
  #nextBtn{ right: 8px !important; }
  .live-hero-hud{ left: 8px; bottom: 8px; gap: 6px; }
  .hero-badges{ left: .5rem; top: .5rem; }
}
/* Modal image navigation arrows */
#imageModal .modal-body { background: #000; } /* optional, looks cleaner */
#imageModal img { display:block; margin:0 auto; }

.image-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
  user-select:none;
}
.image-nav:hover{ opacity:1; }
.image-nav-prev{ left:12px; }
.image-nav-next{ right:12px; }

@media (max-width: 576px){
  .image-nav{ width:40px; height:40px; }
  .image-nav-prev{ left:8px; }
  .image-nav-next{ right:8px; }
}
/* Shortcut badges bar */
.shortcut-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;

  padding:.5rem .75rem;
  border-radius:12px;

  /* Works on hero image backgrounds */
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,.15);
}

.shortcut-label{
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.2px;
  color: rgba(255,255,255,.85);
  margin-right:.25rem;
  user-select:none;
}

.shortcut-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);

  border-radius:999px;
  padding:.35rem .55rem;

  font-size:.82rem;
  line-height:1;

  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}

.shortcut-pill:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  transform: translateY(-1px);
}

.shortcut-pill:active{
  transform: translateY(0);
}

.shortcut-pill:focus{
  outline:none;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.12);
}

.shortcut-pill .k{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.18rem .35rem;
  border-radius:8px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.78rem;
  color: rgba(255,255,255,.95);
  min-width: 1.4rem;
}

.shortcut-pill .k:first-child{ margin-left:0; }

.shortcut-pill .t{
  font-weight:600;
  letter-spacing:.15px;
}

/* Optional emphasis for “Tip” */
.shortcut-pill-warn{
  background: rgba(255,193,7,.18);
  border-color: rgba(255,193,7,.35);
}
.shortcut-pill-warn:hover{
  background: rgba(255,193,7,.24);
  border-color: rgba(255,193,7,.45);
}

/* Mobile: hide labels, keep keys */
@media (max-width: 575.98px){
  .shortcut-pill .t{ display:none; }
  .shortcut-label{ display:none; }
  .shortcut-badges{ gap:.4rem; padding:.5rem; }
}