*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#152036;background:#f4f7fb}
button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;background:#2767e8;color:#fff;padding:10px 14px;border-radius:10px;font-weight:700}
.hidden{display:none!important}.logo{font-weight:900;font-size:22px}.logo span{font-weight:500;color:#718099}
.loginWrap{height:100vh;display:flex;align-items:center;justify-content:center;background:#edf2f9}.loginCard{width:360px;background:#fff;padding:28px;border-radius:18px;box-shadow:0 15px 50px rgba(26,44,75,.12)}.loginCard h1{font-size:22px}.loginCard input{width:100%;margin:6px 0;padding:12px;border:1px solid #d9e1ee;border-radius:10px}.loginCard button{width:100%;margin-top:10px}.error{color:#b12727;margin-top:10px;font-size:13px}
.app{height:100vh;display:flex;flex-direction:column}header{height:64px;background:#fff;border-bottom:1px solid #e4eaf2;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.headerActions{display:flex;gap:8px}.secondary{background:#e9f0ff;color:#1e59cf}.ghost{background:#f2f4f8;color:#66758e}
.filters{height:52px;display:flex;gap:8px;padding:8px 14px;background:#fff;border-bottom:1px solid #e4eaf2;overflow:auto}.filter{background:#eef2f7;color:#536176;white-space:nowrap}.filter.active{outline:2px solid #8bacf6}.filter.disabled{opacity:.42;cursor:default}.ch1{--tag:#2367e8}.ch2{--tag:#7b4fe0}.ch3{--tag:#d5476e}.ch4{--tag:#07986c}.ch5{--tag:#d27c16}.filter.ch1,.filter.ch2,.filter.ch3,.filter.ch4,.filter.ch5{background:color-mix(in srgb,var(--tag) 12%,white);color:var(--tag)}
main{flex:1;display:grid;grid-template-columns:410px minmax(0,1fr);min-height:0}aside{background:#fff;border-right:1px solid #e4eaf2;min-height:0;display:flex;flex-direction:column}.sideTop{height:45px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center}.caption{text-transform:uppercase;font-size:11px;font-weight:900;color:#7e8ba1}.tiny{padding:5px 9px;background:#edf1f7;color:#536176}.chatList{overflow:auto;flex:1}.loading,.errorBox{padding:20px;color:#7b879b}.errorBox{color:#ac3434}.chatRow{padding:11px 13px;border-top:1px solid #f0f3f7;display:flex;gap:10px;cursor:pointer}.chatRow:hover{background:#f5f8fd}.avatar{width:44px;height:44px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;background:color-mix(in srgb,var(--tag,#4975b8) 15%,white);color:var(--tag,#4975b8)}.chatInfo{min-width:0;flex:1}.chatTop{display:flex;justify-content:space-between;gap:8px}.chatTop b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chatTop small{color:#8995a8}.channelTag{font-size:10px;font-weight:900;color:var(--tag,#5376a8);margin-top:2px}.preview{font-size:13px;color:#758399;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.badge{float:right;background:#2866df;color:#fff;padding:1px 7px;border-radius:12px}
.conversation{background:#edf2f8;min-width:0;min-height:0}.empty{height:100%;display:flex;align-items:center;justify-content:center;color:#8290a4}.chatPane{height:100%;display:flex;flex-direction:column}.chatHeader{height:70px;background:#fff;border-bottom:1px solid #e4eaf2;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.chatHeader strong{display:block;font-size:17px}.chatHeader span{display:block;margin-top:3px;font-size:12px;font-weight:800;color:var(--tag,#5473a7)}.replyVia{background:#e7efff;padding:9px 12px;border-radius:10px;color:#315a9f;font-size:12px}.messages{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:8px}.msg{max-width:70%;padding:10px 13px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(30,50,80,.05);white-space:pre-wrap;overflow-wrap:anywhere}.msg.out{align-self:flex-end;background:#dce9ff}.msg.in{align-self:flex-start}.msg small{display:block;color:#8290a4;font-size:10px;margin-top:5px}.composer{background:#fff;border-top:1px solid #e4eaf2;padding:11px;display:flex;gap:8px}.composer textarea{resize:none;min-height:46px;max-height:120px;flex:1;border:1px solid #d8e0ec;border-radius:11px;padding:11px}
.modalBg{position:fixed;inset:0;background:rgba(15,25,45,.48);display:flex;align-items:center;justify-content:center;z-index:20}.modal{background:#fff;border-radius:17px;width:480px;max-width:94vw;max-height:90vh;overflow:auto;padding:23px;position:relative}.modal h2{margin-top:0}.modalClose{position:absolute;right:10px;top:8px;background:transparent;color:#718099;font-size:27px;padding:4px 10px}.modal label{display:block;margin:13px 0 5px;font-size:12px;font-weight:800}.modal input,.modal select{width:100%;border:1px solid #d6dfec;padding:11px;border-radius:10px}.modal hr{border:0;border-top:1px solid #e8edf4;margin:18px 0}.muted{color:#77859b}.found{margin-top:16px;padding:14px;border-radius:12px;background:#f1f5fb}.found b,.found span,.found small{display:block}.found span,.found small{color:#6d7c93;margin-top:4px}.found button{margin-top:12px}
.toast{position:fixed;z-index:50;right:18px;top:78px;background:#152036;color:#fff;padding:12px 15px;border-radius:11px;max-width:420px}
@media(max-width:800px){main{grid-template-columns:1fr}.conversation{position:fixed;inset:116px 0 0 0;z-index:5}.conversation:has(.empty:not(.hidden)){display:none}.headerActions .ghost{display:none}}
.vkBtn{background:#2787f5}
.vkSource{--tag:#2787f5}
.filter.vkSource{background:#e7f1ff;color:#1671d8}
.warning{margin-top:12px;padding:10px 12px;border-radius:9px;background:#fff4dc;color:#735313;font-size:12px}
.maxSource{--tag:#12a86b}
.filter.maxSource{background:#e6f7ef;color:#087d4e}
/* Uply Inbox v0.6 — media */
.avatar{overflow:hidden;position:relative}
.avatarImg{width:100%;height:100%;object-fit:cover;display:block}
.avatarFallback{width:100%;height:100%;align-items:center;justify-content:center}
.attachments{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.mediaItem{max-width:100%}
.imageItem{min-width:180px}
.messageImage{display:block;max-width:min(420px,100%);max-height:420px;border-radius:11px;object-fit:contain;background:#e8edf5;cursor:zoom-in}
.mediaMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;font-size:11px;color:#738198}
.mediaSize{color:#8a96a8}
.mediaDownload{color:#245fd2;text-decoration:none;font-weight:750}
.mediaDownload:hover{text-decoration:underline}
.audioItem audio{width:min(360px,100%);height:38px}
.videoItem video{display:block;width:min(430px,100%);max-height:380px;border-radius:11px;background:#000}
.fileItem{display:flex;gap:10px;align-items:center;padding:9px 10px;border:1px solid #dbe3ef;border-radius:11px;background:rgba(255,255,255,.65)}
.msg.out .fileItem{background:rgba(255,255,255,.45)}
.fileIcon{width:38px;height:38px;border-radius:10px;background:#edf2fa;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.fileInfo{min-width:0;display:flex;flex-direction:column;gap:3px}
.fileInfo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px}
.fileInfo a{color:#245fd2;text-decoration:none;font-size:11px;font-weight:750}
.msgText{margin-bottom:3px}
@media(max-width:800px){
.msg{max-width:88%}
.messageImage{max-width:100%;max-height:52vh}
.videoItem video{max-width:100%;max-height:48vh}
.audioItem audio{width:100%}
}
/* Uply Inbox v0.7 — search, rename, pins */
.sideTopOrganizer{
height:86px;
min-height:86px;
flex-wrap:wrap;
align-content:center;
gap:6px;
}
.sideTopOrganizer .caption{flex:1}
.chatSearch{
order:3;
flex:0 0 100%;
width:100%;
height:34px;
border:1px solid #d8e0ec;
border-radius:10px;
padding:7px 11px;
outline:none;
background:#f7f9fc;
color:#152036;
}
.chatSearch:focus{
border-color:#8bacf6;
background:#fff;
box-shadow:0 0 0 3px rgba(39,103,232,.08);
}
.chatRow.pinnedChat{background:#fbfcff}
.pinMark{font-size:12px}
.chatTopRight{display:flex;align-items:center;gap:3px;flex:none}
.rowMenuBtn{
width:25px;height:25px;padding:0;border-radius:7px;
background:transparent;color:#7c899c;font-size:18px;line-height:1;
}
.rowMenuBtn:hover{background:#edf2f8;color:#304867}
.chatHeaderActions{display:flex;gap:6px;margin-left:auto;margin-right:10px}
.chatActionBtn{
width:36px;height:36px;padding:0;border-radius:9px;
background:#eef3fa;color:#536176;font-size:16px;
}
.chatActionBtn.active{background:#dce8ff;color:#1f5fd7}
.originalName{font-size:12px;color:#7b879b;margin-top:6px}
.pinCheck{display:flex!important;align-items:center;gap:8px;margin-top:16px!important}
.pinCheck input{width:auto!important}
.modalButtons{display:flex;gap:8px;margin-top:18px}
.pinnedMessagesBar{
background:#fff;
border-bottom:1px solid #e4eaf2;
padding:8px 14px;
display:flex;
align-items:center;
gap:10px;
min-height:44px;
}
.pinsLabel{font-size:12px;font-weight:900;color:#536176;white-space:nowrap}
.pinsList{display:flex;gap:6px;overflow:auto;min-width:0}
.pinnedMessageItem{
background:#eef3fb;color:#405471;
border-radius:8px;padding:6px 10px;
font-size:12px;font-weight:700;
white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;
}
.msg{position:relative}
.msgPinBtn{
position:absolute;
top:5px;
right:5px;
width:26px;height:26px;
padding:0;border-radius:8px;
background:rgba(255,255,255,.78);
color:#8290a4;
font-size:12px;
opacity:0;
transition:opacity .12s ease;
}
.msg:hover .msgPinBtn,.msgPinBtn.active{opacity:1}
.msgPinBtn.active{color:#1f5fd7;background:#f4f7ff}
.messagePinned{box-shadow:0 0 0 2px rgba(39,103,232,.18),0 1px 2px rgba(30,50,80,.05)}
.msgFlash{animation:uplyPinFlash 1.3s ease}
@keyframes uplyPinFlash{
0%,100%{box-shadow:0 0 0 2px rgba(39,103,232,.18)}
50%{box-shadow:0 0 0 5px rgba(39,103,232,.28)}
}
@media(max-width:800px){
.sideTopOrganizer{height:82px;min-height:82px}
.chatHeaderActions{margin-left:6px;margin-right:4px}
.replyVia{display:none}
.pinnedMessagesBar{align-items:flex-start;flex-direction:column;gap:5px}
.pinsList{width:100%}
}
/* Uply Inbox v0.8 — Avito + employee access */
.avitoSource{
color:#6b39d6!important;
}
.filter.avitoSource{
background:#f0eaff;
color:#5c31c7!important;
}
.avatar.avitoSource{
background:#efe9ff;
color:#5c31c7;
}
.employeeAddBtn{
width:100%;
margin:6px 0 14px;
}
.employeeList{
display:flex;
flex-direction:column;
gap:10px;
max-height:52vh;
overflow:auto;
}
.employeeCard{
border:1px solid #e0e6ef;
border-radius:12px;
padding:12px;
background:#fff;
}
.employeeCard.employeeDisabled{
opacity:.62;
}
.employeeHead{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}
.employeeHead b{
display:block;
font-size:15px;
}
.employeeHead small{
display:block;
color:#7b879b;
margin-top:3px;
}
.employeeStatus{
font-size:11px;
font-weight:800;
background:#edf7ef;
color:#347a45;
border-radius:999px;
padding:5px 8px;
white-space:nowrap;
}
.employeeDisabled .employeeStatus{
background:#f1f2f4;
color:#7d8795;
}
.employeeChannels{
display:flex;
flex-wrap:wrap;
gap:5px;
margin:10px 0;
}
.employeeChannels span{
font-size:11px;
font-weight:700;
background:#f0f4fa;
color:#536176;
padding:5px 7px;
border-radius:7px;
}
.employeeButtons{
display:flex;
gap:7px;
}
button.danger{
background:#fff1f2;
color:#c53a4b;
}
.employeeSectionTitle{
margin-top:16px;
margin-bottom:7px;
font-size:12px;
font-weight:900;
color:#44536a;
}
.channelChecks{
display:flex;
flex-direction:column;
gap:7px;
border:1px solid #e0e6ef;
border-radius:11px;
padding:9px;
max-height:230px;
overflow:auto;
}
.channelAccessRow{
display:flex!important;
align-items:center;
gap:9px;
margin:0!important;
padding:6px 4px;
cursor:pointer;
}
.channelAccessRow input{
width:auto!important;
margin:0;
}
.channelAccessRow span{
font-size:13px;
font-weight:700;
color:#33435a;
}
/* Uply Inbox v0.9 — Avito item photo + outgoing attachments */
.avitoItemBar{
flex:0 0 auto;
padding:8px 14px;
border-bottom:1px solid #e3eaf3;
background:#fff;
}
.avitoItemLink{
display:flex;
align-items:center;
gap:12px;
max-width:760px;
min-height:74px;
color:inherit;
text-decoration:none;
border:1px solid #dfe7f2;
border-radius:12px;
padding:7px 10px 7px 7px;
background:#f8faff;
}
.avitoItemLink:hover{
border-color:#9db9ee;
background:#f3f7ff;
}
.avitoItemLink img{
width:92px;
height:69px;
object-fit:cover;
border-radius:9px;
flex:0 0 auto;
background:#e8eef7;
}
.avitoItemInfo{
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.avitoItemInfo span{
font-size:11px;
font-weight:800;
text-transform:uppercase;
color:#2365d8;
}
.avitoItemInfo b{
font-size:14px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.avitoItemInfo small{
color:#7e8ca3;
font-size:11px;
}
.avitoItemOpen{
margin-left:auto;
font-size:12px;
color:#2365d8;
white-space:nowrap;
}
.attachBtn{
flex:0 0 auto;
width:44px;
height:44px;
border:0;
border-radius:11px;
font-size:21px;
cursor:pointer;
background:#eef4ff;
color:#245fc5;
}
.attachBtn:hover{background:#dfeaff}
.attachBtn:disabled{opacity:.55;cursor:wait}
@media (max-width:700px){
.avitoItemLink img{width:76px;height:57px}
.avitoItemOpen{display:none}
}
/* Uply Inbox v0.9.2 — light theme */
:root{
--bg:#eef5ff;
--panel:#f7fbff;
--panel-2:#ffffff;
--line:#d7e6fb;
--text:#183153;
--muted:#6f86a7;
--primary:#2f6fff;
--primary-2:#76a8ff;
--soft-blue:#e9f2ff;
--soft-pink:#fff0f5;
--soft-green:#eefbf3;
--soft-violet:#f3efff;
--shadow:0 10px 30px rgba(46, 88, 158, .08);
}
html,body{
background:
radial-gradient(circle at top right, rgba(130,170,255,.18), transparent 26%),
radial-gradient(circle at bottom left, rgba(130,226,196,.12), transparent 22%),
linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
color:var(--text);
}
body{
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.topbar{
background:rgba(255,255,255,.82);
backdrop-filter: blur(10px);
border-bottom:1px solid rgba(215,230,251,.95);
box-shadow:0 4px 18px rgba(44,86,150,.05);
}
.brand{
display:flex;
align-items:baseline;
gap:10px;
}
.brand h1,
.brandTitle,
.logoText{
color:#11305f !important;
letter-spacing:-0.02em;
font-weight:800;
}
.brand small,
.brandSub,
.logoSub{
color:#5f7aa1 !important;
font-weight:700;
}
button,
.btn{
border-radius:14px !important;
border:1px solid #d7e6fb !important;
box-shadow:0 4px 14px rgba(64,110,184,.07);
}
button.primary,
.btn.primary,
.actions button{
background:linear-gradient(135deg,#3d7cff 0%,#6aa5ff 100%) !important;
color:#fff !important;
border-color:#4f86ff !important;
}
button:hover,
.btn:hover{
transform:translateY(-1px);
transition:.18s ease;
}
.tabs,
.channelTabs{
background:transparent;
}
.tab,
.chip,
.channelChip{
border-radius:16px !important;
border:1px solid #d6e5fb !important;
background:rgba(255,255,255,.82) !important;
color:#36567e !important;
box-shadow:0 3px 10px rgba(60,95,150,.05);
}
.tab.active,
.chip.active,
.channelChip.active{
background:linear-gradient(180deg,#ffffff 0%,#eef5ff 100%) !important;
border-color:#7ba9ff !important;
color:#1f4ea3 !important;
box-shadow:0 7px 18px rgba(63,116,216,.12);
}
.sidebar,
.leftCol,
.chatListWrap{
background:rgba(255,255,255,.78) !important;
border-right:1px solid #d7e6fb !important;
}
.searchBox input,
input[type="text"],
input[type="search"],
input[type="password"],
textarea,
select{
background:#fff !important;
border:1px solid #d7e6fb !important;
color:#183153 !important;
border-radius:14px !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.02);
}
.searchBox input::placeholder,
input::placeholder,
textarea::placeholder{
color:#8da2c0 !important;
}
.chatItem,
.dialogItem,
.chatPreview{
background:transparent !important;
border-bottom:1px solid rgba(215,230,251,.72) !important;
transition:.18s ease;
}
.chatItem:hover,
.dialogItem:hover{
background:linear-gradient(180deg,rgba(245,250,255,.92),rgba(238,245,255,.92)) !important;
}
.chatItem.active,
.dialogItem.active{
background:linear-gradient(180deg,#ffffff 0%,#edf5ff 100%) !important;
box-shadow: inset 3px 0 0 #5d93ff;
}
.chatArea,
.rightCol,
.chatView{
background:
linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.52)),
linear-gradient(180deg,#edf5ff 0%,#f7fbff 100%) !important;
}
.chatHeader{
background:rgba(255,255,255,.78) !important;
border-bottom:1px solid #d7e6fb !important;
backdrop-filter: blur(8px);
}
.msg,
.message,
.msgBubble{
border-radius:18px !important;
box-shadow:0 6px 18px rgba(50,88,150,.06);
}
.msg.in,
.message.in,
.msgBubble.in{
background:#fff !important;
border:1px solid #e1ebfb !important;
}
.msg.out,
.message.out,
.msgBubble.out{
background:linear-gradient(180deg,#d9ebff 0%,#eaf5ff 100%) !important;
border:1px solid #bfd7ff !important;
}
.composer,
.chatComposer{
background:rgba(255,255,255,.82) !important;
border-top:1px solid #d7e6fb !important;
backdrop-filter: blur(8px);
}
.modal,
.modalCard,
.popup,
.dialog{
background:#fff !important;
border:1px solid #dbe8fb !important;
border-radius:22px !important;
box-shadow:0 24px 60px rgba(34,74,137,.16) !important;
}
hr{
border-color:#e1ebfa !important;
}
.pinnedBar,
#pinnedMessagesBar{
background:linear-gradient(180deg,#fffdf7 0%,#fff8e9 100%) !important;
border:1px solid #f3dfaa !important;
border-radius:16px !important;
}
#avitoItemBar,
.avitoItemBar{
background:linear-gradient(180deg,#ffffff 0%,#f2f7ff 100%) !important;
border:1px solid #d7e6fb !important;
border-radius:18px !important;
}
.channelTag{
font-weight:700;
}
::-webkit-scrollbar{
width:10px;
height:10px;
}
::-webkit-scrollbar-thumb{
background:#c8daf8;
border-radius:10px;
border:2px solid transparent;
background-clip:padding-box;
}
::-webkit-scrollbar-track{
background:transparent;
}
/* Uply v0.9.3 - LIGHT REDESIGN */
:root{
--uply-blue:#3977f6;
--uply-blue-dark:#1e4fba;
--uply-sky:#eaf3ff;
--uply-sky-2:#f6faff;
--uply-line:#dce9fa;
--uply-text:#172b4d;
--uply-muted:#7890b0;
--uply-shadow:0 10px 30px rgba(38,86,160,.08);
}
html,body{
background:#f4f8fe !important;
color:var(--uply-text) !important;
}
.app{
background:
radial-gradient(circle at 92% 5%, rgba(103,157,255,.13), transparent 24%),
linear-gradient(180deg,#f9fbff 0%,#eef5ff 100%) !important;
}
header{
min-height:72px !important;
height:72px !important;
padding:0 22px !important;
background:
linear-gradient(100deg,rgba(255,255,255,.98) 0%,rgba(247,251,255,.98) 55%,rgba(235,244,255,.98) 100%) !important;
border-bottom:1px solid #dbe8f8 !important;
box-shadow:0 5px 20px rgba(40,83,146,.06) !important;
position:relative;
z-index:3;
}
.logo{
display:flex !important;
align-items:center !important;
gap:9px !important;
color:#123c84 !important;
font-size:22px !important;
font-weight:900 !important;
letter-spacing:-.35px;
}
.logo::before{
content:"U";
width:36px;
height:36px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:linear-gradient(145deg,#3977f6 0%,#72a9ff 100%);
color:#fff;
font-size:19px;
font-weight:900;
box-shadow:0 7px 18px rgba(57,119,246,.22);
}
.logo span{
color:#6981a6 !important;
font-size:16px !important;
font-weight:700 !important;
letter-spacing:0 !important;
}
.headerActions{gap:10px !important}
.headerActions button{
min-height:42px !important;
padding:9px 16px !important;
border-radius:13px !important;
border:1px solid #d8e6f9 !important;
box-shadow:0 4px 13px rgba(42,89,159,.06) !important;
transition:.16s ease !important;
}
.headerActions button:hover{
transform:translateY(-1px);
box-shadow:0 7px 17px rgba(42,89,159,.11) !important;
}
.headerActions button:not(.secondary):not(.ghost){
background:linear-gradient(135deg,#3475f4,#5f98ff) !important;
}
.headerActions .secondary{
background:#eef5ff !important;
color:#245cc4 !important;
}
.headerActions .ghost{
background:#f6f8fc !important;
color:#6d7f9e !important;
}
.filters{
min-height:58px !important;
height:58px !important;
padding:9px 16px !important;
gap:9px !important;
background:rgba(249,252,255,.94) !important;
border-bottom:1px solid #dce8f7 !important;
box-shadow:0 3px 10px rgba(50,90,150,.03);
}
.filter{
min-height:38px !important;
padding:8px 15px !important;
border-radius:13px !important;
border:1px solid #dae7f7 !important;
background:#f0f5fb !important;
color:#58708f !important;
box-shadow:none !important;
}
.filter.active{
background:#fff !important;
color:#295ba9 !important;
border-color:#79a6ff !important;
outline:none !important;
box-shadow:0 5px 14px rgba(60,110,200,.11) !important;
}
.filter.ch1,.filter.ch2,.filter.ch3,.filter.ch4,.filter.ch5{
background:color-mix(in srgb,var(--tag) 9%,white) !important;
border-color:color-mix(in srgb,var(--tag) 20%,white) !important;
}
main{grid-template-columns:390px minmax(0,1fr) !important}
aside{
background:rgba(250,252,255,.98) !important;
border-right:1px solid #dce8f7 !important;
}
.sideTop{
min-height:54px !important;
height:auto !important;
padding:11px 12px 7px !important;
}
.caption{
color:#7790b0 !important;
letter-spacing:.04em;
}
.chatSearch{
margin:0 10px 10px !important;
width:calc(100% - 20px) !important;
height:42px !important;
padding:0 13px !important;
background:#fff !important;
border:1px solid #d7e5f7 !important;
border-radius:13px !important;
color:#1e3557 !important;
outline:none !important;
box-shadow:0 3px 10px rgba(60,95,150,.04) !important;
}
.chatSearch:focus{
border-color:#88aff7 !important;
box-shadow:0 0 0 3px rgba(72,126,232,.10) !important;
}
.chatList{padding:2px 7px 12px !important}
.chatRow{
margin:5px 0 !important;
padding:10px 10px !important;
border:1px solid transparent !important;
border-radius:14px !important;
background:rgba(255,255,255,.66) !important;
transition:.16s ease !important;
}
.chatRow:hover{
background:#fff !important;
border-color:#dce8f8 !important;
box-shadow:0 7px 20px rgba(46,88,151,.07) !important;
}
.chatRow.pinnedChat{
background:linear-gradient(100deg,#fffef9,#f8fbff) !important;
border-color:#f1e5bf !important;
}
.avatar{
width:46px !important;
height:46px !important;
box-shadow:0 3px 10px rgba(40,70,110,.09);
}
.chatTop b{
color:#183254 !important;
font-size:14px !important;
}
.chatTop small,.preview{color:#7d91ad !important}
.rowMenuBtn{
width:28px !important;
height:28px !important;
padding:0 !important;
border-radius:10px !important;
background:#f4f8fd !important;
color:#7890ae !important;
border:1px solid #dfebf9 !important;
}
.conversation{
background:
radial-gradient(circle at 78% 15%,rgba(135,178,255,.10),transparent 27%),
linear-gradient(180deg,#eef5fd 0%,#f7faff 100%) !important;
}
.empty{
color:#8ba0ba !important;
font-size:14px !important;
}
.chatHeader{
min-height:76px !important;
height:76px !important;
padding:0 20px !important;
background:rgba(255,255,255,.92) !important;
border-bottom:1px solid #dce8f7 !important;
box-shadow:0 4px 12px rgba(40,80,140,.04);
}
.chatHeader strong{
color:#17335b !important;
font-size:18px !important;
}
.replyVia{
background:#edf5ff !important;
color:#2a5eb8 !important;
border:1px solid #d9e8fb !important;
border-radius:13px !important;
}
.messages{
padding:22px !important;
gap:10px !important;
}
.msg{
border-radius:17px !important;
padding:11px 14px !important;
box-shadow:0 5px 15px rgba(43,76,127,.06) !important;
border:1px solid #e1ebf7 !important;
}
.msg.in{background:#fff !important}
.msg.out{
background:linear-gradient(145deg,#dcecff,#edf6ff) !important;
border-color:#c8ddfb !important;
}
.composer{
padding:12px 14px !important;
gap:9px !important;
background:rgba(255,255,255,.94) !important;
border-top:1px solid #dce8f7 !important;
}
.composer textarea{
border:1px solid #d4e3f6 !important;
border-radius:14px !important;
background:#fbfdff !important;
padding:12px 13px !important;
outline:none !important;
}
.composer textarea:focus{
border-color:#83abf4 !important;
box-shadow:0 0 0 3px rgba(65,119,222,.09) !important;
}
.composer button{
border-radius:13px !important;
background:linear-gradient(135deg,#3475f4,#619aff) !important;
box-shadow:0 6px 15px rgba(51,110,224,.16) !important;
}
.modal{
border:1px solid #dce8f7 !important;
border-radius:22px !important;
box-shadow:0 24px 70px rgba(25,62,118,.18) !important;
}
.modal input,.modal select,.modal textarea{
border:1px solid #d5e3f4 !important;
border-radius:12px !important;
background:#fbfdff !important;
}
#avitoItemBar{
background:#fff !important;
border-bottom:1px solid #dce8f7 !important;
}
.avitoItemLink{
margin:8px 14px !important;
border:1px solid #dce8f7 !important;
border-radius:16px !important;
background:linear-gradient(100deg,#fff,#f5f9ff) !important;
box-shadow:0 5px 17px rgba(43,80,135,.06);
}
#pinnedMessagesBar{
background:#fffdf7 !important;
border-bottom:1px solid #f1e1b9 !important;
}
.loginWrap{
background:
radial-gradient(circle at 78% 18%,rgba(101,158,255,.20),transparent 28%),
linear-gradient(145deg,#f8fbff,#eaf3ff) !important;
}
.loginCard{
border:1px solid #dbe7f7 !important;
box-shadow:0 25px 70px rgba(35,76,140,.13) !important;
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{
background:#c8d9ef;
border-radius:10px;
border:2px solid transparent;
background-clip:padding-box;
}
::-webkit-scrollbar-track{background:transparent}
@media(max-width:800px){
main{grid-template-columns:1fr !important}
header{height:64px !important;min-height:64px !important;padding:0 12px !important}
.logo{font-size:18px !important}
.logo::before{width:31px;height:31px;border-radius:10px}
.logo span{font-size:13px !important}
}
/* Uply v0.9.4 - BRAND WORKSPACE UI */
:root{
--uply-bg:#eef5ff;
--uply-bg-2:#f8fbff;
--uply-panel:#ffffff;
--uply-panel-soft:#f7faff;
--uply-line:#dbe8f8;
--uply-line-2:#e8f0fb;
--uply-text:#173257;
--uply-muted:#7b90ad;
--uply-blue:#2f6fff;
--uply-blue-2:#79abff;
--uply-shadow-sm:0 4px 14px rgba(45,83,145,.06);
--uply-shadow-md:0 12px 32px rgba(33,72,136,.08);
--uply-shadow-lg:0 24px 60px rgba(28,64,120,.12);
}
/* Общая сцена */
html,body{
background:
radial-gradient(circle at 100% 0%, rgba(119,171,255,.16), transparent 24%),
radial-gradient(circle at 0% 100%, rgba(151,226,203,.11), transparent 20%),
linear-gradient(180deg,#f9fbff 0%,#eef5ff 100%) !important;
color:var(--uply-text) !important;
}
/* Чуть больше воздуха между зонами */
.app{
background:transparent !important;
}
/* Шапка */
header{
background:
linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,251,255,.98) 100%) !important;
border-bottom:1px solid var(--uply-line) !important;
box-shadow:0 8px 26px rgba(35,72,136,.05) !important;
}
.logo{
position:relative;
display:flex !important;
align-items:center !important;
gap:11px !important;
color:#113c85 !important;
font-weight:900 !important;
letter-spacing:-.02em !important;
}
.logo::before{
content:"U";
width:38px;
height:38px;
border-radius:13px;
display:inline-flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:20px;
font-weight:900;
background:linear-gradient(145deg,#2f6fff 0%,#7aaeff 100%);
box-shadow:0 10px 24px rgba(47,111,255,.22);
}
.logo span{
color:#7a8fae !important;
font-weight:700 !important;
}
.headerActions{
gap:10px !important;
}
.headerActions button{
min-height:43px !important;
border-radius:14px !important;
border:1px solid #d7e6fb !important;
box-shadow:var(--uply-shadow-sm) !important;
font-weight:700 !important;
}
.headerActions button:hover{
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(46,91,167,.10) !important;
}
.headerActions button:not(.secondary):not(.ghost){
background:linear-gradient(135deg,#3777f5,#609bff) !important;
color:#fff !important;
}
.headerActions .secondary{
background:#edf4ff !important;
color:#2c60be !important;
}
.headerActions .ghost{
background:#f6f9fd !important;
color:#71829f !important;
}
/* Панель фильтров каналов */
.filters{
position:relative;
background:rgba(250,252,255,.95) !important;
border-bottom:1px solid var(--uply-line) !important;
box-shadow:0 3px 10px rgba(46,81,135,.03);
gap:9px !important;
}
.filter{
min-height:39px !important;
border-radius:14px !important;
border:1px solid #d9e6f8 !important;
box-shadow:none !important;
font-weight:700 !important;
transition:.16s ease !important;
}
.filter:hover{
transform:translateY(-1px);
box-shadow:0 8px 16px rgba(44,88,158,.08) !important;
}
.filter.active{
background:#fff !important;
border-color:#82abfb !important;
box-shadow:0 8px 18px rgba(58,109,207,.12) !important;
}
/* Цвета по каналам — при стандартном порядке вкладок */
.filters .filter:nth-child(2),
.filter.ch1{
background:linear-gradient(180deg,#eef4ff 0%,#f8fbff 100%) !important;
color:#2f68d0 !important;
}
.filters .filter:nth-child(3),
.filter.ch2{
background:linear-gradient(180deg,#f5efff 0%,#fcfbff 100%) !important;
color:#7b52d5 !important;
}
.filters .filter:nth-child(4),
.filter.ch3{
background:linear-gradient(180deg,#fff0f6 0%,#fffafd 100%) !important;
color:#d24b7d !important;
}
.filters .filter:nth-child(5),
.filter.ch4{
background:linear-gradient(180deg,#edf5ff 0%,#f8fbff 100%) !important;
color:#2e67bf !important;
}
.filters .filter:nth-child(6),
.filter.ch5{
background:linear-gradient(180deg,#edfdf3 0%,#fbfffd 100%) !important;
color:#1f8d56 !important;
}
.filters .filter:nth-child(7){
background:linear-gradient(180deg,#f2efff 0%,#fcfbff 100%) !important;
color:#6b56cb !important;
}
/* Левая колонка — зона работы со списком */
aside{
background:
linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(249,252,255,.96) 100%) !important;
border-right:1px solid var(--uply-line) !important;
}
.sideTop{
padding:12px 12px 8px !important;
border-bottom:1px solid rgba(219,232,248,.72) !important;
background:linear-gradient(180deg,#fbfdff 0%,#f6faff 100%) !important;
}
.caption{
color:#6f87ab !important;
font-weight:800 !important;
letter-spacing:.04em !important;
}
/* Поиск делаем заметнее */
.chatSearch{
height:44px !important;
border-radius:14px !important;
border:1px solid #d7e5f9 !important;
background:#fff !important;
box-shadow:0 4px 12px rgba(52,91,148,.04) !important;
color:#1e3458 !important;
}
.chatSearch::placeholder{
color:#92a6c3 !important;
}
.chatSearch:focus{
border-color:#87adf7 !important;
box-shadow:0 0 0 3px rgba(67,121,224,.10), 0 4px 14px rgba(52,91,148,.06) !important;
}
/* Кнопка обновления */
.sideTop button,
.refreshBtn{
border-radius:12px !important;
border:1px solid #d6e5fa !important;
background:#ffffff !important;
box-shadow:var(--uply-shadow-sm) !important;
}
/* Карточки чатов */
.chatList{
padding:8px 8px 12px !important;
gap:6px !important;
}
.chatRow{
position:relative;
margin:0 0 7px !important;
padding:11px 12px !important;
border-radius:16px !important;
border:1px solid transparent !important;
background:rgba(255,255,255,.74) !important;
box-shadow:none !important;
transition:.16s ease !important;
}
.chatRow:hover{
background:#fff !important;
border-color:#dce8f7 !important;
box-shadow:var(--uply-shadow-md) !important;
}
.chatRow.active{
background:linear-gradient(180deg,#ffffff 0%,#f2f7ff 100%) !important;
border-color:#b9d2fb !important;
box-shadow:0 10px 24px rgba(45,90,164,.12) !important;
}
.chatRow.active::before{
content:"";
position:absolute;
left:-1px;
top:10px;
bottom:10px;
width:4px;
border-radius:4px;
background:linear-gradient(180deg,#4b87ff 0%,#7eb0ff 100%);
}
.chatRow.pinnedChat{
background:linear-gradient(180deg,#fffef7 0%,#f9fbff 100%) !important;
border-color:#efe0af !important;
}
.avatar{
width:48px !important;
height:48px !important;
border-radius:50% !important;
box-shadow:0 5px 15px rgba(46,79,130,.10) !important;
}
.chatTop b{
color:#183152 !important;
font-size:15px !important;
}
.chatTop small{
color:#8a9cb6 !important;
font-size:12px !important;
}
.preview{
color:#758aa8 !important;
line-height:1.35 !important;
}
/* Метка канала делаем понятнее */
.channelTag,
.chatRow .subline,
.chatRow .metaLine{
font-weight:800 !important;
letter-spacing:0 !important;
}
/* Меню справа в карточке */
.rowMenuBtn{
width:30px !important;
height:30px !important;
border-radius:10px !important;
border:1px solid #e1ebf9 !important;
background:#f6f9fd !important;
color:#7a8faa !important;
}
/* Правая панель */
.conversation{
background:
radial-gradient(circle at 85% 12%, rgba(123,170,255,.11), transparent 26%),
linear-gradient(180deg,#f0f6ff 0%,#f9fbff 100%) !important;
}
.empty{
color:#7f95b2 !important;
font-size:15px !important;
}
/* Шапка выбранного чата */
.chatHeader{
background:rgba(255,255,255,.95) !important;
border-bottom:1px solid var(--uply-line) !important;
box-shadow:0 4px 12px rgba(34,72,132,.04) !important;
}
.chatHeader strong{
color:#183255 !important;
font-size:18px !important;
font-weight:800 !important;
}
.replyVia{
background:#edf4ff !important;
color:#2d61bd !important;
border:1px solid #d7e6fb !important;
border-radius:14px !important;
font-weight:700 !important;
}
/* Закреплённые сообщения */
#pinnedMessagesBar{
background:linear-gradient(180deg,#fffdf8 0%,#fff7e8 100%) !important;
border-bottom:1px solid #f1dfaa !important;
}
#pinnedMessagesBar .pinItem{
border-radius:12px !important;
background:rgba(255,255,255,.76) !important;
border:1px solid #f2e4bc !important;
}
/* Карточка объявления Avito */
#avitoItemBar{
background:rgba(255,255,255,.94) !important;
border-bottom:1px solid var(--uply-line) !important;
}
.avitoItemLink{
border-radius:18px !important;
border:1px solid #dce8f8 !important;
background:linear-gradient(100deg,#fff 0%,#f4f8ff 100%) !important;
box-shadow:var(--uply-shadow-sm) !important;
}
/* Сообщения — более читаемо для работы */
.messages{
padding:22px !important;
gap:11px !important;
}
.msg{
border-radius:18px !important;
box-shadow:0 6px 18px rgba(39,73,126,.06) !important;
border:1px solid #e2ebf8 !important;
}
.msg.in{
background:#fff !important;
}
.msg.out{
background:linear-gradient(180deg,#dcebff 0%,#eef6ff 100%) !important;
border-color:#caddfa !important;
}
.msg .meta,
.msg time,
.msg small{
color:#8094af !important;
}
/* Composer */
.composer{
background:rgba(255,255,255,.96) !important;
border-top:1px solid var(--uply-line) !important;
gap:10px !important;
}
.composer textarea{
min-height:48px !important;
border-radius:15px !important;
border:1px solid #d5e3f6 !important;
background:#fbfdff !important;
color:#1a3255 !important;
box-shadow:inset 0 1px 2px rgba(0,0,0,.02) !important;
}
.composer textarea:focus{
border-color:#86acf6 !important;
box-shadow:0 0 0 3px rgba(67,120,224,.10) !important;
}
.composer button{
border-radius:14px !important;
font-weight:800 !important;
box-shadow:0 8px 18px rgba(51,110,224,.16) !important;
}
.composer button.ghost,
.attachBtn{
background:#f2f6fd !important;
color:#5e7598 !important;
border:1px solid #dce8f8 !important;
}
/* Модалки и формы */
.modal{
border-radius:24px !important;
border:1px solid #dce8f8 !important;
box-shadow:var(--uply-shadow-lg) !important;
}
.modal input,
.modal select,
.modal textarea{
border:1px solid #d8e6f7 !important;
border-radius:13px !important;
background:#fbfdff !important;
}
.modal label{
color:#284264 !important;
font-weight:700 !important;
}
/* Списки сотрудников / таблицы если есть */
.listCard,
.userCard,
.accessCard,
.tableCard{
border-radius:18px !important;
border:1px solid #dce8f8 !important;
background:#fff !important;
box-shadow:var(--uply-shadow-sm) !important;
}
/* Небольшой акцент на unread */
.unread,
.badge,
.counter{
box-shadow:0 6px 16px rgba(47,111,255,.20) !important;
font-weight:800 !important;
}
/* Скролл */
::-webkit-scrollbar{
width:10px;
height:10px;
}
::-webkit-scrollbar-thumb{
background:#c7d8ef;
border-radius:10px;
border:2px solid transparent;
background-clip:padding-box;
}
::-webkit-scrollbar-track{
background:transparent;
}
@media (max-width: 800px){
header{
padding:0 12px !important;
}
.logo{
font-size:19px !important;
}
.logo::before{
width:33px;
height:33px;
border-radius:11px;
font-size:18px;
}
.headerActions{
gap:8px !important;
}
}
/* === UPLY_NOTIFICATIONS_V095_FIXED: уведомление = нужен ответ === */
.chatRow.needsReply{
position:relative;
background:linear-gradient(90deg,rgba(45,108,223,.08),rgba(255,255,255,0) 72%) !important;
}
.chatRow.needsReply::before{
content:"";
position:absolute;
left:0;
top:8px;
bottom:8px;
width:3px;
border-radius:0 4px 4px 0;
background:#2f6fdf;
}
.noReplyInlineWrap{
display:flex;
justify-content:flex-start;
width:100%;
margin-top:-2px;
padding-left:4px;
}
.noReplyBtn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:8px 14px !important;
white-space:nowrap;
border-radius:12px !important;
background:linear-gradient(180deg,#5f8fff 0%,#3f73eb 100%) !important;
color:#ffffff !important;
border:1px solid #3f73eb !important;
box-shadow:0 8px 18px rgba(51,110,224,.18) !important;
font-weight:800 !important;
}
.noReplyBtn:hover{
background:linear-gradient(180deg,#6b99ff 0%,#477af0 100%) !important;
color:#ffffff !important;
}
.noReplyBtn:disabled{
opacity:.7;
cursor:wait;
}
.noReplyBtn.hidden{
display:none !important;
}
@media (max-width: 980px){
.noReplyInlineWrap{
padding-left:0;
}
.noReplyBtn{
font-size:12px;
padding:7px 11px !important;
}
}
/* UPLY_NOTIFICATIONS_V096_INLINE_BUTTON */
/* UPLY_SPEED_V097: фоновые обновления не очищают список чатов */
.chatList .loading{padding:22px 18px;color:#8396b3;}
/* === UPLY_CHAT_PREVIEWS_V101 === */
.preview{
display:block !important;
min-width:0;
}
.previewWho{
display:inline;
margin-right:4px;
font-weight:900 !important;
}
.previewWho.previewMine{
color:#3f73df !important;
}
.previewWho.previewTheirs{
color:#607590 !important;
}
.previewText{
color:#758aa8;
}
/* === UPLY_MAX_SWITCH_PINS_V103 === */
#pinnedMessagesBar{
flex:0 0 auto !important;
position:relative !important;
z-index:20 !important;
border-radius:0 !important;
margin:0 !important;
box-shadow:0 5px 14px rgba(49,85,137,.06) !important;
}
.chatMessagesLoading{
margin:auto;
padding:18px;
color:#7b91b1;
}
/* === UPLY_ADMIN_CLEAR_V104 === */
.clearChannelNotificationsBtn{
flex:0 0 auto;
min-height:30px;
padding:6px 10px !important;
border-radius:10px !important;
background:#edf8f3 !important;
color:#087d4e !important;
border:1px solid #cdebdc !important;
box-shadow:none !important;
font-size:11px !important;
font-weight:900 !important;
white-space:nowrap;
}
.clearChannelNotificationsBtn:hover{
background:#def3e8 !important;
}
.clearChannelNotificationsBtn:disabled{
opacity:.65;
cursor:wait;
}
@media(max-width:800px){
.clearChannelNotificationsBtn{
padding:5px 8px !important;
font-size:10px !important;
}
}
/* === UPLY_MESSAGE_EDIT_DELETE_V105 === */
.msgActions{
position:absolute;
top:5px;
right:5px;
display:flex;
align-items:center;
gap:4px;
opacity:0;
transition:opacity .12s ease;
z-index:3;
}
.msg:hover .msgActions,
.msg.messagePinned .msgActions,
.msgActions:focus-within{
opacity:1;
}
.msgActions .msgActionBtn,
.msgActions .msgPinBtn{
position:static !important;
width:26px !important;
height:26px !important;
min-width:26px !important;
padding:0 !important;
border-radius:8px !important;
border:1px solid rgba(190,207,231,.9) !important;
background:rgba(255,255,255,.92) !important;
color:#6e83a1 !important;
font-size:12px !important;
line-height:1 !important;
opacity:1 !important;
box-shadow:0 3px 10px rgba(40,72,120,.08) !important;
}
.msgActions .msgActionBtn:hover,
.msgActions .msgPinBtn:hover{
background:#fff !important;
color:#2f6fdf !important;
}
.msgActions .msgDeleteBtn:hover{
color:#c83d55 !important;
border-color:#f0c5cd !important;
}
.msgActions .msgPinBtn.active{
color:#1f5fd7 !important;
background:#f4f7ff !important;
}
.messageEditText{
width:100%;
box-sizing:border-box;
resize:vertical;
min-height:110px;
margin:6px 0 12px;
padding:12px 13px;
border:1px solid #d8e6f7;
border-radius:13px;
background:#fbfdff;
color:#1a3255;
font:inherit;
}
.messageEditText:focus{
outline:none;
border-color:#86acf6;
box-shadow:0 0 0 3px rgba(67,120,224,.10);
}
@media(max-width:800px){
.msgActions{opacity:1;}
}
/* === UPLY_PEER_EDITS_DELETED_V106 === */
.msg.peerDeletedMessage{
border-style:dashed !important;
opacity:.88;
}
.msg.peerDeletedMessage .msgText{
text-decoration:line-through;
text-decoration-thickness:1.5px;
opacity:.62;
}
.peerMutation{
margin-top:6px;
font-size:10px;
font-weight:850;
letter-spacing:.01em;
}
.peerMutationDeleted{
color:#c45a68;
}
.peerMutationEdited{
color:#b57a22;
}
.peerOriginalText{
margin-top:4px;
padding:5px 7px;
border-radius:8px;
background:rgba(122,142,171,.08);
color:#7a8eab;
font-size:10px;
line-height:1.35;
white-space:pre-wrap;
overflow-wrap:anywhere;
}
/* === UPLY_REACTIONS_V108 === */
.msg{position:relative;}
.reactionPicker{
position:absolute;
z-index:30;
bottom:calc(100% - 8px);
left:12px;
display:none;
align-items:center;
gap:3px;
padding:6px;
border:1px solid #dbe6f5;
border-radius:16px;
background:#fff;
box-shadow:0 12px 32px rgba(40,70,110,.18);
white-space:nowrap;
}
.reactionPicker.open{display:flex;}
.reactionChoice{
width:36px !important;
height:36px !important;
min-width:36px !important;
padding:0 !important;
border:0 !important;
border-radius:11px !important;
background:transparent !important;
box-shadow:none !important;
font-size:20px !important;
line-height:1 !important;
cursor:pointer;
}
.reactionChoice:hover{background:#eef4ff !important;transform:translateY(-1px);}
.reactionChoice:disabled{opacity:.55;cursor:wait;}
.myReactionChip{
display:inline-flex;
align-items:center;
justify-content:center;
width:31px;
height:27px;
margin-top:6px;
padding:0 !important;
border:1px solid #cdddf4 !important;
border-radius:12px !important;
background:#f6f9ff !important;
box-shadow:none !important;
font-size:16px !important;
cursor:pointer;
}
.myReactionChip:hover{background:#eaf2ff !important;}
.myReactionChip.hidden{display:none !important;}
.msgReactBtn{font-size:15px !important;}
@media (max-width:700px){
.reactionPicker{max-width:calc(100vw - 38px);overflow-x:auto;}
.reactionChoice{width:34px !important;height:34px !important;min-width:34px !important;}
}
/* === UPLY_BRAND_CLIPBOARD_LIGHTBOX_V109 === */
.imagePreviewOpen{
display:block !important;
width:auto !important;
max-width:100% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:11px !important;
background:transparent !important;
box-shadow:none !important;
color:inherit !important;
cursor:zoom-in !important;
overflow:hidden;
}
.imagePreviewOpen:hover{
background:transparent !important;
box-shadow:0 0 0 3px rgba(63,115,223,.10) !important;
}
.imageViewer{
position:fixed;
inset:0;
z-index:1000;
display:flex;
align-items:center;
justify-content:center;
padding:28px;
background:rgba(12,23,42,.76);
backdrop-filter:blur(5px);
}
.imageViewer.hidden{
display:none !important;
}
.imageViewerPanel{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:min(1180px,96vw);
height:min(860px,92vh);
padding:18px 18px 12px;
border:1px solid rgba(255,255,255,.18);
border-radius:20px;
background:rgba(20,31,52,.94);
box-shadow:0 28px 80px rgba(0,0,0,.36);
}
.imageViewerImg{
display:block;
max-width:100%;
max-height:calc(100% - 40px);
object-fit:contain;
border-radius:12px;
background:rgba(255,255,255,.04);
}
.imageViewerClose{
position:absolute !important;
top:12px !important;
right:12px !important;
z-index:2;
display:flex !important;
align-items:center;
justify-content:center;
width:42px !important;
height:42px !important;
min-width:42px !important;
padding:0 !important;
border:1px solid rgba(255,255,255,.20) !important;
border-radius:14px !important;
background:rgba(10,20,36,.72) !important;
color:#fff !important;
box-shadow:none !important;
font-size:30px !important;
font-weight:400 !important;
line-height:1 !important;
}
.imageViewerClose:hover{
background:rgba(35,55,85,.95) !important;
}
.imageViewerCaption{
min-height:22px;
max-width:100%;
margin-top:9px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#dbe7fa;
font-size:12px;
}
body.imageViewerOpen{
overflow:hidden;
}
@media(max-width:700px){
.imageViewer{
padding:10px;
}
.imageViewerPanel{
width:100%;
height:94vh;
padding:10px;
border-radius:16px;
}
.imageViewerClose{
top:8px !important;
right:8px !important;
}
}
/* === UPLY_COPY_IMAGES_V110 === */
.imageViewerCopy{
position:absolute !important;
top:12px !important;
right:66px !important;
z-index:2;
min-height:42px !important;
padding:0 15px !important;
border:1px solid rgba(255,255,255,.20) !important;
border-radius:14px !important;
background:rgba(10,20,36,.78) !important;
color:#fff !important;
box-shadow:none !important;
font-weight:800 !important;
cursor:pointer;
}
.imageViewerCopy:hover{
background:rgba(39,75,132,.92) !important;
}
.imageViewerCopy:disabled{
opacity:.6;
cursor:wait;
}
@media (max-width:700px){
.imageViewerCopy{
right:62px !important;
padding:0 10px !important;
font-size:12px !important;
}
}
/* === UPLY_IMAGES_FIX_V111 === */
.messageImage{
user-select:none;
-webkit-user-drag:none;
}
.imagePreviewOpen{
touch-action:manipulation;
}
/* === UPLY_IMAGE_DRAFTS_V112 === */
.imageDraftTray{
flex:0 0 auto;
padding:10px 14px 8px;
border-top:1px solid #dce7f6;
background:rgba(255,255,255,.98);
}
.imageDraftTray.hidden{display:none !important;}
.imageDraftHeader{
display:flex;align-items:center;justify-content:space-between;
gap:12px;margin-bottom:8px;
}
.imageDraftHeader > div{
min-width:0;display:flex;align-items:baseline;gap:8px;
}
.imageDraftHeader strong{color:#233f66;font-size:13px;}
.imageDraftHeader span{color:#7d91ad;font-size:11px;}
.imageDraftClear{
flex:0 0 auto;border:0 !important;background:transparent !important;
color:#7186a4 !important;padding:4px 7px !important;
box-shadow:none !important;font-size:11px !important;cursor:pointer;
}
.imageDraftClear:hover{color:#d34c65 !important;}
.imageDraftList{
display:flex;align-items:center;gap:9px;overflow-x:auto;
padding:2px 2px 4px;
}
.imageDraftItem{
position:relative;flex:0 0 82px;width:82px;height:82px;overflow:visible;
}
.imageDraftPreview{
width:82px !important;height:82px !important;padding:0 !important;
border:1px solid #cfddf1 !important;border-radius:14px !important;
background:#eef4fb !important;box-shadow:none !important;
overflow:hidden;cursor:pointer;
}
.imageDraftPreview img{
display:block;width:100%;height:100%;object-fit:cover;
}
.imageDraftRemove{
position:absolute;top:-7px;right:-7px;z-index:2;
display:flex;align-items:center;justify-content:center;
width:24px !important;height:24px !important;min-width:24px !important;
padding:0 !important;border:2px solid #fff !important;
border-radius:50% !important;background:#294d7e !important;color:#fff !important;
box-shadow:0 3px 10px rgba(25,50,85,.20) !important;
font-size:17px !important;line-height:1 !important;cursor:pointer;
}
.imageDraftRemove:hover{background:#d9485f !important;}
.imageDraftNumber{
position:absolute;left:6px;bottom:6px;min-width:20px;height:20px;
padding:0 5px;display:flex;align-items:center;justify-content:center;
border-radius:9px;background:rgba(14,31,56,.75);color:#fff;
font-size:10px;font-weight:800;pointer-events:none;
}
.imageDraftAddMore{
flex:0 0 58px;width:58px !important;height:58px !important;min-width:58px !important;
padding:0 !important;border:1px dashed #aac3e7 !important;
border-radius:14px !important;background:#f6f9fe !important;
color:#4e78bc !important;box-shadow:none !important;
font-size:25px !important;cursor:pointer;
}
.imageDraftAddMore:hover{
background:#edf4ff !important;border-color:#78a2df !important;
}
@media (max-width:700px){
.imageDraftHeader > div{display:block;}
.imageDraftHeader span{display:block;margin-top:2px;}
.imageDraftItem,.imageDraftPreview{
width:72px !important;height:72px !important;flex-basis:72px;
}
}
/* === UPLY_PASTE_STICKERS_V113 === */
.v113ImageDraftTray{
flex:0 0 auto;
padding:11px 16px 10px;
border-top:1px solid #d8e5f5;
background:#fff;
}
.v113ImageDraftTray.hidden{display:none!important;}
.v113DraftHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;}
.v113DraftHead>div{display:flex;align-items:baseline;gap:10px;min-width:0;}
.v113DraftHead b{font-size:13px;color:#213d62;}
.v113DraftHead span{font-size:11px;color:#7d91ad;}
.v113DraftHead button{border:0!important;background:transparent!important;color:#7588a3!important;box-shadow:none!important;padding:4px 7px!important;font-size:11px!important;}
.v113DraftHead button:hover{color:#d04c62!important;}
.v113DraftRow{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:3px 3px 5px;}
.v113DraftItem{position:relative;flex:0 0 92px;width:92px;height:92px;}
.v113DraftPreview{width:92px!important;height:92px!important;padding:0!important;border:2px solid #cbdcf3!important;border-radius:15px!important;background:#eef4fb!important;box-shadow:none!important;overflow:hidden;}
.v113DraftPreview img{display:block;width:100%;height:100%;object-fit:cover;}
.v113DraftRemove{position:absolute;right:-7px;top:-7px;z-index:3;width:25px!important;height:25px!important;min-width:25px!important;padding:0!important;border:2px solid #fff!important;border-radius:50%!important;background:#294e7f!important;color:#fff!important;box-shadow:0 3px 9px rgba(20,45,80,.24)!important;font-size:18px!important;line-height:1!important;}
.v113DraftRemove:hover{background:#d74d63!important;}
.v113DraftItem>span{position:absolute;left:7px;bottom:7px;min-width:21px;height:21px;padding:0 5px;border-radius:9px;background:rgba(15,31,53,.76);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;pointer-events:none;}
.v113AddMore{flex:0 0 62px;width:62px!important;height:62px!important;min-width:62px!important;padding:0!important;border:1px dashed #9ebbe4!important;border-radius:15px!important;background:#f6f9fe!important;color:#4775ba!important;box-shadow:none!important;font-size:27px!important;}
.v113AddMore:hover{background:#edf4ff!important;}
.stickerItem{background:transparent!important;border:0!important;box-shadow:none!important;margin:0!important;}
.stickerPreviewOpen{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
.stickerImage,.stickerVideo{display:block;max-width:260px;max-height:260px;width:auto;height:auto;object-fit:contain;background:transparent!important;border-radius:0!important;}
.stickerVideo{pointer-events:none;}
@media(max-width:700px){
.v113DraftHead>div{display:block;}
.v113DraftHead span{display:block;margin-top:2px;}
.v113DraftItem,.v113DraftPreview{width:78px!important;height:78px!important;flex-basis:78px;}
.stickerImage,.stickerVideo{max-width:210px;max-height:210px;}
}
/* === UPLY_VOICE_TRANSCRIPTION_V114 === */
.voiceTranscriptActions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
margin-top:7px;
}
.voiceTranscribeBtn,.voiceTranscriptCopyBtn{
min-height:32px !important;
padding:6px 10px !important;
border:1px solid #ccdcf2 !important;
border-radius:10px !important;
background:#f5f9ff !important;
color:#3565aa !important;
box-shadow:none !important;
font-size:11px !important;
font-weight:800 !important;
cursor:pointer;
}
.voiceTranscribeBtn:hover,.voiceTranscriptCopyBtn:hover{
background:#eaf2ff !important;
}
.voiceTranscribeBtn:disabled,.voiceTranscriptCopyBtn:disabled{
opacity:.65;
cursor:wait;
}
.voiceTranscriptCopyBtn[hidden]{display:none !important;}
/* UPLY_VOICE_TRANSCRIPT_COPY_V93: selection belongs to the transcript, not the message menu. */
#messages > .msg .voiceTranscript{
user-select:text !important;
-webkit-user-select:text !important;
-webkit-touch-callout:default !important;
cursor:text;
}
.voiceTranscript{
margin-top:7px;
padding:9px 11px;
border-left:3px solid #6b98ea;
border-radius:0 10px 10px 0;
background:#f7faff;
color:#2f486b;
font-size:12px;
line-height:1.45;
white-space:pre-wrap;
overflow-wrap:anywhere;
}
.voiceTranscript.hidden{
display:none !important;
}
.voiceTranscriptLoading{
color:#8092ad;
font-style:italic;
}
/* === UPLY_COMPOSER_EMOJI_V116 === */
.composerEmojiWrap{
position:relative;
flex:0 0 auto;
display:flex;
align-items:stretch;
}
.composerEmojiBtn{
min-width:48px !important;
width:48px !important;
padding:0 !important;
border:1px solid #cbdcf2 !important;
border-radius:14px !important;
background:#f4f8ff !important;
color:#294f85 !important;
box-shadow:none !important;
font-size:19px !important;
cursor:pointer;
}
.composerEmojiBtn:hover{
background:#e9f1ff !important;
}
.composerEmojiPicker{
position:absolute;
z-index:80;
right:0;
bottom:calc(100% + 9px);
display:none;
grid-template-columns:repeat(6,38px);
gap:4px;
padding:8px;
width:max-content;
border:1px solid #d5e2f3;
border-radius:15px;
background:#fff;
box-shadow:0 14px 34px rgba(34,62,100,.20);
}
.composerEmojiPicker.open{
display:grid;
}
.composerEmojiChoice{
width:38px !important;
height:38px !important;
min-width:38px !important;
padding:0 !important;
border:0 !important;
border-radius:10px !important;
background:transparent !important;
box-shadow:none !important;
font-size:20px !important;
line-height:1 !important;
cursor:pointer;
}
.composerEmojiChoice:hover{
background:#eef4ff !important;
transform:translateY(-1px);
}
@media(max-width:700px){
.composerEmojiPicker{
grid-template-columns:repeat(5,36px);
max-width:calc(100vw - 35px);
overflow:auto;
}
.composerEmojiChoice{
width:36px !important;
height:36px !important;
min-width:36px !important;
}
.composerEmojiBtn{
min-width:44px !important;
width:44px !important;
}
}
/* === UPLY_ATTACH_ALIGN_V117 === */
/* Скрепка, emoji и кнопка отправки стоят на одной линии и одной высоты */
.composer{
align-items:stretch !important;
}
.composer > .attachBtn{
align-self:stretch !important;
height:auto !important;
min-height:48px !important;
width:48px !important;
min-width:48px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.composerEmojiWrap{
align-self:stretch !important;
}
.composerEmojiBtn{
height:100% !important;
min-height:48px !important;
}
@media(max-width:700px){
.composer > .attachBtn{
width:44px !important;
min-width:44px !important;
}
}
/* === UPLY_REACTIONS_ATTACH_V118 === */
/* Поле ввода и все кнопки справа визуально стоят на одной линии. */
.composer{
align-items:stretch !important;
}
/* Emoji */
.composerEmojiWrap{
align-self:stretch !important;
height:auto !important;
}
.composerEmojiBtn{
height:100% !important;
min-height:48px !important;
align-self:stretch !important;
}
/* Скрепка — ровно между emoji и "Отправить". */
.composer > .attachBtn{
align-self:stretch !important;
height:auto !important;
min-height:48px !important;
width:48px !important;
min-width:48px !important;
padding:0 !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
}
/* Отправить тоже не должен визуально уезжать вверх/вниз. */
.composer > #sendBtn{
align-self:stretch !important;
height:auto !important;
min-height:48px !important;
box-sizing:border-box !important;
}
@media(max-width:700px){
.composer > .attachBtn{
width:44px !important;
min-width:44px !important;
}
}
/* === UPLY_ANDROID_MOBILE_V119 === */
.mobileChatBackBtn{display:none;}
@media(max-width:800px){
html,body{overscroll-behavior:none;}
.app{min-height:100dvh;height:100dvh;}
header{
height:56px;
min-height:56px;
padding:0 9px;
gap:8px;
}
header .logo{flex:0 0 auto;font-size:20px;}
header .logo span{display:none;}
.headerActions{
min-width:0;
flex:1;
justify-content:flex-end;
overflow-x:auto;
overflow-y:hidden;
gap:5px;
scrollbar-width:none;
}
.headerActions::-webkit-scrollbar{display:none;}
.headerActions button{
flex:0 0 auto;
white-space:nowrap;
padding:8px 10px;
font-size:12px;
}
.filters{
height:48px;
min-height:48px;
padding:7px 8px;
gap:6px;
scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none;}
.filters .filter{padding:8px 11px;font-size:12px;}
main{grid-template-columns:1fr;}
aside{width:100%;border-right:0;}
.conversation{
position:fixed;
inset:104px 0 0 0;
z-index:40;
}
.conversation:has(.empty:not(.hidden)){display:none;}
.chatHeader{
height:60px;
min-height:60px;
padding:0 8px;
gap:7px;
}
.mobileChatBackBtn{
display:flex;
flex:0 0 38px;
width:38px;
height:38px;
min-width:38px;
padding:0;
align-items:center;
justify-content:center;
border-radius:12px;
background:#eef4fd;
color:#315d9f;
box-shadow:none;
font-size:32px;
font-weight:500;
line-height:1;
}
.chatHeader > div:first-of-type{min-width:0;flex:1;}
.chatHeader strong{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:15px;
}
.chatHeaderActions{
flex:0 0 auto;
margin:0 2px;
gap:4px;
}
.chatActionBtn{width:34px;height:34px;}
.messages{padding:10px 8px;gap:7px;}
.msg{max-width:91%;}
.composer{
gap:6px;
padding:8px;
padding-bottom:max(8px,env(safe-area-inset-bottom));
}
.composer textarea{min-height:46px;padding:10px;}
.composerEmojiBtn,
.composer > .attachBtn{
width:44px !important;
min-width:44px !important;
}
.composer > #sendBtn{
padding-left:12px;
padding-right:12px;
font-size:13px;
}
.pinnedMessagesBar{padding:6px 9px;}
.toast{
top:12px;
right:10px;
left:10px;
max-width:none;
}
}
.uplyAndroidApp button,
.uplyAndroidApp .chatRow{
-webkit-tap-highlight-color:transparent;
}
/* === UPLY_ANDROID_PUSH_ADMIN_MESSAGES_V120 === */
@media(max-width:800px){
.msg.out .msgActions{
opacity:1 !important;
pointer-events:auto !important;
}
}
/* UPLY_ACCOUNT_COLORS_FORWARD_V124 */
[data-tg-delete]{
display:none !important;
}
.filters .filter.ch1{
--uply-filter-color:#2563eb;
background:linear-gradient(180deg,#eaf1ff,#f7faff) !important;
color:#1f5fd1 !important;
border-color:#b8cdf8 !important;
}
.filters .filter.ch2{
--uply-filter-color:#7c3aed;
background:linear-gradient(180deg,#f2eaff,#fbf9ff) !important;
color:#7034d1 !important;
border-color:#d4bdf7 !important;
}
.filters .filter.ch3{
--uply-filter-color:#e11d48;
background:linear-gradient(180deg,#ffeaf0,#fff8fa) !important;
color:#cc1740 !important;
border-color:#f5b8c8 !important;
}
.filters .filter.ch4{
--uply-filter-color:#0f9f8f;
background:linear-gradient(180deg,#e6fbf7,#f7fffd) !important;
color:#087f72 !important;
border-color:#a8e2d9 !important;
}
.filters .filter.ch5{
--uply-filter-color:#ca8a04;
background:linear-gradient(180deg,#fff7db,#fffdf5) !important;
color:#a86f00 !important;
border-color:#efd88c !important;
}
.filters .filter.vkSource{
--uply-filter-color:#0284c7;
background:linear-gradient(180deg,#e6f6ff,#f7fcff) !important;
color:#0877ad !important;
border-color:#acdbee !important;
}
.filters .filter.maxSource{
--uply-filter-color:#16a34a;
background:linear-gradient(180deg,#e8f9ee,#f8fff9) !important;
color:#12833d !important;
border-color:#afe1bf !important;
}
.filters .filter.avitoSource{
--uply-filter-color:#f97316;
background:linear-gradient(180deg,#fff0e5,#fffaf6) !important;
color:#d95e0c !important;
border-color:#f6c29d !important;
}
.filters .filter.ch1.active,
.filters .filter.ch2.active,
.filters .filter.ch3.active,
.filters .filter.ch4.active,
.filters .filter.ch5.active,
.filters .filter.vkSource.active,
.filters .filter.maxSource.active,
.filters .filter.avitoSource.active{
border-color:var(--uply-filter-color) !important;
box-shadow:
0 0 0 2px color-mix(in srgb,var(--uply-filter-color) 14%,transparent),
0 8px 18px color-mix(in srgb,var(--uply-filter-color) 12%,transparent) !important;
}
.msgActions .msgForwardBtn:hover{
color:#2563eb !important;
border-color:#b9cdf4 !important;
}
.uplyForwardModal{
width:620px !important;
}
.uplyForwardChat{
width:100%;
min-height:170px;
border:1px solid #d6dfec;
border-radius:10px;
padding:8px;
background:#fff;
}
.uplyForwardText{
width:100%;
min-height:110px;
resize:vertical;
border:1px solid #d6dfec;
border-radius:10px;
padding:11px;
box-sizing:border-box;
}
.uplyForwardTitle{
margin-top:14px;
margin-bottom:7px;
font-size:12px;
font-weight:800;
color:#425a7c;
}
.uplyForwardAttachments{
display:flex;
flex-direction:column;
gap:7px;
max-height:210px;
overflow:auto;
}
.uplyForwardAttachment{
display:flex !important;
align-items:center;
gap:9px;
margin:0 !important;
padding:9px 10px;
border:1px solid #e0e9f5;
border-radius:11px;
background:#f8fbff;
cursor:pointer;
}
.uplyForwardAttachment.disabled{
opacity:.48;
cursor:not-allowed;
}
.uplyForwardAttachment input{
width:17px !important;
height:17px;
flex:0 0 auto;
}
.uplyForwardIcon{
font-size:20px;
flex:0 0 auto;
}
.uplyForwardAttachmentText{
display:flex;
flex-direction:column;
min-width:0;
}
.uplyForwardAttachmentText b{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.uplyForwardAttachmentText small{
color:#7b8ba3;
margin-top:2px;
}
.uplyForwardNote{
margin-top:10px;
padding:9px 10px;
border-radius:10px;
background:#f2f7ff;
color:#627997;
font-size:11px;
line-height:1.45;
}
@media(max-width:800px){
.uplyForwardModal{
width:94vw !important;
}
.uplyForwardChat{
min-height:125px;
}
}
/* UPLY_WORKSPACE_V130 */
:root{--uply-mobile-accent:#6d4aff}
/* Faster visual account switching: each source has a persistent color. */
.filters .filter{transition:background .12s ease,border-color .12s ease,transform .12s ease,box-shadow .12s ease}
.filters .filter:active{transform:scale(.98)}
.filters .filter.vkSource{background:#e8f6ff!important;color:#0878b8!important;border-color:#abd9ee!important}
.filters .filter.maxSource{background:#e9f9ef!important;color:#128040!important;border-color:#b0e2c1!important}
.filters .filter.avitoSource{background:#fff0e6!important;color:#dc6414!important;border-color:#f7c39f!important}
.filters .filter.ch1{background:#eaf1ff!important;color:#205fd0!important;border-color:#bad0fb!important}
.filters .filter.ch2{background:#f3ebff!important;color:#7437d3!important;border-color:#d6c1f6!important}
.filters .filter.ch3{background:#ffeaf0!important;color:#ce1d46!important;border-color:#f5b9c9!important}
.filters .filter.ch4{background:#e8fbf7!important;color:#0b8275!important;border-color:#aae2da!important}
.filters .filter.ch5{background:#fff7dc!important;color:#a97300!important;border-color:#edd78d!important}
.filters .filter.active{box-shadow:0 0 0 2px rgba(52,117,244,.10),0 6px 16px rgba(38,82,148,.10)!important;transform:translateY(-1px)}
/* Message dates */
.messageDateSeparator{align-self:center;position:relative;z-index:2;margin:10px 0 4px;pointer-events:none}
.messageDateSeparator span{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.90);border:1px solid #dce7f5;box-shadow:0 3px 10px rgba(31,67,120,.07);font-size:11px;font-weight:800;color:#607895}
/* Reply */
.replyDraftBar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f2f7ff;border-top:1px solid #dce8f7;border-left:3px solid #4b82e8;padding:8px 13px}
.replyDraftBar>div{display:flex;flex-direction:column;min-width:0}.replyDraftBar b{font-size:11px;color:#2b65c1}.replyDraftBar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#607895}.replyDraftBar button{width:30px;height:30px;padding:0;border-radius:9px;background:#fff!important;color:#637b9d!important;box-shadow:none!important}
.msgReplyQuote{display:flex;flex-direction:column;text-align:left;width:100%;margin:0 0 7px;padding:7px 9px;border:0;border-left:3px solid #5990ee;border-radius:7px;background:rgba(74,128,220,.08);box-shadow:none!important;color:inherit;cursor:pointer}.msgReplyQuote b{font-size:11px;color:#2d69c5}.msgReplyQuote span{font-size:11px;color:#657b99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.replyHighlight{animation:uplyReplyFlash 1.2s ease}@keyframes uplyReplyFlash{0%,100%{box-shadow:0 5px 15px rgba(43,76,127,.06)}50%{box-shadow:0 0 0 4px rgba(63,124,234,.28),0 8px 24px rgba(43,76,127,.16)}}
/* File drafts + drag/drop */
.fileDraftTray{display:flex;gap:8px;overflow-x:auto;padding:8px 12px;background:#fff;border-top:1px solid #e4edf8}.fileDraftItem{display:flex;align-items:center;gap:8px;min-width:210px;max-width:300px;padding:8px 9px;border:1px solid #dce8f7;border-radius:11px;background:#f8fbff}.fileDraftIcon{font-size:20px}.fileDraftItem>div{min-width:0;display:flex;flex:1;flex-direction:column}.fileDraftItem b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.fileDraftItem small{font-size:10px;color:#8294ad;margin-top:2px}.fileDraftItem button{width:25px;height:25px;padding:0!important;border-radius:8px!important;background:#fff!important;color:#7589a4!important;box-shadow:none!important}.chatPane.fileDropActive{position:relative}.chatPane.fileDropActive:after{content:"Перетащите сюда фото или файл";position:absolute;inset:12px;z-index:80;display:flex;align-items:center;justify-content:center;border:2px dashed #5f91ed;border-radius:20px;background:rgba(238,247,255,.94);font-weight:900;color:#2d69c5;font-size:18px;pointer-events:none}
/* Large Telegram-like image viewer */
.imageViewer{background:rgba(12,19,31,.92)!important;backdrop-filter:blur(6px)!important;padding:0!important}.imageViewerPanel{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;display:flex!important;flex-direction:column!important}.imageViewerToolbar{height:58px;display:flex;align-items:center;justify-content:flex-end;gap:7px;padding:8px 16px;z-index:3}.imageViewerToolbar button,.imageViewerToolbar a{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16)!important;border-radius:10px;background:rgba(19,29,45,.74)!important;color:white!important;text-decoration:none;box-shadow:none!important;padding:0 10px!important}.imageViewerStage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:8px 24px 16px}.imageViewerImg{max-width:92vw!important;max-height:82vh!important;width:auto!important;height:auto!important;object-fit:contain!important;transform-origin:center center;transition:transform .12s ease;border-radius:6px!important;box-shadow:0 10px 60px rgba(0,0,0,.45)}.imageViewerCaption{height:38px;color:#d8e1ef!important;text-align:center!important;background:transparent!important}.imageViewerClose{position:static!important}
/* Scripts */
.scriptsBtn{background:#f2f6fc!important;color:#425f87!important;border:1px solid #d7e4f4!important;box-shadow:none!important;min-width:44px}.scriptToolbar{display:grid;grid-template-columns:1fr 160px auto;gap:8px;margin-bottom:12px}.scriptList{display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow:auto}.scriptCard{display:flex;gap:6px;border:1px solid #dfe8f5;border-radius:12px;background:#fafcff;padding:5px}.scriptUse{flex:1;display:flex!important;flex-direction:column!important;align-items:flex-start!important;text-align:left!important;background:transparent!important;color:#203b62!important;box-shadow:none!important;padding:8px 10px!important}.scriptUse b{font-size:13px}.scriptUse small{font-size:10px;color:#6a83a5;margin:2px 0 5px}.scriptUse span{font-size:12px;color:#4f6686;white-space:pre-wrap}.scriptAdmin{display:flex;flex-direction:column;gap:4px}.scriptAdmin button{width:32px;height:30px;padding:0!important;background:#fff!important;color:#607895!important;box-shadow:none!important}.androidDownloadLink{display:flex;align-items:center;justify-content:center;margin:14px 0;padding:13px 16px;border-radius:13px;background:linear-gradient(135deg,#6d4aff,#884cff);color:#fff;text-decoration:none;font-weight:900}.appDownloadMeta{font-size:11px;color:#8191a9;text-align:center}.appDownloadBtn{background:#f5f2ff!important;color:#6842d8!important;border:1px solid #ddd3ff!important}
/* Mobile/high-volume inbox */
@media(max-width:800px){
body.uplyAndroidApp header{padding:0 8px!important}.uplyAndroidApp header .logo span{display:none}.uplyAndroidApp .headerActions{gap:5px!important}.uplyAndroidApp .headerActions button{padding:8px 9px!important;font-size:11px!important}.uplyAndroidApp #appDownloadBtn{display:none!important}
.uplyAndroidApp .filters{position:sticky;top:0;z-index:20;overflow-x:auto;flex-wrap:nowrap!important;padding:7px 8px!important;scrollbar-width:none}.uplyAndroidApp .filters::-webkit-scrollbar{display:none}.uplyAndroidApp .filters .filter{flex:0 0 auto!important;padding:8px 11px!important}
.uplyAndroidApp aside{width:100%!important}.uplyAndroidApp .sideTop{position:sticky;top:0;z-index:12;background:#fff!important;padding:8px!important}.uplyAndroidApp .chatSearch{font-size:16px!important;height:44px!important}.uplyAndroidApp .chatRow{min-height:72px!important;padding:9px 8px!important}.uplyAndroidApp .chatTop b{font-size:14px!important}.uplyAndroidApp .preview{font-size:12px!important}.uplyAndroidApp .badge{min-width:22px;height:22px;line-height:22px}
.uplyAndroidApp .chatPane{position:fixed!important;inset:0!important;z-index:60!important;background:#eef5fd!important;height:100dvh!important}.uplyAndroidApp .chatHeader{height:62px!important;min-height:62px!important;padding:0 8px!important}.uplyAndroidApp .messages{padding:12px 8px!important}.uplyAndroidApp .msg{max-width:88%!important}.uplyAndroidApp .msgActions{opacity:1!important}.uplyAndroidApp .composer{padding:max(9px,env(safe-area-inset-bottom)) 8px 9px!important}.uplyAndroidApp .composer textarea{font-size:16px!important}.uplyAndroidApp .replyVia{display:none!important}.uplyAndroidApp .uplyForwardModal{width:96vw!important;max-height:90dvh;overflow:auto}.uplyAndroidApp .scriptToolbar{grid-template-columns:1fr!important}.uplyAndroidApp .imageViewerToolbar{padding-top:max(8px,env(safe-area-inset-top))}.uplyAndroidApp .imageViewerImg{max-width:98vw!important;max-height:82dvh!important}
}
/* UPLY_WORKSPACE_V131 */
.uplyBrand{display:flex!important;align-items:center;gap:9px;white-space:nowrap}.uplyBrandIcon{width:38px;height:38px;border-radius:11px;box-shadow:0 5px 16px rgba(74,106,214,.14);object-fit:cover}.loginCard .uplyBrandIcon{width:46px;height:46px;border-radius:13px}.uplyBrandText{font-size:22px;font-weight:900;color:#14355f}.uplyBrandText em{font-style:normal;font-size:14px;font-weight:800;color:#7b8da8}
.chatTargetCard{min-width:260px;max-width:min(60vw,620px);padding:8px 14px 9px;border:1px solid #d7e5f7;border-radius:13px;background:linear-gradient(135deg,#f7fbff,#eef5ff);box-shadow:0 4px 14px rgba(44,85,145,.07)}.chatTargetLabel{display:block!important;margin:0 0 2px!important;font-size:9px!important;letter-spacing:.08em;text-transform:uppercase;color:#8092ad!important}.chatTargetCard strong{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chatTargetCard #chatChannel{display:inline-block!important;margin-top:3px!important}.replyVia{display:flex;flex-direction:column;gap:1px;padding:8px 12px!important}.replyVia span{font-size:9px!important;text-transform:uppercase;letter-spacing:.06em;color:#7890b4!important;margin:0!important}.replyVia b{font-size:12px}
.msg{position:relative;padding-top:10px!important}.msgSender{font-size:11px;font-weight:900;color:#4c72aa;margin-bottom:5px;user-select:none;-webkit-user-select:none}.msg.out .msgSender{color:#3068bd}.msgFooter{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:6px;font-size:10px;color:#8190a7;user-select:none;-webkit-user-select:none}.msgChecks{font-size:12px;font-weight:900;letter-spacing:-3px;padding-right:3px}.msgChecksSent{color:#8ba0bc}.msgChecksRead{color:#2782ee}.msgActions{top:-34px!important;bottom:auto!important;right:4px!important;user-select:none!important;-webkit-user-select:none!important}.msgActions button{user-select:none!important;-webkit-user-select:none!important}.msgText{user-select:text;-webkit-user-select:text}.msgCopyBtn{font-size:15px!important}
.chatPane.fileDropActive:after{content:"Отпустите — файл сразу отправится"!important}
.imageViewerStage{padding:4px 8px 12px!important}.imageViewerImg{max-width:98vw!important;max-height:calc(100vh - 105px)!important}.imageViewerPanel{background:#0b111d!important}.imageViewerCaption{height:28px!important}
.scriptToolbar input{min-width:0}.scriptList{min-height:160px}
@media(max-width:800px){.uplyBrandIcon{width:34px;height:34px}.uplyBrandText{font-size:18px}.uplyBrandText em{display:none}.chatTargetCard{min-width:0;max-width:none;flex:1;padding:6px 9px}.chatTargetLabel{font-size:8px!important}.chatTargetCard strong{font-size:15px!important}.replyVia{display:none!important}.msgActions{position:static!important;display:flex!important;justify-content:flex-end!important;margin:-2px 0 4px!important;opacity:1!important}.msgSender{font-size:10px}.msgFooter{font-size:9px}.imageViewerImg{max-width:100vw!important;max-height:calc(100dvh - 90px)!important}}
/* UPLY_FINAL_BRAND_ACTIONS_V134 */
/* Старый синий U из прежнего логотипа полностью отключён.
В шапке и на форме входа остаётся только новая единая иконка. */
.logo::before,
.logo.uplyBrand::before,
.logo::after,
.logo.uplyBrand::after{
content:none !important;
display:none !important;
}
.logo.uplyBrand{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.uplyBrandIcon{
display:block !important;
width:40px !important;
height:40px !important;
flex:0 0 40px !important;
object-fit:cover !important;
border-radius:11px !important;
box-shadow:0 5px 15px rgba(27,99,230,.18) !important;
}
/* Фиксированный визуальный порядок действий у сообщения:
закреп → смайлик → ответить → переслать → копировать.
Редактирование и удаление, когда доступны, идут после них. */
.msgActions{
display:flex !important;
align-items:center !important;
}
.msgActions .msgPinBtn{order:1 !important;}
.msgActions .msgReactBtn{order:2 !important;}
.msgActions .msgReplyBtn{order:3 !important;}
.msgActions .msgForwardBtn{order:4 !important;}
.msgActions .msgCopyBtn{order:5 !important;}
.msgActions .msgEditBtn{order:6 !important;}
.msgActions .msgDeleteBtn{order:7 !important;}
@media(max-width:800px){
.uplyBrandIcon{
width:36px !important;
height:36px !important;
flex-basis:36px !important;
}
}
/* === UPLY_MULTI_MESSAGE_SELECT_SIDE_ACTIONS_V1712 === */
.messageSelectionBar{
flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
min-height:48px;padding:7px 12px;border-top:1px solid #d9e6f6;background:#f5f9ff;
box-shadow:0 -4px 14px rgba(40,72,120,.05);z-index:12;
}
.messageSelectionBar.hidden{display:none!important;}
.messageSelectionBar>b{font-size:12px;color:#315f9f;white-space:nowrap;}
.messageSelectionActions{display:flex;align-items:center;gap:6px;min-width:0;}
.messageSelectionActions button{min-height:34px!important;padding:6px 10px!important;border-radius:10px!important;font-size:11px!important;white-space:nowrap;}
.msg.msgMultiSelected{box-shadow:0 0 0 3px rgba(49,111,224,.28),0 5px 16px rgba(40,72,120,.08)!important;}
.msgActions .msgSelectBtn.active{background:#e5efff!important;color:#1f63d4!important;border-color:#9fbff4!important;}
.msgActions .msgSelectBtn{order:0!important;}
/* Desktop: toolbar lives beside the bubble, never above the previous message. */
@media(min-width:801px){
.msg.in .msgActions,.msg.out .msgActions{
position:absolute!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;
margin:0!important;display:flex!important;flex-wrap:nowrap!important;gap:3px!important;opacity:0!important;
}
.msg.in .msgActions{left:calc(100% + 7px)!important;right:auto!important;justify-content:flex-start!important;}
.msg.out .msgActions{right:calc(100% + 7px)!important;left:auto!important;justify-content:flex-end!important;}
.msg:hover .msgActions,.msg.messagePinned .msgActions,.msg.msgMultiSelected .msgActions,.msgActions:focus-within{opacity:1!important;}
.msgActions .msgActionBtn,.msgActions .msgPinBtn{width:24px!important;height:24px!important;min-width:24px!important;font-size:11px!important;border-radius:7px!important;}
}
/* Browser mobile: compact 3-column side controls; reserve room so they don't cover text. */
@media(max-width:800px){
.msg{max-width:76%!important;margin-top:9px!important;margin-bottom:9px!important;}
.msg.in .msgActions,.msg.out .msgActions{
position:absolute!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;
margin:0!important;display:grid!important;grid-template-columns:repeat(3,22px)!important;gap:2px!important;
width:max-content!important;height:auto!important;max-width:none!important;overflow:visible!important;opacity:1!important;z-index:8!important;
}
.msg.in .msgActions{left:calc(100% + 5px)!important;right:auto!important;}
.msg.out .msgActions{right:calc(100% + 5px)!important;left:auto!important;}
.msgActions .msgActionBtn,.msgActions .msgPinBtn{width:22px!important;height:22px!important;min-width:22px!important;font-size:10px!important;border-radius:7px!important;}
.messageSelectionBar{padding:6px 7px;gap:5px;min-height:44px;}
.messageSelectionBar>b{font-size:10px;}
.messageSelectionActions{gap:3px;}
.messageSelectionActions button{min-height:32px!important;padding:5px 7px!important;font-size:10px!important;}
.messageSelectionActions button span{display:none;}
.uplyMultiForwardPreview{max-height:96px;}
}
.uplyMultiForwardPreview{display:flex;flex-direction:column;gap:4px;max-height:145px;overflow:auto;margin:7px 0 9px;padding:7px;border:1px solid #dce7f5;border-radius:11px;background:#f8fbff;}
.uplyMultiForwardPreview>div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;align-items:start;font-size:11px;}
.uplyMultiForwardPreview>div>b{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:7px;background:#e7effd;color:#356bc1;font-size:10px;}
.uplyMultiForwardPreview>div>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#526b8e;}
.uplyMultiForwardPreview>small{color:#7d8da5;font-size:10px;padding-left:28px;}
html[data-uply-web-theme="dark"] .messageSelectionBar{background:#172538!important;border-color:#2c4058!important;}
html[data-uply-web-theme="dark"] .messageSelectionBar>b{color:#a9c8f5!important;}
html[data-uply-web-theme="dark"] .uplyMultiForwardPreview{background:#142234!important;border-color:#2c4058!important;}
/* UPLY_MULTI_MESSAGE_SELECT_SIDE_ACTIONS_V1712_STYLE_READY */
/* === UPLY_ANDROID_ACTIONS_HARD_INSIDE_V1714 ===
Android only. The v1.7.12 responsive rule still puts message actions beside
the bubble; this later, more specific rule forces them into the bubble. */
@media(max-width:800px){
body.uplyAndroidApp .msg{
max-width:89%!important;
min-width:min(184px,82vw)!important;
margin-top:0!important;
margin-bottom:0!important;
}
body.uplyAndroidApp .msg.in .msgActions,
body.uplyAndroidApp .msg.out .msgActions{
position:static!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
transform:none!important;
display:flex!important;
grid-template-columns:none!important;
align-items:center!important;
justify-content:flex-end!important;
flex-wrap:wrap!important;
gap:2px!important;
width:max-content!important;
max-width:100%!important;
height:auto!important;
min-height:24px!important;
margin:0 0 4px auto!important;
overflow:visible!important;
opacity:1!important;
z-index:auto!important;
}
body.uplyAndroidApp .msgActions .msgActionBtn,
body.uplyAndroidApp .msgActions .msgPinBtn{
position:static!important;
flex:0 0 24px!important;
width:24px!important;
min-width:24px!important;
max-width:24px!important;
height:24px!important;
min-height:24px!important;
max-height:24px!important;
margin:0!important;
padding:0!important;
transform:none!important;
line-height:1!important;
border-radius:7px!important;
font-size:11px!important;
}
}
/* UPLY_UNREAD_BADGE_LAYOUT_V1716
Keep unread counter fully visible while preview text remains ellipsized. */
.chatRow .preview{
display:flex!important;align-items:center!important;gap:6px!important;
min-width:0!important;white-space:normal!important;overflow:visible!important;
}
.chatRow .previewText{
display:block!important;flex:1 1 auto!important;min-width:0!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.chatRow .badge{
float:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
flex:0 0 auto!important;box-sizing:border-box!important;min-width:22px!important;height:22px!important;
line-height:1!important;padding:0 6px!important;margin:0!important;border-radius:999px!important;
}
@media(max-width:700px){
.chatRow .preview{gap:5px!important}
.chatRow .badge{min-width:21px!important;height:21px!important;padding:0 5px!important;font-size:11px!important}
}
/* UPLY_UNREAD_BADGE_LAYOUT_V1716 */
/* UPLY_UNREAD_BADGE_RIGHT_V1717
Mobile unread badge is back on the right side of the chat card, but inset from the edge/bottom so it is never clipped. */
@media(max-width:700px){
.chatRow{position:relative!important;overflow:visible!important}
.chatRow .preview{display:block!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;padding-right:34px!important}
.chatRow .previewText{display:block!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.chatRow .badge{position:absolute!important;right:10px!important;bottom:9px!important;float:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;min-width:21px!important;height:21px!important;line-height:1!important;padding:0 5px!important;margin:0!important;border-radius:999px!important;font-size:11px!important;z-index:4!important}
}
/* UPLY_UNREAD_BADGE_RIGHT_V1717 */
/* UPLY_SCREENSHOT_CROP_FORWARD_V1723 */
.uplyCropEditor{position:fixed;z-index:5000;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(7,15,28,.82);backdrop-filter:blur(4px);box-sizing:border-box;}
.uplyCropEditor.hidden{display:none!important;}
body.uplyCropOpen{overflow:hidden!important;}
.uplyCropPanel{width:min(960px,96vw);max-height:96dvh;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:#fff;color:#172b4d;box-shadow:0 24px 80px rgba(0,0,0,.34);box-sizing:border-box;overflow:hidden;}
.uplyCropHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:0 0 auto;}
.uplyCropHead>div{min-width:0;display:flex;flex-direction:column;gap:2px;}.uplyCropHead b{font-size:18px;}.uplyCropHead span{font-size:12px;color:#72839c;}
.uplyCropHead button{width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;border-radius:10px!important;font-size:22px!important;line-height:1!important;}
.uplyCropStage{min-height:180px;flex:1 1 auto;display:flex;align-items:center;justify-content:center;overflow:auto;padding:8px;border:1px solid #d7e2f1;border-radius:14px;background:#0f1724;box-sizing:border-box;touch-action:none;}
.uplyCropArea{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:70dvh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;}
.uplyCropArea>img{display:block;max-width:min(880px,calc(96vw - 64px));max-height:68dvh;width:auto;height:auto;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.uplyCropRect{position:absolute;z-index:2;box-sizing:border-box;border:2px solid #fff;border-radius:4px;box-shadow:0 0 0 9999px rgba(0,0,0,.58),0 0 0 1px rgba(37,99,235,.95) inset;cursor:move;touch-action:none;}
.uplyCropRect i{position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #2563eb;box-shadow:0 2px 8px rgba(0,0,0,.28);box-sizing:border-box;}
.uplyCropRect i[data-handle="nw"]{left:-12px;top:-12px;cursor:nwse-resize}.uplyCropRect i[data-handle="ne"]{right:-12px;top:-12px;cursor:nesw-resize}.uplyCropRect i[data-handle="sw"]{left:-12px;bottom:-12px;cursor:nesw-resize}.uplyCropRect i[data-handle="se"]{right:-12px;bottom:-12px;cursor:nwse-resize}
.uplyCropMeta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#72839c;flex:0 0 auto;}.uplyCropMeta span:first-child{font-weight:800;color:#355375;}
.uplyCropButtons{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:0 0 auto;}.uplyCropButtons button{min-height:40px!important;padding:8px 14px!important;}
.uplyDraftCropBtn{position:absolute;right:5px;bottom:5px;z-index:4;width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;border:2px solid #fff!important;border-radius:9px!important;background:#2563eb!important;color:#fff!important;box-shadow:0 3px 9px rgba(20,45,80,.24)!important;font-size:14px!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.uplyDraftCropBtn:hover{background:#174fbf!important;}.uplyDraftCropBtn:disabled{opacity:.55!important;}
.uplyScreenshotBtn{flex:0 0 auto;min-width:42px;width:42px;height:42px;min-height:42px;padding:0!important;border-radius:12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:18px!important;line-height:1!important;}
.uplyImageSendPreview{width:100%;max-height:190px;display:flex;align-items:center;justify-content:center;margin:4px 0 8px;padding:7px;border:1px solid #d7e2f1;border-radius:12px;background:#f5f8fc;overflow:hidden;box-sizing:border-box;}.uplyImageSendPreview img{display:block;max-width:100%;max-height:174px;object-fit:contain;border-radius:8px;}
.uplyImageSendModal textarea{min-height:70px;max-height:120px;resize:vertical;}
html[data-uply-web-theme="dark"] .uplyCropPanel,html[data-uply-theme="dark"] .uplyCropPanel{background:#152132;color:#eaf1fb;}html[data-uply-web-theme="dark"] .uplyCropHead span,html[data-uply-theme="dark"] .uplyCropHead span,html[data-uply-web-theme="dark"] .uplyCropMeta,html[data-uply-theme="dark"] .uplyCropMeta{color:#a5b4c8;}html[data-uply-web-theme="dark"] .uplyCropMeta span:first-child,html[data-uply-theme="dark"] .uplyCropMeta span:first-child{color:#c9daf1;}html[data-uply-web-theme="dark"] .uplyImageSendPreview,html[data-uply-theme="dark"] .uplyImageSendPreview{background:#101b29;border-color:#2b3b50;}
@media(max-width:700px){
.uplyCropEditor{padding:0;align-items:stretch;}.uplyCropPanel{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:8px;}.uplyCropHead b{font-size:16px;}.uplyCropStage{padding:5px;border-radius:11px;min-height:0;}.uplyCropArea>img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 190px);}.uplyCropRect i{width:26px;height:26px;}.uplyCropRect i[data-handle="nw"]{left:-14px;top:-14px}.uplyCropRect i[data-handle="ne"]{right:-14px;top:-14px}.uplyCropRect i[data-handle="sw"]{left:-14px;bottom:-14px}.uplyCropRect i[data-handle="se"]{right:-14px;bottom:-14px}.uplyCropButtons{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:6px;}.uplyCropButtons button{min-width:0!important;padding:7px 5px!important;font-size:12px!important;}.uplyDraftCropBtn{right:4px;bottom:4px;width:27px!important;height:27px!important;min-width:27px!important;}.uplyImageSendPreview{max-height:130px;}.uplyImageSendPreview img{max-height:114px;}
}
/* UPLY_WEB_DESKTOP_NOTIFICATIONS_V1726 */
.webNotificationsBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-height:38px}
.webNotificationsBtn.active{background:#e7f7ee;color:#137a46;box-shadow:inset 0 0 0 1px rgba(19,122,70,.13)}
@media(max-width:1050px){.webNotificationsBtn .webNotifyLabel{display:none}.webNotificationsBtn{width:40px;padding-left:0;padding-right:0}}
/* UPLY_DECOR_THEMES_V1731
Decorative themes: light + evening presets. CSS + tiny inline SVG, no remote assets and no animation. */
.uplyDecorThemeBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.uplyDecorModal{width:min(94vw,820px)!important;max-height:min(90vh,800px);overflow:auto}
.uplyDecorHead h2{margin:0 0 6px}.uplyDecorHead p{margin:0;color:#6f809a;font-size:13px;line-height:1.45}
.uplyDecorGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.uplyDecorChoice{position:relative;display:grid!important;grid-template-columns:82px 1fr 24px;align-items:center;gap:12px;width:100%;min-height:92px;padding:10px!important;text-align:left!important;background:#fff!important;border:1px solid #dce7f5!important;border-radius:16px!important;box-shadow:none!important;transform:none!important}
.uplyDecorChoice:hover{background:#f8fbff!important;transform:none!important}.uplyDecorChoice.active{border-color:#72a2ff!important;box-shadow:0 0 0 2px rgba(72,128,238,.14)!important}
.uplyDecorChoiceText{display:flex;flex-direction:column;gap:4px;min-width:0}.uplyDecorChoiceText b{color:#17345e;font-size:14px}.uplyDecorChoiceText small{color:#7386a2;font-size:11px;line-height:1.35}
.uplyDecorCheck{opacity:0;color:#2e69dc;font-weight:1000;font-size:19px}.uplyDecorChoice.active .uplyDecorCheck{opacity:1}
.uplyDecorPreview{position:relative;display:flex;align-items:center;justify-content:center;width:82px;height:68px;border-radius:14px;overflow:hidden;border:1px solid rgba(137,160,196,.22);font-size:26px}
.uplyDecorPreview i{font-style:normal;filter:saturate(.88);text-shadow:0 2px 8px rgba(48,73,112,.10)}
.uplyDecorPreview-classic{background:linear-gradient(145deg,#f9fbff,#eaf3ff)}
.uplyDecorPreview-cats{background:radial-gradient(circle at 22% 22%,rgba(91,132,193,.15) 0 3px,transparent 4px),radial-gradient(circle at 72% 72%,rgba(91,132,193,.11) 0 4px,transparent 5px),linear-gradient(145deg,#f7fbff,#eaf4ff)}
.uplyDecorPreview-pastel{background:radial-gradient(circle at 16% 20%,rgba(255,177,200,.48),transparent 31%),radial-gradient(circle at 82% 30%,rgba(143,204,255,.50),transparent 33%),linear-gradient(145deg,#fff9fc,#edf8ff)}
.uplyDecorPreview-cozy{background:radial-gradient(circle at 20% 25%,rgba(255,184,126,.36),transparent 34%),radial-gradient(circle at 80% 75%,rgba(255,219,170,.58),transparent 35%),linear-gradient(145deg,#fffaf1,#ffefe3)}
.uplyDecorPreview-minimal{background:radial-gradient(circle at 85% 15%,rgba(113,188,255,.30),transparent 38%),linear-gradient(145deg,#ffffff,#eaf6ff)}
.uplyDecorPreview-mint{background:radial-gradient(circle at 20% 20%,rgba(128,220,184,.42),transparent 34%),linear-gradient(145deg,#fbfffd,#e7f9f1)}
.uplyDecorPreview-lavender{background:radial-gradient(circle at 75% 20%,rgba(190,166,255,.40),transparent 35%),radial-gradient(circle at 20% 78%,rgba(206,225,255,.50),transparent 32%),linear-gradient(145deg,#fdfbff,#f1edff)}
.uplyDecorPreview-sky{background:radial-gradient(ellipse at 25% 28%,rgba(255,255,255,.96) 0 16%,transparent 17%),radial-gradient(ellipse at 70% 65%,rgba(255,255,255,.92) 0 19%,transparent 20%),linear-gradient(145deg,#dff3ff,#f8fcff)}
.uplyDecorPreview-sakura{background:radial-gradient(circle at 20% 24%,rgba(255,170,194,.42),transparent 33%),radial-gradient(circle at 82% 72%,rgba(255,211,224,.62),transparent 34%),linear-gradient(145deg,#fffafd,#fff0f5)}
.uplyDecorPreview-starry{background:radial-gradient(circle at 20% 24%,rgba(255,255,255,.96) 0 2px,transparent 3px),radial-gradient(circle at 76% 64%,rgba(255,255,255,.92) 0 1.5px,transparent 2.5px),linear-gradient(145deg,#d9eaff,#eef6ff)}
.uplyDecorPreview-ocean{background-image:repeating-radial-gradient(ellipse at 50% 115%,rgba(63,149,196,.18) 0 2px,transparent 3px 13px),linear-gradient(145deg,#effbff,#cfefff);background-size:auto,auto}
.uplyDecorPreview-aurora{background:radial-gradient(ellipse at 24% 32%,rgba(104,224,180,.55),transparent 36%),radial-gradient(ellipse at 76% 28%,rgba(132,118,231,.42),transparent 40%),radial-gradient(ellipse at 55% 80%,rgba(92,188,232,.34),transparent 42%),linear-gradient(145deg,#14294a,#233c61)}
.uplyDecorPreview-nightstars{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22220%22%20viewBox%3D%220%200%20320%20220%22%3E%0A%3Cg%20fill%3D%22%23d7dde6%22%20fill-opacity%3D%22.38%22%3E%0A%3Ccircle%20cx%3D%2224%22%20cy%3D%2228%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%2267%22%20cy%3D%2252%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22108%22%20cy%3D%2226%22%20r%3D%221.5%22%2F%3E%0A%3Ccircle%20cx%3D%22151%22%20cy%3D%2256%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%22201%22%20cy%3D%2231%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22272%22%20cy%3D%2242%22%20r%3D%221.3%22%2F%3E%0A%3Ccircle%20cx%3D%2242%22%20cy%3D%22142%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%22176%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22154%22%20cy%3D%22138%22%20r%3D%221.2%22%2F%3E%0A%3Ccircle%20cx%3D%22218%22%20cy%3D%22174%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22287%22%20cy%3D%22132%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22252%22%20cy%3D%22102%22%20r%3D%221.0%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c6ccd5%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%221.1%22%3E%0A%3Cpath%20d%3D%22M24%2028%2067%2052%20108%2026%20151%2056%20201%2031%22%2F%3E%0A%3Cpath%20d%3D%22M42%20142%2092%20176%20154%20138%20218%20174%20287%20132%22%2F%3E%0A%3Cpath%20d%3D%22M201%2031%20228%2073%20272%2042%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23aeb7c4%22%20stroke-opacity%3D%22.11%22%20stroke-width%3D%22.8%22%3E%0A%3Cpath%20d%3D%22M16%2096%2064%2088%20112%20105%20159%2083%20205%2098%20252%20102%20302%2086%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"),linear-gradient(145deg,#0a1930,#17365b);background-size:110px 76px,auto;background-position:center,center;background-repeat:repeat,no-repeat}
.uplyDecorPreview-night{background:radial-gradient(circle at 74% 24%,rgba(255,255,255,.22) 0 7px,transparent 8px),linear-gradient(145deg,#0f2444,#1b365d)}
.uplyDecorHint{margin-top:12px;padding:10px 12px;border-radius:12px;background:#f4f8fd;color:#6c7f99;font-size:11px;line-height:1.4}
.uplyProfileDecorBlock{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #e1e8f2}.uplyProfileDecorBlock>div{display:flex;flex-direction:column;gap:3px}.uplyProfileDecorBlock small{color:#7a8ba4}.uplyProfileDecorBlock button{white-space:nowrap}
/* UPLY_WEB_CHAT_DECOR_80: web presets paint only the message viewport.
Keep native preset declarations and specificity so Android remains unchanged. */
/* Cats — recognizable cat faces/silhouettes, still light enough for work. */
html[data-uply-decor="cats"] body:where(.uplyNativeMobile),html[data-uply-decor="cats"] :where(body.uplyNativeMobile) .app{background-color:#eef6ff!important;background-image:radial-gradient(circle at 8% 5%,rgba(112,163,235,.18),transparent 25%),radial-gradient(circle at 92% 94%,rgba(126,217,192,.14),transparent 23%),linear-gradient(180deg,#f8fbff,#eaf4ff)!important}
html[data-uply-decor="cats"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="cats"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="cats"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="cats"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="cats"] body:not(.uplyNativeMobile) #messages{background-color:#f3f8ff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200' viewBox='0 0 240 200'%3E%3Cg fill='%235d7fa9' fill-opacity='.075'%3E%3Cpath d='M28 54 38 31l17 12c7-3 14-5 23-5s16 2 23 5l17-12 10 23-2 25c-2 25-22 42-48 42S32 104 30 79Z'/%3E%3Cpath d='M154 99 162 78l14 10c5-2 11-3 17-3s12 1 17 3l14-10 8 21-2 19c-1 13-8 24-19 30 9 10 14 23 14 39h-66c0-16 5-29 14-39-11-6-18-17-19-30Z'/%3E%3Cellipse cx='120' cy='162' rx='9' ry='7'/%3E%3Ccircle cx='105' cy='149' r='4'/%3E%3Ccircle cx='116' cy='143' r='4'/%3E%3Ccircle cx='128' cy='145' r='4'/%3E%3Ccircle cx='136' cy='155' r='4'/%3E%3C/g%3E%3Cg fill='none' stroke='%235d7fa9' stroke-opacity='.15' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='70' r='2' fill='%235d7fa9' fill-opacity='.15'/%3E%3Ccircle cx='94' cy='70' r='2' fill='%235d7fa9' fill-opacity='.15'/%3E%3Cpath d='M72 80c4 4 8 4 12 0M78 80v5M45 79H24M46 86 27 92M111 79h21M110 86l19 6'/%3E%3Cpath d='M222 151c18 2 21 21 7 28-7 4-13 1-16-4'/%3E%3Ccircle cx='178' cy='105' r='1.8' fill='%235d7fa9' fill-opacity='.15'/%3E%3Ccircle cx='199' cy='105' r='1.8' fill='%235d7fa9' fill-opacity='.15'/%3E%3Cpath d='M185 114c3 3 6 3 9 0'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,rgba(250,253,255,.94),rgba(238,246,255,.95))!important;background-size:240px 200px,auto!important}
html[data-uply-decor="cats"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="cats"] body.uplyNativeMobile aside{background:rgba(253,255,255,.92)!important}
html[data-uply-decor="cats"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="cats"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="cats"] :where(body.uplyNativeMobile) .roleFilters{background-color:rgba(246,251,255,.96)!important}
/* Pastel paws. */
html[data-uply-decor="pastel"] body:where(.uplyNativeMobile),html[data-uply-decor="pastel"] :where(body.uplyNativeMobile) .app{background-color:#f8f4fb!important;background-image:radial-gradient(circle at 8% 16%,rgba(255,169,194,.24),transparent 23%),radial-gradient(circle at 90% 8%,rgba(137,201,255,.26),transparent 25%),radial-gradient(circle at 78% 92%,rgba(156,225,199,.22),transparent 23%),linear-gradient(180deg,#fff9fd,#edf7ff)!important}
html[data-uply-decor="pastel"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="pastel"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="pastel"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="pastel"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="pastel"] body:not(.uplyNativeMobile) #messages{background-color:#fbf8ff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='145' height='145' viewBox='0 0 145 145'%3E%3Cg fill='%238aa8c8' fill-opacity='.09'%3E%3Cellipse cx='43' cy='52' rx='11' ry='9'/%3E%3Ccircle cx='27' cy='38' r='5'/%3E%3Ccircle cx='39' cy='31' r='5'/%3E%3Ccircle cx='52' cy='33' r='5'/%3E%3Ccircle cx='61' cy='43' r='5'/%3E%3Cellipse cx='108' cy='108' rx='10' ry='8'/%3E%3Ccircle cx='93' cy='95' r='4.5'/%3E%3Ccircle cx='104' cy='89' r='4.5'/%3E%3Ccircle cx='116' cy='91' r='4.5'/%3E%3Ccircle cx='124' cy='101' r='4.5'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,rgba(255,252,255,.95),rgba(241,248,255,.95))!important;background-size:145px 145px,auto!important}
html[data-uply-decor="pastel"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="pastel"] body.uplyNativeMobile aside{background:rgba(255,252,255,.93)!important}
html[data-uply-decor="pastel"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="pastel"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="pastel"] :where(body.uplyNativeMobile) .roleFilters{background:linear-gradient(90deg,rgba(255,248,252,.97),rgba(243,250,255,.97))!important}
/* Cozy — redesigned as a clearly visible LIGHT warm theme, not a dark/night preset. */
html[data-uply-decor="cozy"] body:where(.uplyNativeMobile),html[data-uply-decor="cozy"] :where(body.uplyNativeMobile) .app{background-color:#fff3e8!important;background-image:radial-gradient(circle at 9% 8%,rgba(255,178,118,.28),transparent 24%),radial-gradient(circle at 91% 90%,rgba(255,218,166,.34),transparent 26%),linear-gradient(180deg,#fffaf2,#fff0e4)!important}
html[data-uply-decor="cozy"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="cozy"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="cozy"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="cozy"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="cozy"] body:not(.uplyNativeMobile) #messages{background-color:#fff8ef!important;background-image:radial-gradient(circle at 10% 14%,rgba(240,151,95,.15) 0 2px,transparent 2.5px),radial-gradient(circle at 76% 32%,rgba(233,173,104,.12) 0 1.5px,transparent 2px),radial-gradient(circle at 44% 76%,rgba(255,195,140,.15) 0 2px,transparent 2.5px),linear-gradient(180deg,#fffaf4,#fff2e8)!important;background-size:72px 72px,94px 94px,118px 118px,auto!important}
html[data-uply-decor="cozy"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="cozy"] body.uplyNativeMobile aside{background:#fffaf5!important}
html[data-uply-decor="cozy"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="cozy"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="cozy"] :where(body.uplyNativeMobile) .roleFilters{background:linear-gradient(90deg,#fffaf4,#fff4e9)!important}
/* Minimal — redesigned: airy blue gradients across the page, visible even with no messages. */
html[data-uply-decor="minimal"] body:where(.uplyNativeMobile),html[data-uply-decor="minimal"] :where(body.uplyNativeMobile) .app{background-color:#edf7ff!important;background-image:radial-gradient(circle at 4% 4%,rgba(86,174,244,.22),transparent 29%),radial-gradient(circle at 96% 96%,rgba(158,214,255,.22),transparent 31%),linear-gradient(135deg,#fbfdff 0%,#eef8ff 52%,#f8fcff 100%)!important}
html[data-uply-decor="minimal"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="minimal"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="minimal"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="minimal"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="minimal"] body:not(.uplyNativeMobile) #messages{background:radial-gradient(circle at 14% 18%,rgba(95,185,255,.15),transparent 29%),radial-gradient(circle at 88% 80%,rgba(151,211,255,.18),transparent 32%),linear-gradient(135deg,#fcfeff,#edf7ff)!important}
html[data-uply-decor="minimal"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="minimal"] body.uplyNativeMobile aside{background:#f8fcff!important}
html[data-uply-decor="minimal"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="minimal"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="minimal"] :where(body.uplyNativeMobile) .roleFilters{background:#f4faff!important}
/* Mint. */
html[data-uply-decor="mint"] body:where(.uplyNativeMobile),html[data-uply-decor="mint"] :where(body.uplyNativeMobile) .app{background-color:#edf9f4!important;background-image:radial-gradient(circle at 8% 8%,rgba(111,206,168,.24),transparent 27%),radial-gradient(circle at 92% 88%,rgba(171,229,205,.27),transparent 29%),linear-gradient(180deg,#f9fffc,#eaf8f2)!important}
html[data-uply-decor="mint"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="mint"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="mint"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="mint"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="mint"] body:not(.uplyNativeMobile) #messages{background-color:#f4fcf8!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23589b7d' stroke-opacity='.10' stroke-width='2'%3E%3Cpath d='M35 52c24-1 38-15 43-31 4 19-3 42-28 49M35 52c13 1 24 7 31 17'/%3E%3Cpath d='M118 126c20-2 31-13 35-27 4 16-2 35-23 42M118 126c11 1 20 6 26 14'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,rgba(249,255,252,.96),rgba(237,250,244,.96))!important;background-size:180px 180px,auto!important}
html[data-uply-decor="mint"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="mint"] body.uplyNativeMobile aside{background:#f9fdfa!important}
html[data-uply-decor="mint"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="mint"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="mint"] :where(body.uplyNativeMobile) .roleFilters{background:#f4fcf8!important}
/* Lavender. */
html[data-uply-decor="lavender"] body:where(.uplyNativeMobile),html[data-uply-decor="lavender"] :where(body.uplyNativeMobile) .app{background-color:#f4f1ff!important;background-image:radial-gradient(circle at 8% 8%,rgba(168,143,239,.22),transparent 27%),radial-gradient(circle at 92% 90%,rgba(155,196,255,.24),transparent 29%),linear-gradient(180deg,#fbfaff,#efedff)!important}
html[data-uply-decor="lavender"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="lavender"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="lavender"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="lavender"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="lavender"] body:not(.uplyNativeMobile) #messages{background:radial-gradient(circle at 12% 20%,rgba(178,151,243,.15) 0 3px,transparent 4px),radial-gradient(circle at 78% 68%,rgba(151,188,244,.13) 0 2px,transparent 3px),linear-gradient(180deg,#fcfbff,#f1efff)!important;background-size:96px 96px,122px 122px,auto!important}
html[data-uply-decor="lavender"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="lavender"] body.uplyNativeMobile aside{background:#fbfaff!important}
html[data-uply-decor="lavender"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="lavender"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="lavender"] :where(body.uplyNativeMobile) .roleFilters{background:#f7f5ff!important}
/* Sky with tiny clouds. */
html[data-uply-decor="sky"] body:where(.uplyNativeMobile),html[data-uply-decor="sky"] :where(body.uplyNativeMobile) .app{background-color:#e9f7ff!important;background-image:radial-gradient(circle at 8% 5%,rgba(93,190,245,.20),transparent 28%),radial-gradient(circle at 92% 90%,rgba(173,222,250,.27),transparent 29%),linear-gradient(180deg,#f6fcff,#e8f6ff)!important}
html[data-uply-decor="sky"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="sky"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="sky"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="sky"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="sky"] body:not(.uplyNativeMobile) #messages{background-color:#f1faff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160' viewBox='0 0 220 160'%3E%3Cg fill='%236aaed6' fill-opacity='.075'%3E%3Cpath d='M28 48c4-11 14-17 25-14 6-12 25-10 29 4 13-2 22 5 23 15H28c-7 0-7-5 0-5Z'/%3E%3Cpath d='M132 119c4-10 13-15 23-13 6-10 22-8 26 4 11-2 19 4 20 13h-69c-6 0-6-4 0-4Z'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,rgba(249,253,255,.96),rgba(235,248,255,.96))!important;background-size:220px 160px,auto!important}
html[data-uply-decor="sky"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="sky"] body.uplyNativeMobile aside{background:#f8fdff!important}
html[data-uply-decor="sky"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="sky"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="sky"] :where(body.uplyNativeMobile) .roleFilters{background:#f3fbff!important}
/* Sakura. */
html[data-uply-decor="sakura"] body:where(.uplyNativeMobile),html[data-uply-decor="sakura"] :where(body.uplyNativeMobile) .app{background-color:#fff2f6!important;background-image:radial-gradient(circle at 9% 8%,rgba(255,167,193,.24),transparent 28%),radial-gradient(circle at 91% 91%,rgba(255,208,222,.30),transparent 30%),linear-gradient(180deg,#fffafd,#ffeff5)!important}
html[data-uply-decor="sakura"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="sakura"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="sakura"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="sakura"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="sakura"] body:not(.uplyNativeMobile) #messages{background-color:#fff8fb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23d987a2' fill-opacity='.085'%3E%3Cellipse cx='43' cy='45' rx='8' ry='4' transform='rotate(-28 43 45)'/%3E%3Cellipse cx='55' cy='55' rx='7' ry='3.5' transform='rotate(32 55 55)'/%3E%3Cellipse cx='126' cy='122' rx='8' ry='4' transform='rotate(18 126 122)'/%3E%3Cellipse cx='139' cy='110' rx='7' ry='3.5' transform='rotate(-35 139 110)'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,rgba(255,252,253,.96),rgba(255,240,246,.96))!important;background-size:180px 180px,auto!important}
html[data-uply-decor="sakura"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="sakura"] body.uplyNativeMobile aside{background:#fffafb!important}
html[data-uply-decor="sakura"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="sakura"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="sakura"] :where(body.uplyNativeMobile) .roleFilters{background:#fff7fa!important}
/* Starry sky — slightly blue, intentionally light enough for daytime work. */
html[data-uply-decor="starry"] body:where(.uplyNativeMobile),html[data-uply-decor="starry"] :where(body.uplyNativeMobile) .app{background-color:#e7f1ff!important;background-image:radial-gradient(circle at 8% 7%,rgba(92,144,217,.18),transparent 28%),radial-gradient(circle at 92% 91%,rgba(126,174,235,.18),transparent 31%),linear-gradient(180deg,#f3f8ff,#e4efff)!important}
html[data-uply-decor="starry"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="starry"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="starry"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="starry"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="starry"] body:not(.uplyNativeMobile) #messages{background-color:#eaf3ff!important;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22180%22%20viewBox%3D%220%200%20260%20180%22%3E%3Cg%20fill%3D%22%235d86bd%22%20fill-opacity%3D%22.18%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2225%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%2243%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%2222%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%22164%22%20cy%3D%2254%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22222%22%20cy%3D%2230%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%22122%22%20r%3D%221.3%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22146%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22112%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22207%22%20cy%3D%22145%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2296%22%20r%3D%221.7%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236d91c2%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M24%2025%2072%2043%20118%2022%20164%2054%22%2F%3E%3Cpath%20d%3D%22M96%20146%20150%20112%20207%20145%20240%2096%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%238aa7cd%22%20fill-opacity%3D%22.16%22%3E%3Cpath%20d%3D%22m128%2070%202.5%205.5%205.8.6-4.3%203.9%201.3%205.7-5.3-2.9-5.3%202.9%201.3-5.7-4.3-3.9%205.8-.6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),linear-gradient(180deg,rgba(247,251,255,.90),rgba(228,240,255,.93))!important;background-size:260px 180px,auto!important}
html[data-uply-decor="starry"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="starry"] body.uplyNativeMobile aside{background:#f7fbff!important}
html[data-uply-decor="starry"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="starry"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="starry"] :where(body.uplyNativeMobile) .roleFilters{background:#f1f7ff!important}
/* Ocean — calm line waves, no animation and no external assets. */
html[data-uply-decor="ocean"] body:where(.uplyNativeMobile),html[data-uply-decor="ocean"] :where(body.uplyNativeMobile) .app{background-color:#e6f7ff!important;background-image:radial-gradient(circle at 10% 8%,rgba(74,168,219,.20),transparent 29%),radial-gradient(circle at 91% 91%,rgba(100,205,220,.18),transparent 30%),linear-gradient(180deg,#f7fdff,#dff4ff)!important}
html[data-uply-decor="ocean"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="ocean"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="ocean"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="ocean"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="ocean"] body:not(.uplyNativeMobile) #messages{background-color:#edfaff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='180' viewBox='0 0 260 180'%3E%3Cg fill='none' stroke='%235f9fbe' stroke-opacity='.13' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M-10 43c24-15 49-15 74 0s50 15 75 0 50-15 75 0 50 15 74 0'/%3E%3Cpath d='M-18 78c30-17 58-17 86 0s56 17 84 0 56-17 84 0 56 17 84 0'/%3E%3Cpath d='M-8 123c25-14 50-14 75 0s50 14 75 0 50-14 75 0 50 14 75 0'/%3E%3C/g%3E%3Cg fill='%235f9fbe' fill-opacity='.10'%3E%3Ccircle cx='43' cy='102' r='3'/%3E%3Ccircle cx='54' cy='94' r='1.8'/%3E%3Ccircle cx='205' cy='58' r='2.5'/%3E%3Ccircle cx='214' cy='48' r='1.5'/%3E%3Ccircle cx='161' cy='147' r='2'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,rgba(248,253,255,.96),rgba(226,246,255,.97))!important;background-size:260px 180px,auto!important;background-repeat:repeat,no-repeat!important}
html[data-uply-decor="ocean"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="ocean"] body.uplyNativeMobile aside{background:#f8fdff!important}
html[data-uply-decor="ocean"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="ocean"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="ocean"] :where(body.uplyNativeMobile) .roleFilters{background:#f0faff!important}
/* Northern lights — static aurora gradients; no animation or remote assets. */
html[data-uply-decor="aurora"] body:where(.uplyNativeMobile),html[data-uply-decor="aurora"] :where(body.uplyNativeMobile) .app{background-color:#132541!important;background-image:radial-gradient(ellipse at 15% 12%,rgba(82,211,169,.30),transparent 34%),radial-gradient(ellipse at 84% 15%,rgba(132,104,225,.28),transparent 37%),radial-gradient(ellipse at 55% 88%,rgba(68,166,216,.23),transparent 38%),linear-gradient(180deg,#132541,#1e3352)!important}
html[data-uply-decor="aurora"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="aurora"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="aurora"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="aurora"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="aurora"] body:not(.uplyNativeMobile) #messages{background-color:#162d4b!important;background-image:radial-gradient(ellipse at 15% 25%,rgba(94,225,176,.26),transparent 28%),radial-gradient(ellipse at 52% 8%,rgba(88,184,223,.20),transparent 31%),radial-gradient(ellipse at 84% 33%,rgba(150,116,235,.24),transparent 30%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Cg fill='%23dce9f2' fill-opacity='.16'%3E%3Ccircle cx='28' cy='32' r='1.2'/%3E%3Ccircle cx='76' cy='60' r='1'/%3E%3Ccircle cx='126' cy='27' r='1.4'/%3E%3Ccircle cx='182' cy='54' r='1.1'/%3E%3Ccircle cx='244' cy='31' r='1.3'/%3E%3Ccircle cx='270' cy='113' r='1'/%3E%3Ccircle cx='54' cy='142' r='1.2'/%3E%3Ccircle cx='157' cy='156' r='1'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,rgba(20,44,73,.95),rgba(18,36,61,.98))!important;background-size:auto,auto,auto,300px 200px,auto!important;background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat!important}
html[data-uply-decor="aurora"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="aurora"] body.uplyNativeMobile aside{background:#f3f8fb!important}
html[data-uply-decor="aurora"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="aurora"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="aurora"] :where(body.uplyNativeMobile) .roleFilters,html[data-uply-decor="aurora"] :where(body.uplyNativeMobile) .composer{background:#edf5f8!important}
html[data-uply-decor="aurora"] :where(body.uplyNativeMobile) .empty{color:#dce7f2!important}
/* Night starry sky — dark navy canvas with light-gray constellation lines. */
html[data-uply-decor="nightstars"] body:where(.uplyNativeMobile),html[data-uply-decor="nightstars"] :where(body.uplyNativeMobile) .app{background-color:#08182d!important;background-image:radial-gradient(circle at 12% 8%,rgba(57,91,139,.24),transparent 30%),radial-gradient(circle at 90% 90%,rgba(41,72,115,.22),transparent 31%),linear-gradient(180deg,#08182d,#102743)!important}
html[data-uply-decor="nightstars"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="nightstars"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="nightstars"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="nightstars"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="nightstars"] body:not(.uplyNativeMobile) #messages{background-color:#0b1e37!important;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22220%22%20viewBox%3D%220%200%20320%20220%22%3E%0A%3Cg%20fill%3D%22%23d7dde6%22%20fill-opacity%3D%22.38%22%3E%0A%3Ccircle%20cx%3D%2224%22%20cy%3D%2228%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%2267%22%20cy%3D%2252%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22108%22%20cy%3D%2226%22%20r%3D%221.5%22%2F%3E%0A%3Ccircle%20cx%3D%22151%22%20cy%3D%2256%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%22201%22%20cy%3D%2231%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22272%22%20cy%3D%2242%22%20r%3D%221.3%22%2F%3E%0A%3Ccircle%20cx%3D%2242%22%20cy%3D%22142%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%22176%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22154%22%20cy%3D%22138%22%20r%3D%221.2%22%2F%3E%0A%3Ccircle%20cx%3D%22218%22%20cy%3D%22174%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22287%22%20cy%3D%22132%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22252%22%20cy%3D%22102%22%20r%3D%221.0%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c6ccd5%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%221.1%22%3E%0A%3Cpath%20d%3D%22M24%2028%2067%2052%20108%2026%20151%2056%20201%2031%22%2F%3E%0A%3Cpath%20d%3D%22M42%20142%2092%20176%20154%20138%20218%20174%20287%20132%22%2F%3E%0A%3Cpath%20d%3D%22M201%2031%20228%2073%20272%2042%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23aeb7c4%22%20stroke-opacity%3D%22.11%22%20stroke-width%3D%22.8%22%3E%0A%3Cpath%20d%3D%22M16%2096%2064%2088%20112%20105%20159%2083%20205%2098%20252%20102%20302%2086%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"),linear-gradient(180deg,rgba(11,30,55,.96),rgba(8,24,45,.98))!important;background-size:320px 220px,auto!important;background-repeat:repeat,no-repeat!important}
html[data-uply-decor="nightstars"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="nightstars"] body.uplyNativeMobile aside{background:#f3f6fa!important}
html[data-uply-decor="nightstars"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="nightstars"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="nightstars"] :where(body.uplyNativeMobile) .roleFilters,html[data-uply-decor="nightstars"] :where(body.uplyNativeMobile) .composer{background:#edf2f7!important}
html[data-uply-decor="nightstars"] :where(body.uplyNativeMobile) .empty{color:#cbd4df!important}
/* Night — deep navy conversation canvas, moon and stars; panels stay light for readability. */
html[data-uply-decor="night"] body:where(.uplyNativeMobile),html[data-uply-decor="night"] :where(body.uplyNativeMobile) .app{background-color:#10213c!important;background-image:radial-gradient(circle at 9% 9%,rgba(85,133,202,.26),transparent 30%),radial-gradient(circle at 92% 91%,rgba(50,92,155,.22),transparent 31%),linear-gradient(180deg,#10213c,#162f52)!important}
html[data-uply-decor="night"] :where(body.uplyNativeMobile) .conversation,html[data-uply-decor="night"] body:not(.uplyNativeMobile) #messages,html[data-uply-decor="night"] body.uplyNativeMobile .conversation,html[data-uply-web-theme="dark"][data-uply-decor="night"] :where(body.uplyNativeMobile) .conversation,html[data-uply-web-theme="dark"][data-uply-decor="night"] body:not(.uplyNativeMobile) #messages{background-color:#122a4d!important;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22180%22%20viewBox%3D%220%200%20260%20180%22%3E%3Cg%20fill%3D%22%23d9e8ff%22%20fill-opacity%3D%22.28%22%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2226%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2268%22%20cy%3D%2249%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22115%22%20cy%3D%2224%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22174%22%20cy%3D%2244%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22232%22%20cy%3D%2227%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%22132%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22102%22%20cy%3D%22151%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%22157%22%20cy%3D%22118%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%22218%22%20cy%3D%22145%22%20r%3D%221.3%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M188%2067c-19%208-28%2030-20%2049%208%2020%2030%2029%2050%2020-12%2017-36%2023-55%2012-23-13-31-42-18-65%209-16%2026-25%2043-24z%22%20fill%3D%22%23f3f6ff%22%20fill-opacity%3D%22.15%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b9d3ff%22%20stroke-opacity%3D%22.10%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M28%2026%2068%2049%20115%2024%22%2F%3E%3Cpath%20d%3D%22M102%20151%20157%20118%20218%20145%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),linear-gradient(180deg,rgba(18,42,77,.95),rgba(16,34,62,.96))!important;background-size:260px 180px,auto!important}
html[data-uply-decor="night"] :where(body.uplyNativeMobile) aside,html[data-uply-decor="night"] body.uplyNativeMobile aside{background:#f4f8ff!important}
html[data-uply-decor="night"] :where(body.uplyNativeMobile) #app>header,html[data-uply-decor="night"] :where(body.uplyNativeMobile) .filters,html[data-uply-decor="night"] :where(body.uplyNativeMobile) .roleFilters,html[data-uply-decor="night"] :where(body.uplyNativeMobile) .composer{background:#edf4ff!important}
html[data-uply-decor="night"] :where(body.uplyNativeMobile) .empty{color:#d9e7fa!important}
/* Dark mode stays a separate deliberate switch. Decorative presets never turn it on. */
html[data-uply-web-theme="dark"] .uplyDecorChoice,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyDecorChoice{background:#142238!important;border-color:#2a3a51!important}
html[data-uply-web-theme="dark"] .uplyDecorChoice:hover,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyDecorChoice:hover{background:#182a43!important}
html[data-uply-web-theme="dark"] .uplyDecorChoiceText b,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyDecorChoiceText b{color:#e6edf7!important}
html[data-uply-web-theme="dark"] .uplyDecorChoiceText small,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyDecorChoiceText small,html[data-uply-web-theme="dark"] .uplyDecorHead p,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyDecorHead p{color:#9fb0c8!important}
html[data-uply-web-theme="dark"] .uplyDecorHint,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyDecorHint{background:#101c2d;color:#aebdd2}
html[data-uply-web-theme="dark"] .uplyProfileDecorBlock,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyProfileDecorBlock{border-top-color:#2b3b50}
@media(max-width:720px){.uplyDecorGrid{grid-template-columns:1fr}.uplyDecorChoice{grid-template-columns:74px 1fr 22px}.uplyDecorPreview{width:74px;height:60px}.uplyDecorBtnLabel{display:none}}
/* UPLY_DARK_HARMONY_V1732
Softer dark workspace: muted panels, restrained tabs, unread chats stay obvious. */
html[data-uply-web-theme="dark"],
html[data-uply-theme="dark"]{
--uply-dark-panel:#101b2a;
--uply-dark-panel-2:#132033;
--uply-dark-card:#121f31;
--uply-dark-card-hover:#16263a;
--uply-dark-card-active:#1a2c43;
--uply-dark-line:#25384f;
--uply-dark-text:#dce6f2;
--uply-dark-muted:#8799b0;
--uply-dark-unread:#5f96e8;
}
/* Main work chrome: dark, but not pitch black. */
html[data-uply-web-theme="dark"] #app>header,
html[data-uply-web-theme="dark"] .filters,
html[data-uply-web-theme="dark"] .roleFilters,
html[data-uply-web-theme="dark"] aside,
html[data-uply-web-theme="dark"] .sideTop,
html[data-uply-web-theme="dark"] .chatHeader,
html[data-uply-theme="dark"] body.uplyNativeMobile #app>header,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters,
html[data-uply-theme="dark"] body.uplyNativeMobile .roleFilters,
html[data-uply-theme="dark"] body.uplyNativeMobile aside,
html[data-uply-theme="dark"] body.uplyNativeMobile .sideTop,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatHeader{
background:var(--uply-dark-panel)!important;
border-color:var(--uply-dark-line)!important;
box-shadow:none!important;
}
/* Account/channel tabs: keep their identity, remove the bright pastel pills. */
html[data-uply-web-theme="dark"] .filters .filter,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter{
background:#162337!important;
color:#b4c1d3!important;
border-color:#2b3d54!important;
box-shadow:none!important;
transform:none!important;
}
html[data-uply-web-theme="dark"] .filters .filter.ch1,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter.ch1{background:#172844!important;color:#9fbded!important;border-color:#31517d!important}
html[data-uply-web-theme="dark"] .filters .filter.ch2,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter.ch2{background:#251f3b!important;color:#c0afea!important;border-color:#4b3d6c!important}
html[data-uply-web-theme="dark"] .filters .filter.ch3,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter.ch3{background:#311e2a!important;color:#e9a1b3!important;border-color:#5e3547!important}
html[data-uply-web-theme="dark"] .filters .filter.ch4,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter.ch4,
html[data-uply-web-theme="dark"] .filters .filter.vkSource,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter.vkSource{background:#173044!important;color:#94c8e4!important;border-color:#31566b!important}
html[data-uply-web-theme="dark"] .filters .filter.ch5,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter.ch5{background:#332c1c!important;color:#dbc58a!important;border-color:#5a4d2e!important}
html[data-uply-web-theme="dark"] .filters .filter.maxSource,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter.maxSource{background:#183127!important;color:#94d1ab!important;border-color:#315a45!important}
html[data-uply-web-theme="dark"] .filters .filter.avitoSource,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter.avitoSource{background:#35271e!important;color:#e7b18b!important;border-color:#62472f!important}
html[data-uply-web-theme="dark"] .filters .filter.active,
html[data-uply-theme="dark"] body.uplyNativeMobile .filters .filter.active{
background:#1b2b41!important;
border-color:#6683a8!important;
box-shadow:0 0 0 1px rgba(115,153,205,.18)!important;
}
/* Role tabs: muted tones, still easy to distinguish. */
html[data-uply-web-theme="dark"] .roleFilter,
html[data-uply-theme="dark"] body.uplyNativeMobile .roleFilter{background:#172438!important;color:#b6c4d6!important;border-color:#2d415a!important;box-shadow:none!important}
html[data-uply-web-theme="dark"] .roleFilter.roleStudentTab,
html[data-uply-theme="dark"] body.uplyNativeMobile .roleFilter.roleStudentTab{background:#172943!important;color:#9fbbe5!important;border-color:#315079!important}
html[data-uply-web-theme="dark"] .roleFilter.roleParentTab,
html[data-uply-theme="dark"] body.uplyNativeMobile .roleFilter.roleParentTab{background:#30281d!important;color:#ddc28d!important;border-color:#57482d!important}
html[data-uply-web-theme="dark"] .roleFilter.roleTutorTab,
html[data-uply-theme="dark"] body.uplyNativeMobile .roleFilter.roleTutorTab{background:#173027!important;color:#91c9aa!important;border-color:#315943!important}
html[data-uply-web-theme="dark"] .roleFilter.roleUntaggedTab,
html[data-uply-theme="dark"] body.uplyNativeMobile .roleFilter.roleUntaggedTab{background:#1b2736!important;color:#9eacbe!important;border-color:#344457!important}
html[data-uply-web-theme="dark"] .roleFilter.active,
html[data-uply-theme="dark"] body.uplyNativeMobile .roleFilter.active{filter:brightness(1.08);outline:1px solid #647f9f!important;box-shadow:none!important}
html[data-uply-web-theme="dark"] .roleFilterBadge,
html[data-uply-theme="dark"] body.uplyNativeMobile .roleFilterBadge{background:#356fbe!important;color:#f3f7fc!important;box-shadow:none!important}
/* Left chat list. */
html[data-uply-web-theme="dark"] .chatList,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatList{background:#0f1928!important}
html[data-uply-web-theme="dark"] .chatRow,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow{
background:var(--uply-dark-card)!important;
border-color:#1d2c3f!important;
box-shadow:none!important;
}
html[data-uply-web-theme="dark"] .chatRow:hover,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow:hover{background:var(--uply-dark-card-hover)!important;border-color:#2b4059!important;box-shadow:none!important}
html[data-uply-web-theme="dark"] .chatRow.active,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow.active{background:var(--uply-dark-card-active)!important;border-color:#3b5876!important;box-shadow:none!important}
html[data-uply-web-theme="dark"] .chatRow.active::before,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow.active::before{background:#6b96d5!important}
html[data-uply-web-theme="dark"] .chatRow.pinnedChat,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow.pinnedChat{background:#172335!important;border-color:#394151!important}
html[data-uply-web-theme="dark"] .chatTop b,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatTop b{color:var(--uply-dark-text)!important}
html[data-uply-web-theme="dark"] .chatTop small,
html[data-uply-web-theme="dark"] .preview,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatTop small,
html[data-uply-theme="dark"] body.uplyNativeMobile .preview{color:var(--uply-dark-muted)!important}
html[data-uply-web-theme="dark"] .rowMenuBtn,
html[data-uply-theme="dark"] body.uplyNativeMobile .rowMenuBtn{background:#17263a!important;color:#8fa2b9!important;border-color:#2c4058!important;box-shadow:none!important}
/* Unread / needs reply: visible, but no white flash. */
html[data-uply-web-theme="dark"] .chatRow.hasUnread,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow.hasUnread{
background:#14273d!important;
border-color:#2d4c6c!important;
}
html[data-uply-web-theme="dark"] .chatRow.hasUnread .chatTop b,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow.hasUnread .chatTop b{color:#f0f6ff!important}
html[data-uply-web-theme="dark"] .chatRow.needsReply,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow.needsReply{
background:linear-gradient(90deg,rgba(58,113,190,.23),#132338 72%)!important;
border-color:#315476!important;
}
html[data-uply-web-theme="dark"] .chatRow.needsReply::before,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow.needsReply::before{background:#5e95e5!important}
html[data-uply-web-theme="dark"] .chatRow .badge,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatRow .badge{
background:#3474d1!important;
color:#fff!important;
box-shadow:0 2px 8px rgba(52,116,209,.28)!important;
border:1px solid rgba(164,199,250,.18)!important;
}
/* Contact card in the chat header should not become a bright island. */
html[data-uply-web-theme="dark"] .chatTargetCard,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatTargetCard{background:linear-gradient(135deg,#142236,#111d2e)!important;border-color:#2d425d!important;box-shadow:none!important}
html[data-uply-web-theme="dark"] .chatTargetCard strong,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatTargetCard strong{color:#e4edf8!important}
html[data-uply-web-theme="dark"] .chatTargetLabel,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatTargetLabel{color:#7f92aa!important}
/* Top action buttons also stay calm in dark mode. */
html[data-uply-web-theme="dark"] .headerActions .secondary,
html[data-uply-web-theme="dark"] .headerActions .ghost,
html[data-uply-theme="dark"] body.uplyNativeMobile .headerActions .secondary,
html[data-uply-theme="dark"] body.uplyNativeMobile .headerActions .ghost{background:#172438!important;color:#b8c6d8!important;border-color:#2d4058!important;box-shadow:none!important}
/* UPLY_SPEED_BACK_FORWARD_V1733 */
.uplyForwardSuggestedV1733{margin:7px 0 8px;padding:8px 9px;border:1px solid #d9e6f6;border-radius:12px;background:#f7fbff}
.uplyForwardSuggestedV1733>b{display:block;margin-bottom:6px;font-size:11px;color:#60738e}
.uplyForwardSuggestedV1733>div{display:flex;gap:5px;flex-wrap:wrap}
.uplyForwardSuggestedV1733 button{display:inline-flex!important;align-items:center!important;gap:5px!important;width:auto!important;min-height:31px!important;padding:5px 8px!important;border-radius:10px!important;background:#eaf3ff!important;color:#234f86!important;border:1px solid #cddff6!important;font-size:11px!important}
.uplyForwardSuggestedV1733 button span{font-size:9px;font-weight:800;opacity:.72;text-transform:uppercase}
html[data-uply-web-theme="dark"] .uplyForwardSuggestedV1733,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyForwardSuggestedV1733{background:#132238;border-color:#2d4562}
html[data-uply-web-theme="dark"] .uplyForwardSuggestedV1733>b,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyForwardSuggestedV1733>b{color:#8fa5c0}
html[data-uply-web-theme="dark"] .uplyForwardSuggestedV1733 button,html[data-uply-theme="dark"] body.uplyNativeMobile .uplyForwardSuggestedV1733 button{background:#19304b!important;color:#c5d9f4!important;border-color:#345473!important}
body.uplyAndroidApp .uplyForwardSuggestedV1733{margin:5px 0 6px;padding:6px}
body.uplyAndroidApp .uplyForwardSuggestedV1733>div{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
body.uplyAndroidApp .uplyForwardSuggestedV1733 button{flex:0 0 auto!important;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* UPLY_INTERACTION_SPEED_V1734 */
/* V1737: selection-specific V1734 CSS removed; non-selection V1734 JS optimizations are retained. */
body.uplyAndroidApp #messageSelectionBar{box-shadow:0 -6px 18px rgba(18,44,78,.08)}
/* UPLY_SELECTION_BACK_NOAVATAR_V1735 */
/* Avatars are removed from the work chat list to reduce image/network work on web and Android. */
#chatList .avatar{display:none!important}
#chatList .chatRow{gap:0!important}
#chatList .chatInfo{width:100%;min-width:0}
/* V1737: V1735 selection behavior removed; avatar optimization above is retained. */
/* UPLY_MOBILE_UX_STABILITY_V1736 */
.chatHeader{overflow:visible!important}
.chatTargetCard{min-width:0!important;max-width:none!important;flex:1 1 auto!important}
.chatTargetCard strong{display:block!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;line-height:1.18!important}
.chatHeaderActions{position:relative!important;flex:0 0 auto!important;margin-left:6px!important;margin-right:8px!important}
.chatHeaderMenuWrapV1736{position:relative;display:flex;align-items:center}
.chatHeaderMenuBtnV1736{font-size:22px!important;line-height:1!important;font-weight:900!important}
.chatHeaderMenuV1736{position:absolute;z-index:140;right:0;top:calc(100% + 7px);min-width:205px;padding:6px;border:1px solid #d7e3f2;border-radius:13px;background:#fff;box-shadow:0 12px 34px rgba(23,50,88,.18)}
.chatHeaderMenuV1736.hidden{display:none!important}
.chatHeaderMenuItemV1736{width:100%!important;height:auto!important;display:flex!important;align-items:center!important;gap:9px!important;justify-content:flex-start!important;padding:9px 10px!important;border-radius:9px!important;background:transparent!important;color:#27476f!important;box-shadow:none!important;font-size:12px!important;text-align:left!important}
.chatHeaderMenuItemV1736:hover{background:#eef5ff!important}
.chatHeaderMenuItemV1736.active{color:#235fc6!important;background:#eaf2ff!important}
.fullContactProfileV1736{min-width:0}
.fullContactProfileHeadV1736{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:2px}
.fullContactProfileHeadV1736>div{min-width:0;flex:1}
.fullContactProfileV1736 .fullContactName{font-size:20px!important;line-height:1.28!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;padding:5px 0 8px!important}
.fullContactActionsV1736{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #e2eaf4}
.fullContactActionsV1736 button{padding:8px 11px!important;font-size:12px!important}
html[data-uply-web-theme="dark"] .chatHeaderMenuV1736,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatHeaderMenuV1736{background:#142238;border-color:#2e425c;box-shadow:0 14px 38px rgba(0,0,0,.30)}
html[data-uply-web-theme="dark"] .chatHeaderMenuItemV1736,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatHeaderMenuItemV1736{color:#d7e4f4!important}
html[data-uply-web-theme="dark"] .chatHeaderMenuItemV1736:hover,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatHeaderMenuItemV1736:hover{background:#1a2b43!important}
html[data-uply-web-theme="dark"] .chatHeaderMenuItemV1736.active,
html[data-uply-theme="dark"] body.uplyNativeMobile .chatHeaderMenuItemV1736.active{background:#18365f!important;color:#a9c9f7!important}
html[data-uply-web-theme="dark"] .fullContactActionsV1736,
html[data-uply-theme="dark"] body.uplyNativeMobile .fullContactActionsV1736{border-top-color:#2b3b50}
/* V1737: V1736 pseudo-checkbox selection styling removed. */
@media(max-width:800px){
.composer{align-items:flex-end!important}
.composer textarea#messageText{height:46px;min-height:46px!important;max-height:188px;overflow-y:hidden;resize:none!important;line-height:1.35!important;box-sizing:border-box!important}
.composerEmojiWrap,.composerEmojiBtn,.composer>.attachBtn,.composer>#sendBtn,.composer>#uplyScreenshotBtn{align-self:flex-end!important;height:48px!important;min-height:48px!important;max-height:48px!important}
.chatHeader{height:auto!important;min-height:62px!important;padding-top:5px!important;padding-bottom:5px!important;align-items:flex-start!important}
.mobileChatBackBtn{margin-top:5px!important}
.chatTargetCard{padding:6px 8px!important}
.chatTargetCard strong{font-size:14px!important;line-height:1.2!important}
.chatTargetLabel{margin-bottom:1px!important}
.chatHeaderActions{margin:5px 0 0 2px!important}
.chatHeaderMenuBtnV1736{width:34px!important;height:34px!important;min-width:34px!important}
.chatHeaderMenuV1736{right:0;top:40px;min-width:190px}
.fullContactActionsV1736{display:grid;grid-template-columns:1fr 1fr}
}
body.uplyAndroidApp #refreshBtn{display:none!important}
body.uplyAndroidApp main aside{position:relative!important;overflow:hidden}
body.uplyAndroidApp .chatList{will-change:transform;transition:transform .18s ease-out}
body.uplyAndroidApp .chatList.uplyPullingV1736{transition:none}
.uplyPullRefreshV1736{position:absolute;z-index:14;left:50%;top:48px;transform:translate(-50%,-12px);opacity:0;pointer-events:none;white-space:nowrap;padding:6px 11px;border-radius:999px;background:rgba(243,248,255,.96);border:1px solid #ceddf2;color:#45658f;box-shadow:0 4px 14px rgba(30,63,108,.10);font-size:12px;font-weight:800;transition:opacity .12s ease,transform .12s ease}
html[data-uply-theme="dark"] body.uplyNativeMobile .uplyPullRefreshV1736{background:rgba(21,36,57,.97);border-color:#314966;color:#b8cbe6}
/* UPLY_ROLE_DIRECTORY_OLD_SELECTION_WEB_COMPOSER_V1737 */
/* Restore the old explicit per-message selection button. */
.msgActions .msgSelectBtn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
body.uplyMessageSelecting #messages .msg{cursor:default!important;touch-action:auto!important}
body.uplyMessageSelecting #messages .msg.msgMultiSelected{outline:none!important}
#messages .msg::before,
body.uplyMessageSelecting #messages .msg::before,
body.uplyMessageSelecting #messages .msg.msgMultiSelected::before{
content:none!important;
display:none!important;
}
/* Web and Android: textarea grows upward to the same capped height. */
.composer{align-items:flex-end!important}
.composer textarea#messageText{
height:48px;
min-height:48px!important;
max-height:188px!important;
overflow-y:hidden;
resize:none!important;
line-height:1.35!important;
box-sizing:border-box!important;
}
.composerEmojiWrap,
.composerEmojiBtn,
.composer>.attachBtn,
.composer>#sendBtn,
.composer>#uplyScreenshotBtn{
align-self:flex-end!important;
height:48px!important;
min-height:48px!important;
max-height:48px!important;
}
/* UPLY_HEADER_OVERLAY_FIX_V1738 */
/* Keep the chat header chips and the ⋮ menu above the scrolling message layer. */
.chatPane{position:relative;isolation:isolate}
.chatHeader,
#avitoItemBar,
#pinnedMessagesBar{
position:relative!important;
overflow:visible!important;
z-index:40!important;
}
.chatTargetCard,
#chatLinkedTutorWrap,
.contactLinksRow,
#chatHeaderRoleBadge,
#chatChannel,
.chatHeaderActions,
.chatHeaderMenuWrapV1736{
position:relative!important;
z-index:41!important;
}
.chatHeaderMenuWrapV1736{isolation:isolate}
.chatHeaderMenuV1736{
z-index:4200!important;
}
.messages{
position:relative;
z-index:1;
}
.msg,
.messageDateSeparator{
position:relative;
z-index:1;
}
/* UPLY_FULL_CHAT_DIRECTORY_HEADER_LAYOUT_V1739 */
/* The role row is a real layout row; a tall contact card must never climb into it. */
.roleFilters{
position:relative!important;
z-index:80!important;
flex:0 0 auto!important;
}
main{position:relative;z-index:1}
.chatHeader{
height:auto!important;
min-height:76px!important;
flex:0 0 auto!important;
padding-top:8px!important;
padding-bottom:8px!important;
align-items:center!important;
overflow:visible!important;
}
.chatTargetCard{align-self:center!important}
.chatHeaderMenuV1736{z-index:4300!important}
@media(max-width:800px){
body.uplyAndroidApp .chatHeader,
body.uplyNativeMobile .chatHeader{
height:auto!important;
min-height:62px!important;
padding-top:6px!important;
padding-bottom:6px!important;
align-items:flex-start!important;
}
}
/* UPLY_PERSISTED_DIRECTORY_NONBLOCKING_PULL_V1740 */
/* Pull-to-refresh stays enabled. While the refresh runs, the list is released
immediately so chats can still be opened and scrolled. */
#uplyPullRefreshV1736.uplyRefreshingV1740{
opacity:1!important;
transform:translate(-50%,0)!important;
}
/* UPLY_ANDROID_CHATLIST_SCROLL_FIX_V1743 */
/* Restore the native-mobile layout that V1736 accidentally overrode with a more
specific `body.uplyAndroidApp main aside{position:relative}` rule. */
body.uplyAndroidApp.uplyNativeMobile main{
position:relative!important;
min-height:0!important;
overflow:hidden!important;
}
body.uplyAndroidApp.uplyNativeMobile main aside{
position:absolute!important;
inset:0!important;
width:100%!important;
height:auto!important;
min-height:0!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
}
body.uplyAndroidApp.uplyNativeMobile #chatList,
body.uplyAndroidApp.uplyNativeMobile .chatList{
flex:1 1 0!important;
min-height:0!important;
height:auto!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:contain!important;
touch-action:pan-y!important;
will-change:auto!important;
transition:none!important;
transform:none!important;
}
body.uplyAndroidApp.uplyNativeMobile #chatList.uplyPullingV1736,
body.uplyAndroidApp.uplyNativeMobile .chatList.uplyPullingV1736{
transform:none!important;
transition:none!important;
}
/* Pull indicator floats above the list; it never changes the scroll layer geometry. */
body.uplyAndroidApp.uplyNativeMobile .uplyPullRefreshV1736{
pointer-events:none!important;
z-index:30!important;
}
/* UPLY_REALTIME_SAFE_SPEED_V1745: no visual regressions; pull-to-refresh and scroll layout retained. */
/* UPLY_REACTION_TOUCH_55: keep all emoji choices inside the message viewport. */
#messages .reactionPicker.open{position:static;flex-wrap:wrap;white-space:normal;margin:4px 0 7px;max-width:100%;overflow:visible}
#messages .reactionChoice[aria-pressed="true"]{background:#dce9ff!important;box-shadow:inset 0 0 0 2px #6596e9!important}
html[data-uply-web-theme="dark"] #messages .reactionPicker{background:#17283f;border-color:#476185}
html[data-uply-web-theme="dark"] #messages .reactionChoice[aria-pressed="true"]{background:#294d7a!important}
@media(max-width:800px){#messages .reactionChoice{width:44px!important;min-width:44px!important;height:44px!important}}
/* UPLY_MOBILE_CONVERSATION_55: mobile chat occupies its own top layer. */
@media(max-width:800px){
#app>main{grid-template-columns:minmax(0,1fr)!important;min-width:0}
#app>main>aside{min-width:0;max-width:100%}
body.mobileChatOpen #app>main{z-index:100!important}
body.mobileChatOpen .conversation{inset:0!important;z-index:100!important}
body.mobileChatOpen .chatPane{max-width:100vw;min-width:0}
}
/* The emoji popover must sit above messages, while header/modal layers stay above it. */
#chatPane .composer{position:relative;z-index:20;overflow:visible}
#composerEmojiPicker{max-width:calc(100vw - 16px);box-sizing:border-box}
/* UPLY_MOBILE_COMPOSER_61: keep typing space separate from the action buttons.
ID specificity also beats the stylesheet injected by existing Android APKs. */
@media(max-width:800px){
#chatPane .composer{
flex-wrap:wrap;
flex-shrink:0;
gap:6px!important;
}
#chatPane .composer > textarea#messageText{
flex:1 0 100%!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
order:-1;
}
#chatPane .composer > .composerEmojiWrap,
#chatPane .composer > .attachBtn,
#chatPane .composer > #scriptsBtn,
#chatPane .composer > #uplyScreenshotBtn{
flex:0 0 44px!important;
width:44px!important;
min-width:44px!important;
padding:0!important;
}
#chatPane .composer > #scriptsBtn{
min-height:44px!important;
}
#chatPane .composer > #sendBtn{
flex-shrink:0!important;
margin-left:auto!important;
}
}
/* UPLY_MOBILE_COMPOSER_67: a full typing row and a compact action row.
Explicit tracks also override the Android WebView's injected flex layout. */
@media(max-width:800px){
#chatPane .composer{
display:grid!important;
grid-template-columns:44px 44px 44px minmax(44px,1fr) 44px;
grid-template-rows:auto 44px;
gap:6px!important;
align-items:end!important;
flex:0 0 auto!important;
min-width:0;
padding:8px 8px max(8px,env(safe-area-inset-bottom))!important;
box-sizing:border-box;
}
#chatPane .composer > textarea#messageText{
grid-column:1/-1;
grid-row:1;
width:100%!important;
min-width:0!important;
max-width:100%!important;
min-height:48px!important;
margin:0!important;
font-size:16px!important;
}
#chatPane .composer > .composerEmojiWrap,
#chatPane .composer > .composerEmojiWrap > #composerEmojiBtn,
#chatPane .composer > #uplyScreenshotBtn,
#chatPane .composer > #scriptsBtn,
#chatPane .composer > #attachBtn,
#chatPane .composer > #sendBtn{
grid-row:2;
width:44px!important;
min-width:44px!important;
max-width:44px!important;
height:44px!important;
min-height:44px!important;
max-height:44px!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
align-self:end!important;
justify-self:start;
}
#chatPane .composer > .composerEmojiWrap{grid-column:1}
#chatPane .composer > #uplyScreenshotBtn{grid-column:2}
#chatPane .composer > #scriptsBtn{grid-column:3}
#chatPane .composer > #attachBtn{grid-column:4}
#chatPane .composer > #sendBtn{grid-column:5;font-size:0!important}
#chatPane .composer > #sendBtn::after{content:"➤";font-size:20px!important;line-height:1!important}
}
/* UPLY_WEB_MESSAGE_ACTIONS_69: actions stay inside every bubble, before its timestamp. */
#messages > .msg.uplyMessageActions69{
min-width:min(340px,94%)!important;
box-sizing:border-box;
}
#messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto;
align-items:end!important;
gap:8px!important;
margin-top:8px!important;
}
#messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 > .msgActions{
position:static!important;inset:auto!important;transform:none!important;
display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;
align-items:center!important;gap:3px!important;margin:0!important;padding:0!important;
width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;
opacity:1!important;overflow:visible!important;
}
#messages > .msg.uplyMessageActions69 .msgFooter .msgActions > button{
width:24px!important;min-width:24px!important;height:24px!important;padding:0!important;
}
#messages > .msg.uplyMessageActions69 .msgFooter .msgActions > .msgLeadBtn68{
width:auto!important;min-width:46px!important;padding:0 4px!important;
}
#messages > .msg.uplyMessageActions69 .uplyMessageStamp69{
display:flex;align-items:center;justify-content:flex-end;gap:5px;white-space:nowrap;
padding-bottom:3px;
}
@media(max-width:800px){
#messages > .msg.uplyMessageActions69{max-width:94%!important;}
}
/* UPLY_ANDROID_PROFILE_DECOR_79: avoid profile overflow and reveal the selected
conversation background underneath the native chat's two opaque layers. */
body.uplyNativeMobile .uplyProfileDecorBlock{
display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0;
}
body.uplyNativeMobile .uplyProfileDecorBlock>div{min-width:0;}
body.uplyNativeMobile .uplyProfileDecorBlock button{
box-sizing:border-box;width:100%;max-width:100%;min-width:0;
white-space:normal;overflow-wrap:anywhere;text-align:center;
}
html[data-uply-decor]:not([data-uply-decor="classic"]) body.uplyNativeMobile #chatPane,
html[data-uply-decor]:not([data-uply-decor="classic"]) body.uplyNativeMobile .chatPane,
html[data-uply-decor]:not([data-uply-decor="classic"]) body.uplyNativeMobile .messages{
background:transparent!important;
}
/* UPLY_CONTACT_CARD_ROLES_80: tint the recipient card itself, without adding
an overlay or changing its contents, layout, or click targets. */
#chatPane .chatTargetCard[data-contact-role="tutor"]{
--uply-role-card-bg:#e8f7ef;--uply-role-card-line:#b9dfca;--uply-role-card-ink:#137a4c;
}
#chatPane .chatTargetCard[data-contact-role="parent"]{
--uply-role-card-bg:#fff2df;--uply-role-card-line:#ead0a5;--uply-role-card-ink:#a45c00;
}
#chatPane .chatTargetCard[data-contact-role="student"]{
--uply-role-card-bg:#e8f0ff;--uply-role-card-line:#c1d3f5;--uply-role-card-ink:#245fd2;
}
#chatPane .chatTargetCard[data-contact-role]{
background:var(--uply-role-card-bg)!important;
border-color:var(--uply-role-card-line)!important;
}
#chatPane .chatTargetCard[data-contact-role] .chatTargetLabel,
#chatPane .chatTargetCard[data-contact-role] #chatChannel{color:#50677f!important;}
#chatPane .chatTargetCard[data-contact-role] #chatHeaderRoleBadge{
background:transparent!important;color:var(--uply-role-card-ink)!important;
}
html[data-uply-web-theme="dark"] #chatPane .chatTargetCard[data-contact-role="tutor"],
html[data-uply-theme="dark"] body.uplyNativeMobile #chatPane .chatTargetCard[data-contact-role="tutor"]{
--uply-role-card-bg:#123d2c;--uply-role-card-line:#31684e;--uply-role-card-ink:#8ce4ba;
}
html[data-uply-web-theme="dark"] #chatPane .chatTargetCard[data-contact-role="parent"],
html[data-uply-theme="dark"] body.uplyNativeMobile #chatPane .chatTargetCard[data-contact-role="parent"]{
--uply-role-card-bg:#4b3114;--uply-role-card-line:#79542e;--uply-role-card-ink:#ffd39a;
}
html[data-uply-web-theme="dark"] #chatPane .chatTargetCard[data-contact-role="student"],
html[data-uply-theme="dark"] body.uplyNativeMobile #chatPane .chatTargetCard[data-contact-role="student"]{
--uply-role-card-bg:#17345e;--uply-role-card-line:#365d92;--uply-role-card-ink:#9ec2ff;
}
html[data-uply-web-theme="dark"] #chatPane .chatTargetCard[data-contact-role] .chatTargetLabel,
html[data-uply-theme="dark"] body.uplyNativeMobile #chatPane .chatTargetCard[data-contact-role] .chatTargetLabel,
html[data-uply-web-theme="dark"] #chatPane .chatTargetCard[data-contact-role] #chatChannel,
html[data-uply-theme="dark"] body.uplyNativeMobile #chatPane .chatTargetCard[data-contact-role] #chatChannel{
color:#b3c3d4!important;
}
/* UPLY_REACTION_POPOVER_81: right of the action row; viewport-safe fallback. */
body > .reactionPicker.uplyReactionPopover81.open{
position:fixed!important;display:flex!important;flex-wrap:wrap!important;
right:auto!important;bottom:auto!important;margin:0!important;width:max-content!important;
box-sizing:border-box;gap:3px;padding:6px;overflow:auto!important;
white-space:normal;z-index:1500;overscroll-behavior:contain;
}
body > .reactionPicker.uplyReactionPopover81 .reactionChoice{flex:0 0 36px;color:#223957!important;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;}
body > .reactionPicker.uplyReactionPopover81 .reactionChoice[aria-pressed="true"]{
background:#dce9ff!important;box-shadow:inset 0 0 0 2px #6596e9!important;
}
html[data-uply-web-theme="dark"] body > .reactionPicker.uplyReactionPopover81,
html[data-uply-theme="dark"] body.uplyAndroidApp > .reactionPicker.uplyReactionPopover81{
background:#17283f;border-color:#476185;
}
html[data-uply-web-theme="dark"] body > .reactionPicker.uplyReactionPopover81 .reactionChoice,
html[data-uply-theme="dark"] body.uplyAndroidApp > .reactionPicker.uplyReactionPopover81 .reactionChoice{color:#f3f7ff!important;}
html[data-uply-web-theme="dark"] body > .reactionPicker.uplyReactionPopover81 .reactionChoice[aria-pressed="true"],
html[data-uply-theme="dark"] body.uplyAndroidApp > .reactionPicker.uplyReactionPopover81 .reactionChoice[aria-pressed="true"]{
background:#294d7a!important;
}
@media(max-width:800px){
body > .reactionPicker.uplyReactionPopover81 .reactionChoice{width:44px!important;min-width:44px!important;height:44px!important;flex-basis:44px;}
}
/* UPLY_NATIVE_REACTIONS_87: one aggregate chip per native reaction, including
our selection; the provider count remains visible in that same chip. */
.reactionSummary87{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px;}
.reactionSummary87 .providerReactionChip{
display:inline-flex;align-items:center;justify-content:center;gap:3px;
box-sizing:border-box;width:auto!important;min-width:30px;height:28px;margin:0;
padding:2px 6px!important;border:1px solid #d2def1;border-radius:12px;
background:#f6f9ff;color:#223957;font-size:16px;line-height:1;
}
.reactionSummary87 .uplyOwnReaction87{border-color:#7da5e5!important;background:#e4efff!important;}
.reactionCount87{font:600 12px/1 system-ui,sans-serif;}
.uplyReactionAsset87{display:block;width:24px;height:24px;max-width:100%;object-fit:contain;}
.reactionChoice .uplyReactionAsset87{width:28px;height:28px;margin:auto;}
body > .reactionPicker.uplyReactionPopover81{width:324px!important;align-content:flex-start;}
.reactionNotice87{flex:1 0 100%;font:13px/1.35 system-ui,sans-serif;white-space:normal;padding:4px;}
.reactionRetry87{font:13px/1.35 system-ui,sans-serif;}
html[data-uply-web-theme="dark"] .reactionSummary87 .providerReactionChip,
html[data-uply-theme="dark"] .reactionSummary87 .providerReactionChip{background:#1c3451;color:#eef5ff;border-color:#476185;}
html[data-uply-web-theme="dark"] .reactionSummary87 .uplyOwnReaction87,
html[data-uply-theme="dark"] .reactionSummary87 .uplyOwnReaction87{background:#294d7a!important;border-color:#84b4ff!important;}
@media(max-width:600px){
#messages > .msg.uplyMessageActions69{min-width:0!important;}
#messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69{
grid-template-columns:minmax(0,1fr)!important;gap:5px!important;
}
#messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 > .msgActions{width:100%!important;}
#messages > .msg.uplyMessageActions69 .uplyMessageStamp69{justify-self:end;}
}
/* UPLY_WEB_CHAT30_V1_BEGIN */
/* Desktop web only. Keep the native applications and mobile layout unchanged. */
@media (min-width: 801px) {
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages {
/* Percentage padding follows the chat pane, including when the sidebar changes. */
padding-inline: max(22px, calc(50% - 660px)) !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg {
font-size: 1.3em;
line-height: 1.4;
padding: 13px 18.2px 14.3px !important;
border-radius: 23.4px !important;
max-width: 82% !important;
overflow-wrap: anywhere;
flex-shrink: 0;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.uplyMessageActions69 {
min-width: min(442px, 82%) !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgText {
font-size: inherit;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgSender {
font-size: 14.3px;
margin-bottom: 6.5px;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgFooter {
font-size: 13px;
line-height: 1.3;
gap: 10px !important;
margin-top: 10px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgChecks {
font-size: 15.6px;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgActions {
gap: 4px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgFooter .msgActions > button {
width: 31.2px !important;
min-width: 31.2px !important;
height: 31.2px !important;
font-size: 14.3px !important;
border-radius: 9px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgFooter .msgActions > .msgLeadBtn68 {
width: auto !important;
min-width: 60px !important;
padding-inline: 5px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgReplyQuote {
padding: 9px 12px;
margin-bottom: 9px;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgReplyQuote b,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgReplyQuote span,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .mediaMeta,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .fileInfo a {
font-size: 14.3px;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .voiceTranscript,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .reactionSummary87 .providerReactionChip,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .reactionCount87 {
font-size: 15.6px;
}
/* Preserve the original visual grouping of consecutive messages. */
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.in.uplyGroupStart,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.in.uplyGroupMiddle {
border-bottom-left-radius: 9px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.in.uplyGroupMiddle,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.in.uplyGroupEnd {
border-top-left-radius: 9px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.out.uplyGroupStart,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.out.uplyGroupMiddle {
border-bottom-right-radius: 9px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.out.uplyGroupMiddle,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.out.uplyGroupEnd {
border-top-right-radius: 9px !important;
}
}
/* UPLY_WEB_CHAT30_V1_END */
/* UPLY_WEB_CHAT_DESKTOP_V3_BEGIN */
@media (min-width: 801px) {
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages {
container: uplyWebMessages / inline-size;
padding: 18px max(20px, calc(50% - 720px)) !important;
gap: 8px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg {
display: flow-root;
width: fit-content;
min-width: 0 !important;
max-width: min(86%, 900px) !important;
padding: 8px 12px !important;
border-radius: 17px !important;
line-height: 1.3;
white-space: normal;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.uplyMessageActions69 { min-width: 0 !important; }
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg > .reactionSummary87:not(:has(> :not(.hidden))) { display: none; }
/* This is the repeated chat title, not a distinct group-message author. */
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg > .msgSender { display: none; }
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg > .msgText {
display: inline;
white-space: pre-wrap;
margin: 0;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg > .msgFooter {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-end !important;
align-items: end !important;
gap: 6px !important;
margin-top: 4px !important;
font-size: 12px;
line-height: 1.2;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .uplyMessageStamp69 { padding-bottom: 0; }
body:not(.uplyAndroidApp):not(.uplyNativeMobile).uplyMessageSelecting #messages > .msg {
margin-left: 28px !important;
cursor: pointer !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile).uplyMessageSelecting #messages > .msg::before {
content: "" !important;
display: grid !important;
place-items: center;
position: absolute;
left: -28px;
top: 50%;
transform: translateY(-50%);
width: 21px;
height: 21px;
border: 2px solid #86a4cc;
border-radius: 50%;
background: #fff;
color: #fff;
font: 700 14px/1 sans-serif;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile).uplyMessageSelecting #messages > .msg.msgMultiSelected::before {
content: "✓" !important;
border-color: #397ae2;
background: #397ae2;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile).uplyMessageSelecting #messages > .msg.msgMultiSelected {
box-shadow: 0 0 0 2px #79a9ee, 0 3px 12px rgba(39, 73, 126, .08) !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile).uplyMessageSelecting #messages .msgText,
body:not(.uplyAndroidApp):not(.uplyNativeMobile).uplyMessageDragSelect3 #messages {
user-select: none !important;
-webkit-user-select: none !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile).uplyMessageSelecting #messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 > .msgActions {
opacity: 0 !important;
pointer-events: none !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messageSelectionBar {
min-height: 46px;
gap: 12px;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgFooter .msgActions > button {
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
font-size: 14px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgFooter .msgActions > .msgLeadBtn68 {
width: auto !important;
min-width: 56px !important;
}
/* A wide chat has room for its actions beside the bubble. No layout shift,
overlap with text, or clipping above the first/below the last message. */
@media (hover: hover) and (pointer: fine) {
@container uplyWebMessages (min-width: 900px) {
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg {
max-width: min(900px, calc(100% - 300px)) !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg > .msgFooter {
display: inline-flex !important;
float: right;
margin: 8px 0 0 12px !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg > .msgFooter > .msgActions {
position: absolute !important;
inset: auto !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
width: max-content !important;
max-width: 292px !important;
padding: 5px !important;
border: 1px solid #d9e5f4;
border-radius: 11px;
background: #fff;
box-shadow: 0 3px 12px rgba(40, 70, 110, .12);
opacity: 0 !important;
pointer-events: none;
transition: opacity .12s ease;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.in > .msgFooter > .msgActions {
left: calc(100% + 5px) !important;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.out > .msgFooter > .msgActions {
right: calc(100% + 5px) !important;
}
/* Bridge the five-pixel gap so the toolbar stays open while entering it. */
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgActions::before {
content: "";
position: absolute;
inset: 0 -7px;
z-index: -1;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg:hover > .msgFooter > .msgActions,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg:focus-within > .msgFooter > .msgActions,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg.msgMultiSelected > .msgFooter > .msgActions {
opacity: 1 !important;
pointer-events: auto;
}
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg:hover,
body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg:focus-within { z-index: 10; }
html[data-uply-web-theme="dark"] body:not(.uplyAndroidApp):not(.uplyNativeMobile) #messages > .msg .msgActions {
background: #17283f;
border-color: #476185;
}
}
}
}
/* UPLY_WEB_CHAT_DESKTOP_V3_END */
/* UPLY_WORKSPACE_V4_STYLE_BEGIN */
.uplyMobileMessageMore4 { display:none; }
/* Selection controls are shared by web and the existing mobile WebView. */
body #messageSelectionBar {
min-height:62px; padding:9px 14px; gap:12px; flex-wrap:wrap;
}
body #messageSelectionCount { font-size:14px; }
body #messageSelectionBar .messageSelectionActions { gap:8px; flex-wrap:wrap; }
body #messageSelectionBar .messageSelectionActions > button {
min-height:44px !important; min-width:44px; padding:10px 16px !important;
font-size:15px !important; border-radius:12px !important;
}
body #messageSelectionBar .messageSelectionActions > button > span { display:inline; }
body #messageSelectionBar button:disabled { opacity:.45; cursor:default; }
#uplyReplyChoices4 { display:grid; gap:8px; margin:12px 0; max-height:48vh; overflow:auto; }
#uplyReplyChoices4 > button { text-align:left; padding:12px; background:#edf4ff; color:#254c80; display:grid; gap:6px; }
#uplyReplyChoices4 > button b { font-size:12px; }
#uplyReplyChoices4 > button span { font-size:15px; white-space:pre-wrap; overflow-wrap:anywhere; font-weight:400; }
html[data-uply-web-theme="dark"] #uplyReplyChoices4 > button,
html[data-uply-theme="dark"] #uplyReplyChoices4 > button { background:#1a304b; color:#dbeaff; }
@media (min-width:801px) {
body.uplyWorkspace4 #app {
display:grid !important; grid-template-columns:clamp(178px, 13vw, 230px) minmax(0,1fr);
grid-template-rows:minmax(0,1fr); height:100vh !important; height:100dvh !important;
min-height:0 !important; max-width:none !important; padding:0 !important; margin:0 !important; gap:0 !important;
}
body.uplyWorkspace4 #app.hidden { display:none !important; }
body.uplyWorkspace4 #uplyWorkspaceRail4 {
display:flex; flex-direction:column; gap:6px; min-width:0; min-height:0; overflow:auto;
padding:16px 12px 12px; background:#f5f9ff; border-right:1px solid #d8e5f5;
scrollbar-width:thin; overscroll-behavior:contain;
}
body.uplyWorkspace4 #uplyWorkspaceRail4 > header,
body.uplyWorkspace4 #uplyWorkspaceRail4 .headerActions { display:contents !important; }
body.uplyWorkspace4 #uplyWorkspaceRail4 .uplyBrand { order:0; flex-shrink:0; margin:0 0 9px; gap:9px; }
body.uplyWorkspace4 #uplyWorkspaceRail4 .uplyBrandIcon { width:38px !important; height:38px !important; flex:0 0 38px !important; }
body.uplyWorkspace4 #uplyWorkspaceRail4 .uplyBrandText { font-size:22px !important; white-space:normal; line-height:1.1; }
body.uplyWorkspace4 #uplyWorkspaceRail4 .uplyBrandText em { display:block; font-size:10px !important; margin-top:4px; }
body.uplyWorkspace4 #uplyWorkspaceRail4 .headerActions > button {
order:5; width:100%; flex:0 0 auto; min-height:36px; padding:8px 10px !important; font-size:14px !important;
text-align:left; white-space:normal; border-radius:10px !important; box-shadow:none !important;
justify-content:flex-start; margin:0; background:transparent !important; color:#385681 !important; border:0 !important;
}
body.uplyWorkspace4 #uplyWorkspaceRail4 .headerActions > button:hover { background:#e6efff !important; transform:none !important; }
body.uplyWorkspace4 #uplyWorkspaceRail4 #newLeadBtn {
order:1; min-height:44px; text-align:center; margin-bottom:8px;
background:linear-gradient(115deg,#438dff,#1766ff) !important; color:white !important;
}
body.uplyWorkspace4.uplyAdminCompact #uplyWorkspaceRail4 #appDownloadBtn,
body.uplyWorkspace4.uplyAdminCompact #uplyWorkspaceRail4 #addVkBtn,
body.uplyWorkspace4.uplyAdminCompact #uplyWorkspaceRail4 #addAccountBtn { display:none !important; }
body.uplyWorkspace4 #uplyWorkspaceRail4 #filters,
body.uplyWorkspace4 #uplyWorkspaceRail4 #roleFilters {
display:flex !important; flex-direction:column; align-items:stretch !important; width:100%; height:auto !important;
min-height:0 !important; padding:0 !important; margin:0 !important; gap:4px !important;
overflow:visible !important; flex:0 0 auto !important; border:0 !important; background:transparent !important;
}
body.uplyWorkspace4 #uplyWorkspaceRail4 #filters { order:2; }
body.uplyWorkspace4 #uplyWorkspaceRail4 #roleFilters { order:3; padding-bottom:16px !important; margin-bottom:auto !important; }
body.uplyWorkspace4 #filters::before, body.uplyWorkspace4 #roleFilters::before {
content:'КАНАЛЫ'; display:block; padding:8px 8px 5px; font-size:11px; letter-spacing:.04em; font-weight:800; color:#7b91af;
}
body.uplyWorkspace4 #roleFilters::before { content:'КОНТАКТЫ'; padding-top:18px; }
body.uplyWorkspace4 #uplyWorkspaceRail4 #filters > button,
body.uplyWorkspace4 #uplyWorkspaceRail4 #roleFilters > button {
display:flex; align-items:center; gap:8px; width:100%; min-height:36px; margin:0 !important;
padding:8px 10px !important; border:1px solid transparent !important; border-radius:10px !important;
text-align:left; white-space:normal; overflow-wrap:anywhere; font-size:14px !important;
line-height:1.2; box-shadow:none !important; outline:none !important; flex:0 0 auto;
}
body.uplyWorkspace4 #uplyWorkspaceRail4 #filters > button.active,
body.uplyWorkspace4 #uplyWorkspaceRail4 #roleFilters > button.active {
border-color:#82b2fc !important; box-shadow:inset 3px 0 #367bff !important; font-weight:850;
}
body.uplyWorkspace4 #roleFilters .roleFilterBadge { margin-left:auto; flex-shrink:0; }
body.uplyWorkspace4 #uplyWorkspaceRail4 #logoutBtn { order:8; border-top:1px solid #d8e5f5 !important; border-radius:0 !important; margin-top:7px; padding-top:13px !important; }
body.uplyWorkspace4 #app > main {
display:grid !important; grid-template-columns:clamp(280px,22vw,382px) minmax(0,1fr) !important;
min-width:0; min-height:0; height:100% !important; margin:0 !important; gap:0 !important; padding:0 !important;
}
body.uplyWorkspace4 #app > main > aside { min-width:0; width:auto !important; border-radius:0 !important; padding:0 !important; }
body.uplyWorkspace4 #app > main > .conversation { position:relative !important; inset:auto !important; height:100%; border-radius:0 !important; container:uplyConversation4 / inline-size; }
body.uplyWorkspace4 .sideTop { height:auto !important; min-height:104px !important; flex:0 0 auto; padding:13px 12px 10px !important; gap:7px !important; }
body.uplyWorkspace4 .sideTop #activeCaption { font-size:16px; text-transform:none; color:#254672; }
body.uplyWorkspace4 .sideTop #chatSearch { height:38px; font-size:14px; }
body.uplyWorkspace4 .sideTop #studyOnly47 { display:none !important; }
body.uplyWorkspace4 .sideTop #clearChannelNotificationsBtn { font-size:10px !important; padding:6px !important; }
body.uplyWorkspace4 #chatList { padding:0 5px 8px !important; }
body.uplyWorkspace4 #chatList .chatRow {
padding:9px 10px !important; margin:0 0 2px !important; min-height:82px !important;
border-radius:8px !important; border-width:0 0 1px 3px !important; border-bottom-color:#dbe6f4 !important;
box-shadow:none !important;
}
body.uplyWorkspace4 #chatList .chatRow.active,
body.uplyWorkspace4 #chatList .chatRow.uplyCurrentChat4 { background:#e6f0ff !important; }
body.uplyWorkspace4 #chatList .chatTop { margin-bottom:3px; }
body.uplyWorkspace4 #chatList .chatTitleRoleWrap > b {
display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2 !important;
line-clamp:2 !important; overflow:hidden !important; line-height:1.22 !important; font-size:15px !important;
}
body.uplyWorkspace4 #chatList .chatTags47r3 { flex-wrap:nowrap; overflow:hidden; gap:3px; }
body.uplyWorkspace4 #chatList .chatTags47r3 > * { flex:0 1 auto; min-width:0; }
body.uplyWorkspace4 #chatList .chatTags47r3 .contactGroup47r3 { white-space:nowrap; padding:2px 5px !important; font-size:10px !important; }
body.uplyWorkspace4 #chatList .chatTags47r3 .linkedContactChip {
white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; padding:2px 5px !important; font-size:10px !important;
}
body.uplyWorkspace4 #chatList .contactRoleBadge { padding:2px 5px !important; font-size:10px !important; flex-shrink:0; }
body.uplyWorkspace4 #chatList .chatDetails55 .rowMenuBtn { width:25px !important; height:22px !important; flex-basis:25px; }
body.uplyWorkspace4 #chatList .chatTopRight { gap:3px; }
body.uplyWorkspace4 #chatList .channelTag { font-size:10px !important; margin-top:1px; }
body.uplyWorkspace4 #chatList .preview { font-size:13px !important; margin-top:3px; }
body.uplyWorkspace4 #chatPane { height:100% !important; min-height:0; }
body.uplyWorkspace4 #chatPane > .chatHeader { min-height:80px !important; padding:10px 16px !important; gap:8px; }
body.uplyWorkspace4 #chatPane .chatTargetCard {
display:flex; flex-wrap:wrap; gap:5px 8px; align-items:center; min-width:0;
padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important;
}
body.uplyWorkspace4 #chatPane .chatTargetCard .chatTargetLabel,
body.uplyWorkspace4 #chatPane .chatTargetCard #chatChannel { display:none !important; }
body.uplyWorkspace4 #chatPane .chatTargetCard #chatTitle {
flex:0 0 100%; width:100%; max-width:100% !important; font-size:20px !important; line-height:1.25 !important; margin:0;
display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden !important;
}
body.uplyWorkspace4 #chatPane #chatHeaderRoleBadge { order:1; margin:0 !important; font-size:11px !important; background:var(--uply-role-card-bg) !important; padding:3px 8px; }
body.uplyWorkspace4 #chatPane #chatLinkedTutorWrap { order:2; margin:0; gap:4px; flex:1 1 auto; }
body.uplyWorkspace4 #chatPane #chatLinkedTutorWrap .linkedContactChip { font-size:11px !important; padding:3px 7px !important; max-width:280px; }
body.uplyWorkspace4 #chatPane #replyVia { flex:0 0 auto; max-width:160px; overflow-wrap:anywhere; }
body.uplyWorkspace4 #chatPane #replyVia > span { display:none; }
body.uplyWorkspace4 #chatPane #replyVia > b { font-size:13px; }
body.uplyWorkspace4 #chatPane #chatHeaderActions { order:3; margin:0 !important; }
body.uplyWorkspace4 #messages { min-height:0 !important; padding:16px 24px !important; }
body.uplyWorkspace4 #chatPane .composer { padding:10px 14px !important; }
body.uplyWorkspace4 #messages > .msg.uplyMessageActions69 .msgFooter .msgActions > .msgReplyBtn,
body.uplyWorkspace4 #messages > .msg.uplyMessageActions69 .msgFooter .msgActions > .msgForwardBtn { width:36px !important; height:36px !important; min-width:36px !important; font-size:19px !important; }
body.uplyWorkspace4 #messages > .msg .msgActions { align-items:center !important; }
@container uplyWebMessages (min-width:900px) {
body.uplyWorkspace4 #messages > .msg { max-width:min(900px, calc(100% - 335px)) !important; }
body.uplyWorkspace4 #messages > .msg > .msgFooter > .msgActions { max-width:328px !important; }
}
@container uplyWebMessages (max-width:899px) {
body.uplyWorkspace4 #messages > .msg > .msgFooter > .msgActions {
position:static !important; display:flex !important; flex-wrap:wrap !important; transform:none !important;
opacity:1 !important; width:auto !important; max-width:100% !important; pointer-events:auto;
}
body.uplyWorkspace4.uplyMessageSelecting #messages > .msg > .msgFooter > .msgActions { display:none !important; }
}
@container uplyConversation4 (max-width:550px) {
body.uplyWorkspace4 #chatPane .composer { flex-wrap:wrap; gap:6px !important; }
body.uplyWorkspace4 #chatPane .composer > #messageText { order:0 !important; width:100% !important; min-width:100% !important; flex:0 0 100% !important; min-height:44px !important; }
body.uplyWorkspace4 #chatPane .composer > :not(#messageText) { order:1 !important; }
body.uplyWorkspace4 #chatPane .composer > #sendBtn { margin-left:auto; font-size:13px !important; padding-inline:10px !important; }
}
@media(max-width:1100px) {
body.uplyWorkspace4 #app { grid-template-columns:178px minmax(0,1fr); }
body.uplyWorkspace4 #app > main { grid-template-columns:270px minmax(0,1fr) !important; }
body.uplyWorkspace4 #messages { padding-inline:16px !important; }
body.uplyWorkspace4 #chatPane > .chatHeader { padding:8px 10px !important; }
body.uplyWorkspace4 #chatPane .chatTargetCard #chatTitle { font-size:17px !important; }
body.uplyWorkspace4 #chatPane #replyVia { max-width:75px; padding:6px !important; }
body.uplyWorkspace4 #messageSelectionBar .messageSelectionActions { gap:4px; }
body.uplyWorkspace4 #messageSelectionBar .messageSelectionActions > button { font-size:13px !important; padding:8px 10px !important; }
}
html[data-uply-web-theme="dark"] body.uplyWorkspace4 #uplyWorkspaceRail4 { background:#101e31; border-color:#293e58; }
html[data-uply-web-theme="dark"] body.uplyWorkspace4 #uplyWorkspaceRail4 .headerActions > button { color:#c8dcf9 !important; }
html[data-uply-web-theme="dark"] body.uplyWorkspace4 #uplyWorkspaceRail4 .headerActions > button:hover { background:#213753 !important; }
html[data-uply-web-theme="dark"] body.uplyWorkspace4 #chatList .chatRow.active,
html[data-uply-web-theme="dark"] body.uplyWorkspace4 #chatList .chatRow.uplyCurrentChat4 { background:#18365a !important; }
html[data-uply-web-theme="dark"] body.uplyWorkspace4 #activeCaption { color:#c8dcf9; }
}
/* Only message bubbles and selection change on mobile, never the navigation. */
body.uplyTouchMessages4 #messages { gap:7px !important; }
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69 {
display:flow-root; width:fit-content; min-width:0 !important; max-width:calc(100% - 24px) !important;
padding:8px 11px !important; margin-top:0 !important; margin-bottom:0 !important;
font-size:16px !important; line-height:1.35; white-space:normal; border-radius:16px !important;
touch-action:pan-y pinch-zoom; -webkit-touch-callout:none;
}
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69 > .msgSender { display:none; }
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69 > .msgText { display:inline; white-space:pre-wrap; font-size:inherit; user-select:none; -webkit-user-select:none; }
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69 > .reactionSummary87:not(:has(> :not(.hidden))) { display:none; }
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 {
display:flex !important; justify-content:flex-end; align-items:center !important; flex-wrap:wrap;
gap:4px !important; margin:1px 0 0 !important; font-size:10px;
}
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 > .uplyMobileMessageMore4 {
display:inline-flex; justify-content:center; align-items:center; width:44px; min-width:44px; height:32px;
padding:0; font-size:23px; line-height:1; color:#5578a9; background:transparent; box-shadow:none;
}
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 > .msgActions { display:none !important; }
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69.uplyMobileActionsOpen4 > .msgFooter.uplyMessageFooter69 > .msgActions {
display:flex !important; position:static !important; transform:none !important; flex-wrap:wrap !important;
width:100% !important; max-width:100% !important; flex:0 0 100%; margin:4px 0 !important; gap:4px !important;
opacity:1 !important; pointer-events:auto !important; justify-content:flex-end !important;
}
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 > .msgActions > button {
width:44px !important; min-width:44px !important; max-width:44px !important; flex:0 0 44px !important;
height:44px !important; min-height:44px !important; max-height:44px !important; font-size:19px !important;
}
body.uplyTouchMessages4 #messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 > .msgActions > .msgLeadBtn68 { width:auto !important; max-width:none !important; flex-basis:auto !important; font-size:14px !important; }
body.uplyTouchMessages4.uplyMessageSelecting #messages > .msg.uplyMessageActions69 { margin-left:25px !important; max-width:calc(100% - 28px) !important; }
body.uplyTouchMessages4.uplyMessageSelecting #messages > .msg.uplyMessageActions69::before {
content:'' !important; position:absolute; display:grid !important; place-items:center; left:-26px; top:50%; transform:translateY(-50%);
width:20px; height:20px; border:2px solid #8daaca; border-radius:50%; background:white; color:white; font:700 14px/1 sans-serif;
}
body.uplyTouchMessages4.uplyMessageSelecting #messages > .msg.uplyMessageActions69.msgMultiSelected::before { content:'✓' !important; background:#397ae2; border-color:#397ae2; }
body.uplyTouchMessages4.uplyMessageSelecting #messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 > .msgActions,
body.uplyTouchMessages4.uplyMessageSelecting #messages > .msg.uplyMessageActions69 > .msgFooter.uplyMessageFooter69 > .uplyMobileMessageMore4 { display:none !important; }
body.uplyTouchMessages4 #messageSelectionBar { padding:6px 8px; gap:5px; min-height:0; }
body.uplyTouchMessages4 #messageSelectionBar .messageSelectionActions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:4px; }
body.uplyTouchMessages4 #messageSelectionBar .messageSelectionActions > button { padding:8px 3px !important; font-size:12px !important; min-height:44px !important; }
body.uplyTouchMessages4 #messageSelectionBar .messageSelectionActions > button > span { display:block; font-size:10px; }
body.uplyTouchMessages4 #messageSelectionCount { font-size:12px; }
/* UPLY_WORKSPACE_V4_STYLE_END */
/* UPLY_CHAT_ACTIONS_V5_STYLE_BEGIN */
/* Restore only the existing role tint, keeping the compact header dimensions. */
@media(min-width:801px) {
body.uplyWorkspace4 #chatPane .chatTargetCard[data-contact-role] {
background:var(--uply-role-card-bg) !important;
border:1px solid var(--uply-role-card-line) !important;
border-radius:12px !important; padding:5px 12px !important;
}
body.uplyWorkspace4 #uplyWorkspaceRail4 #filters > button > .uplyChannelIcon5 {
display:block; width:24px; height:24px; flex:0 0 24px; object-fit:contain; border-radius:6px;
}
body.uplyWorkspace4 #uplyWorkspaceRail4 #filters > button:has(> .uplyChannelIcon5) { padding-block:5px !important; }
body.uplyWorkspace4 #uplyWorkspaceRail4 #filters > button > .uplyChannelLabel5 { min-width:0; text-align:left; }
body.uplyWorkspace4 #uplyWorkspaceRail4 #filters > button > .uplyChannelOffline5 { opacity:.4; }
}
.uplyChannelIcon5 { display:none; }
#chatPane #uplyOpenSearch5 { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; }
#chatPane #uplyMessageSearch5 { flex:0 0 auto; min-height:0; padding:8px 12px; border-bottom:1px solid #d7e4f5; background:#f7faff; color:#254672; z-index:2; }
#uplyMessageSearch5 .uplySearchInputRow5 { display:flex; gap:5px; align-items:center; }
#uplyMessageSearch5 input { width:100%; min-width:0; flex:1; height:38px; border:1px solid #b9d0ef; border-radius:9px; padding:8px 10px; background:#fff; color:#203c62; outline:none; font-size:14px; }
#uplyMessageSearch5 .uplySearchInputRow5 > button { width:36px; height:36px; flex:0 0 36px; padding:0; background:#e6effd; color:#315d9e; font-size:20px; }
#uplyMessageSearch5 button:disabled { opacity:.35; cursor:default; }
#uplyMessageSearch5 .uplySearchInfo5 { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px; font-size:12px; }
#uplyMessageSearch5 #uplySearchMore5 { font-size:11px; padding:5px 8px; flex-shrink:0; }
#uplyMessageSearch5 #uplySearchResults5 { max-height:min(190px,25vh); overflow:auto; display:grid; gap:4px; margin-top:5px; }
#uplyMessageSearch5 #uplySearchResults5:empty { margin:0; }
#uplySearchResults5 > button { display:grid; gap:3px; padding:7px 9px; width:100%; min-width:0; text-align:left; background:#fff; color:#315174; border:1px solid #e0eaf7; font-size:13px; border-radius:8px; }
#uplySearchResults5 > button > b { font-size:10px; color:#718aaa; }
#uplySearchResults5 > button > span { font-weight:400; overflow-wrap:anywhere; white-space:pre-wrap; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
#uplySearchResults5 > button.active { border-color:#4786e5; background:#eaf3ff; }
#uplyMessageSearch5 mark { background:#ffe29a; color:#3d392b; border-radius:2px; }
body #messages > .msg.uplySearchHit5 { outline:3px solid #f4bd45 !important; outline-offset:2px; }
html[data-uply-web-theme="dark"] #chatPane #uplyMessageSearch5,
html[data-uply-theme="dark"] #chatPane #uplyMessageSearch5 { background:#14243a; color:#d1e2f8; border-color:#324b6a; }
html[data-uply-web-theme="dark"] #uplyMessageSearch5 input,
html[data-uply-web-theme="dark"] #uplySearchResults5 > button,
html[data-uply-theme="dark"] #uplyMessageSearch5 input,
html[data-uply-theme="dark"] #uplySearchResults5 > button { background:#102033; color:#dae8f9; border-color:#345072; }
@media(max-width:800px) {
#chatPane #uplyMessageSearch5 { padding:6px 8px; }
#uplyMessageSearch5 input { font-size:16px; }
#uplyMessageSearch5 #uplySearchResults5 { max-height:150px; }
}
/* UPLY_CHAT_ACTIONS_V5_STYLE_END */
/* UPLY_SIDEBAR_STABLE_V6_STYLE_BEGIN */
@media(min-width:801px) {
/* Icon decoration changes padding after rendering. Never animate geometry:
the old transition:all rule made every channel briefly grow by 3px. */
body.uplyWorkspace4 #uplyWorkspaceRail4 #filters > button,
body.uplyWorkspace4 #uplyWorkspaceRail4 #roleFilters > button {
transform:none !important;
transition:background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}
/* Keep the row height when an unread badge appears or disappears. */
body.uplyWorkspace4 #uplyWorkspaceRail4 #roleFilters > button { min-height:38px !important; }
/* Equal square controls, centered next to the typing field. */
body.uplyWorkspace4 #chatPane .composer { align-items:center !important; gap:10px !important; }
body.uplyWorkspace4 #chatPane .composer > .composerEmojiWrap,
body.uplyWorkspace4 #chatPane .composer > #scriptsBtn,
body.uplyWorkspace4 #chatPane .composer > #attachBtn,
body.uplyWorkspace4 #chatPane .composer > .composerEmojiWrap > #composerEmojiBtn {
width:48px !important; min-width:48px !important; max-width:48px !important;
height:48px !important; min-height:48px !important; max-height:48px !important;
flex:0 0 48px !important; align-self:center !important; margin:0 !important; padding:0 !important;
display:flex !important; align-items:center !important; justify-content:center !important;
box-sizing:border-box !important;
}
body.uplyWorkspace4 #chatPane .composer > #sendBtn {
align-self:stretch !important; height:auto !important; min-height:48px !important; max-height:none !important;
min-width:142px !important; padding:12px 22px !important; font-size:16px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
flex:0 0 auto !important;
}
body.uplyWorkspace4 #chatPane .composer > button,
body.uplyWorkspace4 #chatPane .composer > .composerEmojiWrap > button { transform:none !important; }
@container uplyConversation4 (max-width:550px) {
body.uplyWorkspace4 #chatPane .composer { gap:6px !important; }
body.uplyWorkspace4 #chatPane .composer > #sendBtn { min-width:136px !important; padding:10px 14px !important; font-size:15px !important; }
}
}
/* Close the removed screenshot button's grid slot on phones. */
@media(max-width:800px) {
#chatPane .composer { grid-template-columns:44px 44px minmax(44px,1fr) 44px; }
#chatPane .composer > #scriptsBtn { grid-column:2; }
#chatPane .composer > #attachBtn { grid-column:3; }
#chatPane .composer > #sendBtn { grid-column:4; }
}
/* UPLY_SIDEBAR_STABLE_V6_STYLE_END */
/* UPLY_ALBUMS_V7_STYLE_BEGIN */
@media(min-width:801px) {
body.uplyWorkspace4 #chatPane .composer > #sendBtn {
height:64px !important; min-height:64px !important; max-height:64px !important;
align-self:center !important; min-width:142px !important;
}
@container uplyConversation4 (max-width:550px) {
body.uplyWorkspace4 #chatPane .composer > #sendBtn { height:56px !important; min-height:56px !important; max-height:56px !important; }
}
}
#messages > .msg:has(> .uplyAlbum7) { width:min(620px,100%) !important; }
#messages > .msg > .attachments.uplyAlbum7 {
display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr;
width:100%; max-width:580px; aspect-ratio:1.45; gap:4px !important; overflow:hidden; border-radius:12px;
}
#messages > .msg > .uplyAlbum7[data-count="3"] { aspect-ratio:1.2; }
#messages > .msg > .uplyAlbum7[data-count="3"] > :first-child { grid-row:span 2; }
#messages > .msg > .uplyAlbum7[data-count="4"] { aspect-ratio:1.3; }
#messages > .msg > .uplyAlbum7:is([data-count="5"],[data-count="6"],[data-count="7"],[data-count="8"],[data-count="9"],[data-count="10"]) { grid-template-columns:repeat(3,minmax(0,1fr)); aspect-ratio:1.25; }
#messages > .msg > .uplyAlbum7 > .mediaItem { min-width:0 !important; min-height:0; max-width:none !important; margin:0 !important; overflow:hidden; }
#messages > .msg > .uplyAlbum7 .imagePreviewOpen,
#messages > .msg > .uplyAlbum7 .messageImage,
#messages > .msg > .uplyAlbum7 video {
display:block !important; width:100% !important; height:100% !important;
min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important;
padding:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important;
object-fit:cover !important; transform:none !important; box-shadow:none !important;
}
#messages > .msg > .uplyAlbum7 .imagePreviewOpen { touch-action:pan-y pinch-zoom; user-select:none; -webkit-touch-callout:none; }
#messages > .msg > .uplyAlbum7 .messageImage { -webkit-user-drag:none; user-select:none; }
#messages > .msg > .uplyAlbum7 .mediaMeta { display:none !important; }
#messages > .msg > .uplyFilesGroup7 { display:grid; gap:6px; }
#messages > .msg > .uplyFilesGroup7 .fileItem { min-width:0; }
.uplyAlbumDeliveryHint7 { padding:8px 10px; margin:8px 0; border-radius:9px; background:#edf4ff; color:#365b8c; font-size:12px; }
html[data-uply-web-theme="dark"] .uplyAlbumDeliveryHint7,
html[data-uply-theme="dark"] .uplyAlbumDeliveryHint7 { background:#1a304b; color:#dbeaff; }
/* UPLY_ALBUMS_V7_STYLE_END */
/* UPLY_SMOOTH_MOBILE_V8_STYLE_BEGIN */
#messages > .msg > .attachments:not(.uplyAlbum7) .uplyStablePreview8 {
display:block !important; box-sizing:border-box; padding:0 !important;
width:var(--uply-preview-width,315px) !important; max-width:100% !important;
height:auto !important; aspect-ratio:var(--uply-media-ratio,.75);
min-height:0 !important; overflow:hidden; background:rgba(145,169,194,.12);
}
#messages > .msg > .attachments:not(.uplyAlbum7) .uplyStablePreview8 > .messageImage {
display:block !important; width:100% !important; height:100% !important;
max-width:none !important; max-height:none !important; object-fit:contain !important;
}
#messages > .msg > .attachments .uplyStableVideo8 { width:420px; max-width:100%; aspect-ratio:16/9; height:auto; }
#studyOnly47,#studyHeader47,.studyBadge { display:none !important; }
body.uplyTouchMessages4 #messages > .msg .msgActions,
body.uplyTouchMessages4 #messages > .msg .uplyMobileMessageMore4 { display:none !important; }
body.uplyTouchMessages4 #messages > .msg {
user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
touch-action:pan-y pinch-zoom; min-width:0 !important;
}
body.uplyTouchMessages4 #messages > .msg .imagePreviewOpen { touch-action:pan-y pinch-zoom; }
body.uplyTouchMessages4 #messages > .msg.msgMultiSelected {
box-shadow:0 0 0 2px #4c8fee !important;
}
body.uplyTouchMessages4 #messageSelectionBar { padding:8px !important; gap:6px !important; flex-wrap:wrap; }
body.uplyTouchMessages4 #messageSelectionCount { width:100%; font-size:13px !important; }
body.uplyTouchMessages4 #messageSelectionBar .messageSelectionActions {
display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) 44px; width:100%; gap:5px !important;
}
body.uplyTouchMessages4 #messageSelectionBar .messageSelectionActions > button {
min-width:0 !important; min-height:48px !important; height:48px !important;
padding:5px 3px !important; font-size:13px !important;
display:flex !important; align-items:center; justify-content:center; gap:3px;
}
body.uplyTouchMessages4 #messageSelectionBar .messageSelectionActions > button > span { display:inline !important; }
body.uplyTouchMessages4 #messageSelectionBar .messageSelectionActions > #messageSelectionCancel > span { display:none !important; }
body.uplyTouchMessages4 #messageSelectionCancel { font-size:21px !important; }
#uplyMessageMenu8 {
position:fixed; z-index:2200; inset:0; background:rgba(10,25,44,.16);
display:flex; align-items:flex-end; padding:10px 10px max(10px,env(safe-area-inset-bottom));
}
#uplyMessageMenu8 .uplyMessageSheet8 {
width:100%; max-width:440px; margin:0 auto; max-height:80dvh; overflow:auto;
border-radius:18px; padding:6px; background:var(--m-surface,#fff);
box-shadow:0 12px 45px rgba(10,30,60,.24);
}
#uplyMessageMenu8 .uplyMessageMenuPreview8 { color:var(--m-muted,#64748b); font-size:13px; padding:10px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid #dce5f1; }
#uplyMessageMenu8 button {
display:flex; align-items:center; gap:14px; width:100%; min-height:48px; padding:10px 14px;
color:var(--m-text,#1e3353); background:transparent; border:0 !important; border-radius:10px;
box-shadow:none !important; text-align:left; font-size:16px; font-weight:500; transform:none;
}
#uplyMessageMenu8 button:focus { outline:none; }
#uplyMessageMenu8 button:focus-visible { outline:2px solid #7ca8e7; outline-offset:-2px; }
body.uplyTouchMessages4 #messageSelectionBar svg { flex:0 0 17px; width:17px; height:17px; }
#uplyMessageMenu8 button:active { background:rgba(65,132,227,.12); }
#uplyMessageMenu8 button > span:first-child { width:24px; font-size:22px; text-align:center; color:#4279ba; }
/* UPLY_SMOOTH_MOBILE_V8_STYLE_END */
/* UPLY_MOBILE_COMPOSER_V9: three square tools on the left and one wide send button.
Important grid placement also overrides the older inline layout in Android. */
@media(max-width:800px) {
#chatPane .composer {
grid-template-columns:44px 44px 44px minmax(0,1fr) 94px !important;
}
#chatPane .composer > .composerEmojiWrap { grid-column:1 !important; }
#chatPane .composer > #scriptsBtn { grid-column:2 !important; }
#chatPane .composer > #attachBtn { grid-column:3 !important; }
#chatPane .composer > button#sendBtn {
grid-column:5 !important;
width:94px !important;
min-width:94px !important;
max-width:94px !important;
justify-self:end !important;
}
}
/* UPLY_CHAT_IMAGE_GALLERY_194: shared web / Android viewer, exact source-pixel zoom. */
body #imageViewer .imageViewerPanel{height:100dvh!important;min-height:0!important;overflow:hidden!important;align-items:stretch!important}
body #imageViewer .imageViewerToolbar{flex:0 0 auto;height:auto;min-height:50px;box-sizing:border-box;padding:6px 14px;gap:6px}
body #imageViewer .imageViewerToolbar button{flex:0 0 auto;cursor:pointer}
body #imageViewer .imageViewerCanvas{position:relative;flex:1 1 0;min-height:0;min-width:0}
body #imageViewer .imageViewerStage{position:absolute;inset:0;display:flex!important;align-items:normal!important;justify-content:normal!important;overflow:auto!important;min-height:0;min-width:0;padding:8px!important;touch-action:pan-y pinch-zoom;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body #imageViewer #imageViewerImg{flex:none;margin:auto;display:block;user-select:none;-webkit-user-drag:none;transition:none!important}
body #imageViewer .imageViewerNav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:64px;min-width:0;min-height:0;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(10,17,29,.65);color:#fff;padding:0;font:42px/1 system-ui;cursor:pointer;box-shadow:0 2px 12px #0003}
body #imageViewer .imageViewerPrev{left:12px}
body #imageViewer .imageViewerNext{right:12px}
body #imageViewer .imageViewerNav:disabled{opacity:.25;cursor:default}
body #imageViewer [hidden]{display:none!important}
body #imageViewer .imageViewerInfo{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 18px 4px;color:#fff;font-size:13px;line-height:1.35}
body #imageViewer #imageViewerScope{color:#aab6c8;font-size:11px;text-align:right}
body #imageViewer #imageViewerThumbs{flex:0 0 auto;display:flex;gap:8px;align-items:center;padding:5px 16px 8px;overflow-x:auto;overflow-y:hidden;min-width:0;max-width:100%;box-sizing:border-box;touch-action:pan-x;overscroll-behavior:contain;scrollbar-width:thin}
body #imageViewer .imageViewerThumb{flex:0 0 52px;display:block;min-width:52px;width:52px;height:56px;min-height:0;padding:2px;border:2px solid transparent;border-radius:7px;background:#192335;opacity:.58;cursor:pointer;overflow:hidden}
body #imageViewer .imageViewerThumb:first-child{margin-left:auto}
body #imageViewer .imageViewerThumb:last-child{margin-right:auto}
body #imageViewer .imageViewerThumb.active{border-color:#79a7ff;opacity:1;background:#79a7ff}
body #imageViewer .imageViewerThumb:hover{opacity:1}
body #imageViewer #imageViewerThumbs .imageViewerThumb img{display:block;width:44px!important;height:48px!important;max-width:none!important;max-height:none!important;object-fit:cover!important;border-radius:3px;pointer-events:none}
body #imageViewer .imageViewerCaption{flex:0 0 auto;height:auto!important;min-height:22px;max-height:26px;line-height:18px;margin:0;padding:0 16px max(4px,env(safe-area-inset-bottom));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:content-box;font-size:11px!important;color:#aab6c8!important}
body #imageViewer button:focus-visible{outline:2px solid #a9c5ff;outline-offset:2px}
@media(max-width:600px){
body #imageViewer .imageViewerToolbar{justify-content:center;gap:5px;padding: max(6px,env(safe-area-inset-top)) 7px 6px}
body #imageViewer .imageViewerToolbar button{min-width:34px;height:36px;border-radius:9px;padding:0 8px!important}
body #imageViewer .imageViewerNav{width:32px;height:52px;font-size:34px;border-radius:9px}
body #imageViewer .imageViewerPrev{left:6px}body #imageViewer .imageViewerNext{right:6px}
body #imageViewer .imageViewerInfo{padding:6px 12px 3px;font-size:12px;gap:8px}
body #imageViewer #imageViewerScope{font-size:10px}
body #imageViewer #imageViewerThumbs{padding:5px 10px 6px;gap:6px}
}
/* UPLY_MESSAGE_HISTORY_195: one quiet, reachable control above the loaded conversation. */
#messages > .uplyHistory195{align-self:stretch;flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 12px;min-height:42px;padding:5px 8px;box-sizing:border-box;text-align:center;color:#64748b;font-size:12px;overflow-wrap:anywhere}
#messages .uplyHistoryLoad195{min-height:32px;padding:5px 14px;font-size:12px;border-radius:16px;touch-action:manipulation}
#messages .uplyHistoryLoad195[hidden]{display:none!important}
#messages .uplyHistoryStatus195:empty{display:none}
#messages .uplyHistory195.error{color:#b45309}
html[data-uply-web-theme="dark"] #messages .uplyHistory195{color:#b9c6da}
html[data-uply-web-theme="dark"] #messages .uplyHistory195.error{color:#ffc98b}
@media(max-width:600px){#messages > .uplyHistory195{font-size:11px;gap:4px 8px}#messages .uplyHistoryLoad195{min-height:34px}}