/* ═══════════════════════════════════════════════════════════════════
   "Reconnecting…" chip — js/session-fresh.js

   Shown only while a failed profile load is being retried, in place of
   the alarming "running read-only" toast. Deliberately quiet: this is
   a status, not a failure, and most of the time it resolves in a
   second or two.

   Tokens only, from the --bg/--surface/--border/--muted/--text family
   that body.dark-mode flips (NOT the Clinical Clarity --color-*
   palette, which is not flipped — same rule as css/skeletons.css).
   ═══════════════════════════════════════════════════════════════════ */

.sf-reconnecting {
  position: fixed;
  /* Bottom-centre: the toast host owns the bottom-right, and the top
     is the iPhone notch. Safe-area aware for a standalone PWA. */
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 11500;                 /* above modals (9999) and the file
                                     viewer (11000), below the terms
                                     gate (12000) */
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 8px 14px;
  border: 1px solid var(--border, #E3E0DB);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--muted, #7D766F);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 16px -4px rgba(45, 41, 38, .18);
  pointer-events: none;           /* never in the way of a tap */
}

.sf-reconnecting .sf-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--color-tertiary, #407496);
  animation: sf-pulse 1.1s ease-in-out infinite;
}

@keyframes sf-pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* Honour the system setting — the chip still appears, it just holds
   still (same rule as the skeleton shimmer). */
@media (prefers-reduced-motion: reduce) {
  .sf-reconnecting .sf-dot { animation: none; opacity: .9; }
}

/* A transient connectivity status is never part of a printed record. */
@media print {
  .sf-reconnecting { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   sf-panel — the persistent profile-load notice
   (js/session-fresh.js: sfShowNoOrgNotice / sfShowDiagnostic)

   Persistent and dismissible, NOT a toast. An 8-second toast on a
   phone is why the "no organization" cause went undiagnosed for so
   long: there was no way to read it, let alone screenshot it.
   ═══════════════════════════════════════════════════════════════════ */

.sf-panel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 11600;                 /* above the Reconnecting chip */
  width: calc(100vw - 28px);
  max-width: 460px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--border, #E3E0DB);
  border-left: 4px solid var(--color-tertiary, #407496);
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--text, #2B2926);
  box-shadow: 0 10px 40px -6px rgba(45, 41, 38, .3);
  -webkit-overflow-scrolling: touch;
}

.sf-panel-warn { border-left-color: var(--amber, #b45309); }

.sf-panel-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 7px;
}

.sf-panel-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #7D766F);
}

/* Selectable so the cause can be read off, or copied, from a phone. */
.sf-panel-detail {
  margin-top: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--bg, #FAF9F7);
  border: 1px solid var(--border, #E3E0DB);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text, #2B2926);
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}

.sf-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.sf-panel-btn {
  -webkit-appearance: none;
  appearance: none;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid var(--border, #E3E0DB);
  border-radius: 9px;
  background: var(--bg, #FAF9F7);
  color: var(--text, #2B2926);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.sf-panel-close { margin-left: auto; }

@media print {
  .sf-panel { display: none !important; }
}