*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#07111f;color:#eaf3ff}body{overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.hidden{display:none!important}.mobile-only{display:none}.x-logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#39bdf8,#1479d8);color:#fff;font-size:28px;box-shadow:0 12px 30px #0788e755}.landing{min-height:100dvh;display:grid;place-items:center;overflow:auto;background:radial-gradient(circle at 15% 20%,#0c2b4b 0,transparent 34%),radial-gradient(circle at 90% 10%,#073a61 0,transparent 30%),#07111f}.landing-card{text-align:center;width:min(800px,92%);padding:50px}.hero-logo{margin:0 auto 22px}.eyebrow{letter-spacing:3px;color:#58bdf7;font-size:12px;font-weight:900}.landing h1{font-size:clamp(42px,8vw,78px);line-height:1;letter-spacing:-3px;margin:16px 0}.landing h1 span{color:#38aef3}.landing p{max-width:680px;margin:0 auto;color:#9eb4ca;font-size:18px;line-height:1.6}.landing-actions{display:flex;gap:12px;justify-content:center;margin:30px 0}.landing-points{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;color:#7f9bb7;font-size:13px}.x-btn{border:1px solid #204766;border-radius:14px;padding:12px 18px;font-weight:800;color:#eaf5ff;background:#10263b;display:inline-flex;justify-content:center;align-items:center;gap:8px}.x-btn.primary{background:linear-gradient(135deg,#169ce9,#1168c8);border-color:#22aef4;box-shadow:0 10px 30px #0a8bd844}.x-btn.glass{background:#0b1d30}.x-btn.big{padding:15px 24px}.x-btn.mini{padding:8px 12px;font-size:12px}.x-auth{background:radial-gradient(circle at 50% 0,#0b3153,transparent 45%),#07111f;overflow:auto}.auth-shell{width:min(430px,92%);padding:34px;border:1px solid #20445f;border-radius:26px;background:#081a2cdd;box-shadow:0 30px 90px #0008}.auth-shell .x-logo{margin-bottom:18px}.auth-shell h1{margin:0 0 8px}.auth-shell form{display:grid;gap:14px;margin-top:24px}.auth-shell label{display:grid;gap:7px;font-weight:750;color:#cfe0ef}.auth-shell input{padding:13px 14px;border-radius:13px;border:1px solid #264b68;background:#061524;color:#fff;outline:none}.auth-shell input:focus{border-color:#2aaaf2;box-shadow:0 0 0 3px #2aaaf222}.muted{color:#89a2ba}.error,.notice{padding:12px 14px;border-radius:13px;margin-top:14px}.error{background:#4a1720;color:#ffb7c0}.notice{background:#0c3552;color:#a9ddff}.back{display:inline-block;margin-bottom:18px;color:#88a9c3}.install-help{font-size:12px;color:#6f8ca5;margin-top:18px;line-height:1.5}.install-bar{position:fixed;z-index:100;top:10px;left:50%;transform:translateX(-50%);width:min(680px,94%);padding:9px 11px;border:1px solid #286082;background:#09233ade;backdrop-filter:blur(16px);border-radius:15px;display:flex;align-items:center;gap:10px;box-shadow:0 16px 50px #0008}.install-bar span{flex:1;font-size:12px}.icon-btn{border:0;background:transparent;color:#cfe6fa;width:40px;height:40px;border-radius:12px;font-size:24px;display:grid;place-items:center}.icon-btn:hover{background:#12304a}.xgram-app{height:100dvh;background:#07111f}.app-shell{height:100%;display:grid;grid-template-columns:345px 1fr 255px;max-width:1550px;margin:auto;border-left:1px solid #183650;border-right:1px solid #183650}.sidebar{background:#061525;border-right:1px solid #17334b;display:flex;flex-direction:column;min-width:0}.side-head{height:76px;padding:14px 15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #163249}.brand{display:flex;align-items:center;gap:10px;flex:1}.brand b{display:block;font-size:17px}.brand small{display:block;color:#62809b;font-size:10px}.mini-logo{width:38px;height:38px;border-radius:12px;font-size:19px}.search-box{margin:12px 14px;background:#0b2033;border:1px solid #173c57;border-radius:13px;display:flex;align-items:center;padding:0 12px;color:#6d91ad}.search-box input{border:0;outline:0;background:transparent;color:#e8f3ff;width:100%;padding:11px 8px}.chat-list{flex:1;overflow:auto}.chat-item{display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid #102b40;cursor:pointer;position:relative}.chat-item.active{background:linear-gradient(90deg,#0b3150,#0a253b)}.chat-item:hover{background:#0a263c}.avatar{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:850;font-size:17px;background:linear-gradient(145deg,#f1cda9,#806a59);color:#fff;position:relative;overflow:hidden}.avatar.blue{background:linear-gradient(145deg,#168fd8,#164a8c)}.avatar.cyan{background:linear-gradient(145deg,#2fb6ec,#075a8f)}.live-avatar em{position:absolute;right:1px;bottom:2px;width:11px;height:11px;border-radius:50%;background:#26d99b;border:2px solid #071525;box-shadow:0 0 12px #26d99b}.chat-meta{min-width:0;flex:1}.chat-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.chat-line b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{font-size:10px;color:#6f8ca6;white-space:nowrap}.last{display:flex;align-items:center;gap:6px;margin-top:5px;color:#88a5bd;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{margin-left:auto;background:#1598e7;color:#fff;border-radius:99px;padding:2px 7px;font-size:10px;font-weight:800}.side-nav{height:64px;border-top:1px solid #17334b;display:grid;grid-template-columns:repeat(4,1fr);background:#061523}.side-nav-btn{border:0;background:transparent;color:#6f8ca7;font-size:18px;position:relative}.side-nav-btn span{display:block;font-size:9px;margin-top:2px}.side-nav-btn.active{color:#36b5f8}.side-nav-btn i{position:absolute;top:7px;right:20%;font-size:8px;background:#f03b4f;color:white;border-radius:10px;padding:2px 4px;font-style:normal}.chat-area{min-width:0;display:flex;flex-direction:column;background:#07182a;position:relative}.chat-area:before{content:"";position:absolute;inset:76px 0 64px;background-image:radial-gradient(#15334c 1px,transparent 1px);background-size:22px 22px;opacity:.18;pointer-events:none}.chat-head{height:76px;display:flex;align-items:center;gap:10px;padding:10px 14px;background:#071827ee;border-bottom:1px solid #17364d;z-index:2}.head-avatar{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f0c69c,#705c4e);position:relative;flex:none;overflow:hidden}.head-info{min-width:0;flex:1}.head-info b{display:block;font-size:15px}.head-info small{display:block;color:#35c5f4;font-size:11px;margin-top:3px}.head-actions{display:flex;gap:1px}.pin-bar{margin:0;padding:8px 16px;border-bottom:1px solid #1d4561;background:#08243a;color:#39b9f1;font-size:11px;z-index:2}.messages{position:relative;z-index:1;flex:1;overflow:auto;padding:18px 5%;display:flex;flex-direction:column;gap:8px}.welcome{margin:auto;text-align:center;max-width:460px;color:#7895ad}.welcome .x-logo{margin:0 auto 15px;width:64px;height:64px}.welcome h2{color:#dcecf8;margin:0 0 8px}.welcome p{line-height:1.6}.quick-tools{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:20px}.quick-tools button,.composer-tools button{border:1px solid #24506d;background:#0b2942;color:#8fd8fb;border-radius:10px;padding:7px 9px}.bubble-row{display:flex;gap:8px;max-width:78%}.bubble-row.mine{align-self:flex-end;flex-direction:row-reverse}.bubble{padding:9px 12px;border-radius:14px;background:#10283e;border:1px solid #193d57;box-shadow:0 4px 15px #0002}.mine .bubble{background:linear-gradient(145deg,#087cd1,#0d65b5);border-color:#1b9bf0}.bubble .sender{font-size:10px;color:#46bdf4;margin-bottom:3px;font-weight:800}.bubble .body{font-size:13px;line-height:1.45;white-space:pre-wrap}.bubble .stamp{font-size:9px;color:#91b3cb;text-align:right;margin-top:4px}.ai-bubble{background:linear-gradient(145deg,#142f43,#102338);border-color:#23678e}.file-card,.media-card,.game-card,.tool-card{margin-top:7px;border-radius:13px;border:1px solid #2a6b91;background:#0a3150;padding:10px}.file-card b{display:block}.tool-title{color:#43c0f5;font-weight:900;font-size:11px;margin-bottom:7px}.composer{min-height:64px;padding:9px 12px;display:flex;align-items:flex-end;gap:7px;background:#071827;border-top:1px solid #17364d;z-index:3}.composer-main{flex:1;background:#0b2237;border:1px solid #1a4562;border-radius:15px;display:flex;align-items:flex-end}.composer textarea{flex:1;resize:none;border:0;outline:0;background:transparent;color:#edf8ff;padding:11px 12px;min-height:42px;max-height:120px}.composer-tools{display:flex;gap:2px;padding:4px}.composer-tools button{border:0;background:transparent;padding:5px;color:#7fa7c0}.send-btn{width:44px;height:44px;border-radius:50%;border:0;background:#0e8dd8;color:#fff;font-size:20px}.send-btn:disabled{opacity:.35}.profile-panel{background:#061525;border-left:1px solid #17334b;overflow:auto}.profile-top{height:76px;display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid #17334b}.profile-avatar-wrap{padding:28px 20px 12px;display:flex;justify-content:center;position:relative}.profile-avatar{width:105px;height:105px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e4bc96,#6b574b);font-size:34px;position:relative}.profile-avatar.large em{width:17px;height:17px}.theme-dot{position:absolute;right:26px;bottom:15px;width:36px;height:36px;border-radius:50%;border:1px solid #2b5571;background:#0b2941;color:#cceeff}.profile-panel h2{text-align:center;margin:4px 0}.profile-panel>p{text-align:center;color:#36baf2;margin:0 0 18px;font-size:12px}.profile-section{margin:0 14px 15px;border:1px solid #15374f;border-radius:13px;overflow:hidden}.profile-section div{padding:13px 14px;border-bottom:1px solid #15374f;font-size:13px;display:flex;gap:13px}.profile-section div:last-child{border-bottom:0}.profile-section div:hover{background:#0b253b}.logout-link{display:block;text-align:center;padding:16px;color:#ff8290}.modal-backdrop{position:fixed;inset:0;background:#0009;z-index:200;display:grid;place-items:center;padding:15px}.modal{width:min(680px,100%);max-height:90dvh;overflow:auto;background:#081b2d;border:1px solid #23506d;border-radius:20px;box-shadow:0 30px 100px #000c}.modal-head{padding:15px 18px;border-bottom:1px solid #1a3b53;display:flex;justify-content:space-between;align-items:center}.modal-body{padding:18px}.modal h3{margin-top:0}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tool-card-btn{padding:14px;border:1px solid #1e4864;border-radius:13px;background:#0b263c;color:#d9efff;text-align:left}.tool-card-btn b{display:block;color:#41baf1;margin-bottom:4px}.search-result{padding:11px;border:1px solid #1c4661;border-radius:12px;margin-top:8px;background:#0b2237}.search-result small{color:#67a4c7}.code-box{background:#04101b;border:1px solid #1a3d55;border-radius:12px;padding:12px;white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:12px;overflow:auto}.game-board{display:grid;grid-template-columns:repeat(3,72px);gap:6px;justify-content:center;margin:18px}.game-cell{height:72px;border:1px solid #245776;border-radius:10px;background:#0c2940;color:#fff;font-size:30px}.reaction{padding:18px;border-radius:16px;background:linear-gradient(145deg,#0b3551,#0b1e32);text-align:center;font-size:34px;animation:reaction 1.3s ease infinite alternate}.mask-face{width:170px;height:170px;border-radius:50%;margin:auto;background:radial-gradient(circle at 35% 38%,#fff 0 7%,transparent 8%),radial-gradient(circle at 65% 38%,#fff 0 7%,transparent 8%),linear-gradient(145deg,#183d59,#0a1d30);display:grid;place-items:center;font-size:68px;box-shadow:inset 0 0 0 3px #2e789e}.collab textarea{width:100%;min-height:260px;background:#04101b;color:#e8f5ff;border:1px solid #214b67;border-radius:12px;padding:13px;resize:vertical}.install-bar+.app-shell{padding-top:0}@keyframes reaction{to{transform:scale(1.07) rotate(2deg)}}@media(max-width:1100px){.app-shell{grid-template-columns:320px 1fr}.profile-panel{display:none}.mobile-only{display:grid}}@media(max-width:720px){body{overflow:hidden}.app-shell{display:block;border:0}.sidebar{position:fixed;z-index:150;left:0;top:0;bottom:0;width:min(340px,92vw);transform:translateX(-102%);transition:.25s;box-shadow:20px 0 60px #000b}.sidebar.open{transform:translateX(0)}.chat-head{height:64px;padding-top:max(8px,env(safe-area-inset-top));height:calc(64px + env(safe-area-inset-top))}.chat-area:before{inset:64px 0 64px}.head-actions .icon-btn:first-child{display:none}.messages{padding:12px 3%}.bubble-row{max-width:88%}.composer{padding-bottom:max(8px,env(safe-area-inset-bottom))}.side-nav{height:62px}.modal{max-height:94dvh}.tool-grid{grid-template-columns:1fr}.landing-card{padding:25px}.landing-actions{flex-direction:column}}
@media(max-width:1100px){.profile-panel.show{display:block;position:fixed;z-index:180;right:0;top:0;bottom:0;width:min(330px,92vw);box-shadow:-20px 0 60px #000b}}
/* XGram profile studio */
.cover-banner{height:112px;margin:0 12px;border-radius:0 0 18px 18px;position:relative;overflow:hidden;background:linear-gradient(135deg,#071d34,#0a7894 48%,#101d40);border:1px solid #214d68;box-shadow:inset 0 0 40px #36c8f522}
.cover-banner:after{content:"";position:absolute;width:180px;height:180px;border:1px solid #7ee9ff55;border-radius:50%;right:-35px;top:-75px;box-shadow:0 0 0 28px #54dfff12,0 0 0 58px #54dfff08}
.cover-shine{position:absolute;inset:-80px -20px;background:linear-gradient(115deg,transparent 30%,#9af5ff18 48%,transparent 65%);transform:rotate(-8deg);animation:coverMove 6s linear infinite}
.cover-label{position:absolute;left:16px;bottom:13px;font-size:9px;letter-spacing:2px;color:#b8efff;font-weight:900;z-index:2}
.profile-role-row{display:flex;justify-content:center;gap:7px;margin-top:-3px;position:relative;z-index:2}.role-badge,.level-badge{font-size:9px;font-weight:900;letter-spacing:.7px;padding:5px 8px;border-radius:999px;border:1px solid #2b6685;background:#09283e;color:#61d2f7}.level-badge{color:#d7e9ff;border-color:#365273}
.profile-bio{margin:0 20px 9px;text-align:center;color:#9eb7c9;font-size:12px;line-height:1.45}.profile-status{margin:0 auto 10px;width:max-content;max-width:88%;padding:6px 10px;border-radius:999px;background:#09273b;border:1px solid #1e5570;color:#58d2f7;font-size:11px}.profile-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:0 15px 14px}.profile-tags span{font-size:10px;color:#8ee4ff;background:#0a2a40;border:1px solid #1d5672;padding:4px 7px;border-radius:999px}.profile-mini div{display:block}.profile-mini b{display:block;color:#d9efff;font-size:12px;margin-bottom:4px}.profile-mini small{display:block;color:#7798b0;font-size:10px;line-height:1.4}.profile-action{width:100%;padding:13px 14px;border:0;border-bottom:1px solid #15374f;background:transparent;color:#d9efff;text-align:left;font-size:13px;display:flex;gap:13px}.profile-action:last-child{border-bottom:0}.profile-action:hover{background:#0b253b}.profile-form label,.quiz label{display:block;color:#8ba9bf;font-size:11px;margin:0 0 10px}.profile-form input,.profile-form textarea,.profile-form select,.quiz select{width:100%;box-sizing:border-box;margin-top:5px;padding:11px;border:1px solid #214a65;border-radius:11px;background:#061525;color:#e9f7ff;outline:0}.profile-form textarea{min-height:75px;resize:vertical}.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.prompt-list p{color:#9bb4c7;font-size:11px;line-height:1.5;margin-bottom:0}.node-avatar{background:radial-gradient(circle at 50% 50%,#19d8e9 0 3%,transparent 4%),radial-gradient(circle at 30% 30%,#22c7e8 0 2%,transparent 3%),radial-gradient(circle at 70% 65%,#4de3e8 0 2%,transparent 3%),linear-gradient(145deg,#061a2b,#07546b 55%,#101b46);box-shadow:inset 0 0 0 2px #48dff655,0 0 30px #16cce833}.node-avatar:before{content:"";position:absolute;width:62%;height:2px;background:#57e7ee88;transform:rotate(25deg);box-shadow:0 22px #57e7ee44,-18px -10px #57e7ee44}.node-avatar span{position:relative;z-index:2;color:#efffff;text-shadow:0 0 15px #37e5ff}
@keyframes coverMove{from{transform:translateX(-25%) rotate(-8deg)}to{transform:translateX(25%) rotate(-8deg)}}
@media(max-width:720px){.profile-panel{padding-top:env(safe-area-inset-top)}.cover-banner{height:125px}.profile-avatar-wrap{padding-top:18px}}
.verified{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#2196f3;color:#fff;font-size:11px;font-weight:800;vertical-align:middle}.admin-shell{max-width:1100px;margin:0 auto;padding:28px 18px}.admin-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:20px}.admin-card{background:rgba(10,25,42,.86);border:1px solid #183c58;border-radius:20px;padding:20px;margin:14px 0;box-shadow:0 12px 40px rgba(0,0,0,.18)}.admin-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}.admin-form input{padding:12px;border-radius:12px;border:1px solid #24506d;background:#061524;color:#fff}.admin-table{display:grid;gap:8px}.admin-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px;border:1px solid #17364f;border-radius:14px;background:#081a2a}.admin-row small{display:block;color:#8298ab;margin-top:4px}.admin-actions{display:flex;gap:7px;flex-wrap:wrap}.people-results{display:grid;gap:7px;margin-top:10px;max-height:280px;overflow:auto}.person-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid #17364f;background:#081a2a;color:#fff;border-radius:12px;text-align:left}.person-row small{display:block;color:#8ea2b5;margin-top:2px}.avatar-mini{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1d6bff,#17d4d4);font-weight:800}.avatar-mini.online:after{content:'';width:9px;height:9px;border-radius:50%;background:#32e27b;position:absolute;margin:27px 0 0 27px;border:2px solid #081a2a}.admin-link{text-decoration:none;color:inherit}
@media(max-width:760px){.admin-head{align-items:flex-start;flex-direction:column}.admin-form{grid-template-columns:1fr}.admin-row{align-items:flex-start;flex-direction:column}.admin-actions{width:100%}}
/* XGram Mobile UI v2 */
@media (max-width:720px){
html,body,.xgram-app{width:100%;height:100%;height:100dvh;min-height:100dvh;overscroll-behavior:none}
.app-shell{width:100%;height:100dvh;max-width:none;position:relative;overflow:hidden}
.chat-area{width:100%;height:100dvh;min-height:100dvh}
.chat-head{flex:none;padding-left:7px;padding-right:7px;background:#071827f7;backdrop-filter:blur(18px)}
.chat-head .icon-btn{width:42px;height:42px}
.head-avatar{width:40px;height:40px}
.head-info b{font-size:14px}
.head-info small{font-size:10px}
.head-actions{margin-left:auto}
.head-actions .icon-btn{width:38px;height:38px;font-size:21px}
.head-actions .icon-btn:first-child{display:grid}
.messages{padding:10px 10px 12px;gap:7px;scroll-padding-bottom:15px}
.bubble-row{max-width:91%}
.bubble{padding:8px 10px;border-radius:14px}
.bubble .body{font-size:14px}
.composer{min-height:62px;padding:7px 7px calc(7px + env(safe-area-inset-bottom));gap:5px}
.composer-main{border-radius:18px;min-width:0}
.composer textarea{font-size:16px;min-height:43px;max-height:110px;padding:10px 10px}
.composer-tools{display:none}
.attach-btn{display:grid}
.send-btn{width:45px;height:45px;flex:none}
.sidebar{width:min(360px,94vw);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.side-head{height:64px}
.search-box{margin:9px 11px}
.chat-item{padding:11px 12px}
.avatar{width:50px;height:50px}
.side-nav{height:64px;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.side-nav-btn{font-size:17px}
.side-nav-btn span{font-size:8px}
.side-nav-btn i{right:15%}
.admin-link{display:grid!important;text-decoration:none}
.profile-panel.show{width:100vw;max-width:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.profile-top{height:58px;position:sticky;top:0;z-index:5;background:#061525f5;backdrop-filter:blur(18px)}
.cover-banner{height:145px}
.profile-avatar{width:108px;height:108px}
.profile-section{margin-left:12px;margin-right:12px}
.modal-backdrop{padding:0;align-items:flex-end}
.modal{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;margin:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
.modal-head{padding:14px 15px}
.modal-body{padding:15px}
.tool-grid{grid-template-columns:1fr}
.game-board{grid-template-columns:repeat(3,64px)}
.game-cell{height:64px}
.install-bar{top:max(8px,env(safe-area-inset-top));width:calc(100% - 16px);padding:8px}
.install-bar span{font-size:11px}
.landing-card{width:100%;padding:25px 18px}
}
@media (max-width:420px){
.head-actions .icon-btn{display:none}
.head-actions .icon-btn:last-child{display:grid}
.brand small{display:none}
.brand b{font-size:16px}
.quick-tools button{font-size:11px}
}
/* XGram Mobile UX fix: real bottom navigation + usable content views */
.mobile-bottom-nav{display:none}
.mobile-view{height:100%;overflow:auto;padding:18px 14px 24px;background:#07182a}
.mobile-view h2{margin:4px 0 6px;font-size:22px}.mobile-view p{color:#88a6bd;line-height:1.5}
.mobile-view .view-card{display:flex;align-items:center;gap:12px;padding:13px;margin:8px 0;border:1px solid #183e58;border-radius:15px;background:#0a2135;color:#eaf5ff}
.mobile-view .view-card small{display:block;color:#7895ab;margin-top:3px}.mobile-view .view-card b{font-size:14px}.mobile-view .view-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#168fd8,#15508e);font-weight:800;flex:none}
.mobile-view .view-action{width:100%;padding:14px;margin-top:10px;border:1px solid #20516f;border-radius:14px;background:#0b2b43;color:#9bddfb;text-align:left}
@media(max-width:720px){
.mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;height:68px;padding:5px 4px calc(5px + env(safe-area-inset-bottom));z-index:140;background:rgba(5,18,31,.97);border-top:1px solid #183a52;backdrop-filter:blur(18px)}
.mobile-tab{border:0;background:transparent;color:#718fa8;border-radius:12px;font-size:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}.mobile-tab span{font-size:9px}.mobile-tab.active{color:#39b9f5;background:#0b2940}
.chat-area{padding-bottom:68px}.composer{position:absolute;left:0;right:0;bottom:68px}.messages{padding-bottom:10px}
.sidebar{padding-bottom:0}.sidebar .side-nav{display:none}
.chat-head{padding-left:4px}.chat-head #backBtn{display:none}.chat-head .mobile-only#openSide{display:grid}
.mobile-bottom-nav~*{position:relative}
}
@media(min-width:721px){.mobile-view{display:none}}