/* NOVA 13.3.2 · CLEAN UI LAYER
   Loaded after nova-final.css. This layer owns the final desktop geometry. */

@media(min-width:1221px){
  #app.app{
    grid-template-columns:60px 300px minmax(700px,1fr) 270px!important;
    grid-template-areas:"rail chats main info"!important;
    gap:8px!important;
    padding:8px!important;
  }
  #app.app.nova-right-collapsed{
    grid-template-columns:60px 300px minmax(760px,1fr)!important;
    grid-template-areas:"rail chats main"!important;
  }
  #app.app.nova-right-collapsed .nova-right-pane{display:none!important}

  /* Remove duplicated desktop folder strip "Все чаты +" */
  #app .chat-folder-bar{display:none!important}

  #app .sidebar{
    border-radius:18px!important;
    border-color:rgba(255,255,255,.055)!important;
    background:linear-gradient(180deg,#07101e,#050b15)!important;
    box-shadow:0 18px 52px rgba(0,0,0,.24)!important;
  }
  #app .topbar{padding:16px 12px 10px!important}
  #app .sidebar-section-label{margin-top:8px!important;padding:0 12px!important;color:#66758d!important;font-size:8.5px!important}
  #app .chat-filters{padding:4px 10px 7px!important;gap:4px!important}
  #app .chat-filter{min-height:29px!important;padding:0 9px!important;font-size:8.5px!important;border-radius:9px!important}
  #app .chatlist{padding:2px 7px 10px!important}
  #app .chatitem{min-height:72px!important;padding:10px!important;margin:2px 0!important;border-radius:13px!important}
  #app .chatitem .avatar{width:46px!important;height:46px!important;flex-basis:46px!important;border-radius:13px!important}
  #app .chatitem .name{font-size:12.5px!important;font-weight:900!important}
  #app .chatitem .preview{font-size:9.5px!important;color:#78879d!important}
  #app .chatitem-time{font-size:8.5px!important;color:#718096!important}
  #app .chatitem.active{
    border:1px solid rgba(107,90,255,.23)!important;
    background:linear-gradient(135deg,rgba(66,75,180,.20),rgba(75,48,143,.16))!important;
    box-shadow:inset 3px 0 #6d5cff!important;
  }

  /* Center becomes clearly dominant */
  #app .main{
    border-radius:18px!important;
    border-color:rgba(255,255,255,.07)!important;
    background:#050c17!important;
    box-shadow:0 22px 66px rgba(0,0,0,.30)!important;
  }
  #app .chatheader{
    min-height:70px!important;
    padding:10px 16px!important;
    background:rgba(5,12,22,.96)!important;
    border-bottom:1px solid rgba(255,255,255,.05)!important;
  }
  #app .chatheader .avatar{width:44px!important;height:44px!important}
  #app .chatheader .name{font-size:14px!important;font-weight:900!important}
  #app .chatheader .muted{font-size:10px!important}

  /* Visually keep only call, video, search, menu in header */
  #app .header-actions #smartChatBtn,
  #app .header-actions #nova12HubBtn,
  #app .header-actions #refreshBtn{display:none!important}
  #app .header-actions{gap:5px!important}
  #app .header-actions button{width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:12px!important;color:#8b9ab0!important}

  #app .messages{
    padding:34px clamp(34px,5vw,88px) 118px!important;
    scroll-padding-bottom:142px!important;
    background:radial-gradient(circle at 80% 34%,rgba(88,63,199,.06),transparent 28%),linear-gradient(180deg,#050c17,#040a13)!important;
  }
  #app .message-row{margin:7px 0!important}
  #app .bubble{
    max-width:min(760px,68%)!important;
    padding:12px 15px 10px!important;
    border-radius:16px!important;
    font-size:12.5px!important;
    line-height:1.5!important;
    border:1px solid rgba(255,255,255,.045)!important;
    background:#101a2a!important;
    box-shadow:none!important;
    position:relative!important;
  }
  #app .mine .bubble{
    border-color:rgba(116,92,238,.12)!important;
    background:linear-gradient(135deg,#373c92,#49317f)!important;
  }
  #app .sender{font-size:9.5px!important}
  #app .time{font-size:8px!important;color:rgba(210,219,235,.62)!important}

  #app .msg-actions{
    top:-33px!important;
    padding:3px!important;
    border:1px solid rgba(255,255,255,.055)!important;
    border-radius:10px!important;
    background:#09111e!important;
  }
  #app .msg-actions button{width:28px!important;height:28px!important}

  #app .composer-wrap{
    padding:12px clamp(26px,4.5vw,70px) 18px!important;
    background:linear-gradient(180deg,transparent,rgba(4,9,16,.90) 28%)!important;
  }
  #app .composer{
    max-width:960px!important;
    min-height:60px!important;
    border-radius:18px!important;
    background:#0b1422!important;
    border-color:rgba(255,255,255,.075)!important;
  }

  /* Right pane flattened */
  .nova-right-pane{
    border-radius:18px!important;
    border-color:rgba(255,255,255,.05)!important;
    background:linear-gradient(180deg,#07101d,#050b15)!important;
    box-shadow:0 18px 52px rgba(0,0,0,.22)!important;
  }
  .nova-right-content{padding:12px!important}
  .nova-right-cover{height:96px!important;margin:-12px -12px 0!important;border-radius:18px 18px 0 0!important}
  .nova-right-profile{margin-top:-32px!important}
  .nova-right-avatar{width:70px!important;height:70px!important}
  .nova-right-name{font-size:14.5px!important}
  .nova-right-status{font-size:9px!important}
  .nova-right-actions{grid-template-columns:1fr 1fr!important;gap:6px!important;margin:6px 0 8px!important}
  .nova-right-actions button{min-height:42px!important;border:0!important;background:rgba(255,255,255,.018)!important}
  .nova-right-card{
    margin:0!important;padding:10px 2px!important;border:0!important;
    border-bottom:1px solid rgba(255,255,255,.04)!important;
    border-radius:0!important;background:transparent!important;
  }
  .nova-context-grid{margin:5px 0!important;gap:4px!important}
  .nova-context-grid button{border:0!important;background:rgba(255,255,255,.014)!important}
  .nova-right-switch-row,.nova-right-row,.nova-right-footer{border-color:rgba(255,255,255,.04)!important;background:transparent!important}
  .nova-right-collapse{left:-14px!important;width:28px!important;height:44px!important;border-radius:9px!important;background:#08111e!important}
}

#app .nova-date-separator{
  display:flex!important;justify-content:center!important;margin:16px 0!important;color:inherit!important;
}
#app .nova-date-separator span{
  padding:5px 10px!important;border:1px solid rgba(255,255,255,.05)!important;
  border-radius:999px!important;background:rgba(8,15,27,.82)!important;
  color:#7a899f!important;font-size:7.5px!important;
}

@media(max-width:900px){
  #app .messages{
    padding-bottom:calc(118px + env(safe-area-inset-bottom))!important;
    scroll-padding-bottom:144px!important;
  }
  #app .bubble{font-size:11.5px!important;line-height:1.48!important}
  #app .chatitem .name{font-size:12.5px!important}
  #app .chatitem .preview{font-size:9.5px!important}
}


/* ==========================================================
   NOVA 13.3.3 · DUPLICATE PROFILE + CHAT ARTIFACT FIX
   ========================================================== */

/* Desktop had the current user twice:
   1) novaRailUser in the left navigation rail
   2) large profilebar at the bottom of the chats panel.
   Keep only the compact rail identity on desktop. */
@media(min-width:901px){
  #app .profilebar{
    display:none!important;
  }
}

/* On mobile the rail is hidden, so profilebar remains the only account card. */
@media(max-width:900px){
  #app .profilebar{
    display:flex!important;
  }
}

/* Old nova-base.css still drew a blue Telegram-like tail on every outgoing bubble.
   It looks like a rendering artifact with the cleaner 13.3 UI. Remove it globally. */
#app .message-row.mine .bubble::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  clip-path:none!important;
}

/* Prevent 1px fragments of a message above the scroll viewport from appearing
   as a purple line at the very top of the conversation. */
#app .messages{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7px,#000 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0,#000 7px,#000 100%)!important;
}

/* Voice messages are clean cards, without legacy tail geometry. */
#app .message-row:has(.voice-player) .bubble{
  overflow:hidden!important;
}

/* Preserve clean circle/video messages from earlier fixes. */
#app .message-row.video-note-message .bubble,
#app .video-note{
  outline:0!important;
  box-shadow:none!important;
}


/* ==========================================================
   NOVA 13.3.4 · MESSAGE ARTIFACT + VIDEO CIRCLE HOTFIX
   ========================================================== */

/* Some message states were still inheriting legacy hover/selected decoration,
   which looked like random artifacts near the bubbles. Keep the selected state
   subtle and integrated into the new clean layer. */
#app .message-row.selected .bubble{
  outline:none!important;
  box-shadow:0 0 0 1px rgba(120,102,255,.22)!important;
}

/* The floating action strip should not visually merge with neighboring messages. */
#app .msg-actions{
  top:-38px!important;
  right:8px!important;
  transform:none!important;
  box-shadow:0 14px 34px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(14px)!important;
}

/* Remove square message wrappers from any bubble that actually contains a video circle,
   even if an older code path forgot to add the helper class video-note-message. */
#app .message-row:has(.video-note) .bubble,
#app .message-row.video-note-message .bubble{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  overflow:visible!important;
  max-width:none!important;
}
#app .message-row:has(.video-note) .text,
#app .message-row.video-note-message .text{
  display:none!important;
}
#app .message-row:has(.video-note) .reactions:empty,
#app .message-row.video-note-message .reactions:empty{
  display:none!important;
}
#app .message-row:has(.video-note) .time,
#app .message-row.video-note-message .time{
  margin-top:8px!important;
}
#app .message-row:has(.video-note).mine .bubble::after,
#app .message-row.video-note-message.mine .bubble::after{
  content:none!important;
  display:none!important;
}

/* Force the circle itself to be perfectly clean. */
#app .video-note,
#app [data-video-note],
#app .message-row:has(.video-note) [data-video-note]{
  display:block!important;
  border-radius:50%!important;
  border:0!important;
  outline:0!important;
  background:#05080e!important;
  box-shadow:none!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
#app .video-note::before,
#app .video-note::after,
#app [data-video-note]::before,
#app [data-video-note]::after{
  box-shadow:none!important;
}
#app .video-note video,
#app [data-video-note] video{
  border-radius:50%!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  background:#05080e!important;
}


/* ==========================================================
   NOVA 13.3.5 · CHAT POLISH
   Cleaner rhythm, compact tools, quieter context pane.
   ========================================================== */

/* Message rhythm: a little tighter inside groups, more separation between speakers. */
@media(min-width:901px){
  #app .message-row{margin:5px 0!important}
  #app .message-row + .message-row.other{margin-top:8px!important}
  #app .message-row + .message-row.mine{margin-top:8px!important}
  #app .bubble{min-width:0!important}
  #app .message-row.other .bubble{border-top-left-radius:10px!important}
  #app .message-row.mine .bubble{border-top-right-radius:10px!important}

  /* The action toolbar is smaller and less intrusive. */
  #app .msg-actions{
    top:-34px!important;
    right:6px!important;
    gap:1px!important;
    padding:2px!important;
    border-radius:9px!important;
    background:rgba(7,13,23,.96)!important;
    border:1px solid rgba(255,255,255,.05)!important;
    box-shadow:0 10px 26px rgba(0,0,0,.30)!important;
  }
  #app .msg-actions button{
    width:25px!important;
    height:25px!important;
    border-radius:7px!important;
    font-size:10px!important;
  }
  #app .msg-actions button::before{font-size:11px!important}
  #app .msg-actions button[data-a="delete"]::before{font-size:14px!important}

  /* Replies/forward headers are visually subordinate. */
  #app .reply,
  #app .forwarded-profile{
    margin-bottom:7px!important;
    padding:6px 8px!important;
    border-left:2px solid rgba(133,111,255,.48)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.018)!important;
  }

  /* Time and delivery marks sit on one quiet baseline. */
  #app .time{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    min-height:14px!important;
    white-space:nowrap!important;
  }

  /* Right context pane: lower visual noise. */
  .nova-right-actions button{
    min-height:38px!important;
    color:#9aa7ba!important;
  }
  .nova-right-card-title{
    font-size:9px!important;
    font-weight:800!important;
    color:#aab5c5!important;
  }
  .nova-right-description,
  .nova-right-row small,
  .nova-right-switch-row small,
  .nova-right-footer small{
    color:#66758b!important;
  }
  .nova-right-row,
  .nova-right-switch-row,
  .nova-right-footer{
    padding-left:2px!important;
    padding-right:2px!important;
  }
  .nova-context-grid button{
    min-height:48px!important;
    border-radius:10px!important;
    color:#9ba8ba!important;
  }

  /* Composer looks like one stable dock, not a second card layer. */
  #app .composer-wrap{
    padding-top:9px!important;
  }
  #app .composer{
    min-height:56px!important;
    border-radius:16px!important;
    box-shadow:0 12px 32px rgba(0,0,0,.18)!important;
  }
  #app .composer textarea,
  #app .composer input{
    font-size:11.5px!important;
  }
}

/* Keep media bubbles free of generic message chrome. */
#app .message-row:has(.video-note) .msg-actions,
#app .message-row.video-note-message .msg-actions{
  right:0!important;
}
#app .message-row:has(.video-note) .bubble,
#app .message-row.video-note-message .bubble{
  border-radius:0!important;
}

/* Voice cards stay aligned and free of stray outer borders. */
#app .message-row:has(.voice-player) .bubble{
  border-radius:16px!important;
  box-shadow:none!important;
}
#app .voice-player{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* Mobile keeps full-size touch targets while using the same cleaner hierarchy. */
@media(max-width:900px){
  #app .message-row{margin:5px 0!important}
  #app .bubble{border-radius:15px!important}
  #app .reply,#app .forwarded-profile{border-radius:8px!important}
  #app .composer{border-radius:16px!important}
}


/* ==========================================================
   NOVA 13.3.6 · MESSAGE GROUPING & BUBBLE POLISH
   Consecutive text/voice messages from the same sender within
   5 minutes visually form one conversation cluster.
   ========================================================== */

/* Spacing: groups breathe as blocks, messages inside them stay close. */
#app .message-row.nova-group-single,
#app .message-row.nova-group-first{
  margin-top:10px!important;
}
#app .message-row.nova-group-middle,
#app .message-row.nova-group-last{
  margin-top:2px!important;
}
#app .message-row.nova-group-first,
#app .message-row.nova-group-middle{
  margin-bottom:2px!important;
}
#app .message-row.nova-group-last,
#app .message-row.nova-group-single{
  margin-bottom:8px!important;
}

/* Incoming clusters */
#app .message-row.other.nova-group-single .bubble{
  border-radius:17px!important;
}
#app .message-row.other.nova-group-first .bubble{
  border-radius:17px 17px 17px 7px!important;
}
#app .message-row.other.nova-group-middle .bubble{
  border-radius:7px 17px 17px 7px!important;
}
#app .message-row.other.nova-group-last .bubble{
  border-radius:7px 17px 17px 17px!important;
}

/* Outgoing clusters */
#app .message-row.mine.nova-group-single .bubble{
  border-radius:17px!important;
}
#app .message-row.mine.nova-group-first .bubble{
  border-radius:17px 17px 7px 17px!important;
}
#app .message-row.mine.nova-group-middle .bubble{
  border-radius:17px 7px 7px 17px!important;
}
#app .message-row.mine.nova-group-last .bubble{
  border-radius:17px 7px 17px 17px!important;
}

/* In group chats show sender once at the start of a cluster. */
#app .message-row.other.nova-group-middle .sender,
#app .message-row.other.nova-group-last .sender{
  display:none!important;
}

/* Middle messages carry less metadata weight, while preserving all delivery data. */
#app .message-row.nova-group-middle .time{
  opacity:.68!important;
}
#app .message-row.nova-group-first .time{
  opacity:.78!important;
}

/* Reply / forwarded content starts a stronger visual break even inside a cluster. */
#app .message-row:has(.reply).nova-group-middle,
#app .message-row:has(.forwarded-profile).nova-group-middle{
  margin-top:5px!important;
}

/* Voice messages can join a cluster, but remain self-contained cards. */
#app .message-row:has(.voice-player).nova-group-first .bubble,
#app .message-row:has(.voice-player).nova-group-middle .bubble,
#app .message-row:has(.voice-player).nova-group-last .bubble{
  border-radius:16px!important;
}

/* Media/video circles never receive fused bubble corners. */
#app .message-row:has(.video-note).nova-group-first .bubble,
#app .message-row:has(.video-note).nova-group-middle .bubble,
#app .message-row:has(.video-note).nova-group-last .bubble,
#app .message-row.video-note-message.nova-group-first .bubble,
#app .message-row.video-note-message.nova-group-middle .bubble,
#app .message-row.video-note-message.nova-group-last .bubble{
  border-radius:0!important;
}

/* On touch screens keep the same grouping, with a little more tap-space. */
@media(max-width:900px){
  #app .message-row.nova-group-single,
  #app .message-row.nova-group-first{margin-top:8px!important}
  #app .message-row.nova-group-middle,
  #app .message-row.nova-group-last{margin-top:2px!important}
  #app .message-row.nova-group-last,
  #app .message-row.nova-group-single{margin-bottom:7px!important}
}


/* ==========================================================
   NOVA 13.4.0 · MESSAGE EXPERIENCE
   ========================================================== */

/* Floating message toolbar */
#app .msg-actions{
  display:flex!important;
  gap:3px!important;
  padding:5px!important;
  border-radius:14px!important;
  background:rgba(7,13,23,.96)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.38)!important;
}
#app .msg-actions button{
  width:30px!important;
  height:30px!important;
  border-radius:9px!important;
  font-size:13px!important;
  transition:.16s ease!important;
}
#app .msg-actions button:hover{
  background:rgba(111,91,255,.18)!important;
  transform:translateY(-1px)!important;
}

/* Reply card */
#app .reply.clickable-reply{
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
  padding:7px 10px!important;
  margin-bottom:8px!important;
  border-left:3px solid rgba(116,94,255,.8)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.035)!important;
  cursor:pointer!important;
}
#app .reply.clickable-reply b{
  font-size:9px!important;
  color:#b8abff!important;
}
#app .reply.clickable-reply span{
  font-size:11px!important;
  color:#c3cede!important;
}

/* Forward card */
#app .forwarded-profile{
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
  padding:7px 10px!important;
  margin-bottom:8px!important;
  border-left:3px solid rgba(70,185,255,.7)!important;
  background:rgba(255,255,255,.025)!important;
  border-radius:8px!important;
}
#app .forwarded-profile span{
  font-size:8px!important;
  color:#8fa2bd!important;
}
#app .forwarded-profile b{
  font-size:11px!important;
  color:#d8ddff!important;
}

/* Reactions */
#app .reactions{
  display:flex!important;
  gap:4px!important;
  flex-wrap:wrap!important;
}
#app .reaction{
  min-height:23px!important;
  padding:2px 8px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  background:rgba(255,255,255,.035)!important;
  font-size:10px!important;
  transition:.15s ease!important;
}
#app .reaction:hover{
  transform:scale(1.05)!important;
}

/* Message appear animation */
#app .message-row{
  animation:novaMessageIn .18s ease both;
}
@keyframes novaMessageIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}


/* NOVA 15.0 · COMMUNICATION SUITE */
/* Media/profile/search/navigation UX layer */
.nova-suite-tabs{display:flex;gap:6px;padding:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.nova-suite-tabs button{border:0;background:rgba(255,255,255,.04);color:#9aa8bb;border-radius:10px;padding:7px 12px;font-size:11px;cursor:pointer}
.nova-suite-tabs button.active{background:rgba(109,92,255,.18);color:#d8d1ff}
.nova-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:10px}
.nova-media-grid img,.nova-media-grid video{width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover}
.nova-mini-profile{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid rgba(255,255,255,.05)}
.nova-mini-profile .avatar{width:42px;height:42px;border-radius:50%}
.nova-message-info-row{display:flex;justify-content:space-between;padding:8px 0;color:#94a3b8;font-size:12px}
.nova-search-filter{display:flex;gap:5px;flex-wrap:wrap}
.nova-search-filter button{border:0;border-radius:999px;padding:6px 10px;background:#101827;color:#aab7ca}
@media(max-width:900px){.nova-media-grid{grid-template-columns:repeat(2,1fr)}}


/* ==========================================================
   NOVA 20.0 · COMPLETE COMMUNICATION SUITE
   ========================================================== */
.privacy-select-row select{min-width:132px;height:34px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:#0b1422;color:#dce4f1;padding:0 9px;font-size:9px;outline:0}.privacy-save-row{display:flex;align-items:center;gap:10px;margin-top:10px}.privacy-save-row span{color:#728198;font-size:8px}.profile-privacy-notice{margin:0 14px 10px;padding:9px 10px;border:1px solid rgba(246,181,83,.12);border-radius:11px;background:rgba(246,181,83,.045);color:#d6b477;font-size:8px}.profile-privacy-notice.hidden{display:none!important}
.unified-search-kinds{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 11px}.unified-search-kinds button{height:29px;padding:0 10px;border:1px solid rgba(255,255,255,.045);border-radius:999px;background:rgba(255,255,255,.018);color:#79899f;font-size:8px}.unified-search-kinds button.active{border-color:rgba(116,91,255,.18);background:rgba(108,82,240,.08);color:#c4baff}.suite-search-section-title{padding:10px 5px 6px;color:#6f7e94;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.suite-person-result{grid-template-columns:38px 1fr auto!important;align-items:center}.suite-person-result .avatar{width:34px;height:34px;border-radius:11px}.suite-person-result span{color:#77869c!important;font-size:8px!important}.suite-person-result small{display:block;margin-top:2px;color:#5f6e83;font-size:7px}
.notification-item.mention .notification-icon{color:#c6bbff;background:rgba(111,86,242,.10)}.notification-item.system .notification-icon{color:#9cc5ff;background:rgba(72,136,226,.08)}
#chatFilters [data-chat-filter="pinned"]{border-color:rgba(116,91,255,.07)}
.media-hub-tabs [data-media-hub-tab="pins"]{color:#a99cff}.media-hub-row .secondary{flex:0 0 auto}
.details-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media(max-width:700px){.privacy-select-row{align-items:flex-start!important;gap:8px}.privacy-select-row select{width:100%;min-width:0}.details-grid{grid-template-columns:1fr!important}.unified-search-kinds{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.unified-search-kinds button{flex:0 0 auto}}


/* NOVA 20.1 UX STABILIZATION */
/* Message action bar: no emoji rendering */
.msg-actions button::before{font-family:system-ui!important}
.msg-actions button[data-a="reply"]::before{content:"↶"!important}
.msg-actions button[data-a="edit"]::before{content:"✎"!important}
.msg-actions button[data-a="forward"]::before{content:"→"!important}
.msg-actions button[data-a="details"]::before{content:"ⓘ"!important}
.msg-actions button[data-a="important"]::before{content:"☆"!important}
.msg-actions button[data-a="pin"]::before{content:"⌑"!important}
.msg-actions button[data-a="react"]::before{content:"◉"!important}
.msg-actions button[data-a="delete"]::before{content:"×"!important}

/* single clean overlay */
#contextMenu{z-index:9999!important;}
.msg-actions{z-index:20!important;}
.message-row .msg-actions{max-width:fit-content!important;}

/* mobile action sheet */
@media(max-width:900px){
 .msg-actions{display:none!important;}
 .message-context-reactions button{font-family:system-ui!important;font-size:18px!important}
}

/* video notes never inherit square wrappers */
.message-row:has(.video-note) .bubble{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
.message-row:has(.video-note) .video-note{border-radius:50%!important;border:0!important}


/* NOVA 20.2 cleanup: single message action layer */
#app .msg-actions{
  display:flex!important;
  gap:4px!important;
  padding:5px!important;
  border-radius:14px!important;
}
#app .msg-actions button{
  font-family:inherit!important;
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  color:#b8c4d8!important;
}
#app .msg-actions .ico{
  display:block!important;
  width:16px!important;
  height:16px!important;
  position:relative!important;
}
#app .ico::before{
  content:""!important;
  position:absolute!important;
  inset:2px!important;
  border:1.8px solid currentColor!important;
  border-radius:4px!important;
}
#app .ico-reply::before{border-left-color:transparent!important;border-radius:8px!important}
#app .ico-forward::before{transform:rotate(45deg)!important;border-left-color:transparent!important;border-bottom-color:transparent!important}
#app .ico-info::before{border-radius:50%!important}
#app .ico-star::before{border-radius:50%!important}
#app .ico-pin::before{border-radius:8px 8px 3px 3px!important}
#app .ico-smile::before{border-radius:50%!important}
#app .ico-trash::before{border-radius:2px!important}
#app .ico-edit::before{transform:rotate(-35deg)!important}

/* NOVA 20.4: the desktop hover toolbar must never render as a message layer on touch UI. */
@media(max-width:900px), (hover:none) and (pointer:coarse){
  #app .message-row .msg-actions{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  #app .header-actions #audioCallBtn,
  #app .header-actions #videoCallBtn,
  #app .header-actions #chatInfoBtn{display:grid!important}
  #app .header-actions #smartChatBtn,
  #app .header-actions #nova12HubBtn,
  #app .header-actions #refreshBtn,
  #app .header-actions #chatSearchBtn{display:none!important}
}

/* Video notes never inherit message card decoration */
#app .message-row:has(.video-note) .bubble{
 background:transparent!important;
 border:0!important;
 padding:0!important;
 box-shadow:none!important;
}

/* Device modal states */
.nova-device-empty,.call-device-empty{
 padding:14px!important;
 border-radius:12px!important;
 color:#9aa8bd!important;
 background:rgba(255,255,255,.03)!important;
}

/* NOVA 20.4: compact, unambiguous call preflight on desktop and iPhone. */
#preCallModal{align-items:center!important;padding:16px!important}
#preCallModal .nova132-call-preflight{
  width:min(460px,calc(100vw - 24px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:min(620px,calc(100dvh - 32px))!important;
  margin:auto!important;
  padding-bottom:0!important;
  overflow:auto!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:22px!important;
}
#preCallModal .nova-modal-head{position:static!important;padding:16px 18px 8px!important;background:transparent!important}
#preCallModal .nova132-call-body{gap:12px!important;padding:12px 18px 18px!important}
#preCallModal .nova132-call-body label span{font-size:10px!important}
#preCallModal .nova132-call-body select{width:100%!important;min-height:46px!important;font-size:16px!important}
#preCallModal .nova132-call-test{padding:10px 12px!important;border-radius:11px!important;font-size:10px!important}
#preCallModal .nova132-call-test.hidden{display:none!important}
#preCallModal .nova132-call-test[data-kind="success"]{border-color:rgba(71,209,151,.2)!important;color:#76ddb0!important;background:rgba(71,209,151,.06)!important}
#preCallModal .nova132-call-test[data-kind="error"]{border-color:rgba(242,116,130,.2)!important;color:#f09aa5!important;background:rgba(242,116,130,.06)!important}
#preCallModal .modal-actions{margin-top:4px!important;padding-top:14px!important}
#preCallModal .modal-actions button{min-height:46px!important}
#preCallStartBtn:disabled{opacity:.65!important;cursor:wait!important}
@media(max-width:600px){
  #preCallModal{align-items:flex-end!important;padding:0!important}
  #preCallModal .nova132-call-preflight{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - 18px)!important;
    margin:0!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
    border-radius:24px 24px 0 0!important;
  }
  #preCallModal .nova-modal-head{padding:18px 18px 8px!important}
  #preCallModal .nova132-call-body{padding:12px 18px 18px!important}
}

/* NOVA 20.6: Safari/iPhone remote video is an explicit full-stage layer. */
#callStage:not(.audio-mode) #remoteVideo{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  background:#050912!important;
}
#remoteAudio{display:none!important}
#callStage .remote-relay-video{position:absolute!important;inset:0!important;z-index:2!important;width:100%!important;height:100%!important;object-fit:cover!important;background:#050912!important}
#callStage.has-relay-video #callAvatar{display:none!important}
#callStage:not(.audio-mode).has-remote-video #callAvatar{display:none!important}
#callStage #localVideo{z-index:4!important}
#callStage .call-info{z-index:5!important;pointer-events:none!important}
#callStage.remote-play-blocked::after{
  content:"Коснитесь, чтобы включить звук";
  position:absolute;
  z-index:7;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(7,13,23,.86);
  color:#eef2ff;
  font-size:10px;
  font-weight:800;
  backdrop-filter:blur(14px);
}

/* NOVA 20.8: real full-screen call layout on iPhone. */
#callOverlay{z-index:20000!important}
#callOverlay .call-card{display:flex!important;flex-direction:column!important}
#callOverlay .call-stage{order:1!important;flex:1 1 auto!important;min-height:320px!important}
#callOverlay .call-controls{order:2!important;flex:0 0 auto!important}
body.nova-call-active{overflow:hidden!important}
body.nova-call-active #app .mobile-bottom-nav{display:none!important}
.notification-item.call .notification-icon{color:#ff7892;background:rgba(236,72,104,.12)}
.notification-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#screenShareBtn.unsupported{opacity:.48!important;border-style:dashed!important}
@media(max-width:760px){
  #callOverlay{padding:0!important;inset:0!important;background:#050a12!important}
  #callOverlay .call-card{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important}
  #callOverlay .call-stage{width:100%!important;min-height:0!important}
  #callOverlay .call-controls{min-height:82px!important;padding:12px 10px calc(12px + env(safe-area-inset-bottom))!important}
  #callOverlay .call-info{top:calc(14px + env(safe-area-inset-top))!important}
  #callOverlay .nova-call-quality-pill{top:calc(12px + env(safe-area-inset-top))!important}
}