*{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;
  margin-top:7px;
}
.voiceTranscribeBtn{
  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{
  background:#eaf2ff !important;
}
.voiceTranscribeBtn:disabled{
  opacity:.65;
  cursor:wait;
}
.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_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;
  }
}