/* Keep the native scrollbar's wheel, touch, drag and keyboard behavior. */
.case-dialog,
.case-dialog.energy-case,
.talk-dialog {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

@supports selector(::-webkit-scrollbar) {
  .case-dialog,
  .case-dialog.energy-case,
  .talk-dialog {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  :is(.case-dialog, .talk-dialog)::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  :is(.case-dialog, .talk-dialog)::-webkit-scrollbar-track {
    margin-block: 36px;
    background: transparent;
  }

  :is(.case-dialog, .talk-dialog)::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--accent);
    background-clip: padding-box;
  }

  :is(.case-dialog, .talk-dialog)::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-strong);
  }

  :is(.case-dialog, .talk-dialog)::-webkit-scrollbar-corner {
    background: transparent;
  }

  :is(.case-dialog, .talk-dialog)::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

/* A quiet filled state replaces the orange ring on close controls. */
.talk-close:focus-visible,
.talk-dialog .talk-close:focus-visible,
.dialog-close:focus-visible {
  outline: none;
  box-shadow: none;
  background: #dedbd5;
  color: #20211f;
}

.energy-case #case-title:focus {
  outline: none;
}

@media (max-width: 700px) {
  :is(.case-dialog, .talk-dialog)::-webkit-scrollbar-track {
    margin-block: 24px;
  }
}

@media (forced-colors: active) {
  .talk-close:focus-visible,
  .talk-dialog .talk-close:focus-visible,
  .dialog-close:focus-visible {
    outline: 2px solid ButtonText;
    outline-offset: 2px;
  }
}