/* ═══════════════════════════════════════════════════
   FAMILYGRAM — CSS
   Themes: dark | light | amoled | blue | green | rose
═══════════════════════════════════════════════════ */

/* ── Theme Variables ────────────────────────────── */
[data-theme="dark"] {
  --bg-0: #0e1621;
  --bg-1: #17212b;
  --bg-2: #232e3c;
  --bg-3: #2b3a4a;
  --accent: #4A90D9;
  --accent-dim: #2b5278;
  --bubble-out: #2b5278;
  --bubble-in: #1e2c3a;
  --text-1: #f0f4f8;
  --text-2: #7d94a8;
  --text-3: #4a6278;
  --border: rgba(255,255,255,0.06);
  --red: #e05252;
  --green: #4caf7d;
  --shadow: 0 4px 28px rgba(0,0,0,0.55);
  --hover: rgba(255,255,255,0.05);
}
[data-theme="light"] {
  --bg-0: #e8edf2;
  --bg-1: #f2f4f6;
  --bg-2: #ffffff;
  --bg-3: #eaecef;
  --accent: #3A80C1;
  --accent-dim: #d0e3f5;
  --bubble-out: #3A80C1;
  --bubble-in: #ffffff;
  --text-1: #1a1f25;
  --text-2: #6b7a8d;
  --text-3: #9eaab8;
  --border: rgba(0,0,0,0.08);
  --red: #d93535;
  --green: #2e9e5b;
  --shadow: 0 4px 20px rgba(0,0,0,0.12);
  --hover: rgba(0,0,0,0.04);
}
[data-theme="amoled"] {
  --bg-0: #000000;
  --bg-1: #0a0a0a;
  --bg-2: #111111;
  --bg-3: #1a1a1a;
  --accent: #5288c1;
  --accent-dim: #1a2d45;
  --bubble-out: #1a3a5c;
  --bubble-in: #111111;
  --text-1: #ffffff;
  --text-2: #6a7888;
  --text-3: #3a4858;
  --border: rgba(255,255,255,0.04);
  --red: #e05252;
  --green: #4caf7d;
  --shadow: 0 4px 28px rgba(0,0,0,0.9);
  --hover: rgba(255,255,255,0.04);
}
[data-theme="blue"] {
  --bg-0: #0d1b2e;
  --bg-1: #122238;
  --bg-2: #1a3050;
  --bg-3: #1e3a60;
  --accent: #4fc3f7;
  --accent-dim: #1a3a60;
  --bubble-out: #1565c0;
  --bubble-in: #122238;
  --text-1: #e8f4fd;
  --text-2: #6fa8c8;
  --text-3: #3d6a90;
  --border: rgba(255,255,255,0.07);
  --red: #ef5350;
  --green: #66bb6a;
  --shadow: 0 4px 28px rgba(0,0,0,0.7);
  --hover: rgba(255,255,255,0.05);
}
[data-theme="green"] {
  --bg-0: #0d1f15;
  --bg-1: #122819;
  --bg-2: #1a3522;
  --bg-3: #1e3f28;
  --accent: #66bb6a;
  --accent-dim: #1a3f22;
  --bubble-out: #1b5e20;
  --bubble-in: #122819;
  --text-1: #e8f5e9;
  --text-2: #6aaa78;
  --text-3: #3d7a4a;
  --border: rgba(255,255,255,0.07);
  --red: #ef5350;
  --green: #66bb6a;
  --shadow: 0 4px 28px rgba(0,0,0,0.7);
  --hover: rgba(255,255,255,0.05);
}
[data-theme="rose"] {
  --bg-0: #1f0d16;
  --bg-1: #281220;
  --bg-2: #38182d;
  --bg-3: #42203a;
  --accent: #f48fb1;
  --accent-dim: #42203a;
  --bubble-out: #880e4f;
  --bubble-in: #281220;
  --text-1: #fce4ec;
  --text-2: #b07a92;
  --text-3: #7a4a60;
  --border: rgba(255,255,255,0.07);
  --red: #ef5350;
  --green: #66bb6a;
  --shadow: 0 4px 28px rgba(0,0,0,0.7);
  --hover: rgba(255,255,255,0.05);
}

/* ── Reset & Base ───────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg-1); color:var(--text-1); height:100vh; overflow:hidden; font-size:15px; line-height:1.5; }

/* ── Auth ───────────────────────────────────────── */
.auth-screen { display:flex; align-items:center; justify-content:center; height:100vh; background:var(--bg-0); position:relative; overflow:hidden; }
.auth-bg-decor { position:absolute; inset:0; background:radial-gradient(ellipse at 30% 20%, var(--accent) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, var(--accent) 0%, transparent 40%); opacity:.06; pointer-events:none; }
.auth-container { width:380px; background:var(--bg-2); border-radius:20px; padding:40px; box-shadow:var(--shadow); border:1px solid var(--border); position:relative; z-index:1; }
.auth-logo { display:flex; align-items:center; gap:14px; margin-bottom:32px; }
.auth-logo-mark { flex-shrink:0; }
.auth-logo-text h1 { font-size:24px; font-weight:700; color:var(--text-1); }
.auth-logo-text p { color:var(--text-2); font-size:13px; }
.auth-tabs { display:flex; background:var(--bg-0); border-radius:10px; padding:3px; margin-bottom:24px; gap:3px; }
.auth-tab { flex:1; padding:9px; border:none; background:transparent; color:var(--text-2); border-radius:8px; cursor:pointer; font-weight:500; font-size:14px; transition:all .2s; }
.auth-tab.active { background:var(--accent); color:#fff; }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:12px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.5px; }
.form-group input, .form-group textarea {
  width:100%; padding:11px 14px; background:var(--bg-0); border:1.5px solid var(--border);
  border-radius:10px; color:var(--text-1); font-size:14px; font-family:inherit;
  transition:border-color .2s; outline:none; resize:none;
}
.form-group input:focus, .form-group textarea:focus { border-color:var(--accent); }
.btn-primary { padding:12px; background:var(--accent); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; transition:opacity .2s,transform .1s; }
.btn-primary:hover { opacity:.9; }
.btn-primary:active { transform:scale(.98); }
.btn-ghost { padding:11px 18px; background:transparent; color:var(--text-2); border:1.5px solid var(--border); border-radius:10px; cursor:pointer; font-size:14px; transition:background .2s; }
.btn-ghost:hover { background:var(--hover); }
.form-error { color:var(--red); font-size:13px; text-align:center; min-height:16px; }

/* ── App Layout ─────────────────────────────────── */
.app { display:flex; height:100vh; }
.hidden { display:none !important; }

/* ── Sidebar ────────────────────────────────────── */
.sidebar { width:340px; min-width:240px; background:var(--bg-2); border-right:1px solid var(--border); display:flex; flex-direction:column; position:relative; flex-shrink:0; }
.sidebar-header { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); height:56px; }
.app-brand { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--text-1); flex:1; }
.icon-btn { background:transparent; border:none; color:var(--text-2); cursor:pointer; padding:8px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s; }
.icon-btn:hover { background:var(--hover); color:var(--text-1); }
.search-wrap { padding:8px 12px; border-bottom:1px solid var(--border); }
.search-box { display:flex; align-items:center; background:var(--bg-3); border-radius:20px; padding:7px 12px; gap:8px; }
.search-box input { background:transparent; border:none; outline:none; color:var(--text-1); font-size:14px; width:100%; }
.search-box input::placeholder { color:var(--text-3); }

/* Dropdown */
.sidebar-menu { position:absolute; top:56px; left:0; right:0; background:var(--bg-2); border-bottom:1px solid var(--border); z-index:200; box-shadow:var(--shadow); }
.menu-user { display:flex; align-items:center; gap:12px; padding:14px 16px; }
.menu-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; flex-shrink:0; }
.menu-user-name { font-weight:600; font-size:14px; }
.menu-user-sub { color:var(--text-2); font-size:12px; }
.menu-divider { height:1px; background:var(--border); }
.menu-item { width:100%; padding:11px 16px; background:transparent; border:none; color:var(--text-1); text-align:left; cursor:pointer; font-size:14px; display:flex; align-items:center; gap:10px; transition:background .15s; }
.menu-item:hover { background:var(--hover); }
.menu-item.danger { color:var(--red); }

/* Chat list */
.chat-list { flex:1; overflow-y:auto; }
.chat-list::-webkit-scrollbar { width:3px; }
.chat-list::-webkit-scrollbar-thumb { background:var(--accent); border-radius:2px; }
.list-placeholder { padding:32px; text-align:center; color:var(--text-3); font-size:14px; }

.chat-item { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; transition:background .15s; border-bottom:1px solid var(--border); }
.chat-item:hover { background:var(--hover); }
.chat-item.active { background:var(--accent-dim); }
.chat-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:#fff; flex-shrink:0; }
.chat-info { flex:1; min-width:0; }
.chat-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
.chat-name { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-time { font-size:11px; color:var(--text-3); white-space:nowrap; margin-left:8px; }
.chat-preview { font-size:13px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-preview .sender { color:var(--accent); }

/* ── Chat Area ──────────────────────────────────── */
.chat-area { flex:1; display:flex; flex-direction:column; background:var(--bg-1); position:relative; overflow:hidden; min-width:0; }
.welcome-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.welcome-logo { opacity:.3; }
.welcome-screen h2 { font-size:22px; font-weight:700; color:var(--text-2); }
.welcome-screen p { font-size:14px; color:var(--text-3); }
.chat-view { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* Chat Header */
.chat-header { display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--bg-2); border-bottom:1px solid var(--border); height:56px; flex-shrink:0; }
.back-btn { display:none; }
.chat-header-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; }
.chat-header-info { flex:1; min-width:0; }
.chat-header-name { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-header-status { font-size:12px; color:var(--text-2); }
.chat-header-actions { display:flex; gap:2px; }

/* Messages */
.messages-container { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; }
.messages-container::-webkit-scrollbar { width:3px; }
.messages-container::-webkit-scrollbar-thumb { background:var(--accent-dim); border-radius:2px; }
.messages-list { display:flex; flex-direction:column; gap:1px; }

.date-divider { text-align:center; margin:14px 0; pointer-events:none; }
.date-divider span { background:var(--bg-3); color:var(--text-2); font-size:11px; padding:4px 12px; border-radius:10px; border:1px solid var(--border); }

.message { display:flex; gap:8px; max-width:72%; animation:fadeUp .16s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.message.outgoing { align-self:flex-end; flex-direction:row-reverse; }
.message.incoming { align-self:flex-start; }
.message + .message { margin-top:1px; }
.message.outgoing + .message.outgoing,
.message.incoming + .message.incoming { margin-top:1px; }

.msg-avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; align-self:flex-end; margin-bottom:2px; }
.message.outgoing .msg-avatar { display:none; }

.message-bubble { background:var(--bubble-in); padding:8px 12px 6px; border-radius:16px 16px 16px 4px; position:relative; cursor:pointer; transition:filter .12s; border:1px solid var(--border); }
.message.outgoing .message-bubble { background:var(--bubble-out); border-radius:16px 16px 4px 16px; border-color:transparent; color:#fff; }
.message-bubble:hover { filter:brightness(1.08); }

.message-sender { font-size:12px; font-weight:600; margin-bottom:3px; color:var(--accent); }
.message-text { font-size:14px; line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.message.outgoing .message-text { color:rgba(255,255,255,.95); }
.message-meta { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:3px; }
.message-time { font-size:10px; color:var(--text-3); }
.message.outgoing .message-time { color:rgba(255,255,255,.5); }
.tick-icon { font-size:10px; color:rgba(255,255,255,.5); }

/* Reply preview inside bubble */
.bubble-reply { background:var(--hover); border-left:2.5px solid var(--accent); border-radius:4px; padding:5px 8px; margin-bottom:6px; }
.bubble-reply-name { font-size:11px; font-weight:600; color:var(--accent); margin-bottom:1px; }
.bubble-reply-text { font-size:12px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Media */
.msg-image { max-width:240px; max-height:240px; border-radius:10px; cursor:zoom-in; display:block; object-fit:cover; }
.msg-video { max-width:260px; border-radius:10px; display:block; }
.msg-audio-wrap { display:flex; align-items:center; gap:10px; min-width:180px; padding:2px 0; }
.msg-play-btn { width:36px; height:36px; border-radius:50%; background:var(--accent); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .2s; }
.msg-play-btn:hover { opacity:.85; }
.msg-waveform { flex:1; height:28px; cursor:pointer; }
.msg-audio-time { font-size:11px; color:var(--text-2); white-space:nowrap; }
.msg-file { display:flex; align-items:center; gap:10px; background:var(--hover); border-radius:10px; padding:10px; min-width:180px; }
.msg-file-icon { width:36px; height:36px; border-radius:8px; background:var(--accent-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.msg-file-info { flex:1; min-width:0; }
.msg-file-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-file-size { font-size:11px; color:var(--text-2); margin-top:1px; }
.msg-file-dl { color:var(--accent); font-size:12px; text-decoration:none; display:inline-block; margin-top:3px; }
.msg-file-dl:hover { text-decoration:underline; }

/* Typing */
.typing-indicator { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--bubble-in); border-radius:14px; width:fit-content; margin-top:8px; font-size:12px; color:var(--text-2); border:1px solid var(--border); }
.typing-dots { display:flex; gap:3px; }
.typing-dots span { width:5px; height:5px; background:var(--text-2); border-radius:50%; animation:bounce 1.2s infinite; }
.typing-dots span:nth-child(2){animation-delay:.2s} .typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }

/* ── Input Area ─────────────────────────────────── */
.message-input-area { background:var(--bg-2); border-top:1px solid var(--border); padding:10px 14px; flex-shrink:0; }
.reply-preview { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.reply-bar { width:3px; height:36px; background:var(--accent); border-radius:2px; flex-shrink:0; }
.reply-preview-content { flex:1; min-width:0; }
.reply-to-name { font-size:12px; font-weight:600; color:var(--accent); }
.reply-to-text { font-size:12px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.file-preview-bar { display:flex; align-items:center; gap:10px; background:var(--bg-0); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:8px; }
.file-preview-inner { flex:1; min-width:0; font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:10px; }

.message-input-row { display:flex; align-items:flex-end; gap:8px; }
#message-input {
  flex:1; background:var(--bg-0); border:1.5px solid var(--border); border-radius:20px;
  padding:10px 16px; color:var(--text-1); font-size:14px; font-family:inherit;
  outline:none; resize:none; max-height:130px; overflow-y:auto; line-height:1.5;
  transition:border-color .2s;
}
#message-input:focus { border-color:var(--accent); }
#message-input::placeholder { color:var(--text-3); }

.send-btn { width:40px; height:40px; border-radius:50%; background:var(--accent); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity .2s,transform .1s; flex-shrink:0; }
.send-btn:hover { opacity:.9; }
.send-btn:active { transform:scale(.94); }

.voice-btn { width:40px; height:40px; border-radius:50%; background:var(--bg-0); border:1.5px solid var(--border); color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; user-select:none; -webkit-user-select:none; }
.voice-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.voice-btn.recording { background:var(--red); border-color:var(--red); color:#fff; animation:recPulse .8s infinite; }
@keyframes recPulse { 0%,100%{box-shadow:0 0 0 0 rgba(224,82,82,.4)} 50%{box-shadow:0 0 0 8px rgba(224,82,82,0)} }

/* ── Emoji Picker ───────────────────────────────── */
.emoji-picker {
  position:absolute; bottom:68px; left:14px;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:16px; padding:10px; box-shadow:var(--shadow); z-index:200;
  width:300px;
}
.emoji-categories { display:flex; gap:4px; padding-bottom:8px; border-bottom:1px solid var(--border); margin-bottom:8px; overflow-x:auto; }
.emoji-cat-btn { background:transparent; border:none; cursor:pointer; padding:6px 10px; border-radius:8px; color:var(--text-2); font-size:13px; font-weight:500; white-space:nowrap; transition:all .15s; }
.emoji-cat-btn.active,.emoji-cat-btn:hover { background:var(--accent-dim); color:var(--accent); }
.emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; max-height:180px; overflow-y:auto; }
.emoji-grid::-webkit-scrollbar { width:3px; }
.emoji-grid::-webkit-scrollbar-thumb { background:var(--accent-dim); border-radius:2px; }
.emoji-item { background:transparent; border:none; cursor:pointer; padding:6px 4px; border-radius:8px; font-size:20px; line-height:1; text-align:center; transition:background .12s,transform .12s; display:flex; align-items:center; justify-content:center; }
.emoji-item:hover { background:var(--accent-dim); transform:scale(1.18); }

/* ── Context Menu ───────────────────────────────── */
.context-menu { position:fixed; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); z-index:1000; min-width:170px; }
.context-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; background:transparent; border:none; color:var(--text-1); text-align:left; cursor:pointer; font-size:13px; transition:background .12s; }
.context-menu button:hover { background:var(--hover); }
.context-menu button.danger { color:var(--red); }
.ctx-divider { height:1px; background:var(--border); margin:2px 0; }

/* ── Info Panel ─────────────────────────────────── */
.info-panel { width:290px; background:var(--bg-2); border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.info-panel-header { display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--border); height:56px; font-weight:600; }
.info-panel-content { overflow-y:auto; flex:1; }
.info-section { padding:14px; border-bottom:1px solid var(--border); }
.info-section-label { font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; font-weight:600; }
.info-big-avatar { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:#fff; margin:0 auto 12px; }
.info-title { text-align:center; font-size:18px; font-weight:700; margin-bottom:4px; }
.info-subtitle { text-align:center; font-size:13px; color:var(--text-2); }
.info-desc { font-size:13px; color:var(--text-2); margin-top:10px; line-height:1.5; }
.member-item { display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; transition:background .12s; }
.member-item:hover { background:var(--hover); }
.m-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:13px; flex-shrink:0; }
.m-name { font-size:13px; font-weight:500; }
.m-role { font-size:11px; color:var(--text-2); }
.m-call-btns { display:flex; gap:4px; margin-left:auto; }

/* ── Modals ─────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:900; backdrop-filter:blur(6px); }
.modal { background:var(--bg-2); border-radius:18px; width:420px; max-width:92vw; max-height:82vh; display:flex; flex-direction:column; box-shadow:var(--shadow); border:1px solid var(--border); animation:slideIn .2s ease; }
.modal-sm { width:340px; }
@keyframes slideIn { from{transform:translateY(-16px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-header h3 { font-size:15px; font-weight:700; }
.modal-body { padding:18px 20px; overflow-y:auto; flex:1; }
.section-label { font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin:14px 0 8px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); }
.users-list { display:flex; flex-direction:column; gap:2px; }
.user-select-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer; transition:background .12s; }
.user-select-item:hover { background:var(--hover); }
.user-select-item input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); }
.direct-user-item { display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; cursor:pointer; transition:background .12s; }
.direct-user-item:hover { background:var(--hover); }

/* ── Theme Grid ─────────────────────────────────── */
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.theme-btn { background:transparent; border:2px solid var(--border); border-radius:12px; padding:10px 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; transition:all .2s; color:var(--text-1); font-size:12px; font-weight:500; }
.theme-btn:hover,.theme-btn.active { border-color:var(--accent); background:var(--accent-dim); }
.theme-preview { width:56px; height:38px; border-radius:6px; overflow:hidden; position:relative; }
.theme-preview::before { content:''; position:absolute; top:0; left:0; width:38%; height:100%; }
.theme-preview::after { content:''; position:absolute; top:20%; right:0; width:62%; height:60%; border-radius:4px 0 0 0; }
.theme-preview-dark { background:#17212b; } .theme-preview-dark::before { background:#232e3c; } .theme-preview-dark::after { background:#2b5278; }
.theme-preview-light { background:#e8edf2; } .theme-preview-light::before { background:#fff; } .theme-preview-light::after { background:#3A80C1; }
.theme-preview-amoled { background:#000; } .theme-preview-amoled::before { background:#111; } .theme-preview-amoled::after { background:#1a3a5c; }
.theme-preview-blue { background:#0d1b2e; } .theme-preview-blue::before { background:#1a3050; } .theme-preview-blue::after { background:#1565c0; }
.theme-preview-green { background:#0d1f15; } .theme-preview-green::before { background:#1a3522; } .theme-preview-green::after { background:#1b5e20; }
.theme-preview-rose { background:#1f0d16; } .theme-preview-rose::before { background:#38182d; } .theme-preview-rose::after { background:#880e4f; }

/* ── Call UI ────────────────────────────────────── */
.call-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:2000; backdrop-filter:blur(12px); }
.call-box { background:var(--bg-2); border-radius:24px; padding:36px 48px; text-align:center; box-shadow:var(--shadow); border:1px solid var(--border); min-width:270px; animation:slideIn .2s ease; }
.call-avatar { width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; color:#fff; margin:0 auto 16px; animation:ringPulse 1.8s infinite; }
@keyframes ringPulse { 0%,100%{box-shadow:0 0 0 0 rgba(74,144,217,.4)} 50%{box-shadow:0 0 0 16px rgba(74,144,217,0)} }
.call-name { font-size:20px; font-weight:700; margin-bottom:4px; }
.call-subtitle { font-size:13px; color:var(--text-2); margin-bottom:28px; }
.call-controls { display:flex; justify-content:center; gap:20px; }
.call-btn { width:60px; height:60px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s,opacity .15s; }
.call-btn:hover { transform:scale(1.07); opacity:.9; }
.call-btn-accept { background:var(--green); }
.call-btn-end { background:var(--red); }
.local-video-preview { position:absolute; bottom:14px; right:14px; width:90px; border-radius:8px; border:2px solid var(--accent); }

.call-active-box { background:var(--bg-2); border-radius:22px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); width:min(92vw,680px); animation:slideIn .2s ease; }
.call-active-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.call-active-name { font-size:17px; font-weight:700; }
.call-timer { font-size:14px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.call-video-area { position:relative; background:#000; border-radius:12px; overflow:hidden; margin-bottom:14px; min-height:180px; }
.remote-video { width:100%; max-height:400px; object-fit:cover; display:block; min-height:180px; }
.local-video { position:absolute; bottom:10px; right:10px; width:110px; border-radius:8px; border:2px solid var(--accent); background:#111; }
.call-no-video { display:flex; align-items:center; justify-content:center; padding:30px 0 20px; }
.call-audio-avatar { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:700; color:#fff; animation:ringPulse 1.8s infinite; }
.call-active-controls { display:flex; justify-content:center; gap:14px; }
.call-ctrl-btn { width:50px; height:50px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--bg-3); color:var(--text-1); transition:all .15s; }
.call-ctrl-btn:hover { background:var(--hover); }
.call-ctrl-btn.call-btn-end { background:var(--red); }
.call-ctrl-btn.muted,.call-ctrl-btn.cam-off { opacity:.45; }

/* ── Voice Recording Bar ────────────────────────── */
.recording-bar { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:var(--bg-2); border:1px solid var(--red); border-radius:24px; padding:10px 20px; display:flex; align-items:center; gap:12px; font-size:13px; z-index:1000; box-shadow:var(--shadow); animation:fadeUp .2s ease; }
.rec-dot { width:8px; height:8px; background:var(--red); border-radius:50%; animation:recPulse .8s infinite; flex-shrink:0; }
.rec-timer { font-weight:600; font-variant-numeric:tabular-nums; color:var(--red); }
.rec-cancel { background:transparent; border:none; color:var(--text-2); cursor:pointer; font-size:12px; padding:4px 8px; border-radius:6px; }
.rec-cancel:hover { background:var(--hover); }

/* ── Upload toast ───────────────────────────────── */
.upload-toast { position:fixed; top:16px; left:50%; transform:translateX(-50%); background:var(--bg-2); border:1px solid var(--border); border-radius:20px; padding:10px 20px; display:flex; align-items:center; gap:10px; font-size:13px; z-index:2000; box-shadow:var(--shadow); }
.upload-spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Responsive ─────────────────────────────────── */
@media(max-width:720px) {
  .sidebar { width:100%; position:absolute; z-index:20; height:100%; }
  .sidebar.mobile-hidden { transform:translateX(-100%); }
  .back-btn { display:flex !important; }
  .info-panel { width:100%; position:absolute; right:0; top:0; bottom:0; z-index:15; }
  .chat-header-actions button:not(.back-btn) { display:none; }
  .chat-header-actions button[onclick="showChatInfo()"] { display:flex; }
}

/* Scrollbar global */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:var(--accent-dim); border-radius:2px; }

/* ==========================================================================
   MOBILE ADAPTATION (FamilyGram)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. ������� �������: ������ ���������� �� ���� ����� */
    .app {
        position: relative;
        width: 100vw;
        overflow: hidden;
    }

    .sidebar {
        width: 100%;
        min-width: 100%;
        position: absolute;
        z-index: 10;
        transition: transform 0.3s ease;
    }

    .chat-area {
        width: 100%;
        position: absolute;
        z-index: 5;
        background: var(--bg-1);
    }

    /* 2. ������ ������������ (��������/���������� ����� ������) */
    /* ���� ������� ���� ����������� �� �������� - ��� �� �����, �������� ��� */
    .welcome-screen {
        display: none !important;
    }

    /* ���� ��� ������� (.chat-view �� hidden), �������� ������� ����� */
    .app:has(.chat-view:not(.hidden)) .sidebar {
        transform: translateX(-100%);
    }

    /* 3. ������ "�����" � ����� ���� (��� � ��� ��� ���� � HTML) */
    .back-btn {
        display: flex !important; /* ���������� �� ��������� */
        margin-right: 8px;
    }

    /* 4. ����� ����������� */
    .auth-container {
        width: 90%;
        padding: 24px;
        margin: 0 16px;
    }

    /* 5. ��������� ���� */
    .modal {
        width: 95% !important;
        max-height: 90vh;
    }

    /* 6. ��������� ������� ����� ��� ������� */
    .message-input-row {
        padding: 8px;
        gap: 4px;
    }

    .message-input-area {
        padding: 8px;
    }

    #message-input {
        padding: 10px 12px;
        font-size: 16px; /* ������������� ��� � iOS */
    }

    /* 7. ������ */
    .call-box {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* �������� ������ ����� �� ��������, ���� ��� �� ����� */
@media (min-width: 769px) {
    .back-btn {
        display: none !important;
    }
}