* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: #0a0a0a;
    color: #e0e0e0;
    font-family: 'Segoe UI', monospace;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header ── */
header {
    background: #111;
    border-bottom: 1px solid #222;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

header h1 {
    font-size: 15px;
    font-weight: 700;
    color: #fe2c55;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* ── Connect form inside header ── */
#connect-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

#username-input {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #e0e0e0;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    width: 200px;
    outline: none;
    transition: border-color 0.15s;
}

#username-input:focus { border-color: #fe2c55; }
#username-input::placeholder { color: #555; }

#connect-btn {
    background: #fe2c55;
    border: none;
    color: #fff;
    padding: 5px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

#connect-btn:hover { background: #e0203e; }
#connect-btn:disabled { background: #5a1020; color: #888; cursor: not-allowed; }

#disconnect-btn {
    background: #1a1a1a;
    border: 1px solid #444;
    color: #aaa;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: none;
    white-space: nowrap;
}

#disconnect-btn:hover { border-color: #f44336; color: #f44336; }

/* ── Status chip ── */
#status {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #555;
    white-space: nowrap;
    flex-shrink: 0;
}

#status.ws-ok   { color: #888; border-color: #444; }
#status.connecting { color: #ff9800; border-color: #ff9800; }
#status.live    { color: #4caf50; border-color: #4caf50; }
#status.error   { color: #f44336; border-color: #f44336; }

/* ── Filters ── */
.filters {
    background: #111;
    border-bottom: 1px solid #222;
    padding: 7px 20px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.filter-btn {
    padding: 3px 11px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: #1a1a1a;
    color: #666;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.filter-btn.active { color: #fff; }
.filter-btn[data-type="all"].active    { border-color: #555; }
.filter-btn[data-type="chat"].active   { border-color: #2196f3; color: #2196f3; }
.filter-btn[data-type="like"].active   { border-color: #e91e63; color: #e91e63; }
.filter-btn[data-type="gift"].active   { border-color: #ff9800; color: #ff9800; }
.filter-btn[data-type="member"].active { border-color: #9c27b0; color: #9c27b0; }
.filter-btn[data-type="follow"].active  { border-color: #4caf50; color: #4caf50; }
.filter-btn[data-type="share"].active   { border-color: #00bcd4; color: #00bcd4; }
.filter-btn[data-type="system"].active  { border-color: #777; color: #aaa; }
.filter-btn[data-type="error"].active   { border-color: #f44336; color: #f44336; }

/* ── Log ── */
#log {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #111;
    border-left: 3px solid transparent;
    font-size: 13px;
    animation: fadeIn 0.18s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.event-time  { color: #555; font-size: 11px; flex-shrink: 0; font-family: monospace; }
.event-badge { font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 700; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.event-user  { font-weight: 600; flex-shrink: 0; }
.event-text  { color: #ccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.event[data-type="chat"]   { border-left-color: #2196f3; }
.event[data-type="chat"]   .event-badge { background: #0d47a1; color: #90caf9; }
.event[data-type="chat"]   .event-user  { color: #64b5f6; }

.event[data-type="like"]   { border-left-color: #e91e63; }
.event[data-type="like"]   .event-badge { background: #880e4f; color: #f48fb1; }
.event[data-type="like"]   .event-user  { color: #f06292; }

.event[data-type="gift"]   { border-left-color: #ff9800; }
.event[data-type="gift"]   .event-badge { background: #e65100; color: #ffcc80; }
.event[data-type="gift"]   .event-user  { color: #ffb74d; }

.event[data-type="member"] { border-left-color: #9c27b0; }
.event[data-type="member"] .event-badge { background: #4a148c; color: #ce93d8; }
.event[data-type="member"] .event-user  { color: #ba68c8; }

.event[data-type="follow"] { border-left-color: #4caf50; }
.event[data-type="follow"] .event-badge { background: #1b5e20; color: #a5d6a7; }
.event[data-type="follow"] .event-user  { color: #81c784; }

.event[data-type="share"]  { border-left-color: #00bcd4; }
.event[data-type="share"]  .event-badge { background: #006064; color: #80deea; }
.event[data-type="share"]  .event-user  { color: #4dd0e1; }

.event[data-type="system"]   { border-left-color: #444; background: #0d0d0d; }
.event[data-type="system"]   .event-badge { background: #1e1e1e; color: #666; }
.event[data-type="system"]   .event-text  { color: #666; }

.event[data-type="error"]    { border-left-color: #f44336; background: #1a0808; }
.event[data-type="error"]    .event-badge { background: #b71c1c; color: #ef9a9a; }
.event[data-type="error"]    .event-text  { color: #ef9a9a; }

.event[data-type="roomUser"] { border-left-color: #2a2a2a; }
.event[data-type="roomUser"] .event-badge { background: #1a1a1a; color: #555; }
.event[data-type="roomUser"] .event-text  { color: #555; }

/* ── Footer ── */
footer {
    background: #111;
    border-top: 1px solid #222;
    padding: 7px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    font-size: 12px;
    color: #555;
}

.footer-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #777;
    padding: 3px 11px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.footer-btn:hover { color: #fff; border-color: #555; }
.footer-btn.on { color: #4caf50; border-color: #4caf50; }