/* ============================================================================
   Apolaris AI — cookie consent banner (shared across every surface)
   Theme-aware via the design tokens, with hard fallbacks so it also looks right
   on pages that don't load tokens.css. Scoped under .ccx / #cookieConsent.
   ============================================================================ */
#cookieConsent[hidden] { display: none !important; }

.ccx, .ccx * { box-sizing: border-box; }

.ccx-banner {
  position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom)); z-index: 99999;
  width: auto; max-width: 1120px; margin-inline: auto;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; border-radius: 16px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 16px 22px;
  background: var(--ng-surface, #ffffff);
  color: var(--ng-text, #0f172a);
  border-top: 1px solid var(--ng-border, #e2e8f0);
  box-shadow: 0 -8px 30px -12px rgba(16, 24, 40, .25);
  font-family: var(--ng-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  line-height: 1.5;
  animation: ccx-rise .3s ease;
}
@keyframes ccx-rise { from { transform: translateY(100%); } to { transform: none; } }
.ccx-banner[hidden] { display: none !important; }

.ccx-banner__text { flex: 1 1 380px; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; color: var(--ng-text-secondary, #475569); }
.ccx-banner__text strong { display: block; color: var(--ng-text, #0f172a); font-size: 1rem; margin-bottom: 3px; font-weight: 700; }
.ccx-banner__text p { margin: 0; }
.ccx-banner__text a { color: var(--ng-brand, #4f46e5); font-weight: 600; text-decoration: underline; }

.ccx-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; }

/* Buttons — equal prominence for accept/reject (GDPR/CNIL). !important beats the
   app's global `button { background: var(--ng-brand) }` rule on every surface. */
.ccx .ccx-btn,
#cookieConsent .ccx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 10px !important; line-height: 1;
  border: 1px solid transparent !important; transition: background .15s, border-color .15s, color .15s;
  white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; min-height: 44px;
  text-align: center;
}
.ccx .ccx-btn--primary, #cookieConsent .ccx-btn--primary {
  background: var(--ng-brand, #4f46e5) !important; color: #fff !important; border-color: var(--ng-brand, #4f46e5) !important;
}
.ccx .ccx-btn--primary:hover, #cookieConsent .ccx-btn--primary:hover { background: var(--ng-brand-hover, #4338ca) !important; }
.ccx .ccx-btn--ghost, #cookieConsent .ccx-btn--ghost {
  background: var(--ng-surface, #fff) !important; color: var(--ng-text, #0f172a) !important;
  border-color: var(--ng-border-strong, #cbd5e1) !important;
}
.ccx .ccx-btn--ghost:hover, #cookieConsent .ccx-btn--ghost:hover {
  border-color: var(--ng-brand, #4f46e5) !important; color: var(--ng-brand, #4f46e5) !important;
}
.ccx .ccx-btn:focus-visible, #cookieConsent .ccx-btn:focus-visible {
  outline: 2px solid var(--ng-brand, #4f46e5) !important; outline-offset: 2px;
}

/* Preferences modal */
.ccx-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, .55);
  font-family: var(--ng-font, "Inter", sans-serif);
  animation: ccx-fade .2s ease;
}
@keyframes ccx-fade { from { opacity: 0; } to { opacity: 1; } }
.ccx-modal[hidden] { display: none !important; }
.ccx-modal__card {
  background: var(--ng-surface, #fff); color: var(--ng-text, #0f172a);
  border: 1px solid var(--ng-border, #e2e8f0); border-radius: 16px;
  max-width: 560px; width: 100%; min-width: 0; max-height: 86vh;
  max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain;
  padding: 26px 26px 22px; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .5);
}
.ccx-modal__card h2 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; color: var(--ng-text, #0f172a); }
.ccx-modal__intro { margin: 0 0 18px; font-size: .9rem; color: var(--ng-text-secondary, #475569); }

.ccx-cats { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ccx-cat { border: 1px solid var(--ng-border, #e2e8f0); border-radius: 12px; padding: 14px 16px; background: var(--ng-surface-2, #f8fafc); }
.ccx-cat__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ccx-cat__name { font-weight: 700; font-size: .95rem; color: var(--ng-text, #0f172a); flex: 1; }
.ccx-cat__on { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ng-brand, #4f46e5); background: var(--ng-brand-50, #eef2ff); border: 1px solid var(--ng-brand-100, #e0e7ff); padding: 3px 9px; border-radius: 999px; }
.ccx-cat__desc { margin: 8px 0 0; font-size: .84rem; color: var(--ng-text-secondary, #475569); }

/* Toggle switch */
.ccx-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.ccx-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ccx-slider { position: absolute; inset: 0; cursor: pointer; background: var(--ng-border-strong, #cbd5e1); border-radius: 999px; transition: background .15s; }
.ccx-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ccx-switch input:checked + .ccx-slider { background: var(--ng-brand, #4f46e5); }
.ccx-switch input:checked + .ccx-slider::before { transform: translateX(18px); }
.ccx-switch input:focus-visible + .ccx-slider { outline: 2px solid var(--ng-brand, #4f46e5); outline-offset: 2px; }

.ccx-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 640px) {
  .ccx-banner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .ccx-banner__actions { justify-content: stretch; }
  .ccx-banner__actions .ccx-btn { flex: 1 1 auto; }
  .ccx-banner__text { flex-basis: auto; }
  .ccx-modal { padding: 12px; padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
  .ccx-modal__card { padding: 18px; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .ccx-modal__actions { justify-content: stretch; }
  .ccx-modal__actions .ccx-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ccx-banner, .ccx-modal { animation: none; }
}