/* 1. MATRIX TERMINAL ESASY (BASE) */
.chat { 
    background-color: #000 !important;
    background-image: linear-gradient(rgba(0, 50, 0, 0.15) 50%, rgba(0, 0, 0, 0) 50%), 
                      linear-gradient(90deg, rgba(0, 30, 0, 0.1), rgba(0, 0, 0, 0));
    background-size: 100% 3px, 3px 100%;
    cursor: url("https://cur.cursors-4u.net/computers/com-2/com161.cur"), default;
    color: #00ff41 !important;
    font-family: 'Courier New', monospace;
}

/* KURSORLAR */
a, input[type="button"], input[type="submit"], .chatUserFrom { 
    cursor: url("https://cur.cursors-4u.net/computers/com-2/com161.cur"), default !important; 
}

/* 2. HEADER & LOGO (HACKER SCANLINE) */
.chatHeader { 
    background: #000;
    height: 55px;
    border-bottom: 3px solid #00ff41;
    box-shadow: 0 0 20px #00ff41;
    border-radius: 15px 15px 0 0;
}

.chatHeader .chatTitle {
    float: none;
    text-align: center;
    font-size: 24pt;
    font-weight: 900;
    color: #00ff41;
    text-shadow: 0 0 10px #00ff41, 0 0 30px #003300;
    background: url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNHJueXZueXpueXpueXpueXpueXpueXpueXpueXpueXpueXpueCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/3o7TKMGpxx6676P572/giphy.gif) no-repeat 10px center;
    background-size: 40px;
    animation: blink 5s linear infinite;
}

/* 3. VOÝTI (LOGIN) DÜWMESI - BADBOY STYLE */
#join-chat-button, #join-chat-button2 {
    background: #000 !important;
    color: #00ff41 !important;
    border: 2px solid #00ff41 !important;
    font-family: 'Courier New', bold;
    font-size: 14pt;
    border-radius: 0px 20px 0px 20px;
    box-shadow: 0 0 15px #00ff41;
    transition: 0.5s ease;
    text-shadow: 0 0 5px #00ff41;
    text-transform: uppercase;
}

#join-chat-button:hover {
    background: #00ff41 !important;
    color: #000 !important;
    transform: rotate(360deg) scale(1.1);
    box-shadow: 0 0 40px #00ff41;
}

/* 4. KOMNATALAR (TABS) WE TITREMEME (TADA) */
.chatTabs {
    border-radius: 20px;
    border: 2px solid #00ff41;
    background: rgba(0, 30, 0, 0.5);
    box-shadow: 0 0 10px #00ff41 inset;
}

.chatTabs > ul > li.chatTab.chatTabActive > a, 
.chatTabs > ul > li.chatTab > a:hover {
    background: #00ff41 !important;
    color: #000 !important;
    animation: Tada 0.7s ease infinite;
    box-shadow: 0 0 20px #00ff41;
}

/* 5. HATLAR MEÝDANY (TERMINAL LOGS) */
.chatMessage {
    background: rgba(0, 255, 65, 0.03);
    border-left: 3px solid #00ff41;
    margin: 5px;
    padding: 8px;
    border-bottom: 1px solid rgba(0, 255, 65, 0.1);
}

.chatUserFrom {
    font-family: 'Consolas', monospace;
    font-weight: bold;
    color: #fff !important;
    text-shadow: 0 0 8px #00ff41;
}

/* Hat gelende pulsasiýa effekti */
.chatMessages .chatMessage strong:first-child {
    -webkit-animation: pulsate 4.2s linear infinite;
    animation: pulsate 4.2s linear infinite;
}

/* 6. ULANYJY SANAVY WE AVATARLAR */
.chatUserAvatar {
    border-radius: 5px 15px 5px 15px;
    border: 1px solid #00ff41;
    box-shadow: 0 0 10px #00ff41;
    animation: floating 4s infinite ease-in-out;
}

.chatPeople.vscrollable {
    background-image: url(https://img1.picmix.com/output/stamp/normal/3/6/5/2/1582563_354ea.gif);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 60%;
    border-left: 2px solid #00ff41;
}

/* 7. FOOTER & BADBOY TEXT */
.chatFooter {
    background: #000;
    border-top: 2px solid #00ff41;
    border-radius: 0px 0px 22px 22px;
}

.chatFooter::after {
    content: " SYSTEM_BY: BADBOY_HACKER | ACCESS_GRANTED ";
    display: block;
    text-align: center;
    color: #ff0000;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 5px;
    animation: blinkRed 1.5s infinite;
}

/* 8. ÄHLI ANIMASIÝALAR */
@keyframes Tada {
    0% { transform:scale(1) }
    10%, 20% { transform:scale(0.9) rotate(-2deg) }
    30%, 50%, 70%, 90% { transform:scale(1.1) rotate(2deg) }
    40%, 60%, 80% { transform:scale(1.1) rotate(-2deg) }
    100% { transform:scale(1) rotate(0) }
}

@keyframes pulsate {
    50% { color: #fff; text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41; }
}

@keyframes blinkRed {
    0%, 100% { opacity: 1; text-shadow: 0 0 5px #ff0000; }
    50% { opacity: 0.2; }
}

@keyframes floating {
    0%, 100% { transform: translateY(0%); }
    50% { transform: translateY(8%); }
}

@keyframes blink { 
    0% { color: #00ff41; }
    50% { color: #fff; }
    100% { color: #00ff41; }
}

/* 9. SCROLLBAR SAZLAMALARY */
.vscrollable::-webkit-scrollbar {
    width: 2px;
}
.vscrollable::-webkit-scrollbar-thumb {
    background-color: #00ff41;
    box-shadow: 0 0 10px #00ff41;
}

/* INPUT PANEL */
.chatInputText {
    background: #000 !important;
    border: 1px solid #00ff41 !important;
    color: #00ff41 !important;
    border-radius: 10px;
    padding: 5px;
}

.chatSendButton {
    background: #00ff41 !important;
    color: #000 !important;
    font-weight: bold;
    border-radius: 0px 10px 0px 10px;
    transition: 0.3s ease;
}
.chatSendButton:hover {
    transform: skew(-10deg);
    box-shadow: 0 0 20px #00ff41;
}