/* Phone-first Messenger. Desktop styling remains in chat.css. */
.wordmark strong { text-transform: uppercase; }
.tab-icon { display:flex; align-items:center; justify-content:center; }
.mobile-layout { --bg:#0b1418; --muted:#8b9aa2; --text:#edf3f5; background:var(--bg); }
.mobile-layout body { overflow:hidden; overscroll-behavior:none; background:var(--bg); }
.mobile-layout .app-shell { height:100vh; height:var(--app-height,100dvh); min-height:0; width:100%; max-width:none; }
.mobile-layout .workspace { min-height:0; width:100%; }
.mobile-layout .rail, .mobile-layout .app-footer { display:none; }
.mobile-layout .app-header { height:calc(68px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 16px 0; border:0; background:var(--bg); }
.mobile-layout .wordmark { gap:9px; min-width:0; }
.mobile-layout .wordmark img { display:block; width:29px; height:29px; object-fit:contain; }
.mobile-layout .wordmark strong { font-family:system-ui,sans-serif; font-size:25px; font-weight:750; letter-spacing:-.6px; text-transform:none; }
.mobile-layout .wordmark strong span, .mobile-layout .wordmark small { display:none; }
.mobile-layout .header-actions { gap:2px; }
.mobile-layout .connection { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.mobile-layout .header-actions>.icon-button { display:flex; width:42px; height:44px; color:#dce5e9; }
.mobile-layout .header-actions>.icon-button svg { width:23px; height:23px; }
.mobile-layout .my-avatar { order:-1; width:32px; height:32px; margin-right:5px; }
.mobile-layout .app-main { position:relative; min-height:0; overflow:hidden; }
.mobile-layout .directory { width:100%; min-width:0; border:0; background:var(--bg); }
.mobile-layout .section-top { padding:8px 20px 18px; }
.mobile-layout .section-top h1 { font-size:25px; margin:0; letter-spacing:-.6px; }
.mobile-layout .section-top .overline { display:none; }
.mobile-layout body[data-tab="threads"] .section-top { padding:0; height:0; }
.mobile-layout body[data-tab="threads"] .section-top>div { display:none; }
.mobile-layout .new-chat { position:absolute; z-index:5; right:20px; bottom:20px; width:58px; height:58px; border:0; border-radius:18px; background:#71d8cb; color:#0c302c; box-shadow:0 5px 18px #0005; }
.mobile-layout .new-chat svg { width:27px; height:27px; stroke-width:2; }
.mobile-layout body:not([data-tab="threads"]) .new-chat,
.mobile-layout body[data-authenticated="false"] .new-chat { display:none; }
.mobile-layout .search { flex-shrink:0; min-height:52px; margin:5px 14px 16px; padding:12px 18px; gap:13px; border:0; border-radius:30px; background:#202c32; }
.mobile-layout .search svg { width:22px; height:22px; stroke:#8d9ba3; stroke-width:1.8; }
.mobile-layout .search input { font-family:system-ui,sans-serif; font-size:16px; line-height:1.4; color:#edf3f5; }
.mobile-layout .search input::placeholder { color:#94a1a8; }
.mobile-layout .search kbd { display:none; }
.mobile-layout .filters { flex-shrink:0; padding:0 16px 15px; gap:8px; overflow-x:auto; scrollbar-width:none; }
.mobile-layout .chip { flex-shrink:0; min-height:36px; padding:7px 15px; border-radius:22px; border:1px solid #2b393f; background:none; color:#9eacb2; font-size:14px; font-weight:600; }
.mobile-layout .chip.active { background:#163c33; border-color:#2d5547; color:#bdebd0; }
.mobile-layout .directory-content { padding:0 0 92px; overflow-x:hidden; overscroll-behavior:contain; }
.mobile-layout .person-row { gap:14px; border:0; border-radius:0; padding:14px 17px; min-height:82px; }
.mobile-layout .person-row:hover { background:#152227; }
.mobile-layout .person-row.active { background:transparent; }
.mobile-layout .person-row:active { background:#1b3030; }
.mobile-layout .avatar-wrap { width:53px; height:53px; }
.mobile-layout .avatar { font-size:19px; }
.mobile-layout .presence-dot { width:13px; height:13px; border-color:var(--bg); }
.mobile-layout .person-title { gap:6px; min-width:0; }
.mobile-layout .person-title strong { font-family:system-ui,sans-serif; font-size:17px; line-height:1.35; font-weight:650; }
.mobile-layout .person-copy p { font-family:system-ui,sans-serif; font-size:14px; line-height:1.45; margin:5px 0 0; color:#94a3aa; }
.mobile-layout .person-meta { font-family:system-ui,sans-serif; padding-top:3px; font-size:11px; line-height:1.5; color:#8c9aa2; }
.mobile-layout .person-row.has-unread .person-meta { color:#71d8cb; }
.mobile-layout .person-row.has-unread .person-copy p { color:#d6e1e5; }
.mobile-layout .unread { min-width:21px; min-height:21px; padding:2px 6px; margin-top:8px; font-size:11px; }
.mobile-layout .activity-chip { font-size:8px; padding:3px 4px; }
.mobile-layout .push-nudge, .mobile-layout .mobile-mythic-banner { display:none; }
.mobile-layout .conversation { display:none; }
.mobile-layout .mobile-tabs { display:flex; justify-content:space-around; gap:0; flex-shrink:0; height:calc(78px + env(safe-area-inset-bottom)); padding:6px 6px env(safe-area-inset-bottom); background:#0b1418; border-top:1px solid #18272c; }
.mobile-layout .mobile-tabs .tab { width:25%; padding:2px 0 6px; gap:4px; background:none; color:#c4cfd3; font-family:system-ui,sans-serif; font-size:12px; font-weight:600; letter-spacing:0; }
.mobile-layout .mobile-tabs .tab-icon { width:62px; height:33px; border-radius:20px; }
.mobile-layout .mobile-tabs .tab svg { width:24px; height:24px; stroke-width:1.8; filter:none; }
.mobile-layout .mobile-tabs .tab.active { color:#edf5f0; font-weight:750; }
.mobile-layout .mobile-tabs .tab.active .tab-icon { background:#163c33; color:#bdebd0; }
.mobile-layout .mobile-tabs .tab.active:before { display:none; }
.mobile-layout .mobile-tabs .tab-badge { top:0; right:calc(50% - 32px); min-width:17px; border:2px solid #0b1418; font-size:10px; }
.mobile-layout .chat-open .directory, .mobile-layout .chat-open .app-header,
.mobile-layout .chat-open .mobile-tabs { display:none; }
.mobile-layout .chat-open .conversation { display:flex; width:100%; }
.mobile-layout .chat-header { min-height:calc(66px + env(safe-area-inset-top)); padding:calc(8px + env(safe-area-inset-top)) 8px 8px 3px; gap:6px; background:#111f26; border:0; }
.mobile-layout .chat-header .back { display:flex; width:37px; height:44px; color:#e3ebee; }
.mobile-layout .chat-header .avatar-wrap { width:40px; height:40px; }
.mobile-layout .chat-header .person-copy { margin-left:4px; }
.mobile-layout .chat-header .person-title strong { font-size:16px; }
.mobile-layout .chat-header .person-copy p { font-size:11px; margin-top:3px; }
.mobile-layout .chat-actions { gap:0; }
.mobile-layout .chat-actions .secondary { width:40px; height:44px; min-height:44px; padding:10px; background:none; border:0; color:#b6dfd1; justify-content:center; }
.mobile-layout .chat-actions .secondary span { display:none; }
.mobile-layout .chat-actions .secondary svg { width:23px; height:23px; }
.mobile-layout .chat-actions .icon-button { width:36px; height:44px; color:#d7e3e8; }
.mobile-layout .chat-room { padding:14px 12px; background:linear-gradient(#0b1519f2,#0b1519f7),url('/static/chat/retold-official.jpg') center/cover; overscroll-behavior:contain; }
.mobile-layout .privacy-line { font-size:10px; line-height:1.6; color:#91a29f; padding:10px 14px; border-radius:9px; background:#192929e8; margin:2px auto 18px; }
.mobile-layout .date-chip { font-size:11px; background:#1d2b30; color:#c0ced3; padding:6px 13px; margin:12px auto 17px; border-radius:8px; }
.mobile-layout .message { margin-bottom:8px; }
.mobile-layout .bubble { max-width:87%; padding:9px 12px 6px; background:#202f36; border:0; border-radius:10px 10px 10px 2px; box-shadow:0 1px 1px #0003; }
.mobile-layout .mine .bubble { background:#174b40; border:0; border-radius:10px 10px 2px 10px; }
.mobile-layout .bubble p { font-family:system-ui,sans-serif; font-size:16px; line-height:1.45; color:#e8f1ed; }
.mobile-layout .message-foot { font-size:10px; gap:5px; margin-top:4px; }
.mobile-layout .message-foot svg { width:16px; height:16px; }
.mobile-layout .report-message { min-width:26px; min-height:22px; font-size:15px; }
.mobile-layout .invite-card { min-width:0; width:260px; background:linear-gradient(125deg,#2b3e39,#23343d); border:1px solid #655b39; padding:15px; }
.mobile-layout .mine .invite-card { background:linear-gradient(125deg,#28463e,#203a35); border:1px solid #65714e; }
.mobile-layout .invite-card h3 { font-size:18px; line-height:1.5; }
.mobile-layout .invite-card p { font-size:13px; }
.mobile-layout .invite-card .secondary { min-height:44px; font-size:13px; }
.mobile-layout .composer-wrap { padding:7px 7px calc(8px + env(safe-area-inset-bottom)); background:#0d191f; border:0; }
.mobile-layout .composer { gap:6px; align-items:flex-end; }
.mobile-layout .composer .icon-button { width:37px; height:48px; color:#a6b6be; }
.mobile-layout .composer textarea { min-height:48px; max-height:120px; padding:12px 16px; font-family:system-ui,sans-serif; font-size:16px; line-height:24px; border:0; border-radius:25px; background:#233139; }
.mobile-layout .composer textarea::placeholder { color:#a2b0b8; }
.mobile-layout .send-button { width:48px; height:48px; border-radius:50%; flex-shrink:0; }
.mobile-layout .composer-note { display:none; }
.mobile-layout .typing-indicator { min-height:0; font-size:11px; padding:0 12px 5px; }
.mobile-layout .typing-indicator:empty { display:none; }
.mobile-layout .list-label { font-size:10px; padding:8px 20px 14px; }
.mobile-layout .duel-card { margin:0 14px 14px; padding:17px; }
.mobile-layout .duel-card .person-row { min-height:0; padding:0; }
.mobile-layout .duel-card .primary, .mobile-layout .duel-card .secondary { min-height:44px; font-size:12px; }
.mobile-layout .notice { width:calc(100% - 28px); margin:0 14px 12px; padding:17px; }
.mobile-layout .notice p { font-size:14px; line-height:1.6; }
.mobile-layout .notice small { font-size:10px; }
.mobile-layout .empty { padding:50px 30px 20px; font-size:14px; }
.mobile-layout .empty b { font-size:18px; }
.mobile-layout .empty .secondary { min-height:44px; font-size:13px; }
.mobile-layout .login-panel { padding:25px 24px; }
.mobile-layout .login-panel p { font-size:14px; }
.mobile-layout dialog { inset:auto 0 0; margin:0 auto; width:100%; max-width:600px; max-height:calc(var(--app-height,100dvh) - 22px); border-radius:24px 24px 0 0; padding:28px 24px calc(24px + env(safe-area-inset-bottom)); }
.mobile-layout dialog p, .mobile-layout dialog .toggle { font-size:14px; }
.mobile-layout dialog .primary, .mobile-layout dialog .secondary { min-height:46px; font-size:13px; }
.mobile-layout dialog .modal-close { width:44px; height:44px; top:2px; }
.mobile-layout .toast { bottom:95px; width:max-content; max-width:90%; font-size:13px; }
.mobile-layout .chat-open .toast { bottom:84px; }
.mobile-layout .welcome { display:none; }

.mobile-layout body[data-authenticated="false"] .mobile-push { display:none; }