/* Tzana PWA chrome — matches the new design system.
   Used by pwa-enhancements.js + pwa-install-prompt.js injected elements. */

/* Offline indicator */
.offline-indicator {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--danger); color: #fff;
  text-align: center; padding: 8px 16px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  z-index: 1001; transform: translateY(-100%);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1);
}
.offline-indicator.show { transform: translateY(0); }
.offline-indicator i, .offline-indicator svg { margin-right: 8px; vertical-align: middle; }

/* Cache status */
.cache-status {
  position: fixed; bottom: calc(64px + 16px); left: 16px;
  background: var(--text); color: var(--bg);
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  z-index: 999; opacity: 0;
  transition: opacity 220ms;
  box-shadow: var(--shadow-md);
}
.cache-status.show { opacity: 1; }
.cache-status i, .cache-status svg { margin-right: 4px; }
@media (min-width: 1025px) { .cache-status { bottom: 24px; } }

/* Update notification */
.update-notification {
  position: fixed; bottom: calc(64px + 20px); right: 20px;
  background: var(--surface); padding: 16px;
  border-radius: 14px; box-shadow: var(--shadow-lg);
  z-index: 1000; border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  max-width: 320px;
  animation: slideInUp 280ms cubic-bezier(0.16,1,0.3,1);
}
.update-content { display: flex; align-items: center; gap: 12px; }
.update-content p { margin: 0; color: var(--text); font-weight: 500; font-size: 14px; }
.update-content button {
  padding: 8px 16px; background: var(--primary); color: #fff;
  border: 0; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  transition: background 140ms;
}
.update-content button:hover { background: var(--primary-ink); }
@media (max-width: 768px) {
  .update-notification { bottom: calc(64px + 12px); right: 12px; left: 12px; max-width: none; }
}
@media (min-width: 1025px) { .update-notification { bottom: 24px; } }

/* PWA install button (floating) */
.pwa-button {
  background: var(--primary); color: #fff; border: 0;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; box-shadow: var(--shadow-md);
  transition: transform 140ms, background 140ms;
  display: inline-flex; align-items: center; gap: 8px;
}
.pwa-button:hover { background: var(--primary-ink); transform: translateY(-1px); }
.pwa-button:active { transform: translateY(0); }

/* PWA install banner */
.pwa-install-banner {
  position: fixed; bottom: calc(64px + 20px); left: 20px; right: 20px;
  background: var(--surface); color: var(--text);
  border-radius: 14px; border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  z-index: 1001; max-width: 540px; margin: 0 auto;
  animation: slideInUp 280ms cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}
.install-banner-content {
  display: flex; align-items: center; padding: 16px 20px; gap: 14px;
}
.install-banner-icon { font-size: 28px; color: var(--primary); flex-shrink: 0; }
.install-banner-text h4 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--text); }
.install-banner-text p { margin: 0; font-size: 13px; color: var(--text-muted); }
.install-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.install-banner-actions .btn { border-radius: 8px; font-weight: 600; font-size: 13px; padding: 8px 14px; }
.install-banner-actions .btn-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.install-banner-actions .btn-primary:hover { background: var(--primary-ink); }
.install-banner-actions .btn-link { background: transparent; color: var(--text-muted); border: 0; padding: 8px; font-size: 18px; }
.install-banner-actions .btn-link:hover { color: var(--text); }
@media (max-width: 768px) {
  .pwa-install-banner { bottom: calc(64px + 12px); left: 12px; right: 12px; }
  .install-banner-content { padding: 12px 16px; gap: 12px; }
  .install-banner-actions { flex-direction: column; }
}
@media (min-width: 1025px) { .pwa-install-banner { bottom: 24px; } }

/* PWA install success */
.pwa-install-success {
  position: fixed; top: 20px; right: 20px;
  background: var(--success); color: #fff;
  padding: 12px 20px; border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 1001; font-weight: 600; font-size: 14px;
  animation: slideInRight 280ms cubic-bezier(0.16,1,0.3,1);
}
.install-success-content { display: flex; align-items: center; gap: 10px; }

/* PWA install instructions modal */
.pwa-install-instructions {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border-radius: 20px;
  box-shadow: var(--shadow-xl); border: 1px solid var(--border);
  z-index: 1002; max-width: 420px; width: calc(100vw - 32px);
  animation: scaleIn 220ms cubic-bezier(0.16,1,0.3,1);
}
.install-instructions-content { padding: 28px; }
.install-instructions-content h4 {
  color: var(--text); margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 500;
}
.install-steps { margin-bottom: 20px; }
.install-step {
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text-2);
}
.install-step:last-child { border-bottom: 0; }
.install-step strong { color: var(--text); }

/* Animations */
@keyframes slideInUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes scaleIn { from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* Standalone mode safe-area insets */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar { padding-bottom: env(safe-area-inset-bottom); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .offline-indicator, .update-notification, .pwa-install-banner, .pwa-install-success, .pwa-install-instructions { animation: none; transition: none; }
}