/* A quiet reading status over the chamber; it never changes the page layout. */
.reading-sync-status {
  position: fixed;
  z-index: 15;
  left: 50%;
  bottom: calc(var(--safe-bottom, 0px) + 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  padding: 8px 13px;
  border: 1px solid #b59a625c;
  border-radius: 4px;
  background: linear-gradient(135deg, #142720ed, #0a151fed);
  box-shadow: inset 0 1px 0 #d8ba7b0b, 0 4px 15px #02070c4d;
  color: #d8c9aa;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
  animation: reading-status-arrive 160ms ease-out both;
}
.reading-sync-status::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c5aa75;
  opacity: .7;
}
.reading-sync-copy {
  min-width: 0;
  max-width: 46ch;
  overflow-wrap: break-word;
}
body[data-reading-sync="loading"] .reading-sync-status::before,
body[data-reading-sync="saving"] .reading-sync-status::before {
  animation: reading-status-breathe 1.8s ease-in-out infinite;
}
body[data-reading-sync="ready"] .reading-sync-status::before { background: #a9bd9d; }
body[data-reading-sync="error"] .reading-sync-status {
  border-color: #c2a36ba3;
  color: #edd9b2;
  background: linear-gradient(135deg, #2c2b1cf5, #112124f5);
}
body[data-reading-sync="error"] .reading-sync-status::before { background: #dfbf7e; opacity: 1; }
.reading-sync-retry {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid #c6a369a3;
  border-radius: 3px;
  background: linear-gradient(115deg, #cfb98d, #ead7ae 58%, #ccb58a);
  color: #263024;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .025em;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.reading-sync-retry:focus-visible { outline: 2px solid #f0d7a7; outline-offset: 4px; }
.reading-sync-retry:disabled { cursor: progress; opacity: .75; }
body[data-reading-sync="loading"] #topics-stage .topic-grid button:disabled {
  opacity: 1;
  cursor: progress;
}
@media (hover: hover) {
  .reading-sync-retry:hover:not(:disabled) { border-color: #f0d6a3; background: linear-gradient(115deg, #dbc69e, #f1e2c2 58%, #d5bf96); }
}
@media (max-width: 650px) {
  .reading-sync-status {
    bottom: calc(var(--safe-bottom, 0px) + 7px);
    max-width: calc(100vw - 24px);
    gap: 8px;
    padding: 7px 10px;
    font-size: 11px;
    line-height: 1.45;
  }
  .reading-sync-copy { max-width: 40ch; }
  .reading-sync-retry { min-width: 82px; padding-inline: 10px; font-size: 11px; }
}
@keyframes reading-status-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes reading-status-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .reading-sync-status,
  body[data-reading-sync="loading"] .reading-sync-status::before,
  body[data-reading-sync="saving"] .reading-sync-status::before { animation: none; }
  .reading-sync-retry { transition: none; }
}