/* ============================================================
   کارت هشدار پایان نشست + پیام «خروج به دلیل بی‌فعالیتی» در صفحهٔ ورود
   (بعد از style.css لود می‌شود)
   ============================================================ */

.idle-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
  font-family: var(--font-body);
}
.idle-backdrop.is-on { display: flex; animation: idleFade .18s ease-out; }

@keyframes idleFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes idleRise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.idle-card {
  width: 100%;
  max-width: 380px;
  padding: 26px 24px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(20, 33, 58, .08);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .45);
  text-align: center;
  animation: idleRise .22s cubic-bezier(.22, 1, .36, 1);
}

.idle-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--danger, #b3372a);
  background: var(--danger-bg, #f6e2de);
}

.idle-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-text, #1e293b);
}

.idle-text {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted, #64748b);
  text-wrap: pretty;
}

.idle-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.idle-num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--danger, #b3372a);
}
.idle-unit { font-size: 12px; color: var(--muted, #64748b); }

.idle-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(20, 33, 58, .09);
  overflow: hidden;
  margin-bottom: 18px;
}
.idle-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f04438, #d92d20);
  transition: width 1s linear;
}

.idle-actions { display: flex; flex-direction: column; gap: 8px; }

.idle-btn {
  display: block;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: .15s ease;
}
.idle-btn-primary { background: var(--brand, #2563eb); color: #fff; }
.idle-btn-primary:hover { background: var(--brand-dark, #1d4ed8); }
.idle-btn-primary:active { transform: translateY(1px); }
.idle-btn-ghost { background: transparent; color: var(--muted, #64748b); }
.idle-btn-ghost:hover { background: #f1f5f9; color: var(--ink-text, #1e293b); }
.idle-btn:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .idle-backdrop.is-on, .idle-card { animation: none; }
  .idle-bar i { transition: none; }
}

/* ---------- پیام دلیل خروج در صفحهٔ ورود ---------- */
.auth-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 13px;
  border-radius: 10px;
  background: var(--warning-bg, #f7ecd3);
  border: 1px solid rgba(184, 144, 46, .28);
  color: #6b5312;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: start;
}
.auth-notice svg { flex: 0 0 auto; margin-top: 2px; color: var(--brass, #b8902e); }
.auth-notice b { color: #4a3a0c; font-weight: 700; }