/* Emergency SOS (A5): the red SOS button, the SOS panel (reuses .sheet from friends.css) and press-and-hold buttons.
   --sos and --sos-dark are in design/tokens.css */
.sos-button {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px solid #fff; border-radius: var(--radius);
  background: var(--sos); color: #fff;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background .2s var(--ease), transform .1s var(--ease);
}
.sos-button:hover { background: var(--sos-dark); }
.sos-button:active { transform: scale(.96); }
.sos-button:focus-visible { outline: 3px solid rgb(var(--sos-rgb) / .45); outline-offset: 2px; }
.sos-button[aria-expanded="true"] { background: var(--sos-dark); box-shadow: var(--shadow), 0 0 0 3px rgb(var(--sos-rgb) / .3); }

/* Above the friends panel and the info card */
.sos-sheet { z-index: 6; }
.toast { z-index: 7; }   /* messages like "Calling 112…" must show over the panel */
.sos-sheet .sheet-header h2 { color: var(--sos-dark); outline: none; }
.sos-sheet .sheet-body { padding-top: 16px; }
.sos-sheet .group:first-of-type { margin-top: 4px; }
/* The card and legends would sit under the panel on phones */
@media (max-width: 699px) {
  body.sos-open .legends { opacity: 0; visibility: hidden; }
}

/* Press-and-hold: a fill sweeps across while held; letting go early resets it */
.hold {
  position: relative; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hold::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, .28);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
.hold.holding::after { transform: scaleX(1); transition: transform var(--hold, 1.5s) linear; }
.hold.held { animation: held .5s var(--ease); }
.hold.nudge { animation: nudge .35s var(--ease); }
@keyframes held { 40% { transform: scale(1.03); } }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* Holding is the point here, so keep the fill even when reduced motion is on (it's slow and linear, not decorative) */
@media (prefers-reduced-motion: reduce) {
  .hold.holding::after { transition: transform var(--hold, 1.5s) linear !important; }
}

/* The big 112 button */
.sos-call {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 64px; padding: 10px 16px;
  border: 0; border-radius: 16px;
  background: var(--sos); color: #fff;
  font: inherit; text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(var(--sos-rgb) / .3);
}
.sos-call:hover { background: var(--sos-dark); }
.sos-call:focus-visible { outline: 3px solid rgb(var(--sos-rgb) / .45); outline-offset: 2px; }
.sos-call strong { display: block; font-size: 20px; font-weight: 800; }
.sos-call small { display: block; font-size: 13px; opacity: .85; }
.sos-ring {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .5);
  background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.2l1.6 4.2-2.2 1.5a11.5 11.5 0 0 0 7.2 7.2l1.5-2.2 4.2 1.6V19a1.5 1.5 0 0 1-1.6 1.5A16.5 16.5 0 0 1 3.5 5.1 1.5 1.5 0 0 1 5 3.5z'/%3E%3C/svg%3E");
}
.sos-112-note { margin: 8px 2px 4px; }
.sos-hold-hint { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: rgb(var(--sos-rgb) / .1); color: var(--sos-dark); font-size: 13px; font-weight: 600; }

/* Location */
.sos-status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sos-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(var(--accent-rgb) / .25); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.sos-coords { margin: 0 0 4px !important; }
.sos-decimal { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; user-select: all; -webkit-user-select: all; }
.sos-dms { display: block; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sos-meta { font-size: 13px; color: var(--muted); margin: 0 0 8px !important; }
.sos-meta.poor { color: var(--caution-strong); font-weight: 600; }
.sos-near { margin: 0 0 10px !important; }
.sos-sheet .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Numbers */
.sos-number { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.sos-number + .sos-number { border-top: 1px solid var(--separator-soft); }
.sos-number .grow strong { font-size: 14px; white-space: normal; }
.sos-number .grow span { white-space: normal; }
.sos-digits { color: inherit !important; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }
.sos-number .btn.hold { background: var(--sos); color: #fff; }
.sos-number .btn.hold:hover { background: var(--sos-dark); }
#sos-numbers .btn.block { margin-top: 10px; }

/* Friends */
.sos-friend-list { margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.sos-friend-list .check { align-items: center; }
.sos-friend-list .avatar { width: 28px; height: 28px; font-size: 11px; }
.sos-alert { background: var(--sos); color: #fff; height: 46px; }
.sos-alert:hover { background: var(--sos-dark); }
#sos-friends .hint { margin-top: 8px; }

/* About */
.sos-about summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.sos-about ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }

.sos-confirm-ok { background: var(--sos); color: #fff; }
.sos-confirm-ok:hover { background: var(--sos-dark); }

/* SOS messages in a friend's chat (friends.js marks them) */
.bubble.sos.theirs { background: #fde7e5; color: #7a1a12; }
.bubble.sos.mine { background: var(--sos); }

/* Preview mode (SOS_ACTIVE = false in sos.js): actions are disabled */
.sos-preview { margin: 0 0 12px !important; padding: 10px 12px; border-radius: 12px; background: rgba(240, 138, 28, .14); color: #7a4300; font-size: 13px; }
.sos-call:disabled, .sos-sheet .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.sos-call:disabled:hover { background: var(--sos); }