/* 青云问道 · 世界频道（传音）样式
 *
 * 只负责 #chat-root 内部的结构；面板外壳（.pane / .pane-title）由
 * index.html + style.css 提供，本文件不碰。
 * 颜色语义与右侧「动静」栏（style.css 的 .log-line）保持一致。
 */

.chat-wrap { display: flex; flex-direction: column; min-height: 0; }

.chat-lines {
  flex: 1; min-height: 24vh; max-height: 58vh; overflow-y: auto;
  padding: 16px 20px; border: 1px solid var(--gold-faint); border-radius: 2px;
  font-size: 13px; line-height: 2.05; letter-spacing: .04em;
}
.chat-lines::-webkit-scrollbar { width: 2px; }
.chat-lines::-webkit-scrollbar-thumb { background: rgba(201, 168, 106, .16); }

.chat-line { color: var(--mute); animation: chatIn .4s var(--ease); }
@keyframes chatIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }

/* 颜色键来自服务端 net/ansi.py 的 STYLES（片段 → <span class="t-键">） */
.chat-line .t-title { color: var(--gold); font-family: var(--font-serif); letter-spacing: .14em; }
.chat-line .t-info { color: var(--paper); }
.chat-line .t-hint { color: var(--mute-2); }
.chat-line .t-good { color: var(--jade); }
.chat-line .t-warn { color: var(--gold); }
.chat-line .t-bad { color: var(--cinnabar); }
.chat-line .t-mob { color: #c96a5a; }
.chat-line .t-item { color: var(--jade-bright); }
.chat-line .t-gold { color: var(--gold-bright); }
.chat-line .t-realm { color: #b9a3d6; }

.chat-bar { display: flex; gap: 10px; align-items: center; margin-top: 14px; }

.chat-input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 2px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08);
  color: var(--paper); font-family: var(--font-sans); font-size: 14px;
  letter-spacing: .06em; outline: none; transition: border-color .4s var(--ease);
}
.chat-input::placeholder { color: var(--mute-2); letter-spacing: .1em; }
.chat-input:focus { border-color: var(--gold-dim); }

.chat-bar .btn-jade.small { margin: 0; white-space: nowrap; }

.chat-hint {
  margin-top: 8px; font-size: 11px; letter-spacing: .1em;
  color: var(--mute-2); font-family: var(--font-serif);
}

@media (max-width: 720px) {
  .chat-lines { max-height: 46vh; }
}