/* Production layout fixes for the AI landing workspace. */
:root {
  --shell-max-width: 1360px;
}

* {
  box-sizing: border-box;
}

.landing-home {
  width: min(var(--shell-max-width), calc(100vw - 48px)) !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr) !important;
  column-gap: clamp(32px, 5vw, 88px) !important;
  align-items: center !important;
  overflow: visible !important;
}

.landing-home > * {
  min-width: 0;
}

.landing-copy,
.landing-visual,
.home-picker,
.ai-console {
  min-width: 0;
  max-width: 100%;
}

.home-picker {
  width: min(100%, 760px) !important;
  margin-inline: auto !important;
}

.home-picker-panel {
  min-width: 0;
  overflow: hidden;
}

.home-tool-grid,
.quick-tool-grid,
.tool-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.ai-console {
  width: min(100%, 760px) !important;
}

.ai-flow-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.quick-panel,
.floating-tools,
.toolbox-popover {
  max-width: min(360px, calc(100vw - 32px)) !important;
  right: clamp(16px, 2vw, 32px) !important;
}

.toolbox-panel,
.quick-panel {
  overflow: hidden;
}

.toolbox-panel button,
.quick-panel button,
.tool-card,
.home-tool {
  min-width: 0;
}

.toolbox-panel button,
.quick-panel button {
  white-space: normal;
}

@media (max-width: 1180px) {
  .landing-home {
    grid-template-columns: 1fr !important;
    row-gap: 40px !important;
    padding-top: 56px !important;
  }

  .landing-copy,
  .landing-visual {
    width: min(100%, 820px);
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  .landing-home {
    width: min(100%, calc(100vw - 28px)) !important;
    padding-top: 32px !important;
  }

  .landing-actions {
    flex-wrap: wrap;
  }

  .ai-flow-grid {
    grid-template-columns: 1fr !important;
  }

.home-picker-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* Upload preview and tool form alignment. */
:root {
  --tool-form-width: min(100%, 620px);
}

main .upload-zone,
main .upload-card,
main .upload-area,
main .drop-zone,
main .dropzone,
main .file-drop,
main .uploader,
main [class*="upload-zone"],
main [class*="upload-card"],
main [class*="upload-area"],
main [class*="file-drop"],
main [class*="drop-zone"],
main [data-upload],
main [data-drop-zone] {
  max-width: var(--tool-form-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main .file-list,
main .selected-files,
main .upload-file-list,
main [class*="file-list"],
main [class*="selected-file"] {
  width: var(--tool-form-width) !important;
  max-width: var(--tool-form-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main .settings-grid,
main .tool-settings,
main .setting-grid,
main .form-grid,
main [class*="settings"],
main [class*="setting-grid"] {
  width: var(--tool-form-width) !important;
  max-width: var(--tool-form-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main .form-actions,
main .tool-actions,
main .action-row {
  width: var(--tool-form-width) !important;
  max-width: var(--tool-form-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.has-media-preview {
  min-height: 220px !important;
  padding: 12px !important;
}

.has-media-preview > :not(.media-upload-preview):not(input) {
  display: none !important;
}

.media-upload-preview {
  width: 100%;
  display: grid;
  gap: 10px;
}

.media-upload-stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #0f172a;
}

.media-upload-stage video,
.media-upload-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.media-upload-stage audio {
  width: min(100%, 520px);
}

.media-upload-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 0 4px;
  color: #64748b;
  font-size: 13px;
}

.media-upload-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f2937;
  font-weight: 700;
}

.media-upload-size {
  flex: 0 0 auto;
}

/* Exact project classes: keep upload, selected file, settings, and actions aligned. */
.upload-card {
  width: min(620px, 100%) !important;
  justify-self: center !important;
  display: grid !important;
}

.upload-card .dropzone,
.upload-card .file-list,
.upload-card .settings,
.upload-card .actions {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.upload-card .dropzone {
  min-height: 220px !important;
}

.upload-card .dropzone.has-media-preview {
  cursor: default !important;
}

.upload-card .dropzone.has-media-preview input[type="file"] {
  pointer-events: none !important;
}

.upload-card .dropzone.has-media-preview .media-upload-preview {
  position: relative;
  z-index: 2;
}

.upload-card .file-list {
  margin-top: 12px !important;
}

.upload-card .settings {
  margin-top: 16px !important;
}

.upload-card .actions {
  margin-top: 18px !important;
}

.media-upload-replace {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  padding: 0 10px;
  color: #4f46e5;
  background: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.media-upload-replace:hover {
  border-color: #8b7cff;
  background: #f4f2ff;
}