#shoutbox .window {

/* background: #141414; */

border-bottom: 1px solid rgba(255, 255, 255, 0.08);

overflow-y: auto;

scrollbar-width: thin;

scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}/* Wrapper panel styling (optional) */
.panel {
  background-color: #0a0a0d; /* Dark panel background */
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #2f2f2f;
  width: 100%;
  box-sizing: border-box;
}

/* Remove default form margin/padding if needed */
.panel form {
  margin: 0;
  padding: 0;
}

/* Text input styling */
.panel .text {
  width: 100%;
  /* font-family: "Inter", sans-serif; */
  padding: 10px 12px;
  font-size: 14px;
  /* font-family: sans-serif; */
  background-color: #101117; /* Dark input background */
  color: #ccc;              /* Text color */
  border: 1px solid #2f2f2f;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
}

/* Placeholder styling */
.panel .text::placeholder {
  color: #666;  /* Gray placeholder text */
}

/* Optional focus style (slightly lighter border) */
.panel .text:focus {
  border-color: #555;
}
/* Overall container for each chat entry */
.entry {
  display: flex;
  align-items: center;      /* Vertically centers the info section */
  padding: 8px 12px;
  /* margin: 8px 0; */
  background-color: #0b0c10;  /* Dark background */
  border-radius: 6px;
  border: 1px solid #0F181F;
  color: #ddd;
  font-family: sans-serif;
  position: relative;
}

/* Avatar styling */
.avatarxf {
  margin-right: 16px;
}
.avatarxf img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* Content wrapper (username, date, message) */
.content {
  flex: 1; /* Takes up remaining space */
}

/* Username and date on the same line */
.user {
  display: flex;
  align-items: center;
  gap: 10px;             /* Space between username and date */
  margin-bottom: 4px;
  font-weight: 600;
  color: #fff;
}
.user .username {
  font-weight: bold;
  font-size: ]7px;]7px;]7p;]7;];
  /* font-size: 13px; */
}
.user .date {
  /* font-size: 0.9em; */
  /* color: #aaa; */
  font-size: 12px;
  line-height: 16px;
  border: none;
  /* text-decoration: none; */
  Color          #414854Font           12px Inter, font-family: sans-serif;
  color: #414854;
  font-family: "Inter", sans-serif;
  font-size: 13.125px;
}

/* Message text */
.text {
  color: #ddd;
  line-height: 1.4;
  /* width: 98.13px; */
  /* height: 15.5px; */

  /* Text styling */
  color: #6D7582;
  font-family: "Inter", sans-serif;
  font-size: 13.125px;
}

/* Info (edit/delete links) positioned on the right and vertically centered */
.info {
  /* display: none; */
  /* margin-left: auto; */      /* Pushes the info block to the far right */
  display: flex;
  /* gap: 8px; */
  /* align-items: center; */      /* Vertically centers the links */
}
.info .mod {
  /* text-decoration: none; */
  /* color: #ff8800; */
  /* font-weight: bold; */
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
  transition: all 0.2s ease;
}
.info .mod:hover {
  color: #4ade80c9;
}

/* Highlight for own messages (if needed) */
.entry[data-own="true"] {
  /* border-color: #4a90e2; */
}
.usericon {width: 15px;
    vertical-align: -3px;
    height: auto;
	margin-left: 2px;}
#threadchat .window {

/* background: #141414; */

border-bottom: 1px solid rgba(255, 255, 255, 0.08);

overflow-y: auto;

scrollbar-width: thin;

scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
/* Container styling */
.chat-channels {
  display: flex;
  align-items: center;
  gap: 12px;               /* Space between list items */
  /* background-color: #1a1a1a; */
  padding: 10px 20px;
  border-radius: 30px;     /* Large rounding for the container */
  list-style: none;
  margin: 0;
}

/* Remove default list spacing */
.chat-channels li {
  margin: 0;
  padding: 0;
}

/* Button base styles */
.section-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #eaecf2;            /* Default text/icon color */
  background: #15161c;    /* Dark background for the button */
  border: 1px solid #17181f;
  border-radius: 24px;    /* Rounded corners */
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: 
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

/* Hover effect for all buttons */


/* Active (selected) button style */
.section-button.active {
  /* color: #00ff99; */         /* Neon green text color */
  /* border-color: #00ff99; */  /* Match the neon green for the border */
  /* box-shadow: 0 0 10px #00ff99; */ /* Glow effect */
  /* background: #121212; */    /* Slightly darker background when active */
  color: #eaecf2;
  background: linear-gradient(to top, rgba(22, 243, 143, 0.11), rgba(22, 243, 143, 0));
  border-bottom: 2px solid var(--kz-primary-color-hex);
}

/* SVG icon inherits button text color */
.section-button svg {
  fill: currentColor;
  transition: fill 0.3s ease;
}