/* Breakpoints and React Flow chrome */

@media (max-width: 1100px) {
  .node-sidebar {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: 100%;
    padding: 0;
  }

  .brand-overlay {
    top: 14px;
    left: 16px;
  }

  .workspace-brand-bar {
    top: 22px;
    left: 16px;
  }

  .user-avatar {
    top: 22px;
    right: 16px;
  }

  .workspace-switcher {
    margin-left: 14px;
  }

  .auth-shell,
  .loading-shell {
    padding: 18px;
  }

  .auth-card {
    padding: 22px;
  }

  .workspace-card-actions,
  .dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-card-actions {
    align-items: center;
    flex-direction: row;
  }

  .export-item-row {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "preview copy"
      "actions actions";
  }

  .export-item-preview {
    grid-area: preview;
    width: 72px;
    height: 54px;
  }

  .export-item-copy {
    grid-area: copy;
  }

  .export-item-actions {
    grid-area: actions;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-manager {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
  }

  :root {
    --chat-column-width: min(48vw, 320px);
  }

  .workspace-card {
    grid-template-columns: 1fr;
  }

  .history-toggle {
    top: 12px;
    right: 64px;
  }

  .settings-panel,
  .info-panel,
  .history-panel,
  .graphical-assistant-panel,
  .workspace-members-panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 100px);
  }

  .history-panel {
    max-height: calc((100vh - 100px) * 0.8);
  }

  .node-sidebar {
    top: 62px;
    left: 10px;
    width: calc(100vw - 20px);
    max-height: min(420px, calc(100vh - 82px));
  }

  .canvas-tools {
    left: 10px;
  }

  .topbar,
  .section-heading {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }

  .topbar-actions,
  .canvas-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .canvas-toolbar p:last-child {
    text-align: left;
  }

  .settings-grid,
  .toggle-row,
  .url-row,
  .prompt-engineer-submit-row,
  .reference-card {
    grid-template-columns: 1fr;
  }

  .flow-node,
  .references-node,
  .generate-node,
  .result-node {
    width: min(320px, calc(100vw - 62px));
  }

  .topbar h1 {
    letter-spacing: -0.05em;
  }
}

.react-flow__panel.react-flow__attribution.bottom.right {
  display: none;
}