/*!
 * Zoite
 *
 * Matches https://zoite.net styling (light).
 * License: MIT
 */

@import url('https://fonts.googleapis.com/css2?family=Noticia+Text:wght@700&display=swap');

/* Global typography */
* {
  font-family: 'Noticia Text', serif;
}

/* The Lounge theme variables */
:root {
  --body-bg-color: #eee;
  --window-bg-color: #fff;
  --body-color: #333;
  --body-color-muted: #555;

  --link-color: #234562;
  --unread-marker-color: #133552;
  --date-marker-color: #133552;

  --highlight-bg-color: #f5f5f5;
  --highlight-border-color: #d1d5db;
  --background-light-color: #f5f5f5;

  --overlay-bg-color: rgba(0, 0, 0, 0.2);
}

html {
  scrollbar-color: #133552 #f5f5f5;
  scrollbar-width: thin;
}

::-webkit-scrollbar-thumb:vertical {
  background: #133552;
}
::-webkit-scrollbar-thumb:vertical:hover {
  background: #0f2e49;
}
::-webkit-scrollbar-thumb:vertical:active {
  background: #0f2e49;
}

/* Base page */
body {
  margin: 0;
  background: #eee;
  color: #333;
  overflow-y: scroll;
}

/* Links (Zoite) */
a {
  color: #234562;
  font-weight: 600;
  text-decoration: none;
}
a:hover {
  color: #1a3b57;
  text-decoration: underline;
}

/* Sidebar = Zoite nav gradient */
#sidebar {
  background: linear-gradient(180deg, #1f4a70 0%, #133552 80%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  color: #fff;
}
#sidebar,
#sidebar a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
#sidebar a:hover {
  color: #9ecbff;
}

/* Replace The Lounge logo with Zoite "Z" box */
#sidebar .logo,
#sidebar .logo-inverted {
  display: none !important;
}
#sidebar .logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
}
#sidebar .logo-container::before {
  content: "Z";
  width: 3rem;
  height: 3rem;
  background: #133552;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 0.5rem;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 8px rgba(50, 50, 50, 0.6);
}

/* Active/hover channel rows */
.channel-list-item.active {
  background: rgba(255, 255, 255, 0.15);
}
.channel-list-item:hover {
  background: rgba(255, 255, 255, 0.10);
}

/* Windows */
.window,
#chat .userlist,
#loading,
body {
  background-color: #eee;
  color: #333;
}

/* Inputs */
#input,
#form .input,
#form {
  background-color: #fff;
  color: #333;
  border-top: 1px solid #d1d5db;
}

input,
textarea,
#form input,
#form textarea {
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
}
input:focus,
textarea:focus,
#form input:focus,
#form textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #133552;
}

/* Buttons (Zoite) */
.btn {
  background: #e5e7eb;
  color: #1f2937;
  font-weight: 600;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  transition: background 0.15s;
}
.btn:hover {
  background: #d1d5db;
}

.btn-primary,
#chat .show-more .btn,
.btn-reconnect {
  background: #133552;
  color: #fff;
  font-weight: 600;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: background 0.15s;
}
.btn-primary:hover,
#chat .show-more .btn:hover,
.btn-reconnect:hover {
  background: #0f2e49;
}

.btn-danger {
  background: #dc2626;
  color: #fff;
  font-weight: 600;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  transition: background 0.15s;
}
.btn-danger:hover {
  background: #b91c1c;
}

/* Code-ish UI */
.irc-monospace,
pre,
code,
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #333;
  background-color: #f5f5f5;
  border-color: #d1d5db;
  box-shadow: none;
  text-shadow: none;
}

/* Context menus */
#context-menu,
.textcomplete-menu {
  border: 1px solid #d1d5db;
  background-color: #fff;
  color: #333;
}
.context-menu-item,
.textcomplete-item a {
  color: #333;
}
.context-menu-item:hover,
.textcomplete-item a:hover {
  background-color: #f5f5f5;
}

/* Footer */
#footer {
  background-color: #fff;
  border-top: 1px solid #d1d5db;
  color: #333;
}