/* Yunliao: Telegram Desktop inspired light theme, independent branding. */
:root{--accent:#3390ec;--ink:#19232b;--muted:#8b969f;--line:#e8edf0;--hover:#f1f4f6}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:#fff;letter-spacing:.1px}
button{background:transparent;color:var(--accent);border-radius:8px;transition:background .12s}button:hover{background:var(--hover)}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input,select{border-color:var(--line);border-radius:9px;background:#f5f7f9;color:var(--ink)}input:focus,textarea:focus,select:focus{outline:2px solid #3390ec55}input::placeholder,textarea::placeholder{color:#98a2ab}
#accounts{width:68px;padding:17px 8px;background:#293a4c;color:#dce5ed;scrollbar-width:thin}.brand{color:white;font-size:22px;font-weight:600;margin:0 0 26px}#accounts button{width:46px;height:46px;padding:0;border-radius:50%;color:#b9c8d7;margin:0 3px 12px;background:#3c5064;font-size:12px;font-weight:600}#accounts button:hover{background:#47627d}#accounts .account.active{background:var(--accent);color:#fff;box-shadow:0 0 0 3px #293a4c,0 0 0 5px #75b6f2}#accounts #addAccount{background:transparent;border:1px dashed #718498;color:#a6bacd;font-size:28px}
#conversations{width:330px;background:#fff;border-right:1px solid #dbe1e6;position:relative}#conversations>header{height:57px;padding:19px 21px;border:0;font-size:18px}#status{font-size:11px;color:var(--accent);padding-top:4px}#search{margin:0 58px 13px 15px;border:0;border-radius:22px;background:#f1f3f5;height:40px;padding:10px 17px;font-size:13px}.quick-actions{position:absolute;right:12px;top:58px;margin:0}#plusMenu{width:38px;height:38px;padding:0;border-radius:50%;font-weight:300;font-size:27px}#plusActions{top:44px;box-shadow:0 5px 25px #14253626;border:1px solid var(--line);padding:5px}#plusActions button{color:#273746;font-size:13px}
.sidebar-tools{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);padding:0 10px 9px}.sidebar-tools button{margin:0!important;font-size:12px;padding:8px!important;color:#6c7e8e;white-space:nowrap}.sidebar-tools #friendsButton{color:var(--accent);background:#eef6fe}.sidebar-tools #changeAvatar{font-size:0;width:34px}.sidebar-tools #changeAvatar::after{content:'⚙';font-size:20px}.sidebar-tools #groupRequestsButton{margin-left:auto!important}
#roomList{scrollbar-width:thin;scrollbar-color:#c9d0d6 transparent}.room{height:77px;padding:11px 15px;gap:12px;border:0;border-radius:0;color:var(--ink);background:#fff}.room:hover{background:#f2f5f7}.room.pinned{background:#f5f7f9}.room.active,.room.active:hover{background:#4197df;color:white}.list-avatar{width:52px;height:52px;background:linear-gradient(145deg,#76bdf8,#438ae1);color:#fff;font-size:21px;font-weight:500}.room:nth-child(3n+2) .list-avatar{background:linear-gradient(145deg,#9aba7e,#68a165)}.room:nth-child(3n+3) .list-avatar{background:linear-gradient(145deg,#d9a2dd,#a278c3)}.room-body strong{font-size:14px;font-weight:600;padding-right:18px}.room-body small{font-size:13px;color:#8a969f;margin-top:7px;padding-right:28px}.room-time{position:absolute;right:14px;top:15px;font-size:11px;color:#8c99a3}.room-body{padding-right:34px}.room.active small,.room.active .room-time{color:#e0effc}.badge{position:absolute;right:14px;bottom:14px;background:#55a0de;color:white;border-radius:12px;min-width:20px;padding:2px 6px;text-align:center;font-size:11px}.room.active .badge{background:white;color:var(--accent)}.room.pinned::after{content:'⌖';position:absolute;bottom:14px;right:16px;color:#a6b1ba}.room.pinned:has(.badge)::after{display:none}#conversations footer{padding:10px 16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}footer small{display:none}#logout{font-size:11px;padding:7px;color:#8b969f}
#chatPane{background:#dce7d3;background-image:radial-gradient(ellipse at 10% 10%,#e6ecd9 0,transparent 60%),radial-gradient(ellipse at 90% 90%,#cbdcce 0,transparent 70%)}#chatTitle{height:66px;min-height:66px;background:#fff;border-bottom:1px solid #dce3e8;padding:12px 25px;font-size:15px;gap:12px}#chatTitle strong{font-size:15px;font-weight:600}#chatTitle small{font-size:12px;color:#7a8d9e;margin-top:4px}.avatar{background:#74ace0;color:white;width:38px;height:38px;min-width:38px}#messages{padding:27px clamp(22px,5vw,80px) 18px;scrollbar-width:thin;scrollbar-color:#99ada180 transparent}.empty{margin:28vh auto 0;font-size:22px;color:#5a7564;line-height:2}.empty small{font-size:13px;background:#95ac9980;color:white;padding:7px 16px;border-radius:18px}.msg{margin-bottom:10px}.message-row{max-width:min(80%,640px);gap:8px;align-items:flex-end}.message-row>.avatar{width:32px;height:32px;min-width:32px;font-size:12px}.mine .message-row>.avatar{display:none}.message-content{position:relative}.message-content>small{font-size:10px;color:#6d8273;margin:0 8px 4px}.bubble{border:0;background:#fff;padding:10px 13px;border-radius:13px 13px 13px 4px;box-shadow:0 1px 2px #2f463017;font-size:14px;line-height:1.5}.mine .bubble{background:#effdde;border:0;border-radius:13px 13px 4px 13px}.message-content>button{display:none}.message-content>.read-receipt{margin:3px 5px 0;color:#6e9f59;font-size:10px}.system-msg{color:#fff;background:#879e8e90;border-radius:15px;padding:5px 12px;width:fit-content;margin:18px auto;font-size:11px}.video-bubble{background:#477487;color:#fff}.contact-card{color:#2c76b4}.contact-card span{border-color:#d8e7d0;color:#799571}
#composer{background:#fff;border:0;padding:0 20px 12px;min-height:108px;display:grid;grid-template-columns:1fr 46px;gap:0 10px}.chat-tools{grid-column:1/-1;height:39px;padding:0;border:0;gap:2px;overflow-x:auto}.chat-tools button{color:#91a0ac;font-size:19px;padding:5px 8px;white-space:nowrap}.chat-tools button:hover{color:var(--accent);background:#edf5fd}.chat-tools span{display:none}.chat-tools #recordsButton,.chat-tools #older,.chat-tools #groupSettingsButton{font-size:11px;color:#8a99a5}.chat-tools #recordsButton{margin-left:auto}.chat-tools #older{margin-left:0}#text{grid-column:1;min-height:49px;height:49px;padding:13px 7px;font-size:14px;outline:none;line-height:23px}#send{grid-column:2;width:44px;height:44px;min-width:0;border-radius:50%;background:var(--accent);color:white;float:none;align-self:center;font-size:0;padding:0}#send::after{content:'➤';font-size:24px;display:block;transform:rotate(-28deg)}#send:hover{background:#2582d7}#uploadState{grid-column:1/-1;color:#7390a6}#uploadState:empty{display:none}#emojiPanel{box-shadow:0 6px 30px #182b412b;border-color:var(--line)}
dialog{border:0;border-radius:14px;padding:26px;box-shadow:0 15px 80px #142c4c40;max-height:88vh;overflow:auto;color:var(--ink)}dialog::backdrop{background:#162b4055}dialog h2{font-size:20px;font-weight:600;margin-bottom:16px}dialog h3{font-size:14px;color:var(--accent)}dialog p{color:#82919e}dialog input:not([type=checkbox]),dialog select{width:100%}dialog form{gap:13px}dialog button[type=submit],#saveNote,#sendCard{background:var(--accent);color:white}dialog label{font-size:13px;line-height:1.7}#registerFields{display:grid;gap:12px}#profileDialog{padding:0 28px 28px}.profile-cover{background:linear-gradient(125deg,#68b2ef,#338bd2);height:100px}.room-menu{padding:6px;min-width:158px;border:1px solid #e9eef2;border-radius:9px;box-shadow:0 5px 23px #23344d25}.room-menu button{color:#283949;font-size:13px;padding:10px 14px;border-radius:5px}.room-menu button:hover{background:#edf4fa}#notice{background:#354d63;color:#fff;border-radius:9px;box-shadow:0 4px 20px #0002;font-size:13px;z-index:1000}#recordsList article{border-color:var(--line);padding:15px 3px}#recordsList p{font-size:14px;color:#334b5c}.friend-row{border-color:var(--line)}.card-choice.chosen{background:#e7f3ff}
@media(min-width:1500px){#conversations{width:370px}}@media(max-width:1000px){#conversations{width:280px}#accounts{width:60px;padding:16px 4px}#messages{padding:22px}.sidebar-tools button{font-size:11px}.message-row{max-width:91%}}@media(max-width:700px){#accounts{width:54px}#conversations{width:220px}.room{padding:10px;gap:8px}.list-avatar{width:40px;height:40px}.room-body{padding-right:20px}.sidebar-tools{flex-wrap:wrap}.room-time{font-size:9px;right:8px}.chat-tools #older{display:none}#messages{padding:14px}#composer{padding:0 10px 10px}.message-row{max-width:98%}}

.chat-tools #groupRequestsButton{font-size:11px;color:#8a99a5;margin:0;padding:5px 8px}

.sidebar-tools #changeAvatar{font-size:12px;width:auto}.sidebar-tools #changeAvatar::after{content:none}#accounts .account{overflow:hidden}#accounts .account img{width:100%;height:100%;object-fit:cover}.group-avatar-preview{width:72px;height:72px;margin:12px 0}

/* Video reference: compact desktop layout and contextual right column. */
#conversations{width:290px}#accounts{width:58px;padding:15px 4px}#accounts button{width:42px;height:42px}.room{height:68px;padding:9px 12px}.list-avatar{width:48px;height:48px}.room-body strong{font-size:14px}.room-body small{margin-top:5px}#chatTitle{height:58px;min-height:58px;padding:10px 18px}.title-actions{margin-left:auto;display:flex;gap:6px}.title-actions button{font-size:22px;color:#7e8b96;padding:6px 10px}#chatPane{min-width:280px;background:radial-gradient(ellipse at 25% 65%,#e6e8ad80,transparent 65%),linear-gradient(135deg,#d4e3b9,#b9d6b8 55%,#dce8c9)}#messages{padding:22px clamp(15px,3vw,48px)}.bubble{border-radius:9px 9px 9px 3px}.mine .bubble{background:#e4ffc7;border-radius:9px 9px 3px 9px}dialog{border-radius:7px}#groupSettingsDialog{width:430px}#groupSettingsDialog>label{display:block;padding:11px 0;border-bottom:1px solid #eef0f2}#groupSettingsDialog>label:has(input[type=checkbox]){display:flex;justify-content:space-between;align-items:center;gap:18px}#groupSettingsDialog input[type=checkbox]{appearance:none;width:32px;height:18px;border-radius:12px;background:#bdc6ce;position:relative;cursor:pointer;flex-shrink:0}#groupSettingsDialog input[type=checkbox]::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;background:white;border-radius:50%}#groupSettingsDialog input[type=checkbox]:checked{background:#3390ec}#groupSettingsDialog input[type=checkbox]:checked::after{left:16px}#groupSettingsDialog h3{padding-top:16px;border-top:8px solid #f3f5f6}#detailsPane{width:280px;flex-shrink:0;background:white;border-left:1px solid #e5e8eb;overflow-y:auto;padding:0 18px 20px}#detailsPane[hidden]{display:none}#detailsPane>header{display:flex;align-items:center;justify-content:space-between;height:58px}#detailsPane header button{font-size:24px;color:#8a959e}.details-hero{text-align:center;padding:22px 0}.details-hero .avatar{width:84px;height:84px;margin:auto;font-size:28px}.details-hero h2{font-size:18px;margin:14px 0 5px;overflow-wrap:anywhere}.details-hero small,#detailsPane p{color:#8a969f;font-size:12px}.details-actions{display:flex;justify-content:center;gap:8px;padding-bottom:18px;border-bottom:8px solid #f4f5f6}#detailsPane h3{font-size:14px;color:#3390ec;padding:16px 0 4px}#detailsPane input{width:100%;margin-bottom:8px}.details-member{display:grid;grid-template-columns:36px 1fr;gap:3px 10px;text-align:left;width:100%;padding:9px 0;color:#263744}.details-member>span{grid-row:1/3;background:#68a6d4;color:white;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.details-member b{font-size:13px;overflow:hidden;text-overflow:ellipsis}.details-member small{font-size:11px;color:#8a969f}@media(max-width:1100px){#detailsPane{position:fixed;right:0;top:0;bottom:0;z-index:25;box-shadow:-12px 0 40px #182a3920}}@media(min-width:1500px){#conversations{width:320px}}