/* Family Chat v2 - modern RTL/LTR */
:root{
  --bg:#050914;
  --card:rgba(255,255,255,0.04);
  --card2:rgba(255,255,255,0.06);
  --border:rgba(148,163,184,0.18);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#38bdf8;
  --good:#22c55e;
  --bad:#ef4444;
  --shadow: 0 14px 40px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(56,189,248,0.20), transparent 55%),
              radial-gradient(1000px 600px at 90% 20%, rgba(34,197,94,0.12), transparent 55%),
              var(--bg);
  color:var(--text);
}
a{color:var(--accent); text-decoration:none}
.container{max-width:1150px; margin:0 auto; padding:16px}
.card{
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.02));
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;
}
.brand{display:flex; align-items:center; gap:10px}
.logo{
  width:34px;height:34px;border-radius:12px;
  background: linear-gradient(135deg, rgba(56,189,248,0.8), rgba(34,197,94,0.7));
  box-shadow: 0 10px 30px rgba(56,189,248,0.25);
}
.title{font-size:18px;font-weight:900}
.badge{
  padding:4px 10px; border:1px solid var(--border); border-radius:999px;
  color:var(--muted); font-size:12px; background:rgba(15,23,42,0.35);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background: rgba(15,23,42,0.55); color:var(--text); cursor:pointer;
}
.btn:hover{border-color:rgba(56,189,248,0.6)}
.input, select, textarea{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background: rgba(15,23,42,0.55); color:var(--text);
  outline:none;
}
.small{color:var(--muted); font-size:13px}
.row{display:flex; gap:12px}
.col{flex:1}
hr{border:none; border-top:1px solid var(--border); margin:12px 0}

.split{display:grid; grid-template-columns: 340px 1fr; gap:12px}
@media (max-width: 920px){ .split{grid-template-columns:1fr} }

.tabs{display:flex; gap:8px; margin-bottom:10px}
.tab{flex:1; text-align:center; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(15,23,42,0.35); cursor:pointer}
.tab.active{border-color:rgba(56,189,248,0.7); background:rgba(56,189,248,0.12)}

.list{display:flex; flex-direction:column; gap:8px; max-height:68vh; overflow:auto; padding-right:2px}
.item{
  padding:10px 12px; border-radius:14px; border:1px solid var(--border);
  background: rgba(15,23,42,0.35); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.item:hover{border-color:rgba(56,189,248,0.55)}
.item.active{border-color:rgba(56,189,248,0.9)}
.left{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.avatar{
  width:34px; height:34px; border-radius:14px;
  background: rgba(56,189,248,0.14);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}
.names{min-width:0}
.names .name{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.names .meta{color:var(--muted); font-size:12px}
.dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(148,163,184,0.35);
  border:1px solid var(--border);
}
.dot.online{background:rgba(34,197,94,0.8); border-color:rgba(34,197,94,0.8)}
.count{
  min-width:26px; height:22px; border-radius:999px;
  background: rgba(239,68,68,0.16); border:1px solid rgba(239,68,68,0.35);
  color:#fecaca; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; padding:0 8px;
}

.chatbox{display:flex; flex-direction:column; height:68vh}
.headerline{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.messages{
  flex:1; overflow:auto; padding:10px; border-radius:14px;
  border:1px solid var(--border); background: rgba(15,23,42,0.35);
}
.msg{
  margin:10px 0; padding:10px 12px; border-radius:14px;
  border:1px solid var(--border); background: rgba(2,6,23,0.35);
}
.msg.me{
  border-color:rgba(56,189,248,0.40);
  background: rgba(56,189,248,0.10);
}
.msg .meta{display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; margin-bottom:6px}
.msg .body{line-height:1.55}
.msg .file{margin-top:8px; padding:10px; border-radius:12px; border:1px dashed rgba(56,189,248,0.45); background: rgba(56,189,248,0.08)}
.msg .file a{font-weight:800}

.composer{display:flex; gap:8px; margin-top:10px; align-items:flex-end}
.composer textarea{flex:1; min-height:44px; max-height:160px; resize:vertical}
.notice{padding:10px 12px; border:1px dashed rgba(56,189,248,0.5); border-radius:14px; color:var(--muted); background: rgba(56,189,248,0.07)}

/* RTL tweaks */
[dir="rtl"] .topbar, [dir="rtl"] .row, [dir="rtl"] .composer, [dir="rtl"] .headerline { direction: rtl; }
[dir="rtl"] .meta { direction: rtl; }


/* ---- Mobile-first improvements (v3) ---- */
.shell{display:grid; grid-template-columns: 340px 1fr; gap:12px}
.sidebar{min-width:0}
.main{min-width:0}

@media (max-width: 920px){
  .shell{grid-template-columns:1fr}
  /* Mobile drawer behavior */
  body.mobile-sidebar-open .sidebar{display:block}
  body.mobile-sidebar-open .main{display:none}
  body:not(.mobile-sidebar-open) .sidebar{display:none}
  body:not(.mobile-sidebar-open) .main{display:block}
  .topbar{position:sticky; top:0; z-index:10}
}

.mobile-btn{
  display:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(15,23,42,0.55);
  color:var(--text);
  cursor:pointer;
}
@media (max-width: 920px){
  .mobile-btn{display:inline-flex; align-items:center; gap:8px;}
}

@media (max-width: 520px){
  .composer{flex-direction:column; align-items:stretch}
  .composer textarea{width:100%}
  .composer .btn{width:100%; justify-content:center}
  .composer .filewrap{width:100%}
  .list{max-height:62vh}
  .chatbox{height:74vh}
  .messages{font-size:15px}
}


/* ---- Composer fixes (v4) ---- */
.composer{flex-wrap:wrap}
.composer textarea{min-width:0}

@media (max-width: 520px){
  .composer{flex-direction:column; align-items:stretch; gap:10px}
  .composer textarea{width:100% !important; min-width:0 !important}
  .composer .filewrap{width:100% !important; min-width:0 !important}
  .composer .filewrap input[type="file"]{width:100%}
  .composer .btn{width:100% !important; justify-content:center}
}


/* ---- Composer layout overhaul (v5) ---- */
/* On small screens, stack composer elements to prevent the textarea from shrinking */
@media (max-width: 920px){
  .composer{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items:stretch !important;
  }
  .composer textarea{
    width:100% !important;
    min-width:0 !important;
  }
  .composer .filewrap{
    width:100% !important;
    min-width:0 !important;
  }
  .composer .filewrap input[type="file"]{
    width:100% !important;
  }
  .composer .btn{
    width:100% !important;
    justify-content:center !important;
  }
}

@media (max-width: 420px){#pollInfo{display:none}}