/* 12-chrome.css — Confirm dialog (.mkd-*), toast (.mkt-*), footer nav, logout, loading overlay,
   guest nudge, animations.
   Part of the old css/styles.css (lines 2438–2626); unused rules since removed.
   The number is the load order: later files override earlier ones, exactly
   as later lines in the single file used to. Keep them linked in order. */

/* ══════════════════════════════════════════════
   MAKAY CONFIRM DIALOG  (replaces browser confirm)
══════════════════════════════════════════════ */
.mkd-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  transition: background 0.25s;
}
.mkd-overlay.mkd-visible { background: rgba(0,0,0,0.45); }

.mkd-box {
  background: #fff; border-radius: 20px;
  padding: 1.8rem 1.5rem 1.4rem;
  width: 100%; max-width: 340px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  transform: scale(0.88) translateY(16px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}
.mkd-overlay.mkd-visible .mkd-box { transform: scale(1) translateY(0); opacity: 1; }

.mkd-icon-wrap { margin-bottom: 0.8rem; }
.mkd-icon { font-size: 42px; color: #e74c3c; }

.mkd-title {
  font-size: 1.05rem; font-weight: 700;
  color: #1a1a1a; margin-bottom: 0.5rem;
}
.mkd-msg {
  font-size: 0.85rem; color: #666;
  line-height: 1.5; margin-bottom: 0;
}
.mkd-actions {
  display: flex; gap: 10px; margin-top: 1.4rem;
}
.mkd-btn {
  flex: 1; padding: 0.8rem;
  border: none; border-radius: 12px;
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.mkd-btn:active { transform: scale(0.97); }
.mkd-btn-cancel {
  background: #f0f0f0; color: #444;
}
.mkd-btn-cancel:hover { background: #e0e0e0; }
.mkd-btn-danger {
  background: #e74c3c; color: #fff;
}
.mkd-btn-danger:hover { background: #c0392b; }
.mkd-btn-warn {
  background: #f39c12; color: #fff;
}
.mkd-btn-warn:hover { background: #d68910; }

/* ══════════════════════════════════════════════
   MAKAY TOAST  (replaces browser alert)
══════════════════════════════════════════════ */
.mkt-error   { background: #c0392b; color: #fff; }

/* ── Messages & Chat ── */
/* #messages layout is fully defined in css/messages.css.
   Only override padding/overflow here — do NOT set height or top
   as those are handled by the canonical block. */
#messages { padding: 0 !important; overflow: hidden !important; }
/* chat-input-area defined in css/messages.css */
/* ── Footer ── */
.footer {
  background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
  display: flex; justify-content: space-around; align-items: flex-start;
  padding-top: 0.3rem;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  /* Safe-area for notched devices; 0 on flat-bottom devices — no extra gap */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid rgba(224,224,224,0.5);
  position: fixed; bottom: 0; left: 0; right: 0;
  font-size: 0.85rem; z-index: 1001;
  /* Nav must never look/feel broken while content is loading — no loading
     overlay, skeleton, or retry strip should ever be able to intercept
     taps here or sit above it. Explicit so this can't silently regress as
     more loading states get added (retry strips, skeletons, etc. all sit
     well under z-index 1001, but pointer-events is the actual guarantee). */
  pointer-events: auto;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  /* GPU composite — eliminates subpixel gap on iOS */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Extend background below bottom edge to kill any browser-rendered gap */
  margin-bottom: -1px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1px);
}
/* Bleed the footer background past the bottom of the viewport on all devices */
.footer::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 0; right: 0;
  height: 40px;
  background: inherit;
  pointer-events: none;
}
.footer.hidden-nav {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.footer a {
  text-decoration: none; color: #666; flex: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: all 0.2s ease;
  padding: 0.4rem 0.2rem; border-radius: 8px; margin: 0 0.2rem;
}
.footer a:hover, .footer a.active { color: #19378C; background: rgba(25,55,140,0.1); transform: translateY(-1px); }
.footer span.label { font-size: 0.65rem; margin-top: 0.2rem; font-weight: 500; }

/* ── Logout ── */
.logout-btn {
  background: #dc3545; color: #fff; border: none;
  padding: 0.8rem 2rem; border-radius: 8px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; font-size: 0.9rem; transition: background 0.2s ease;
  box-shadow: 0 2px 8px rgba(220,53,69,0.2);
}
.logout-btn:hover { background: #c82333; box-shadow: 0 4px 12px rgba(220,53,69,0.3); }

/* ── Loading Overlay ── */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 3000;
}

/* ── Guest nudge ── */
#guestUpgradeNudge { bottom: 64px !important; }

/* ── Animations ── */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp  { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }