/* 9chat — طرح تیره، موبایل‌محور و راست‌چین */

/* فونت واژه‌نشان، محلی میزبانی می‌شود تا برنامه به هیچ سرویس بیرونی وابسته نباشد
   (در قطعی اینترنت هم باید کامل بالا بیاید). فقط لاتین است، پس متن فارسی
   به‌صورت خودکار روی فونت سیستم می‌افتد. */
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b1016;
  --bg-2: #121a24;
  --bg-3: #1a2431;
  --line: #24303f;
  --text: #e8eef6;
  --muted: #8ea0b5;
  --accent: #4b3bff;
  --accent-2: #3d2fe6;
  --bubble-me: #4033cc;
  --bubble-them: #1b2634;
  --danger: #ef4444;
  --ok: #2ee6a6;
  --brand-dot: #2ee6a6;
  --radius: 16px;
  --header-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: system-ui, 'Segoe UI', Vazirmatn, Tahoma, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
}

body { font-size: 15px; line-height: 1.6; }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.is-hidden { display: none !important; }
.muted { color: var(--muted); font-size: 12px; }

.screen { height: 100dvh; }

/* ---------------------------- ورود / ثبت‌نام ---------------------------- */

.auth-screen {
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, #1b1840 0%, var(--bg) 60%);
}

.auth-card {
  width: min(420px, 100%);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 22px calc(22px + var(--safe-bottom));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.brand { text-align: center; margin-bottom: 18px; }

/* قفل‌شده‌ی برند: نشانِ ۹ کنار واژه‌ی chat — با هم «9chat» را می‌سازند. */
.brand-lockup {
  margin: 0 0 4px;
  /* لوگو همیشه چپ‌به‌راست می‌ماند، وگرنه در صفحه‌ی راست‌چین «chat9» خوانده می‌شود. */
  direction: ltr;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.brand-mark { width: 40px; height: 48px; color: #fff; flex: none; }
.brand-word {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600; font-size: 44px; line-height: 1;
  letter-spacing: -.03em; color: #fff; margin-top: 5px;
}

/* همان نشان، کوچک، برای سربرگ پنل مدیریت */
.mark-sm { width: 20px; height: 24px; color: var(--text); flex: none; }

.tabs {
  display: flex; gap: 6px; padding: 5px;
  background: var(--bg-3); border-radius: 14px; margin-bottom: 18px;
}
.tab {
  flex: 1; padding: 9px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font-weight: 600;
}
.tab.is-active { background: var(--accent); color: #fff; }

.auth-form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; color: var(--muted); }
.field input, .field textarea, .search-row input, .modal-body input, .modal-body textarea {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  width: 100%;
}
.field input:focus, .search-row input:focus, .modal-body input:focus { border-color: var(--accent); }

.btn {
  border: 0; border-radius: 12px; padding: 12px 16px;
  font-weight: 700; background: var(--bg-3); color: var(--text);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:active { background: var(--accent-2); }
.btn-danger { background: rgba(239, 68, 68, .15); color: #fca5a5; }
.btn:disabled { opacity: .6; }
.hint { color: var(--muted); font-size: 12px; text-align: center; margin: 0; }

.auth-message { min-height: 20px; margin: 14px 0 0; text-align: center; font-size: 13px; }
.auth-message.error { color: #fca5a5; }
.auth-message.ok { color: #86efac; }

/* -------------------------------- چیدمان ------------------------------- */

.app-screen { display: grid; grid-template-columns: 340px 1fr; }

.sidebar {
  display: flex; flex-direction: column;
  border-inline-end: 1px solid var(--line);
  background: var(--bg-2);
  min-height: 0;
}

.sidebar-header {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-top)) 12px 10px;
  border-bottom: 1px solid var(--line);
}
.sidebar-title { flex: 1; min-width: 0; line-height: 1.3; }
.sidebar-title strong { display: block; font-size: 15px; }
.sidebar-footer {
  padding: 8px 12px calc(8px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
}

.avatar {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-weight: 700; color: #fff; flex: none; font-size: 15px;
  background: var(--accent);
}
.avatar-btn { border: 0; background: none; padding: 0; }
.avatar.online::after {
  content: ''; position: absolute; inset-inline-end: 0; bottom: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--bg-2);
}

.icon-btn {
  border: 0; background: transparent; color: var(--muted);
  width: 38px; height: 38px; border-radius: 12px;
  display: inline-grid; place-items: center; flex: none;
  text-decoration: none;
}
.icon-btn:active { background: var(--bg-3); color: var(--text); }

.search-row { padding: 10px 12px; }

.conversation-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.conversation {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border: 0; width: 100%;
  background: transparent; text-align: start; color: inherit;
}
.conversation:active, .conversation.is-active { background: var(--bg-3); }
.conversation-main { flex: 1; min-width: 0; }
.conversation-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conversation-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-preview {
  color: var(--muted); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge {
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 12px; font-weight: 700; flex: none;
}
.empty-list { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* -------------------------------- گفتگو -------------------------------- */

.chat-panel { display: flex; min-width: 0; min-height: 0; }
.chat-view { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.empty-state {
  flex: 1; display: grid; place-content: center; text-align: center;
  color: var(--muted); gap: 8px;
}
.empty-icon { font-size: 40px; }

.chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + var(--safe-top)) 12px 8px;
  border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.chat-title { flex: 1; min-width: 0; line-height: 1.3; }
.chat-title strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ناحیه‌ی پیام‌ها، تا دکمه‌ی شناور بتواند نسبت به آن جا بگیرد */
.message-area { position: relative; flex: 1; min-height: 0; display: flex; }

.message-list {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 12px 6px; scroll-behavior: smooth;
  display: flex; flex-direction: column; gap: 4px;
  background:
    radial-gradient(900px 400px at 100% 0%, rgba(75, 59, 255, .09), transparent 60%),
    var(--bg);
}

.day-divider { align-self: center; margin: 10px 0; }
.day-divider span {
  background: var(--bg-3); color: var(--muted);
  border-radius: 999px; padding: 3px 12px; font-size: 12px;
}

.system-message { align-self: center; margin: 4px 0; }
.system-message span {
  background: var(--bg-3); color: var(--muted);
  border-radius: 999px; padding: 4px 12px; font-size: 12px;
}

.message-row { display: flex; max-width: 100%; }
/* در چیدمان راست‌چین، پیام‌های خودم سمت چپ و پیام‌های طرف مقابل سمت راست قرار می‌گیرند. */
.message-row.mine { justify-content: flex-end; }
.message-row.theirs { justify-content: flex-start; }

.bubble {
  max-width: min(78%, 560px);
  background: var(--bubble-them);
  border-radius: 16px;
  padding: 7px 11px 6px;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.message-row.mine .bubble { background: var(--bubble-me); border-end-end-radius: 6px; }
.message-row.theirs .bubble { border-end-start-radius: 6px; }
.bubble.grouped { margin-top: 2px; }

/* حباب فقط-عکس: عکس تا لبه می‌رود و زمان روی نوار باریک زیرش می‌نشیند */
.bubble.media { padding: 4px 4px 2px; }
.bubble.media .bubble-image { margin-bottom: 0; border-radius: 13px; }
.bubble.media .bubble-meta { padding: 3px 6px 0; }

.bubble-author { font-size: 12px; font-weight: 700; color: #93c5fd; margin-bottom: 2px; }
.bubble-text { white-space: pre-wrap; }
.bubble-text.deleted { color: var(--muted); font-style: italic; }

.bubble-reply {
  border-inline-start: 3px solid rgba(255, 255, 255, .5);
  background: rgba(0, 0, 0, .2);
  border-radius: 8px; padding: 4px 8px; margin-bottom: 5px; font-size: 13px;
}
.bubble-reply small { display: block; color: #bfdbfe; }

/* نسبت ابعاد از روی خود عکس ست می‌شود تا موقع بارگذاری چیدمان نپرد. */
.bubble-image {
  display: block; margin: 0 0 4px; border-radius: 12px; overflow: hidden;
  background: rgba(0, 0, 0, .28); border: 0; padding: 0;
  width: 100%; max-height: 62vh;
}
.bubble-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bubble-meta {
  display: flex; align-items: center; gap: 5px; justify-content: flex-start;
  font-size: 11px; color: rgba(232, 238, 246, .62); margin-top: 3px;
  direction: ltr;
}
.message-row.theirs .bubble-meta { color: var(--muted); }

/* تیک وضعیت: در حال ارسال → ارسال شد → خوانده شد */
.tick { display: inline-flex; align-items: center; }
.tick svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.tick-pending { opacity: .7; }
.tick-pending svg { stroke-width: 1.8; }
.tick-read { color: var(--brand-dot); }

/* دکمه‌ی شناور رفتن به آخرین پیام */
.jump-btn {
  position: absolute; inset-inline-end: 14px; bottom: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--text);
  display: grid; place-items: center; z-index: 5;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.jump-btn:active { background: var(--line); }
.jump-badge {
  position: absolute; top: -6px; inset-inline-start: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}

.bubble-actions {
  position: absolute; top: 2px; inset-inline-end: -34px;
  display: none; gap: 2px;
}
.bubble:hover .bubble-actions, .bubble.show-actions .bubble-actions { display: flex; }
.bubble-actions button {
  width: 28px; height: 28px; border-radius: 8px; border: 0;
  background: var(--bg-3); color: var(--muted); display: grid; place-items: center;
}

.typing-indicator { padding: 2px 16px 6px; color: var(--muted); font-size: 12px; }

.reply-bar, .image-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-2);
}
.reply-bar-text { flex: 1; min-width: 0; font-size: 13px; }
.reply-bar-text span { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-preview img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.image-preview-meta { flex: 1; min-width: 0; }
.image-preview-meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

.composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px calc(8px + var(--safe-bottom));
  border-top: 1px solid var(--line); background: var(--bg-2);
}
.composer textarea {
  flex: 1; resize: none; max-height: 132px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 18px; padding: 10px 14px; outline: none;
}
.composer textarea:focus { border-color: var(--accent); }
.send-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; display: grid; place-items: center; flex: none;
}
.send-btn:disabled { opacity: .5; }
/* آیکون هواپیما در چیدمان راست‌چین باید به سمت چپ نشانه برود. */
.send-btn svg { transform: scaleX(-1); }

/* -------------------------------- پنجره‌ها ------------------------------ */

.modal-root { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.modal {
  position: relative; width: min(460px, 100%); max-height: 84dvh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.modal-body { padding: 14px; overflow-y: auto; display: grid; gap: 12px; }

.modal-divider {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}

.user-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg-3); color: inherit; text-align: start;
}
.user-row.is-selected { border-color: var(--accent); }
.user-row-main { flex: 1; min-width: 0; }
.user-row-main strong { display: block; font-size: 14px; }

.lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .94);
  display: grid; place-items: center; padding: 16px;
}
.lightbox img { max-width: 100%; max-height: 88dvh; border-radius: 10px; }
.lightbox-close { position: absolute; top: calc(12px + var(--safe-top)); inset-inline-end: 12px; color: #fff; }
.lightbox-download { position: absolute; top: calc(12px + var(--safe-top)); inset-inline-start: 12px; color: #fff; }

.toast {
  position: fixed; bottom: calc(22px + var(--safe-bottom)); inset-inline: 0;
  margin-inline: auto; width: fit-content; max-width: 86%; z-index: 80;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px; font-size: 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.toast.error { border-color: rgba(239, 68, 68, .6); color: #fca5a5; }

.only-mobile { display: none; }

/* -------------------------------- موبایل ------------------------------- */

@media (max-width: 820px) {
  .app-screen { grid-template-columns: 1fr; }
  .sidebar, .chat-panel { grid-column: 1; grid-row: 1; }
  .chat-panel { display: none; }
  .app-screen.show-chat .sidebar { display: none; }
  .app-screen.show-chat .chat-panel { display: flex; }
  .only-mobile { display: inline-grid; }
  .bubble { max-width: 84%; }
  .bubble-actions { position: static; margin-top: 4px; }
}

@media (prefers-reduced-motion: no-preference) {
  .message-row { animation: pop .16s ease-out; }
  @keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}