.pwa-install-controls[hidden], .pwa-install-button[hidden] { display: none !important; }
.pwa-install-sidebar-controls { display: contents; }
.pwa-install-login-controls { display: grid; gap: 4px; margin-top: 16px; }
.pwa-install-dialog [hidden] { display: none !important; }
.pwa-install-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pwa-install-button svg, .pwa-install-dialog svg {
  flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.pwa-install-icon { display: grid; place-items: center; flex: 0 0 20px; }
.pwa-install-button .nav-icon svg { width: 20px; height: 20px; }
.login-card .pwa-install-login {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; margin-top: 0; padding: 9px 10px;
  border-color: var(--border-default); color: var(--text-secondary); font-size: 13px;
}
.login-card .pwa-install-help { border-color: transparent; background: transparent; font-size: 12px; }
.sidebar-nav .pwa-install-help { color: var(--text-muted); }
.sidebar-nav .pwa-install-nav {
  flex-shrink: 0; width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer;
}
.sidebar-nav .pwa-install-nav:hover { background: var(--surface-hover); }
.pwa-install-button:focus-visible, .pwa-install-dialog button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pwa-install-button:disabled { opacity: .65; cursor: wait; }
.pwa-install-button:active:not(:disabled) { background: var(--brand-soft); }
.pwa-install-button[aria-busy="true"] svg { opacity: .45; }
.app-dialog.pwa-install-dialog {
  width: min(460px, calc(100% - 24px - var(--service-safe-left) - var(--service-safe-right))); min-width: 0;
  left: var(--service-safe-left); right: var(--service-safe-right);
  top: calc(var(--install-viewport-top, 0px) + var(--service-safe-top));
  bottom: calc(var(--install-viewport-bottom, 0px) + var(--service-safe-bottom));
  max-height: calc(100vh - 24px - var(--service-safe-top) - var(--service-safe-bottom));
  max-height: calc(var(--install-viewport-height, 100dvh) - 24px - var(--service-safe-top) - var(--service-safe-bottom));
  padding: 0; overflow: hidden;
}
.app-dialog.pwa-install-dialog[open] { display: flex; flex-direction: column; }
body:has(> .pwa-install-dialog[open]) { overflow: hidden; }
.pwa-install-dialog .app-dialog-header { position: static; flex: 0 0 auto; align-items: center; gap: 10px; padding: 16px; }
.pwa-install-dialog .app-dialog-header > div { min-width: 0; }
.pwa-install-dialog .app-dialog-title { display: flex; align-items: center; gap: 8px; font-size: 18px; overflow-wrap: anywhere; }
.pwa-install-dialog .app-dialog-title svg { color: var(--brand-hover); }
.pwa-install-dialog .dialog-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; }
.pwa-install-dialog .dialog-close::before, .pwa-install-dialog .dialog-close::after { display: none; }
.pwa-install-dialog .app-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.pwa-install-copy { margin: 0 0 12px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.pwa-install-steps { margin: 0 0 12px; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.pwa-install-steps li + li { margin-top: 8px; }
.pwa-install-note { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.pwa-install-dialog .app-dialog-actions { position: static; flex: 0 0 auto; padding: 12px 16px; }
.pwa-install-dialog .app-dialog-actions button { flex: 0 1 auto; min-height: 44px; }
.pwa-install-dialog .pwa-install-native { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
@media (any-pointer: coarse), (max-width: 980px) {
  .sidebar-nav .pwa-install-nav, .sidebar.is-collapsed .sidebar-nav .pwa-install-nav { min-height: 44px; }
  .sidebar.is-collapsed .sidebar-nav .pwa-install-nav { width: 100%; }
}
@media (min-width: 981px) and (any-pointer: coarse) {
  .sidebar.is-collapsed .sidebar-nav:has(.pwa-install-nav:not([hidden])) { align-self: center; width: max(100%, 44px); }
  .sidebar.is-collapsed .sidebar-nav .pwa-install-nav { min-width: 44px; }
}

/* Paint to the viewport edge, without a fake status-bar row or cover layer.
   Only controls reserve the safe inset reported for the physical cutout. */
:root {
  --service-safe-top: env(safe-area-inset-top, 0px);
  --service-safe-right: env(safe-area-inset-right, 0px);
  --service-safe-bottom: env(safe-area-inset-bottom, 0px);
  --service-safe-left: env(safe-area-inset-left, 0px);
  --service-content-top: var(--ribbon-height);
  --service-header-inset: max(0px, calc(var(--service-safe-top) - var(--ribbon-height)));
}
.app-shell {
  min-height: 100vh; min-height: 100dvh;
  grid-template-rows: var(--service-content-top) 1fr;
  padding-inline: var(--service-safe-left) var(--service-safe-right);
  padding-bottom: var(--service-safe-bottom);
}
.app-shell.catalog-shell { grid-template-rows: var(--service-content-top) minmax(0, 1fr); }
.app-shell > .bewiki-ribbon { top: 0; }
.app-shell > .main-panel > .topbar {
  top: var(--service-content-top);
  padding-top: max(var(--service-topbar-padding, 7px), var(--service-header-inset));
}
.app-shell > .main-panel > .topbar.is-condensed { --service-topbar-padding: 5px; }
.app-shell > .main-panel:has(> .chat-topbar) {
  height: calc(100dvh - var(--service-content-top) - var(--service-safe-bottom));
}
.login-page > .lg-wrap {
  min-height: 100vh; min-height: 100dvh;
  padding: 0 var(--service-safe-right) var(--service-safe-bottom) var(--service-safe-left);
}
.login-page .lg-left { padding-top: max(64px, var(--service-header-inset)); }
.login-page .lg-right { padding-top: max(48px, var(--service-header-inset)); }
.password-change-page {
  padding: max(40px, var(--service-safe-top)) max(20px, var(--service-safe-right))
    max(40px, var(--service-safe-bottom)) max(20px, var(--service-safe-left));
}
.password-change-page > .bewiki-ribbon { top: 0; }
@media (min-width: 981px) {
  .app-shell > .sidebar {
    top: var(--service-content-top);
    height: calc(100vh - var(--service-content-top) - var(--service-safe-bottom));
    height: calc(100dvh - var(--service-content-top) - var(--service-safe-bottom));
    padding-top: max(14px, var(--service-header-inset));
  }
  .app-shell > .main-panel > .topbar { --service-topbar-padding: 5px; }
  .app-shell > .main-panel > .topbar.is-condensed { --service-topbar-padding: 3px; }
  .app-shell > .main-panel:has(.projects-page-board) {
    height: calc(100dvh - var(--service-content-top) - var(--service-safe-bottom));
  }
  .app-shell.catalog-shell > .sidebar {
    height: calc(var(--catalog-viewport-height, 100vh) - var(--service-content-top) - var(--service-safe-bottom));
    height: calc(var(--catalog-viewport-height, 100dvh) - var(--service-content-top) - var(--service-safe-bottom));
  }
}
@media (max-width: 900px) {
  .login-page .lg-left { padding-top: max(48px, var(--service-header-inset)); }
  .login-page .lg-right { padding-top: max(28px, var(--service-header-inset)); }
}
@media (max-width: 980px) {
  /* This drawer is fixed to the viewport, not inside the shell's safe row. */
  .app-shell > .sidebar { padding-inline: max(10px, var(--service-safe-left)) max(10px, var(--service-safe-right)); }
}
@media (max-width: 600px) {
  .password-change-page {
    padding: max(24px, var(--service-safe-top)) max(16px, var(--service-safe-right))
      max(24px, var(--service-safe-bottom)) max(16px, var(--service-safe-left));
  }
  .login-page .lg-left { padding-top: max(36px, var(--service-header-inset)); }
  .login-page .lg-right { padding-top: max(24px, var(--service-header-inset)); }
}
@media (max-width: 767px), (max-width: 959px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .app-shell.catalog-shell .catalog-page-content { padding-block-end: 8px; }
  .app-shell > .main-panel > .topbar.catalog-topbar { --service-topbar-padding: 5px; }
}
@media (max-width: 760px) {
  .app-shell > .main-panel > .topbar:is(.tickets-topbar, .ticket-detail-topbar),
  .app-shell > .catalog-main-panel > .topbar.has-inline-context-tools { --service-topbar-padding: 6px; }
  .app-shell > .main-panel > .topbar:is(.tickets-topbar, .ticket-detail-topbar).is-condensed,
  .app-shell > .catalog-main-panel > .topbar.has-inline-context-tools.is-condensed { --service-topbar-padding: 4px; }
}
.app-shell > .main-panel > .topbar.is-condensed:has(.analytics-topbar-tools) { --service-topbar-padding: 4px; }
@media (max-width: 720px) {
  /* The shell already reserves this inset outside the chat workspace. */
  .app-shell .chat-composer { padding-bottom: 7px; }
}