:root {
	--bg:                    #ffffff;
	--avatar-size:           40px;
	--indent:                48px;
	--font:                  'Roboto', sans-serif;
	--text-primary:          #0f0f0f;
	--text-secondary:        #606060;
	--link-blue:             #065fd4;
	--comment-stylistic-bar: #7e7e7e;
  
	/* clamp settings */
	--lines:           3;
	--line-height:     1.4em;
  }
  
  /* ── Thread grid ── */
  .comments-container-ytc {
	/* Switch from grid to columns: */
	column-count: 2;
	column-gap: 14px;
	max-width: 1000px;
	margin: 24px auto;
	background: none;
	backdrop-filter: none;
	/* no grid-template-columns or gap here */
  }
  .comment-thread-ytc {
	/* inline-block so each item stays separate in the column flow */
	display: inline-block;
	width: 100%;
	margin-bottom: 11px; /* some spacing at bottom so they don’t stick */
  }
  @media (max-width: 600px) {
	.comments-container-ytc {
	  grid-template-columns: 1fr;
	  gap:                   16px;
	  padding:               0 12px;
	}
  }
  
  /* ── Card ── */
  .comment-ytc {
	position:        relative;
	display:         flex;
	background:      var(--bg);
	padding:         12px 16px;
	border-radius:   8px;
	box-shadow:      0 1px 2px rgba(0,0,0,0.05);
	align-items:     flex-start;
	margin-bottom:   8px;
  
	/* reserve the 4px for the stylistic bar */
	box-sizing:      border-box;
	border-left:     4px solid transparent;
  
	/* smooth both the shadow and the bar color */
	transition:      box-shadow 0.3s ease,
					 border-color 0.3s ease;
  }
  .comment-ytc:hover {
	/* only change the color of that reserved border */
	border-left-color: var(--link-blue);
  
	/* deepen the shadow */
	box-shadow:
	  0 4px 8px rgba(0,0,0,0.06),
	  0 8px 16px rgba(0,0,0,0.08);
  }
  .comment-ytc.reply-ytc {
	margin-left: var(--indent);
  }
  
  /* ── Avatar ── */
  .avatar-ytc {
	width:            var(--avatar-size);
	height:           var(--avatar-size);
	border-radius:    50%;
	background-size:  cover;
	background-position: center;
	flex-shrink:      0;
	margin-right:     12px;
  }
  
  /* ── Main content ── */
  .content-ytc {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	min-width:       0; /* allow shrinking below content width */
  }
  
  /* ── Meta line ── */
  .meta-ytc {
	display:        flex;
	align-items:    center;
	gap:            8px;
	margin-bottom:  4px;
  }

  /* Likes on a comment */
  .likes-ytc{
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .likes-ytc svg{ width: 16px; height: 16px; fill: rgb(249, 24, 128); }
  .username-ytc {
	font-weight:    500;
	font-size:      14px;
	color:          var(--text-primary);
	text-decoration:none;
  }
  .time-ytc {
	font-size:      12px;
	color:          var(--text-secondary);
	transition:     color 0.2s ease;
  }
  .time-ytc:hover {
	color:          var(--link-blue);
	text-decoration: underline;
  }
  
  /* ── Text body with clamp & fade ── */
  .text-ytc {
	font-size:      14px;
	color:          var(--text-primary);
	line-height:    var(--line-height);
	margin-bottom:  6px;
  
	/* clamp to N lines */
	max-height:    calc(var(--line-height) * var(--lines));
	overflow:       hidden;
	position:      relative;
  
	/* break huge words so they don’t overflow */
	overflow-wrap:  break-word;
	word-break:     break-word;
	min-width:      0;
	transition:     max-height 0.4s ease;
  }
  .text-ytc.clamped::after {
	content:        "";
	position:       absolute;
	left:           0;
	right:          0;
	bottom:         0;
	height:         var(--line-height);
	background:     linear-gradient(transparent, var(--bg));
	pointer-events: none;
	transition:     opacity 0.4s ease;
  }
  /* when expanded, remove clamp & fade */
  .text-ytc.expanded {
	max-height:    none;
  }
  .text-ytc.expanded::after {
	opacity:       0;
  }
  
  /* ── “View more / View less” toggle ── */
  .view-more-ytc {
	display:         inline-block;
	align-self: 	center;
	margin-top:      4px;
	font-size:       12px;
	color:           var(--link-blue);
	background:      none;
	border:          none;
	padding:         4px 0;
	cursor:          pointer;
	transition:      color 0.2s ease;
	z-index:         1; /* above fade gradient */
  }
  .view-more-ytc:hover {
	text-decoration: underline;
  }
  
  /* ── Toggle replies button ── */
  .view-replies-ytc {
	display:        inline-flex;
	align-items:    center;
	gap:            4px;
	font:           500 12px var(--font);
	color:          var(--link-blue);
	background:     none;
	border:         none;
	padding:        0;
	cursor:         pointer;
	outline:        none;
  }
  .view-replies-ytc:hover {
	text-decoration: underline;
  }
  .view-replies-ytc .icon-ytc {
	width:         18px;
	height:        18px;
	transition:    transform .2s ease;
  }
  .view-replies-ytc.open-ytc .icon-ytc {
	transform:     rotate(180deg);
  }
  
  /* ── Replies container ── */
  .replies-ytc {
	display: none;
  }
  .replies-ytc.open-ytc {
	display: block;
  }
  
  /* ── YouTube go-to button ── */
  .goto-ytc {
	position:       absolute;
	top:            8px;
	right:          8px;
	width:          24px;
	height:         24px;
	display:        inline-flex;
	align-items:    center;
	justify-content:center;
	color:          var(--text-secondary);
	text-decoration:none;
	transition:     color 0.2s ease;
  }
  .goto-ytc:hover {
	color: var(--link-blue);
  }
  .goto-ytc svg {
	width: 100%;
	height:100%;
	fill: currentColor;
	transition: filter 0.3s ease;
  }
  .goto-ytc svg:hover {
	filter: grayscale(0.08);
  }
  
  /* ── Video title (parents only) ── */
  .video-title-ytc {
	font-size:      12px;
	color:          var(--text-secondary);
	text-align:     right;
	margin-top:     8px;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
	font-style:     italic;
  }
  .video-title-ytc:hover {
	cursor:         help;
  }

  /* ── channel title (parents only) ── */
  .channel-title-ytc {
	font-size:      12px;
	color:          var(--text-secondary);
	text-align:     right;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
	font-style:     italic;
  }
  .channel-title-ytc:hover {
	cursor:         help;
  }
  
  /* ── Small screens ── */
  @media (max-width: 400px) {
	.comment-ytc {
	  padding: 8px 12px;
	}
  }
  
/* Remove focus outlines and shadows from “View more” and “Replies” buttons */
.view-more-ytc,
.view-replies-ytc {
  outline: none !important;
  box-shadow: none !important;
}

.view-more-ytc:focus,
.view-more-ytc:active,
.view-replies-ytc:focus,
.view-replies-ytc:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Firefox inner focus */
.view-more-ytc::-moz-focus-inner,
.view-replies-ytc::-moz-focus-inner {
  border: none !important;
}

.comment-thread-ytc button:focus {
	outline: none!important
}

.reply-indicator-ytc {
    display: inline-block;
    padding: 3px 8px;
    max-width: fit-content;
    margin-top: 6px;
    cursor: help;
    margin-left: 6px;
    border-radius: 4px;
    background-color: #dddbff;
    color: #760c88;
    font-size: 0.85rem;
    font-weight: 500;
    user-select: none;
}

/* -------------------------------------------------
   Keyword-search style ID line (reused in comments_history)
   Example: "Video ID: <code>123...</code> • Video Category: <code>Beauty</code>"
-------------------------------------------------- */
.tt-ks-idline{
  margin-top: 2px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: rgba(15,23,42,0.60);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tt-ks-idpair code{
  font-size: 11.5px;
}
.tt-ks-sep{
  opacity: 0.55;
}

@media (max-width: 600px) {
	.comments-container-ytc {
	  column-count: 1;  /* override the 2-column setting */
	  column-gap: 0;    /* remove extra gap for a single column */
	  padding: 0 12px;  /* keep some horizontal padding if you like */
	}
  }