/* simple modern mobile-first chat */
:root{
  --bg:#0f1720;
  --card:#0f1726;
  --muted:#93a5b1;
  --accent:#61dafb;
  --danger:#e25555;
}

#room-name{
    background:#000;
    color: #000;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:#fff}

.center-card{
  width:calc(100% - 32px);
  max-width:420px;
  margin:40px auto;
  background:var(--card);
  padding:20px;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
  text-align:center;
}
.center-card h1{margin:0 0 8px;font-size:1.3rem;color:#fff}
.center-card{color:#acacac;margin-bottom:12px}
.muted.small{color:red;margin-bottom:12px}
.center-card input {
  width: 100%;
  padding: 12px;
  box-sizing: inherit;
  border-radius: 8px;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  margin-bottom: 12px;
}

.row{
    display:flex; 
    justify-content:center
    
}
.row .ghost{display:inline-block;padding:10px 12px;color:#acacac;text-decoration:none;border-radius:8px;background:transparent;border:1px solid #000}

.chat-shell{max-width:900px;margin:20px auto;padding:0 12px}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:12px 8px;color:var(--muted)}
.chat-box{background:#07101a;border-radius:10px;padding:14px;min-height:240px;height:50vh;overflow:auto;border:1px solid rgba(255,255,255,0.03)}
.chat-form{display:flex;gap:8px;margin-top:12px}
.chat-form input[type="text"]{flex:1;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}
.btn{background:var(--accent);border:none;padding:10px 14px;border-radius:8px;color:#000;font-weight:600;cursor:pointer}
.btn-danger{background:var(--danger);border:none;padding:8px 12px;border-radius:8px;color:#fff;cursor:pointer}
.link-small{color:var(--muted);text-decoration:none;margin-right:12px}
.alert{padding:12px;background:#3b1f1f;border-radius:8px;color:#ffc6c6}
.small{font-size:1.6rem;opacity:0.9}
@media(max-width:600px){
  .chat-box{height:45vh}
  .chat-form{flex-direction:column}
  .row{flex-direction:column}
}

#create {
  background: linear-gradient(135deg, #61dafb, #38c0ff);
  padding: 12px 18px;
  font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  color: #000;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#create:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}