/* --- Captcha Styles --- */
.captcha-container {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
background: #f8f9fa;
padding: 10px;
border-radius: 12px;
border: 1px solid #eee;
}
body.dark-mode .captcha-container {
background: #1c2733;
border-color: #2b3948;
}
.captcha-img {
border-radius: 8px;
cursor: pointer;
height: 40px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
/* جلوگیری از انتخاب و منوی لمسی در موبایل */
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
pointer-events: auto;
}
.captcha-input {
flex: 1;
padding: 10px !important;
font-size: 16px !important;
text-align: center;
letter-spacing: 2px;
font-weight: bold;
text-transform: uppercase;
}
.captcha-refresh-btn {
background: none;
border: none;
color: var(--ios-blue);
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.captcha-refresh-btn:hover {
opacity: 0.8;
}
/* --- User Ranks & Badges Styles --- */
.user-rank-badge {
width: 16px;
height: 16px;
object-fit: contain;
vertical-align: middle;
margin-right: 4px;
cursor: help;
transition: transform 0.2s;
}
.user-rank-badge:hover { transform: scale(1.2); }
/* Tooltip Style */
.rank-tooltip {
position: relative;
display: inline-block;
}
.rank-tooltip .tooltip-text {
visibility: hidden;
width: auto;
min-width: 80px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 4px 8px;
position: absolute;
z-index: 100;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 11px;
white-space: nowrap;
pointer-events: none;
}
.rank-tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* --- Design System: Apple iOS/macOS Premium Aesthetic --- */
:root {
/* Core Apple Colors */
--ios-blue: #007AFF;
--ios-blue-dim: rgba(0, 122, 255, 0.1);
--ios-green: #34C759;
--ios-red: #FF3B30;
--ios-orange: #FF9500;
--ios-yellow: #FFCC00;
--ios-gray: #8E8E93;
--ios-gray-light: #F2F2F7; /* System Gray 6 - The Premium Light Gray */
--ios-separator: rgba(60, 60, 67, 0.12); /* Subtle Apple separator line */
--ios-text-primary: #000000;
--ios-text-secondary: #8E8E93;
/* Message Appearance */
--msg-out-bg: #007AFF;
--msg-out-text: #FFFFFF;
--msg-in-bg: #FFFFFF;
--msg-in-text: #000000;
/* Surfaces & Glass */
--bg-primary: #FFFFFF;
--bg-secondary: #F2F2F7; /* Clean, flat background */
--glass-surface: rgba(255, 255,255, 0.85);
--glass-border: rgba(255, 255, 255, 0.5);
--modal-bg: rgba(255, 255, 255, 0.95);
/* Shadows - Ultra Soft & Diffused (Apple Style) */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
--shadow-md: 0 4px 16px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
--shadow-float: 0 20px 40px rgba(0,0,0,0.12);
--shadow-msg: 0 1px 2px rgba(0,0,0,0.05);
/* Radius */
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-msg: 20px;
/* Animation Curves */
--ios-spring: cubic-bezier(0.25, 1, 0.5, 1);
--ios-ease: cubic-bezier(0.32, 0.72, 0, 1);
}
/* --- Dark Mode: Premium Deep Navy Theme (Telegram Style) --- */
body.dark-mode {
/* Core Colors - Deep Navy */
--ios-blue: #2481CC; /* Telegram Blue */
--ios-blue-dim: rgba(36, 129, 204, 0.15);
--ios-green: #4E9F6E;
--ios-red: #E53935;
--ios-orange: #F57C00;
--ios-yellow: #FBC02D;
--ios-gray: #708499;
--ios-gray-light: #17212B; /* Sidebar Dark */
--ios-separator: #101921;
--ios-text-primary: #F5F5F5;
--ios-text-secondary: #708499;
/* Message Appearance - Telegram Style */
--msg-out-bg: #2B5278;
--msg-out-text: #FFFFFF;
--msg-in-bg: #182533;
--msg-in-text: #F5F5F5;
/* Surfaces & Glass - Deep Navy Shades */
--bg-primary: #17212B; /* Sidebar/Header */
--bg-secondary: #0E1621; /* Main Chat Background */
--glass-surface: #17212B;
--glass-border: #101921;
--modal-bg: #17212B;
/* Shadows - Subtle for Navy */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
--shadow-md: 0 4px 12px rgba(0,0,0,0.6);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.7);
--shadow-float: 0 12px 32px rgba(0,0,0,0.8);
--shadow-msg: 0 1px 1px rgba(0,0,0,0.2);
/* Background for Dark Mode */
--bg-gradient: #0E1621;
}
/* Apply Dark Mode Background */
body.dark-mode {
background: var(--bg-gradient) !important;
}
/* Fix for Dark Mode specific elements */
body.dark-mode .chat-input-area { background: var(--bg-secondary) !important; }
body.dark-mode .input-wrapper { background: #17212B !important; border: 1px solid #101921 !important; }
body.dark-mode #message-input { color: var(--ios-text-primary) !important; }
body.dark-mode .modal-header-title { background: var(--modal-bg) !important; }
body.dark-mode .new-chat-modal-box, body.dark-mode .create-channel-modal-box { background: var(--modal-bg) !important; border: 1px solid var(--ios-separator) !important; }
body.dark-mode .channel-form-input, body.dark-mode .channel-form-textarea { background: #17212B !important; color: var(--ios-text-primary) !important; border: 1px solid var(--ios-separator) !important; }
body.dark-mode .new-chat-option-btn { background: var(--bg-primary) !important; border: 1px solid var(--ios-separator) !important; }
body.dark-mode .option-title { color: var(--ios-text-primary) !important; }
body.dark-mode #action-modal { background: var(--modal-bg) !important; border: 1px solid var(--ios-separator) !important; }
body.dark-mode .reaction-bar-strip { background: var(--bg-primary) !important; border-bottom: 1px solid var(--ios-separator) !important; }
body.dark-mode #edit-input-bar, body.dark-mode #reply-input-bar { background: rgba(255, 255, 255, 0.05) !important; color: var(--ios-text-primary) !important; }
body.dark-mode .chat-header { background: var(--bg-primary) !important; border-bottom: 1px solid var(--ios-separator) !important; }
body.dark-mode .chat-header-name { color: var(--ios-text-primary) !important; }
body.dark-mode .chat-name { color: var(--ios-text-primary) !important; }
body.dark-mode .sidebar-header { background: var(--bg-primary) !important; border-bottom: 1px solid var(--ios-separator) !important; }
body.dark-mode .search-container { background: var(--bg-primary) !important; }
/* Reactors Modal Dark Mode */
body.dark-mode .reactors-box { background: #17212B !important; border: 1px solid #101921 !important; }
body.dark-mode .reactors-header { background: #1c2733 !important; border-bottom: 1px solid #101921 !important; color: #F5F5F5 !important; }
body.dark-mode .reactor-item { border-bottom: 1px solid #101921 !important; }
body.dark-mode .reactor-item:active { background: #2b3948 !important; }
body.dark-mode .reactor-name { color: #F5F5F5 !important; }
body.dark-mode .reactor-close-btn { background: #17212B !important; border-top: 1px solid #101921 !important; color: #2481CC !important; }
body.dark-mode .reactor-close-btn:active { background: #2b3948 !important; }
body.dark-mode .reactor-avatar { background: #2b3948 !important; border-color: rgba(255,255,255,0.05) !important; }
body.dark-mode .search-wrapper { background: var(--bg-secondary) !important; border: 1px solid var(--ios-separator) !important; }
body.dark-mode .search-input { color: var(--ios-text-primary) !important; }
body.dark-mode .main-chat-placeholder { background: var(--bg-secondary) !important; }
body.dark-mode .chat-footer { background: var(--bg-secondary) !important; border-top: 1px solid var(--ios-separator) !important; }
body.dark-mode .chat-item.active { background: #2B5278 !important; }
body.dark-mode .chat-item:hover:not(.active) { background: rgba(255,255,255,0.05) !important; }
body.dark-mode .side-menu-item:hover { background: rgba(255,255,255,0.05) !important; }
body.dark-mode .modal-header { background: transparent !important; }
body.dark-mode .channel-form-label { color: var(--ios-text-primary) !important; }
body.dark-mode #file-preview-container { background: var(--bg-primary) !important; border-top: 1px solid var(--ios-separator) !important; }
body.dark-mode .preview-name { color: var(--ios-text-primary) !important; }
body.dark-mode .reaction-bubble { background: var(--bg-primary) !important; border: 1px solid var(--ios-separator) !important; }
body.dark-mode .reaction-bubble span { color: var(--ios-text-primary) !important; }
/* --- Stories UI --- */
.stories-container {
display: flex;
padding: 15px 10px;
background: var(--bg-primary);
border-bottom: 1px solid var(--ios-separator);
overflow-x: auto;
gap: 12px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.stories-container::-webkit-scrollbar { display: none; }
.story-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 70px;
cursor: pointer;
transition: transform 0.2s var(--ios-spring);
}
.story-item:active { transform: scale(0.92); }
.story-ring {
width: 64px;
height: 64px;
border-radius: 50%;
padding: 3px;
margin-bottom: 6px;
transition: all 0.3s ease;
}
.story-item.unread .story-ring {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.story-item.read .story-ring {
background: #e5e5ea;
}
body.dark-mode .story-item.read .story-ring {
background: #3a3a3c;
}
.story-ring.my-story-add { background: #e5e5ea; display: flex; align-items: center; justify-content: center; color: var(--ios-blue); font-size: 24px; }
body.dark-mode .story-ring.my-story-add { background: #2c2c2e; color: #0a84ff; }
.story-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
padding: 2px;
object-fit: cover;
}
.story-name {
font-size: 11px;
color: var(--ios-text-primary);
max-width: 65px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Story Viewer Modal */
#story-viewer {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: #000;
z-index: 5000;
display: none;
flex-direction: column;
}
.story-viewer-header {
position: absolute;
top: 0; left: 0; right: 0;
padding: 20px 15px;
background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
display: flex;
align-items: center;
gap: 12px;
z-index: 10;
}
.story-viewer-user {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
color: #fff;
}
.story-viewer-avatar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #fff; }
.story-viewer-name { font-weight: 600; font-size: 14px; }
.story-viewer-time { font-size: 11px; opacity: 0.8; }
.story-progress-container {
position: absolute;
top: 10px; left: 10px; right: 10px;
display: flex;
gap: 4px;
z-index: 11;
direction: ltr; /* Ensure bars and their filling move Left to Right */
}
.story-progress-bar {
flex: 1;
height: 2px;
background: rgba(255,255,255,0.3);
border-radius: 2px;
overflow: hidden;
}
.story-progress-fill {
height: 100%;
background: #fff;
width: 0%;
}
.story-content-wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.story-media { max-width: 100%; max-height: 100vh; object-fit: contain; }
.story-nav {
position: absolute;
top: 0; bottom: 0; width: 30%;
z-index: 5;
}
/* RTL Navigation: Right side for Next, Left side for Prev */
.story-nav-prev { left: 0; cursor: url('data:image/svg+xml;utf8,'), auto; }
.story-nav-next { right: 0; cursor: url('data:image/svg+xml;utf8,'), auto; }
/* --- Story Views UI --- */
.story-views-footer {
position: absolute;
bottom: 30px;
right: 20px;
display: none;
align-items: center;
gap: 10px;
z-index: 15;
cursor: pointer;
padding: 8px 15px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.2s;
}
.story-views-footer:hover { transform: scale(1.05); background: rgba(0, 0, 0, 0.5); }
.story-views-footer:active { transform: scale(0.95); }
.stacked-avatars { display: flex; align-items: center; }
.stacked-avatar {
width: 24px; height: 24px;
border-radius: 50%;
border: 1.5px solid #fff;
margin-right: -10px;
background: #eee;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.stacked-avatar img { width: 100%; height: 100%; object-fit: cover; }
.stacked-avatar:first-child { margin-right: 0; }
.views-count { color: #fff; font-size: 13px; font-weight: 700; margin-right: 4px; }
/* Viewer List Modal */
#story-viewers-modal {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.6); backdrop-filter: blur(15px);
z-index: 10000; justify-content: center; align-items: center;
animation: fadeIn 0.3s ease;
}
.viewers-modal-content {
background: var(--bg-primary);
width: 90%; max-width: 380px;
border-radius: 28px;
display: flex; flex-direction: column;
max-height: 70vh; overflow: hidden;
box-shadow: 0 25px 60px rgba(0,0,0,0.4);
animation: modalPop 0.4s var(--ios-spring);
}
.viewers-header {
padding: 18px 24px;
border-bottom: 1px solid var(--ios-separator);
display: flex; justify-content: space-between; align-items: center;
}
.viewers-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.viewers-list { flex: 1; overflow-y: auto; padding: 10px 0; }
.viewer-item {
display: flex; align-items: center; padding: 12px 20px;
cursor: pointer; transition: background 0.2s;
text-decoration: none; color: inherit;
}
.viewer-item:hover { background: rgba(0,0,0,0.04); }
.viewer-avatar { width: 40px; height: 40px; border-radius: 50%; background: #eee; margin-left: 12px; overflow: hidden; }
.viewer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.viewer-info { flex: 1; text-align: right; }
.viewer-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.viewer-time { font-size: 11px; color: var(--ios-gray); }
/* Story Preview Modal */
#story-preview-modal {
display: none; position: fixed; inset: 0;
background: #000; z-index: 11000;
flex-direction: column; align-items: center; justify-content: center;
}
.story-preview-header {
position: absolute; top: 0; left: 0; right: 0;
padding: 20px; display: flex; justify-content: space-between;
align-items: center; z-index: 10;
background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}
.story-preview-content {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
.story-preview-media { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-preview-footer {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 30px 20px; display: flex; justify-content: center;
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.story-send-btn {
background: var(--ios-blue); color: #fff;
border: none; border-radius: 30px;
padding: 12px 40px; font-size: 17px; font-weight: 700;
cursor: pointer; display: flex; align-items: center; gap: 10px;
box-shadow: 0 10px 25px rgba(0,122,255,0.4);
transition: all 0.2s;
}
.story-send-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(0,122,255,0.5); }
.story-send-btn:active { transform: scale(0.95); }
/* Exit Confirmation Modal */
#exit-modal {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
backdrop-filter: blur(10px); z-index: 20000; justify-content: center; align-items: center;
}
.exit-modal-box {
background: var(--modal-bg); width: 85%; max-width: 300px; border-radius: 20px;
overflow: hidden; box-shadow: var(--shadow-lg); animation: modalPop 0.3s var(--ios-spring);
text-align: center; border: 1px solid var(--ios-separator);
}
.exit-modal-body { padding: 25px 20px; }
.exit-modal-title { font-size: 18px; font-weight: 700; color: var(--ios-text-primary); margin-bottom: 8px; }
.exit-modal-text { font-size: 14px; color: var(--ios-gray); line-height: 1.4; }
.exit-modal-footer { display: flex; border-top: 0.5px solid var(--ios-separator); }
.exit-btn {
flex: 1; padding: 15px; font-size: 17px; cursor: pointer;
background: transparent; border: none; outline: none; transition: background 0.2s;
}
.exit-btn-no { color: var(--ios-blue); font-weight: 600; border-left: 0.5px solid var(--ios-separator); }
.exit-btn-yes { color: #ff3b30; }
.exit-btn:active { background: rgba(0,0,0,0.05); }
body.dark-mode .exit-btn:active { background: rgba(255,255,255,0.05); }
/* Upload Progress Bar in Header */
.upload-progress-container {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: rgba(0,122,255,0.1); z-index: 1000; display: none;
}
.upload-progress-fill {
height: 100%; background: var(--ios-blue); width: 0%;
transition: width 0.3s ease; box-shadow: 0 0 10px rgba(0,122,255,0.5);
}
.story-content-wrapper {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none; /* Disable long-press menu on iOS */
}
#story-img, #story-video {
pointer-events: auto;
-webkit-user-drag: none;
user-drag: none;
}
.story-content-wrapper.transitioning {
transform: scale(0.9) translateX(30px); /* Move to right (RTL next) */
opacity: 0;
}
/* --- PV Lock UI --- */
.pv-locked-container {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
margin: 10px;
border: 1px dashed var(--ios-separator);
animation: fadeIn 0.5s var(--ios-ease);
}
.pv-locked-icon {
font-size: 40px;
margin-bottom: 12px;
color: var(--ios-gray);
}
.pv-locked-text {
font-size: 15px;
font-weight: 600;
color: var(--ios-text-secondary);
text-align: center;
}
/* --- Toggle Switch (Apple Style) --- */
.ios-toggle {
position: relative;
display: inline-block;
width: 51px;
height: 31px;
}
.ios-toggle input { opacity: 0; width: 0; height: 0; }
.ios-toggle-slider {
position: absolute; cursor: pointer; inset: 0;
background-color: #e9e9ea; transition: .4s; border-radius: 34px;
}
.ios-toggle-slider:before {
position: absolute; content: ""; height: 27px; width: 27px;
left: 2px; bottom: 2px; background-color: white; transition: .4s;
border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
input:checked + .ios-toggle-slider { background-color: var(--ios-green); }
input:checked + .ios-toggle-slider:before { transform: translateX(20px); }
.settings-row {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; background: var(--bg-primary);
border-bottom: 0.5px solid var(--ios-separator);
}
.settings-label { font-size: 17px; font-weight: 500; }
/* --- Reset & Typography --- */
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
outline: none;
/* SF Pro Font Stack for exact Apple look */
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
margin: 0; padding: 0;
background-color: var(--bg-secondary);
color: var(--ios-text-primary);
height: 100vh; width: 100vw; overflow: hidden;
font-size: 15px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Hide Scrollbar for sleek look but allow scroll */
::-webkit-scrollbar { width: 0px; height: 0px; background: transparent; }
/* --- Auth Section (iOS Glassmorphism Style) --- */
#auth-container {
position: fixed; inset: 0;
background: radial-gradient(circle at top right, var(--ios-blue-dim), transparent),
radial-gradient(circle at bottom left, rgba(255, 45, 85, 0.05), transparent),
var(--bg-secondary);
z-index: 2000;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(20px);
}
.auth-box {
background: var(--bg-primary);
padding: 48px 32px;
border-radius: 32px;
box-shadow: var(--shadow-float);
width: 90%; max-width: 400px;
text-align: center;
border: 1px solid var(--ios-separator);
animation: modalPop 0.6s var(--ios-spring);
position: relative;
overflow: hidden;
}
.auth-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--ios-blue), #5856D6);
}
.auth-box h2 {
margin: 0 0 8px 0;
font-weight: 800;
color: var(--ios-text-primary);
font-size: 28px;
letter-spacing: -1px;
}
.auth-subtitle {
color: var(--ios-text-secondary);
font-size: 15px;
margin-bottom: 32px;
font-weight: 500;
}
.auth-input-group {
position: relative;
margin-bottom: 16px;
text-align: right;
}
.auth-input {
width: 100%; padding: 16px 20px;
border: 1.5px solid var(--ios-separator);
border-radius: 16px;
font-size: 16px;
background: var(--bg-secondary);
transition: all 0.3s var(--ios-ease);
color: var(--ios-text-primary);
font-weight: 500;
direction: rtl;
}
.auth-input::placeholder { color: var(--ios-gray); opacity: 0.7; }
.auth-input:focus {
background: var(--bg-primary);
border-color: var(--ios-blue);
box-shadow: 0 0 0 4px var(--ios-blue-dim);
transform: translateY(-2px);
}
.btn-primary {
width: 100%; padding: 16px;
background: linear-gradient(135deg, var(--ios-blue), #0051A8);
color: white;
border: none; border-radius: 16px;
font-size: 17px; font-weight: 700;
cursor: pointer; margin-top: 20px;
transition: all 0.3s var(--ios-spring);
box-shadow: 0 8px 20px rgba(0,122,255,0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,122,255,0.4); }
.btn-primary:active { transform: scale(0.97); }
.auth-switch {
margin-top: 32px;
font-size: 14px;
color: var(--ios-text-secondary);
font-weight: 500;
padding-top: 24px;
border-top: 1px solid var(--ios-separator);
}
.auth-switch span {
color: var(--ios-blue);
cursor: pointer;
font-weight: 700;
margin-right: 4px;
transition: color 0.2s;
}
.auth-switch span:hover { color: #0051A8; text-decoration: underline; }
/* Welcome Message Card */
.welcome-card {
margin-top: 24px;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
border: 1px solid var(--ios-separator);
text-align: right;
direction: rtl;
animation: fadeIn 0.8s ease-out;
}
body.dark-mode .welcome-card { background: rgba(255, 255, 255, 0.02); }
.welcome-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: var(--ios-blue);
font-weight: 700;
font-size: 14px;
}
.welcome-card-text {
color: var(--ios-text-secondary);
font-size: 13.5px;
line-height: 1.6;
font-weight: 500;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Main Layout --- */
#app-container { display: none; width: 100%; height: 100%; background: var(--bg-secondary); flex-direction: row; overflow: hidden; max-width: 100%; }
/* Sidebar (Clean macOS Style) */
.sidebar {
width: 380px;
background: var(--bg-primary);
height: 100%;
display: flex; flex-direction: column;
border-left: 1px solid var(--ios-separator);
z-index: 10;
transition: background 0.3s;
}
.sidebar-header {
padding: 16px 20px;
background: var(--bg-primary);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--ios-separator);
display: flex; align-items: center; justify-content: flex-end;
gap: 12px;
}
.edit-profile-quick-btn {
background: var(--ios-blue-dim);
border: none;
border-radius: 12px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ios-blue);
cursor: pointer;
transition: all 0.2s;
}
.edit-profile-quick-btn:hover {
background: var(--ios-blue);
color: white;
transform: scale(1.05);
}
@media (max-width: 768px) {
.sidebar-header .edit-profile-quick-btn[title="ساخت گروه یا کانال"] {
display: none;
}
.new-chat-btn.mobile-only {
display: flex;
}
}
@media (min-width: 769px) {
.new-chat-btn.mobile-only {
display: none;
}
}
.edit-profile-quick-btn:active {
transform: scale(0.95);
}
.edit-profile-btn {
display: none;
}
.edit-profile-btn:hover { background: #0063d1; }
.hamburger-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
padding: 0;
}
.hamburger-btn svg {
width: 24px;
height: 24px;
color: var(--ios-red);
stroke-width: 2;
}
.hamburger-btn:hover {
background: rgba(255, 59, 48, 0.1);
}
.hamburger-btn:active {
transform: scale(0.95);
}
/* Side Menu (Hamburger Menu) */
.side-menu {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.side-menu.active {
display: block;
opacity: 1;
}
.side-menu-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.side-menu-content {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 280px;
background: var(--bg-primary);
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.15);
transform: translateX(-100%);
transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
display: flex;
flex-direction: column;
}
.side-menu.active .side-menu-content {
transform: translateX(0);
}
.side-menu-header {
padding: 16px 20px;
border-bottom: 1px solid var(--ios-separator);
display: flex;
align-items: center;
justify-content: flex-end;
}
.close-menu-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
color: var(--ios-gray);
}
.close-menu-btn:hover {
background: rgba(0, 0, 0, 0.04);
}
.close-menu-btn svg {
width: 20px;
height: 20px;
}
.side-menu-items {
flex: 1;
padding: 8px 0;
overflow-y: auto;
}
.side-menu-item {
display: flex;
align-items: center;
padding: 16px 20px;
cursor: pointer;
transition: background 0.2s;
gap: 14px;
color: var(--ios-text-primary);
font-size: 16px;
font-weight: 500;
}
.side-menu-item:hover {
background: rgba(0, 0, 0, 0.04);
}
body.dark-mode .side-menu-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.side-menu-item:active {
background: rgba(0, 0, 0, 0.08);
}
.side-menu-item.danger {
color: var(--ios-red);
font-weight: 600;
}
.side-menu-item.danger:hover {
background: rgba(255, 59, 48, 0.08);
}
.side-menu-item svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.side-menu-divider {
height: 1px;
background: var(--ios-separator);
margin: 8px 20px;
}
.tabs { display: flex; padding: 0 12px 8px 12px; gap: 8px; border-bottom: 0.5px solid var(--ios-separator); }
.tab {
flex: 1;
padding: 8px 0; cursor: pointer; color: var(--ios-gray); font-size: 14px; font-weight: 500;
position: relative; transition: color 0.2s;
padding-bottom: 12px;
text-align: center;
}
.tab.active { color: var(--ios-blue); font-weight: 600; }
.tab.active::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: var(--ios-blue); border-radius: 2px;
}
.chat-list { flex: 1; overflow-y: auto; padding: 0 8px; padding-bottom: 80px; }
/* New Chat Button (Pencil) */
.new-chat-btn {
position: absolute;
bottom: 20px;
left: 20px;
width: 56px;
height: 56px;
background: var(--ios-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 122, 255, 0.4);
transition: all 0.3s var(--ios-spring);
z-index: 100;
}
.new-chat-btn:hover {
transform: scale(1.1);
box-shadow: 0 12px 32px rgba(0, 122, 255, 0.5);
}
.new-chat-btn:active {
transform: scale(0.95);
}
.new-chat-btn svg {
width: 24px;
height: 24px;
}
.chat-item {
display: flex; align-items: center; padding: 10px 12px;
cursor: pointer; border-radius: 12px;
transition: background 0.2s; margin-bottom: 2px;
}
.chat-item:hover { background: rgba(0,0,0,0.03); }
body.dark-mode .chat-item:hover { background: rgba(255,255,255,0.05); }
.chat-item.active { background: rgba(0,122,255,0.08); }
body.dark-mode .chat-item.active { background: #2B5278; }
/* PRECISE AVATARS - Clean Gray Backgrounds & Modern Icons */
.avatar {
width: 50px; height: 50px; border-radius: 50%;
background: var(--ios-gray-light); /* Light Gray Background */
margin-left: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; flex-shrink: 0; overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.04);
position: relative;
transition: background 0.3s;
}
body.dark-mode .avatar { background: #242F3D !important; border-color: #101921 !important; }
body.dark-mode .avatar svg { color: #708499 !important; }
.story-avatar-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #eee; border-radius: 50%; }
.story-avatar-container img { width: 100%; height: 100%; object-fit: cover; }
.story-avatar-container svg { width: 70%; height: 70%; color: #999; }
.story-viewer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-viewer-avatar svg { width: 70%; height: 70%; color: #999; }
/* Modern SVG Icon Styling inside Avatars */
.avatar svg {
width: 60%;
height: 60%;
color: var(--ios-gray); /* Gray Icon Color */
stroke-width: 1.5;
}
/* No more gradients for user/group placeholders */
.avatar.user { }
.avatar.group { }
/* Status Dot Inline - Modern Telegram Style */
.status-dot-inline {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
.status-dot-inline.online {
background-color: #4cd964; /* iOS Green */
box-shadow: 0 0 5px rgba(76, 217, 100, 0.5);
}
.status-dot-inline.offline {
background-color: #8e8e93; /* iOS Gray */
}
.msg-avatar {
width: 28px; height: 28px; border-radius: 50%; background: #ccc;
display: flex; align-items: center; justify-content: center; font-size: 14px;
overflow: hidden; flex-shrink: 0; border:1px solid rgba(0,0,0,0.03);
transition: transform 0.2s, box-shadow 0.2s;
}
.received .msg-avatar { margin-left: 8px; }
.sent .msg-avatar { margin-right: 8px; }
.msg-avatar[style*="cursor: pointer"]:hover {
transform: scale(1.15);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-avatar svg { width: 65%; height: 65%; color: #999; }
.msg-avatar-hidden { width: 28px; visibility: hidden; }
.chat-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.chat-name { font-weight: 600; font-size: 16px; margin-bottom: 2px; display: flex; align-items: center; color: var(--ios-text-primary); letter-spacing: -0.3px; }
.chat-last-message { font-size: 14px; color: var(--ios-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-right: 10px; flex-shrink: 0; }
.chat-time { font-size: 12px; color: var(--ios-gray); font-weight: 500; }
.unread-badge {
background-color: var(--ios-blue);
color: #fff;
border-radius: 12px;
min-width: 20px; height: 20px;
font-size: 11px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 6px;
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
}
.badge-count {
background-color: var(--ios-red);
color: #fff;
border-radius: 12px;
min-width: 20px; height: 20px;
font-size: 11px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
margin-right: auto; padding: 0 6px;
box-shadow: 0 2px 6px rgba(255, 59, 48, 0.3);
}
.user-status-badge { font-size: 13px; color: var(--ios-gray); display: flex; align-items: center; font-weight: 500; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; }
.status-dot.online { background-color: var(--ios-green); }
.status-dot.offline { background-color: var(--ios-gray); }
/* --- Main Chat Area --- */
.main-chat {
flex: 1; display: flex; flex-direction: column;
/* SOLID BACKGROUND */
background-color: var(--bg-secondary);
position: relative; overflow: hidden; height: 100%;
min-width: 0;
}
.main-chat-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ios-gray); background: var(--bg-secondary); width: 100%; flex-direction: column; }
.main-chat-placeholder svg { width: 80px; height: 80px; margin-bottom: 20px; opacity: 0.1; }
/* Header - High Blur */
.chat-header {
padding: 10px 16px;
background: var(--glass-surface);
backdrop-filter: saturate(180%) blur(25px);
-webkit-backdrop-filter: saturate(180%) blur(25px);
border-bottom: 1px solid var(--ios-separator);
display: flex; align-items: center; height: 56px; flex-shrink: 0; z-index: 50;
transition: all 0.2s;
}
.back-btn {
display: none; width: 32px; height: 32px;
color: var(--ios-blue); cursor: pointer;
margin-left: 4px; border-radius: 50%;
align-items: center; justify-content: center;
transition: background 0.2s;
}
.back-btn:hover { background: rgba(0,122,255,0.08); }
.back-btn svg { transform: rotate(180deg); width: 20px; height: 20px; stroke-width: 2.5; }
.chat-header-info { display: flex; align-items: center; flex: 1; }
.chat-header-avatar {
width: 40px;
height: 40px;
border-radius: 50%; /* گرد کردن آواتار */
margin-left: 12px;
background: var(--ios-gray-light);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
border: 1.5px solid #fff; /* حاشیه سفید شیک */
cursor: pointer;
position: relative;
z-index: 100;
transition: all 0.2s var(--ios-spring);
flex-shrink: 0;
}
body.dark-mode .chat-header-avatar { background: #242F3D; border-color: #17212B; }
.chat-header-avatar:hover { transform: scale(1.05); }
.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chat-header-avatar svg { width: 60%; height: 60%; color: var(--ios-gray); }
body.dark-mode .chat-header-avatar svg { color: #708499; }
.chat-header-name { font-weight: 700; font-size: 16px; color: var(--ios-text-primary); letter-spacing: -0.4px; }
.chat-header-status { font-size: 13px; color: var(--ios-gray); font-weight: 500; margin-top: 2px; }
/* Messages */
.messages-area { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; min-height: 0; }
.message-wrapper {
display: flex;
margin-bottom: 4px;
max-width: 75%;
align-items: flex-end;
position: relative;
z-index:1;
animation: messagePop 0.3s var(--ios-spring);
cursor: pointer;
}
/* پیامهای ارسالی (سمت راست) */
.message-wrapper.sent {
align-self: flex-start;
flex-direction: row; /* آواتار در سمت راست، حباب در سمت چپِ آواتار */
}
/* پیامهای دریافتی (سمت چپ) */
.message-wrapper.received {
align-self: flex-end;
flex-direction: row-reverse; /* آواتار در سمت چپ، حباب در سمت راستِ آواتار */
}
.msg-sender-name { font-size: 12px; color: var(--ios-blue); margin-bottom: 4px; font-weight: 600; opacity: 0.9; display: block; text-align: right; padding-right: 4px;}
.received .msg-sender-name { text-align: left; padding-left: 4px; padding-right: 0; }
.msg-content { display: flex; flex-direction: column; max-width: 100%; position: relative;}
.message-bubble {
padding: 10px 16px;
border-radius: var(--radius-msg);
position: relative;
font-size: 16px;
line-height: 1.4;
word-wrap: break-word;
box-shadow: var(--shadow-msg);
text-align: right;
user-select: text;
-webkit-user-select: text;
transition: transform 0.1s;
}
/* iMessage Style Outgoing - Blue */
.sent .message-bubble {
background: var(--msg-out-bg);
color: var(--msg-out-text);
border-bottom-right-radius: 4px;
box-shadow: 0 2px 6px rgba(0,122,255,0.15);
}
/* iMessage Style Incoming - White with subtle border */
.received .message-bubble {
background: var(--msg-in-bg);
color: var(--msg-in-text);
border-bottom-left-radius: 4px;
border: 1px solid rgba(0,0,0,0.04);
}
/* Swipe Icon */
.swipe-action-icon {
position: absolute; left: -50px; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; background: var(--ios-gray); border-radius: 50%;
display: flex; align-items: center; justify-content: center; color: white;
opacity: 0; pointer-events: none; transition: opacity 0.2s, left 0.2s, background 0.2s; z-index: 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.swiping .swipe-action-icon { opacity: 1; left: 40px; background: var(--ios-blue); }
.swiping .message-bubble { transform: translateX(50px); transition: transform 0s; }
.msg-edited-badge { font-size: 10px; color: rgba(255,255,255,0.7); margin-right: 4px; display: inline-flex; align-items: center; }
.received .msg-edited-badge { color: #8e8e93; }
.reply-preview-box {
background: rgba(0,0,0,0.05);
border-right: 3px solid rgba(0,0,0,0.2);
padding: 6px 10px;
margin-bottom: 6px;
border-radius: 8px;
font-size: 13px;
}
.sent .reply-preview-box { border-right-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.15); }
.reply-preview-name { font-weight: 700; margin-bottom: 2px; display: block; opacity: 0.8; font-size: 11px; }
.reply-preview-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; opacity: 0.9; }
.msg-time { font-size: 11px; margin-top: 4px; display: flex; justify-content: flex-end; align-items: center; gap: 4px; color: rgba(255,255,255,0.8); float: left; margin-left: 8px; margin-top: 6px; }
.chat-link { color: var(--ios-blue); text-decoration: underline; word-break: break-all; }
.sent .chat-link { color: #fff !important; text-decoration: underline; }
body.dark-mode .chat-link { color: #64b5f6; }
body.dark-mode .sent .chat-link { color: #fff !important; }
.received .msg-time { color: #8e8e93; }
.msg-seen { color: #34C759; font-weight: bold; margin-left: 2px; letter-spacing: -1px; }
.msg-sent-tick { color: rgba(255,255,255,0.7); margin-left: 2px; }
.received .msg-sent-tick { color: var(--ios-gray); }
/* Message Readers Modal Specifics */
#readers-list-container { scrollbar-width: thin; scrollbar-color: var(--ios-separator) transparent; }
#readers-list-container::-webkit-scrollbar { width: 6px; }
#readers-list-container::-webkit-scrollbar-thumb { background: var(--ios-separator); border-radius: 10px; }
body.dark-mode #readers-modal .create-channel-modal-box { background: #17212B !important; border: 1px solid #101921; }
body.dark-mode #readers-modal .modal-header-title { background: #17212B !important; border-bottom: 1px solid #101921; }
/* Mute Status Icon */
.mute-icon-badge {
font-size: 14px;
margin-right: 4px;
vertical-align: middle;
color: var(--ios-red);
animation: pulse-mute 2s infinite;
}
@keyframes pulse-mute {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.chat-header-manage-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(142, 142, 147, 0.12);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 10px;
transition: all 0.2s;
color: var(--ios-blue);
}
.chat-header-manage-btn:hover { background: rgba(0, 122, 255, 0.1); transform: scale(1.05); }
.chat-header-manage-btn:active { transform: scale(0.95); }
.list-manage-btn {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--ios-gray);
opacity: 0.5;
transition: all 0.2s;
margin-right: 5px;
}
.list-manage-btn:hover { opacity: 1; background: rgba(0,0,0,0.05); color: var(--ios-blue); }
body.dark-mode .list-manage-btn:hover { background: rgba(255,255,255,0.1); }
/* Reactions */
.reactions-wrapper { position: absolute; bottom: -6px; display: flex; flex-direction: row; gap: 4px; padding: 0 4px; z-index: 10; }
.sent .reactions-wrapper { left: -6px; }
.received .reactions-wrapper { right: -6px; }
.reaction-bubble {
background: var(--bg-primary);
border: 1px solid var(--ios-separator);
border-radius: 16px;
padding: 3px 8px;
font-size: 14px;
display: flex; align-items: center; gap: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
cursor: pointer;
transition: transform 0.1s;
}
.reaction-bubble:active { transform: scale(0.9); }
.reaction-bubble span { font-weight: 700; font-size: 11px; color: var(--ios-text-primary); margin-right: 2px; }
.reaction-bubble.mine { background: #e1f0ff; border-color: var(--ios-blue); }
/* Channel Restriction Message */
.channel-restriction-message {
padding: 16px 20px;
background: rgba(255, 59, 48, 0.08);
border-top: 1px solid rgba(255, 59, 48, 0.2);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--ios-red);
font-size: 14px;
font-weight: 500;
flex-shrink: 0;
}
body.dark-mode .channel-restriction-message {
background: rgba(255, 59, 48, 0.15);
border-top: 1px solid rgba(255, 59, 48, 0.3);
}
.channel-restriction-message svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Force Hide Input Area - Absolute Control */
.force-hide-input #chat-input-area {
display: none !important;
}
.force-hide-input #channel-restriction-message {
display: flex !important;
}
/* Pin Bar Styles */
.pin-bar {
display: none;
align-items: center;
padding: 8px 16px;
background: var(--glass-surface);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--ios-separator);
cursor: pointer;
z-index: 45;
transition: all 0.3s ease;
}
.pin-bar:active { background: rgba(0,0,0,0.05); }
.pin-icon { color: var(--ios-blue); margin-left: 12px; display: flex; align-items: center; }
.pin-content { flex: 1; overflow: hidden; }
.pin-title { font-size: 13px; font-weight: 700; color: var(--ios-blue); margin-bottom: 2px; }
.pin-text { font-size: 13px; color: var(--ios-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-count-badge {
background: var(--ios-blue);
color: white;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 10px;
margin-right: 8px;
}
/* Pins Modal */
#pins-modal, .modal-overlay {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.4);
z-index: 2000;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
}
.modal-content {
background: var(--bg-primary);
width: 90%;
max-width: 400px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
max-height: 80vh;
}
.modal-header {
padding: 16px;
border-bottom: 1px solid var(--ios-separator);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-secondary);
}
.modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.modal-body { overflow-y: auto; flex: 1; padding: 8px 0; }
.member-item {
padding: 10px 16px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 0.5px solid var(--ios-separator);
}
.member-item:last-child { border-bottom: none; }
.member-info { flex: 1; }
.member-name { font-size: 15px; font-weight: 600; color: var(--ios-text-primary); }
.member-username { font-size: 13px; color: var(--ios-gray); }
.member-role {
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 6px;
text-transform: uppercase;
}
.role-owner { background: rgba(255, 149, 0, 0.15); color: var(--ios-orange); }
.role-admin { background: rgba(0, 122, 255, 0.15); color: var(--ios-blue); }
.role-member { background: rgba(142, 142, 147, 0.15); color: var(--ios-gray); }
.remove-member-btn:hover {
background: rgba(255, 59, 48, 0.2) !important;
transform: scale(1.1);
}
.pins-box {
width: 90%;
max-width: 400px;
background: var(--bg-primary);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
max-height: 80vh;
}
.pins-header {
padding: 16px;
border-bottom: 1px solid var(--ios-separator);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-secondary);
}
.pins-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.pins-list { overflow-y: auto; flex: 1; }
.pin-item {
padding: 12px 16px;
border-bottom: 1px solid var(--ios-separator);
display: flex;
align-items: center;
cursor: pointer;
transition: background 0.2s;
}
.pin-item:hover { background: rgba(0,0,0,0.02); }
.pin-item-info { flex: 1; overflow: hidden; }
.pin-item-name { font-size: 14px; font-weight: 700; color: var(--ios-blue); margin-bottom: 4px; }
.pin-item-text { font-size: 14px; color: var(--ios-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-item-time { font-size: 11px; color: var(--ios-gray); margin-top: 4px; }
.unpin-btn {
padding: 8px;
color: var(--ios-red);
opacity: 0.7;
transition: opacity 0.2s;
}
.unpin-btn:hover { opacity: 1; }
/* Input Area (Floating iOS Keyboard Bar) */
.chat-input-area {
padding: 10px 16px;
background: rgba(245, 245, 247, 0.9);
backdrop-filter: saturate(180%) blur(20px);
border-top: 0.5px solid var(--ios-separator);
display: flex; flex-direction: column; flex-shrink: 0; position: relative; z-index: 60;
}
#edit-input-bar, #reply-input-bar {
display: none; background: rgba(118, 118, 128, 0.1);
padding: 8px 12px; border-radius: 12px; margin-bottom: 8px;
border-right: 3px solid var(--ios-blue); position: relative; font-size: 13px; color: #1c1c1e;
}
#edit-input-bar { border-right-color: var(--ios-orange); }
#close-reply-bar, #close-edit-bar { position: absolute; top: 4px; left: 4px; color: var(--ios-gray); cursor: pointer; padding: 4px; border-radius: 4px; transition: color 0.2s; }
#close-reply-bar:hover, #close-edit-bar:hover { background: rgba(0,0,0,0.05); color: var(--ios-text-primary); }
.chat-input-row { display: flex; align-items: center; width: 100%; gap: 10px; }
.attach-btn {
cursor: pointer; color: var(--ios-blue); transition: color 0.2s;
display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
}
.attach-btn:hover { color: var(--ios-blue); opacity: 0.7; }
.attach-btn svg { width: 24px; height: 24px; }
.input-wrapper {
flex: 1; background: #FFFFFF; border-radius: 20px; padding: 8px 14px; display: flex; align-items: center; transition: all 0.2s; border: 1px solid transparent; box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
body.dark-mode .input-wrapper { background: #17212B; border: 1px solid #101921; }
.input-wrapper:focus-within { background: #fff; border-color: var(--ios-blue); box-shadow: 0 0 0 3px var(--ios-blue-dim); }
body.dark-mode .input-wrapper:focus-within { background: #17212B; }
#message-input { flex: 1; border: none; background: transparent; font-size: 16px; font-family: inherit; min-height: 20px; color: #000; }
body.dark-mode #message-input { color: var(--ios-text-primary); }
.send-btn {
width: 36px; height: 36px; border-radius: 50%; background: var(--ios-blue); color: white; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s, background 0.2s;
box-shadow: 0 3px 10px rgba(0,122,255,0.25);
}
.send-btn.editing { background: var(--ios-orange); box-shadow: 0 3px 10px rgba(255, 149, 0, 0.25); }
.send-btn:active { transform: scale(0.9); }
.mic-mode { background: #F2F2F7; color: var(--ios-blue); box-shadow: none; }
.mic-mode svg { stroke-width: 2; fill: none; stroke: currentColor; }
.emoji-btn { cursor: pointer; display: flex; align-items: center; color: var(--ios-blue); transition: transform 0.2s; padding-left: 4px; }
.emoji-btn:active { transform: scale(0.8); }
.char-counter {
font-size: 10px;
color: var(--ios-gray);
font-weight: 600;
display: none;
transition: all 0.2s;
position: absolute;
top: -18px;
right: 15px;
background: rgba(255,255,255,0.8);
padding: 2px 8px;
border-radius: 10px;
backdrop-filter: blur(5px);
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
z-index: 10;
}
body.dark-mode .char-counter {
background: rgba(23, 33, 43, 0.8);
}
.char-counter.limit-near { color: var(--ios-orange); }
.char-counter.limit-reached { color: var(--ios-red); }
/* Media Styles */
.video-msg { position: relative; border-radius: 16px; overflow: hidden; background: #000; width: 100%; max-width: 320px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.video-msg video { width: 100%; display: block; border-radius: 16px; }
.video-download-btn { display: block; width: 100%; text-align: center; background: rgba(0,0,0,0.6); color: #fff; text-decoration: none; font-size: 12px; padding: 10px 0; position: relative; z-index: 10; backdrop-filter: blur(10px); }
.voice-player { display: flex; align-items: center; background: rgba(0,0,0,0.03); border-radius: 16px; padding: 8px; cursor: pointer; width: 220px; position: relative; transition: background 0.2s; }
.voice-player:active { background: rgba(0,0,0,0.06); }
.voice-play-btn { width: 28px; height: 28px; background: var(--ios-blue); border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-left: 10px; flex-shrink: 0; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.2s; }
.voice-player:active .voice-play-btn { transform: scale(0.95); }
.voice-wave-container { flex: 1; height: 20px; display: flex; align-items: center; gap: 3px; position: relative; overflow: hidden; padding: 0 5px; pointer-events: none; }
.voice-wave-bar { width: 3px; background: #b0b0b5; border-radius: 2px; height: 40%; z-index: 1; transition: height 0.2s; }
.voice-progress-overlay { position: absolute; top: 0; right: 0; bottom: 0; background: var(--ios-blue); z-index: 0; width: 0%; opacity: 0.15; transition: width 0.1s linear; }
.voice-duration { font-size: 13px; color: var(--ios-gray); margin-right: 8px; font-weight: 600; width: 40px; text-align: left; pointer-events: none; }
/* --- File Preview --- */
#file-preview-container { display: none; padding: 10px 15px; background: rgba(255,255,255,0.8); border-top: 1px solid var(--ios-separator); align-items: center; justify-content: space-between; backdrop-filter: blur(10px); }
.preview-content { display: flex; align-items: center; flex: 1; }
.preview-thumbnail { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; background: #eee; margin-left: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ios-gray); box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.preview-info { display: flex; flex-direction: column; margin-left: 12px; flex: 1; overflow: hidden; }
.preview-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1c1c1e; }
.preview-size { font-size: 12px; color: var(--ios-gray); }
.preview-close { cursor: pointer; color: var(--ios-gray); padding: 8px; border-radius: 50%; transition: all 0.2s; }
.preview-close:hover { background: rgba(0,0,0,0.05); color: var(--ios-red); }
.progress-bar-bg { width: 100%; height: 3px; background: #e5e5ea; border-radius: 2px; margin-top: 8px; display: none; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--ios-green); width: 0%; transition: width 0.2s; }
/* --- Action Modal (iOS Sheet - Improved Style) --- */
#action-modal-backdrop {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(5px); z-index: 5000; opacity: 0; transition: opacity 0.3s; cursor: pointer;
}
#action-modal {
position: fixed; bottom: 0; left: 12px; right: 12px; background: rgba(255,255,255,0.92); border-radius: 24px; z-index: 5001;
transform: translateY(100%); transition: transform 0.4s var(--ios-ease);
padding-bottom: 30px; box-shadow: 0 30px 60px rgba(0,0,0,0.2);
overflow: hidden;
backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
}
.modal-header { height: 30px; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.5); }
.modal-handle { width: 36px; height: 5px; background: #c5c5c7; border-radius: 10px; cursor: grab; opacity: 0.5; }
.modal-actions { padding: 0; display: flex; flex-direction: column; overflow-y: auto; max-height: 40vh; }
.modal-btn {
width: 100%;
padding: 18px 20px;
border: none;
background: transparent;
font-size: 20px;
font-weight: 400;
text-align: center;
cursor: pointer;
color: var(--ios-blue);
transition: background 0.15s;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
}
.modal-btn svg { width: 22px; height: 22px; }
.modal-btn:active { background: rgba(118,118,128,0.08); }
.modal-btn.danger { color: var(--ios-red); font-weight: 600; }
.modal-btn.divider { border-top: 0.5px solid #c5c5c7; }
.reaction-bar-strip { display: flex; justify-content: space-around; padding: 20px 20px; border-bottom: 0.5px solid #e5e5ea; background: rgba(255,255,255,0.9); }
.reaction-picker-item { font-size: 28px; cursor: pointer; transition: transform 0.2s; padding: 6px; }
.reaction-picker-item:active { transform: scale(0.8); }
/* --- Profile Modal (Improved Apple Style) --- */
#profile-modal {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(15px); z-index: 9999; justify-content: center; align-items: center;
}
/* --- New Chat & Create Channel Modals --- */
#new-chat-modal, #create-channel-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(15px);
z-index: 9999;
justify-content: center;
align-items: center;
}
.new-chat-modal-box, .create-channel-modal-box {
background: rgba(255,255,255,0.95);
width: 92%;
max-width: 420px;
border-radius: 28px;
padding: 0;
text-align: center;
box-shadow: 0 40px 80px rgba(0,0,0,0.25);
overflow: hidden;
animation: modalPop 0.4s var(--ios-spring);
border: 1px solid rgba(255,255,255,0.5);
display: flex;
flex-direction: column;
}
#create-channel-modal, #create-group-modal, #new-chat-modal {
display: none !important;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(15px);
z-index: 10000;
justify-content: center;
align-items: center;
}
#create-channel-modal.active, #create-group-modal.active, #new-chat-modal.active {
display: flex !important;
}
.new-chat-option-btn {
width: 100%;
padding: 18px 20px;
background: white;
border: 1px solid var(--separator);
border-radius: 16px;
display: flex;
align-items: center;
gap: 16px;
cursor: pointer;
transition: all 0.2s;
text-align: right;
}
.new-chat-option-btn:hover {
background: var(--ios-gray-light);
transform: scale(1.02);
}
.new-chat-option-btn:active {
transform: scale(0.98);
}
.new-chat-option-btn svg {
width: 28px;
height: 28px;
color: var(--ios-blue);
flex-shrink: 0;
}
.option-title {
font-size: 17px;
font-weight: 600;
color: #000;
margin-bottom: 4px;
}
.option-desc {
font-size: 13px;
color: var(--ios-gray);
}
.channel-form-group {
margin-bottom: 20px;
text-align: right;
}
.channel-form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #000;
margin-bottom: 8px;
}
.channel-form-input, .channel-form-textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 12px;
font-size: 16px;
background: var(--bg-secondary);
transition: all 0.3s;
font-family: inherit;
}
.channel-form-input:focus, .channel-form-textarea:focus {
background: #fff;
border-color: var(--ios-blue);
box-shadow: 0 0 0 3px var(--ios-blue-dim);
}
.channel-form-textarea {
resize: vertical;
min-height: 80px;
}
.channel-username-wrapper {
position: relative;
display: flex;
align-items: center;
}
.username-prefix {
position: absolute;
right: 16px;
font-size: 16px;
color: var(--ios-gray);
font-weight: 500;
z-index: 1;
}
.username-input {
padding-right: 32px !important;
}
.username-status {
position: absolute;
left: 16px;
width: 20px;
height: 20px;
border-radius: 50%;
display: none;
}
.username-status.checking {
display: block;
border: 2px solid var(--ios-gray);
border-top-color: transparent;
animation: spin 0.6s linear infinite;
}
.username-status.available {
display: block;
background: var(--ios-green);
}
.username-status.unavailable {
display: block;
background: var(--ios-red);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.username-hint {
font-size: 12px;
color: var(--ios-gray);
margin-top: 6px;
}
.channel-create-btn {
width: 100%;
padding: 16px;
background: var(--ios-blue);
color: white;
border: none;
border-radius: 14px;
font-size: 17px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 8px 20px rgba(0,122,255,0.3);
}
.channel-create-btn:disabled {
background: var(--ios-gray);
cursor: not-allowed;
opacity: 0.5;
box-shadow: none;
}
.channel-create-btn:not(:disabled):hover {
background: #0063d1;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,122,255,0.4);
}
.channel-create-btn:not(:disabled):active {
transform: scale(0.97);
}
.channel-create-btn svg {
width: 20px;
height: 20px;
}
/* --- Profile Modal: Modern Card Design --- */
.profile-modal-box {
background: #F2F2F7;
width: 95%;
max-width: 500px;
border-radius: 28px;
padding: 0;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
overflow: hidden;
max-height: 90vh;
animation: modalPop 0.4s var(--ios-spring);
display: flex;
flex-direction: column;
border: 1px solid rgba(255,255,255,0.1);
}
body.dark-mode .profile-modal-box {
background: #17212B; /* Sidebar Dark */
border: 1px solid #101921;
}
@media (max-width: 480px) {
.profile-modal-box {
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
animation: slideUpMobile 0.4s var(--ios-ease);
}
}
.modal-header-title {
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(242, 242, 247, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0,0,0,0.05);
z-index: 10;
}
body.dark-mode .modal-header-title {
background: #17212B;
border-bottom: 1px solid #101921;
}
.modal-header-title h3 {
margin: 0;
font-size: 17px;
font-weight: 600;
color: var(--ios-text-primary);
}
.modal-close-x {
width: 32px;
height: 32px;
background: rgba(142, 142, 147, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
color: var(--ios-gray);
transition: all 0.2s;
}
.modal-close-x:active { transform: scale(0.9); }
.modal-body-content {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
-webkit-overflow-scrolling: touch;
}
.modal-avatar-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 10px 0;
position: relative; /* اضافه شده برای کنترل موقعیت دکمه حذف */
}
.avatar-circle {
width: 110px;
height: 110px;
border-radius: 50%;
background: #e5e5ea;
position: relative;
border: 3px solid white;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.dark-mode .avatar-circle { background: #182533; border-color: #101921; }
.avatar-circle:active { transform: scale(0.95); }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: none; }
.avatar-circle img.show { display: block; }
.profile-info-display {
text-align: center;
}
.profile-username { font-size: 22px; font-weight: 700; color: var(--ios-text-primary); margin-bottom: 2px; }
.profile-handle { font-size: 15px; color: var(--ios-blue); font-weight: 500; margin-bottom: 2px; }
.profile-email { font-size: 13px; color: var(--ios-gray); }
.edit-section-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.03);
}
body.dark-mode .edit-section-card { background: #182533; border-color: #101921; }
.section-header {
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
color: var(--ios-gray);
border-bottom: 1px solid rgba(0,0,0,0.03);
}
body.dark-mode .section-header { border-bottom-color: #101921; }
.section-header div { display: flex; align-items: center; gap: 10px; }
.edit-input-group {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.modern-input {
width: 100%;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid #e5e5ea;
background: #f9f9f9;
font-size: 15px;
transition: all 0.2s;
outline: none;
}
body.dark-mode .modern-input { background: #0E1621; border-color: #101921; color: white; }
.modern-input:focus { border-color: var(--ios-blue); background: white; }
body.dark-mode .modern-input:focus { background: #182533; }
.modern-save-btn {
align-self: flex-end;
padding: 8px 20px;
border-radius: 20px;
background: var(--ios-blue);
color: white;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: opacity 0.2s;
}
.modern-save-btn:active { opacity: 0.7; }
.password-change-form-modern {
max-height: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.password-change-form-modern.active {
max-height: 300px;
padding: 16px;
}
.danger-card { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.modern-action-btn {
width: 100%;
padding: 14px;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.2s;
}
.btn-blue { background: var(--ios-blue); color: white; }
.btn-light-blue { background: rgba(0,122,255,0.1); color: var(--ios-blue); }
body.dark-mode .btn-light-blue { background: rgba(36, 129, 204, 0.15); }
.btn-red { background: rgba(255,59,48,0.1); color: var(--ios-red); }
.btn-gray { background: #e5e5ea; color: #3a3a3c; }
body.dark-mode .btn-gray { background: #182533; color: #F5F5F5; }
.modern-action-btn:active { transform: scale(0.98); opacity: 0.8; }
.modal-footer-modern {
padding: 16px 20px;
background: rgba(242, 242, 247, 0.8);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 10px;
}
body.dark-mode .modal-footer-modern { background: #17212B; border-top-color: #101921; }
.default-avatar-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ios-gray);
background: #e5e5ea;
border-radius: 50%;
}
body.dark-mode .default-avatar-icon {
background: #242F3D;
color: #708499;
}
.upload-btn-circle {
position: absolute;
bottom: 4px;
right: 4px;
width: 36px;
height: 36px;
background: var(--ios-blue);
border: 3px solid var(--bg-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
box-shadow: 0 4px 12px rgba(0,122,255,0.35);
transition: all 0.2s;
z-index: 2;
}
@media (min-width: 481px) {
.upload-btn-circle {
width: 42px;
height: 42px;
bottom: 6px;
right: 6px;
font-size: 18px;
}
}
.upload-btn-circle:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0,122,255,0.45);
}
.remove-btn-circle {
position: absolute;
top: 0;
right: calc(50% - 55px); /* قرارگیری دقیق در لبه دایره آواتار */
width: 32px;
height: 32px;
background: var(--ios-red);
border: 3px solid white;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(255,59,48,0.35);
z-index: 2;
transition: all 0.2s;
}
body.dark-mode .remove-btn-circle { border-color: #182533; }
@media (min-width: 481px) {
.remove-btn-circle {
width: 32px;
height: 32px;
top: 5px;
right: calc(50% - 55px);
}
}
.remove-btn-circle:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(255,59,48,0.45);
}
.modal-body-content {
padding: 0 20px;
margin-bottom: 20px;
}
@media (min-width: 481px) {
.modal-body-content {
padding: 0 28px;
margin-bottom: 24px;
}
}
.profile-info-display {
margin-bottom: 24px;
padding: 20px;
background: #FFFFFF;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.05);
text-align: center;
display: grid;
grid-template-columns: 1fr;
gap: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
body.dark-mode .profile-info-display {
background: var(--bg-secondary);
border: 1px solid var(--ios-separator);
}
.profile-edit-sections {
display: flex;
flex-direction: column;
gap: 24px;
text-align: right;
}
.edit-section {
display: flex;
flex-direction: column;
gap: 10px;
background: #FFFFFF;
padding: 16px;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
body.dark-mode .edit-section {
background: var(--bg-secondary);
border: 1px solid var(--ios-separator);
}
.edit-label {
font-size: 13px;
font-weight: 700;
color: var(--ios-gray);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.edit-input-group {
display: flex;
gap: 12px;
align-items: center;
}
.edit-input-group .pass-input {
margin-bottom: 0;
flex: 1;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid #E5E5EA;
background: #F9F9F9;
font-size: 15px;
color: #1c1c1e;
}
body.dark-mode .edit-input-group .pass-input {
background: var(--bg-primary);
border: 1px solid var(--ios-separator);
color: var(--ios-text-primary);
}
.mini-save-btn {
background: var(--ios-blue);
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
box-shadow: 0 4px 10px rgba(0,122,255,0.2);
}
.mini-save-btn:hover {
background: #005bb5;
transform: translateY(-1px);
}
.danger-zone {
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid var(--ios-separator);
display: flex;
flex-direction: column;
gap: 10px;
}
.btn-delete-account {
background: rgba(255, 59, 48, 0.1);
color: var(--ios-red);
}
.btn-delete-account:hover {
background: var(--ios-red);
color: white;
}
.profile-username {
font-size: 18px;
font-weight: 600;
color: var(--ios-text-primary);
margin-bottom: 6px;
}
.profile-email {
font-size: 14px;
color: var(--ios-text-secondary);
margin-bottom: 4px;
}
.password-change-form {
display: none;
text-align: right;
animation: fadeInUp 0.4s var(--ios-spring);
background: var(--bg-secondary);
padding: 18px;
border-radius: 16px;
margin-bottom: 16px;
border: 1px solid var(--ios-separator);
}
@media (min-width: 481px) {
.password-change-form {
padding: 20px;
margin-bottom: 20px;
}
}
.password-change-form h4 {
margin: 0 0 14px 0;
font-size: 15px;
color: var(--ios-text-primary);
font-weight: 600;
}
.pass-input {
width: 100%;
padding: 12px 14px;
margin-bottom: 10px;
border: 1px solid var(--ios-separator);
border-radius: 12px;
font-size: 15px;
background: var(--bg-primary);
transition: all 0.3s;
color: var(--ios-text-primary);
}
@media (min-width: 481px) {
.pass-input {
padding: 14px 16px;
margin-bottom: 12px;
}
}
.pass-input:focus {
border-color: var(--ios-blue);
box-shadow: 0 0 0 3px var(--ios-blue-dim);
background: var(--bg-primary);
}
.modal-actions {
padding: 0 20px 28px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 481px) {
.modal-actions {
padding: 0 28px 32px 28px;
gap: 12px;
}
}
.action-btn {
width: 100%;
padding: 14px;
border: none;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
@media (min-width: 481px) {
.action-btn {
padding: 16px;
border-radius: 16px;
font-size: 17px;
}
}
.action-btn:active {
transform: scale(0.97);
}
.action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-save {
background: var(--ios-blue);
color: white;
box-shadow: 0 6px 16px rgba(0,122,255,0.3);
}
.btn-save:hover {
box-shadow: 0 8px 20px rgba(0,122,255,0.4);
transform: translateY(-1px);
}
.btn-change-pass {
background: var(--bg-primary);
color: var(--ios-text-primary);
border: 1px solid var(--ios-separator);
}
.btn-change-pass:hover {
background: var(--bg-secondary);
}
.btn-cancel {
background: transparent;
color: var(--ios-text-secondary);
font-weight: 500;
}
.btn-cancel:hover {
color: var(--ios-text-primary);
}
.btn-admin-link {
background: #5856D6;
color: white;
box-shadow: 0 6px 16px rgba(88,86,214,0.3);
}
.btn-admin-link:hover {
box-shadow: 0 8px 20px rgba(88,86,214,0.4);
transform: translateY(-1px);
}
.btn-delete-account {
background: var(--ios-red);
color: white;
box-shadow: 0 6px 16px rgba(255,59,48,0.3);
}
.btn-delete-account:hover {
box-shadow: 0 8px 20px rgba(255,59,48,0.4);
transform: translateY(-1px);
}
/* --- Toast --- */
#toast {
visibility: hidden; min-width: 200px; background-color: rgba(30, 30, 30, 0.85); backdrop-filter: blur(12px);
color: #fff; text-align: center; border-radius: 50px; padding: 14px 28px; position: fixed;
z-index: 10000; left: 50%; bottom: 50px; transform: translateX(-50%) translateY(20px);
font-size: 15px; font-weight: 500; opacity: 0; transition: all 0.4s var(--ios-spring); box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
#toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
/* --- Voice Modal --- */
#voice-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); z-index: 3000; align-items: center; justify-content: center; }
.voice-modal-box { background: white; padding: 32px; border-radius: 28px; text-align: center; width: 85%; max-width: 280px; box-shadow: var(--shadow-float); }
.voice-timer { font-size: 48px; font-weight: 200; color: #1c1c1e; margin: 24px 0; font-family: monospace; letter-spacing: 2px; }
.voice-recording-indicator { width: 70px; height: 70px; background: var(--ios-red); border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; animation: pulse 1.5s infinite; color: white; font-size: 28px; box-shadow: 0 10px 25px rgba(255, 59, 48, 0.4); }
.voice-modal-btns { display: flex; justify-content: space-between; gap: 15px; margin-top: 25px; }
.btn-voice { flex: 1; padding: 14px; border: none; border-radius: 14px; color: white; font-weight: 600; font-size: 16px; cursor: pointer; transition: opacity 0.2s; }
.btn-voice:active { opacity: 0.7; }
.btn-cancel { background: #F2F2F7; color: #1c1c1e; }
.btn-send-voice { background: var(--ios-blue); }
/* --- Animations --- */
@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 20px rgba(255, 59, 48, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes modalPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes messagePop { 0% { opacity: 0; transform: scale(0.95) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes highlightFlash {
0% { background-color: rgba(0, 122, 255, 0.3); }
100% { background-color: transparent; }
}
.highlight-msg .message-bubble {
animation: highlightFlash 2s ease-out;
}
/* --- Reactors Modal --- */
#reactors-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(8px); z-index: 6000; align-items: center; justify-content: center; }
.reactors-box { background: white; width: 90%; max-width: 320px; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; max-height: 60vh; box-shadow: var(--shadow-lg); animation: modalPop 0.3s var(--ios-spring); }
.reactors-header { padding: 18px; border-bottom: 0.5px solid #e5e5ea; text-align: center; font-weight: 600; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #fbfbfd; }
.reactors-list { overflow-y: auto; flex: 1; }
.reactor-item { padding: 14px 16px; display: flex; align-items: center; border-bottom: 0.5px solid #f5f5f7; transition: background 0.2s; }
.reactor-item:active { background: #f5f5f7; }
.reactor-avatar { width: 38px; height: 38px; border-radius: 50%; background: #eee; margin-left: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 1px solid rgba(0,0,0,0.05); }
.reactor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reactor-name { font-weight: 500; font-size: 16px; }
.reactor-close-btn { padding: 16px; background: white; color: var(--ios-blue); font-weight: 600; cursor: pointer; text-align: center; border-top: 0.5px solid #e5e5ea; font-size: 17px; transition: background 0.2s; }
.reactor-close-btn:active { background: #f2f2f7; }
/* --- Image Lightbox --- */
#image-lightbox { display: none; position: fixed; inset: 0; background-color: #000; z-index: 20000; justify-content: center; align-items: center; padding: 40px; cursor: pointer; opacity: 0; transition: opacity 0.3s; }
#image-lightbox.active { opacity: 1; }
#lightbox-img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 0; pointer-events: none; box-shadow: 0 0 50px rgba(255,255,255,0.1); }
#lightbox-close { position: absolute; top: 30px; right: 30px; width: 44px; height: 44px; background: rgba(255,255,255,0.15); border-radius: 50%; color: white; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); transition: background 0.2s; pointer-events: auto; border: 1px solid rgba(255,255,255,0.2); }
#lightbox-close:hover { background: rgba(255,255,255,0.3); }
/* Emoji Picker */
.emoji-picker { display: none; position: absolute; bottom: 75px; left: 15px; background: rgba(255,255,255,0.95); backdrop-filter: blur(25px); border-radius: 20px; padding: 12px; width: 280px; height: 220px; overflow-y: auto; box-shadow: 0 15px 40px rgba(0,0,0,0.15); z-index: 100; border: 1px solid rgba(0,0,0,0.05); animation: fadeInUp 0.2s var(--ios-spring); }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.emoji-item { font-size: 26px; cursor: pointer; text-align: center; padding: 6px; border-radius: 8px; transition: background 0.1s; }
.emoji-item:active { background: #e5e5ea; transform: scale(0.9); }
/* --- Search Bar Styling --- */
.search-container {
padding: 0;
position: relative;
background: transparent;
flex: 1;
min-width: 0;
margin-left: 12px;
}
.search-wrapper {
display: flex; align-items: center; background: var(--bg-secondary);
border-radius: 12px; padding: 8px 12px; transition: all 0.3s var(--ios-ease);
border: 1px solid var(--ios-separator);
}
.search-wrapper:focus-within { background: var(--bg-primary); border-color: var(--ios-blue); box-shadow: 0 0 0 3px var(--ios-blue-dim); }
.search-icon { color: var(--ios-gray); margin-left: 8px; display: flex; align-items: center; }
.search-input {
border: none; background: transparent; width: 100%; font-size: 15px;
color: var(--ios-text-primary); outline: none; padding: 2px 0;
}
.search-results {
position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
z-index: 9999; margin-top: 8px; max-height: 350px; overflow-y: auto;
display: none; border: 1px solid #e5e5ea;
animation: fadeInUp 0.2s var(--ios-spring);
}
body.dark-mode .search-results { background: #17212B !important; border-color: #101921 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.search-results.active { display: block !important; }
.search-result-item {
display: flex; align-items: center; padding: 12px 16px; cursor: pointer;
transition: background 0.2s; border-bottom: 1px solid #f2f2f7;
background: #FFFFFF;
}
body.dark-mode .search-result-item { background: #17212B; border-bottom-color: #101921; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #f8f9fa; }
body.dark-mode .search-result-item:hover { background: #242F3D; }
.search-result-avatar {
width: 40px; height: 40px; border-radius: 50%; background: var(--ios-gray-light);
margin-left: 12px; display: flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.05);
}
.search-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.search-result-info { flex: 1; overflow: hidden; }
.search-result-name { font-weight: 600; font-size: 15px; color: var(--ios-text-primary); }
.search-result-username { font-size: 13px; color: var(--ios-gray); }
.search-no-result { padding: 20px; text-align: center; color: var(--ios-gray); font-size: 14px; }
/* استایلهای جدید برای جستجوی یکپارچه کاربران + کانالها */
.search-type-icon {
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.channel-badge {
display: inline-block;
background: var(--ios-blue);
color: white;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
margin-right: 6px;
vertical-align: middle;
line-height: 1.2;
}
.search-result-item.channel-result {
background: rgba(0, 122, 255, 0.03);
}
.search-result-item.channel-result:hover {
background: rgba(0, 122, 255, 0.08);
}
/* Dark Mode برای استایلهای جدید */
body.dark-mode .channel-badge {
background: #2481CC;
}
body.dark-mode .search-result-item.channel-result {
background: rgba(36, 129, 204, 0.08);
}
body.dark-mode .search-result-item.channel-result:hover {
background: rgba(36, 129, 204, 0.15);
}
/* Mobile & Tablet Responsiveness */
@media (max-width: 1024px) {
.sidebar { width: 100%; position: absolute; z-index: 10; }
.main-chat { position: absolute; inset: 0; transform: translateX(100%); transition: transform 0.35s var(--ios-spring); z-index: 20; width: 100%; }
.main-chat.active { transform: translateX(0); }
.back-btn { display: flex; }
.logout-btn { display: flex !important; }
#action-modal { left: 0; right: 0; bottom: 0; border-radius: 24px 24px 0 0; width: 100%; }
.emoji-picker { width: 90%; left: 5%; right: 5%; bottom: 80px; height: 200px; }
/* Fix for Tablet Input Area */
.chat-input-area {
padding-bottom: max(10px, env(safe-area-inset-bottom));
}
}
/* Specific Tablet Fixes (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.sidebar { width: 320px; position: relative; transform: none; }
.main-chat { position: relative; transform: none; width: auto; }
.back-btn { display: none; }
}
/* --- Follow Modal Styles --- */
#follow-modal {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(15px); z-index: 10001; justify-content: center; align-items: center;
}
.follow-modal-box {
background: rgba(255,255,255,0.95); width: 92%; max-width: 400px; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.25); animation: modalPop 0.4s var(--ios-spring); border: 1px solid rgba(255,255,255,0.5);
}
.follow-modal-header { padding: 18px 24px; border-bottom: 0.5px solid var(--ios-separator); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.5); }
.follow-modal-title { font-size: 18px; font-weight: 700; color: #000; }
.follow-modal-close { cursor: pointer; color: var(--ios-gray); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; transition: background 0.2s; }
.follow-modal-close:hover { background: rgba(0,0,0,0.05); }
.follow-modal-body { max-height: 450px; overflow-y: auto; padding: 10px 0; }
.follow-user-item { display: flex; align-items: center; padding: 12px 20px; text-decoration: none; color: inherit; transition: background 0.2s; border-bottom: 0.5px solid rgba(0,0,0,0.03); }
.follow-user-item:hover { background: rgba(0,0,0,0.03); }
.follow-user-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ios-gray-light); margin-left: 15px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 20px; }
.follow-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.follow-user-info { flex: 1; text-align: right; }
.follow-user-name { font-weight: 600; font-size: 16px; color: #000; margin-bottom: 2px; }
.follow-user-username { font-size: 13px; color: var(--ios-gray); }
.follow-empty-state { padding: 40px 20px; text-align: center; color: var(--ios-gray); font-size: 15px; }
.list-badge { font-size: 10px; background: rgba(0, 122, 255, 0.08); color: var(--ios-blue); padding: 2px 8px; border-radius: 6px; font-weight: 700; margin-left: 8px; vertical-align: middle; }
body.dark-mode .list-badge { background: rgba(0, 122, 255, 0.15); }
body.dark-mode .follow-modal-box { background: rgba(28, 37, 48, 0.98); border-color: rgba(255,255,255,0.1); }
body.dark-mode .follow-modal-header { background: rgba(23, 33, 43, 0.5); border-color: rgba(255,255,255,0.1); }
body.dark-mode .follow-modal-title { color: #fff; }
body.dark-mode .follow-user-item:hover { background: rgba(255,255,255,0.05); }
body.dark-mode .follow-user-name { color: #fff; }
body.dark-mode .follow-user-avatar { background: #17212b; }
/* Global Dark Mode Fixes for Modals and Inputs - Telegram Navy Style */
body.dark-mode .modal-content-card { background: #17212B !important; color: #F5F5F5 !important; border: 1px solid #101921 !important; }
body.dark-mode .modal-header-section { background: #17212B !important; border-color: #101921 !important; }
body.dark-mode .modal-header-section h3 { color: #F5F5F5 !important; }
body.dark-mode .modal-input-field { background: #0E1621 !important; border-color: #101921 !important; color: #F5F5F5 !important; }
body.dark-mode .modal-input-field::placeholder { color: #708499 !important; }
body.dark-mode .modal-overlay-blur { background: rgba(14, 22, 33, 0.8) !important; backdrop-filter: blur(10px) !important; }
body.dark-mode .groups-list-container .group-item:hover,
body.dark-mode .channels-list-container .channel-item:hover { background: rgba(255,255,255,0.05) !important; }
body.dark-mode .initial-loader-bg { background: #0E1621 !important; }
body.dark-mode .initial-loader-bg div:last-child { color: #708499 !important; }
/* Tab Badge Styles - Fixed Position to avoid layout shift */
.tab-badge {
position: absolute;
top: 2px;
right: 2px;
background-color: #ff3b30;
color: white;
font-size: 9px;
font-weight: bold;
min-width: 15px;
height: 15px;
border-radius: 7.5px;
display: none;
align-items: center;
justify-content: center;
padding: 0 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
pointer-events: none;
z-index: 10;
line-height: 1;
}
.tab {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
}
/* --- Scroll to Bottom Floating Button --- */
.scroll-bottom-btn {
position: fixed;
bottom: 90px; /* بالای کادر ارسال پیام */
right: 20px;
width: 42px;
height: 42px;
background: var(--ios-bg);
color: var(--ios-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-float);
border: 1px solid var(--ios-separator);
cursor: pointer;
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.8);
transition: all 0.4s var(--ios-spring);
}
.scroll-bottom-btn.visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.scroll-bottom-btn:hover {
transform: scale(1.1);
background: var(--bg-secondary);
}
.scroll-bottom-btn:active {
transform: scale(0.9);
}
.scroll-bottom-btn svg {
width: 20px;
height: 20px;
stroke-width: 2.5;
}
/* هماهنگی با تم تاریک */
body.dark-mode .scroll-bottom-btn {
background: #1c2733;
border-color: #2b3948;
color: #2481CC;
}
/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
.scroll-bottom-btn {
bottom: 80px;
right: 15px;
width: 38px;
height: 38px;
}
}
/* --- User Points Header Styles --- */
.user-points-header {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #FF9500, #FFCC00);
padding: 6px 14px;
border-radius: 14px;
color: #fff;
font-weight: 700;
font-size: 15px;
box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
cursor: default;
transition: transform 0.2s, box-shadow 0.2s;
margin-left: auto; /* Push to the right in RTL */
}
.user-points-header:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(255, 149, 0, 0.4);
}
.points-icon {
display: flex;
align-items: center;
justify-content: center;
animation: coin-spin 3s infinite linear;
}
.points-icon svg {
width: 20px;
height: 20px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.points-label {
font-size: 11px;
opacity: 0.9;
font-weight: 500;
margin-top: 1px;
}
@keyframes coin-spin {
0% { transform: rotateY(0deg); }
20% { transform: rotateY(360deg); }
100% { transform: rotateY(360deg); }
}
body.dark-mode .user-points-header {
background: linear-gradient(135deg, #2481CC, #3498DB);
box-shadow: 0 4px 12px rgba(36, 129, 204, 0.3);
}
body.dark-mode .user-points-header:hover {
box-shadow: 0 6px 16px rgba(36, 129, 204, 0.4);
}
/* --- سیستم امتیازدهی: استایلهای هدر منو و اصلاح آیکونها --- */
.user-points-display-header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(255, 149, 0, 0.12);
border-radius: 20px;
border: 1.5px solid rgba(255, 149, 0, 0.25);
transition: all 0.3s ease;
margin-left: auto;
}
body.dark-mode .user-points-display-header {
background: rgba(10, 132, 255, 0.12);
border-color: rgba(10, 132, 255, 0.25);
}
.coin-icon-header {
width: 18px !important;
height: 18px !important;
color: #FF9500;
animation: coin-rotate 3s infinite linear;
}
body.dark-mode .coin-icon-header {
color: #0A84FF;
}
#header-user-points {
font-weight: 800;
font-size: 16px;
color: #FF9500;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body.dark-mode #header-user-points {
color: #0A84FF;
}
/* اصلاح اندازه آیکونهای منوی کناری برای جلوگیری از بزرگ شدن */
.side-menu-item svg, .side-menu-header svg {
width: 22px !important;
height: 22px !important;
min-width: 22px;
flex-shrink: 0;
}
@keyframes coin-rotate {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.points-pulse {
animation: points-pulse 0.5s ease-out;
}
@keyframes points-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* --- Admin Manage Modal Styles --- */
.admin-modal-premium {
animation: ios-modal-in 0.35s var(--ios-spring);
}
@keyframes ios-modal-in {
from { transform: scale(1.1); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.admin-action-row {
width: 100%;
display: flex;
align-items: center;
gap: 15px;
padding: 12px 15px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 16px;
transition: background 0.2s, transform 0.1s;
margin-bottom: 4px;
}
.admin-action-row:hover {
background: var(--ios-gray-light);
}
.admin-action-row:active {
transform: scale(0.98);
}
.admin-action-row .action-icon {
width: 38px;
height: 38px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.admin-action-row .action-label {
font-size: 15px;
font-weight: 600;
color: var(--ios-text-primary);
}
.admin-action-row.danger .action-label {
color: var(--ios-red);
}
.admin-cancel-btn:hover {
opacity: 0.8;
}
/* Dark Mode Overrides for Admin Modal */
body.dark-mode .admin-action-row:hover {
background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .admin-cancel-btn {
background: #2b3948 !important;
color: #fff !important;
}