@media (max-width: 980px) {
  .kilo-console .app-header {
    grid-template-columns: auto 1fr auto;
  }

  .kilo-console .header-title {
    display: none;
  }

  .kilo-console .config-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .kilo-console .config-sidebar {
    position: static;
    height: auto;
    max-height: 18rem;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .kilo-console .config-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  html[data-theme="kilo"],
  html[data-theme="kilo-console"],
  .kilo-console {
    --app-header-height: auto;
    --app-rail-width: 3rem;
  }

  [data-slot="page-header-main"],
  [data-component="config-row"] {
    align-items: stretch;
  }

  [data-component="config-row"] {
    flex-wrap: wrap;
  }

  [data-slot="config-row-trailing"] {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .kilo-console {
    --app-rail-width: 3.75rem;
  }

  .kilo-console .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .kilo-console .notification-zone {
    display: none;
  }

  .kilo-console .console-body {
    grid-template-columns: var(--app-rail-width) minmax(0, 1fr);
  }

  .kilo-console .rail {
    padding-inline: 0.45rem;
  }

  .kilo-console .rail-action,
  .kilo-console .favorite-project {
    width: 2.35rem;
    height: 2.35rem;
  }

  .kilo-console .content,
  .kilo-console .route-empty {
    padding: 1rem;
  }

  .kilo-console .config-sidebar-title {
    min-height: 3.75rem;
    padding: 0 1rem;
  }

  .kilo-console .content {
    padding-top: 0;
  }

  .kilo-console .config-options {
    grid-template-columns: 1fr;
  }
}
