:root {
  --release-notes-dock-height: 58px;
}

body {
  padding-bottom: calc(var(--release-notes-dock-height) + env(safe-area-inset-bottom, 0px));
}

.release-notes-dock {
  position: fixed;
  right: 16px;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  z-index: 35;
}

.release-notes-button {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong, #bcae98);
  border-radius: 8px;
  background: var(--surface, #fffdf8);
  color: var(--accent, #17372f);
  box-shadow: 0 3px 12px rgb(33 28 20 / 10%);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.release-notes-button:hover,
.release-notes-retry:hover {
  background: var(--accent-soft, #dce9e0);
}

.release-notes-button:focus-visible,
.release-notes-close:focus-visible,
.release-notes-retry:focus-visible,
.release-notes-history summary:focus-visible {
  outline: 3px solid var(--gold, #8f5f2e);
  outline-offset: 3px;
}

.release-notes-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong, #bcae98);
  border-radius: 12px;
  background: var(--surface, #fffdf8);
  color: var(--ink, #18231f);
  box-shadow: var(--shadow, 0 24px 52px rgb(33 28 20 / 13%));
  overflow: auto;
  overscroll-behavior: contain;
}

.release-notes-dialog::backdrop {
  background: rgb(15 30 25 / 52%);
}

.release-notes-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line, #d8cebd);
  background: var(--surface, #fffdf8);
}

.release-notes-eyebrow {
  margin: 0 0 5px;
  color: var(--gold, #8f5f2e);
  font-size: 11px;
  letter-spacing: .1em;
}

.release-notes-head h2 {
  margin: 0;
  font-size: 22px;
}

.release-notes-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line, #d8cebd);
  border-radius: 8px;
  background: var(--surface-strong, #f8f3e9);
  color: var(--ink, #18231f);
  font-size: 25px;
  cursor: pointer;
}

.release-notes-content {
  padding: 24px;
  font-size: 14px;
  line-height: 1.7;
}

.release-notes-version {
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 10px;
  border-radius: 5px;
  background: var(--accent, #17372f);
  color: #fffdf8;
  font-size: 12px;
  font-weight: 700;
}

.release-notes-date {
  color: var(--muted, #6f746b);
  font-size: 12px;
}

.release-notes-entry h3 {
  margin: 4px 0 10px;
  font-size: 18px;
}

.release-notes-entry ul {
  margin: 0;
  padding-left: 21px;
}

.release-notes-entry li + li {
  margin-top: 8px;
}

.release-notes-history-title {
  margin: 26px 0 8px;
  font-size: 13px;
  color: var(--muted, #6f746b);
}

.release-notes-history {
  border-top: 1px solid var(--line, #d8cebd);
}

.release-notes-history summary {
  min-height: 48px;
  padding-block: 12px;
  color: var(--accent, #17372f);
  font-weight: 700;
  cursor: pointer;
}

.release-notes-history .release-notes-entry {
  padding-bottom: 18px;
}

.release-notes-message {
  margin: 0 0 12px;
  color: var(--muted, #6f746b);
}

.release-notes-retry {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong, #bcae98);
  border-radius: 6px;
  background: var(--surface-strong, #f8f3e9);
  color: var(--accent, #17372f);
  cursor: pointer;
}

@media (max-width: 720px) {
  .release-notes-dock {
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: calc(var(--release-notes-dock-height) + env(safe-area-inset-bottom, 0px));
    align-items: center;
    justify-content: flex-end;
    padding: 5px 12px calc(5px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line, #d8cebd);
    background: var(--surface, #fffdf8);
  }

  .release-notes-dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 24px);
  }

  .release-notes-head,
  .release-notes-content {
    padding: 18px;
  }
}

@media print {
  body { padding-bottom: 0; }
  .release-notes-dock,
  .release-notes-dialog { display: none !important; }
}