/* Quantum-Like Lab by Ethan Dickey. Compact recovery status in every experience. */
#session-safety {
  margin: 0 auto .55rem;
  padding: .5rem .85rem;
  max-width: 1600px;
  font-size: .8rem;
  color: var(--muted, #b8c7db);
  background: rgba(17, 26, 41, .8);
  border: 1px solid rgba(153, 183, 218, .18);
  border-radius: .65rem;
}
#session-safety .recovery-summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
#session-safety button {
  font: inherit;
  padding: .3rem .55rem;
}
#session-safety .recovery-summary button { margin-left: auto; }
#session-safety .recovery-indicator {
  width: .45rem;
  height: .45rem;
  flex: 0 0 .45rem;
  border-radius: 50%;
  background: #9cafc7;
}
#session-safety [data-recovery-state="saved"] .recovery-indicator { background: #77d2bc; }
#session-safety [data-recovery-state="unavailable"] .recovery-indicator { background: #ffd08a; }
#session-safety .recovery-details { margin-top: .3rem; }
#session-safety .recovery-details summary { cursor: pointer; width: fit-content; }
#session-safety .recovery-details p { max-width: 90ch; line-height: 1.45; }
#session-safety .recovery-offer { padding-top: .3rem; color: var(--text, #edf3fd); }
#session-safety .recovery-offer p { margin: .35rem 0; }
#session-safety .recovery-error,
#session-safety .recovery-warning { color: #ffd08a; }
#session-safety .recovery-error { margin: .4rem 0 0; }
#session-safety :focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
@media (max-width: 520px) {
  #session-safety { margin: 0 .3rem .5rem; padding: .5rem .6rem; }
  /* Saving and saved labels use one or two lines. Keep the workspace still
     when asynchronous recovery completes, including during Before previews. */
  #session-safety .recovery-summary { min-height: 2lh; }
  #session-safety .recovery-summary > span:nth-child(2) { flex: 1; }
  #session-safety .recovery-summary button { margin-left: 0; }
}