/*
 * /css/layouts.css
 * Глобальна оболонка VMEREGI: topbar, desktop sidebar, content stage, mobile bottom navigation.
 */

html{min-height:100%;background:var(--vm-bg)}
body.bg-app,
body.vm-public-body{
  min-height:100vh;
  margin:0;
  color:var(--vm-text);
  background:
    radial-gradient(circle at 5% 0%,rgba(91,93,240,.12),transparent 28rem),
    radial-gradient(circle at 95% 6%,rgba(34,184,207,.10),transparent 26rem),
    linear-gradient(180deg,var(--vm-bg-elevated),var(--vm-bg));
  background-attachment:fixed;
}
body.vm-public-body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.35;
  background-image:linear-gradient(rgba(91,93,240,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(91,93,240,.025) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,#000,transparent 78%);
}
html[data-theme="dark"] body.vm-public-body{
  background:
    radial-gradient(circle at 7% 0%,rgba(91,93,240,.18),transparent 28rem),
    radial-gradient(circle at 94% 7%,rgba(34,184,207,.11),transparent 25rem),
    linear-gradient(180deg,var(--vm-bg-elevated),var(--vm-bg));
}

.vm-app-frame{min-height:100vh}
.vm-app-stage{
  min-width:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  margin-left:var(--vm-sidebar-width);
  transition:margin-left .22s ease;
}
.vm-app-stage>.app-main-shell{flex:1 0 auto}

/* ===== Topbar ===== */
.vm-topbar{
  position:sticky;
  top:0;
  z-index:1030;
  min-height:var(--vm-topbar-height);
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--vm-border);
  background:color-mix(in srgb,var(--vm-surface) 91%,transparent);
  box-shadow:0 8px 26px rgba(24,36,90,.08);
  backdrop-filter:blur(20px) saturate(145%);
}
.vm-topbar-inner{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(240px,560px) 1fr auto;
  align-items:center;
  gap:14px;
  padding:10px 22px;
}
.vm-topbar-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--vm-navigation);
  text-decoration:none;
}
.vm-topbar-brand:hover{color:var(--vm-primary)}
.vm-brand-symbol{
  position:relative;
  width:43px;
  height:43px;
  flex:0 0 43px;
  border-radius:14px;
  background:linear-gradient(145deg,var(--vm-primary),var(--vm-accent));
  box-shadow:0 10px 24px rgba(91,93,240,.25),inset 0 1px 0 rgba(255,255,255,.35);
}
.vm-brand-symbol::before,.vm-brand-symbol::after{content:"";position:absolute;border-radius:50%;background:#fff;box-shadow:0 7px 0 -1px #fff}
.vm-brand-symbol::before{width:10px;height:10px;left:9px;top:8px}
.vm-brand-symbol::after{width:12px;height:12px;right:8px;top:6px}
.vm-brand-symbol span{position:absolute;left:10px;right:10px;bottom:8px;height:12px;border-radius:9px 9px 5px 5px;background:#fff}
.vm-brand-copy{display:flex;flex-direction:column;line-height:1.02}
.vm-brand-copy strong{color:var(--vm-text);font-size:1.04rem;font-weight:900;letter-spacing:.025em}
.vm-brand-copy small{color:var(--vm-muted);font-size:.66rem;font-weight:700;letter-spacing:.03em}
.vm-sidebar-toggle{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--vm-border);
  border-radius:13px;
  color:var(--vm-text-soft);
  background:var(--vm-surface-soft);
}
.vm-sidebar-toggle:hover{color:var(--vm-primary);border-color:var(--vm-border-strong);background:var(--vm-primary-soft)}
.vm-sidebar-toggle .vm-ui-icon{width:21px;height:21px}

.vm-topbar-search{
  min-width:0;
  height:44px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:1px solid var(--vm-border);
  border-radius:14px;
  background:var(--vm-surface-soft);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.vm-topbar-search:focus-within{border-color:var(--vm-primary);background:var(--vm-surface);box-shadow:var(--vm-focus)}
.vm-topbar-search .vm-ui-icon{width:19px;height:19px;color:var(--vm-muted)}
.vm-topbar-search input{min-width:0;border:0;outline:0;color:var(--vm-text);background:transparent;font-size:.92rem}
.vm-topbar-search input::placeholder{color:var(--vm-muted)}
.vm-topbar-search kbd{padding:3px 7px;border:1px solid var(--vm-border);border-radius:7px;color:var(--vm-muted);background:var(--vm-surface);font-size:.69rem;font-weight:700}

.vm-topbar-spacer{min-width:0}
.vm-topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.vm-topbar-action{
  position:relative;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--vm-border);
  border-radius:13px;
  color:var(--vm-text-soft);
  background:var(--vm-surface-soft);
  text-decoration:none;
}
.vm-topbar-action:hover{color:var(--vm-primary);border-color:var(--vm-border-strong);background:var(--vm-primary-soft)}
.vm-topbar-action .vm-ui-icon{width:20px;height:20px}
.vm-topbar-badge{
  position:absolute;
  right:-5px;
  top:-5px;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border:2px solid var(--vm-surface);
  border-radius:999px;
  color:#fff;
  background:var(--vm-danger);
  font-size:.62rem;
  font-weight:900;
}
.vm-theme-sun,.vm-theme-moon{position:absolute}
html[data-theme="light"] .vm-theme-sun{display:none}
html[data-theme="light"] .vm-theme-moon{display:block}
html[data-theme="dark"] .vm-theme-sun{display:block}
html[data-theme="dark"] .vm-theme-moon{display:none}

.vm-topbar-profile-btn{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:3px 8px 3px 3px;
  border:1px solid var(--vm-border);
  border-radius:15px;
  color:var(--vm-text);
  background:var(--vm-surface-soft);
}
.vm-topbar-profile-btn::after{margin-left:0;color:var(--vm-muted)}
.vm-topbar-profile-copy{max-width:132px;display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.vm-topbar-profile-copy strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
.vm-topbar-profile-copy small{color:var(--vm-muted);font-size:.67rem}
.vm-profile-menu{width:min(300px,calc(100vw - 20px));padding:8px}
.vm-profile-menu-head{display:flex;align-items:center;gap:11px;padding:10px;margin-bottom:4px;border-radius:12px;background:var(--vm-surface-soft)}
.vm-profile-menu-head>span:last-child{min-width:0;display:flex;flex-direction:column}
.vm-profile-menu-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-profile-menu-head small{color:var(--vm-muted)}
.vm-profile-menu .dropdown-item{display:flex;align-items:center;gap:10px;min-height:40px}
.vm-profile-menu .dropdown-item .vm-ui-icon{width:18px;height:18px;color:var(--vm-muted)}
.vm-profile-languages{display:flex;gap:5px;padding:7px 4px}
.vm-profile-languages a{flex:1;padding:6px;border:1px solid var(--vm-border);border-radius:9px;color:var(--vm-muted);text-align:center;text-decoration:none;font-size:.75rem;font-weight:800}
.vm-profile-languages a:hover{color:var(--vm-primary);border-color:var(--vm-border-strong);background:var(--vm-primary-soft)}
.vm-topbar-auth{display:flex;gap:8px}

/* ===== Desktop sidebar ===== */
.vm-app-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:1040;
  width:var(--vm-sidebar-width);
  overflow:hidden;
  color:#fff;
  border-right:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 25% -8%,rgba(34,184,207,.34),transparent 28%),
    radial-gradient(circle at 100% 30%,rgba(236,72,153,.18),transparent 28%),
    linear-gradient(165deg,var(--vm-navigation) 0%,var(--vm-navigation-2) 62%,var(--vm-navigation-3) 100%);
  box-shadow:16px 0 44px rgba(18,27,69,.18);
  transition:width .22s ease;
}
.vm-app-sidebar-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:14px 11px 20px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.vm-sidebar-profile,.vm-sidebar-guest{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:12px;
  padding:9px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:17px;
  color:#fff;
  background:rgba(255,255,255,.08);
  text-decoration:none;
  backdrop-filter:blur(10px);
}
.vm-sidebar-profile:hover{color:#fff;background:rgba(255,255,255,.13)}
.vm-sidebar-profile-avatar{border-color:rgba(255,255,255,.26)}
.vm-sidebar-profile-copy{min-width:0;display:flex;flex-direction:column;line-height:1.08}
.vm-sidebar-profile-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.83rem}
.vm-sidebar-profile-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.58);font-size:.69rem}
.vm-sidebar-guest-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;border-radius:14px;color:#fff;background:rgba(255,255,255,.12)}
.vm-sidebar-guest-icon .vm-ui-icon{width:22px;height:22px}
.vm-sidebar-nav{display:flex;flex-direction:column;gap:12px}
.vm-sidebar-section h2{margin:0 0 5px;padding:0 11px;color:rgba(255,255,255,.43);font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.vm-sidebar-links{display:flex;flex-direction:column;gap:3px}
.vm-sidebar-link{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:12px;
  color:rgba(255,255,255,.76);
  text-decoration:none;
  font-size:.82rem;
  font-weight:720;
  transition:color .16s ease,background .16s ease,transform .16s ease;
}
.vm-sidebar-link:hover{color:#fff;background:rgba(255,255,255,.10);transform:translateX(2px)}
.vm-sidebar-link.is-active{color:var(--vm-navigation);background:#fff;box-shadow:0 10px 24px rgba(3,8,28,.24)}
.vm-sidebar-link-icon{width:29px;height:29px;display:grid;place-items:center;flex:0 0 29px;border-radius:10px;color:inherit;background:rgba(255,255,255,.09)}
.vm-sidebar-link.is-active .vm-sidebar-link-icon{color:#fff;background:linear-gradient(145deg,var(--vm-primary),var(--vm-accent))}
.vm-sidebar-link-icon .vm-ui-icon{width:17px;height:17px}
.vm-sidebar-link-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-sidebar-utility{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.11)}

/* ===== Main content ===== */
.vm-public-body .app-main-shell{
  width:auto;
  max-width:1440px;
  margin:0 auto;
  padding:22px 24px 10px;
}
.vm-public-body .feed-layout{gap:20px}
.vm-public-body .sidebar-sticky{top:calc(var(--vm-topbar-height) + 18px)}

/* ===== Notifications dropdown in new topbar ===== */
.hdr-notif-toggle::after{display:none!important}
.hdr-notif-menu{width:min(420px,calc(100vw - 22px));padding:0!important;overflow:hidden}
.hdr-notif-head,.hdr-notif-foot{border-color:var(--vm-border)!important;background:var(--vm-surface)!important}
.hdr-notif-list,.hdr-notif-item,.hdr-notif-empty{background:var(--vm-surface)!important}
.hdr-notif-item{color:var(--vm-text)!important;border-color:var(--vm-border)!important}
.hdr-notif-item:hover{background:var(--vm-surface-soft)!important}
.hdr-notif-item.unread{background:var(--vm-primary-soft)!important}
.hdr-notif-text{color:var(--vm-text)!important}
.hdr-notif-meta{color:var(--vm-muted)!important}

/* ===== Footer / bottom navigation ===== */
.footer-app{margin:24px!important;border:1px solid var(--vm-border)!important;border-radius:var(--vm-radius-lg)!important;background:var(--vm-surface-glass)!important;box-shadow:var(--vm-shadow-sm)!important}
.vm-mobile-nav{display:none}

/* compact rail on common laptop widths */
@media (min-width:992px) and (max-width:1599.98px){
  .vm-app-stage{margin-left:var(--vm-sidebar-compact)}
  .vm-app-sidebar{width:var(--vm-sidebar-compact)}
  .vm-app-sidebar .vm-sidebar-profile-copy,
  .vm-app-sidebar .vm-sidebar-section h2,
  .vm-app-sidebar .vm-sidebar-link-label{display:none}
  .vm-app-sidebar .vm-sidebar-profile,
  .vm-app-sidebar .vm-sidebar-guest{justify-content:center;padding:9px}
  .vm-app-sidebar .vm-sidebar-link{justify-content:center;padding:7px}
  .vm-app-sidebar:hover,
  .vm-app-sidebar:focus-within{width:var(--vm-sidebar-width);box-shadow:24px 0 60px rgba(10,16,49,.34)}
  .vm-app-sidebar:hover .vm-sidebar-profile-copy,
  .vm-app-sidebar:focus-within .vm-sidebar-profile-copy{display:flex}
  .vm-app-sidebar:hover .vm-sidebar-section h2,
  .vm-app-sidebar:focus-within .vm-sidebar-section h2{display:block}
  .vm-app-sidebar:hover .vm-sidebar-link-label,
  .vm-app-sidebar:focus-within .vm-sidebar-link-label{display:block}
  .vm-app-sidebar:hover .vm-sidebar-profile,
  .vm-app-sidebar:focus-within .vm-sidebar-profile,
  .vm-app-sidebar:hover .vm-sidebar-guest,
  .vm-app-sidebar:focus-within .vm-sidebar-guest{justify-content:flex-start}
  .vm-app-sidebar:hover .vm-sidebar-link,
  .vm-app-sidebar:focus-within .vm-sidebar-link{justify-content:flex-start}
}

@media (min-width:1600px){
  body.vm-sidebar-collapsed .vm-app-stage{margin-left:var(--vm-sidebar-compact)}
  body.vm-sidebar-collapsed .vm-app-sidebar{width:var(--vm-sidebar-compact)}
  body.vm-sidebar-collapsed .vm-sidebar-profile-copy,
  body.vm-sidebar-collapsed .vm-sidebar-section h2,
  body.vm-sidebar-collapsed .vm-sidebar-link-label{display:none}
  body.vm-sidebar-collapsed .vm-sidebar-profile,
  body.vm-sidebar-collapsed .vm-sidebar-guest,
  body.vm-sidebar-collapsed .vm-sidebar-link{justify-content:center}
}

@media (max-width:1199.98px) and (min-width:992px){
  .vm-public-body .feed-layout{grid-template-columns:minmax(0,1fr) 250px}
  .vm-public-body .feed-layout>aside:first-child{display:none}
  .vm-public-body .feed-layout>section{order:1}
  .vm-public-body .feed-layout>aside:last-child{order:2}
}

@media (max-width:1199.98px){
  .vm-topbar-inner{grid-template-columns:auto minmax(220px,1fr) auto}
  .vm-topbar-brand .vm-brand-copy{display:none}
  .vm-topbar-spacer{display:none}
  .vm-topbar-profile-copy{display:none}
}

@media (max-width:991.98px){
  :root{--vm-topbar-height:62px}
  body.vm-public-body{padding-bottom:calc(var(--vm-mobile-nav-height) + env(safe-area-inset-bottom,0px))}
  .vm-app-sidebar{display:none}
  .vm-app-stage{margin-left:0}
  .vm-sidebar-toggle{display:none}
  .vm-topbar{min-height:var(--vm-topbar-height)}
  .vm-topbar-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:9px;padding:8px 12px}
  .vm-topbar-brand{gap:0}
  .vm-brand-symbol{width:40px;height:40px;flex-basis:40px;border-radius:13px}
  .vm-brand-copy{display:none!important}
  .vm-topbar-search{height:40px}
  .vm-topbar-search kbd{display:none}
  .vm-topbar-actions{gap:6px}
  .vm-topbar-action{width:40px;height:40px}
  .vm-topbar-actions>a[href="/messages/"],
  .vm-topbar-actions>[data-ui-theme-toggle]{display:none}
  .vm-topbar-profile-btn{width:40px;min-height:40px;padding:2px;border-radius:13px}
  .vm-topbar-profile-btn::after{display:none}
  .vm-topbar-auth .btn:first-child{display:none}
  .vm-public-body .app-main-shell{padding:14px 12px 4px}
  .vm-public-body .feed-layout{grid-template-columns:1fr;gap:14px}
  .vm-public-body .feed-layout>section{order:1}
  .vm-public-body .feed-layout>aside:first-child{order:2}
  .vm-public-body .feed-layout>aside:last-child{order:3}
  .vm-public-body .sidebar-sticky{position:static}
  .footer-app{margin:18px 10px!important}
  .vm-mobile-nav{
    position:fixed;
    inset:auto 0 0;
    z-index:1060;
    height:calc(var(--vm-mobile-nav-height) + env(safe-area-inset-bottom,0px));
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:start;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--vm-border);
    background:color-mix(in srgb,var(--vm-surface) 94%,transparent);
    box-shadow:0 -10px 34px rgba(24,36,90,.13);
    backdrop-filter:blur(20px) saturate(145%);
  }
  .vm-mobile-nav-link{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 2px;
    border-radius:12px;
    color:var(--vm-muted);
    text-decoration:none;
    font-size:.64rem;
    font-weight:760;
  }
  .vm-mobile-nav-link:hover,.vm-mobile-nav-link.is-active{color:var(--vm-primary);background:var(--vm-primary-soft)}
  .vm-mobile-nav-icon{position:relative;display:grid;place-items:center}
  .vm-mobile-nav-icon .vm-ui-icon{width:22px;height:22px}
  .vm-mobile-nav-icon b{position:absolute;right:-8px;top:-6px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--vm-surface);border-radius:999px;color:#fff;background:var(--vm-danger);font-size:.54rem}
  .vm-audio-dock{bottom:var(--vm-mobile-nav-height)!important}
}

@media (max-width:575.98px){
  .vm-topbar-inner{grid-template-columns:auto minmax(0,1fr) auto}
  .vm-topbar-search{padding:0 10px}
  .vm-topbar-search input{font-size:.82rem}
  .vm-topbar-actions>.dropdown:has(.vm-topbar-profile-btn){display:none}
  .vm-topbar-auth .btn{min-height:38px;padding:6px 10px;font-size:.78rem}
  .vm-public-body .app-main-shell{padding-left:9px;padding-right:9px}
  .vm-toast-stack{right:8px;top:70px}
}

@supports not (color:color-mix(in srgb,#000,#fff)){
  .vm-topbar{background:var(--vm-surface)}
  .vm-topbar-search,.vm-topbar-action,.vm-topbar-profile-btn{background:var(--vm-surface-soft)}
  .vm-mobile-nav{background:var(--vm-surface)}
}

/* ===== Footer internals ===== */
.footer-app{padding:24px}
.footer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.footer-left{min-width:0;flex:1 1 auto}
.footer-copy{color:var(--vm-muted);font-size:.82rem;line-height:1.5}
.footer-copy a{color:var(--vm-text-soft);font-weight:750;text-decoration:none}
.footer-copy a:hover{color:var(--vm-primary)}
.footer-pages{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
.footer-page-link{color:var(--vm-muted);font-size:.78rem;text-decoration:none}
.footer-page-link:hover{color:var(--vm-primary)}
.footer-right{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.footer-language{color:var(--vm-muted);font-size:.75rem;font-weight:750;letter-spacing:.06em}
.footer-counter{min-height:61px;display:grid;place-items:center;line-height:0}
.footer-counter img,.footer-counter canvas,.footer-counter svg{display:block;max-width:100%;height:auto}

@media (max-width:767.98px){
  .footer-app{padding:20px 16px}
  .footer-main{flex-direction:column;align-items:center;text-align:center}
  .footer-pages{justify-content:center}
  .footer-right{width:100%;justify-content:center}
}

/* Notification menu structure (shared by all pages) */
.hdr-notif-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-bottom:1px solid var(--vm-border);
  font-weight:850;
}
.hdr-notif-list{max-height:460px;overflow:auto}
.hdr-notif-item{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--vm-border);
  text-decoration:none;
}
.hdr-notif-item:last-child{border-bottom:0}
.hdr-notif-ava{width:44px;height:44px;overflow:hidden;flex:0 0 44px;border-radius:14px;background:var(--vm-surface-soft)}
.hdr-notif-ava img{width:100%;height:100%;display:block;object-fit:cover}
.hdr-notif-body{min-width:0;flex:1 1 auto}
.hdr-notif-text{font-size:.84rem;line-height:1.35;overflow-wrap:anywhere}
.hdr-notif-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:.7rem}
.hdr-notif-empty{padding:22px 14px;color:var(--vm-muted);text-align:center}
.hdr-notif-foot{padding:11px 14px;border-top:1px solid var(--vm-border);text-align:center;font-size:.82rem;font-weight:750}
.hdr-notif-new-dot{width:8px;height:8px;display:inline-block;flex:0 0 8px;border-radius:50%;background:var(--vm-success)}

.vm-toast>.vm-state-icon{width:34px;height:34px;border-radius:11px;font-size:.95rem;font-weight:900}