/* ARCR Tools: the panel inside the phone app, and the card a phone browser
 * shows to point at it.
 *
 * html.in-app is set by the server (core.context_processors.app_mode) from the
 * "ARCRToolsApp/" the app adds to its user agent, so app mode is there before
 * the first paint rather than switched on by script after it.
 */

/* ── inside the app ───────────────────────────────────────────────────── */
.in-app body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }

/* The page runs under the status bar and the home indicator (viewport-fit=cover);
   the bars that sit at the edges move clear of them. */
.in-app .topbar { padding-top: calc(env(safe-area-inset-top, 0px) + .5rem) !important; }
.in-app .sidebar { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.in-app .app-footer { display: none !important; }
/* The sign-in page has its own layout and its own padding at phone widths. */
html.in-app body.login-page { padding-top: calc(env(safe-area-inset-top, 0px) + .75rem) !important;
                              padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem) !important; }

/* Things only a browser needs. */
.in-app [data-app-hide] { display: none !important; }

/* Touch: a finger, not a pointer. */
.in-app .btn-sm { min-height: 34px; }
.in-app .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }
.in-app .nav-link { min-height: 44px; }

/* The bottom tabs, on anything narrower than the docked sidebar. */
.app-tabs { display: none; }
@media (max-width: 991.98px) {
  .in-app #page-content-wrapper { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .in-app .app-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    padding: 2px 4px env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bs-body-bg) 90%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--bs-border-color-translucent);
  }
}
.app-tab {
  flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 4px 2px; border: 0; background: none;
  color: var(--bs-secondary-color); text-decoration: none; font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  -webkit-user-select: none; user-select: none;
}
.app-tab i { font-size: 1.15rem; line-height: 1; }
.app-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-tab.active { color: var(--accent, var(--bs-primary)); }
.app-tab:active { transform: scale(.94); }
[data-reduce-motion] .app-tab:active { transform: none; }

/* A short message from the app (Google connected, and the like). */
.app-toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 1090;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px);
  padding: .6rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 500;
  background: #0f172a; color: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
}
.app-toast.bad { background: #b91c1c; }

/* ── a phone browser: the card that offers the app ───────────────────── */
.app-offer {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .75rem .9rem;
  border-radius: 14px; border: 1px solid var(--bs-border-color-translucent);
  background: color-mix(in srgb, var(--accent, #00bcd4) 9%, var(--bs-body-bg));
}
.app-offer img { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.app-offer .txt { flex: 1; min-width: 0; font-size: .85rem; line-height: 1.3; }
.app-offer .txt strong { display: block; font-size: .92rem; }
.app-offer .close { flex: none; border: 0; background: none; color: var(--bs-secondary-color); padding: .25rem .4rem; }
.login-page .app-offer { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1050; margin: 0;
                         box-shadow: 0 8px 28px rgba(15, 23, 42, .18); background: var(--bs-body-bg); }