/* ===== Base / Theme ===== */
:root{
  --glass-bg: rgba(255,255,255,0.12);
  --glass-brd: rgba(255,255,255,0.25);
  --txt: #f4f6ff;
  --txt-dim: rgba(244,246,255,0.7);
  --accent: #7b8cff;
  --accent-2: #c08cff;
  --bubble-me: linear-gradient(135deg,#6d8bff,#9b6bff);
  --bubble-them: rgba(255,255,255,0.16);
}

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

body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--txt);
  min-height:100vh;
  background:linear-gradient(135deg,#1b2240 0%,#241a3d 50%,#10182e 100%);
  overflow-x:hidden;
  display:flex;
  position:relative;
}

/* ===== Animated background blobs ===== */
.bg-blobs{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.blob{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.55;
  animation:float 18s ease-in-out infinite;
}
.blob-1{ width:420px; height:420px; background:#5b6dff; top:-120px; left:-80px; }
.blob-2{ width:360px; height:360px; background:#c462ff; bottom:-100px; right:-60px; animation-delay:-6s; }
.blob-3{ width:300px; height:300px; background:#33d6ff; top:40%; left:55%; animation-delay:-12s; }
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,-40px) scale(1.1); }
}

/* ===== Screens ===== */
.screen{
  position:relative; z-index:1;
  width:100%; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.hidden{ display:none !important; }

/* ===== Glass effect ===== */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 8px 40px rgba(0,0,0,0.35);
  border-radius:24px;
}

/* ===== Join card ===== */
.join-card{ width:100%; max-width:400px; padding:38px 32px; text-align:center; }
.brand{ display:flex; align-items:center; justify-content:center; gap:12px; }
.brand i{ font-size:30px; color:var(--accent-2); }
.brand h1{ font-size:32px; font-weight:700; letter-spacing:-.5px; }
.tagline{ color:var(--txt-dim); margin:10px 0 26px; font-size:14px; }

.field{ display:block; text-align:left; margin-bottom:16px; }
.field span{ font-size:13px; color:var(--txt-dim); display:block; margin-bottom:7px; }
.field input{
  width:100%; padding:13px 15px; font-size:15px; color:var(--txt);
  background:rgba(255,255,255,0.08);
  border:1px solid var(--glass-brd); border-radius:14px; outline:none;
  transition:border .2s, background .2s;
}
.field input::placeholder{ color:rgba(244,246,255,0.4); }
.field input:focus{ border-color:var(--accent); background:rgba(255,255,255,0.14); }

.join-actions{ display:flex; gap:10px; margin-top:6px; }

/* ===== Buttons ===== */
.btn{
  border:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:14px;
  padding:13px 18px; border-radius:14px; color:var(--txt);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s, box-shadow .2s, opacity .2s;
}
.btn:active{ transform:scale(.96); }
.btn.primary{ flex:1; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 6px 20px rgba(123,108,255,.4); }
.btn.ghost{ background:rgba(255,255,255,0.1); border:1px solid var(--glass-brd); }
.btn.send{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); padding:13px 16px; }
.hint{ font-size:12px; color:var(--txt-dim); margin-top:18px; }

/* ===== Chat card ===== */
.chat-card{
  width:100%; max-width:520px; height:min(82vh,720px);
  display:flex; flex-direction:column; overflow:hidden;
}
.chat-header{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--glass-brd);
}
.room-meta{ flex:1; line-height:1.3; }
.room-name{ font-size:15px; }
.room-name strong{ color:var(--accent-2); }
.room-sub{ display:block; font-size:12px; color:var(--txt-dim); }
.icon-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--glass-brd);
  background:rgba(255,255,255,0.08); color:var(--txt); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.icon-btn:hover{ background:rgba(255,255,255,0.18); }

/* ===== Messages ===== */
.messages{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.messages::-webkit-scrollbar{ width:6px; }
.messages::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.2); border-radius:6px; }

.msg{ max-width:78%; padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.4; word-wrap:break-word; animation:pop .25s ease; }
@keyframes pop{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0);} }
.msg .who{ font-size:11px; color:var(--txt-dim); margin-bottom:3px; display:block; }
.msg .time{ font-size:10px; opacity:.6; margin-left:6px; }

.msg.them{ align-self:flex-start; background:var(--bubble-them); border-bottom-left-radius:6px; }
.msg.me{ align-self:flex-end; background:var(--bubble-me); border-bottom-right-radius:6px; box-shadow:0 4px 14px rgba(123,108,255,.35); }

.empty-state{ margin:auto; text-align:center; color:var(--txt-dim); }
.empty-state i{ font-size:38px; opacity:.5; display:block; margin-bottom:10px; }

/* ===== Send bar ===== */
.send-bar{ display:flex; gap:10px; padding:14px; border-top:1px solid var(--glass-brd); }
.send-bar input{
  flex:1; padding:13px 16px; font-size:15px; color:var(--txt);
  background:rgba(255,255,255,0.08); border:1px solid var(--glass-brd);
  border-radius:14px; outline:none;
}
.send-bar input:focus{ border-color:var(--accent); }
.send-bar input::placeholder{ color:rgba(244,246,255,0.4); }

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:rgba(20,24,45,0.9); border:1px solid var(--glass-brd);
  padding:11px 20px; border-radius:12px; font-size:13px; z-index:50;
  backdrop-filter:blur(10px); animation:pop .25s ease;
}

@media (max-width:480px){
  .chat-card{ height:90vh; border-radius:18px; }
  .join-card{ padding:30px 22px; }
}

/* ===== Custom Message Layout Update (Beta 0.1.1) ===== */
.msg {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 10px 14px 6px 14px; /* فضای پایین را برای ساعت کمی بیشتر کردیم */
  min-width: 80px; /* حداقل عرض برای اینکه اگر پیام تک کلمه‌ای بود ظاهر خراب نشود */
}

.msg-content {
  word-wrap: break-word;
  margin-bottom: 4px; /* ایجاد یک فاصله کوچک بین متن پیام و ساعت زیرین */
}

.msg-meta {
  display: flex;
  justify-content: flex-end; /* ساعت را به گوشه می‌برد */
  width: 100%;
}

/* برای پیام‌های دیگران ساعت در گوشه چپ و برای شما در گوشه راست مرتب می‌شود */
.msg.them .msg-meta {
  justify-content: flex-start;
}

.msg .time {
  font-size: 10px;
  opacity: 0.55;
  margin-left: 0; /* ریست کردن فاصله قبلی */
}

/* ===== Version Tag ===== */
.version-tag {
  font-size: 11px;
  color: rgba(244, 246, 255, 0.3);
  margin-top: 15px;
  text-align: center;
  letter-spacing: 0.5px;
}
.version-tag.chat-v {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* ===== Dashboard Additions (Beta 0.2.0) ===== */
#rooms-list {
  max-height: 380px;
  overflow-y: auto;
}
#rooms-list::-webkit-scrollbar {
  width: 4px;
}
#rooms-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
.dashboard-actions input:focus {
  outline: none;
  border-color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}