#msgs{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
  overscroll-behavior:contain;padding:14px 14px 8px;display:flex;
  flex-direction:column;background:var(--bg-chat)}
.day,.sysmsg{max-width:86%;margin:10px auto 6px;text-align:center}
.day span,.sysmsg span{display:inline-block;padding:4px 12px;border-radius:999px;
  background:var(--chip);color:var(--chip-tx);font-size:12px;font-weight:600;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  letter-spacing:.2px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.unread-line{width:100%;display:flex;align-items:center;gap:10px;margin:12px 0}
.unread-line::before,.unread-line::after{content:"";flex:1;height:1px;
  background:rgba(59,158,255,.35)}
.unread-line span{padding:4px 12px;border-radius:999px;
  background:rgba(59,158,255,.18);color:var(--link);font-size:12px;font-weight:700}

.mrow{display:flex;width:100%;margin:2px 0;flex:none;align-items:flex-end;gap:6px;
  animation:none}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mrow.grouped{margin-top:1px}
.mrow.own{justify-content:flex-end}
.mrow.their{justify-content:flex-start}
.aspace{width:30px;flex:none}
.mrow .av{width:30px;height:30px;font-size:13px;cursor:pointer}
.bwrap{max-width:min(78%,440px);min-width:0;display:flex;flex-direction:column}
.mrow.own .bwrap{align-items:flex-end}













@keyframes flash{0%,100%{filter:brightness(1)}25%{filter:brightness(1.35)}}




.mention{color:var(--accent-2);font-weight:600;background:rgba(122,168,255,.12);
  border-radius:6px;padding:0 3px}










.del-txt{opacity:.65;font-style:italic}





.vplay{width:36px;height:36px;border-radius:50%;border:none;
  background:var(--accent);color:#fff;flex:none;font-size:14px;
  box-shadow:0 6px 14px rgba(59,158,255,.3)}
.vtrack{position:relative;height:28px;flex:1;min-width:100px}
.vtrack i,.vfill{position:absolute;bottom:4px;border-radius:2px;
  background:var(--muted);opacity:.55}
.vtrack i.on,.vfill.on{background:var(--accent);opacity:1}
.mrow.own .vtrack i,.mrow.own .vfill{background:rgba(255,255,255,.35)}
.mrow.own .vtrack i.on,.mrow.own .vfill.on{background:#fff;opacity:.95}
.vdur{font-size:12px;color:var(--muted);border:none;background:none;flex:none;
  font-family:inherit;cursor:pointer}








.action-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--panel);border-top:1px solid var(--line);flex:none}
.action-bar .q{flex:1;min-width:0;border-left:3px solid var(--accent);
  padding-left:8px;font-size:13px;color:var(--muted)}
.action-bar .q b{display:block;color:var(--link);font-size:12px}
.action-bar .q span{display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cancel-x{width:32px;height:32px;border:none;border-radius:10px;
  background:var(--panel-2);color:var(--muted);flex:none}
#scrollDown{position:absolute;right:14px;bottom:84px;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--text);box-shadow:0 8px 20px var(--shadow);z-index:4;font-size:18px}
#scrollDown.has-unread::after{content:attr(data-count);position:absolute;
  top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
#searchBar{display:flex;align-items:center;gap:8px;background:var(--panel);
  border-bottom:1px solid var(--line);padding:8px 12px;flex:none}
#searchBar input{flex:1;background:var(--panel-2);border:none;outline:none;
  color:var(--text);border-radius:12px;padding:9px 12px;font-size:15px}
#searchBar input:focus{box-shadow:0 0 0 2px rgba(59,158,255,.25)}
#searchBar button{background:none;border:none;color:var(--link);font-size:16px;
  padding:6px}
.cnt{font-size:12px;color:var(--muted);min-width:3ch;text-align:center}
/* Empty chat inside #msgs */
#msgs .empty-state.chat-empty,
#msgs .chat-empty {
  min-height: 55vh;
  justify-content: center;
}









/* Сообщения прижимаются к низу (как в Telegram), когда их мало */
#msgs::before {
  content: "";
  flex: 1 1 auto;
  min-height: 0;
  pointer-events: none;
}
#msgs .day,
#msgs .mrow,
#msgs .unread-line,
#msgs .sysmsg,
#msgs .empty-state {
  flex: 0 0 auto;
}
.mrow {
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}



/* Выравнивание сообщений: не уезжают в край */
.mrow {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.mrow.own {
  justify-content: flex-end !important;
  padding-right: 12px !important;
}
.mrow.their {
  justify-content: flex-start !important;
  padding-left: 10px !important;
}
.bwrap {
  max-width: min(75%, 420px) !important;
}


.mrow.their .bwrap:has(.vnote-bub) {
  max-width: none !important;
}

/* Lumo AI menu */
#aiMenu{position:absolute;right:8px;bottom:58px;width:250px;padding:8px;
  border:1px solid var(--line-strong);border-radius:18px;background:color-mix(in srgb,var(--panel) 94%,transparent);
  box-shadow:0 18px 55px rgba(0,0,0,.38);backdrop-filter:blur(18px);z-index:35}
#aiMenu .ai-head{padding:8px 10px 7px;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}
#aiMenu button{display:grid;grid-template-columns:28px 1fr;gap:9px;width:100%;border:0;background:transparent;color:var(--text);
  text-align:left;padding:9px 10px;border-radius:12px;cursor:pointer}
#aiMenu button:hover{background:var(--hover)}
#aiMenu .ai-ico{display:grid;place-items:center;font-size:17px}
#aiMenu b{display:block;font-size:13px}.aiMenu small{display:block;color:var(--muted);font-size:11px;margin-top:2px}


/* Системные записи о звонках */
.sysmsg.call-log span {
  background: color-mix(in srgb, var(--accent) 12%, var(--chip));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* v159: stable delivery states + fullscreen media */
#viewer{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;padding:24px;touch-action:none}
#viewer img,#viewer video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 20px 80px rgba(0,0,0,.5)}
#viewer video{background:#000}
#viewerClose{position:absolute;top:calc(var(--sat) + 14px);right:calc(var(--sar) + 14px);z-index:2;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(10,16,30,.72);color:#fff;font-size:18px}
#viewerCaption{position:absolute;left:50%;bottom:calc(var(--sab) + 18px);transform:translateX(-50%);background:rgba(10,16,30,.72);padding:8px 12px;border-radius:999px;color:#fff;font-size:13px}


.chat-head .icon-btn{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--muted);
}
.chat-head .icon-btn:hover{ color: var(--accent); }
.chat-head .icon-btn svg{ width: 20px; height: 20px; display: block; }
.channel-mode .ch-title::after{
  content:"✓";display:inline-grid;place-items:center;margin-left:6px;width:16px;height:16px;
  border-radius:50%;background:#2d8cff;color:#fff;font-size:11px;font-weight:900;vertical-align:1px;
}
.channel-mode #msgs{padding-top:8px}

/* Chat wallpapers from settings */
html[data-wp="1"] #msgs { background-image: radial-gradient(circle at 20% 20%, rgba(80,140,255,.12), transparent 40%), radial-gradient(circle at 80% 70%, rgba(140,90,255,.1), transparent 45%); }
html[data-wp="2"] #msgs { background-image: repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(100,140,255,.06) 12px); }
html[data-wp="3"] #msgs { background-image: repeating-linear-gradient(45deg, rgba(100,140,255,.07) 0 2px, transparent 2px 8px); }
html[data-wp="4"] #msgs { background-image: linear-gradient(90deg, rgba(100,140,255,.06) 1px, transparent 1px), linear-gradient(rgba(100,140,255,.06) 1px, transparent 1px); background-size: 20px 20px; }
html[data-wp="5"] #msgs { background-image: radial-gradient(circle at 20% 30%, rgba(91,143,255,.18), transparent 45%), radial-gradient(circle at 80% 70%, rgba(155,105,255,.14), transparent 45%); }
html[data-wp="0"] #msgs, html:not([data-wp]) #msgs { background-image: none; }