/* Chat lock screen */
.lockscreen {
  position: fixed; left: 0; right: 0;
  top: var(--app-top, 0px); height: var(--app-h, 100%);
  z-index: 120; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg, #0f1020) 92%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 12px; overflow-y: auto; animation: fadeIn .2s ease;
}
.lockscreen.hidden { display: none; }
.lock-card { width: min(340px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lock-card h3 { margin: 4px 0 0; font-size: 20px; }
.lock-card p { margin: 0; font-size: 13px; min-height: 18px; }
.lock-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--primary, #6c5ce7); color: #fff; }
.pin-dots { display: flex; gap: 12px; justify-content: center; min-height: 16px; margin: 10px 0 2px; }
.pin-dots i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--primary, #6c5ce7); transition: background .12s, transform .12s; }
.pin-dots i.on { background: var(--primary, #6c5ce7); transform: scale(1.1); }
.lock-msg { min-height: 18px; font-size: 13px; color: #ef4444; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 280px; }
.keypad button {
  height: 56px; border-radius: 16px; border: 1px solid var(--border, rgba(127,127,127,.25));
  background: var(--surface, rgba(127,127,127,.1)); color: inherit; font: inherit; font-size: 22px; font-weight: 600;
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.keypad button:active { transform: scale(.95); background: var(--primary, #6c5ce7); color: #fff; }
.keypad.disabled { opacity: .45; pointer-events: none; }
.keypad .key-bio.off { visibility: hidden; }
.lock-actions { display: flex; gap: 10px; width: 100%; max-width: 280px; margin-top: 6px; }
.lock-actions .btn { flex: 1; }
.lock-actions .hidden { display: none; }
.lock-forgot { font-size: 13px; color: var(--primary, #6c5ce7); margin-top: 6px; }
.lock-shake { animation: lockShake .35s; }
@keyframes lockShake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
.select { background: var(--surface, rgba(127,127,127,.1)); color: inherit; border: 1px solid var(--border, rgba(127,127,127,.25)); border-radius: 10px; padding: 8px 10px; font: inherit; }
#lock-options { display: grid; gap: 4px; }
#lock-options .hidden { display: none; }