/* ============================================================ chat-drawer.css — استایل کشوی چت (Drawer سمت راست) شامل: قاب کلی صفحه (app-body)، لیست مخاطبین، صفحه گفتگو و حباب پیام‌ها این کشو در partials/chat_drawer.php تعریف شده و در همه‌ی صفحات داخل سیستم (با ورود کاربر) فعال است ============================================================ */ /* ── قاب کلی صفحه زیر هدر ────────────────────────────────── */ /* نکته مهم: این قانون فقط باید روی صفحاتی اعمال شود که bodyClass شامل app است (در گذشته سلکتور «html, body.app» باعث می‌شد همه صفحات از جمله مدیریت کاربران هم غیرقابل‌اسکرول شوند، چون html همیشه این قانون را می‌گرفت بدون قید و شرط). کلاس html-app توسط partials/head.php فقط زمانی به اضافه می‌شود که $bodyClass شامل 'app' باشد. */ html.html-app, body.app { height: 100%; height: 100dvh; overflow: hidden; } .app-body { display: flex; height: 100%; padding-top: 56px; /* فضای نوار بالا */ } /* ── کشوی چت ──────────────────────────────────────────────── */ .sidebar { width: 0; flex-shrink: 0; background: var(--surface); border-left: 1.5px solid var(--border); display: flex; flex-direction: column; transition: width .28s cubic-bezier(.4,0,.2,1); overflow: hidden; position: relative; z-index: 100; } .sidebar.open { width: 340px; } @media (max-width: 780px) { .sidebar.open { position: fixed; right: 0; top: 56px; bottom: 0; width: 100% !important; z-index: 190; height: calc(100% - 56px); } } .sidebar-tabs { display: flex; border-bottom: 1.5px solid var(--border); flex-shrink: 0; } .stab { flex: 1; padding: 11px 4px; text-align: center; font-size: .8rem; font-weight: 700; cursor: pointer; border-bottom: 2.5px solid transparent; color: var(--text-muted); transition: .2s; } .stab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ── لیست مخاطبین ─────────────────────────────────────────── */ .contacts-pane { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .contacts-search-row { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 6px; } .contacts-search-row input { flex: 1; padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-family: 'Vazirmatn', sans-serif; font-size: .8rem; outline: none; } .contact-list-wrap { flex: 1; overflow-y: auto; } .contact-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; border-bottom: 1px solid var(--border); transition: .15s; position: relative; } .contact-item:hover { background: var(--surface-alt); } .contact-item.active { background: var(--accent-faint); } .contact-av { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-faint); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; overflow: hidden; position: relative; } .contact-av.group-av { border-radius: 12px; border-color: var(--accent); } .contact-av img { width: 100%; height: 100%; object-fit: cover; } .online-dot { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); } .contact-info { flex: 1; min-width: 0; } .contact-name { font-weight: 700; font-size: .87rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact-last { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .contact-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .contact-time { font-size: .65rem; color: var(--text-muted); } .unread-badge { background: var(--accent); color: #fff; border-radius: 10px; min-width: 18px; height: 18px; font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* ── صفحه گفتگو ───────────────────────────────────────────── */ .chat-pane { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--chat-bg); } .chat-header { background: var(--surface); padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--border); flex-shrink: 0; } .chat-back { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--accent); padding: 0 4px; } .chat-header-info { flex: 1; min-width: 0; } .chat-peer-name { font-weight: 700; font-size: .93rem; } .chat-peer-status { font-size: .72rem; color: var(--text-muted); margin-top: 1px; } .chat-header-acts { display: flex; gap: 4px; } .chat-messages { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; background-image: url('../img/chatbg.png'); background-size: cover; background-position: center; } .msg-row { display: flex; align-items: flex-end; gap: 6px; } .msg-row.me { flex-direction: row-reverse; } .msg-av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-faint); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .7rem; flex-shrink: 0; overflow: hidden; } .msg-av img { width: 100%; height: 100%; object-fit: cover; } .msg-bubble { max-width: 72%; padding: 7px 11px 5px; border-radius: 14px; font-size: .85rem; line-height: 1.55; word-break: break-word; position: relative; } .msg-bubble.me { background: var(--chat-me); border-bottom-right-radius: 3px; } .msg-bubble.other { background: var(--chat-other); border-bottom-left-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .msg-time { font-size: .62rem; color: var(--text-muted); text-align: left; margin-top: 3px; display: block; } .msg-row.me .msg-time { text-align: right; } .msg-img { max-width: 200px; max-height: 200px; border-radius: 10px; cursor: pointer; display: block; object-fit: cover; } .msg-file { display: flex; align-items: center; gap: 7px; background: var(--surface-alt); border-radius: 9px; padding: 7px 10px; text-decoration: none; color: var(--text-primary); font-size: .8rem; font-weight: 600; } .msg-file:hover { background: var(--accent-faint); } /* ── نوار ارسال پیام ──────────────────────────────────────── */ .chat-input-bar { background: var(--surface); padding: 8px 12px; display: flex; align-items: center; gap: 7px; border-top: 1.5px solid var(--border); flex-shrink: 0; } .chat-inp { flex: 1; padding: 9px 13px; border-radius: 22px; border: 1.5px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-family: 'Vazirmatn', sans-serif; font-size: .88rem; outline: none; transition: .2s; resize: none; max-height: 100px; line-height: 1.4; } .chat-inp:focus { border-color: var(--accent); } .chat-send-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; flex-shrink: 0; transition: .2s; } .chat-send-btn:hover { filter: brightness(1.1); } .chat-file-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-alt); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .95rem; flex-shrink: 0; } .chat-file-btn:hover { background: var(--accent-faint); } .chat-file-input { display: none; } .chat-file-preview { display: none; padding: 5px 12px; background: var(--surface-alt); border-top: 1px solid var(--border); font-size: .76rem; color: var(--accent); align-items: center; gap: 8px; }