/*
 * Home-screen app mode (docs/app-mode.md): the bottom tab bar (partials/app-bar.twig) and the few chrome tweaks that
 * exist only when the site runs as an installed app (iOS "Add to Home Screen", Android/desktop "Install").
 * Everything app-only sits inside the display-mode media query, so a normal browser is untouched and there is no
 * flash (no script needed to decide). modern/app-mode.js adds html.es-app for the script-side logic.
 */
.app-bar, .app-menu, .app-only, .app-push-card { display: none; }
.tool-app { display: none; }
.app-install-link { display: none; }
/* "Forum kao aplikacija" link: only on a touch device in a normal browser tab */
@media (pointer: coarse) {
  html:not(.es-app) .app-install-link { display: list-item; }
}
/* the header's phone icon (layout/masthead.twig): phones and tablets in a normal browser tab only */
@media (pointer: coarse) and (max-width: 1100px) {
  html:not(.es-app) .tool-app { display: inline-flex; }
}
.app-bar [hidden], [data-app-install][hidden] { display: none; }

@media (display-mode: standalone) {
  .app-install-link, .web-only { display: none !important; }
  .app-only { display: block; }
  /* room for the bar so the last content and the footer are not hidden behind it */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .app-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--chrome-bg); border-top: 1px solid var(--chrome-line);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .app-tab {
    position: relative; flex: 1 1 0; min-width: 0; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    margin: 0; padding: 6px 2px; border: 0; background: none; border-radius: 0;
    font: inherit; font-size: 11px; font-weight: 550; line-height: 1.1; color: var(--chrome-text);
    text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer;
  }
  .app-tab:hover { text-decoration: none; color: var(--chrome-strong); }
  .app-tab:active { background: var(--chrome-hover); }
  .app-tab .icon { width: 22px; height: 22px; }
  .app-tab span:not(.count):not(.sr-only) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tab[aria-current] { color: var(--chrome-strong); background: var(--chrome-active); box-shadow: inset 0 2px 0 var(--accent); }
  .app-tab:disabled { opacity: .35; pointer-events: none; }
  .app-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
  .app-count { position: absolute; top: 4px; left: calc(50% + 4px); }
  /* the bar is the only navigation: the header keeps the logo and the look menu (and its dropdown); its links, search,
     messages, bookmarks, account and sign-in move to the menu sheet / the tabs */
  .site-nav, .site-search, .tool-search, .tool-app, .site-tools > a.tool-btn, .site-tools > .bm-menu, .site-tools > .user-menu,
  .site-tools > .site-signin, .site-tools > .site-register, .site-logo-name { display: none !important; }
  .site-header-bar { height: 44px; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
  .site-logo { height: 44px; }
  .site-tools { margin-left: auto; }
  /* the menu sheet (Meni tab) */
  .app-menu:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 70; }
  .app-menu-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
  .app-menu-sheet {
    position: absolute; left: 0; right: 0; bottom: calc(57px + env(safe-area-inset-bottom, 0px)); top: auto;
    max-height: calc(100% - 57px - env(safe-area-inset-bottom, 0px) - 60px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; padding: 6px 8px 8px;
    padding-left: calc(8px + env(safe-area-inset-left, 0px)); padding-right: calc(8px + env(safe-area-inset-right, 0px));
  }
  .app-menu-sheet a, .app-menu-sheet button { min-height: 48px; }
  /* a clear way out (Gojko 2026-11-02): a sticky top row with the grip and an X; a tap on the dim area, the Meni tab,
     Escape and a swipe down (modern/app-mode.js) close it too */
  .app-menu-top { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -6px -8px 4px;
    padding: 10px 8px 6px 16px; background: inherit; border-bottom: 1px solid var(--border); }
  .app-menu-top strong { flex: 1; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
  .app-menu-grip { position: absolute; left: 50%; top: 4px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
  .app-menu-sheet .app-menu-x { min-height: 44px; width: 44px; justify-content: center; padding: 0; border-radius: 50%; background: var(--surface-2); }
  .app-menu-x .icon { width: 20px; height: 20px; color: var(--text); }
  .app-tab[aria-expanded="true"] { color: var(--chrome-strong); background: var(--chrome-active); box-shadow: inset 0 2px 0 var(--accent); }
  /* pull to refresh (modern/app-mode.js): a pill that comes down from the top as the page is pulled */
  .app-pull {
    position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) - 36px); z-index: 80; opacity: 0;
    display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; pointer-events: none;
    background: var(--surface); color: var(--muted); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; transform: translate(-50%, 0); transition: opacity .15s;
  }
  .app-pull.ready { color: var(--accent); }
  .app-pull.busy svg { animation: app-pull-spin .8s linear infinite; }
  @keyframes app-pull-spin { to { transform: rotate(360deg); } }
}
@media (display-mode: standalone) and (min-width: 761px) {
  .app-tab { flex-direction: row; gap: 8px; font-size: var(--fs-sm); }
}

/* things fixed at the bottom of the screen sit above the bar, not over its tabs: the minimized PP box ("Poruke"), the
   in-place and composer toasts. `html` outranks pp-chat.css, which loads later */
@media (display-mode: standalone) {
  html .ppc-pill { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  html .ip-toast, html .composer-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
html.es-app .ppc-pill { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
html.es-app .ip-toast, html.es-app .composer-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
/* "Poruke" stays under the menu sheet (z-index 70) and steps aside while the notifications card is up (the menu's
   Privatne poruke has the same count) */
html.es-app .ppc-pill { z-index: 65; }
html.es-app:has(.app-push-card:not([hidden])) .ppc-pill { display: none; }
/* typing (modern/app-mode.js html.es-typing): the bar goes away, as in native apps; with the keyboard up it only took
   room above it */
@media (display-mode: standalone) {
  html.es-typing .app-bar { display: none; }
}

/* phone notifications card (partials/app-bar.twig, modern/push.js): above the bar, only in the app, once */
@media (display-mode: standalone) {
  .app-push-card:not([hidden]) {
    display: block; position: fixed; left: 12px; right: 12px; z-index: 61;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    padding: var(--space-3) var(--space-4); border-radius: 12px;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  }
  .app-push-card p { margin: 0 0 var(--space-2); }
  .app-push-card .push-error { color: var(--danger); }
}