:root {
  --action-soft: #d0e4d8;
  --action-soft-hover: #c0d9cb;
  --on-action-soft: var(--ink, #191713);
}

.privacy-dock {
  position: fixed;
  z-index: 60;
  right: 24px;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 50vw;
  max-width: 860px;
  min-width: 560px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink, #191713);
  background: rgb(233 235 227 / 96%);
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgb(25 23 19 / 8%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--font, Arial, sans-serif);
}

.privacy-dock[hidden], [data-cookie-preferences][hidden] { display: none; }
.privacy-dock-copy { display: flex; flex-direction: column; gap: 2px; }
.privacy-dock h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: 0; }
.privacy-dock p { margin: 0; color: var(--body, #3a3834); font-size: 15px; line-height: 20px; }
.privacy-dock-actions { display: flex; gap: 8px; align-items: center; }
.privacy-dock-policy { flex: 1; font-size: 14px; line-height: 20px; color: var(--body, #3a3834); text-decoration: underline; text-underline-offset: 3px; }
.privacy-dock button {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgb(25 23 19 / 18%);
  border-radius: 4px;
  background: transparent;
  color: var(--ink, #191713);
  font: 400 16px/20px var(--font, Arial, sans-serif);
  cursor: pointer;
  transition: background-color 160ms ease;
}
.privacy-dock button:hover { background: rgb(25 23 19 / 5%); }
.privacy-dock .privacy-dock-allow { background: var(--action-soft); border-color: transparent; color: var(--on-action-soft); }
.privacy-dock .privacy-dock-allow:hover { background: var(--action-soft-hover); }
.privacy-dock :focus-visible { outline: 2px solid var(--ink, #191713); outline-offset: 3px; }
.consent-visible .prototype-controls { visibility: hidden; pointer-events: none; }
.privacy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 900px) {
  .privacy-dock { width: auto; min-width: 0; max-width: none; left: 16px; right: 16px; padding: 16px; }
}
@media (max-width: 540px) {
  .privacy-dock-actions { flex-wrap: wrap; }
  .privacy-dock-policy { flex-basis: 100%; padding: 4px 0 8px; }
  .privacy-dock button { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
  .privacy-dock button { transition: none; }
}