body {
    background-color: #f8f9fa;
}

.hero {
    padding: 6rem 1rem;
    background: linear-gradient(135deg, #1e90ff, #007bff);
    color: white;
    max-height: 300px;
}

a { color: inherit;
    text-decoration:none;

}

/* --- Nerret Modern Forum Theme --- */

/* 1. The Container */
.livechat-widget {
    background-color: #0d0d0d !important; /* Deep dark grey, almost black */
    border: 1px solid #333 !important;
}

/* 2. The Thread Structure (Reddit Style) */
.comment-item {
    /* No padding here, handled by margin in JS */
    position: relative;
}

/* 3. The "Post Box" (MMO-Champion Style) */
.forum-post {
    background-color: #161616;
    border: 2px solid #2d2d2d; /* Increased from 1px to 2px */
    border-radius: 4px;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}

.forum-post:hover {
    border-color: #444;
}

.load-more-replies-btn {
    background-color: #0d0d0d;
    border: 1px dashed #444;
    color: #888;
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    font-size: 0.8rem;
    text-transform: uppercase;
    cursor: pointer;
}

.load-more-replies-btn:hover {
    border-color: #0d6efd;
    color: #0d6efd;
}

/* 4. The Header (User Info) */
.forum-header {
    background-color: #1f1f1f;
    padding: 6px 10px;
    border-bottom: 1px solid #2d2d2d;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 5. The Body (Message) */
.forum-body {
    padding: 10px;
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 6. The "Thread Line" (The vertical line connecting replies) */
.thread-line {
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #333;
}
/* Only show line if it is a child */
.comment-item .comment-item .thread-line {
    display: block;
}

/* 7. Highlight "My" Posts */
.forum-post.is-mine {
    border-color: #0d6efd40; /* Subtle blue border */
}
.forum-post.is-mine .forum-header {
    background-color: #0d6efd1a; /* Very subtle blue tint in header */
}

/* --- Nerret Brutalist Chat Theme --- */

/* 1. The Main Widget Container */
.livechat-widget {
    background-color: #000 !important; /* Pitch black */
    border: 2px solid #333 !important; /* Hard border */
    border-radius: 0 !important;       /* KILL the rounded corners */
    font-family: 'Courier New', Courier, monospace; /* Terminal vibe */
}

/* 2. The Chat History Window */
.comment-list {
    background-color: #0a0a0a !important;
    border: 1px solid #333 !important;
    border-radius: 0 !important;
    /* Custom Scrollbar for Webkit */
    scrollbar-width: thin;
    scrollbar-color: #444 #000;
}



/* 5. Inputs and Forms */
.livechat-widget input[type="text"] {
    background-color: #000 !important;
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: inherit;
}

.livechat-widget input[type="password"] { /* Added password type */
    background-color: #000 !important;
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: inherit;
}

.livechat-widget input[type="text"]:focus {
    border-color: #0d6efd !important;
    outline: none;
    box-shadow: none !important; /* Remove the blue glow */
}

/* 6. Buttons */
.livechat-widget button {
    border-radius: 0 !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 7. The "Live Status" Badge (from chat.php) */
#live-status .rounded-xl,
#live-status .rounded-full {
    border-radius: 0 !important; /* Square connection dots */
}

/* --- New Forum Features --- */

/* 1. The "Replying to @User" indicator */
.reply-context {
    font-size: 0.8em;
    color: #6c757d; /* Muted grey */
    margin-left: 8px;
    font-style: italic;
}
.reply-context::before {
    content: "↳ "; /* Small arrow icon */
    opacity: 0.5;
}

/* 2. The "Load More Replies" Button */
.load-more-replies-btn {
    background-color: #111;
    border: 1px dashed #333;
    color: #888;
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 0.85rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.load-more-replies-btn:hover {
    background-color: #222;
    color: #0d6efd; /* Blue glow on hover */
    border-color: #0d6efd;
}

/* --- Fixes for Contrast & Layout --- */

/* 1. Fix the "Black on Black" text */
/* This forces all "muted" text inside the widget to be light grey */
.livechat-widget .text-muted,
.livechat-widget .reply-context {
    color: #888 !important;
}

/* 2. Sticky Bottom Input Bar */
.comment-form {
    position: fixed;        /* Stick to viewport */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #0d0d0d; /* Match the dark theme */
    border-top: 1px solid #333;
    padding: 15px 20px;     /* More breathing room */
    z-index: 9999;          /* Ensure it sits on top of everything */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.8); /* Strong shadow to separate it */
}

/* 3. Add padding to the widget so the last comment isn't hidden behind the bar */
.livechat-widget {
    padding-bottom: 80px !important;
}

/* 4. Tweak the input fields to look good in the full-width bar */
.comment-form input {
    height: 40px; /* Taller inputs for easier clicking */
}

/* --- Live Status Badge Overrides --- */

/* The container for the badge */
#live-status div {
    border-radius: 0 !important; /* Square corners */
    border: 0px solid #333 !important;
    background-color: #000 !important;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* WHEN LIVE: The Green Badge */
#live-status .text-emerald-300,
#live-status .text-emerald-300\/80 {
    color: black !important; /* Hacker Green */
    text-shadow: 0 0 5px #0f0; /* Glowing text */
}

#live-status .border-emerald-400\/60 {
    border-color: transparent !important;
}

/* The pulsing dot */
#live-status .bg-emerald-400 {
    background-color: #0f0 !important;
    border-radius: 0 !important; /* Square dot */
    box-shadow: 0 0 5px #0f0;
}

/* WHEN OFFLINE: The Grey Badge */
#live-status .bg-zinc-900 {
    background-color: transparent !important;
}
#live-status .text-zinc-300,
#live-status .text-zinc-500 {
    color: black !important;
    font-weight: bold;
}

#live-status{
    color: black !important;
}

#livestatusfixer h1{
   color: black !important;
}

filter: invert(1) grayscale(1);

/* --- Fix Auth & Input Visibility --- */

/* 1. Force the text YOU type to be white */
.livechat-widget input.form-control {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 0 !important;
}

/* 2. Force the PLACEHOLDER text to be visible grey */
.livechat-widget input.form-control::placeholder {
    color: #888 !important; /* Visible Grey */
    opacity: 1 !important;  /* Force visibility on Firefox */
    font-style: italic;
}

/* 3. Ensure the Auth Bar inputs line up nicely */
.auth-bar form {
    display: flex;
    gap: 5px;
}