/* New CSS for YouTube-style layout (does not depend on your other css) */

.yt-wrap{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.yt-left{ flex: 1 1 auto; min-width: 0; }
.yt-right{ flex: 0 0 360px; max-width: 360px; }

@media (max-width: 980px){
  .yt-wrap{ flex-direction:column; }
  .yt-right{ flex: 1 1 auto; max-width: none; width: 100%; }
}

.yt-post{
  border:1px solid rgba(0,0,0,0.15);
  border-radius:10px;
  background:#b32d2d;
  overflow:hidden;
}

.yt-post-player{ padding:12px; }
.yt-main-video{
  width:100%;
  max-width:640px;
  height:auto;
  aspect-ratio: 4 / 3;
  display:block;
  background:#000;
  border-radius:10px;
}
.yt-post-stats{
  margin-top:8px;
  display:flex;
  gap:12px;
  font-size:13px;
  opacity:.8;
}

.yt-post-body{ padding:12px; border-top:1px solid rgba(0,0,0,0.08); }
.yt-post-text{ font-size:15px; line-height:1.35; margin-bottom:10px; }

.yt-post-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,0.08);
  margin-bottom:10px;
}
.yt-open{ margin-left:auto; font-size:16px; text-decoration:#FFF; background-color:#0C6; border:1px solid #d9d9d9; padding:6px 10px; border-radius:999px; }
.yt-open:hover{ text-decoration:underline; }

.yt-replies-title{
  font-weight:700;
  margin:6px 0 10px 0;
}
.yt-reply{
  border-left:3px solid rgba(0,0,0,0.10);
  padding-left:10px;
  margin:10px 0;
}
.yt-reply-head{
  display:flex;
  gap:10px;
  font-size:13px;
  opacity:.85;
}
.yt-reply-user{ font-weight:700; }
.yt-reply-body{ margin:6px 0; font-size:14px; line-height:1.35; }
.yt-reply-actions{ display:flex; align-items:center; gap:8px; }

.yt-item{
  display:flex;
  gap:10px;
  padding:10px;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:10px;
  background:#141b28;
  cursor:pointer;
  margin-bottom:10px;
}
.yt-item:hover{ border-color: rgba(0,0,0,0.25); }
.yt-item.active{ outline:2px solid rgba(0,0,0,0.35); }

.yt-thumb video{
  width:160px;
  height:90px;
  object-fit:cover;
  border-radius:8px;
  background:#000;
}

.yt-meta{ min-width:0; }
.yt-title{
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  margin-bottom:4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.yt-sub{
  font-size:12px;
  opacity:.8;
  margin-bottom:6px;
}
.yt-snippet{
  font-size:12px;
  opacity:.85;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* Background and post/reply styling for this page */
body{
  background: #0b1220;
}

/* Make the main post area feel like user.php cards */
.yt-post{
  background: #141b28;
  border: 1px solid #cfd6e6;
  border-radius: 10px;
  padding: 12px;
}

/* Reply form */
.yt-add-reply{
  margin-top: 10px;
  padding: 10px;
  background: #343943;
  border: 1px solid #d9e1f0;
  border-radius: 10px;
}
.yt-reply-form textarea{
  width: 100%;
  resize: vertical;
  border: 1px solid #cfd6e6;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
}
.yt-reply-form-actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 8px;
}
.yt-btn{
  border: 1px solid #2b5fd9;
  background: #2b5fd9;
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.yt-btn:hover{ filter: brightness(0.95); }
.yt-login-note{
  font-size: 13px;
  opacity: 0.85;
}