/* YOL CHAT: golden yellow from supplied HTML, teal/mint from supplied logo. */
body{background:#004d4b;color:#183c39;font-family:Arial,Tahoma,sans-serif}
.app{background:linear-gradient(135deg,#005d59,#008d87 55%,#004e4c);min-height:100dvh}
.topbar{height:124px;background:linear-gradient(100deg,#fff,#e0f6ef);border-top:5px solid #ffcc00;border-bottom:4px solid #00aca6;padding:10px 22px;box-shadow:0 2px 8px #003d3a60;gap:18px}
.yol-logo{width:104px;height:94px;object-fit:contain;flex:0 0 104px}
.brand{color:#00645f;font-size:36px;letter-spacing:-1px;text-shadow:none}.brand small{color:#386b61;font-size:12px;letter-spacing:1.5px;margin-top:5px}
.status{background:#ffdc45;border:1px solid #b59b2f;border-radius:6px;color:#244a3d;padding:10px 14px;font-size:13px}.status span{color:#355348}
.toolbar{background:linear-gradient(#c7eee3,#8fd8c7);border-top:1px solid white;border-bottom:1px solid #368f7e;padding:8px 14px;gap:7px}
.toolbar .tool{height:59px;min-width:92px;border:1px solid #6bb4a3;background:linear-gradient(#fff,#e7f6f0);border-radius:5px;box-shadow:0 1px 2px #20594e35;color:#00675e;font-size:12px}.toolbar .tool .retro-icon{color:#00847b;text-shadow:none}.toolbar .tool:hover{background:#fff3b7;border-color:#a39640}.toolbar .tool.active{background:#ffdc45;border-color:#ae952d}
.workspace{max-width:1410px;grid-template-columns:205px minmax(0,1fr) 225px;margin:20px auto;gap:14px}
.panel,.section,.hero,.chatwindow,.users{border:1px solid #6ea99c;background:#f1faf6;border-radius:7px;box-shadow:0 3px 7px #003d3a45;overflow:hidden}
.panelhead,.chathead,.dialogheader{background:linear-gradient(90deg,#006e67,#00a69d);color:white;text-shadow:none;border-bottom:3px solid #ffcc00;padding:9px 11px}
.sectionhead{background:linear-gradient(#fff2a1,#ffdc45);color:#325047;border-bottom:1px solid #b9a649;font-size:15px;padding:10px 12px}
.hero{background:linear-gradient(120deg,#fff 30%,#d6f3e7);border-top:4px solid #ffcc00;padding:22px}.hero h1{color:#00675f;font-size:29px;letter-spacing:-.5px}.hero p{color:#345e55}.hero .rule{background:#52c4aa;height:2px;margin:16px 0}
.bigbtn{background:linear-gradient(#ffe16a,#ffcc00);color:#224e42;border:1px solid #b3a033;border-radius:5px;text-shadow:none;padding:10px 16px;box-shadow:inset 0 1px #fff7b9}.bigbtn:hover{background:#ffe77e}
.smallbtn{background:linear-gradient(#fff,#dbf0e6);color:#00665d;border:1px solid #78ab9b;border-radius:4px;box-shadow:inset 0 1px white}.smallbtn:hover{background:#fff3b7}
.category strong{background:#c4eadb;color:#205c4d;border:1px solid #99c8b6;padding:7px;border-radius:4px}.categorylinks button,.roomlink button{color:#006b62}.categorylinks button{border-bottom:1px solid #c4dfd3;padding:8px 5px}.categorylinks button:hover{background:#fff2b0}
.featuregrid{gap:10px;padding:12px;grid-template-columns:repeat(3,minmax(0,1fr))}.roomcard{background:linear-gradient(#fff,#f0faf5);border:1px solid #a1cdbb;border-radius:5px;box-shadow:none;padding:14px;min-height:135px}.roomcard:hover{background:#fff7cf;border-color:#b9a647}.roomcard h3{color:#007369;font-size:17px}.roomcard p{color:#436659}.roommeta{border-color:#c4dfd3}.roommeta span:last-child{color:#007267}.online{color:#00744b}.count{color:#52786a}
.dirrow b,.nickbtn,.memberbtn,.msg .nick{color:#007269}.dirrow{border-color:#c4dfd3}.dirrow:nth-child(even){background:#edf8f1}.dirrow:hover,.memberbtn:hover{background:#fff1b2}.right .card{border:1px solid #b3d5c7;border-radius:4px}.right .card b{color:#006a60}
.menubar,.composer{background:linear-gradient(#edf9f2,#cce8d9)}.chatbody,.imlog{border:1px solid #9bbfae;border-radius:3px;font-family:Arial,sans-serif;font-size:15px}.composer input{border:1px solid #8ab8a4;border-radius:3px;min-width:0}.composer .smallbtn{background:linear-gradient(#ffe887,#ffce1c);color:#315040}.livebar{color:#2b5d50;background:#d9eee2;border-color:#a9cdbb}.dot{background:#008e66}.dot.away{background:#d69c00}
.dialog{background:#e5f4eb;border:1px solid #639b87;border-radius:7px;box-shadow:0 12px 35px #003d3a70;overflow:hidden}.dialog::backdrop{background:#002e2b70}.dialogcontent input,.dialogcontent textarea,.dialogcontent select{border:1px solid #8eb4a2;border-radius:3px}.dialogcontent h2{color:#006c60!important}.windowclose{background:#e4f3ec;color:#00655b;border:1px solid #98c2ad;border-radius:3px}.im-banner{border:1px solid #a3cbb6;background:#fff;border-radius:5px}.im-banner strong{color:#007469}.im-presence{background:#e0f4e8;border-color:#9bc7b2;color:#2c6350}.im-presence.offline{background:#fff1b5;border-color:#b6a343;color:#605111}.screen-status,.sound-status{color:#3f6a5b}.sound-options{background:#f7fcf8;border:1px solid #a5c7b4}.sound-options legend{color:#006a5c}.buddygroup{background:linear-gradient(#ecf9f1,#bde2d0);border-color:#9bc4ad;color:#17614b}.buddyrow{border-color:#c6ddcf}.buddyrow .buddy-state{color:#467360}.toast{background:#fff2b8;border:1px solid #b1a04a;border-radius:5px;box-shadow:0 4px 15px #003d3a60}.toast strong{color:#006c62}.footer{color:#e5faf2}.auth-tabs{border-color:#a6cab7}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #c49500;outline-offset:2px}
@media(max-width:1100px){.workspace{grid-template-columns:185px minmax(0,1fr)}.right{display:none}.featuregrid{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-account{background:#c4eadb}}
@media(max-width:760px){.topbar{height:99px;padding:8px 10px;gap:10px}.yol-logo{width:67px;height:67px;flex-basis:67px}.brand{font-size:27px}.brand small{font-size:9px;letter-spacing:.5px}.status{padding:6px;font-size:10px;max-width:110px}.workspace{display:block;padding:0 8px;margin:10px auto}.left,.toolbar{display:none}.mobilebar{background:linear-gradient(#d9f2e7,#b0dfcc);border-color:#6aa88f}.mobilebar .tool{background:#f3fcf6;color:#006b5e;border:1px solid #87b59f;border-radius:4px;min-height:44px;font-size:12px}.mobilebar .retro-icon{color:#00796c}.hero{padding:17px}.hero h1{font-size:24px}.featuregrid{gap:7px;padding:8px}.roomcard{padding:10px;min-height:126px}.chatbody{height:48dvh;min-height:240px}.dialog{max-height:90dvh}.imlog{height:34dvh;min-height:180px}.footer{font-size:11px}}
@media(max-width:380px){.brand{font-size:23px}.yol-logo{width:58px;height:60px;flex-basis:58px}.status{max-width:90px}.featuregrid{grid-template-columns:1fr}}

.yol-auth-brand{text-align:center;margin:0 0 20px}.yol-auth-brand img{display:block;width:145px;height:125px;object-fit:contain;margin:0 auto 12px}.yol-auth-brand h2{margin:0;color:#006c60;font-size:25px}
.toolbar .tool{height:75px;min-width:98px;border-radius:7px;border:1px solid #79ac9e;background:linear-gradient(#fff 0,#f3faf7 47%,#cde6dc 50%,#e9f5ef);box-shadow:inset 0 1px white,0 2px 3px #20594e30;gap:5px}.toolbar .tool.active{background:linear-gradient(#fff1a0,#ffdc45);border-color:#b4a142}.retro-icon svg{display:block;width:34px;height:34px;filter:drop-shadow(0 1px 1px #32655b45)}
@media(max-width:760px){.mobilebar .tool{height:48px;min-height:48px}.mobilebar .retro-icon svg{width:24px;height:24px}.yol-auth-brand img{width:120px;height:103px}.yol-auth-brand{margin-bottom:14px}.yol-auth-brand h2{font-size:23px}}

.member-avatar{width:38px;height:38px;border:1px solid #93bda7;border-radius:6px;object-fit:cover;background:#edf8f1;flex:0 0 auto}.member-avatar.large{width:80px;height:80px}.identity-picture,.profile-picture-heading{display:flex;align-items:center;gap:12px;overflow-wrap:anywhere}.profile-picture-heading{margin-bottom:18px}.profile-picture-heading h2{margin:0}.identity-picture{flex-wrap:wrap}.sidebar-buddygroup{font-size:12px;font-weight:bold;color:#17614b;background:#d3ecde;padding:6px;margin:4px 0}.sidebar-buddy{display:flex;align-items:center;gap:7px;padding:8px 0;border-bottom:1px solid #d6e8dd}.sidebar-buddy>div{min-width:0;flex:1;overflow-wrap:anywhere}.sidebar-buddy small{display:block;margin-top:4px;color:#426c5b}.sidebar-buddy .nickbtn{font-size:13px;text-align:left}.sidebar-buddy .smallbtn{padding:4px 6px;min-width:33px;font-size:12px}.buddy-avatar-button{border:0;padding:0;background:none;display:flex}.offline-dot{background:#aaa}.desktop-buddies #sidebarBuddies{max-height:360px;overflow:auto}.avatar-picker{border:1px solid #a5c7b4;padding:12px;margin-bottom:18px}.avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.dialogcontent .avatar-grid label{display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid #a8cbb8;background:#fff;padding:8px 2px;border-radius:5px;cursor:pointer;font-size:12px}.avatar-grid img{width:52px;height:52px}.avatar-grid label:has(input:checked){outline:3px solid #e9b700;background:#fff6ce}.dialogcontent .avatar-grid input[type=radio],.dialogcontent .photo-choice input[type=radio]{width:auto;display:inline;margin:0}.dialogcontent .photo-choice{margin-top:12px}.avatar-picker small{display:block;line-height:1.5;color:#426b59}.avatar-picker p{font-size:12px}.dialogcontent input[type=file]{font-size:12px;max-width:100%}

/* Keep the offline delivery notice above the modal's dimmed backdrop. */
#toast.offline-im-notice{inset:auto 15px 15px auto;margin:0;background:#fff2b8;color:#173d32;border:2px solid #c4a83e;opacity:1;max-width:calc(100vw - 30px);box-sizing:border-box;box-shadow:0 4px 15px #003d3a60}
#toast.offline-im-notice strong{color:#006c62}
#toast.offline-im-notice::backdrop{background:transparent;pointer-events:none}

.format-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px;background:#e5f4eb;color:#173d32;border-top:1px solid #9bc7b2}.format-bar label{display:flex;align-items:center;gap:4px;margin:0;font-size:13px}.format-bar select{max-width:130px;padding:4px}.format-bar input[type=checkbox]{width:auto;margin:0}.message-text{overflow-wrap:anywhere}

.dating-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dating-section .sectionhead{background:linear-gradient(#fff5cf,#ffdf76);color:#006c60}.dating-empty{padding:12px}@media(max-width:640px){.dating-grid{grid-template-columns:1fr}}

.desktop-emoji-button{flex:0 0 42px;min-width:42px!important;font-size:21px;padding:3px!important}.desktop-emoji-picker{padding:10px;margin:6px 10px;background:#fff8d9;border:1px solid #b7a34b;border-radius:5px;color:#173d32}.desktop-emoji-picker[hidden]{display:none}.emoji-heading{display:flex;justify-content:space-between;align-items:center}.emoji-heading button{background:transparent;border:0;color:#006c60;font-size:24px;cursor:pointer}.emoji-group-label{margin:7px 0 4px;font-size:12px;font-weight:bold}.emoji-grid{display:flex;flex-wrap:wrap;gap:4px}.emoji-grid button{width:36px;height:36px;border:1px solid #c5d5bb;background:#fff;font-size:23px;border-radius:4px;cursor:pointer}.emoji-grid button:hover,.emoji-grid button:focus-visible{background:#d8f3e5;outline:2px solid #006c60}.emoji-hint{font-size:12px;margin:8px 0 0}@media(max-width:640px),(hover:none) and (pointer:coarse){.desktop-emoji-button,.desktop-emoji-picker{display:none!important}}