/* ===============================
   استایل پایه - واکنش‌گرا و مینیمال
================================ */
:root {
  --bg: #f6f9fc;
  --card: #fff;
  --text: #0f1724;
  --muted: #6b7280;
  --accent: #007BFF;
  --danger: #e02424;
}

.msg {
  display: flex;
  margin: 6px 0;
}

.msg.me {
  justify-content: flex-end;
}

.msg.other {
  justify-content: flex-start;
}

.bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 10px;
  background: #d0e9fc;

  display: flex;
  flex-direction: column;
  gap: 4px;

  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* نام کاربر */
.msg .bubble .username {
  font-weight: bold;
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}

/* متن پیام */
.bubble .message-text {
  font-size: 14px;
  line-height: 1.6;
}

/* ساعت */
.msg .bubble .time {
  display: block;
  font-size: 11px;
  color: #777;
  margin-top: 4px;
  direction: ltr;
  /* خیلی مهم */
}
.msg.me .bubble .time {
  text-align: left;
}

.msg.other .bubble .time {
  text-align: right;
}
.msg .bubble {
  text-align: initial;
}

/* پیام دیگران */
.msg.me .bubble {
  background: #d4dcef;
  /* سبز ملایم */
  align-self: flex-start;
}

/* پیام خودم */
.msg.other .bubble {
  background: #ddaffa;
  /* سفید */
  align-self: flex-end;
  border: 1px solid #ddd;
}

/* جای حباب */
.chat-box .msg.me {
  justify-content: flex-end;
}

.chat-box .msg.other {
  justify-content: flex-start;
}

/* خود حباب پیام */
.chat-box .bubble {
  max-width: 40%;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.6;

  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* پیام‌ها راست یا چپ */
.chat-box .msg {
  /*display: flex;*/
  flex-wrap: wrap;
  margin-bottom: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.6;
  max-width: 100%;
  /* حداکثر عرض پیام */
  word-wrap: break-word;
  /* شکستن کلمات بلند */
  overflow-wrap: break-word;
  white-space: pre-wrap;
  /* حفظ اینتر و شکستن درست */
}

.chat-box .msg a {
  word-break: break-all;
}

/* پیام‌ها بدون کادر */
.chat-box .msg span {
  background: none;
  padding: 0;
  margin: 0 2px;
  color: inherit;
  font-weight: normal;
}

.chat-box .msg .username,
.chat-box .msg .time {
  font-size: 0.85em;
  opacity: 0.7;
  padding: 0;
  margin: 0 2px;
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  direction: rtl;
  font-family: 'BTITRBD', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.hidden {
  display: none
}


/* کاربران خاص قرمز و بولد */
.chat-box .msg.me.special,
.chat-box .msg.other.special {
  color: #e02424;
  font-weight: bold;
}

/* راست و چپ پیام‌ها */
.chat-box .msg.me {
  justify-content: flex-end;
  /* پیام خودم سمت راست */
  text-align: right;
  color: #007BFF;
  /* رنگ پیام دیگران */
}

.chat-box .msg.other {
  justify-content: flex-start;
  /* پیام دیگران سمت چپ */
  text-align: left;
  color: #000000;
  /* رنگ پیام خودم */
}

/* متن و ساعت بدون بکگراند و padding اضافی */
.chat-box .msg span,
.chat-box .msg .time {
  background: none !important;
  padding: 0;
  margin: 0 2px;
  color: inherit;
  font-weight: normal;
}

.chat-box .msg .time {
  font-size: 11px;
  opacity: 0.6;
  align-self: flex-end;
}

/* هیچ بکگراندی برای اسم، متن یا زمان */
.chat-box .msg span,
.chat-box .msg .time {
  background: none;
  padding: 0;
  margin: 0 2px;
  color: inherit;
  font-weight: normal;
}

.chat-box .msg .time {
  font-size: 11px;
  opacity: 0.6;
  margin: 0 4px;
  align-self: flex-end;
}

/* رنگ متن داخل chat-box برای تم‌ها */
.chat-box {
  height: 60vh;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  background: #fff; /* پایه */
  color: #0f1724;   /* متن پیش‌فرض */
}

/* تم گرادیانت و امّدادی */
[data-theme="gradient"] .chat-box,
[data-theme="emdadi"] .chat-box {
  background: linear-gradient(135deg,#eef6ff,#f7fbff);
  color: #0f1724;  /* متن تیره خوانا */
}

/* تم دارک */
[data-theme="dark"] .chat-box {
  background: #1f2937; /* خاکستری تیره */
  color: #f8fafc;      /* متن روشن */
}



/* متن و ساعت بدون بکگراند و padding اضافی */
.chat-box .msg span,
.chat-box .msg .time {
  background: none !important;
  padding: 0;
  margin: 0 2px;
  color: inherit;
  font-weight: normal;
}

.chat-box .msg .time {
  font-size: 11px;
  opacity: 0.6;
  align-self: flex-end;
}

/* متن و ساعت بدون بکگراند و padding اضافی */
.chat-box .msg span,
.chat-box .msg .time {
  background: none !important;
  padding: 0;
  margin: 0 2px;
  color: inherit;
  font-weight: normal;
}

.chat-box .msg .time {
  font-size: 11px;
  opacity: 0.6;
  align-self: flex-end;
}


/* پیام‌ها بدون کادر */
.chat-box .msg span.message-text {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* همه پیام‌ها و جزئیات بدون کادر */
.chat-box .msg span {
  background: transparent !important; /* هیچ بکگراندی */
  padding: 0;                        /* بدون فاصله اضافی */
  border-radius: 0;                  /* بدون گردی */
}

/* رنگ متن بر اساس کاربر */
.chat-box .msg.me span,
.chat-box .msg.other span {
  color: inherit; /* از رنگ chat-box یا تم تبعیت می‌کنه */
}

/* پیام‌ها راست یا چپ */
.chat-box .msg.me {
  justify-content: flex-end;
}

.chat-box .msg.other {
  justify-content: flex-start;
}

/* اندازه ساعت و اسم */
.chat-box .msg .username,
.chat-box .msg .time {
  font-size: 0.85em;
  opacity: 0.7;
}

/* ===============================
   فونت فرم‌ها و وسط‌چین
================================ */
input,
textarea,
select,
button {
  font-family: BTitr, Tahoma, sans-serif
}

.field {
  margin-bottom: 14px;
}

input {
  text-align: center
}

/* ===============================
   هدر بالا
================================ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.brand {
  font-weight: 700;
  font-size: 1.2rem
}

.brand.middle {
  flex: 1;
  text-align: center
}

.theme-switcher select {
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #ddd
}

/* ===============================
   چیدمان صفحه اصلی
================================ */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px)
}

.centered .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 980px;
  padding: 0 16px;
}

/* ===============================
   کارت‌ها
================================ */
.card {
  width: 100%;
  max-width: 820px;
  background: var(--card);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 8px 30px rgba(15, 23, 36, .06)
}

.main-card {
  text-align: center
}

.main-card h1 {
  margin: 0 0 18px;
  font-size: 1.4rem
}

/* ===============================
   فرم‌ها (جلوگیری از دراز شدن)
================================ */
input[type=text],
input[type=password] {
  width: 100%;
  max-width: 360px;
  /* محدودکننده عرض فرم ورود */
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6e9ef;
  font-size: 1rem;
  display: block;
}

.actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  justify-content: center
}

/* ===============================
   دکمه‌ها
================================ */
.btn {
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'BTITRBD';
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 123, 255, .18);
  transition: .12s
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 123, 255, .12)
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(0, 123, 255, .12)
}

.btn-danger {
  background: var(--danger)
}

.note {
  margin-top: 12px;
  color: var(--muted)
}

.alert {
  background: #fff3cd;
  padding: 10px;
  border-radius: 8px;
  color: #856404
}

/* ===============================
   فرم ایجاد اتاق (انیمیشن)
================================ */
/* فرم ایجاد اتاق زیر فرم ورود - مخفی اولیه */
.create-card {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: all .35s ease;
}

/* فعال شدن فرم ایجاد اتاق */
.create-card.active {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
}

/* ===============================
   چت
================================ */
.chat-box {
  height: 60vh;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  background: #fff
}

.msg {
  margin-bottom: 6px
}

.me {
  font-weight: bold;
  color: #007BFF
}

.special {
  font-weight: bold;
  color: #e02424
}

.time {
  font-size: 11px;
  opacity: .6
}

.message-form {
  display: flex;
  gap: 10px;
  margin-top: 12px
}

.message-form input {
  flex: 1;
  max-width: none;
}

.message-form button {
  white-space: nowrap
}

/* ===============================
   پیش‌نمایش فایل
================================ */
.file-preview {
  text-align: center;
  margin-top: 15px
}

.file-preview img,
.file-preview video,
.file-preview audio {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .15)
}

.video-preview video {
  max-width: 480px;
  aspect-ratio: 16/9;
  display: block;
  margin: auto
}

.image-box {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px
}

.image-box img {
  width: 100%;
  height: auto;
  object-fit: contain
}

/* ===============================
   لینک دانلود فایل
================================ */
td a {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: bold
}

td a:hover {
  color: #ff0000 !important
}

/* ===============================
   فونت
================================ */
@font-face {
  font-family: 'BTITRBD';
  src: url('BTITRBD.woff2') format('woff2'),
    url('BTITRBD.woff') format('woff'),
    url('BTITRBD.ttf') format('truetype');
}

/* ===============================
   ریسپانسیو
================================ */
@media (max-width:720px) {
  .card {
    padding: 18px
  }
}