/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* --- 90s RESET & FONTS --- */
* {
    box-sizing: border-box;
    font-family: "MS Sans Serif", "Arial", sans-serif;
    font-size: 12px;
    image-rendering: pixelated;
}

body {
    background-color: #008080; /* Classic Win95 Teal */
    background-image: url('https://transparenttextures.com'); /* Nostalgic pattern texture */
    margin: 0;
    padding: 20px;
    color: #000;
}

/* --- WIN95 ENGINE (3D BORDERS) --- */
.window {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #0a0a0a #0a0a0a #fff;
    box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
    padding: 3px;
    margin-bottom: 15px;
}

.title-bar {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff;
    padding: 3px 6px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-bar-text {
    display: flex;
    align-items: center;
    gap: 5px;
}

.title-bar-controls button {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #0a0a0a #0a0a0a #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 4px;
    cursor: pointer;
}

.window-body {
    padding: 10px;
}

/* --- LAYOUT GRID --- */
.desktop-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .desktop-layout {
        grid-template-columns: 1fr;
    }
}

/* --- MESSAGING INTERFACE --- */
.chat-box {
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    height: 300px;
    overflow-y: scroll;
    padding: 10px;
    margin-bottom: 10px;
}

.chat-message {
    margin-bottom: 8px;
    line-height: 1.4;
}

.username {
    font-weight: bold;
}

.user-me { color: #0000ff; }
/* AIM Red styling */
.user-buddy { color: #ff0000; } 
.user-system { color: #ff00ff; font-style: italic; }

/* --- TEXT INPUT AREA --- */
.input-zone textarea {
    width: 100%;
    height: 60px;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 5px;
    resize: none;
    font-family: monospace;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 5px;
}

.btn-retro {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #0a0a0a #0a0a0a #fff;
    padding: 4px 12px;
    cursor: pointer;
}

.btn-retro:active {
    border-color: #0a0a0a #fff #fff #0a0a0a;
    padding: 5px 11px 3px 13px;
}

/* --- BUDDY LIST --- */
.buddy-group {
    font-weight: bold;
    margin: 8px 0 4px 0;
    text-decoration: underline;
}

.buddy-list-items {
    list-style: none;
    padding-left: 10px;
    margin: 0;
}

.buddy-item {
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.online { background: #00ff00; border: 1px solid #000; }
.idle { background: #ffff00; border: 1px solid #000; }

/* --- RETRO ACCENTS --- */
marquee {
    background: #000;
    color: #00ff00;
    font-family: monospace;
    padding: 4px;
    margin-bottom: 15px;
    font-size: 14px;
}

.blink {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0; }
}

a {
    color: #0000ff;
    font-weight: bold;
}
a:visited {
    color: #800080;
}