/* ============================================================
   Sprint 3.E-session-recover：会话失效恢复窗
   ============================================================ */
.session-recover-overlay { position: fixed; top:0; left:0; right:0; bottom:0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.session-recover-overlay.hidden { display: none; }
.sro-mask { position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(15, 23, 42, .7); backdrop-filter: blur(6px); }
.sro-card {
  position: relative; z-index: 1;
  width: min(480px, calc(100vw - 32px));
  max-height: min(88vh, calc(100dvh - 40px));
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: sroFadeIn .2s ease-out;
}
@keyframes sroFadeIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

.sro-header {
  padding: 22px 22px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.sro-icon { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.sro-header h2 { margin: 6px 0; font-size: 20px; color: #78350f; font-weight: 800; }
.sro-sub { margin: 4px 0 0; font-size: 13px; color: #78350f; opacity: .8; line-height: 1.5; }

.sro-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sro-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #f1f5f9; border: 1px solid transparent; border-radius: 14px;
  color: #1e293b; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: all .15s ease;
  min-height: 60px;
}
.sro-btn:hover { background: #e2e8f0; border-color: #cbd5e1; }
.sro-btn:active { transform: scale(.98); }
.sro-btn-icon { font-size: 26px; flex-shrink: 0; }
.sro-btn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sro-btn-text strong { font-size: 15px; font-weight: 700; }
.sro-btn-text small { font-size: 12px; color: #64748b; margin-top: 2px; }
.sro-btn-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(234, 88, 12, .35);
}
.sro-btn-primary:hover { background: linear-gradient(135deg, #d97706 0%, #c2410c 100%); }
.sro-btn-primary .sro-btn-text small { color: rgba(255, 255, 255, .85); }

.sro-restore-form {
  padding: 16px; margin: 0 16px 16px; background: #f8fafc; border-radius: 14px;
  border: 1px solid #e2e8f0;
}
.sro-restore-form.hidden { display: none; }
.sro-restore-form label { display: block; font-size: 13px; color: #334155; margin-bottom: 6px; font-weight: 600; }
.sro-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid #e2e8f0; border-radius: 10px;
  font-size: 16px; /* 防 iOS zoom */
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  background: #fff;
}
.sro-input:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.sro-form-row { display: flex; gap: 8px; margin-top: 12px; }
.sro-btn-secondary {
  flex: 1; min-height: 44px; padding: 0 14px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  color: #64748b; font-weight: 600; font-size: 14px; cursor: pointer;
}
.sro-btn-secondary:hover { background: #f1f5f9; }
.sro-form-row .sro-btn-primary { flex: 1; min-height: 44px; padding: 0 14px; border-radius: 10px; }
.sro-error { margin: 10px 0 0; padding: 10px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #b91c1c; font-size: 13px; }
.sro-error.hidden { display: none; }

.sro-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #f8fafc; border-top: 1px solid #e2e8f0;
  text-align: center;
}
.sro-hint { color: #64748b; font-size: 12px; }
.sro-last-sid { font-family: 'SF Mono', Menlo, Consolas, monospace; background: #e2e8f0; padding: 2px 8px; border-radius: 6px; font-size: 11px; word-break: break-all; }

body.sro-open { overflow: hidden; }

/* 手机端 */
@media (max-width: 640px) {
  .session-recover-overlay { align-items: flex-end; }
  .sro-card {
    width: 100vw; max-width: 100vw;
    max-height: 90dvh;
    border-radius: 24px 24px 0 0;
    animation: sroSlideUp .22s ease-out;
  }
  @keyframes sroSlideUp { from { transform: translateY(100%); } to { transform: none; } }
  .sro-header { padding: 18px 18px 14px; padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .sro-icon { font-size: 40px; }
  .sro-header h2 { font-size: 18px; }
  .sro-body { padding: 14px; }
  .sro-btn { min-height: 56px; padding: 12px 14px; }
  .sro-btn-text strong { font-size: 14px; }
}