:root {
  --valikar-viewport-height: 100dvh;
}

html,
body,
.app-shell,
.main-panel {
  height: var(--valikar-viewport-height);
  min-height: 0;
}

@media (max-width: 900px) {
  .sidebar {
    height: var(--valikar-viewport-height);
    max-height: var(--valikar-viewport-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .main-panel,
  .chat-workspace {
    min-height: 0;
    overflow: hidden;
  }

  .conversation {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .composer-dock {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    padding-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  }

  .account-area {
    flex: 0 0 auto;
    margin-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  }
}

@media (max-width: 620px) {
  .chat-workspace:not(.has-chat) .conversation {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
  }

  .chat-workspace:not(.has-chat) .welcome {
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 18px;
  }

  .chat-workspace:not(.has-chat) .composer-dock {
    width: 100%;
    padding-top: 8px;
    padding-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  }
}