:root {
  --chrome: #d4d0c8;
  --chrome-light: #ffffff;
  --chrome-dark: #6d6a63;
  --ink: #111;
  --accent: #0a4f9f;
  --paper: #ffffff;
  --title-start: #003c86;
  --title-end: #0d64c7;
  --panel: #ece9df;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.24) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    #8b8f98;
  background-size: 8px 8px;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 13px;
}

body[data-theme="silver"] {
  --title-start: #4b5563;
  --title-end: #9ca3af;
  --chrome: #d9d9d9;
  --panel: #eeeeee;
  --paper: #ffffff;
}

body[data-theme="dark"] {
  --title-start: #111827;
  --title-end: #334155;
  --chrome: #8a8f98;
  --panel: #c5c8cf;
  --paper: #eef2f8;
  --ink: #101010;
}

body[data-theme="warm"] {
  --title-start: #7a2f00;
  --title-end: #bd650d;
  --chrome: #d8c5a5;
  --panel: #eadbc0;
  --paper: #fff8e7;
}

button,
input,
select,
textarea {
  font: inherit;
}

.hidden {
  display: none;
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 24px 25px minmax(0, 1fr) 42px;
  width: min(1420px, calc(100vw - 24px));
  height: min(820px, calc(100vh - 72px));
  min-height: 680px;
  margin: 24px auto;
  padding: 0 4px 4px;
  gap: 0;
  border: 1px solid #0a1f57;
  background: #004d92;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}

.window-title {
  display: grid;
  grid-template-columns: 16px auto 1fr 68px;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-inline: -4px;
  padding: 2px 4px;
  color: #fff;
  background: linear-gradient(#8a8cc7, #3e4b91 45%, #8890ca);
  border-bottom: 1px solid #1f285f;
  font-size: 13px;
  text-shadow: 1px 1px 0 #1b275f;
}

.window-icon {
  width: 13px;
  height: 13px;
  border: 1px solid #e8f2ff;
  background: linear-gradient(#ffffff, #58a6ff);
  box-shadow: inset 0 0 0 2px #244aa1;
}

.window-controls {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
}

.window-controls span {
  width: 19px;
  height: 19px;
  border: 1px solid #18245f;
  border-radius: 4px;
  background: linear-gradient(#d6dbff, #8388c5);
  box-shadow: inset 1px 1px 0 #fff;
}

.topbar,
.chat-window,
.login-dialog form,
.pm-window,
.owner-dialog form {
  border: 2px solid var(--chrome-dark);
  border-top-color: var(--chrome-light);
  border-left-color: var(--chrome-light);
  background: var(--chrome);
  box-shadow: inset -1px -1px 0 #444, inset 1px 1px 0 #fff;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: fit-content;
  min-width: 72px;
  max-width: calc(100% - 8px);
  height: 24px;
  margin-top: 1px;
  padding: 3px 8px;
  color: #101010;
  background: #d8d8e8;
  border: 1px solid #777;
  border-bottom: 0;
  box-shadow: inset 1px 1px 0 #fff;
}

.topbar strong {
  display: block;
  font-size: 12px;
  text-shadow: none;
}

.topbar span {
  display: none;
}

.identity {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
  white-space: nowrap;
}

.chat-window {
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 290px;
  gap: 8px;
  padding: 92px 14px 12px;
  background: #004d92;
  border-color: #001b42;
  box-shadow: inset 1px 1px 0 #1a73c9, inset -1px -1px 0 #002a5e;
}

.brand-badge {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 164px;
  height: 86px;
  transform: translateX(-50%);
  border: 2px solid #9b6a00;
  border-radius: 50%;
  color: #4d2a00;
  background: radial-gradient(circle at 35% 30%, #fff9a9, #f0a51b 66%, #b96b00);
  box-shadow: 0 2px 0 #663d00, inset 2px 2px 0 rgba(255,255,255,.75);
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

.brand-badge strong {
  display: block;
  margin-top: 23px;
  font-size: 17px;
  text-shadow: 1px 1px 0 #fff2a0;
}

.brand-badge span {
  position: absolute;
  right: -14px;
  bottom: -10px;
  width: 66px;
  height: 66px;
  border: 2px solid #c48200;
  border-radius: 50%;
  background: #ffd96b;
  font-size: 44px;
  line-height: 60px;
}

.rooms-panel,
.users-panel,
.chat-panel {
  min-height: 0;
  border: 2px solid #6e7fc4;
  border-top-width: 7px;
  border-radius: 8px 8px 2px 2px;
  background: #d7d8e8;
  display: flex;
  flex-direction: column;
}

.rooms-panel {
  order: 1;
}

.chat-panel {
  order: 2;
}

.users-panel {
  order: 3;
}

.panel-title,
.chat-title,
.pm-title {
  min-height: 31px;
  padding: 6px 8px;
  color: #fff;
  background: linear-gradient(90deg, var(--title-start), var(--title-end));
  font-weight: 700;
  border-bottom: 1px solid #082d5d;
}

.users-panel .panel-title::after {
  content: "  |  غرف";
  color: #dbe8ff;
  font-weight: 400;
}

.chat-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.chat-title small {
  color: #eef;
  font-weight: 400;
}

.room-list,
.user-list {
  overflow: auto;
  padding: 6px;
  display: grid;
  gap: 3px;
}

.room-item,
.user-item {
  width: 100%;
  text-align: left;
  border: 1px solid #8c897f;
  border-top-color: #fff;
  border-left-color: #fff;
  background: #e7e4dc;
  padding: 7px 8px;
  cursor: pointer;
}

.room-item.active {
  color: #fff;
  background: linear-gradient(90deg, #06458f, #2474ce);
  border-color: #08376d;
  font-weight: 700;
}

.room-category {
  margin-top: 6px;
  color: #3e3b36;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.messages {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
  background: var(--paper);
  border: 2px inset #aaa;
}

.message {
  margin: 0;
  padding: 3px 4px;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.message:nth-child(even):not(.system-message) {
  background: #f4f7ff;
}

.message .time {
  color: #777;
  font-size: 10px;
}

.message .name {
  font-weight: 700;
}

.system-message {
  color: #6b4d00;
  font-style: italic;
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 44px 100px;
  gap: 6px;
  padding: 7px;
  background: var(--chrome);
  border-top: 1px solid #999;
}

#emojiBtn {
  grid-column: 2;
  grid-row: 1;
}

#textColor {
  grid-column: 3;
  grid-row: 1;
}

#messageInput {
  grid-column: 1;
  grid-row: 1;
}

.composer .classic-button {
  grid-column: 4;
  grid-row: 1;
}

.composer input[type="text"],
.composer input:not([type]) {
  min-width: 0;
}

#messageInput,
.login-dialog input,
.pm-body input {
  border: 1px inset #999;
  padding: 7px;
  background: #fff;
}

.classic-button,
.tool-button {
  border: 2px solid #777;
  border-top-color: #fff;
  border-left-color: #fff;
  background: linear-gradient(#f4f2ec, #c9c4ba);
  color: #111;
  padding: 4px 8px;
  cursor: pointer;
}

.classic-button:active,
.tool-button:active {
  border-color: #fff #777 #777 #fff;
  transform: translateY(1px);
}

#joinLobby {
  margin: 6px;
}

.user-item {
  display: grid;
  gap: 2px;
}

.user-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rank {
  font-size: 10px;
  color: #4d4a43;
}

.status-line {
  margin-top: 4px;
  padding: 12px 14px;
  color: #0435c7;
  background: #eef1f6;
  border: 1px solid #cdd4e0;
  border-radius: 9px;
  text-align: center;
  font-size: 11px;
}

.mod-actions {
  display: flex;
  gap: 4px;
}

.mod-actions button {
  padding: 3px 5px;
  font-size: 11px;
}

.login-dialog {
  width: min(420px, calc(100vw - 24px));
  border: 0;
  padding: 0;
  background: transparent;
}

.login-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.login-dialog form {
  padding: 18px;
  display: grid;
  gap: 10px;
}

.login-dialog h1 {
  margin: 0;
  font-size: 24px;
}

.login-dialog p {
  margin: 0 0 4px;
}

.login-dialog label {
  display: grid;
  gap: 4px;
}

.dialog-actions {
  display: flex;
  gap: 8px;
}

.auth-error {
  min-height: 18px;
  color: #a40000;
}

.pm-dock {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  z-index: 10;
}

.pm-window,
.owner-dialog form {
  width: 280px;
}

.pm-title {
  display: flex;
  justify-content: space-between;
}

.pm-body {
  padding: 8px;
  display: grid;
  gap: 8px;
}

.pm-log {
  height: 160px;
  overflow: auto;
  border: 1px inset #aaa;
  background: #fffdf4;
  padding: 6px;
}

.pm-send {
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 6px;
}

.owner-dialog {
  width: min(520px, calc(100vw - 16px));
  border: 0;
  padding: 0;
  background: transparent;
}

.owner-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.owner-dialog form {
  width: 100%;
  min-height: min(548px, calc(100vh - 18px));
  padding: 0 5px 6px;
  background: #004d92;
  border: 2px solid #6e7fc4;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
}

.owner-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -5px 8px;
  color: #fff;
  background: linear-gradient(#8a8cc7, #3e4b91 45%, #8890ca);
  padding: 3px 5px;
  border-bottom: 1px solid #1f285f;
}

.owner-title h2 {
  margin: 0;
  font-size: 13px;
  text-shadow: 1px 1px 0 #1b275f;
}

.owner-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 3px;
  padding: 0 5px;
  border-bottom: 1px solid #171f56;
}

.owner-tab {
  min-height: 25px;
  border: 1px solid #10184a;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 4px 9px;
  color: #00156c;
  background: linear-gradient(#f7f8ff, #aeb9ef);
  font-weight: 700;
  cursor: pointer;
}

.owner-tab.active {
  color: #d50000;
  background: #e7e9f4;
  position: relative;
  top: 1px;
}

.owner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-height: 384px;
  padding: 7px;
  background: #e7e9f4;
  border: 2px solid #6e7fc4;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
}

.owner-panel {
  min-width: 0;
  display: none;
  align-content: start;
  gap: 7px;
  border: 1px solid #777;
  background: #e9e9e9;
  padding-bottom: 8px;
}

.owner-panel.active {
  display: grid;
}

.owner-panel > label,
.owner-panel > button,
.channel-editor,
.room-editor,
.filter-editor,
.owner-channels,
.owner-rooms,
.owner-users,
.owner-filters,
.owner-bans,
.owner-stats {
  margin-inline: 8px;
}

.owner-panel label {
  display: grid;
  gap: 4px;
}

.owner-panel input,
.owner-panel select,
.owner-panel textarea,
.channel-editor input,
.channel-editor select,
.room-editor input,
.room-editor select,
.filter-editor input,
.owner-room input,
.owner-room select,
.owner-channel select,
.owner-user select {
  min-width: 0;
  border: 1px inset #999;
  padding: 4px;
  background: #fff;
}

.owner-panel textarea {
  min-height: 110px;
  resize: vertical;
}

.color-row,
.channel-editor,
.room-editor,
.filter-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.room-editor {
  grid-template-columns: 1fr 1fr 110px 88px 92px;
  align-items: end;
}

.filter-editor {
  grid-template-columns: 1fr 1fr 92px;
}

.channel-editor {
  grid-template-columns: 1fr 1fr 120px 80px;
}

.owner-channels,
.owner-rooms,
.owner-users,
.owner-filters,
.owner-bans {
  display: grid;
  gap: 6px;
  max-height: 310px;
  overflow: auto;
}

.owner-channel,
.owner-room,
.owner-user,
.owner-filter,
.owner-ban {
  display: grid;
  gap: 5px;
  align-items: center;
  padding: 5px;
  border: 1px solid #999;
  background: #f7f7f7;
}

.owner-room {
  grid-template-columns: 1fr 1fr 92px 84px 64px 72px;
}

.owner-channel {
  grid-template-columns: minmax(120px, 1fr) 120px 98px 62px 62px;
}

.channel-open {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.owner-user {
  grid-template-columns: minmax(90px, 1fr) 140px 64px 60px;
}

.owner-filter {
  grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr) 72px;
}

.owner-ban {
  grid-template-columns: minmax(0, 1fr) 72px;
}

.check-line {
  display: flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.check-line input {
  width: auto;
}

.owner-stats {
  padding: 6px;
  border: 1px inset #aaa;
  background: #fffdf4;
}

.owner-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .shell {
    width: 100%;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  .topbar {
    border-left: 0;
    border-right: 0;
  }

  .chat-window {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(420px, 1fr) auto;
    border: 0;
  }

  .rooms-panel,
  .users-panel {
    max-height: 180px;
  }

  .pm-dock {
    left: 8px;
    right: 8px;
    flex-wrap: wrap;
  }

  .pm-window {
    width: min(100%, 320px);
  }

  .owner-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .channel-editor,
  .room-editor,
  .filter-editor,
  .owner-channel,
  .owner-room,
  .owner-user,
  .owner-filter,
  .owner-ban {
    grid-template-columns: 1fr;
  }
}