/* Deemlo Chat - dark UI (Deailo-like) */
:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --card:#101a24;
  --border:rgba(255,255,255,.08);
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --accent:#ff3d8d;
  --accent2:#7c3aed;
  --good:#16a34a;
  --warn:#f59e0b;
}
html,body{height:100%;}
body{background:var(--bg); color:var(--text);}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); backdrop-filter: blur(10px);}
.chat-shell{display:flex;gap:12px;max-width:1280px;margin:0 auto;padding:12px;min-height:100vh;}
.chat-left{width:260px;flex:0 0 260px;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;backdrop-filter: blur(12px);}
.chat-right{width:320px;flex:0 0 320px;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;backdrop-filter: blur(12px);}
.chat-main{flex:1;min-width:0;}
.room-item{width:100%;display:flex;gap:10px;align-items:center;text-align:left;padding:10px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);}
.room-item:hover{background:rgba(255,255,255,.06);}
.room-item.active{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.35);}
.tab{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:12px;color:#cbd5e1;}
.tab-active{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.35);}

@media (max-width: 1024px){
  .chat-right{display:none;}
  .chat-shell{max-width:960px;}
}
@media (max-width: 768px){
  .chat-left{display:none;}
  .chat-shell{padding:8px;}
}

.card{background:var(--card); border:1px solid var(--border); border-radius:16px;}
.btn{border:1px solid var(--border); background:rgba(255,255,255,.04); padding:.6rem .9rem; border-radius:12px; transition:transform .08s ease, background .2s ease;}
.btn:hover{background:rgba(255,255,255,.08);} 
.btn:active{transform:scale(.98);} 
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2)); border:none;}
.input{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; padding:.7rem .9rem; color:var(--text); outline:none;}
.input:focus{border-color:rgba(255,61,141,.45); box-shadow:0 0 0 4px rgba(255,61,141,.12);} 
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border-radius:999px; font-size:.72rem; border:1px solid var(--border); color:var(--muted);} 
.badge-green{background:rgba(22,163,74,.12); color:#7cf0a0; border-color:rgba(22,163,74,.25);} 
.badge-yellow{background:rgba(245,158,11,.12); color:#ffd08a; border-color:rgba(245,158,11,.25);} 
.badge-red{background:rgba(239,68,68,.12); color:#ff9aa0; border-color:rgba(239,68,68,.25);} 
.fade-in{animation:fadeIn .18s ease both;} 
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);}to{opacity:1; transform:translateY(0);}}

/* Chat */
.msg.system{margin:10px 0;}
.msg{max-width:80%;}
.msg.me{margin-left:auto;}
.bubble{border:1px solid var(--border); background:rgba(255,255,255,.04); border-radius:18px; padding:.55rem .7rem;}
.msg.me .bubble{background:linear-gradient(180deg, rgba(255,61,141,.22), rgba(124,58,237,.14)); border-color:rgba(255,61,141,.18);} 
.reactions{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem;}
.react-chip{font-size:.8rem; padding:.12rem .45rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.03);} 

/* Mobile */
@media (max-width: 640px){
  .msg{max-width:92%;}
}