/* ===== Global Layout ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #121212;
  color: #ffffff;
  font-family: Arial, sans-serif;
}

#pageContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100vh;
  gap: 10px;
  overflow: hidden; /* popups are fixed-position to escape this */
}

/* ===== Chat Container ===== */
#chatContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 2px solid rgb(0, 8, 255);
  border-radius: 5px;
  overflow: hidden;
  min-width: 0;
}

#chat {
  flex: 1;
  background: #1e1e1e;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
  padding-bottom: 25px; /* was 10px ? adds ~15px extra space */
}

/* ===== Messages ===== */
.message {
  margin: 5px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #444;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.message:last-child { border-bottom: none; }

.system {
  color: #cccccc;
  font-style: italic;
  font-size: 0.95em;
  opacity: 0.9;
}
.timestamp { color: #999999; font-size: 11px; font-style: italic; margin-left: 6px; }

.username-self { color: #4da6ff; }
.username-other { color: #32CD32; }
.admin-user { color: #FFD700; }
.moderator-user { color: #FF4500; }

.deleted-message { color: #999; font-style: italic; }

/* ===== Message Structure ===== */
.msg-wrapper {
  padding: 6px 10px;
  margin-bottom: 6px;
  background: #1e1e1e;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Header always shows avatar + username on one line */
.msg-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px 0;
  vertical-align: middle;
}

/* Avatar */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #333;
  border: 1px solid #666;
}
.avatar.fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; color: gold; font-size: 14px; background: #444;
}

/* Quoted reply inside a message */
.reply-message {
  background: rgba(255,255,255,0.05);
  border-left: 2px solid #888;
  padding: 4px;
  font-style: italic;
  margin: 4px 0 3px;
  border-radius: 5px;
}

/* ===== Text message line (one line: name + text + actions) ===== */
.is-text .msg-content {
  display: inline;          /* continues on same line after username */
  margin-left: 8px;         /* small space between name and text */
  vertical-align: middle;
  color: #fff;
}

.msg-actions {
  display: inline-flex;
  gap: 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.reply-btn,
.delete-btn {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
}
.reply-btn:hover, .delete-btn:hover { color: #fff; }

/* ===== GIF message layout (two lines) ===== */
/* Line 1: header (avatar + username) ? already handled by .msg-header above */
/* Line 2: GIF + actions, flush-left (NO indent) */
.is-gif .gif-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;           /* critical: remove old indent/tab */
}

.chat-gif {
  display: inline-block;
  max-width: min(320px, 100%);
  height: auto;
  border-radius: 4px;
  vertical-align: middle;
}

/* ===== Input Area ===== */
#inputRow {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border-top: 1px solid #333;
  background: #121212;
  margin-top: 15px; /* adds space between chat and input */
}

#messageInputRow {
  display: flex;
  gap: 5px;
  align-items: center;
}

#messageInput {
  flex: 1;
  padding: 5px;
  font-size: 16px;
  background: #4a4a4a;
  color: #fff;
  border: 1px solid #666;
  border-radius: 6px;
  height: 36px;
  box-sizing: border-box;
}
#messageInput::placeholder { color: #dddddd; }

#emojiButton,
#sendButton {
  flex: 0 0 auto;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Button Row ===== */
#buttonRow {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 0;
}
.button-group-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Buttons */
button {
  padding: 5px 10px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  background: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 5px;
  height: 32px;
  box-sizing: border-box;
  white-space: nowrap;
  flex: 0 0 auto;
}
button:hover { background: #444; }

#emojiButton i { color: #FFD700; font-size: 18px; }
#emojiButton:hover i { color: #ffcc33; }

#usersButton,
#accountButton,
#moderateButton { background: #333; }
#usersButton:hover,
#accountButton:hover { background: #444; }

#moderateButton {
  background: #ff6600;
  border: 1px solid #cc5200;
}
#moderateButton:hover { background: #ff8533; }

/* Quick highlight buttons */
.help {
  background-color: #32CD32;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(50,205,50,0.5);
}
.help:hover { background-color: #28a428; }

#clearChatButton {
  background-color: #ff3333;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(255,0,0,0.5);
}
#clearChatButton:hover { background-color: #cc0000; }

#usersButton {
  background-color: #4da6ff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(77,166,255,0.5);
}
#usersButton:hover { background-color: #1a8cff; }

#logoutButton {
  background-color: #b266ff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(178,102,255,0.5);
}
#logoutButton:hover { background-color: #9933ff; }

#accountButton {
  background-color: gold;
  color: black;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-weight: bold;
  box-shadow: 0 0 5px rgba(255,215,0,0.5);
}
#accountButton:hover { background-color: #e6c200; }

/* ===== Reply Preview (composer) ===== */
.reply-preview {
  background: #2a2a2a;
  color: #ccc;
  font-style: italic;
  padding: 5px;
  border-left: 3px solid #888;
  margin-bottom: 5px;
  display: none;           /* toggled by chat.js */
  align-items: center;
  gap: 8px;
  border-radius: 5px;
}
.reply-preview img { max-height: 30px; }
.cancel-reply-btn {
  background: none;
  border: none;
  color: red;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
}
.cancel-reply-btn:hover { color: #ff4d4d; }

/* ===== Modals ===== */
.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 12000;
}
.modalContent {
  background: #1e1e1e;
  padding: 20px;
  border: 2px solid #555;
  border-radius: 5px;
  text-align: center;
}

/* Users Modal overrides */
#usersModal { z-index: 12000; }
#usersModal .modalContent {
  background-color: #1e1e2f;
  color: white;
  padding: 15px;
  border-radius: 6px;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#usersListModal { list-style: none; padding: 0; margin: 10px 0; }
#usersListModal li {
  padding: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
#closeUsersModal {
  background-color: crimson;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
#closeUsersModal:hover { background-color: darkred; }

#notLoggedInOverlay .modalContent {
  background: rgba(20,20,20,0.95);
  border: 2px solid #ff5555;
}

/* Confirm modal buttons */
.confirm-btn {
  background: green; color: white; font-weight: bold;
  border: none; padding: 8px 14px; border-radius: 5px; cursor: pointer;
}
.confirm-btn:hover { background: #00b300; }
.cancel-btn {
  background: red; color: white; font-weight: bold;
  border: none; padding: 8px 14px; border-radius: 5px; cursor: pointer;
}
.cancel-btn:hover { background: darkred; }

/* Login error box */
#loginErrorBox {
  background: #2a2a2a;
  border: 1px solid red;
  color: red;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}

/* ===== Popups (Emoji & GIF) ===== */
.popup-container,
#emojiPopup,
#gifPopup {
  position: fixed;
  left: 50%;
  bottom: 180px; /* was 200px */
  transform: translateX(-50%);
  width: 400px;
  max-width: 95vw;
  max-height: 500px;
  background: #1e1e1e;
  border: 2px solid #555;
  border-radius: 8px;
  overflow: hidden;
  display: none;          /* toggled to flex by JS */
  flex-direction: column;
  z-index: 11900;         /* below modals, above chat */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.popup-container[style*="display: flex"],
#emojiPopup[style*="display: flex"],
#gifPopup[style*="display: flex"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #222;
  padding: 5px 10px;
  border-bottom: 1px solid #333;
}
.popup-close {
  background: none;
  border: none;
  color: #ff5555;
  font-size: 18px;
  cursor: pointer;
}
.popup-close:hover { color: #ff7777; }

#emojiPicker,
#gifResults {
  max-height: 380px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 5px;
}

#gifResults {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-start;
  align-items: flex-start;
}
#gifResults img {
  width: 180px;
  height: auto;      /* <-- Let the height scale automatically */
  object-fit: cover; /* Optional: You can remove this if you want the full image aspect ratio without cropping */
  border-radius: 4px;
  cursor: pointer;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .popup-container, #emojiPopup, #gifPopup {
    width: 95%;
    bottom: 160px;
    max-height: calc(50vh - 40px);
  }
  #emojiPicker, #gifResults {
    max-height: calc(50vh - 50px);
  }
}
@media (max-width: 768px) and (orientation: landscape) {
  .popup-container, #emojiPopup, #gifPopup {
    width: 80%;
    max-height: calc(40vh - 30px);
  }
  #emojiPicker, #gifResults {
    max-height: calc(40vh - 40px);
  }
}

/* Inputs default size tweaks */
input, textarea {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
}

/* Auth links */
#showLogin, #showRegister { color: gold !important; text-decoration: underline; }
#showLogin:hover, #showRegister:hover { color: #ffcc33 !important; }

#alertModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}

#alertModal .modal-content {
  background: #2a2a2a;
  color: white;
  padding: 20px;
  border-radius: 6px;
  max-width: 300px;
  margin: 15% auto;
  text-align: center;
}

#alertModal .btn {
  margin-top: 15px;
  padding: 8px 16px;
  background: #4CAF50;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
#alertModal .btn:hover {
  background: #45a049;
}

/* Avatar Upload Styling */
.file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.file-upload input[type="file"] {
  background: #4a4a4a;
  border: 1px solid #666;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 14px;
  color: white !important; /* forces filename color */
}

/* WebKit-specific text color */
.file-upload input[type="file"]::-webkit-file-upload-text {
  color: white;
}

.file-upload input[type="file"]::-webkit-file-upload-button {
  color: black;
  background: gold;
  border: 1px solid #e6c200;
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: bold;
}

.file-upload input[type="file"]::-webkit-file-upload-button:hover {
  background: #e6c200;
}
#siteHeader {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 8px 12px;
  background-color: #00003F; /* dark blue like your theme */
  color: white;
  border-bottom: 2px solid #444;
}

.site-logo {
  height: 40px;
  width: auto;
}

.site-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#pageContainer {
  flex: 1; /* fill remaining space below header */
  height: auto; /* remove fixed vh */
}
.reply-message {
  background: rgba(0, 64, 128, 0.3); /* dark blue tint */
  border-left: 3px solid #4da6ff;     /* brighter blue border */
  padding: 6px;
  margin: 4px 0 3px;
  border-radius: 5px;
}

.reply-message .reply-meta {
  color: #808080;        /* change the text color */
  font-style: normal;    /* make it normal instead of italic */
  font-weight: bold;
  margin-bottom: 4px;    /* spacing above the quoted content */
}

.reply-message .reply-quoted {
  color: #ccc;           /* quoted text color */
  font-style: italic;
}