:root {
    --green: #00ff41;
    --green-dim: rgba(0,255,65,0.10);
    --green-mid: rgba(0,255,65,0.25);
    --bg: #0a0e0a;
    --bg2: #0d120d;
    --card: #111811;
    --text: #c8ffc8;
    --text-dim: #5a8a5a;
    --border: rgba(0,255,65,0.14);
    --red: #ff4444;
    --yellow: #ffd700;
    --blue: #4fc3f7;
}

*,*::before,*::after { margin:0;padding:0;box-sizing:border-box; }
html,body { height:100%;overflow:hidden; }
body { font-family:'Fira Code',monospace;background:var(--bg);color:var(--text);font-size:14px; }

.app { display:flex;flex-direction:column;height:100vh; }

/* HEADER */
.header {
    background:var(--bg2);border-bottom:1px solid var(--border);
    padding:.6rem 1.2rem;display:flex;align-items:center;
    justify-content:space-between;flex-shrink:0;gap:.8rem;
}
.prompt { color:var(--text-dim); }
.logo { color:var(--green);font-weight:700;font-size:1rem; }
.badge-webrtc {
    font-size:.65rem;padding:.15rem .5rem;border-radius:4px;
    border:1px solid var(--green-mid);color:var(--green);
    opacity:.7;letter-spacing:.06em;
}
.header-right { display:flex;align-items:center;gap:.6rem;font-size:.78rem; }
.status-dot { width:8px;height:8px;border-radius:50%;background:var(--text-dim);transition:.3s; }
.status-dot.connected { background:var(--green);box-shadow:0 0 8px var(--green); }
.status-dot.connecting { background:var(--yellow);animation:blink .8s step-end infinite; }
.status-text { color:var(--text-dim);transition:.3s; }
@keyframes blink { 50%{opacity:0} }

/* LAYOUT */
.layout { display:flex;flex:1;overflow:hidden; }

/* SIDEBAR */
.sidebar {
    width:240px;background:var(--bg2);border-right:1px solid var(--border);
    display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;
}
.sidebar-section { padding:.85rem 1rem;border-bottom:1px solid var(--border); }
.section-label { font-size:.68rem;color:var(--text-dim);margin-bottom:.65rem;letter-spacing:.05em; }

/* SESSION BUTTONS */
.session-btns { display:flex;flex-direction:column;gap:.4rem; }
.btn-session {
    background:transparent;border:1px solid var(--border);color:var(--text-dim);
    padding:.45rem .7rem;border-radius:5px;cursor:pointer;
    font-family:'Fira Code',monospace;font-size:.75rem;text-align:left;transition:.2s;
}
.btn-session:hover { border-color:var(--green);color:var(--green); }
.btn-session.primary { border-color:var(--green);color:var(--green);background:var(--green-dim); }
.btn-session.primary:hover { background:rgba(0,255,65,0.18); }
.btn-session:disabled { opacity:.35;cursor:not-allowed; }

/* ROOM CODE */
.room-code {
    font-size:2rem;font-weight:700;letter-spacing:.35em;color:var(--green);
    text-align:center;padding:.6rem .4rem;border:1px solid var(--border);
    border-radius:6px;background:var(--card);
    text-shadow:0 0 12px var(--green);margin-bottom:.35rem;
}
.room-hint { font-size:.62rem;color:var(--text-dim);text-align:center;margin-top:.3rem;line-height:1.4; }
.room-input {
    width:100%;background:var(--card);border:1px solid var(--border);
    color:var(--text);font-family:'Fira Code',monospace;font-size:1.2rem;
    letter-spacing:.3em;text-align:center;padding:.5rem .4rem;border-radius:4px;
    outline:none;transition:.2s;
}
.room-input:focus { border-color:var(--green); }
.room-input::placeholder { letter-spacing:.05em;font-size:.75rem; }
.btn-copy {
    width:100%;margin:.35rem 0;background:transparent;border:1px solid var(--border);
    color:var(--text-dim);padding:.35rem;border-radius:4px;cursor:pointer;
    font-family:'Fira Code',monospace;font-size:.72rem;transition:.2s;
}
.btn-copy:hover { border-color:var(--green);color:var(--green); }

/* INFO BLOCK */
.info-block { display:flex;flex-direction:column;gap:.4rem; }
.info-line { display:flex;justify-content:space-between;font-size:.7rem; }
.info-line .k { color:var(--text-dim); }
.info-line .v { color:var(--green);max-width:130px;text-align:right;font-size:.68rem; }

/* HELP */
.help-text { display:flex;flex-direction:column;gap:.5rem; }
.help-text p { font-size:.68rem;color:var(--text-dim);line-height:1.5; }
.help-text strong { color:var(--green); }

/* TERMINAL */
.terminal-area { flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg); }
.terminal-output { flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.2rem; }
.terminal-output::-webkit-scrollbar { width:4px; }
.terminal-output::-webkit-scrollbar-track { background:var(--bg); }
.terminal-output::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; }

.msg { font-size:.84rem;line-height:1.55;padding:.1rem 0; }
.msg .author { font-weight:700;margin-right:.5rem; }
.msg .time { color:var(--text-dim);font-size:.68rem;margin-left:.4rem; }
.msg .text { color:var(--text); }
.msg.system { color:var(--text-dim); }
.msg.system.success .text { color:var(--green); }
.msg.system.error   .text { color:var(--red); }
.msg.system.info    .text { color:var(--blue); }
.msg.system.warn    .text { color:var(--yellow); }
.msg.sent     .author { color:var(--green); }
.msg.received .author { color:var(--blue); }

.terminal-input-row {
    background:var(--bg2);border-top:1px solid var(--border);
    padding:.6rem 1rem;display:flex;align-items:center;gap:.6rem;flex-shrink:0;
}
.t-prompt { color:var(--green);font-size:.82rem;white-space:nowrap;flex-shrink:0; }
.msg-input {
    flex:1;background:transparent;border:none;color:var(--text);
    font-family:'Fira Code',monospace;font-size:.84rem;outline:none;
}
.msg-input::placeholder { color:var(--text-dim); }
.btn-send {
    background:transparent;border:1px solid var(--border);
    color:var(--green);padding:.3rem .6rem;border-radius:4px;
    cursor:pointer;font-size:.85rem;transition:.2s;flex-shrink:0;
}
.btn-send:hover { background:var(--green-dim); }

@media(max-width:640px) {
    .sidebar { display:none; }
}