/* =========================
   SESSION (LIVE CAM) – PRIVATE LAYOUT
========================= */

.session{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap:14px;
  align-items:stretch; /* ważne: oba boksy równo */
}

@media (max-width: 980px){
  .session{ grid-template-columns:1fr; }
}

/* VIDEO */
.video-box{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  background:#000;

  /* ZMIANA: bez sztywnego height – pod kwadraty 1v1 */
  min-height: 520px;
}

@media (max-width: 980px){
  .video-box{ min-height: 460px; }
}

.video-live{
  border-color: rgba(255,45,85,.25);
  box-shadow: 0 0 60px rgba(255,45,85,.10), var(--shadow);
}

/* "privacy" – lekki winiet + miękki gradient */
.video-box::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255,45,85,.10), transparent 55%),
    radial-gradient(900px 520px at 50% 100%, rgba(0,0,0,.55), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.32));
  opacity:.85;
  z-index: 0;
}

.video-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(242,242,247,.82);
  font-weight:900;
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255,45,85,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85));
  z-index:1;
}

/* badges always above overlays */
.badge{ z-index: 5; }

/* przyciski akcji na video (zawsze na wierzchu) */
.video-actions{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  gap:10px;
  z-index: 6;
}

/* CHAT BOX */
.chat-box{
  background: linear-gradient(180deg, rgba(14,15,19,.88), rgba(11,12,16,.88));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:14px;
  box-shadow: var(--shadow);

  display:flex;
  flex-direction:column;

  height: 560px;
  min-height: 420px;
}

@media (max-width: 980px){
  .chat-box{ height: auto; min-height: 360px; }
}

.chat-live{
  background:
    radial-gradient(520px 240px at 20% 0%, rgba(255,45,85,.12), transparent 60%),
    linear-gradient(180deg, rgba(14,15,19,.88), rgba(11,12,16,.88));
  border-color: rgba(255,255,255,.09);
}

.chat-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

/* LOG */
.chatlog{
  margin-top:12px;
  flex:1;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  padding:12px;

  /* smooth + brak pasków */
  scrollbar-width:none;
}
.chatlog::-webkit-scrollbar{ width:0; height:0; }

/* MESSAGES */
.msg{ display:flex; gap:10px; margin-bottom:10px; }
.bubble{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  max-width:85%;
}
.bubble.me{
  margin-left:auto;
  border-color: color-mix(in srgb, var(--brand) 40%, rgba(255,255,255,.10) 60%);
  box-shadow: 0 0 18px rgba(124,77,255,.12);
}
.meta{
  font-size:11px;
  color: var(--muted);
  margin-bottom:4px;
}

/* INPUT */
.chat-input{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.chat-input input{
  flex:1;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  padding:12px;
  color: var(--text);
  outline:none;
  min-width:0;
}
.chat-input input:focus{
  border-color: color-mix(in srgb, var(--brand) 55%, rgba(255,255,255,.12) 45%);
  box-shadow: var(--glowBrand);
}

/* =========================
   DM / HISTORY – NO SCROLLBARS
========================= */
.threadList{
  scrollbar-width:none;
}
.threadList::-webkit-scrollbar{ width:0; height:0; }

.threadLog, .dmLog{
  scrollbar-width:none;
}
.threadLog::-webkit-scrollbar,
.dmLog::-webkit-scrollbar{ width:0; height:0; }

/* =========================
   FIX: BADGES + ACTION BUTTONS (LIVE CAM)
========================= */

.badge{
  position:absolute;
  top:12px;
  left:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
  color: rgba(242,242,247,.95);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  z-index: 5;
}

.badge.right{
  left:auto;
  right:12px;
}

.badge .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--live1);
  box-shadow: 0 0 18px rgba(255,45,85,.22);
  animation: blink 1.1s infinite;
}

.fab{
  cursor:pointer;
  width:46px;
  height:46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(242,242,247,.92);
  display:grid;
  place-items:center;
  font-size: 18px;
  backdrop-filter: blur(12px);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.fab:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--brand) 38%, rgba(255,255,255,.14) 62%);
  box-shadow: 0 0 26px rgba(124,77,255,.12);
}

.fab.on{
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, rgba(0,0,0,0) 45%));
  color:#071014;
  box-shadow: var(--glowBrand);
}

/* GIFTS BAR (nad chatlog) */
.giftBar{
  display:flex;
  gap:10px;
  overflow:auto;
  padding: 10px 6px;
  margin-top: 10px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  scrollbar-width:none;
}
.giftBar::-webkit-scrollbar{ width:0; height:0; }

.giftChip{
  cursor:pointer;
  flex:0 0 auto;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  font-weight: 900;
  display:flex;
  gap:8px;
  align-items:center;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.giftChip:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--brand) 35%, rgba(255,255,255,.10) 65%);
}

/* typing indicator */
.typing{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  opacity:.9;
}
.dotdot{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(242,242,247,.65);
  animation: blink 1s infinite;
}
.dotdot:nth-child(2){ animation-delay:.12s; }
.dotdot:nth-child(3){ animation-delay:.24s; }

/* =========================
   1v1 VIDEO GRID — SQUARE
========================= */

.videoGrid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px;
  place-items: center;
  z-index: 2;
}

@media (max-width: 980px){
  .videoGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* POJEDYNCZY KAFEL KAMERY = KWADRAT */
.tile{
  position:relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;      /* KLUCZ: ZAWSZE KWADRAT */
  border-radius: 20px;
  overflow:hidden;
  background:#000;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.tile::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255,45,85,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
  z-index:2;
}

.tile.me{
  border-color: color-mix(in srgb, var(--brand) 30%, rgba(255,255,255,.12) 70%);
}

.tileLabel{
  position:absolute;
  top:10px;
  left:10px;
  z-index:4;
  font-size: 12px;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}

.videoGrid video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:none; /* pokażemy jak jest stream */
  z-index:1;
}

/* placeholder w kafelku */
.videoGrid .video-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color: rgba(242,242,247,.82);
  background:
    radial-gradient(500px 260px at 50% 0%, rgba(255,45,85,.15), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85));
  z-index:1;
  border-radius: 20px;
}