/* ══════════════════════════════════════════════════════════════
   style.css — chat app styles (Vazir, RTL, Bootstrap-based)
   ══════════════════════════════════════════════════════════════ */

/* ──Vazir font ────────────────────────────────────────────────── */
@font-face {
  font-family: 'Vazir';
  src: url('Font/Vazir.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('Font/Vazir-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

html {
  direction: rtl;
}
html, body {
  height: 100%;
}

body {
  font-family: 'Vazir', Tahoma, sans-serif;
  background-color: #f1f3f7;
  /* fill viewport; no whole-page scroll */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

b, strong, .fw-bold, h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* ═══════════ layout ═══════════════════════════════════════════ */
.app-header {
  flex: 0 0 auto;
}

.news-banner {
  flex: 0 0 auto;
  background-color: #fff6d6;
  border-bottom: 1px solid #f0e2a5;
  color: #6d5c00;
}
.btn-close-news {
  --bs-btn-close-color: #6d5c00;
  transform: scale(.8);
}

.layout {
  flex: 1 1 auto;
  min-height: 0;           /* allows children to scroll */
}

/* ──side columns ─────────────────────────────────────────────── */
.side-col {
  flex: 0 0 260px;
  width: 260px;
  overflow-y: auto;
  background-color: #fff;
}
.side-rooms { border-color: #e6e9ef !important; }
.side-users { border-color: #e6e9ef !important; }

.side-head {
  font-weight: 700;
  font-size: .9rem;
  background-color: #f8f9fb;
  position: sticky;
  top: 0;
  z-index: 2;
}

@media (min-width: 768px) {
  .border-end-md  { border-left:  0; border-right: 0; }
  /* in RTL, "start" = right side */
  .side-rooms { border-left: 1px solid #e6e9ef; }
  .side-users { border-right: 1px solid #e6e9ef; }
}

/* ──rooms list ───────────────────────────────────────────────── */
.room-item {
  border: 0;
  border-radius: 0;
  padding: .6rem 1rem;
}
.room-item.active {
  background-color: #e7f1ff;
  color: #0d6efd;
  font-weight: 700;
}
.room-item:not(.active):hover {
  background-color: #f2f6fc;
}

/* ═══════════ chat column ══════════════════════════════════════ */
.chat-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background-color: #eef1f6;
}

.chat-head {
  flex: 0 0 auto;
}

#chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .9rem;
}

.chat-input {
  flex: 0 0 auto;
}
.chat-input textarea {
  resize: none;
  max-height: 120px;
  border-radius: 1rem;
}
.chat-input .btn {
  border-radius: 1rem;
  padding-inline: 1rem;
}

/* ──message bubbles ──────────────────────────────────────────── */
.msg {
  max-width: 78%;
  padding: .45rem .75rem;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  word-break: break-word;
  white-space: pre-wrap;
}
.msg-own {
  align-self: flex-start;          /* RTL: flex-start = right side */
  background-color: #d3e2fd;
  border-bottom-right-radius: .25rem;
}
.msg-other {
  align-self: flex-end;            /* RTL: flex-end = left side */
  background-color: #e9ecef;
  border-bottom-left-radius: .25rem;
}
.msg-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  line-height: 1;
  margin-bottom: .15rem;
}
.msg-own .msg-meta   { color: #3d5a9e; }
.msg-other .msg-meta { color: #6c757d; }
.msg-name { font-weight: 700; }
.msg-time { opacity: .75; }
.msg-text { font-size: .92rem; line-height: 1.7; }

.empty-hint {
  align-self: center;
  margin-top: 2rem;
}

/* ═══════════ user list ════════════════════════════════════════ */
.user-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid #f1f3f7;
}
.user-dot {
  font-size: .6rem;
  margin-top: .55rem;
}
.user-name {
  font-size: .9rem;
  font-weight: 700;
}
.user-sub {
  font-size: .72rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.user-sub a {
  text-decoration: none;
}
.user-sub a:hover { text-decoration: underline; }

/* ═══════════ login page ═══════════════════════════════════════ */
.login-page {
  overflow: auto;                  /* login/admin CAN scroll */
  background-color: #f1f3f7;
}
.login-page .container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.login-card { border-radius: 1rem; }
.login-logo { font-size: 3rem; }
.login-page input {
  border-radius: .75rem;
}
.login-page .btn { border-radius: .75rem; }

/* ═══════════ admin page ═══════════════════════════════════════ */
.admin-page {
  overflow: auto;                  /* admin CAN scroll */
}
.admin-page .card { border-radius: .9rem; }
.admin-page table { font-size: .82rem; }
.news-item-time { font-size: .7rem; }

/* ═══════════ subtle scrollbars ════════════════════════════════ */
.chat-messages, .side-col, .user-list, .table-responsive {
  scrollbar-width: thin;
  scrollbar-color: #c4ccd6 transparent;
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: #cbd3dc;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background-color: #aeb8c4; }

/* ═══════════ mobile ═══════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .layout {
    flex-direction: column;
  }
  .side-col {
    flex: 0 0 auto;
    width: 100%;
    max-height: 40vh;
  }
  .chat-col {
    flex: 1 1 auto;
    min-height: 0;
  }
  .msg { max-width: 92%; }
  .user-dot { margin-top: .35rem; }
}