:root{
  --kick-green:#54fc17;
  --kick-green-d:#3fe000;
  --kick-dark:#0b0b0f;
  --kick-text:#111827;
  --kick-muted:#6b7280;
}

/* Compact list container (no boxed cards) */
.comments-container-ytc{
  max-width: 1040px;
  margin: 18px auto 26px;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.kick-msg{
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(17,24,39,0.08);
  align-items: flex-start;
}
.kick-msg:last-child{ border-bottom: 0; }

.kick-msg:hover{
  background: rgba(84,252,23,0.06);
}

.kick-msg-left{
  flex: 0 0 auto;
  width: 144px;
  min-width: 144px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kick-msg-time{
  font-size: 12px;
  color: var(--kick-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kick-msg-room{
  font-size: 11px;
  color: rgba(17,24,39,0.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kick-msg-main{
  flex: 1 1 auto;
  min-width: 0;
}

.kick-msg-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.kick-user{
  font-weight: 700;
  color: var(--kick-text);
  text-decoration: none;
}

.kick-slug{
  font-size: 12px;
  color: rgba(17,24,39,0.6);
}

.kick-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(84,252,23,0.18);
  color: #0b0b0f;
  border: 1px solid rgba(84,252,23,0.42);
}

.kick-type{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(17,24,39,0.06);
  color: rgba(17,24,39,0.68);
  border: 1px solid rgba(17,24,39,0.10);
}

/* Message body: clamp to keep list compact */
.kick-msg-text{
  font-size: 13px;
  line-height: 1.35;
  color: var(--kick-text);
  margin: 0;

  /* clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.kick-msg-text.expanded{
  -webkit-line-clamp: unset;
}

.kick-expand{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(13, 122, 42, 1);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.kick-expand:hover{ text-decoration: underline; }

/* Make left column smaller on phones */
@media (max-width: 640px){
  .kick-msg-left{ width: 92px; min-width: 92px; }
  .kick-msg-room{ display: none; }
}


/* -------------------------
   Kick loading spinner (comments_history)
------------------------- */

.kick-spinner-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.kick-spinner{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: conic-gradient(from 0deg,
    rgba(84,252,23,0.10),
    rgba(84,252,23,1),
    rgba(84,252,23,0.10));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  animation: kick-spin 0.9s linear infinite;
  filter: drop-shadow(0 0 12px rgba(84,252,23,0.18));
}

@keyframes kick-spin {
  to { transform: rotate(360deg); }
}

/* -------------------------
   Chatbox style (comments_history)
   - Apply only when .kick-chatbox is present.
------------------------- */

.comments-container-ytc.kick-chatbox{
  max-width: 920px;
  margin: 18px auto 28px;
  padding: 14px;
  background: #0b0b0f;
  border: 1px solid rgba(84,252,23,0.22);
  border-radius: 16px;
  /* Make it feel like an actual chat box (scroll inside the box) */
  max-height: 70vh;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(84,252,23,0.35) rgba(255,255,255,0.06);
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}

/* Sticky header inside the scrollable chat box */
.comments-container-ytc.kick-chatbox .kickChatboxHeader{
  position: sticky;
  top: -15px;
  z-index: 25;
  background: #0b0b0f;
  padding: 10px 12px;
  margin: -14px -14px 12px -14px; /* stretch over the container padding */
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  user-select: none;
}

.comments-container-ytc.kick-chatbox .kick-chat-msg{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}

.comments-container-ytc.kick-chatbox .kick-chat-msg:hover{
  border-color: rgba(84,252,23,0.20);
  background: rgba(84,252,23,0.06);
}

.comments-container-ytc.kick-chatbox .kick-chat-msg:last-child{ margin-bottom: 0; }

.comments-container-ytc.kick-chatbox .kick-chat-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  font-variant-numeric: tabular-nums;
}

.comments-container-ytc.kick-chatbox .kick-chat-date{
  color: rgba(255,255,255,0.74);
}

.comments-container-ytc.kick-chatbox .kick-chat-channel{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(84,252,23,0.12);
  border: 1px solid rgba(84,252,23,0.28);
  color: rgba(84,252,23,0.95);
  font-weight: 800;
}

.comments-container-ytc.kick-chatbox .kick-chat-user{
  font-weight: 850;
  color: rgba(255,255,255,0.92);
}

.comments-container-ytc.kick-chatbox .kick-chat-slug{
  color: rgba(255,255,255,0.60);
}

.comments-container-ytc.kick-chatbox .kick-chat-badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.01em;
  background: rgba(84,252,23,0.18);
  border: 1px solid rgba(84,252,23,0.42);
  color: #0b0b0f;
}

.comments-container-ytc.kick-chatbox .kick-chat-type{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.74);
}

.comments-container-ytc.kick-chatbox .kick-chat-bubble{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  word-break: break-word;
  white-space: pre-wrap;
}


/* -------------------------
   Twitch-style line chat rendering (Kick user history)
------------------------- */

.comments-container-ytc.kick-chatbox .chatMessage{
  margin: 0;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  word-break: break-word;
}

.comments-container-ytc.kick-chatbox p.chatMessage:nth-of-type(odd){
  background: rgba(255,255,255,0.03);
}

.comments-container-ytc.kick-chatbox .chatMessage:hover{
  background: rgba(84,252,23,0.06);
}

.comments-container-ytc.kick-chatbox .kickChatTimestamp{
  color: rgba(255,255,255,0.62);
  font-variant-numeric: tabular-nums;
}

.comments-container-ytc.kick-chatbox .kickChatChannel{
  color: rgba(84,252,23,0.95);
  font-weight: 850;
}

.comments-container-ytc.kick-chatbox .chat_username{
  color: rgba(255,255,255,0.92);
  font-weight: 850;
  text-decoration: none;
}

.comments-container-ytc.kick-chatbox .chat_username:hover{
  color: rgba(84,252,23,0.95);
  text-decoration: underline;
}

.comments-container-ytc.kick-chatbox .chatMessage__content{
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.comments-container-ytc.kick-chatbox .delim-container{
  display: flex;
  align-items: center;
  margin: 12px 0;
}

.comments-container-ytc.kick-chatbox .delim-line{
  margin-left: 12px;
  margin-right: 12px;
  flex-grow: 1;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.comments-container-ytc.kick-chatbox .delim-date{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 800;
  color: rgba(84,252,23,0.78);
}

@media (max-width: 640px){
  .comments-container-ytc.kick-chatbox{ padding: 12px; }
  .comments-container-ytc.kick-chatbox .kick-chat-msg{ padding: 10px; }
}