/* ============ Classic White mIRC Look - wIRC ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
[hidden] { display: none !important; }
body {
  font: 12px Tahoma, "Segoe UI", "MS Sans Serif", Arial, sans-serif;
  background: #fff; color: #000; overflow: hidden;
  user-select: none;
}
a { color: #0050a0; }

/* ---------- Connect screen (branded) ---------- */
#connect-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #1b2735 0%, #2c3e50 55%, #34506b 100%);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 16px;
}
#connect-box {
  width: 360px; max-width: 100%; background: #fff; border: none; border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4); padding: 26px 24px 20px;
}
#connect-logo {
  font-weight: 700; font-size: 30px; letter-spacing: -.5px; color: #1b2735;
  margin-bottom: 2px; font-family: "Segoe UI", Tahoma, sans-serif;
}
#connect-logo .brand-accent { color: #3a7bd5; }
#connect-tag { font-size: 12px; color: #8a8f98; margin-bottom: 12px; }
#connect-sub {
  font-size: 12px; color: #666; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid #e4e4e4;
}
#connect-box label { display: block; margin: 10px 0 4px; font-size: 12px; color: #444; font-weight: 600; }
#connect-box input {
  width: 100%; padding: 9px 8px; border: 1px solid #d3d8de; border-radius: 5px;
  font: 14px Tahoma, sans-serif; background: #fafbfc; color: #000;
}
#connect-box input:focus { outline: none; border-color: #3a7bd5; background: #fff; }
#c-actions { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
#c-connect {
  padding: 10px 26px; background: linear-gradient(135deg, #4a90e2, #2c5aa0); color: #fff;
  border: none; border-radius: 6px; font: 600 13px Tahoma, sans-serif; cursor: pointer;
  box-shadow: 0 4px 10px rgba(58,123,213,.35);
}
#c-connect:hover { filter: brightness(1.08); }
#c-connect:disabled { opacity: .6; cursor: default; filter: none; }
#c-status { font-size: 12px; color: #c0392b; }
#connect-foot { margin-top: 18px; text-align: center; font-size: 11px; color: #aab0b8; }
#connect-foot a { color: #6a92c4; text-decoration: none; }
#connect-foot a:hover { text-decoration: underline; }

/* ---------- Main layout ---------- */
#app { display: flex; flex-direction: column; height: 100vh; }
#topbar {
  display: flex; align-items: center; gap: 4px;
  background: linear-gradient(#fdfdf8, #ece9d8);
  border-bottom: 1px solid #808080; padding: 4px 8px;
}
#app-title { font-weight: bold; margin-right: 8px; white-space: nowrap; }
#app-title .brand-accent { color: #3a7bd5; }
.tb-sep { width: 1px; height: 18px; background: #a0a0a0; margin: 0 4px; flex: none; }
.tb-flex { flex: 1; }
.tb-btn {
  background: #ece9d8; border: 1px solid #808080; padding: 4px 10px;
  font: 12px Tahoma, sans-serif; cursor: pointer; flex: none;
}
.tb-btn:hover { background: #d4d0c8; }
.tb-btn.mobile-only { display: none; }

#main { flex: 1; display: flex; min-height: 0; }

#sidebar {
  width: 170px; background: #f7f5ef; border-right: 1px solid #808080;
  display: flex; flex-direction: column; min-height: 0;
}
#tree { flex: 1; overflow-y: auto; padding: 4px 0; }
.tree-item {
  padding: 3px 10px; cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: 13px; color: #000;
  margin: 1px 4px; border: 1px solid #d8d4c8; background: #fdfdfb;
}
.tree-item:hover { background: #e0ddd0; }
.tree-item.active { background: #316ac5; color: #fff; border-color: #24508f; }
/* Unread: red font only (no loud background fills), per mIRC-ish restraint */
.tree-item.msg { color: #c00; }
.tree-item.hl { color: #c00; font-weight: bold; }
.tree-item.msg.active, .tree-item.hl.active { background: #c02020; color: #fff; border-color: #901010; }
.tree-item .t-mode { color: #808080; font-size: 11px; margin-left: 4px; }
.tree-item.active .t-mode { color: #d0d0ff; }

#content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#windows { flex: 1; position: relative; min-height: 0; background: #fff; }

.window { position: absolute; inset: 0; display: none; flex-direction: column; }
.window.active { display: flex; }

/* ---------- Channel topic bar ---------- */
.topicbar {
  flex: none; padding: 5px 10px; background: #eef3fa; border-bottom: 1px solid #b9c9dd;
  font-size: 12px; color: #1b3a63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default;
}

.lines { flex: 1; overflow-y: auto; background: #fff; padding: 4px 6px; user-select: text; font: 12px "Segoe UI", Tahoma, sans-serif; }
.line { padding: 1px 0; line-height: 1.4; word-wrap: break-word; font-size: 12px; }
.line .nick { font-weight: bold; cursor: pointer; }
.line.highlight { color: #d00; font-weight: bold; background: #fff0f0; }
.line.sys { color: #060; }
.line.err { color: #c00; }
.line.whois-line { color: #0050a0; }
.line .ts { color: #808080; margin-right: 3px; }
.line.action { color: #800080; font-style: italic; }
.chan-link { color: #0000cc; text-decoration: underline; cursor: pointer; }
.chan-link:hover { color: #ff0000; }

/* Join/part = green, quits = navy ("lacivert"), mode changes = amber, per mIRC conventions */
.line.join, .line.part { color: #0a7d1e; }
.line.quit { color: #2a3f8f; }
.line.modeline { color: #a05a00; font-weight: bold; }

/* Server notices / IRCop snotices */
.line.snotice { color: #8a2be2; font-weight: 600; }

/* MOTD: preserve the server's original spacing/alignment (ASCII art, columns) */
.line.motd { white-space: pre-wrap; font-family: Consolas, "Courier New", monospace; }

/* CHATHISTORY (+H) scrollback playback */
.line.history { opacity: .62; font-style: italic; }

/* ---------- Input line ---------- */
#inputbar { display: flex; align-items: center; background: #ece9d8; padding: 4px 6px; gap: 6px; }
#input-nick { font-weight: bold; color: #003a70; min-width: 90px; text-align: right; }
#input {
  flex: 1; padding: 6px 6px; border: 1px solid #7f9db9; font: 14px Tahoma, sans-serif;
  background: #fff; color: #000;
}

/* ---------- User list ---------- */
#userlist { width: 170px; background: #fff; border-left: 1px solid #808080; display: flex; flex-direction: column; }
#userlist-head {
  padding: 5px 8px; font-weight: bold; font-size: 12px; background: #ece9d8;
  border-bottom: 1px solid #808080;
}
#userlist-body { flex: 1; overflow-y: auto; padding: 3px 0; }
.ul-item { padding: 4px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ul-item:hover { background: #e0ddd0; }
.ul-item.self { font-weight: bold; }
/* Admin nicks (leading "!") always stand out at the top of the list */
.ul-item.admin-nick { font-weight: bold; }

/* ---------- Status bar ---------- */
#statusbar {
  display: flex; justify-content: space-between; background: #d4d0c8;
  border-top: 1px solid #808080; padding: 3px 10px; font-size: 12px; cursor: default;
}

/* ---------- Right-click menu (XP-style) ---------- */
#ctxmenu {
  position: fixed; z-index: 200; background: #fff; border: 1px solid #808080;
  box-shadow: 3px 3px 8px rgba(0,0,0,.3); min-width: 190px; padding: 2px;
}
.ctx-item {
  padding: 5px 24px 5px 20px; font-size: 13px; cursor: pointer; position: relative; white-space: nowrap;
}
.ctx-item:hover { background: #316ac5; color: #fff; }
.ctx-item.disabled { color: #a0a0a0; cursor: default; }
.ctx-item.disabled:hover { background: #fff; color: #a0a0a0; }
.ctx-sep { height: 1px; background: #d4d0c8; margin: 3px 4px; }
.ctx-check { position: absolute; left: 5px; }

/* ---------- Channel list window ---------- */
.chlist-row { display: flex; padding: 2px 6px; cursor: pointer; gap: 10px; }
.chlist-row:hover { background: #e8f0ff; }
.chlist-row .ch-name { color: #0050a0; min-width: 140px; }
.chlist-row .ch-users { color: #060; min-width: 50px; text-align: right; }
.chlist-row .ch-topic { color: #404040; flex: 1; }

/* ---------- Modal (Join channel / Channel modes / IRCop / About) ---------- */
#modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; z-index: 300;
  padding: 16px;
}
#modal-box {
  width: 320px; max-width: 100%; background: #fff; border: 1px solid #808080;
  box-shadow: 4px 4px 12px rgba(0,0,0,.3); padding: 14px;
}
#modal-title { font-weight: bold; font-size: 14px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #d4d0c8; }
#modal-body { font-size: 13px; }
#modal-body input[type="text"], #modal-body input[type="password"], #modal-body input[type="number"] {
  width: 100%; padding: 6px; border: 1px solid #7f9db9; font: 13px Tahoma, sans-serif; margin-top: 4px;
}
#modal-body a { color: #0050a0; }
.modes-row { display: block; padding: 4px 0; }
.modes-row input[type="checkbox"] { margin-right: 6px; }
#modal-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 8px; }
.modal-btn { padding: 6px 16px; background: #ece9d8; border: 1px solid #808080; cursor: pointer; font: 12px Tahoma, sans-serif; }
.modal-btn:hover { background: #d4d0c8; }
.modal-btn.primary { background: #316ac5; color: #fff; border-color: #205090; }
.modal-btn.primary:hover { background: #2857a4; }

.ban-section { margin-top: 12px; border-top: 1px solid #d4d0c8; padding-top: 8px; }
.ban-title { font-weight: bold; font-size: 12px; margin-bottom: 4px; color: #444; }
#ban-list { max-height: 130px; overflow-y: auto; }
.ban-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 12px; }
.ban-mask { color: #a05a00; word-break: break-all; }
.ban-remove { padding: 2px 8px; background: #ece9d8; border: 1px solid #808080; cursor: pointer; font: 11px Tahoma, sans-serif; flex: none; }
.ban-remove:hover { background: #d4d0c8; }
.ban-empty { font-size: 12px; color: #888; padding: 4px 0; }

/* ---------- Ctrl+K color palette (mIRC colors 0-15) ---------- */
#color-palette {
  position: fixed; z-index: 400; display: grid; grid-template-columns: repeat(8, 28px);
  gap: 2px; background: #fff; border: 1px solid #808080; padding: 4px;
  box-shadow: 3px 3px 8px rgba(0,0,0,.3);
}
.cp-swatch {
  width: 28px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; cursor: pointer; border: 1px solid rgba(0,0,0,.15);
}
.cp-swatch:hover { outline: 2px solid #316ac5; outline-offset: -2px; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .tb-btn.mobile-only { display: inline-block; }
  .tb-btn { padding: 4px 7px; font-size: 11px; }
  #app-title { display: none; }
  #topbar { overflow-x: auto; flex-wrap: nowrap; }

  #sidebar {
    display: none;
    position: fixed; top: 0; bottom: 0; left: 0; width: 75vw; max-width: 240px;
    z-index: 60; box-shadow: 2px 0 10px rgba(0,0,0,.35);
  }
  #sidebar.open { display: flex; }

  #userlist {
    display: none !important;
    position: fixed; top: 0; bottom: 0; right: 0; width: 75vw; max-width: 240px;
    z-index: 60; box-shadow: -2px 0 10px rgba(0,0,0,.35);
  }
  #userlist.open { display: flex !important; }

  #mobile-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 55; }
  #mobile-scrim.show { display: block; }

  #input { font-size: 16px; } /* avoid iOS zoom-on-focus */
  #connect-box { padding: 22px 18px 16px; }
}