[data-tm-pwa-root] {
  --tm-pwa-edge: 24px;
  --tm-pwa-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  --tm-pwa-top: 96px;
  position: fixed;
  z-index: var(--tm-pwa-z-index, 70);
  inset-inline-end: max(var(--tm-pwa-edge), env(safe-area-inset-right, 0px));
  bottom: var(--tm-pwa-bottom);
  display: grid;
  gap: 12px;
  width: min(380px, calc(100% - var(--tm-pwa-edge) * 2));
  max-width: 380px;
  min-width: 0;
  max-height: calc(100vh - var(--tm-pwa-bottom) - var(--tm-pwa-top));
  max-height: calc(100dvh - var(--tm-pwa-bottom) - var(--tm-pwa-top));
  margin: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-radius: var(--radius, 24px);
  color: var(--text, #171717);
  font: inherit;
  pointer-events: none;
}

[data-tm-pwa-root][data-pwa-surface="ask"] {
  --tm-pwa-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  --tm-pwa-top: 96px;
}

[data-tm-pwa-root] > * {
  pointer-events: auto;
}

[data-tm-pwa-root][hidden],
[data-tm-pwa-root] [hidden] {
  display: none !important;
}

.tm-pwa-card,
.tm-pwa-update {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius, 24px);
  background: var(--bg, #fff);
  box-shadow: var(--shadow-float, var(--shadow-card, none));
  animation: tm-pwa-enter 240ms cubic-bezier(.2, .7, .2, 1) both;
}

.tm-pwa-body { min-width: 0; }
.tm-pwa-card > .tm-pwa-body { padding-inline-end: 28px; }

.tm-pwa-title {
  margin: 0;
  color: var(--text, #171717);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: balance;
}

.tm-pwa-description,
.tm-pwa-note,
.tm-pwa-status {
  margin: 5px 0 0;
  color: var(--text-2, #616161);
  font-size: 13px;
  line-height: 1.65;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.tm-pwa-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
  align-items: center;
}
.tm-pwa-actions .tm-pwa-primary { flex: 1; }

.tm-pwa-button,
.tm-pwa-guide > summary,
.tm-pwa-close {
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border, #ddd);
  border-radius: 999px;
  background: transparent;
  color: var(--text, #171717);
  font: 600 13px/1.6 var(--font-sans, system-ui, sans-serif);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tm-pwa-primary {
  border-color: var(--accent, #047857);
  background: var(--accent, #047857);
  color: var(--accent-ink, var(--bg, #fff));
}

.tm-pwa-subtle {
  border-color: transparent;
  color: var(--text-2, #616161);
}

.tm-pwa-button:focus-visible,
.tm-pwa-guide > summary:focus-visible,
.tm-pwa-close:focus-visible,
.tm-pwa-card:focus-visible {
  outline: 2px solid var(--accent, #047857);
  outline-offset: 3px;
}

.tm-pwa-button:disabled { cursor: progress; opacity: .65; }
.tm-pwa-button:active:not(:disabled),
.tm-pwa-guide > summary:active,
.tm-pwa-close:active { opacity: .75; }

.tm-pwa-close {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 10px;
  border-color: transparent;
  color: var(--text-2, #616161);
  font-size: 22px;
  line-height: 1;
}
.tm-pwa-close svg { display: block; width: 20px; height: 20px; }

/* The host menu owns the button's dimensions, spacing and active treatment. */
.tm-pwa-menu-item { color: inherit; font: inherit; text-decoration: none; }
.tm-pwa-menu-icon { display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; color: currentColor; }
.tm-pwa-menu-icon svg { display: block; width: 100%; height: 100%; }
.tm-pwa-menu-label { min-width: 0; overflow-wrap: anywhere; }
/* Use the homepage's always-visible controls, outside its folding section menu. */
.topbar .controls .tm-pwa-home-entry { gap: 8px; white-space: nowrap; }
.tm-pwa-home-entry:focus-visible { outline: 2px solid var(--accent, #047857); outline-offset: 3px; }
.tm-pwa-home-entry:disabled { cursor: progress; opacity: .65; }
.tm-pwa-ignore { align-self: flex-start; text-align: start; }
/* Keep the new last menu entry reachable on short landscape screens. */
#ask-more-menu { max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); overflow-y: auto; }

.tm-pwa-guide { margin-top: 10px; }
.tm-pwa-guide > summary { width: fit-content; list-style: revert; text-align: start; }
.tm-pwa-steps { margin: 14px 0 0; padding-inline-start: 22px; color: var(--text-2, #616161); font-size: 13px; line-height: 1.8; }
.tm-pwa-steps li + li { margin-top: 5px; }
.tm-pwa-note { max-width: 52ch; margin-block: 10px; }
.tm-pwa-status {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius, 24px);
  background: var(--bg, #fff);
  box-shadow: var(--shadow-float, var(--shadow-card, none));
}
.tm-pwa-status[data-offline="true"] { color: var(--text, #171717); }
.tm-pwa-update { margin: 0; }

@keyframes tm-pwa-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) {
  .tm-pwa-button:not(:disabled):hover,
  .tm-pwa-guide > summary:hover { border-color: var(--accent, #047857); }
  .tm-pwa-close:hover { color: var(--text, #171717); background: var(--accent-soft, transparent); }
  .tm-pwa-subtle:hover { color: var(--text, #171717); }
}

@media (max-width: 680px) {
  [data-tm-pwa-root] {
    --tm-pwa-edge: 16px;
    --tm-pwa-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    --tm-pwa-top: 174px;
  }
  .tm-pwa-card,
  .tm-pwa-update { flex-direction: column; gap: 12px; padding: 16px; }
  [data-tm-pwa-root][data-pwa-surface="home"] {
    --tm-pwa-top: 160px;
    --tm-pwa-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 1199px) {
  .topbar .controls .tm-pwa-home-entry { width: 44px; padding: 0; }
  .tm-pwa-home-entry .tm-pwa-menu-label { display: none; }
}

@media (max-width: 480px) {
  /* The English wordmark can wrap while all three 44px controls stay reachable. */
  .topbar[data-tm-pwa-home] .brand { flex: 1 1 0; min-width: 0; }
  .topbar[data-tm-pwa-home] .brand orb-logo,
  .topbar[data-tm-pwa-home] .brand orb-logo > span { min-width: 0; }
  .topbar[data-tm-pwa-home] .brand .ol-primary { white-space: normal; }
}

@media (max-height: 480px) {
  [data-tm-pwa-root] {
    --tm-pwa-edge: 12px;
    max-height: calc(100vh - var(--tm-pwa-bottom) - var(--tm-pwa-top));
    max-height: calc(100dvh - var(--tm-pwa-bottom) - var(--tm-pwa-top));
  }
  .tm-pwa-card,
  .tm-pwa-update { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-tm-pwa-root],
  [data-tm-pwa-root] *,
  [data-tm-pwa-root] *::before,
  [data-tm-pwa-root] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}