@media (max-width: 767px) {
  html,
  body,
  #root {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #root > .flex.h-screen.flex-col.bg-background {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  #root > .flex.h-screen.flex-col.bg-background > header {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.625rem 0.75rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background > header > div:first-child {
    min-width: 0 !important;
    flex: 1 1 12rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background > header > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.375rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background > header > div:last-child > div:first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }

  #root > .flex.h-screen.flex-col.bg-background > div.flex.flex-1.overflow-hidden {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #root > .flex.h-screen.flex-col.bg-background aside.w-80 {
    width: 100% !important;
    max-height: min(17rem, 38svh) !important;
    flex: 0 0 auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
  }

  #root > .flex.h-screen.flex-col.bg-background aside.w-80 > div:first-child {
    padding: 0.5rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background aside.w-80 button {
    min-width: 0 !important;
  }

  #root > .flex.h-screen.flex-col.bg-background main.flex-1 {
    width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  #root > .flex.h-screen.flex-col.bg-background main > div.flex-1.overflow-hidden {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0.25rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background main > div.flex-1.overflow-hidden > .flex.h-full.flex-col.rounded-xl {
    display: flex !important;
    min-height: 0 !important;
    border-radius: 0.5rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background main > div.flex-1.overflow-hidden > .flex.h-full.flex-col.rounded-xl > div:first-child {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding: 0.5rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background main > div.flex-1.overflow-hidden > .flex.h-full.flex-col.rounded-xl > div:first-child > div:first-child {
    min-width: 0 !important;
    flex: 1 1 12rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background main .flex-1.space-y-2.overflow-y-auto {
    min-height: 0 !important;
    padding: 0.5rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background main .flex.items-center.gap-2.border-t.p-2 {
    padding: 0.5rem !important;
  }

  #root > .flex.h-screen.flex-col.bg-background main .max-w-\[78\%\] {
    max-width: 92% !important;
  }
}