/* FriendConnect Mobile — оболочка в стиле мобильного мессенджера (Фаза 28).
   chat_widget.css уже подключён отдельно и даёт пузыри/войс-плеер/реакции — здесь только
   каркас: полноэкранные "экраны" (логин / список / чат), без десктопного сайдбара. */

html, body { height: 100%; overscroll-behavior-y: contain; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

.m-app { height: 100%; display: flex; flex-direction: column; }

.m-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--body-bg); }

/* ─── Логин ─────────────────────────────────────────────────────────────── */
.m-login { align-items: center; justify-content: center; padding: 24px; text-align: center; }
.m-login h1 { font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.m-login p { color: var(--text-muted); font-size: .85rem; margin: 0 0 24px; }
.m-login form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.m-login input {
    padding: 13px 14px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--card-bg); color: var(--text); font-size: .95rem; outline: none;
}
.m-login button {
    padding: 13px 14px; border-radius: 10px; border: none; background: var(--accent);
    color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.m-login button:active { background: var(--accent-hover); }

/* ─── Список диалогов ───────────────────────────────────────────────────── */
.m-list { position: relative; }
.m-list.m-hidden-behind { visibility: hidden; }
.m-list-header {
    flex-shrink: 0; padding: 12px 14px; background: var(--card-bg); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
}
.m-list-header select {
    flex: 1; font-size: .95rem; font-weight: 600; padding: 9px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--body-bg); color: var(--text);
}
.m-logout-btn {
    border: none; background: transparent; color: var(--text-muted); font-size: 1.2rem;
    padding: 6px 8px; cursor: pointer;
}
.m-search-bar {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 14px;
    background: var(--card-bg); border-bottom: 1px solid var(--border);
}
.m-search-bar i { color: var(--text-muted); font-size: .9rem; }
.m-search-bar input {
    flex: 1; border: none; background: transparent; color: var(--text); font-size: .9rem; outline: none;
}
.m-dialog-list { flex: 1; min-height: 0; overflow-y: auto; }

/* .dlg-item и соседние классы жили только во встроенном <style> dialogs_embed.php (десктопная
   страница) — в общий chat_widget.css их не выносили, поэтому здесь нужна собственная копия.
   Без неё разметка list-item рендерится вообще без стилей: аватар — обычный <div> без
   width/height, расползается на всю строку блоком цвета (поймано вживую на реальном скриншоте). */
.dlg-list-empty { padding: 30px 14px; text-align: center; color: var(--text-muted); font-size: .83rem; }
.dlg-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 62px;
    cursor: pointer; border-bottom: 1px solid var(--border);
} /* крупнее тач-таргет, чем на десктопе (padding/min-height) */
.dlg-item:active { background: rgba(99,102,241,.08); }
.dlg-item-avatar { width: 42px; height: 42px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: 1rem; }
.dlg-item-body { flex: 1; min-width: 0; }
.dlg-item-name { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; color: var(--text); }
.dlg-item-name.unread { font-weight: 700; }
.dlg-item-sub { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.dlg-bot-mark { font-size: .78rem; color: #16a34a; flex-shrink: 0; }
.dlg-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.dlg-item-time { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.dlg-item-unread { background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; min-width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }

/* ── Дропдаун "Контакт/Лиды/Сделки" в шапке чата (Фаза C) ──
   Классы жили только во встроенном <style> dialogs_embed.php (та же готча, что уже была со
   списком диалогов) — скопировано сюда, тач-таргет и min-width чуть крупнее под мобильный экран. */
.dlg-card-wrap { position:relative; display:inline-flex; flex-direction:column; min-width:0; }
.dlg-card-btn {
    background:none; border:none; padding:0; font: inherit; font-weight:600; color:var(--text);
    cursor:pointer; border-bottom:1px dashed var(--text-muted);
    display:inline-flex; align-items:center; gap:4px; line-height:1.3; max-width:100%;
}
.dlg-card-btn span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dlg-card-btn:active { border-bottom-color:var(--text); }
.dlg-card-menu {
    position:absolute; top:calc(100% + 6px); left:0; z-index:500;
    background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.22); min-width:230px; max-width:min(320px, 80vw); overflow:hidden;
}
.dlg-card-menu-item {
    display:flex; align-items:center; gap:8px; padding:11px 14px; font-size:.85rem; color:var(--text);
    cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dlg-card-menu-item:active { background:rgba(99,102,241,.1); }
.dlg-card-menu-item i { font-size:.95rem; flex-shrink:0; color:var(--text-muted); }
.dlg-card-menu-divider {
    padding:6px 14px 2px; font-size:.7rem; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.05em; border-top:1px solid var(--border); margin-top:2px;
}
.dlg-card-menu-empty { padding:6px 14px 10px; font-size:.78rem; color:var(--text-muted); }
.dlg-deal-stage { font-size:.76rem; color:var(--text-muted); font-weight:400; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.dlg-deal-label { font-size:.7rem; padding:1px 7px; border-radius:6px; font-weight:600; flex-shrink:0; background:rgba(37,211,102,.15); color:#16a34a; }

/* ─── Открытый чат — поверх списка, во весь экран ───────────────────────── */
.m-chat { position: fixed; inset: 0; display: none; z-index: 50; background: var(--body-bg); }
.m-chat-header { position: sticky; top: 0; z-index: 2; }
.m-back-btn {
    border: none; background: transparent; color: var(--text); font-size: 1.3rem;
    padding: 4px 8px 4px 0; margin-right: 2px; cursor: pointer; flex-shrink: 0;
}

/* Компоуз-бар — не даём мобильной клавиатуре перекрыть его без скролла */
.dlg-compose { padding-bottom: max(10px, env(safe-area-inset-bottom)); }