* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: #000; color: #fff; font-family: Arial, Tahoma, Helvetica, sans-serif; font-size: 10pt; overflow: hidden; }

/* ============ Login Screen ============ */
#login-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 5px; }
#login-border { background-image: url(../img/back.gif); border: 1px solid #000; background-position: center; background-repeat: no-repeat; }
.form-label { font-family: Arial, Tahoma, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; text-align: right; color: #000; padding: 4px; }
.form-input { width: 130px; font-size: 9pt; color: #000; background: #fff; border: 1px solid #999; padding: 2px 4px; }
#login-screen button { background: #003663; color: #ffcc66; border: 1px solid #ffcc66; padding: 4px 20px; cursor: pointer; font-family: Arial, Tahoma, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; }
#login-screen button:hover { background: #004a8a; }
#login-error { color: #ff4444; margin-top: 6px; font-size: 9pt; text-align: center; }
.login-footer-bar { background-color: blue; }
.login-footer-bar td { color: #fff; }
.login-footer-text { font-family: Arial, Tahoma, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; text-align: center; color: #888; }
.login-footer-text a { color: #ffcc66; text-decoration: none; }

/* ============ Chat Screen ============ */
#chat-screen { display: none; width: 100%; height: 100%; }
#chat-header-left, #chat-header-right { background: #084079; padding: 4px 8px; border-bottom: 1px solid #005599; font-size: 10pt; }

#chat-body { display: flex; width: 100%; height: 100%; overflow: hidden; }

/* Message area - styled like PJIRC Silver colorset */
#chat-messages { flex: 1; overflow-y: auto; padding: 4px 6px; background: #DEE3E7; color: #000; font-family: SansSerif, Arial, sans-serif; font-size: 11px; line-height: 1.5; border: 1px inset #999; }
#chat-messages::-webkit-scrollbar { width: 10px; }
#chat-messages::-webkit-scrollbar-track { background: #DEE3E7; }
#chat-messages::-webkit-scrollbar-thumb { background: #999; border: 1px solid #666; }

.msg-line { padding: 0; word-wrap: break-word; }
.msg-time { color: #666; }
.msg-nick { color: #000080; font-weight: bold; }
.msg-text { color: #000; }
.msg-action { color: #800080; font-style: italic; }
.msg-join { color: #006600; }
.msg-part { color: #666; }
.msg-nick-change { color: #FFA34F; font-style: italic; }
.msg-system { color: #FFA34F; font-weight: bold; }

/* User list - styled like PJIRC nick list */
#chat-users { width: 140px; background: #D1D7DC; overflow-y: auto; padding: 0; border: 1px inset #999; border-left: 0; }
#chat-users .user-header { font-weight: bold; font-size: 9px; text-transform: uppercase; padding: 3px 6px; background: #084079; color: #fff; }
#chat-users .user-name { color: #000; padding: 1px 6px; font-size: 11px; font-family: SansSerif, Arial, sans-serif; }

/* Smiley toolbar - matches PJIRC colorset bar */
#smiley-bar-row { background: #E5E5E5; border-top: 1px solid #999; }
#smiley-bar { padding: 3px 8px; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
#smiley-bar img { cursor: pointer; height: 18px; vertical-align: middle; }
#smiley-bar img:hover { background: #ccc; }

/* Input area */
#chat-input-area { background: #084079; padding: 4px 6px; display: flex; gap: 4px; align-items: center; }
#chat-input { flex: 1; background: #fff; color: #000; border: 1px solid #555; padding: 4px 6px; font-family: SansSerif, Arial, sans-serif; font-size: 11px; outline: none; }
#chat-input:focus { border-color: #FFA34F; }
#chat-send { background: #D1D7DC; color: #000; border: 1px outset #DEE3E7; padding: 4px 12px; cursor: pointer; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; }
#chat-send:hover { background: #E5E5E5; }

/* Footer */
#chat-footer { background: #000; color: #888; font-size: 9px; border-top: 1px solid #333; }
#chat-footer a { color: #ffcc66; text-decoration: none; }
#chat-footer font { color: #888; }

/* Smiley in messages */
img.smiley { vertical-align: middle; height: 18px; margin: 0 1px; }