.consent {
  position: fixed;
  bottom: var(--sp-5);
  inset-inline-start: var(--sp-5);
  z-index: var(--z-consent);
  font-size: var(--fs-200);
  color: var(--c-text-1);
}

.consent[data-state="chip"] .consent__panel { display: none; }
.consent[data-state="panel"] .consent__chip { display: none; }

/* Inside /bay/<app>/ the floating chip is hidden after the user has
   made a choice. Re-entry happens via the app's Settings modal, which
   calls openConsentPanel() to flip data-state back to "panel". */
.consent[data-bay-hidden="true"] { display: none; }

/* CHIP — icon-only, round */
.consent__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--border-color-base);
  border-radius: var(--radius-pill);
  color: var(--c-text-2);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo);
}
.consent__chip:focus-visible {
  color: var(--c-text);
  background: var(--c-raise);
  border-color: var(--border-color-strong);
  outline: none;
}
@media (hover: hover) and (pointer: fine) { .consent__chip:hover {
  color: var(--c-text);
  background: var(--c-raise);
  border-color: var(--border-color-strong);
  outline: none;
} }
.consent__chip-icon { width: 18px; height: 18px; opacity: 0.85; flex-shrink: 0; }

/* PANEL */
.consent__panel {
  width: min(360px, calc(100vw - 2 * var(--sp-5)));
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--border-color-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.consent__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.consent__title {
  font-family: var(--ff-display);
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--c-text);
  margin: 0;
  line-height: var(--lh-snug);
}
.consent__fold {
  width: 24px; height: 24px;
  background: transparent;
  border: 0;
  color: var(--c-muted);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo);
}
.consent__fold:focus-visible {
  color: var(--c-text);
  outline: none;
  background: rgba(255, 255, 255, 0.06);
}
@media (hover: hover) and (pointer: fine) { .consent__fold:hover {
  color: var(--c-text);
  outline: none;
  background: rgba(255, 255, 255, 0.06);
} }

.consent__intro {
  margin: 0 0 var(--sp-4);
  color: var(--c-text-3);
  line-height: var(--lh-normal);
}
.consent__intro a { color: var(--c-accent); text-decoration: underline; }

.consent__categories {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.consent__categories li { margin: 0; }
.consent__categories label {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: var(--sp-3);
  align-items: start;
  cursor: pointer;
}
.consent__categories input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--c-mark-2);
  margin-top: 2px;
}
.consent__categories input[disabled] { opacity: 0.6; cursor: not-allowed; }
.consent__cat-label { display: block; color: var(--c-text); font-weight: 500; }
.consent__cat-label em { color: var(--c-muted); font-style: normal; font-weight: 400; }
.consent__cat-desc { display: block; color: var(--c-muted); font-size: var(--fs-100); margin-top: 2px; }

.consent__actions {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
}
.consent__btn {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-200);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--dur-fast) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo);
}
.consent__btn--ghost {
  background: transparent;
  color: var(--c-text-2);
  border: 1px solid var(--border-color-base);
}
.consent__btn--ghost:focus-visible {
  color: var(--c-text);
  border-color: var(--border-color-strong);
  outline: none;
}
@media (hover: hover) and (pointer: fine) { .consent__btn--ghost:hover {
  color: var(--c-text);
  border-color: var(--border-color-strong);
  outline: none;
} }
.consent__btn--solid {
  background: var(--c-text);
  color: var(--c-field);
  border: 1px solid var(--c-text);
}
.consent__btn--solid:focus-visible {
  background: var(--c-focus);
  border-color: var(--c-focus);
  outline: none;
}
@media (hover: hover) and (pointer: fine) { .consent__btn--solid:hover {
  background: var(--c-focus);
  border-color: var(--c-focus);
  outline: none;
} }

@media (max-width: 480px) {
  .consent {
    bottom: var(--sp-3);
    inset-inline-start: var(--sp-3);
    inset-inline-end: var(--sp-3);
  }
  .consent__panel { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .consent__chip, .consent__btn, .consent__fold { transition: none; }
}

/* Site pages, first visit (plan 31, Р5): a compact notice — the sentence and Reject / Choose / Accept, no title, the
   categories behind "Choose…" — so it never covers the page title. Wide screens: the bottom-right corner, away from
   the left-aligned titles; phones: a strip along the bottom edge, inside the safe area. It slides up once (240 ms)
   and leaves the same way (cookie-consent.js, 160 ms); under reduced motion it simply appears. Bay apps: as before. */
[data-site-theme] .consent[data-compact] .consent__head,
[data-site-theme] .consent[data-compact] .consent__categories,
[data-site-theme] .consent[data-compact] [data-action="save"] { display: none; }
[data-site-theme] .consent[data-compact] .consent__panel {
  width: min(440px, calc(100vw - 2 * var(--sp-5)));
  animation: consent-in 240ms var(--ease-out-expo) both;
}
[data-site-theme] .consent[data-compact] .consent__intro { margin-bottom: var(--sp-4); }
[data-site-theme] .consent__btn { min-height: 44px; touch-action: manipulation; }
[data-site-theme] .consent__btn:active { transform: scale(0.97); }
[data-site-theme] .consent__btn { transition: background-color var(--dur-fast) var(--ease-out-expo),
                                              color var(--dur-fast) var(--ease-out-expo),
                                              border-color var(--dur-fast) var(--ease-out-expo),
                                              transform 140ms var(--ease-out-expo); }
@media (min-width: 721px) {
  [data-site-theme] .consent[data-compact] { inset-inline: auto var(--sp-5); }
}
@media (max-width: 720px) {
  [data-site-theme] .consent[data-compact] {
    inset-inline: var(--sp-3);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
  [data-site-theme] .consent[data-compact] .consent__panel { width: auto; padding: var(--sp-4); }
  [data-site-theme] .consent[data-compact] .consent__actions { justify-content: stretch; }
  [data-site-theme] .consent[data-compact] .consent__actions > * { flex: 1 1 auto; }
}
/* The full panel on a short phone (320 × 568 — it rose above the screen top): it scrolls inside, the page does not. */
[data-site-theme] .consent__panel {
  max-height: calc(100svh - 2 * var(--sp-3));
  overflow-y: auto;
  overscroll-behavior: contain;
}
@keyframes consent-in {
  from { transform: translateY(calc(100% + 24px)); opacity: 0; }
}

@media print {
  .consent { display: none !important; }
}