/* 3.5.2 RC: bounded app layout. The scroll containers, not the grid row, grow. */
html, body { height: 100%; min-height: 0; }
#app.app { height: 100dvh; max-height: 100dvh; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
#app > .rail, #app > .sidebar, #app > .content { min-height: 0; max-height: 100%; }
#app > .sidebar, #app > .content { overflow: hidden; }
#app > .rail { overflow-y: auto; overflow-x: hidden; }
#chatNav, #friendsNav { flex: 1 1 0px; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.sidebar-head, .topbar, .profile-strip, .call-dock { flex-shrink: 0; }
#chatPanel, .messages-stage { flex: 1 1 0px; min-height: 0; min-width: 0; overflow: hidden; }
.messages-stage > #messages { flex: 1 1 0px; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; }
#screenStage { flex: 0 1 auto; min-height: 0; max-height: 45%; }
#screenStage:not(.hidden):not(.call-away) { display: flex; flex-direction: column; }
#screenStage > .stage-head { flex-shrink: 0; }
#screenStage > .stage-tiles { flex: 1 1 auto; min-height: 0; overflow: hidden; grid-auto-rows: minmax(0, 1fr); }
#screenStage .screen-tile video:not(:fullscreen) { max-height: 100%; }
#messageForm, .composer-banner, .typing-bar, .call-bar { flex-shrink: 0; }
#friendPanel { flex: 1 1 0px; min-height: 0; overflow: auto; }
#login.login-screen:not(.hidden) { height: 100dvh; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: safe center; }
#login > .login-card { flex-shrink: 0; }
/* Names ellipsize; badges and controls keep their width. */
.profile-nick-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-strip .role-badges, .profile-strip .role-badge { flex-shrink: 0; }
.modal-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.motion-select { width: 100%; min-height: 44px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 12px; }
/* Balanced is the default. Preserve nickname movement, but lower visual step rate. */
:root:not([data-motion="full"]) mk-nick.nick-g { animation-timing-function: steps(48, end); }
:root:not([data-motion="full"]) .season-bat,
:root:not([data-motion="full"]) .season-witch { display: none; }
:root:not([data-motion="full"]) .season-in,
:root:not([data-motion="full"]) .season-in *,
:root:not([data-motion="full"]) .season-decor *,
:root:not([data-motion="full"]) .topbar::after { animation: none !important; }
mk-nick.nick-g:not(.nick-motion-visible),
:root[data-page-hidden="true"] mk-nick.nick-g { animation-play-state: paused !important; }
:root[data-motion="off"] mk-nick.nick-g { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  mk-nick.nick-g, .season-in, .season-in *, .season-decor *, .topbar::after { animation: none !important; }
}

/* Foreground decorations must not cover chat controls in the balanced mode. */
:root:not([data-motion="full"]) #app .pk-chat,
:root:not([data-motion="full"]) #app .pk-sb,
:root:not([data-motion="full"]) #app .season-moon,
:root:not([data-motion="full"]) #app .season-fog,
:root:not([data-motion="full"]) #app .season-eyes { display: none !important; }
@media (max-height: 620px) {
  #app .season-in { display: none !important; }
}

/* 3.5.4: праздничное оформление не должно мешать видео на другом мониторе.
   В активном окне сохраняем атмосферу, но убираем самые дорогие фильтры и
   второй слой тумана. В неактивном окне полностью прячем движущиеся слои. */
html[data-season="halloween"] .season-bat > svg,
html[data-season="halloween"] .season-witch > svg { filter: none !important; }
html[data-season="halloween"] .season-fog span { animation: none !important; }
html[data-season="halloween"] .season-fog span + span { display: none !important; }
:root[data-season-paused="true"] .season-decor *,
:root[data-season-paused="true"] .season-in * { animation-play-state: paused !important; }
:root[data-season-paused="true"] .season-bat,
:root[data-season-paused="true"] .season-witch,
:root[data-season-paused="true"] .season-spider,
:root[data-season-paused="true"] .season-fog { display: none !important; }
:root[data-season-paused="true"] .season-pumpkin svg { filter: none !important; }

/* Новый год 3.5.4: цельная зимняя композиция по структуре Хэллоуина.
   Движутся только canvas-снег до 20 FPS и лёгкое мерцание гирлянды. */
html[data-season="newyear"] .topbar {
  box-shadow: inset 0 -1px 0 rgba(142,211,255,.28), inset 0 -16px 22px -18px rgba(87,158,225,.3);
}
html[data-season="newyear"] .logo {
  box-shadow: 0 0 13px rgba(111,193,255,.25), 0 0 2px rgba(255,217,122,.48);
}
html[data-season="newyear"] .season-in { display: block; }
html[data-season="newyear"] .sidebar { position: relative; }
html[data-season="newyear"] .season-garland {
  height: 30px;
  filter: none;
  opacity: .94;
  animation: mk-garland-soft 3s steps(2,end) infinite alternate;
}
@keyframes mk-garland-soft { from { opacity: .74 } to { opacity: 1 } }
.season-winter-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 38% 42% at 88% 12%, rgba(125,193,255,.11), transparent 72%),
    radial-gradient(ellipse 42% 50% at 7% 60%, rgba(52,143,157,.08), transparent 76%),
    linear-gradient(180deg, rgba(17,55,104,.085), transparent 48%);
}
.season-aurora {
  position: absolute;
  left: 22%;
  right: 10%;
  top: 34px;
  height: 178px;
  opacity: .18;
  transform: skewY(-3deg);
  background:
    radial-gradient(ellipse 38% 72% at 18% 0, rgba(82,218,181,.3), transparent 72%),
    radial-gradient(ellipse 35% 68% at 55% 0, rgba(95,163,255,.26), transparent 74%),
    radial-gradient(ellipse 32% 68% at 87% 0, rgba(155,112,233,.2), transparent 75%);
}
.season-winter-stars {
  position: absolute;
  inset: 34px 0 47%;
  opacity: .34;
  background-image:
    radial-gradient(circle, rgba(237,249,255,.92) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(157,211,244,.72) 0 .8px, transparent 1.2px);
  background-size: 137px 113px, 191px 149px;
  background-position: 19px 7px, 72px 41px;
}
.season-winter-moon {
  position: absolute;
  right: 62px;
  top: 82px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  opacity: .52;
  background: radial-gradient(circle at 38% 34%, #fff9df, #dbeaff 62%, #9ebddd);
  box-shadow: 0 0 24px rgba(178,218,255,.24);
}
.season-winter-moon i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 66% 31%, rgba(102,130,160,.2) 0 8%, transparent 9%),
    radial-gradient(circle at 32% 68%, rgba(102,130,160,.16) 0 11%, transparent 12%);
}
/* All figures share a snowbank, rather than floating above the composer. */
.season-winter-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 286px;
  height: 220px;
  isolation: isolate;
}
.season-winter-ground::before {
  content: "";
  position: absolute;
  inset: auto -30px -18px -15px;
  height: 66px;
  border-radius: 65% 48% 0 0;
  background: linear-gradient(170deg, #d5e8ed, #8fadb9);
  box-shadow: inset 0 3px 0 #edf8fa;
  opacity: 1;
}
.season-winter-ground::after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: 17px;
  width: 162px;
  height: 12px;
  border-radius: 50%;
  background: rgba(30,70,84,.18);
  z-index: -1;
}
.season-tree-glow {
  position: absolute;
  right: -16px;
  bottom: 0;
  width: 210px;
  height: 190px;
  background: radial-gradient(ellipse, rgba(255,190,80,.12), transparent 69%);
}
.season-tree {
  position: absolute;
  bottom: 35px;
  right: 14px;
  width: 110px;
  height: 165px;
  opacity: 1;
}
.season-tree.tree-back { right: 136px; bottom: 24px; width: 78px; height: 117px; opacity: 1; }
.season-tree svg { width: 100%; height: 100%; overflow: visible; }
.season-tree .tree-trunk { fill: #604331; }
.season-tree .tree-branches path {
  fill: none;
  stroke: rgba(102,180,145,.36);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.season-tree .tree-snow path {
  fill: none;
  stroke: rgba(239,249,252,.9);
  stroke-width: 3.6;
  stroke-linecap: round;
}
.season-tree .tree-string path {
  fill: none;
  stroke: rgba(228,198,115,.62);
  stroke-width: 1.1;
}
.season-tree .tree-star { fill: #f1cb67; }
.season-tree .tree-lights circle:nth-child(3n+1) { fill: #ff7077; }
.season-tree .tree-lights circle:nth-child(3n+2) { fill: #ffda71; }
.season-tree .tree-lights circle:nth-child(3n) { fill: #78d9ff; }
.season-gifts {
  position: absolute;
  right: 14px;
  bottom: 7px;
  width: 110px;
  height: 26px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  opacity: 1;
}
.season-gifts .gift { position: relative; display: block; border-radius: 3px 3px 2px 2px; }
.season-gifts .gift::before { content: ""; position: absolute; left: 43%; top: 0; bottom: 0; width: 14%; background: rgba(255,221,143,.78); }
.season-gifts .gift::after { content: ""; position: absolute; left: -2px; right: -2px; top: 28%; height: 14%; background: rgba(255,221,143,.72); }
.season-gifts .g1 { width: 30px; height: 25px; background: #a9434b; }
.season-gifts .g2 { width: 38px; height: 26px; background: #245f72; }
.season-gifts .g3 { width: 26px; height: 20px; background: #59609c; }
.winter-wreath { position: absolute; z-index: 3; width: 52px; height: 52px; opacity: .82; }
.winter-wreath svg, .winter-snowman svg { width: 100%; height: 100%; overflow: visible; }
.winter-wreath .wreath-base { fill: none; stroke: #174e3d; stroke-width: 13; }
.winter-wreath .wreath-needles { fill: none; stroke: #378166; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 3 5; }
.winter-wreath .wreath-snow { fill: none; stroke: rgba(239,249,252,.9); stroke-width: 4; stroke-linecap: round; }
.winter-wreath .wreath-berries circle { fill: #d0525b; }
.winter-wreath .wreath-bow { fill: #b33f4a; }
.wreath-sidebar { right: 13px; bottom: 71px; }
.wreath-login { position: fixed; right: 24px; bottom: 18px; width: 72px; height: 72px; }
.winter-snowman { position: absolute; left: 8px; bottom: 19px; z-index: 3; width: 48px; height: 72px; opacity: 1; }
.winter-snowman .snowman-shadow { fill: rgba(121,171,196,.2); }
.winter-snowman .snowman-body { fill: #dcecf3; stroke: #9bbdcb; stroke-width: .8; }
.winter-snowman .snowman-arm { fill: none; stroke: #775239; stroke-width: 2; stroke-linecap: round; }
.winter-snowman .snowman-scarf { fill: #b74952; }
.winter-snowman .snowman-hat { fill: #253341; }
.winter-snowman .snowman-eye, .winter-snowman .snowman-button { fill: #27333d; }
.winter-snowman .snowman-nose { fill: #df833e; }
/* Тонкая нерегулярная снежная кромка лежит за содержимым панелей. */
html[data-season="newyear"] .sidebar-head,
html[data-season="newyear"] .topbar,
html[data-season="newyear"] .composer { position: relative; }
html[data-season="newyear"] .sidebar-head::before,
html[data-season="newyear"] .topbar::before,
html[data-season="newyear"] .composer::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  height: 8px;
  pointer-events: none;
  z-index: 2;
  opacity: .56;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 9'%3E%3Cpath fill='%23f2fbff' d='M0 7Q15 3 29 7T58 6Q72 1 89 7T124 6Q140 2 156 7T188 6Q204 3 220 6V9H0Z'/%3E%3C/svg%3E") repeat-x left bottom / 220px 9px;
}
html[data-season="newyear"] .sidebar-head::before,
html[data-season="newyear"] .topbar::before { bottom: -3px; }
html[data-season="newyear"] .composer::before { top: -5px; left: 14px; right: 14px; opacity: .4; }
:root[data-season-paused="true"] .season-garland { animation-play-state: paused !important; }
@media (max-width: 760px) {
  .season-aurora { left: 7%; right: 4%; height: 125px; opacity: .13; }
  .season-winter-stars { opacity: .23; }
  .season-winter-moon { right: 18px; top: 70px; width: 31px; height: 31px; }
  .season-winter-ground { width: 112px; height: 125px; }
  .season-tree { right: 6px; bottom: 20px; width: 70px; height: 105px; }
  .season-tree.tree-back, .season-gifts, .winter-snowman, .wreath-sidebar { display: none !important; }
  .wreath-login { transform: scale(.72); transform-origin: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-season="newyear"] .season-garland { animation: none !important; }
}

/* android-call-layout-v1: scopes to the real Android bridge controls only. */
#callBar #androidRoute,#callBar:has(#androidRoute) #screenBtn{display:grid!important;place-items:center!important;justify-content:center!important;align-items:center!important;box-sizing:border-box!important;flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;margin:0!important}
#callBar #androidRoute>.ui-icon,#callBar:has(#androidRoute) #screenBtn>.ui-icon{display:block!important;width:20px!important;height:20px!important;margin:0!important;flex:none!important}
#callBar:has(#androidRoute) #screenBtn>span{display:none!important}
#callBar.docked:has(#androidRoute) .call-actions{display:grid!important;grid-template-columns:44px 44px minmax(0,1fr)!important;gap:6px!important;align-items:center!important}
#callBar:has(#androidRoute) #leaveCallBtn{min-height:44px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;white-space:nowrap!important}
@media(max-width:560px){
 #callBar:not(.docked):has(#androidRoute){display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;padding:10px!important;min-width:0!important}
 #callBar:not(.docked):has(#androidRoute) .call-info{display:contents!important}
 #callBar:not(.docked):has(#androidRoute) .call-text{grid-column:1!important;grid-row:1!important;min-width:0!important}
 #callBar:not(.docked):has(#androidRoute) .call-text>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 #callBar:not(.docked):has(#androidRoute) .call-info>.pulse{display:none!important}
 #callBar:not(.docked):has(#androidRoute) .call-info>.ping-chip{grid-column:2!important;grid-row:1!important;margin:0!important}
 #callBar:not(.docked):has(#androidRoute) .call-actions{grid-column:1/-1!important;grid-row:2!important;display:grid!important;grid-template-columns:44px 44px minmax(0,1fr)!important;gap:8px!important;min-width:0!important;align-items:center!important;width:100%!important}
 #callBar:not(.docked):has(#androidRoute) .call-participants{grid-column:1/-1!important;grid-row:3!important;min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}
 body:has(#androidRoute) #messageForm.composer{min-width:0!important;align-items:center!important;column-gap:2px!important}
 body:has(#androidRoute) #messageForm>.attach,body:has(#androidRoute) #messageForm>.mobile-call-mute,body:has(#androidRoute) #messageForm>.send{box-sizing:border-box!important;align-self:center!important;justify-self:center!important;place-items:center!important;width:44px!important;height:44px!important;min-height:44px!important;min-width:44px!important;padding:0!important;margin:0!important}
 body:has(#androidRoute) #messageForm>.attach>.ui-icon,body:has(#androidRoute) #messageForm>.mobile-call-mute>.ui-icon,body:has(#androidRoute) #messageForm>.send>.ui-icon{display:block!important;width:22px!important;height:22px!important;margin:0!important}
 body:has(#androidRoute) #messageForm>#messageInput{min-width:0!important;box-sizing:border-box!important}
}

#callBar.hidden:has(#androidRoute),#callBar:has(#androidRoute) #screenBtn.hidden{display:none!important}
#callBar:has(#androidRoute) .call-actions:has(#screenBtn.hidden){grid-template-columns:44px minmax(0,1fr)!important}