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

/* ---------- Connect screen ---------- */
#connect-overlay {
  position: fixed; inset: 0; background: #ece9d8;
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 16px;
}
#connect-box {
  width: 340px; max-width: 100%; background: #fff; border: 1px solid #808080;
  box-shadow: 4px 4px 12px rgba(0,0,0,.25); padding: 16px;
}
#connect-title {
  font-weight: bold; font-size: 17px; margin-bottom: 2px;
}
#connect-sub {
  font-size: 12px; color: #666; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid #d4d0c8;
}
#connect-box label { display: block; margin: 8px 0 3px; font-size: 12px; color: #333; }
#connect-box input {
  width: 100%; padding: 7px 6px; border: 1px solid #7f9db9; font: 14px Tahoma, sans-serif;
  background: #fff; color: #000;
}
#c-actions { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
#c-connect {
  padding: 8px 22px; background: #ece9d8; border: 1px solid #808080;
  font: 13px Tahoma, sans-serif; cursor: pointer;
}
#c-connect:hover { background: #d4d0c8; }
#c-connect:disabled { opacity: .6; cursor: default; }
#c-status { font-size: 12px; color: #a00; }

/* ---------- 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; }
.tb-sep { width: 1px; height: 18px; background: #a0a0a0; margin: 0 4px; }
.tb-flex { flex: 1; }
.tb-btn {
  background: #ece9d8; border: 1px solid #808080; padding: 4px 10px;
  font: 12px Tahoma, sans-serif; cursor: pointer;
}
.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-head {
  padding: 5px 8px; font-weight: bold; font-size: 12px;
  background: #ece9d8; border-bottom: 1px solid #808080;
}
#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;
}
.tree-item:hover { background: #e0ddd0; }
.tree-item.active { background: #316ac5; color: #fff; }
.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; }
.lines { flex: 1; overflow-y: auto; background: #fff; padding: 4px 6px; user-select: text; }
.line { padding: 1px 0; line-height: 1.45; word-wrap: break-word; font-size: 13px; }
.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; }

/* ---------- Switchbar (mIRC-style tabs) ---------- */
#switchbar {
  display: flex; flex-wrap: wrap; background: #ece9d8;
  border-top: 1px solid #808080; padding: 3px 4px; gap: 3px; min-height: 28px;
}
.sw-btn {
  padding: 3px 10px; background: #f5f3ea; border: 1px solid #808080;
  border-radius: 3px 3px 0 0; font: 12px Tahoma, sans-serif; cursor: pointer;
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-btn:hover { background: #e0ddd0; }
.sw-btn.active { background: #316ac5; color: #fff; border-color: #205090; }
.sw-btn.msg { background: #ffd9a0; }
.sw-btn.msg.active { background: #e09000; color: #fff; }
.sw-btn.hl { background: #ff9a9a; font-weight: bold; }
.sw-btn.hl.active { background: #c02020; color: #fff; }

/* ---------- 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; }

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

/* ---------- 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) ---------- */
#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="number"] {
  width: 100%; padding: 6px; border: 1px solid #7f9db9; font: 13px Tahoma, sans-serif; margin-top: 4px;
}
.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; }

/* ---------- Dark theme ---------- */
body.dark { background: #1e1e1e; color: #d0d0d0; }
body.dark #topbar, body.dark #switchbar, body.dark #inputbar { background: #2b2b2b; border-color: #555; }
body.dark #sidebar, body.dark #tree-head, body.dark #userlist-head, body.dark #statusbar { background: #2b2b2b; border-color: #555; }
body.dark .lines, body.dark #userlist, body.dark #userlist-body { background: #161616; }
body.dark .line { color: #d0d0d0; }
body.dark .line.sys { color: #6c6; }
body.dark .line.err { color: #f66; }
body.dark .line.highlight { background: #402020; color: #f88; }
body.dark .sw-btn { background: #3a3a3a; color: #d0d0d0; border-color: #555; }
body.dark .sw-btn.active { background: #316ac5; color: #fff; }
body.dark .sw-btn.msg { background: #7a5a20; }
body.dark .sw-btn.hl { background: #8a3030; }
body.dark #input { background: #111; color: #e0e0e0; border-color: #555; }
body.dark .tree-item:hover, body.dark .ul-item:hover { background: #3a3a3a; }
body.dark #ctxmenu { background: #2b2b2b; color: #e0e0e0; border-color: #666; }
body.dark .ctx-item:hover { background: #316ac5; color: #fff; }
body.dark .ctx-item.disabled:hover { background: #2b2b2b; color: #a0a0a0; }
body.dark .ctx-sep { background: #555; }
body.dark .chlist-row:hover { background: #334; }
body.dark .tb-btn { background: #3a3a3a; color: #d0d0d0; border-color: #555; }
body.dark .tb-btn:hover { background: #4a4a4a; }
body.dark #modal-box { background: #2b2b2b; color: #e0e0e0; border-color: #666; }
body.dark #modal-body input { background: #111; color: #e0e0e0; border-color: #555; }
body.dark .modal-btn { background: #3a3a3a; color: #d0d0d0; border-color: #555; }

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

  #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 */
}