:root{--navy:#171b3b;--navy2:#22264b;--ink:#20233e;--muted:#898da5;--teal:#36d7c0;--teal-dark:#119f98;--purple:#9d83f7;--line:#ececf4;--paper:#f7f8fc;--white:#fff;--shadow:0 18px 50px rgba(33,38,82,.08);--radius:20px}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-size:14px}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}.brand{display:flex;align-items:center;gap:11px;font-family:Manrope,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.8px}.brand>span:last-child{display:flex;flex-direction:column;line-height:1}.brand small{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;letter-spacing:.1px;color:#9da1b9;margin-top:6px}.brand-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),#9c8afa);color:var(--navy);font-family:Manrope,sans-serif;font-size:26px;font-weight:800;position:relative;box-shadow:0 8px 24px #2dd8c23b}.brand-mark span{font-size:14px;position:absolute;right:8px;top:6px}.brand-mark.small{width:36px;height:36px;border-radius:12px;font-size:20px}.brand-mark.small span{font-size:10px;right:5px;top:4px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--teal-dark);margin:0 0 13px}.muted{color:var(--muted);line-height:1.7}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:17px;border-radius:12px;padding:13px 18px;font-weight:700;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-1px)}.btn span{font-size:18px}.btn.primary{color:var(--navy);background:linear-gradient(105deg,#49e0c9,#a99bff);box-shadow:0 8px 22px #7bdbd33b}.btn.secondary{background:#f0f0fa;color:#454967}.btn.full{width:100%;margin-top:8px;padding:15px}.alert{background:#fff0f1;color:#a9344a;padding:12px 14px;border-radius:10px;margin:16px 0;font-size:13px}.alert.success{background:#e8fbf5;color:#127f70}.fine-print{font-size:11px;color:#a0a3b7;line-height:1.7;text-align:center;margin-top:24px}.auth-page{min-height:100vh;background:#fff}.auth-layout{min-height:100vh;display:grid;grid-template-columns:minmax(360px, .95fr) 1.05fr}.auth-visual{background:radial-gradient(circle at 80% 20%,#38376b 0,transparent 34%),linear-gradient(145deg,#191c3d,#26264e 65%,#37305f);color:#fff;padding:44px clamp(32px,6vw,90px);display:flex;flex-direction:column;position:relative;overflow:hidden}.auth-visual:before,.auth-visual:after{content:'';position:absolute;border:1px solid #ffffff12;border-radius:50%;width:520px;height:520px;right:-240px;bottom:-180px}.auth-visual:after{width:370px;height:370px;right:-160px;bottom:-105px}.brand.light{position:relative;z-index:1}.brand.light small{color:#aeb2d0}.visual-copy{margin:auto 0;position:relative;z-index:1;padding:65px 0 75px}.visual-copy .eyebrow{color:var(--teal)}.visual-copy h1{font:800 clamp(44px,5vw,70px)/1.08 Manrope,sans-serif;letter-spacing:-3px;margin:0 0 20px}.visual-copy h1 em{font-style:normal;background:linear-gradient(90deg,#55e2cd,#b4a3ff);background-clip:text;-webkit-background-clip:text;color:transparent}.visual-copy>p{color:#c0c3db;font-size:16px;line-height:1.8;max-width:330px}.floating-chat{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#ffffff12;border:1px solid #ffffff1d;border-radius:16px;backdrop-filter:blur(12px);width:max-content;min-width:245px;box-shadow:0 15px 40px #11142a35}.floating-chat.one{margin-top:38px;margin-left:20px}.floating-chat.two{margin-top:12px;margin-left:75px}.floating-chat strong{font-size:12px}.floating-chat p{margin:5px 0 0;color:#c4c6dc;font-size:11px}.floating-chat>small{margin-left:auto;color:#b1b5d1;font-size:10px}.avatar{width:42px;height:42px;border-radius:15px;display:inline-grid;place-items:center;flex-shrink:0;background:linear-gradient(135deg,#c4b8ff,#7f72d8);color:#292447;font-size:12px;font-weight:800;position:relative}.avatar.violet{background:linear-gradient(135deg,#d5c7ff,#9b85f7)}.avatar.teal{background:linear-gradient(135deg,#a5f5e9,#4acbbd)}.sound-bars{color:var(--teal);letter-spacing:2px;font-size:12px}.visual-foot{position:relative;z-index:1;color:#aeb2d0;font-size:11px;letter-spacing:.3px}.visual-foot span{color:var(--teal);float:right}.quote-card{margin:38px 0 0 24px;padding:22px 24px;border-radius:18px;background:#ffffff10;border:1px solid #ffffff1a;max-width:320px}.quote-stars{color:var(--teal);letter-spacing:4px}.quote-card p{font:600 17px/1.6 Manrope,sans-serif}.quote-card small{color:#b7bbd6}.auth-form-wrap{display:grid;place-items:center;padding:48px 28px}.auth-form{width:min(100%,390px)}.auth-form h2{font:800 31px/1.2 Manrope,sans-serif;letter-spacing:-1px;margin:0 0 9px}.auth-form>.muted{margin:0 0 28px}.auth-form form{display:grid;gap:17px;margin-top:26px}.auth-form label,.settings-form label,.installer label{display:grid;gap:8px;font-size:12px;font-weight:700;color:#424661}.auth-form input,.settings-form input,.settings-form textarea,.installer input{border:1px solid #e7e8f1;border-radius:11px;padding:14px 14px;outline:0;background:#fbfbfe;color:var(--ink);width:100%;transition:border .2s,box-shadow .2s}.auth-form input:focus,.settings-form input:focus,.settings-form textarea:focus,.installer input:focus{border-color:#8cdbd3;box-shadow:0 0 0 3px #5bd8c51c}.input-prefix{position:relative}.input-prefix span{position:absolute;top:14px;left:14px;color:#9a9db2}.input-prefix input{padding-left:33px}.auth-switch{text-align:center;color:#7c8099;font-size:12px;margin-top:26px}.auth-switch a{font-weight:800;color:#6156b8}.mobile-brand{display:none}.app-page{background:#f7f8fc;min-height:100vh}.topbar{height:82px;background:#fff;border-bottom:1px solid #eff0f6;display:flex;align-items:center;gap:45px;padding:0 clamp(20px,4vw,58px);position:sticky;top:0;z-index:20}.topbar .brand{min-width:205px}.top-search{height:42px;max-width:540px;flex:1;display:flex;align-items:center;gap:10px;background:#f6f7fb;border:1px solid #f0f0f6;border-radius:13px;padding:0 14px;color:#8c90a7}.top-search>span{font-size:24px;transform:rotate(-20deg)}.top-search input{border:0;outline:0;background:transparent;width:100%;font-size:12px;color:var(--ink)}.top-actions{display:flex;align-items:center;gap:22px;margin-left:auto}.icon-btn{width:38px;height:38px;border:1px solid #efeff6;background:#fff;border-radius:12px;color:#666b87;font-size:19px;position:relative}.icon-btn i{position:absolute;right:7px;top:7px;width:6px;height:6px;background:#f08d9e;border:1px solid #fff;border-radius:50%}.profile-chip{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}.profile-chip b{color:#a4a6b8}.avatar.mini{width:32px;height:32px;border-radius:11px;font-size:10px}.app-shell{display:grid;grid-template-columns:225px minmax(0,1fr);min-height:calc(100vh - 82px)}.sidebar{background:#fff;border-right:1px solid #eff0f6;padding:30px 16px 18px;display:flex;flex-direction:column;min-height:calc(100vh - 82px)}.side-label{font-size:9px;letter-spacing:1.7px;color:#a2a5b9;font-weight:800;padding:0 13px 13px}.side-label.spaced{margin-top:30px}.nav-item{height:45px;border-radius:11px;padding:0 13px;display:flex;align-items:center;gap:13px;color:#777c96;font-size:12px;font-weight:600;margin-bottom:5px;transition:all .2s}.nav-item>span{font-size:18px;width:20px;text-align:center}.nav-item.active{background:linear-gradient(100deg,#e7fbf7,#f1efff);color:#333b69;font-weight:800}.nav-item.active>span{color:#1aa99c}.nav-count{margin-left:auto;color:#fff;background:#9a8bf3;border-radius:7px;padding:3px 6px;font-size:9px}.sidebar-bottom{margin-top:auto}.upgrade-card{background:linear-gradient(145deg,#242849,#393263);border-radius:15px;padding:17px 15px;color:#fff;margin:30px 0 22px;position:relative;overflow:hidden}.upgrade-card:after{content:'✦';position:absolute;right:10px;top:7px;font-size:55px;color:#ffffff0c}.upgrade-icon{color:var(--teal);font-size:20px;margin-bottom:12px}.upgrade-card strong{font:700 12px Manrope,sans-serif}.upgrade-card p{color:#b9bdd7;font-size:10px;line-height:1.6;margin-bottom:0}.user-mini{border-top:1px solid #eff0f6;padding:17px 3px 0;display:flex;align-items:center;gap:9px}.user-mini>div{display:flex;flex-direction:column;gap:4px;min-width:0}.user-mini strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-mini small{font-size:10px;color:#9a9db2}.user-mini>a{margin-left:auto;color:#9296ad;font-size:18px}.main-content{padding:38px clamp(20px,3.6vw,52px) 50px;min-width:0}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:29px}.page-heading h1{font:800 clamp(25px,2.7vw,34px)/1.2 Manrope,sans-serif;letter-spacing:-1.3px;margin:0 0 9px}.page-heading h1 span{color:#8e80e8}.page-heading .muted{margin:0;font-size:12px}.page-heading>.btn{white-space:nowrap}.chat-home{display:grid;grid-template-columns:minmax(330px,.9fr) minmax(340px,1.1fr);gap:22px;align-items:stretch}.conversation-panel,.welcome-panel,.contacts-card,.settings-card{background:#fff;border:1px solid #eff0f6;border-radius:20px;box-shadow:0 7px 25px #272a4d05}.conversation-panel{overflow:hidden;min-height:490px}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:24px 23px 18px}.panel-heading h2,.chat-list-head h2{font:800 17px Manrope,sans-serif;margin:0 0 6px;letter-spacing:-.4px}.panel-heading p{margin:0;color:#9b9eb2;font-size:11px}.soft-count{font:600 10px 'DM Sans',sans-serif;background:#f0efff;color:#7b6bd4;border-radius:6px;padding:4px 7px;vertical-align:middle;margin-left:5px}.round-action{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#edfbf8;color:#149f94;font-size:22px}.conversation-filter{display:flex;gap:8px;padding:0 22px 14px;border-bottom:1px solid #f1f1f7}.filter-pill{border:0;background:transparent;color:#9699ad;padding:8px 12px;border-radius:8px;font-size:10px;font-weight:700}.filter-pill.active{background:#f0efff;color:#7262cf}.conversation-list{padding:4px 10px 12px}.conversation-item{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:13px;transition:background .15s}.conversation-item:hover{background:#f8f9fd}.conversation-item[hidden]{display:none}.conversation-info{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.conversation-info strong{font-size:12px}.conversation-info small{font-size:10px;color:#9699ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}.conversation-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:stretch;justify-content:center}.conversation-meta small{font-size:9px;color:#a5a8ba}.unread-badge{min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;border-radius:7px;background:#2ccab7;color:#fff;font-size:9px}.empty-state{padding:50px 25px;text-align:center}.empty-art{width:58px;height:58px;display:grid;place-items:center;background:linear-gradient(135deg,#e0faf5,#f0edff);border-radius:20px;font-size:26px;color:#7e72dc;margin:0 auto 18px}.empty-state h3{font:700 15px Manrope,sans-serif}.empty-state p{font-size:11px;color:#999db2;line-height:1.7;margin-bottom:22px}.welcome-panel{min-height:490px;position:relative;overflow:hidden;background:linear-gradient(145deg,#222646,#29284f 60%,#393365);color:#fff;padding:42px;display:flex;flex-direction:column}.welcome-orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:260px;height:260px;right:-65px;top:-70px;background:radial-gradient(circle,#5d58a8aa,transparent 70%)}.orb-two{width:230px;height:230px;right:-30px;bottom:10px;background:radial-gradient(circle,#26bba233,transparent 70%)}.welcome-content{position:relative;z-index:1;max-width:370px;margin:auto 0}.welcome-icon{width:49px;height:49px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#4be1c9,#a69aff);color:#25264b;font:800 25px Manrope,sans-serif;position:relative;margin-bottom:28px}.welcome-icon span{position:absolute;font-size:12px;right:7px;top:5px}.welcome-content .eyebrow{color:var(--teal)}.welcome-content h2{font:800 clamp(26px,3vw,38px)/1.2 Manrope,sans-serif;letter-spacing:-1.2px;margin:0 0 17px}.welcome-content h2 em{font-style:normal;color:#b4a4ff}.welcome-content>p:not(.eyebrow){font-size:12px;line-height:1.9;color:#c1c4dc;max-width:300px}.text-link{display:inline-flex;gap:16px;align-items:center;color:#70e6d4;font-size:12px;font-weight:700;margin-top:12px}.text-link span{font-size:18px}.mini-stats{display:flex;gap:40px;margin-top:38px;padding-top:20px;border-top:1px solid #ffffff1c}.mini-stats div{display:flex;flex-direction:column;gap:6px}.mini-stats strong{font:800 23px Manrope,sans-serif}.mini-stats small{color:#aeb2ce;font-size:10px}.welcome-bottom{position:relative;z-index:1;margin-top:30px;font-size:8px;letter-spacing:1.7px;color:#999fc2}.welcome-bottom span{float:right;color:var(--teal);font-size:14px}.contacts-card,.settings-card{padding:24px}.contact-search{display:flex;align-items:center;gap:12px;background:#f8f9fc;border:1px solid #eff0f6;border-radius:12px;padding:6px 8px 6px 14px;margin-bottom:22px}.contact-search>span{font-size:24px;color:#9699ad}.contact-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;padding:9px 0}.contact-search .btn{padding:10px 14px}.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:15px}.contact-card{border:1px solid #eff0f6;border-radius:16px;padding:20px 17px;text-align:center;position:relative}.contact-top{display:flex;justify-content:center;align-items:center;position:relative;margin-bottom:13px}.avatar.large{width:58px;height:58px;border-radius:20px;font-size:15px}.presence{display:inline-block;width:8px;height:8px;border-radius:50%;background:#c6c8d6}.presence.online{background:#35cfaa;box-shadow:0 0 0 3px #35cfaa1d}.contact-top .presence{position:absolute;left:calc(50% + 17px);bottom:1px;border:2px solid white;width:12px;height:12px}.contact-status{position:absolute;right:0;top:0;font-size:9px;color:#9a9db0}.contact-card h3{font:700 14px Manrope,sans-serif;margin:0 0 5px}.username{font-size:10px;color:#9185df;margin:0}.status-message{font-size:10px;color:#9da0b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:14px 0 18px}.contact-card .btn{font-size:11px;padding:11px}.chat-layout{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 160px);background:#fff;border:1px solid #eff0f6;border-radius:20px;overflow:hidden;box-shadow:0 7px 25px #272a4d05}.chat-list-column{border-right:1px solid #eff0f6;padding:22px 15px}.chat-list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.back-to-chats{font-size:11px;color:#898da6;display:block;margin:15px 0 20px}.active-chat-preview{display:flex;align-items:center;gap:10px;background:#f2fbf9;padding:11px;border-radius:12px}.active-chat-preview>div{display:flex;flex-direction:column;gap:5px;min-width:0}.active-chat-preview strong{font-size:11px}.active-chat-preview small{font-size:10px;color:#9a9db1}.chat-room{display:flex;flex-direction:column;min-width:0;min-height:620px}.chat-room-header{height:76px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid #f0f0f6}.chat-person{display:flex;flex-direction:column;gap:6px}.chat-person strong{font-size:12px}.chat-person small{font-size:10px;color:#9699ad;display:flex;align-items:center;gap:7px}.chat-person .presence{width:6px;height:6px}.room-actions{margin-left:auto}.message-area{padding:22px 26px;flex:1;overflow-y:auto;max-height:calc(100vh - 350px);min-height:340px;background:radial-gradient(circle at 15% 20%,#f4f1ff75,transparent 28%),radial-gradient(circle at 90% 80%,#e8fbf675,transparent 28%),#fdfdff}.date-divider{text-align:center;margin:0 0 22px}.date-divider span{font-size:8px;font-weight:800;letter-spacing:1.4px;color:#b0b2c3;background:#fff;border:1px solid #f0f0f6;border-radius:7px;padding:7px 11px}.messages{display:flex;flex-direction:column;gap:14px}.loading-messages{font-size:11px;color:#9b9eb2;text-align:center;padding:30px}.message-row{display:flex;max-width:78%}.message-row.mine{align-self:flex-end;justify-content:flex-end}.message-row.theirs{align-self:flex-start}.bubble{padding:12px 14px 8px;border-radius:15px 15px 15px 4px;background:#fff;border:1px solid #efeff6;box-shadow:0 3px 10px #28284c06;min-width:90px}.mine .bubble{background:linear-gradient(125deg,#e3faf5,#eeecff);border-color:#e3f2f3;border-radius:15px 15px 4px 15px}.message-text{font-size:12px;line-height:1.65;overflow-wrap:anywhere}.bubble-meta{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:7px}.bubble-meta time,.message-status{font-size:8px;color:#a1a4b8}.message-status{color:#8b7cdb}.attachment-link{display:block;color:#5d55b6;font-size:11px;text-decoration:underline;margin-top:6px}.composer{display:flex;align-items:flex-end;gap:11px;padding:15px 20px;border-top:1px solid #f0f0f6;background:#fff}.composer-icon{border:0;background:#f5f4ff;color:#8173d7;border-radius:11px;width:38px;height:38px;font-size:20px;flex-shrink:0}.composer textarea{resize:none;max-height:130px;min-height:40px;flex:1;border:1px solid #ededf5;background:#fafbfe;border-radius:12px;padding:11px 13px;outline:0;font-size:12px;line-height:1.5}.composer textarea:focus{border-color:#9fddd5}.send-button{width:40px;height:40px;border:0;border-radius:13px;background:linear-gradient(135deg,#40ddc7,#9f8bf4);color:#25284b;font-size:19px;box-shadow:0 5px 15px #77d8d13b}.chat-room-foot{text-align:center;padding:10px;border-top:1px solid #f6f6fa;font-size:9px;color:#a6a8b9}.chat-room-foot span{color:#48cdb9}.back-mobile{display:none}.blocked-notice{padding:18px;text-align:center;color:#a34c5b;background:#fff1f2;font-size:12px}.toast{position:fixed;right:24px;bottom:24px;background:#252849;color:#fff;border-radius:12px;padding:13px 18px;font-size:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:all .25s;z-index:50}.toast.show{opacity:1;transform:translateY(0)}.settings-card{max-width:800px}.profile-hero{display:flex;align-items:center;gap:18px;padding-bottom:24px;border-bottom:1px solid #eff0f6;margin-bottom:25px}.avatar.jumbo{width:76px;height:76px;border-radius:25px;font-size:22px}.profile-hero h2{font:800 20px Manrope,sans-serif;margin:0 0 5px}.profile-hero p{color:#8174d8;font-size:12px;margin:0 0 6px}.profile-hero small{font-size:10px;color:#9da0b2}.settings-form{display:grid;gap:18px;max-width:500px}.settings-form textarea{resize:vertical}.settings-form .btn{justify-self:start}.setting-row{display:flex;align-items:center;gap:16px;padding:19px 0;border-bottom:1px solid #f0f0f6}.setting-row:last-child{border-bottom:0}.setting-icon{width:42px;height:42px;display:grid;place-items:center;background:#f0efff;border-radius:13px;color:#8273dc;font-size:20px;flex-shrink:0}.setting-row>span:nth-child(2){display:flex;flex-direction:column;gap:6px;flex:1}.setting-row strong{font-size:12px}.setting-row small{font-size:10px;line-height:1.6;color:#9699ad}.setting-row>b{color:#9a9db1}.setting-row .btn{font-size:10px;padding:10px 13px;white-space:nowrap}.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}.admin-stats>div{background:#fff;border:1px solid #eff0f6;border-radius:16px;padding:23px}.admin-stats small{display:block;color:#9296ac;font-size:11px;margin-bottom:12px}.admin-stats strong{font:800 28px Manrope,sans-serif}.settings-card>h2{font:800 16px Manrope,sans-serif;margin:0 0 18px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px;text-align:left}th{color:#999db1;font-weight:700;background:#fafbfe}th,td{padding:13px 12px;border-bottom:1px solid #f0f0f6;white-space:nowrap}td{color:#555a78}.role-badge{background:#edfbf7;color:#169b86;border-radius:6px;padding:5px 7px;font-size:9px}.mobile-nav{display:none}.installer{padding:38px 32px;background:#fff;border-radius:22px;box-shadow:var(--shadow);width:min(100% - 32px,460px);margin:50px auto}.installer h1{font:800 30px Manrope,sans-serif;margin:0 0 8px}.installer form{display:grid;gap:15px;margin-top:22px}.installer .brand-mark{margin-bottom:20px}
@media(max-width:1100px){.topbar{gap:22px;padding:0 24px}.topbar .brand{min-width:160px}.app-shell{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding-left:12px;padding-right:12px}.chat-home{grid-template-columns:minmax(280px,.9fr) minmax(300px,1.1fr);gap:15px}.welcome-panel{padding:30px}.main-content{padding:30px 25px}.chat-layout{grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:820px){.auth-layout{grid-template-columns:1fr}.auth-visual{display:none}.auth-form-wrap{min-height:100vh;padding:35px 24px}.mobile-brand{display:flex;margin-bottom:45px}.app-shell{grid-template-columns:1fr;min-height:calc(100vh - 70px)}.topbar{height:70px;padding:0 18px;gap:15px}.topbar .brand{min-width:auto}.topbar .brand>span:last-child{display:none}.top-search{max-width:none}.top-actions{gap:10px}.profile-chip>span:not(.avatar),.profile-chip b{display:none}.sidebar{display:none}.main-content{padding:27px 18px 90px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:65px;background:#fff;border-top:1px solid #ededf5;z-index:30;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#8d91a8;font-size:18px}.mobile-nav small{font-size:9px}.chat-home{grid-template-columns:1fr}.welcome-panel{min-height:390px}.conversation-panel{min-height:unset}.chat-layout{grid-template-columns:1fr;min-height:calc(100vh - 155px)}.chat-list-column{display:none}.chat-room{min-height:calc(100vh - 170px)}.chat-room-header{height:66px;padding:0 14px}.back-mobile{display:block;color:#7e83a0;font-size:19px}.message-area{max-height:none;flex:1;padding:20px 14px;min-height:300px}.message-row{max-width:90%}.composer{padding:12px 10px;gap:7px}.chat-room-foot{padding:8px}.contacts-card,.settings-card{padding:17px}.page-heading{align-items:flex-start}.page-heading>.btn{padding:11px 12px;font-size:11px}.page-heading h1{font-size:27px}.admin-stats{gap:9px}.admin-stats>div{padding:15px}.admin-stats strong{font-size:23px}.setting-row{gap:10px}.setting-icon{width:36px;height:36px}.setting-row .btn{padding:9px}.top-search{height:38px}.top-search input{font-size:11px}}
@media(max-width:480px){.topbar{padding:0 12px;gap:10px}.brand-mark.small{width:32px;height:32px}.top-search{padding:0 9px;gap:5px}.top-search>span{font-size:20px}.top-search input{min-width:0}.top-actions{gap:6px}.icon-btn{width:32px;height:32px}.main-content{padding:22px 12px 85px}.page-heading{gap:10px}.page-heading h1{font-size:24px}.page-heading .muted{font-size:11px}.page-heading>.btn{gap:7px}.welcome-panel{padding:25px;min-height:370px}.welcome-content h2{font-size:29px}.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.contact-card{padding:17px 10px}.contact-status{font-size:8px}.contact-search{gap:7px}.contact-search .btn{font-size:10px;padding:9px}.admin-stats{grid-template-columns:1fr}.profile-hero{gap:12px}.setting-row>span:nth-child(2) small{max-width:210px}.setting-row .btn{font-size:9px}.auth-form h2{font-size:28px}}
/* ==========================================
   ROUTER CHAT ROOM - ENHANCED THEME & VISIBILITY
   ========================================== */

/* Background Theme & Overall Layout */
.chat-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
}

@media (min-width: 768px) {
    .chat-layout {
        height: 92vh;
        max-width: 1300px;
        border-radius: 16px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }
}

/* Chat Room Container */
.chat-room {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at top right, #182229 0%, #0b141a 100%);
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* Header */
.chat-room-header {
    padding: 12px 20px;
    background: rgba(32, 44, 51, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #f3f4f6;
    z-index: 10;
}

/* Message Scrollable Area */
.message-area {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Date Divider & Notice */
.date-divider {
    text-align: center;
    margin: 10px 0;
}
.date-divider span {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Message Bubbles - High Contrast & Visibility */
.messages .message, 
.message {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Incoming (Other User) */
.message.incoming {
    background: #202c33;
    color: #e9edef;
    align-self: flex-start;
    border-top-left-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Outgoing (Me) */
.message.outgoing {
    background: #005c4b;
    color: #f0f2f5;
    align-self: flex-end;
    border-top-right-radius: 2px;
}

/* ==========================================
   INLINE MESSAGE COMPOSER FORM (Always Visible)
   ========================================== */
.composer {
    display: flex;
    align-items: flex-end;
    padding: 12px 16px;
    background: #202c33;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 10px;
    flex-shrink: 0;
    width: 100%;
    position: relative;
    z-index: 20;
}

.composer textarea {
    flex: 1;
    background: #2a3942;
    color: #f3f4f6;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    resize: none;
    max-height: 120px;
    transition: border-color 0.2s;
}

.composer textarea:focus {
    border-color: #00a884;
}

.composer textarea::placeholder {
    color: #8696a0;
}

/* Composer Buttons */
.composer-icon, .send-button {
    background: transparent;
    border: none;
    color: #8696a0;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.1s;
}

.composer-icon:hover {
    color: #e9edef;
}

.send-button {
    background: #00a884;
    color: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.send-button:hover {
    background: #008f72;
    transform: scale(1.05);
}

/* Footer Note */
.chat-room-foot {
    background: #111b21;
    color: #667781;
    font-size: 11px;
    text-align: center;
    padding: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}