/* public/css/app.css — consolidated theme + components (moved out of index.php) */

/* =========================
   Base theme
   ========================= */
:root {
  --bg: #0b0d10;
  --panel: #0f1318;
  --panel-2: #131924;
  --border: #1c2330;
  --border-2: #1f2a3a;
  --text: #e9eef4;
  --accent: #9ad0ff;

  /* Unified media framing */
  --media-ratio: 16/9;   /* same ratio for video, profile poster, and thumbs */
  --media-fit: cover;    /* change to 'contain' if you prefer letterboxing */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }

.navbar { background: var(--panel); border-bottom: 1px solid var(--border); }
.brand-grad {
  background: linear-gradient(135deg,#32d3ff,#6c5ce7,#ff6ec7);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800;
}

a, a:hover { color: var(--accent); text-decoration: none; }
.form-select { background: var(--panel); color: var(--text); border-color: var(--border); }

/* =========================
   Player (mobile-safe exact framing)
   ========================= */
.player-wrap{
  background:#000;
  border-radius:1rem;
  overflow:hidden;

  width:100%;
  max-width:860px;
  margin:0 auto;

  min-width:0;

  aspect-ratio: var(--media-ratio);
  position:relative;

  contain: layout paint style;
}

.player-wrap > video{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;

  display:block;
  background:#000;

  object-fit: var(--media-fit);
  object-position: center center;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  touch-action: pan-y;
}

.player-wrap > img,
.player-wrap .poster-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  object-position:center;
}

@media (max-width: 576px){
  .player-wrap{
    max-width: 100%;
    border-radius: .9rem;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@supports (-webkit-touch-callout: none){
  .player-wrap{
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
  }
  .player-wrap > video{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@supports not (aspect-ratio: 1 / 1){
  .player-wrap{
    height:0;
    padding-top: 56.25%;
  }
  .player-wrap > video,
  .player-wrap > img,
  .player-wrap .poster-img{
    position:absolute;
    inset:0;
  }
}

/* =========================
   Chips / badges
   ========================= */
.chip {
  font-size:.85rem; background: var(--panel-2);
  border:1px solid var(--border-2); padding:.25rem .55rem;
  border-radius:999px; display:inline-flex; align-items:center; gap:.35rem;
}
.chip-sm { font-size:.75rem; padding:.15rem .45rem; }

/* =========================
   Model card — poster exact framing
   ========================= */
.model-card {
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: 1.1rem;
  overflow:hidden;
}

.model-card img,
#modelPoster{
  width:100%;
  height:auto;
  aspect-ratio: var(--media-ratio);
  object-fit: var(--media-fit);
  background:#000;
  display:block;
}

@supports not (aspect-ratio: 1/1){
  .model-card img,
  #modelPoster{
    width:100%;
    height:180px;
    object-fit: var(--media-fit);
  }
}

.badge-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }

/* =========================
   Share grid
   ========================= */
.share-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.5rem; }
.btn-share { display:flex; align-items:center; justify-content:center; gap:.4rem; }

/* =========================
   Recording Dock (single source of truth)
   ========================= */
#recDockToggle { position:fixed; right:16px; bottom:16px; z-index:1060; }

#recDock{
  position:fixed;
  right:16px;
  bottom:16px; /* app.js toggles visibility; the dock itself can sit above toggle via header spacing */
  width:360px;
  max-width:90vw;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:none;
  z-index:1060;
}

#recDock .rec-head{
  padding:.6rem .8rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
}

#recDock .rec-body{
  max-height:55vh;
  overflow:auto;
  padding:.6rem .8rem;
}

#recDock .rec-item{
  background:#0b0f14;
  border:1px solid #1e2633;
  border-radius:10px;
  padding:.6rem .8rem;
  margin-bottom:.6rem;
}

#recDock .progress{ height:.35rem; }

/* =========================
   Chat
   ========================= */
.chat-box { background:var(--panel); border:1px solid var(--border); border-radius:.8rem; padding:.6rem; height:300px; overflow:auto; }
.chat-msg { margin:.25rem 0; }
.chat-msg .time{ opacity:.6; font-size:.8rem; margin-left:.35rem; }
.chat-input { background:var(--panel); color:var(--text); border:1px solid var(--border); }

@media (pointer: coarse) { .btn { min-height:38px; } }

/* Send button */
#chatSend{
  width:40px;height:40px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
}
#chatSend i{font-size:14px;line-height:1}

/* ============================================================
   “You may also like” grid
   ============================================================ */
.mgrid{
  display:grid !important;
  gap:12px !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  align-items: stretch !important;
}
@media (max-width: 560px){
  .mgrid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; }
}

.m-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: .9rem;
  overflow: hidden;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease;
}
.m-card:hover{ transform: translateY(-2px); }

.m-thumb{
  width:100%;
  aspect-ratio: var(--media-ratio);
  display:block;
  object-fit: var(--media-fit);
  background:#000;
}
@supports not (aspect-ratio: 1/1){
  .m-thumb{ height: 160px; object-fit: var(--media-fit); }
}

.pos-rel{ position: relative; }

.m-badge{
  position:absolute;
  top:.4rem; left:.4rem;
  background: rgba(0,0,0,.6);
  padding:.15rem .4rem;
  border-radius:.4rem;
  font-size:.75rem;
  line-height:1;
}

.m-meta{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.45rem .6rem;
  border-top:1px solid var(--border);
  background: var(--panel);
}
.m-nick{
  flex:1; min-width: 0; font-weight:600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-right{ display:flex; align-items:center; gap:.4rem; }
.flag{ width:18px; height:12px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.25); }

/* =========================
   Snapshots Gallery (moved from index.php inline style)
   ========================= */
#snapshotsCard .card-body{ padding:14px; }

.snap-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 1200px){ .snap-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 992px){ .snap-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px){ .snap-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px){ .snap-grid{ grid-template-columns: repeat(2, 1fr); } }

.snap-thumb{
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#0b0f14;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.snap-thumb img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}
@media (max-width: 768px){ .snap-thumb img{ height:110px; } }
@media (max-width: 420px){ .snap-thumb img{ height:105px; } }

/* Snapshot viewer modal sizing + “no maximized image” */
#snapViewModal .modal-dialog{ max-width: min(980px, 96vw); }
#snapViewModal .modal-body{ padding:12px; }

#snapViewImg{
  width:100%;
  max-height:72vh;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  display:block;
  background:#0b0f14;
}

#snapViewMeta{ color: #9aa4b2; font-size: 13px; }
.snap-nav-btn{ min-width: 96px; }

/* =========================
   Footer
   ========================= */
.site-footer { background:#0f1318; border-top:1px solid #1c2330; }

/* =========================
   Toast
   ========================= */
#toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 2000;
  display: none;
  background: rgba(15,19,24,.95);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  padding: .55rem .75rem;
  border-radius: .75rem;
  max-width: min(420px, 92vw);
  text-align: center;
}
/* ===== Footer online delta ===== */
.online-delta{
  display:inline-block;
  min-width: 0;
  font-weight: 700;
  opacity: 0;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.online-delta.up{ color: #22c55e; }
.online-delta.down{ color: #ef4444; }
.online-delta.pop{
  opacity: 1;
  transform: translateY(-1px);
}