responsive-bottom-sheet { display: contents; }
responsive-bottom-sheet > dialog { position: fixed; inset: 0; display: grid; place-items: center; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 20px; border: 0; background: transparent; overflow: hidden; }
responsive-bottom-sheet > dialog:not([open]) { display: none; }
responsive-bottom-sheet > dialog::backdrop { background: rgb(0 0 0 / 82%); backdrop-filter: blur(4px); transition: opacity 180ms ease; }
/* kol-ui-dialog is only a visual base here; the custom element owns sheet geometry,
 * scroll locking, drag offsets, and focus management. */
responsive-bottom-sheet > dialog.kol-ui-dialog { position: fixed; inset: 0; display: grid; place-items: center; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 20px; border: 0; background: transparent; overflow: hidden; }
responsive-bottom-sheet > dialog.kol-ui-dialog:not([open]) { display: none; }
responsive-bottom-sheet > dialog.kol-ui-dialog[open] { background: transparent; background-color: transparent; }
responsive-bottom-sheet > dialog.kol-ui-dialog::backdrop { display: block; background: rgb(0 0 0 / 82%); backdrop-filter: blur(4px); transition: opacity 180ms ease; }
responsive-bottom-sheet [data-responsive-bottom-sheet-panel] { position: relative; display: flex; min-height: 0; flex-direction: column; width: min(720px, 100%); max-height: min(90vh, 840px); max-height: min(90svh, 840px); max-height: min(90dvh, 840px); box-sizing: border-box; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg, 10px); background: var(--background); color: var(--foreground); box-shadow: 0 18px 55px rgb(0 0 0 / 30%); overflow: hidden; transform: translate3d(0, var(--responsive-bottom-sheet-offset, 0px), 0); transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease; will-change: transform; }
responsive-bottom-sheet [data-responsive-bottom-sheet-panel].is-dragging { transition: none; user-select: none; -webkit-user-select: none; }
responsive-bottom-sheet [data-responsive-bottom-sheet-panel].is-pointer-dragging { user-select: none; -webkit-user-select: none; }
responsive-bottom-sheet [data-responsive-bottom-sheet-panel].is-closing { transition-duration: 180ms; }
responsive-bottom-sheet [data-responsive-bottom-sheet-handle], responsive-bottom-sheet [data-responsive-bottom-sheet-drag-handle] { touch-action: none; cursor: grab; }
responsive-bottom-sheet [data-responsive-bottom-sheet-handle]:active, responsive-bottom-sheet [data-responsive-bottom-sheet-drag-handle]:active { cursor: grabbing; }
responsive-bottom-sheet [data-responsive-bottom-sheet-content] { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }

/* The visible grip is only useful while touch dragging is enabled. */
@media (min-width: 701px) {
  responsive-bottom-sheet [data-responsive-bottom-sheet-handle] { display: none; }
}

/* One quiet shell for every responsive dialog; contents keep their own layout. */
responsive-bottom-sheet [data-responsive-bottom-sheet-panel] :is(header, .kol-home-customization-dialog__header, .kol-novel-donation__header) {
  border-color: var(--border);
  background: var(--background);
  color: var(--foreground);
}

responsive-bottom-sheet [data-responsive-bottom-sheet-panel] :is(h2, h3, .kol-novel-donation__title) {
  color: var(--foreground);
}

responsive-bottom-sheet [data-responsive-bottom-sheet-panel] :is(button, a) {
  font-family: inherit;
}

responsive-bottom-sheet [data-responsive-bottom-sheet-panel] .kol-novel-donation__close {
  border-color: var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--muted-foreground);
}

responsive-bottom-sheet [data-responsive-bottom-sheet-panel] .kol-novel-donation__close:is(:hover, :focus-visible) {
  border-color: var(--primary);
  background: var(--muted);
  color: var(--primary);
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
/* Keep this threshold synchronized with responsive-bottom-sheet.js. */
@media (max-width: 700px) {
  responsive-bottom-sheet > dialog { display: block; padding: 0; }
  responsive-bottom-sheet > dialog.kol-ui-dialog[open] { display: block; padding: 0; }
  responsive-bottom-sheet > dialog::backdrop { background: rgb(0 0 0 / 82%); backdrop-filter: blur(4px); }
  responsive-bottom-sheet [data-responsive-bottom-sheet-panel] { position: absolute; inset-inline: 0; inset-block-end: 0; width: 100%; max-width: none; height: min(90vh, 840px); height: min(90svh, 840px); height: min(90dvh, 840px); max-height: calc(100vh - 12px); max-height: calc(100svh - 12px); max-height: calc(100dvh - 12px); border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0; padding-block-end: env(safe-area-inset-bottom); transform: translate3d(0, var(--responsive-bottom-sheet-offset, 0px), 0); }
}
@media (prefers-reduced-motion: reduce) {
  responsive-bottom-sheet > dialog::backdrop, responsive-bottom-sheet [data-responsive-bottom-sheet-panel] { transition-duration: 1ms; }
}