/* App shell status bar (TASK-95 NET-01 + SHELL-01). Theme tokens only.
   Small, bottom-anchored, non-blocking: the bar does not capture clicks
   except on its Reload button. Works at 390 px wide. */
.app-shell-status {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  width: max-content;
  padding: 8px 12px;
  border: 1px solid var(--border, #242c38);
  border-radius: 10px;
  background: var(--surface-raised, #151b24);
  color: var(--text, #dce1e8);
  font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  pointer-events: none;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.25);
}

.app-shell-status[hidden] {
  display: none;
}

.app-shell-status-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Error state: coloured fill, so the ink is white in every state. */
.app-shell-status.is-error {
  background: var(--danger, #b42318);
  border-color: transparent;
  color: #ffffff;
}

.app-shell-status-reload {
  pointer-events: auto;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid #ffffff;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.app-shell-status-reload:hover,
.app-shell-status-reload:focus-visible {
  background: rgb(255 255 255 / 0.16);
}

.app-shell-status-reload:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .app-shell-status {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}

/* Dismiss: same white-ink treatment as Reload, on the error fill. */
.app-shell-status-dismiss {
  pointer-events: auto;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.app-shell-status-dismiss:hover,
.app-shell-status-dismiss:focus-visible {
  background: rgb(255 255 255 / 0.16);
}