@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    order: 2;
  }

  .chat-panel {
    order: 1;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 16px;
    gap: 12px;
    grid-template-rows: 1fr;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    height: 100svh;
    height: 100dvh;
  }

  .sidebar {
    padding: 14px;
    max-height: 180px;
    overflow: hidden;
    height: 100%;
  }

  .app-shell:not(.mobile-chat-open) .chat-panel {
    display: none;
  }

  .app-shell.mobile-chat-open .sidebar {
    display: none;
  }

  .app-shell.mobile-chat-open .chat-panel {
    height: 100%;
  }

  .messages {
    padding-bottom: calc(16px + var(--keyboard-offset));
  }

  .back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar {
    max-height: none;
    overflow: visible;
  }

  .chat-list {
    gap: 10px;
  }

  .folder-scroll {
    display: none;
  }

  .chat-header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: calc(14px + env(safe-area-inset-top));
  }

  .chat-right {
    width: 100%;
    justify-content: space-between;
  }

  .messages {
    padding: 16px;
  }

  .call-banner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
  }

  .call-banner-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .message {
    max-width: 85%;
  }

  .composer {
    padding: 12px 16px 16px;
    gap: 8px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateY(calc(-1 * var(--keyboard-offset)));
    transition: transform var(--anim-fast) var(--ease-out);
  }

  .composer input,
  .composer textarea {
    font-size: 14px;
  }

  .message-actions {
    display: none;
  }

}