/* =====================================================
   KLG – Theme-aware chip (compatible with old classes)
   Works for: .klg-copyright, .copyright-footer, .home-copyright
   ===================================================== */

/* ---- Light defaults ---- */
:root {
  --klg-surface: #ffffff;
  --klg-surface-2: rgba(255, 255, 255, 0.9);
  --klg-text: #1f2937;
  --klg-muted: #6b7280;
  --klg-border: rgba(0, 0, 0, 0.12);
  --klg-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --klg-accent: #1976d2;
  --klg-accent-2: #1565c0;
  --klg-glass: rgba(255, 255, 255, 0.7);
}

/* ---- Dark theme tokens ---- */
.dark, [data-theme="dark"], html[theme="dark"] {
  --klg-surface: #0b0f17;
  --klg-surface-2: rgba(17, 24, 39, 0.92);
  --klg-text: #e5e7eb;
  --klg-muted: #9ca3af;
  --klg-border: rgba(255, 255, 255, 0.12);
  --klg-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --klg-accent: #64b5f6;
  --klg-accent-2: #42a5f5;
  --klg-glass: rgba(17, 24, 39, 0.7);
}

/* ---- Fallback to system preference if app doesn't set a class ---- */
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) {
    --klg-surface: #0b0f17;
    --klg-surface-2: rgba(17, 24, 39, 0.92);
    --klg-text: #e5e7eb;
    --klg-muted: #9ca3af;
    --klg-border: rgba(255, 255, 255, 0.12);
    --klg-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --klg-accent: #64b5f6;
    --klg-accent-2: #42a5f5;
    --klg-glass: rgba(17, 24, 39, 0.7);
  }
}

/* ---- Core chip styles (apply to old and new classes) ---- */
.klg-copyright,
.copyright-footer,
.home-copyright {
  position: fixed !important;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--klg-surface-2);
  color: var(--klg-text) !important;
  text-align: center;
  padding: 10px 14px;
  font-size: 12px;
  z-index: 2147483000;
  backdrop-filter: saturate(120%) blur(8px);
  border: 1px solid var(--klg-border);
  border-radius: 16px;
  box-shadow: var(--klg-shadow);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  line-height: 1.25;
  max-width: calc(100vw - 24px);
}

/* Links inside chip */
.klg-copyright a,
.copyright-footer a,
.home-copyright a { color: var(--klg-accent) !important; text-decoration: none; }
.klg-copyright a:hover,
.copyright-footer a:hover,
.home-copyright a:hover { color: var(--klg-accent-2) !important; text-decoration: underline; }

/* Bottom mode (mobile keyboard open) */
.klg-at-bottom { top: auto !important; bottom: 12px !important; }

/* Animation */
@keyframes klg-fade-slide { from { transform: translateX(-50%) translateY(-8px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.klg-copyright, .copyright-footer, .home-copyright { animation: klg-fade-slide 320ms ease-out; }

/* Optional themed header if needed later */
.klg-header {
  background: linear-gradient(135deg, var(--klg-accent), var(--klg-accent-2));
  color: white;
  padding: 22px 18px;
  text-align: center;
  margin: 0 0 16px 0;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.klg-header h1 { margin: 0 0 6px 0; font-size: 24px; font-weight: 600; }
.klg-header p { margin: 0; font-size: 14px; opacity: .95; }

/* Responsive */
@media (max-width: 768px) {
  .klg-copyright, .copyright-footer, .home-copyright { font-size: 11px; padding: 8px 12px; top: 12px; }
  .klg-header { padding: 18px 14px; border-radius: 14px; }
}