/* Cache Notice — full-width background, padded content, chat-safe on mobile */

:root {
  --dh-chat-safe-right: 50px; /* keep this much space clear on mobile for the floating chat */
}

/* ===== Container: full-width background bar at bottom ===== */
.dh-cache-notice {
  position: fixed;
  z-index: 9999;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 20, 0.98);
  color: #fff;
  border-radius: 0; /* full-width */
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* respect bottom safe area on iOS notch devices */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== Inner content: keeps text/buttons readable and centered ===== */
.dh-cn-inner {
  display: flex;
  flex-direction: column;     /* buttons under text, left-aligned */
  gap: 10px;
  padding: 14px 16px;         /* base side padding */
  max-width: 1100px;          /* avoid extra-wide text on big screens */
  margin: 0 auto;             /* center horizontally */
}

/* Text block */
.dh-cn-text {
  flex: 1 1 auto;
  min-width: 220px;
  padding-right: 60px;        /* extra space for floating chat / visual breathing room */
}
.dh-cn-title {
  font-weight: 700;
  margin: 0 0 2px 0;
}
.dh-cn-msg {
  opacity: .9;
  margin: 0;
}

/* Actions under the text, left-aligned */
.dh-cn-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Buttons / link styles (colors kept the same as before) */
.dh-cn-actions button,
.dh-cn-actions .dh-cn-link {
  border: 0;
  background: #3a8bff;      /* primary */
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.dh-cn-actions .dh-cn-link { background: #5850ec; }  /* secondary */
.dh-cn-actions .dh-cn-hide { background: #333; }     /* tertiary */
.dh-cn-actions button:hover,
.dh-cn-actions .dh-cn-link:hover { filter: brightness(1.05); }

/* ===== Mobile: content (not background) keeps right side clear for chat ===== */
@media (max-width: 600px) {
  .dh-cn-inner {
    padding-right: calc(16px + var(--dh-chat-safe-right) + env(safe-area-inset-right, 0px));
  }
}

/* Phablets/tablets: a bit more breathing room on the right (optional) */
@media (min-width: 601px) and (max-width: 768px) {
  .dh-cn-inner {
    padding-right: calc(16px + max(var(--dh-chat-safe-right), 32px) + env(safe-area-inset-right, 0px));
  }
}