:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0e1621;color:#f5f5f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;color:inherit;background:none}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #65b8ed;outline-offset:2px}button:disabled{opacity:.5;cursor:default}#app{height:100dvh;display:flex;max-width:1800px;margin:auto}svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.sidebar{width:360px;flex-shrink:0;background:#17212b;border-right:1px solid #0a121b;display:flex;flex-direction:column}.brandrow{display:flex;align-items:center;gap:12px;padding:17px 20px 11px}.brand{width:78px;height:36px;object-fit:contain}.brandtext{font-size:11px;letter-spacing:2.8px;color:#97a5b3;margin-left:auto}.searchbox{margin:6px 15px 14px;display:flex;align-items:center;gap:11px;background:#242f3d;border-radius:24px;padding:10px 15px;color:#7f91a4}.searchbox input{width:100%;border:0;background:transparent;outline:0;color:#fff;font-size:14px}.tabs{display:flex;gap:22px;padding:0 22px;border-bottom:1px solid #111b26}.tab{font-weight:600;font-size:14px;padding:13px 0;position:relative;color:#899aab;white-space:nowrap}.tab.active{color:#6bb6e9}.tab.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:#6bb6e9;border-radius:3px 3px 0 0}.chatlist{overflow-y:auto;flex:1;padding:8px 0}.chatitem{display:flex;width:100%;padding:13px 15px;gap:12px;text-align:left;align-items:center}.chatitem:hover{background:#202c3a}.chatitem.active{background:#2b5278}.avatar{width:51px;height:51px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;font-size:21px;font-weight:500;background:linear-gradient(150deg,#72bdeb,#4384bd)}.avatar.orange{background:linear-gradient(150deg,#f3ad68,#cc7752)}.avatar.purple{background:linear-gradient(150deg,#aa98e2,#7963bd)}.avatar.green{background:linear-gradient(150deg,#80c9a8,#449179)}.avatar.blue{background:linear-gradient(150deg,#70b5d3,#367995)}.chatinfo{flex:1;min-width:0}.chatline{display:flex;align-items:center;gap:9px}.chatline strong{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatline time{margin-left:auto;color:#8699ad;font-size:11px;white-space:nowrap}.active .chatline time{color:#bbd3e8}.preview{color:#93a5b6;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:7px;flex:1}.active .preview{color:#d1dfeb}.badge{background:#63ade2;color:#102235;min-width:20px;height:20px;padding:2px 6px;font-size:11px;font-weight:600;border-radius:20px;margin-top:7px}.sidebarfoot{border-top:1px solid #0f1923;padding:9px 12px 12px}.navrow{display:flex;gap:4px}.navrow button{flex:1;padding:10px 4px;font-size:11px;border-radius:8px;color:#879caf}.navrow button svg{display:block;margin:0 auto 5px}.navrow button.active{color:#73b9e8;background:#223345}.demolabel{text-align:center;color:#91a3b4;font-size:10px;padding:11px 2px 0;line-height:1.4}.main{min-width:0;flex:1;display:flex;flex-direction:column;background:#0e1621}.chathead{height:74px;min-height:74px;background:#17212b;display:flex;align-items:center;padding:0 27px;gap:12px}.headtext{flex:1}.headtext h1{font-size:16px;font-weight:600;margin:0 0 5px}.headtext p{font-size:12px;color:#8197aa;margin:0}.iconbutton{padding:8px;color:#829aaf;border-radius:50%}.iconbutton:hover{background:#253446}.back{display:none}.pin{padding:10px 27px;background:#17212b;border-top:1px solid #1f2d3a;display:flex;gap:13px;align-items:center}.pin svg{color:#68b5e8;width:19px;flex-shrink:0}.pin div{border-left:2px solid #5dabde;padding-left:11px;font-size:12px;color:#ced9e2;line-height:1.5}.pin strong{display:block;color:#68b5e8;font-size:12px}.messages{flex:1;overflow-y:auto;padding:26px max(30px,calc((100% - 750px)/2));background-image:radial-gradient(#293c4b40 1px,transparent 1px);background-size:25px 25px;display:flex;flex-direction:column;gap:12px}.datepill{align-self:center;background:#1c2b37;color:#99adbe;font-size:11px;padding:5px 12px;border-radius:20px;margin:0 0 14px}.message{align-self:flex-start;max-width:85%;background:#182533;border-radius:11px 11px 11px 3px;padding:10px 12px 7px;position:relative;min-width:165px;line-height:1.5}.message.own{align-self:flex-end;background:#2b5278;border-radius:11px 11px 3px 11px}.sender{color:#70b8e6;font-size:12px;font-weight:600;margin-bottom:3px}.message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.msgmeta{display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#8da5b9;font-size:10px;margin-top:4px}.own .msgmeta{color:#b0cbe0}.msgmeta button{font-size:11px;color:inherit;padding:2px 4px;border-radius:4px}.msgmeta button:hover{background:#ffffff15}.checks{color:#82c3ec}.quoteblock{border-left:2px solid #74b7e1;background:#ffffff08;border-radius:3px;padding:5px 8px;margin-bottom:6px;font-size:12px;color:#bfd6e8}.reaction{display:inline-block;color:#80c4f4;background:#2b527850;border-radius:15px;padding:2px 8px;margin-top:6px;font-size:12px}.composerwrap{padding:12px max(25px,calc((100% - 770px)/2)) 22px}.composer{display:flex;align-items:flex-end;gap:8px}.inputbar{display:flex;background:#17212b;border-radius:12px;flex:1;align-items:flex-end;padding:7px 9px;gap:6px}.inputbar textarea{resize:none;max-height:120px;min-height:40px;height:40px;border:0;background:none;color:white;outline:none;flex:1;padding:11px 5px;font-size:14px;width:100%}.send{display:grid;place-items:center;width:53px;height:53px;flex-shrink:0;border-radius:50%;background:#5dabe0;color:#fff}.replybar{padding:8px 14px;margin-bottom:7px;background:#192a39;border-left:3px solid #65b4e8;border-radius:5px;display:flex;font-size:12px;align-items:center;gap:10px;color:#aec7da}.replybar span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contentview{overflow:auto;padding:32px 40px;flex:1}.eyebrow{color:#6bb6e9;font-size:11px;letter-spacing:1.7px;text-transform:uppercase}.contentview h2{font-size:26px;margin:10px 0}.intro{color:#95a9bc;font-size:14px;line-height:1.6;max-width:650px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:25px}.card{background:#17212b;border:1px solid #273646;padding:23px;border-radius:13px}.card h3{font-size:16px;margin:12px 0 7px}.card p{color:#92a8bb;font-size:13px;line-height:1.6}.status{display:inline-block;color:#e1b472;background:#6c4e242e;padding:5px 9px;border-radius:6px;font-size:11px}.status.done{background:#3b82622e;color:#7dccaa}.primary{background:#59a9df;padding:11px 17px;color:#fff;border-radius:8px;font-size:13px;font-weight:600}.secondary{background:#253647;color:#a9cbe3;padding:11px 17px;border-radius:8px;font-size:13px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}label{display:block;font-size:12px;color:#9bb0c1;line-height:1.6}label input,label select,label textarea{display:block;width:100%;border:1px solid #34475a;background:#101c28;color:#fff;border-radius:8px;padding:11px;margin-top:6px;min-height:43px}label textarea{min-height:80px;resize:vertical}.wide{grid-column:1/-1}.helper{font-size:12px!important;color:#8da7bc!important}.sectionrow{display:flex;align-items:center;gap:12px;margin:25px 0 15px}.sectionrow h3{margin:0;flex:1;font-size:16px}.table{width:100%;border-collapse:collapse;font-size:13px}.table td,.table th{text-align:left;padding:14px 8px;border-bottom:1px solid #283847}.table th{font-size:11px;color:#8ba2b8;font-weight:500}.empty{color:#91a9bd;text-align:center;padding:35px 15px;font-size:13px}.notice{padding:13px 16px;background:#233548;color:#a8c9e1;font-size:12px;border-radius:8px;line-height:1.6;margin-top:20px}#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#314b60;color:white;box-shadow:0 8px 30px #0006;border-radius:10px;padding:13px 20px;font-size:13px;max-width:90vw;z-index:20;display:none}.admin-tabs{display:flex;gap:8px;margin:22px 0}.admin-tabs button{padding:10px 15px;border-radius:8px;color:#94adc2}.admin-tabs .active{background:#2b5278;color:#fff}.filechoice{border:1px dashed #46637c;border-radius:10px;padding:18px}.filechoice input{border:0;padding:3px;background:none}.projectline{display:flex;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid #293a4a}.projectline .avatar{width:40px;height:40px;font-size:16px}.projectline strong{font-size:14px}.projectline small{color:#8da5b8;display:block;margin-top:4px}.docicon{color:#77b6e1;background:#24415b;width:43px;height:43px;display:grid;place-items:center;border-radius:10px}@media(min-width:1450px){.sidebar{width:390px}}@media(max-width:1000px){.sidebar{width:310px}.messages{padding:22px}.composerwrap{padding:12px 20px 20px}.contentview{padding:28px 24px}.cards{grid-template-columns:1fr}}@media(max-width:700px){.sidebar{width:100%;border:0}.main{display:none}.mobile-open .sidebar{display:none}.mobile-open .main{display:flex;width:100%}.back{display:block}.chathead{padding:0 12px;height:67px;min-height:67px}.headtext h1{font-size:15px}.pin{padding:9px 16px}.messages{padding:20px 12px;gap:10px}.message{max-width:90%}.composerwrap{padding:9px 10px max(12px,env(safe-area-inset-bottom))}.send{width:47px;height:47px}.inputbar{padding:3px 5px}.contentview{padding:24px 18px}.formgrid{grid-template-columns:1fr}.wide{grid-column:auto}.chatitem{padding:14px 16px}.brandrow{padding-top:18px}.table td,.table th{padding:12px 4px;font-size:12px}.contentview h2{font-size:23px}}
/* Readable Telegram-style density. */
.tabs{overflow-x:auto;flex-shrink:0}.message p{font-size:15px}.preview,.card p,.intro,.primary,.secondary,.table,.admin-tabs button{font-size:14px}.headtext p,.pin div,.pin strong,.sender,.replybar,label,.helper,.notice{font-size:13px}.chatline time,.msgmeta,.datepill,.navrow button,.status,.demolabel{font-size:12px}.mobile-demo{display:none}@media(max-width:700px){.mobile-demo{display:block;flex-shrink:0;padding:5px 12px;background:#1c2d3c;color:#99b2c7;text-align:center;font-size:11px}.headtext p{font-size:12px}.chathead{min-height:65px;height:65px}}
/* Client: Telegram folders and a secondary drawer, no admin navigation. */
.client-top{display:flex;align-items:center;gap:12px;padding:12px 14px 4px;padding-top:max(12px,env(safe-area-inset-top))}.client-top strong{font-size:18px;margin-left:auto}.sidebar>.demolabel{padding:8px 8px max(10px,env(safe-area-inset-bottom));flex-shrink:0}.menu-layer{position:fixed;inset:0;z-index:30}.menu-shade{position:absolute;inset:0;background:#0008;width:100%;height:100%}.drawer{position:absolute;inset:0 auto 0 0;width:min(320px,88vw);background:#17212b;box-shadow:8px 0 30px #0004;padding:20px;display:flex;flex-direction:column}.drawer-brand{display:flex;justify-content:space-between;align-items:center}.drawer-brand img{width:120px}.drawer h2{font-size:20px;margin:28px 0}.drawer>button{display:flex;align-items:center;gap:20px;text-align:left;padding:18px 12px;font-size:16px;border-radius:8px}.drawer>button:hover{background:#253647}.drawer p{font-size:14px;line-height:1.6;color:#94a8ba}.drawer small{margin-top:auto;color:#94a8ba}.admin-shell{max-width:none!important}.admin-sidebar{width:260px;flex-shrink:0;padding:24px;background:#17212b;display:flex;flex-direction:column;border-right:1px solid #263444}.admin-sidebar>img{width:140px}.admin-sidebar h1{font-size:19px;margin:24px 0}.admin-sidebar nav{display:grid;gap:8px}.admin-sidebar nav button{text-align:left;padding:14px;border-radius:8px;font-size:15px}.admin-sidebar nav button.active{background:#2b5278}.admin-sidebar a{color:#6bb6e9;margin-top:30px;font-size:14px}.admin-sidebar p{margin-top:auto;color:#94a8ba;font-size:12px;line-height:1.6}.admin-main{flex:1;min-width:0;overflow:auto}.admin-main .contentview{max-width:1100px;margin:auto}.admin-main .table{overflow-wrap:anywhere}@media(max-width:700px){.admin-shell{display:block!important;overflow:auto}.admin-sidebar{width:100%;padding:16px}.admin-sidebar>img{width:95px}.admin-sidebar h1{margin:12px 0}.admin-sidebar nav{display:flex}.admin-sidebar a{margin-top:15px}.admin-sidebar p{margin-bottom:0}.admin-main{overflow:visible}.drawer{padding-top:max(20px,env(safe-area-inset-top))}}

/* Personal readable chat typography; layout can wrap at the largest size. */
:root{--chat-font-size:16px}.message p,.inputbar textarea{font-size:var(--chat-font-size);line-height:1.5}.quoteblock,.replybar{font-size:calc(var(--chat-font-size) * .9);overflow-wrap:anywhere}.sender{font-size:max(13px,calc(var(--chat-font-size) * .85))}.message{flex-shrink:0;min-width:0}.inputbar{min-width:0}.inputbar textarea{height:calc(var(--chat-font-size) * 1.5 + 22px);min-width:0}.font-settings{max-width:850px;width:100%;margin-inline:auto}.font-settings label{font-size:16px}.font-slider{width:100%;margin:24px 0 6px;accent-color:#6bb6e9;min-height:30px}.font-scale{display:flex;justify-content:space-between;color:#92a8bb;font-size:14px}.font-preview{display:flex;flex-direction:column;gap:16px;padding:24px 0}.font-preview .message{max-width:92%}.font-preview .message.own{align-self:flex-end}.text-icon{font-size:23px;width:23px}.headtext{min-width:0}.headtext h1,.headtext p{overflow-wrap:anywhere}