:root {
  --title-a: #7b3fa0;
  --title-b: #4b1f6f;
  --panel: #f2eef6;
  --line: #b9a6c9;
  --accent: #6a2c91;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 13px;
}
* { box-sizing: border-box; }
body { margin: 0; background: #d9d2e0; color: #1d1226; min-height: 100vh; }
.hidden { display: none !important; }

.win { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 2px 3px 0 rgba(75, 31, 111, .25); overflow: hidden; display: flex; flex-direction: column; }
.titlebar { background: linear-gradient(var(--title-a), var(--title-b)); color: #fff; padding: 5px 8px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.body { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }

.login { max-width: 360px; margin: 10vh auto 0; }
.login label { display: flex; flex-direction: column; gap: 4px; }
.notice { margin: 0; padding: 6px 8px; background: #fff3cd; border: 1px solid #e0c36a; border-radius: 4px; }

input, select, button { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
button { background: linear-gradient(#fff, #e6dcee); cursor: pointer; }
button:hover:not(:disabled) { background: #efe5f6; }
button:disabled { opacity: .5; cursor: default; }
button.tiny { padding: 1px 6px; font-size: 11px; }

.app { display: grid; grid-template-columns: 260px 1fr; gap: 10px; padding: 10px; height: 100vh; }
.buddy { height: calc(100vh - 20px); }
.chat { height: calc(100vh - 20px); }
@media (max-width: 700px) { .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .buddy { height: auto; max-height: 40vh; } .chat { height: auto; } }

.mystatus { display: flex; flex-direction: column; gap: 4px; }
#rooms { overflow-y: auto; flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 3px; }
.group-h { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; background: #e6dcee; cursor: pointer; font-weight: bold; border-bottom: 1px solid var(--line); }
.group-h.active { background: #cbb3dd; }
.badge { background: #d33; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 6px; }
.member { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 2px 18px; }
.member.off { color: #8b8394; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #aaa; }
.dot.online { background: #2fae3f; } .dot.busy { background: #d33; } .dot.away { background: #e9a21b; }
.mtext { color: #6d6479; font-size: 11px; margin-left: 4px; }
.snd { font-size: 12px; }
.redeem { display: flex; gap: 4px; } .redeem input { flex: 1; min-width: 0; }

.disclaimer { margin: 0; font-size: 11px; color: #6d5a00; background: #fff8d6; border: 1px solid #e3d48a; padding: 3px 6px; border-radius: 3px; }
.messages { flex: 1; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.line { word-break: break-word; }
.line .t { color: #8b8394; font-size: 11px; margin-right: 4px; }
.line .n { font-weight: bold; color: #1f5fb4; } .line.mine .n { color: #b4281f; }
.line.sys { color: #7a6f86; font-style: italic; }
.ticker { background: #ece2f4; border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; font-weight: bold; color: var(--accent); }
.typing { min-height: 16px; color: #7a6f86; font-size: 11px; }
.send { display: flex; gap: 6px; } .send input { flex: 1; }

/* BUZZ! shake */
@keyframes buzz { 0%,100% { transform: translate(0,0); } 10% { transform: translate(-9px,3px); } 20% { transform: translate(8px,-4px); } 30% { transform: translate(-8px,-3px); } 40% { transform: translate(7px,4px); } 50% { transform: translate(-6px,2px); } 60% { transform: translate(5px,-2px); } 70% { transform: translate(-4px,3px); } 80% { transform: translate(3px,-2px); } 90% { transform: translate(-2px,1px); } }
.shake { animation: buzz .7s linear; }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; outline: 3px solid #d33; } }