/* HOLYLAND desktop shell. Mobile/tablet layout intentionally stays untouched. */
.desktop-room-empty{display:none}
.nav-icon{width:22px;height:22px;display:block}
.nav-icon svg{width:100%;height:100%;display:block}
.nav-icon path,.nav-icon circle,.nav-icon rect{
  fill:none;stroke:currentColor;stroke-width:1.65;
  stroke-linecap:round;stroke-linejoin:round;
}

@media (min-width:1080px) and (hover:hover) and (pointer:fine){
  html[data-kind="desktop"] body{
    overflow:hidden;
    background:
      radial-gradient(900px 620px at 76% 14%,rgba(76,35,117,.16),transparent 68%),
      #07050e;
  }
  html[data-kind="desktop"] #app.is-entered{
    display:grid!important;
    grid-template-columns:92px 380px minmax(0,1fr);
    grid-template-rows:64px minmax(0,1fr);
    width:100%;height:100dvh;min-width:1080px;
    overflow:hidden;
  }
  html[data-kind="desktop"] .topbar{
    grid-column:1/-1;grid-row:1;
    position:relative;z-index:80;
    height:64px;min-height:64px;
    padding:0 24px 0 18px;
    border-bottom:1px solid rgba(203,166,76,.18);
    background:linear-gradient(90deg,rgba(9,7,17,.98),rgba(24,11,42,.96) 54%,rgba(9,7,17,.98));
    backdrop-filter:blur(22px);
  }
  html[data-kind="desktop"] .topbar .brand{font-size:22px;letter-spacing:.04em}
  html[data-kind="desktop"] .topbar .langsw{margin-left:18px}
  html[data-kind="desktop"] .topbar .me{margin-left:auto}

  html[data-kind="desktop"] .tabbar{
    grid-column:1;grid-row:2;
    position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    z-index:20;display:flex!important;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:10px;height:auto;padding:22px 13px;
    border:0;border-right:1px solid rgba(209,191,235,.12);
    background:linear-gradient(180deg,rgba(8,6,15,.98),rgba(12,8,23,.98));
    backdrop-filter:none;
  }
  html[data-kind="desktop"] .tab{
    flex:0 0 64px;width:66px;height:64px;min-height:64px;
    margin:0 auto;padding:9px 4px;border:1px solid transparent;border-radius:16px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    color:#9588aa;background:transparent;
    font-size:10px;font-weight:650;line-height:1.1;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
  }
  html[data-kind="desktop"] .tab:hover{
    color:#e9ddf5;background:rgba(255,255,255,.045);border-color:rgba(203,166,76,.14);
  }
  html[data-kind="desktop"] .tab:active{transform:scale(.97)}
  html[data-kind="desktop"] .tab.on{
    color:#f1cc62;
    border-color:rgba(203,166,76,.34);
    background:linear-gradient(145deg,rgba(203,166,76,.17),rgba(91,43,132,.22));
    box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.22);
  }
  html[data-kind="desktop"] .tab .ic{font-size:inherit;height:auto;margin:0}
  html[data-kind="desktop"] .tab .nav-icon{width:23px;height:23px}

  html[data-kind="desktop"] .main{
    grid-column:2/-1;grid-row:2;
    min-width:0;min-height:0;overflow:hidden;
    border:0;background:transparent;
  }
  html[data-kind="desktop"] .view{
    padding:30px 28px 42px;
    background:
      radial-gradient(520px 300px at 35% 0,rgba(87,45,128,.12),transparent 76%),
      linear-gradient(180deg,#0d0918,#090711);
  }
  html[data-kind="desktop"] .vhead{margin-bottom:22px}
  html[data-kind="desktop"] .vhead h2{font-size:34px;line-height:1.05}
  html[data-kind="desktop"] #hallsList{display:flex;flex-direction:column;gap:8px}
  html[data-kind="desktop"] .hall{
    min-height:76px;margin:0;border-radius:16px;
    background:linear-gradient(100deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
    border-color:rgba(209,191,235,.12);
  }
  html[data-kind="desktop"] .hall:hover{
    background:linear-gradient(100deg,rgba(203,166,76,.08),rgba(94,48,132,.1));
    border-color:rgba(203,166,76,.28);
  }
  html[data-kind="desktop"] .hall.is-open{
    border-color:rgba(225,185,77,.58);
    background:linear-gradient(100deg,rgba(203,166,76,.16),rgba(87,41,122,.19));
    box-shadow:inset 3px 0 #d7ae45,0 12px 30px rgba(0,0,0,.2);
  }
  html[data-kind="desktop"] .hall .chev{display:none}

  html[data-kind="desktop"][data-tab="v-halls"] .main{grid-column:2;grid-row:2;border-right:1px solid rgba(209,191,235,.12)}
  html[data-kind="desktop"] #room{
    grid-column:3;grid-row:2;
    position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:10;
    width:auto;height:auto;min-width:0;min-height:0;
    background:
      radial-gradient(760px 420px at 50% 0,rgba(69,32,109,.18),transparent 70%),
      linear-gradient(180deg,#0c0817,#08060e);
    border:0;
  }
  html[data-kind="desktop"] #room.on{display:flex}
  html[data-kind="desktop"] .rhead{
    height:76px;min-height:76px;padding:0 34px;
    background:linear-gradient(90deg,rgba(25,13,42,.96),rgba(11,8,19,.98));
    border-bottom:1px solid rgba(209,191,235,.12);
  }
  html[data-kind="desktop"] .rback{display:none}
  html[data-kind="desktop"] .rtitle b{font-size:27px;line-height:1.1}
  html[data-kind="desktop"] .rtitle span{margin-top:5px}
  html[data-kind="desktop"] #pinBar{margin:14px 34px 0;border-radius:16px}
  html[data-kind="desktop"] .msgs{
    padding:28px clamp(28px,5.5vw,92px) 34px;
    scrollbar-gutter:stable;
  }
  html[data-kind="desktop"] .composer{
    width:min(900px,calc(100% - 64px));margin:0 auto 24px;padding:10px 12px;
    border:1px solid rgba(209,191,235,.15);border-radius:16px;
    background:linear-gradient(110deg,rgba(28,22,39,.98),rgba(19,14,29,.98));
    box-shadow:0 18px 50px rgba(0,0,0,.26);
  }
  /* ТУМАН ПОВЕРХ ОБЛАКА ВВОДА. Жалоба Лираз от 22.09, со снимком.
     На телефоне полоса ввода идёт во всю ширину, сообщения уходят ПОД неё, и
     потому у неё маска: верхние 26 точек растворяются, чтобы строка не
     обрубалась о край, и размытие фона, чтобы ушедшее под неё смягчалось.
     На десктопе полоса — отдельное облако шириной 900 с полем внутри и
     воздухом снизу. Под него ничто не уезжает. А маска и размытие остались:
     замерено на собранных стилях — mask-image linear-gradient(transparent 0,
     #000 26px) при padding-top всего 10. То есть растворялся уже не скат, а
     сам верх облака вместе с рамкой и верхушкой поля, и поверх ложилось
     размытие. Это и есть туман.
     На десктопе гасим и то, и другое. Второй селектор с .kb-open нужен из-за
     равной силы: правило клавиатуры возвращает маску, и без него оно снова
     перебило бы это. */
  html[data-kind="desktop"] .composer,
  html[data-kind="desktop"].kb-open .composer{
    -webkit-mask-image:none;mask-image:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  html[data-kind="desktop"] .replybar{width:min(900px,calc(100% - 64px));margin:0 auto}
  html[data-kind="desktop"] .desktop-room-empty{
    grid-column:3;grid-row:2;
    display:none;flex-direction:column;align-items:center;justify-content:center;
    gap:18px;padding:40px;text-align:center;color:#9f93b0;
    background:
      radial-gradient(520px 350px at 50% 42%,rgba(79,39,119,.2),transparent 72%),
      linear-gradient(180deg,#0c0817,#08060e);
  }
  html[data-kind="desktop"] .desktop-room-empty svg{width:84px;height:84px;filter:drop-shadow(0 0 24px rgba(118,67,174,.22))}
  html[data-kind="desktop"] .desktop-room-empty svg path{fill:none;stroke:url(#desktopDoorGold);stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
  html[data-kind="desktop"] .desktop-room-empty b{color:#eee6f5;font:500 25px/1.2 Georgia,serif}
  html[data-kind="desktop"] .desktop-room-empty span{max-width:430px;font-size:14px;line-height:1.55}
  html[data-kind="desktop"][data-tab="v-halls"] .desktop-room-empty{display:flex}
  html[data-kind="desktop"] #app.room-open .desktop-room-empty{display:none}
  html[data-kind="desktop"]:not([data-tab="v-halls"]) #room.on{display:none}

  html[data-kind="desktop"] #lightbox,
  html[data-kind="desktop"] #actSheet,
  html[data-kind="desktop"] #reactSheet,
  html[data-kind="desktop"] #attachSheet,
  html[data-kind="desktop"] #photoCompose,
  html[data-kind="desktop"] #circModal{grid-column:1/-1;grid-row:1/-1}

  html[data-kind="desktop"] #v-music,
  html[data-kind="desktop"] #v-stickers{padding:0}
  html[data-kind="desktop"][data-tab="v-stickers"] .topbar{display:flex!important}
  html[data-kind="desktop"][data-tab="v-stickers"] .tabbar{display:flex!important}
  html[data-kind="desktop"] .playerframe{border-radius:0}

  html[data-kind="desktop"][data-theme="light"] body{background:#f3edf9}
  html[data-kind="desktop"][data-theme="light"] .topbar{
    background:linear-gradient(90deg,rgba(252,249,255,.98),rgba(242,232,250,.97),rgba(252,249,255,.98));
    border-bottom-color:rgba(92,55,124,.18);
  }
  html[data-kind="desktop"][data-theme="light"] .tabbar{
    background:linear-gradient(180deg,#f7f1fb,#eee4f5);border-right-color:rgba(92,55,124,.15);
  }
  html[data-kind="desktop"][data-theme="light"] .tab{color:#735b83}
  html[data-kind="desktop"][data-theme="light"] .tab:hover{color:#3b1c50;background:rgba(103,58,137,.07)}
  html[data-kind="desktop"][data-theme="light"] .tab.on{
    color:#6a367f;border-color:rgba(166,118,47,.42);
    background:linear-gradient(145deg,rgba(228,205,145,.34),rgba(192,156,217,.34));
  }
  html[data-kind="desktop"][data-theme="light"] .view,
  html[data-kind="desktop"][data-theme="light"] #room,
  html[data-kind="desktop"][data-theme="light"] .desktop-room-empty{
    background:
      radial-gradient(620px 360px at 50% 10%,rgba(153,105,187,.14),transparent 74%),
      linear-gradient(180deg,#fbf8fd,#f1eaf6);
  }
  html[data-kind="desktop"][data-theme="light"][data-tab="v-halls"] .main{border-right-color:rgba(92,55,124,.14)}
  html[data-kind="desktop"][data-theme="light"] .desktop-room-empty{color:#75627f}
  html[data-kind="desktop"][data-theme="light"] .desktop-room-empty b{color:#321642}
  html[data-kind="desktop"][data-theme="light"] .rhead{
    background:linear-gradient(90deg,rgba(237,225,246,.96),rgba(250,247,252,.98));
    border-bottom-color:rgba(92,55,124,.14);
  }
  html[data-kind="desktop"][data-theme="light"] .composer{
    background:linear-gradient(110deg,rgba(255,255,255,.98),rgba(244,237,249,.98));
    border-color:rgba(92,55,124,.18);box-shadow:0 18px 46px rgba(76,48,91,.12);
  }
}

@media (min-width:1420px) and (hover:hover) and (pointer:fine){
  html[data-kind="desktop"] #app.is-entered{grid-template-columns:98px 420px minmax(0,1fr)}
}