@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#263c33;background:#f5f6f2;font-size:16px;--green:#234c3e;--muted:#818b83;--line:#e5e8e0;--lime:#e9efca}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}button,a,input,textarea,select{outline-offset:4px}button{border:0;background:none;color:inherit}button:disabled{opacity:.45;cursor:not-allowed}button:hover{filter:brightness(.96)}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.shell{height:100dvh;display:grid;grid-template-columns:238px minmax(0,1fr)}.sidebar{padding:32px 19px 20px;background:#f0f2eb;border-right:1px solid #e1e5dc;display:flex;flex-direction:column;gap:25px}.brand{display:flex;align-items:center;gap:10px;padding:0 10px;font-family:Manrope,sans-serif;font-size:23px;font-weight:800;letter-spacing:-1px}.brandmark{display:grid;place-items:center;background:var(--green);color:var(--lime);width:37px;height:37px;border-radius:12px}.school{margin:0 9px;padding:15px 0;border-bottom:1px solid #dde2d7}.school strong{display:block;font-size:14px;font-weight:650}.school small{font-size:12px;color:var(--muted);display:block;margin-top:5px}.nav{display:grid;gap:5px}.nav button{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 14px;border-radius:9px;font-size:14px;font-weight:550;color:#727e72}.nav button.active{background:var(--green);color:#fff}.badge{margin-left:auto;border-radius:5px;background:#e8edcc;color:#405236;font-size:12px;padding:2px 6px;min-width:21px;text-align:center}.navlabel{color:#8e978b;font-size:11px;letter-spacing:1.5px;font-weight:600;padding:13px 15px 7px}.sidebar-bottom{margin-top:auto}.network{background:#e7ebde;border:1px solid #dce2cd;border-radius:10px;padding:14px;font-size:12px;line-height:1.6;margin-bottom:18px}.network strong{display:flex;gap:7px;align-items:center;font-size:13px;color:#40523a}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7c9c50}.profile{display:flex;gap:11px;align-items:center;padding:0 7px}.profile strong{display:block;font-size:13px}.profile small{font-size:12px;color:var(--muted)}.profile button{margin-left:auto}.avatar{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:12px;font-weight:650;background:#e4e8dc;color:#526049;position:relative}.avatar.green{background:#dce5c7;color:#536635}.avatar.pink{background:#f0dedd;color:#99706c}.avatar.purple{background:#e8e1ef;color:#85718e}.avatar.blue{background:#dde9ed;color:#638391}.avatar.yellow{background:#f4ebcf;color:#9a864c}.avatar .dot{position:absolute;bottom:-1px;right:0;border:2px solid white;width:10px;height:10px}.main{min-width:0;display:flex;flex-direction:column;overflow:hidden}.topbar{height:85px;flex-shrink:0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 32px;background:#fbfcf8}.breadcrumb{font-size:14px;color:#8b938a;display:flex;align-items:center;gap:12px}.breadcrumb b{font-weight:500;color:#3d4a40}.topright{display:flex;gap:21px;align-items:center}.demo{font-size:11px;letter-spacing:1px;padding:6px 9px;border:1px solid #e2e4d6;border-radius:5px;color:#878c76}.iconbtn{display:inline-grid;place-items:center;padding:8px;border-radius:7px}.pagehead{padding:28px 32px 25px;background:#fbfcf8;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,sans-serif}h1{font-size:27px;letter-spacing:-1px;font-weight:750}.subtitle{color:#889084;font-size:14px;margin-top:7px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:white;border-radius:8px;padding:11px 15px;font-weight:550;font-size:14px}.btn.secondary{background:white;border:1px solid var(--line);color:#526048}.btn.danger{background:#aa4e49}.messages{flex:1;min-height:0;display:grid;grid-template-columns:285px minmax(320px,1fr) 245px;background:#fff}.conversations{border-right:1px solid var(--line);padding:21px 13px;overflow:auto}.search{display:flex;align-items:center;gap:8px;background:#f4f5f0;border:1px solid #ebeee5;border-radius:8px;padding:9px 11px;color:#929a8e}.search input{border:0;outline:0;background:none;width:100%;min-width:0;font-size:13px;color:#3a4d3e}.search svg{width:17px;height:17px}.filters{display:flex;gap:6px;padding:15px 0 21px}.chip{padding:6px 11px;font-size:12px;border-radius:6px;color:#89917f}.chip.active{background:#edf1df;color:#586642;font-weight:600}.listlabel{font-size:10px;font-weight:600;letter-spacing:1.4px;color:#9aA08f;padding:0 9px 12px}.conversation{width:100%;display:flex;text-align:left;gap:10px;padding:15px 10px;border-radius:10px;margin-bottom:4px}.conversation.selected{background:#edf1e4}.conversation .info{min-width:0;flex:1}.conversation strong{font-size:13px;font-weight:600;display:block}.conversation p{font-size:12px;color:#8b9482;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:7px}.conversation .time{font-size:10px;color:#969d8e;white-space:nowrap;text-align:right}.conversation .badge{display:block;margin:9px 0 0 auto;background:#708858;color:white;width:17px;min-width:17px;font-size:10px;padding:2px}.chat{display:flex;flex-direction:column;min-width:0;min-height:0}.chathead{display:flex;align-items:center;gap:12px;padding:20px 25px;border-bottom:1px solid var(--line)}.chathead h2{font-size:15px}.chathead p{font-size:12px;color:#8d9884;margin-top:5px}.chathead .tools{margin-left:auto;display:flex;gap:8px;color:#85917f}.pin{margin:17px 24px 0;padding:12px 14px;background:#f6f7ef;border:1px solid #e9ecdd;border-radius:7px;display:flex;gap:10px;align-items:center;font-size:12px;color:#86916e}.pin strong{color:#687550;font-weight:600}.pin svg{width:16px}.history{padding:22px 25px;flex:1;overflow:auto;scroll-behavior:smooth}.date{text-align:center;font-size:11px;color:#9fa594;display:flex;align-items:center;gap:15px;margin:2px 0 25px}.date:before,.date:after{content:'';height:1px;background:#edf0e6;flex:1}.message{display:flex;gap:10px;margin:0 0 21px;align-items:flex-start;max-width:91%}.message .avatar{width:31px;height:31px;font-size:10px}.msgbody{min-width:0}.msgmeta{font-size:12px;margin:1px 0 7px;font-weight:600}.msgmeta span{font-size:10px;font-weight:400;color:#a0a696;margin-left:9px}.bubble{padding:12px 15px;border-radius:0 11px 11px 11px;background:#f3f5ef;font-size:13px;line-height:1.7;overflow-wrap:anywhere;color:#5c6755}.message.mine{margin-left:auto;flex-direction:row-reverse}.mine .msgmeta{text-align:right}.mine .bubble{background:#eaf0d8;border-radius:11px 0 11px 11px;color:#5d6d40}.msgactions{display:flex;gap:5px;margin-top:5px;align-items:center}.react{border:1px solid #e5e9d7;border-radius:7px;font-size:11px;padding:3px 7px;background:#fcfcf8}.msgmore{font-size:11px;color:#a1a797;opacity:.5}.message:hover .msgmore{opacity:1}.receipt{font-size:10px;color:#8b9877;text-align:right;margin-top:6px}.attachment{display:flex;gap:10px;background:#fff;border:1px solid #e4e8dc;border-radius:8px;padding:12px;text-align:left;align-items:center;margin-top:8px;width:100%;color:#6b7a51}.attachment strong{font-size:12px;display:block}.attachment small{font-size:10px;color:#99a18e;display:block;margin-top:4px}.composer-wrap{padding:0 23px 14px}.composer{border:1px solid #dfe5d4;border-radius:11px;background:#fcfdf9;padding:12px 13px}.composer textarea{border:0;outline:0;resize:none;background:transparent;width:100%;font-size:13px;color:#536148;min-height:38px}.composer-bottom{display:flex;align-items:center;gap:8px;color:#8e9981}.composer-bottom button{padding:5px}.composer-bottom .send{margin-left:auto;background:#284e3d;color:white;border-radius:7px;padding:7px 11px;display:flex;gap:8px;align-items:center;font-size:12px}.composer-note{text-align:center;font-size:10px;color:#a2aa96;margin-top:9px}.details{padding:24px 20px;border-left:1px solid var(--line);background:#fcfdf9;overflow:auto}.detail-title{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600}.groupidentity{text-align:center;padding:22px 0}.groupicon{width:57px;height:57px;border-radius:16px;background:#eaf0d8;color:#819154;display:grid;place-items:center;margin:0 auto 13px;font-size:25px}.groupidentity h3{font-size:15px}.groupidentity p{font-size:12px;color:#9aa18d;margin:5px 0 12px}.tag{font-size:10px;color:#7a8959;background:#edf1de;border-radius:5px;padding:5px 8px;display:inline-flex;align-items:center;gap:4px}.detailsection{border-top:1px solid var(--line);padding:20px 0}.detailsection h3{font-family:inherit;font-size:12px;font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between}.detailsection h3 span{color:#a5ac99;font-size:11px}.person{display:flex;gap:9px;align-items:center;margin-bottom:13px}.person .avatar{width:29px;height:29px;font-size:9px}.person strong{font-size:11px;font-weight:500;display:block}.person small{font-size:10px;color:#a0a792;display:block;margin-top:3px}.textbutton{font-size:12px;color:#7c8e56;text-align:left;padding:4px 0}.file{display:flex;gap:9px;align-items:center;margin:13px 0;font-size:11px}.file svg{color:#8c9c69;width:18px}.file small{display:block;font-size:10px;color:#a5ac99;margin-top:4px}.privacy{background:#f1f4e8;border-radius:9px;padding:14px;font-size:11px;line-height:1.7;color:#8b9679;margin-top:6px}.privacy strong{display:block;color:#677650;font-size:11px;margin-bottom:4px}.content{padding:28px 32px;overflow:auto;flex:1;background:#f7f8f3}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:23px}.card h2{font-size:19px;margin:13px 0 9px}.card p{font-size:14px;color:#88927e;line-height:1.6}.card .btn{margin-top:22px}.cardtop{display:flex;align-items:center;justify-content:space-between}.cardtop .groupicon{margin:0;width:47px;height:47px}.progress{height:5px;border-radius:4px;background:#edf0e5;margin:19px 0 8px}.progress i{display:block;height:100%;background:#8da46d;border-radius:4px}.sectiontitle{font-size:17px;margin:26px 0 17px}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}.toolbar .search{min-width:240px;background:#fff}.row{padding:19px 20px;background:white;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:15px;margin-bottom:10px}.row .grow{flex:1}.row h3{font-size:14px;margin-bottom:6px}.row p{font-size:12px;color:#8f9985}.row small{font-size:12px;color:#89967b}.row.done h3{text-decoration:line-through;color:#939b89}.check{width:21px;height:21px;accent-color:var(--green)}.announcement{margin-bottom:18px;max-width:900px}.announcement h2{font-size:22px}.announcement p{margin:14px 0}.announcement footer{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:17px;margin-top:21px;font-size:12px;color:#939b88}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:27px}.stat{padding:21px;background:white;border:1px solid var(--line);border-radius:11px}.stat small{font-size:12px;color:#89967a}.stat strong{display:block;font-size:29px;font-family:Manrope;margin:10px 0}.adminnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.adminnav .chip{font-size:14px}.notice{background:#edf1df;border:1px solid #dee6ca;padding:15px 18px;border-radius:9px;font-size:13px;line-height:1.6;color:#76835f;margin-bottom:22px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;background:white;border:1px solid var(--line);font-size:13px}th,td{text-align:left;padding:16px;border-bottom:1px solid var(--line)}th{font-size:11px;color:#96a088;background:#fafbf6;text-transform:uppercase;letter-spacing:.8px}.field{display:grid;gap:7px;margin:17px 0;font-size:13px;color:#647157}.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid #dce2d3;border-radius:7px;background:#fff;color:#37482f}.field textarea{min-height:95px;resize:vertical}dialog{border:1px solid #e2e6d9;border-radius:16px;padding:28px;width:min(470px,calc(100% - 32px));box-shadow:0 30px 100px #16351d30;color:#32472f}dialog::backdrop{background:#23332266;backdrop-filter:blur(3px)}dialog h2{font-size:22px;margin-bottom:8px}dialog>p{font-size:13px;line-height:1.7;color:#8a947f}.modalhead{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);border-radius:10px;padding:14px 22px;background:#234c3e;color:white;font-size:14px;box-shadow:0 6px 30px #20351e22;opacity:0;pointer-events:none;z-index:20;transition:opacity .2s;max-width:90%}#toast.show{opacity:1}.mobilemenu{display:none}.empty{padding:55px 20px;text-align:center;color:#8c987d}.settings{max-width:700px}.setting{display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}.setting div{flex:1}.setting strong{font-size:14px;display:block}.setting p{font-size:12px;margin-top:5px;color:#8c9880}.switch{width:38px;height:22px;accent-color:var(--green)}.login{max-width:430px;margin:50px auto}.typing{font-size:11px;color:#8a967c;padding:0 26px 10px;min-height:23px}.filedraft{font-size:12px;color:#657851;padding-bottom:7px}.status-pill{font-size:11px;padding:4px 7px;background:#edf2df;color:#829260;border-radius:5px}.status-pill.off{background:#f0f0ed;color:#92978b}@media(min-width:1550px){.messages{grid-template-columns:315px minmax(350px,1fr) 285px}.sidebar{padding-top:36px}.shell{grid-template-columns:255px minmax(0,1fr)}.history{padding:25px 36px}.bubble{font-size:14px}.conversation strong{font-size:14px}.conversation p{font-size:13px}}@media(max-width:1250px){.details{display:none}.messages{grid-template-columns:265px minmax(0,1fr)}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.shell{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding:24px 10px}.brand{font-size:20px}.messages{grid-template-columns:230px minmax(0,1fr)}.pagehead,.topbar{padding-left:22px;padding-right:22px}.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}@media(max-width:700px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-245px;width:238px;height:100dvh;z-index:10;box-shadow:4px 0 20px #25352420;transition:left .2s}.sidebar.open{left:0}.mobilemenu{display:inline-grid}.topbar{height:61px;padding:0 15px}.breadcrumb{gap:7px}.topright{gap:8px}.pagehead{padding:20px 17px}h1{font-size:23px}.subtitle{font-size:12px}.pagehead .btn{padding:10px;font-size:12px}.messages{display:flex}.conversations{width:100%}.chat{width:100%;display:none}.messages.showchat .conversations{display:none}.messages.showchat .chat{display:flex}.chathead{padding:15px}.pin{margin:13px 15px 0}.history{padding:18px 15px}.composer-wrap{padding:0 14px 10px}.content{padding:20px 16px}.demo{font-size:9px}.grid{gap:13px}.row{padding:15px 12px;gap:10px;flex-wrap:wrap}.row .grow{min-width:150px}.card{padding:20px}.stats{gap:10px}.stat{padding:16px}.message{max-width:96%}.bubble{font-size:14px}.composer textarea{font-size:16px}.conversation strong{font-size:15px}.conversation p{font-size:13px}.conversation{padding:17px 10px}.settings .btn{font-size:12px}}
/* Readable controls and message content across devices. */
.bubble{font-size:16px;line-height:1.65}.conversation strong,.chathead h2,.detail-title{font-size:14px}.conversation p,.msgmeta,.person strong,.file,.detailsection h3,.textbutton,.composer textarea,.search input{font-size:14px}.composer-bottom .send,.chip,.profile strong,.groupidentity p{font-size:14px}.composer-note,.msgmeta span,.receipt,.date,.conversation .time,.listlabel,.tag,.demo,.navlabel,.person small,.file small,.privacy,.attachment small{font-size:12px}.attachment strong,.groupidentity h3{font-size:14px}.network{font-size:12px}.school strong{display:flex;align-items:center;gap:6px}.school strong svg{width:13px}.details{padding-left:18px;padding-right:18px}.privacy svg{width:15px;height:15px;vertical-align:middle}.person{margin-bottom:16px}.btn,.chip,.iconbtn,.textbutton{min-height:36px}.composer-bottom button{min-width:36px;min-height:36px}.msgmore{font-size:12px;opacity:1}.react{font-size:12px;min-height:29px}.conversation p{font-size:13px}.sidebar .nav button{min-height:44px}.file{text-align:left;font-size:12px}.chathead p{font-size:12px}.row p,.card p,.announcement p{font-size:14px}.listlabel{letter-spacing:1px}.details .avatar{width:32px;height:32px}.topright{flex-shrink:0}@media(max-width:700px){.demo{font-size:10px;max-width:92px}.topright>.avatar{display:none}.topright{gap:2px}.topbar{padding:0 9px}.breadcrumb{font-size:12px}.topbar .iconbtn{padding:5px}.pagehead{gap:12px}.pagehead .btn{min-width:107px}.composer-note{font-size:12px}.conversation{min-height:83px}.bubble{font-size:16px}.messages.showchat .chathead .tools{gap:0}.chathead{gap:8px}.chathead h2{font-size:14px}.chathead .avatar{width:31px;height:31px}.chathead .iconbtn{padding:4px}}
.signin{min-height:100dvh;display:flex;align-items:center;flex-direction:column;padding:45px 20px;background:radial-gradient(ellipse at top right,#e5edd6,transparent 65%),#f5f6f2}.signin>.brand{margin-bottom:42px}.signin-card{width:100%;max-width:480px;background:white;border:1px solid #dde5d7;border-radius:18px;padding:37px;box-shadow:0 15px 45px #1c40200a}.signin-card h1{font-size:38px;line-height:1.2;margin:20px 0}.signin-intro{font-size:16px;line-height:1.65;color:#788471;margin-bottom:24px}.signin .field input{font-size:16px}.signin-foot{display:flex;gap:12px;border-top:1px solid var(--line);padding-top:22px;margin-top:26px;color:#839178;font-size:13px;line-height:1.7}.signin-foot svg{flex-shrink:0}.signin-policy{font-size:13px;line-height:1.7;max-width:440px;text-align:center;margin-top:25px;color:#84917b}.reviewmessages{max-height:60vh;overflow:auto;padding:15px 0}.notice{font-size:14px}.network svg{width:16px}.profile{overflow-wrap:anywhere}.main .empty h2{font-size:26px}.main .empty p{line-height:1.8}.nav{gap:4px}.message .bubble{white-space:normal}.signin-card .tag{font-size:12px}@media(max-width:700px){.signin{padding:28px 16px}.signin-card{padding:27px 23px}.signin-card h1{font-size:33px}.signin>.brand{margin-bottom:28px}.messages:not(.showchat)>div.empty{display:none}}