/* enesay.ru — public/css/shell.css */

.app-shell { position: relative; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

#app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    align-items: stretch; justify-content: flex-start; width: 100%; }
#app > [data-app] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; }

/* контент */
.content { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%;
    display: flex; flex-direction: column;
    padding: var(--s-5);
    padding-left: max(var(--s-5), env(safe-area-inset-left, 0px));
    padding-right: max(var(--s-5), env(safe-area-inset-right, 0px));
    padding-top: max(var(--s-5), env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom, 0px)); }

/* таббар — снизу на мобильном */
.tabbar { position: fixed; left:0; right:0; bottom:0; z-index:50;
    width: 100%; max-width: 100%; box-sizing: border-box;
    transform: translateZ(0);
    display:flex; align-items:stretch; justify-content:space-around; gap:0;
    min-height: var(--tabbar-h);
    padding: 6px 8px; padding-bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) + 4px));
    background: var(--glass-bg-strong);
    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
    border-top: 1px solid var(--glass-border); }
.tabbar .tab { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; padding:6px 4px; color: var(--fg-mute); font-size: var(--fs-xs); font-weight: var(--fw-med);
    letter-spacing: var(--ls-loose); text-decoration:none; border-radius: var(--r-2); min-width:0;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }

.tabbar .tab:hover { color: var(--fg-dim); }
.tabbar .tab.active { color: var(--accent); }
.tabbar .tab svg { width:24px; height:24px; fill:none; stroke: currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; display:block; transition: transform var(--t-fast) var(--ease); }
.tabbar .tab:active svg { transform: scale(.9); }
.tabbar .tab span { display: none; }
.tabbar .tab-avatar { flex: 1 1 0; padding: 6px 4px; border-radius: var(--r-2); }
.tabbar .tab-avatar .tab-avatar-circle { width: 24px; height: 24px; flex: 0 0 auto;
    border-radius: 50%; background: var(--bg-elev); color: var(--fg);
    border: 1.5px solid var(--border-hi);
    display: grid; place-items: center; font-size: 11px; font-weight: var(--fw-semi);
    line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.tabbar .tab-avatar.active .tab-avatar-circle { background: var(--accent); color: #fff;
    border-color: var(--accent-hi); }

/* планшет/ПК — сайдбар слева */
@media (min-width: 900px) {
    .content { margin-left: 0; margin-right: 0; width: 100%; max-width: none;
        padding: var(--s-6); padding-left: calc(var(--sidebar-w) + var(--s-6));
        padding-bottom: var(--s-6); box-sizing: border-box;
        display: flex; align-items: center; justify-content: center; }
    .content > #app { width: 100%; max-width: 900px; margin: 0 auto;
        display: flex; align-items: center; justify-content: center; }
    .content > #app { width: 100%; max-width: 900px; margin: 0 auto; }
    .tabbar { top:0; left:0; right:auto; bottom:0; width: var(--sidebar-w);
        min-height:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px;
        padding: var(--s-4) var(--s-3);
        padding-top: max(var(--s-4), env(safe-area-inset-top, 0px));
        padding-left: max(var(--s-3), env(safe-area-inset-left, 0px));
        border-top:none; border-right:1px solid var(--glass-border); border-bottom:none;
        overflow-y:auto; }
    .tabbar .tab { flex:0 0 auto; flex-direction:row; justify-content:center; align-items:center;
        gap:0; width:100%; height:44px; padding:0; border-radius: var(--r-2); }

    .tabbar .tab svg { width:22px; height:22px; }
    .tabbar .tab-avatar { flex: 0 0 auto; flex-direction: row; justify-content: center;
        height: 44px; padding: 0; }
    .tabbar .tab-avatar .tab-avatar-circle { width: 22px; height: 22px; }
}

.app-shell.is-fullscreen .content { padding-bottom: 0; }
@media (min-width: 900px) {
    .app-shell.is-fullscreen .content { margin-left: 0; margin-right: 0; max-width: none; padding: var(--s-6); }
}



#tabbar { display: none !important; box-sizing: border-box; }
body.shell-ready.is-authed .app-shell:not(.is-fullscreen) #tabbar { display: flex !important; }

html, body { overscroll-behavior: none; }

.error-page { position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: var(--s-6); }
.error-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
    text-align: center; }
.error-title { font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: var(--lh-base);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-mute);
    text-align: center; max-width: 32ch; }
.error-page .btn { color: var(--fg-mute); margin-top: var(--s-2); }
.error-page .btn:hover { color: var(--fg-dim); }

.loader { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
    pointer-events: none; opacity: 0; animation: loader-fade-in 150ms forwards; }
@keyframes loader-fade-in { to { opacity: 1; } }
.loader-spinner { width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--border-2); border-top-color: var(--accent);
    animation: loader-spin 800ms linear infinite; }
@keyframes loader-spin { to { transform: rotate(360deg); } }

/* iOS standalone: 100dvh короче экрана на safe-area — flex-макет, таббар прижат к низу */
@media (max-width: 599px) and (display-mode: standalone) {
    html, body { height: 100lvh; overflow: hidden; }
    .app-shell { display: flex; flex-direction: column; height: 100lvh; }
    .tabbar { position: static; flex-shrink: 0; width: 100%; max-width: 100%; box-sizing: border-box; align-self: stretch; }
    .content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}