.xp-bg { background: #008080; margin: 0; padding: 0; overflow: hidden; height: 100vh; }
.layout { display: flex; height: 100%; gap: 2px; background: #d6d3ce; }
.sidebar, .right-pane { width: 200px; padding: 8px; border: 2px outset #fff; display: flex; flex-direction: column; gap: 8px; font-size: 11px; }
.chat-pane { flex-grow: 1; display: flex; flex-direction: column; background: #fff; border: 2px inset #fff; position: relative; }
.msgs { flex-grow: 1; overflow-y: scroll; padding: 12px; font-family: 'Tahoma', sans-serif; font-size: 12px; }
.msg { margin-bottom: 6px; }
.msg-tools { font-size: 9px; color: blue; cursor: pointer; visibility: hidden; margin-left: 8px; }
.msg:hover .msg-tools { visibility: visible; }
.list-box { background: #fff; border: 1px inset #808080; padding: 4px; overflow-y: auto; }
.item { padding: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item:hover { background: #0a246a; color: #fff; }
.input-area, .toolbar { background: #d6d3ce; padding: 4px; border-top: 1px solid #808080; display: flex; gap: 4px; }
.input-area input { flex-grow: 1; height: 20px; }
.ping { background: #ffff00; font-weight: bold; border: 1px solid #cccc00; }
.xp-link { color: #0000ee; text-decoration: underline; }
.sparkle { color: #000080; text-shadow: 0 0 8px gold; font-weight: bold; }
.blink { animation: xp-blink 1s step-end infinite; }
@keyframes xp-blink { 50% { visibility: hidden; } }