/* ARISI20 语音房 —— 简洁主题
   保留 mumble-web 原生布局（最稳定），只调配色与字号 */

html, body {
  background: #1e2227 !important;
  color: #d7dde3 !important;
  font-family: system-ui, -apple-system, "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
}

#container {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* 保持原生控件，只把顺序调成「频道在左、聊天在右」 */
.toolbar { flex: 0 0 100%; }

.toolbar-horizontal ~ .channel-root-container,
.toolbar-vertical ~ .channel-root-container {
  order: 1;
  float: none !important;
  flex: 0 0 38%;
  width: auto !important;
  height: calc(100% - 40px) !important;
  margin: 2px !important;
  box-sizing: border-box;
}

.toolbar-horizontal ~ .chat,
.toolbar-vertical ~ .chat {
  order: 2;
  float: none !important;
  flex: 1 1 58%;
  width: auto !important;
  height: calc(100% - 40px) !important;
  margin: 2px !important;
  box-sizing: border-box;
}

.minimal .channel-root-container { flex-basis: 98%; }
.minimal .chat { display: none; }

.channel-root-container,
.log {
  background: #262b31 !important;
  border-color: #3a424a !important;
}

.toolbar {
  background: #262b31 !important;
  border-bottom: 1px solid #3a424a !important;
}

.channel,
.user {
  color: #d7dde3 !important;
  border-radius: 3px !important;
}

.channel:hover,
.user:hover {
  background: #333a42 !important;
}

.selected {
  background: #35505f !important;
  border-color: #4a7186 !important;
}

.currentChannel { color: #7fd3ef !important; }
.thisClient { color: #a8e6a3 !important; }

.channel-tag { color: #e0b36a !important; }
.user-tag { color: #a8e6a3 !important; }

.dialog {
  background: #262b31 !important;
  border-color: #3a424a !important;
  color: #d7dde3 !important;
}

.dialog-header {
  background: #333a42 !important;
  color: #eaf2f8 !important;
}

.connect-dialog input[type=text],
.connect-dialog input[type=password],
.settings-dialog select,
.settings-dialog input[type=text] {
  background: #1e2227 !important;
  border-color: #3a424a !important;
  color: #d7dde3 !important;
}

.dialog-submit {
  background: #35505f !important;
  border-color: #4a7186 !important;
  color: #eaf2f8 !important;
}

.dialog-close {
  background: #262b31 !important;
  border-color: #3a424a !important;
  color: #d7dde3 !important;
}

#message-box { color: #d7dde3 !important; }

.context-menu {
  background: #262b31 !important;
  border-color: #3a424a !important;
}
.context-menu > li:hover { background: #35505f !important; }

/* 加载层快速退场，减少“卡住”的错觉 */
.loaded {
  transition: top .25s !important;
  transition-delay: 0s !important;
}

/* 去掉用不到的按钮，保持工具栏简洁 */
.tb-record,
.tb-sourcecode,
.handle-horizontal,
.handle-vertical {
  display: none !important;
}

.voice-note {
  padding: 0 12px 12px;
  color: #8a97a3;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}
.voice-note a {
  color: #7fd3ef;
  text-decoration: none;
}

/* 手机：上下排布，频道在上、聊天在下 */
@media (max-width: 720px) {
  .toolbar-horizontal,
  .toolbar-vertical {
    height: auto !important;
    flex-wrap: wrap;
    padding: 4px !important;
  }

  .toolbar img {
    height: 32px !important;
    width: 32px !important;
  }

  .toolbar-horizontal ~ .channel-root-container,
  .toolbar-vertical ~ .channel-root-container {
    order: 1;
    flex: 0 0 calc(100% - 8px) !important;
    height: 46% !important;
    margin: 4px !important;
  }

  .toolbar-horizontal ~ .chat,
  .toolbar-vertical ~ .chat {
    order: 2;
    flex: 0 0 calc(100% - 8px) !important;
    height: calc(54% - 56px) !important;
    margin: 4px !important;
  }
}