/* Input panel - base layout: bottom input area, media mode switcher, tabs, upload card, prompt input, mention chips/popover, send button, cost chip, settings row, model dropdown, video composer, dance placeholder, and the 900px breakpoint. */

/* ========================================
   Input Panel — Bottom input area, upload card, settings row.
   Edit here for send button style, dropdown sizes, upload card.
   ======================================== */
.input-panel {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 50;
  background: rgba(10, 10, 15, 0.9); backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 1600px; width: calc(100% - 48px); border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 28px rgba(5, 5, 10, 0.42);
  min-height: 380px;
}
.input-panel-content {
  position: relative;
  z-index: 5;
  margin-left: 88px;
  min-height: 380px;
  background: rgba(10, 10, 15, 0.92);
}
.image-composer-panel,
.video-composer-panel { min-height: 380px; }

/* Media mode switcher */
.media-mode-switcher {
  position: absolute;
  left: 16px;
  top: 20px;
  z-index: 1;
  width: 86px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.media-mode-btn {
  width: 86px;
  min-height: 52px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(12, 12, 18, 0.88);
  color: rgba(255,255,255,0.64);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  transform: translateX(0);
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.media-mode-btn span { white-space: nowrap; }
.media-mode-btn:hover,
.media-mode-btn:focus-visible {
  transform: translateX(-10px);
  color: #fff;
  border-color: rgba(168, 85, 247, 0.35);
  background: rgba(24, 18, 34, 0.96);
  box-shadow: 0 14px 30px rgba(0,0,0,0.3);
}
.media-mode-btn.active {
  color: #fff;
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(168, 85, 247, 0.2);
}
.canvas-entry-btn {
  border-color: rgba(56, 189, 248, 0.24);
  color: rgba(186, 230, 253, 0.82);
}
.canvas-entry-btn:hover,
.canvas-entry-btn:focus-visible {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.12);
}

/* Tabs */
.tabs { display: flex; gap: 8px; padding: 12px 16px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.tab-item { padding: 6px 14px; cursor: pointer; color: rgba(255,255,255,0.35); font-size: 13px; transition: all 0.3s; border-radius: 8px 8px 0 0; }
.tab-item:hover { background: rgba(255,255,255,0.04); color: #fff; }
.tab-item.active { background: rgba(168, 85, 247, 0.15); color: #a855f7; font-weight: 600; border-bottom: 2px solid #a855f7; }

/* Image Upload Area */
.image-upload-area { padding: 0 16px; border-bottom: 0; }
.upload-card { position: relative; height: 84px; margin-top: 8px; background: rgba(168, 85, 247, 0.06); border: 1px dashed rgba(168, 85, 247, 0.3); border-radius: 12px; padding: 16px; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.upload-card:hover { background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.5); }
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; margin-bottom: 12px; }
.upload-card .upload-grid { display: flex; flex-wrap: wrap; align-items: flex-start; }
.upload-card:not(.has-images) { display: flex; align-items: center; }
.upload-card:not(.has-images) .upload-grid { display: none; margin-bottom: 0; }
.upload-card:not(.has-images) .upload-controls { width: 100%; }
.upload-card.has-images { padding: 3px 112px 3px 16px; }
.upload-card.has-images .upload-grid { flex-wrap: nowrap; gap: 0; margin-bottom: 0; overflow: visible; padding: 0; }
.upload-card.has-images .upload-controls { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); justify-content: flex-end; gap: 8px; }
.upload-card.has-images .upload-controls .btn-add-image { display: none; }
.image-thumb-wrapper { position: relative; flex: 0 0 80px; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; }
.upload-card.has-images .image-thumb-wrapper {
  flex-basis: 76px;
  width: 76px;
  height: 76px;
  margin-right: -38px;
  z-index: var(--stack-index, 1);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 7px 18px rgba(0,0,0,0.24);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.upload-card.has-images:not(.is-reordering) .image-thumb-wrapper[data-reorder-image]:hover {
  z-index: 80;
  transform: translateY(-10px) scale(1.03);
  border-color: rgba(196,181,253,0.76);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38), 0 0 18px rgba(139,92,246,0.22);
}
.image-thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.composer-reference-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.composer-reference-preview:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px #c4b5fd;
}
.composer-reference-upload-status {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(99,102,241,0.78);
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
}
.composer-reference-role-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
}
#imageComposerPanel.module-image_ecommerce_detail_replicate .upload-card.has-images {
  height: auto;
  min-height: 72px;
}
#imageComposerPanel.module-image_ecommerce_detail_replicate .upload-card.has-images .image-thumb-wrapper {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
  margin-right: 8px;
}
.image-thumb-wrapper:hover .remove-btn { opacity: 1; transform: scale(1); }
.image-thumb-wrapper[data-reorder-image] { cursor: grab; touch-action: none; }
.image-thumb-wrapper[data-reorder-image]:active,
.upload-card.is-reordering .image-thumb-wrapper[data-reorder-image] { cursor: grabbing; }
.upload-card.has-images .image-thumb-wrapper.is-reorder-placeholder {
  flex: 0 0 10px;
  width: 10px;
  height: 76px;
  margin: 0 22px;
  overflow: visible;
  opacity: 1;
  transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 95;
}
.image-thumb-wrapper.is-reorder-placeholder::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f5f3ff, #a78bfa 24%, #7c3aed 76%, #f5f3ff);
  box-shadow: 0 0 8px rgba(196,181,253,0.9), 0 0 20px rgba(124,58,237,0.72);
}
.image-thumb-wrapper.is-reorder-placeholder::after {
  content: attr(data-reorder-position);
  position: absolute;
  left: 50%;
  top: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border: 1px solid var(--rb-text);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rb-primary-3), var(--rb-primary));
  box-shadow: 0 0 12px rgba(167,139,250,0.88);
  color: var(--rb-text);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.image-thumb-wrapper.is-drop-target { z-index: 90; border-color: rgba(196,181,253,0.66); box-shadow: 0 0 0 1px rgba(168,85,247,0.58) inset, 0 0 18px rgba(168,85,247,0.18); }
.upload-card.is-reordering { user-select: none; }
.upload-card.is-reordering .image-thumb-wrapper[data-reorder-image] {
  transform: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.reference-image-reordering,
.reference-image-reordering * {
  cursor: grabbing !important;
  user-select: none !important;
}
.reference-image-reorder-ghost {
  position: fixed;
  z-index: 2500;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(0,0,0,0.36), 0 0 0 1px rgba(168,85,247,0.42) inset;
  background: rgba(12,12,18,0.86);
}
.reference-image-reorder-ghost[hidden] { display: none !important; }
.reference-image-reorder-ghost img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.image-add-tile {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 1px dashed rgba(168,85,247,0.72);
  background: rgba(168,85,247,0.1);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.upload-card.has-images .image-add-tile {
  flex-basis: 76px;
  width: 76px;
  height: 76px;
  margin-left: 46px;
}
.image-add-tile:hover { background: rgba(168,85,247,0.2); border-color: #c084fc; color: #fff; transform: translateY(-1px); }
.image-add-tile:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.remove-btn { position: absolute; top: 4px; right: 4px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(0.8); transition: opacity 0.2s, transform 0.2s, background-color 0.2s; font: 500 14px/1 var(--app-font-ui); }
.remove-btn:hover { background: rgba(239, 68, 68, 0.9); }
.remove-btn:focus-visible { opacity: 1; transform: scale(1); outline: 2px solid #c4b5fd; outline-offset: 2px; }
.upload-controls { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.btn-add-image { padding: 8px 16px; border-radius: 8px; background: rgba(168, 85, 247, 0.15); color: #a855f7; border: none; cursor: pointer; font-size: 13px; transition: all 0.3s; display: flex; align-items: center; gap: 6px; }
.btn-add-image:hover { background: rgba(168, 85, 247, 0.25); transform: translateY(-1px); }
.image-counter { color: rgba(255,255,255,0.4); font-size: 13px; }
.btn-clear-images {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid rgba(248,113,113,0.24);
  background: rgba(127,29,29,0.14);
  color: rgba(254,202,202,0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn-clear-images:hover {
  background: rgba(185,28,28,0.24);
  border-color: rgba(248,113,113,0.5);
  color: #fff;
}
.btn-clear-images[hidden] { display: none !important; }

/* Prompt Input */
.prompt-area { position: relative; padding: 16px 16px 0; }
.prompt-textarea { width: 100%; height: 128px; min-height: 128px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 16px; padding: 12px 70px 12px 16px; border-radius: 12px; outline: none; resize: vertical; transition: all 0.3s; line-height: 1.5; }
.prompt-textarea:focus { border-color: #a855f7; box-shadow: 0 0 20px rgba(168, 85, 247, 0.1); background: rgba(255,255,255,0.06); }
.prompt-textarea::placeholder { color: rgba(255,255,255,0.3); }
.prompt-textarea:disabled { opacity: 0.4; cursor: not-allowed; background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
.prompt-textarea[readonly] { opacity: 1; cursor: default; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.media-mention-source { display: none !important; }
.media-mention-editor {
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.media-mention-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.3);
  pointer-events: none;
}
.media-mention-editor.is-disabled {
  opacity: 1;
  cursor: default;
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.media-mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  height: 28px;
  margin: 0 2px;
  padding: 2px 8px 2px 3px;
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.42);
  color: #7dd3fc;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}
.media-mention-chip img,
.media-mention-chip video {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}
.media-mention-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-mention-popover {
  position: absolute;
  z-index: 2200;
  width: min(132px, calc(100vw - 32px));
  padding: 7px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.98);
  color: #111827;
  box-shadow: 0 16px 42px rgba(0,0,0,0.22);
}
.media-mention-popover.media-mention-cols-2 { width: min(264px, calc(100vw - 32px)); }
.media-mention-popover.media-mention-cols-3 { width: min(396px, calc(100vw - 32px)); }
.media-mention-popover.media-mention-cols-4 { width: min(528px, calc(100vw - 32px)); }
.media-mention-title {
  display: none;
  padding: 0;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
}
.media-mention-list {
  display: block;
  column-count: 1;
  column-gap: 4px;
  max-height: 190px;
  overflow-y: auto;
}
.media-mention-cols-2 .media-mention-list { column-count: 2; }
.media-mention-cols-3 .media-mention-list { column-count: 3; }
.media-mention-cols-4 .media-mention-list { column-count: 4; }
.media-mention-option {
  width: 100%;
  min-height: 34px;
  margin: 0 0 4px;
  padding: 4px 5px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  break-inside: avoid;
  page-break-inside: avoid;
}
.media-mention-option:hover,
.media-mention-option:focus-visible,
.media-mention-option.is-active {
  outline: none;
  background: #f1f5f9;
}
.media-mention-option.is-active {
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.42);
}
.media-mention-option img,
.media-mention-option video {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}
.media-mention-option-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.media-mention-option-main b {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.1;
}
.media-mention-option-main small {
  color: #64748b;
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-mention-empty {
  padding: 10px 12px;
  color: #64748b;
  font-size: 13px;
}

/* Module description (upscaler feature info) */
.module-description { pointer-events: none; }

/* Send Button - Circular */
.btn-send { position: absolute; right: 24px; bottom: 56px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; font-size: 18px; border: none; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3); display: flex; align-items: center; justify-content: center; padding: 0; }
.btn-send:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(124, 58, 237, 0.5); }
.btn-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Points-cost chip — single unified style shared by the Create and Home
   composers: dark pill, 1px white 10% border, muted text, near-white value
   and bolt icon (mirrors the Create-page tapnow reference). */
.point-cost-preview {
  position: absolute; right: 24px; bottom: 14px;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: 36px; margin: 0; padding: 0 14px;
  width: fit-content; max-width: calc(100% - 32px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px;
  background: #181818; color: #a3a3a3;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
  font-size: 13px; line-height: 1; white-space: nowrap;
}
.point-cost-preview strong { color: #f5f5f5; font-size: 16px; font-weight: 700; line-height: 1; }
.point-cost-icon { color: #f5f5f5; font-size: 14px; line-height: 1; }

/* Settings Row — inside prompt-area for image-gen tab */
.settings-row { display: flex; gap: 12px; padding: 4px 0 8px; align-items: center; }
.image-composer-panel.module-upscaler #imageGenSettings,
.image-composer-panel.module-image_ultra_upscale #imageGenSettings,
.image-composer-panel.module-image_cutout #imageGenSettings {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.wash-setting-spacer {
  display: block;
  visibility: hidden;
  pointer-events: none;
  border-color: transparent;
  background: transparent;
}
[hidden] { display: none !important; }
.setting-select-inline { width: 150px; min-width: 150px; max-width: 150px; height: 44px; box-sizing: border-box; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 0 14px; border-radius: 8px; outline: none; appearance: none; font-size: 15px; font-weight: 600; cursor: pointer; }
.setting-select-inline option { background: #1a1a1f; }

/* Model Dropdown */
/* Base slot stays 180px: the 769–960px narrow-tablet band has no extra room
   (the row already ran at its limit there). The longest trigger name
   (极绘 image2.5 快速版) never wraps. Phones override the fixed slot with
   fluid widths (studio.css / create-mobile-composer.css /
   home-create-composer.css). The EXPANDED dropdown is wider than the slot:
   desktop widens it to 310px (create-responsive-desktop.css /
   home-create-composer.css) so the one-line 11px description (longest 21
   CJK chars ≈231px + 32px name indent) fits on a single line (2026-10
   user-requested resize: the 250px/9px list read too cramped). */
.model-selector-wrapper { position: relative; width: 180px; min-width: 180px; max-width: 180px; flex: 0 0 180px; }
.model-selector-trigger { height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 600; transition: all 0.3s; }
#selectedModelName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-selector-trigger:hover { border-color: #a855f7; background: rgba(0,0,0,0.4); }
.model-selector-trigger .arrow { flex: 0 0 auto; font-size: 12px; color: rgba(255,255,255,0.5); transition: transform 0.3s; }
.model-dropdown-inline { position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; background: #1a1a1f; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; box-shadow: 0 -8px 24px rgba(0,0,0,0.3); z-index: 1000; display: none; }
.model-dropdown-inline.active { display: block; animation: fadeInUp 0.2s ease-out; }
/* Two-line model option (2026-09): row 1 = logo + model name (single line,
   ellipsized by .model-option-name), row 2 = small print describing the
   model's capability/use-case/price positioning (.model-option-desc). The
   flex-wrap + full-width desc span keep the logo and name on one line.
   (2026-10 user-requested resize: roomier padding/leading so the expanded
   list no longer reads cramped; studio-shell.css re-sizes the row on the
   Create/Home pages.) */
.model-option-inline { padding: 12px 14px; cursor: pointer; font-size: 15px; line-height: 1.25; transition: all 0.3s; border-bottom: 1px solid rgba(255,255,255,0.06); display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 4px; text-align: left; }
.model-option-inline:last-child { border-bottom: none; }
.model-option-inline:hover { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.model-option-inline.selected { background: rgba(168, 85, 247, 0.15); color: #a855f7; font-weight: 600; }
/* Line-art ChatGPT mark shown before the gpt-image-2 option (frontend-only rename, 2026-09-22;
   geometry from Wikimedia Commons File:ChatGPT logo.svg, stroke-only per design request). */
.model-option-logo { width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; flex: none; }
.model-option-inline .model-option-logo { margin-right: 0; }
/* 2026-10 (second pass): the expanded-list mark shrinks to 20px and spans
   both grid rows (name + desc) so it sits vertically centered in the row
   instead of hugging the name line; the collapsed trigger keeps 18px. */
.model-option-inline .model-option-logo { width: 20px; height: 20px; grid-row: 1 / span 2; align-self: center; }
.model-option-name { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Small print under the model name: fixed muted color (DESIGN.md `text-dim`
   token) so it stays legible across every theme layer and in the hover/
   selected purple states; the grid places it in column 2 (under the name,
   next to the centered logo). 11px (2026-10 resize, was 9px) keeps the copy
   readable under the 14–15px model name without shouting. */
.model-option-desc { grid-column: 2; margin-left: 0; font-size: 11px; font-weight: 400; line-height: 1.4; color: #7d8784; white-space: normal; }

.composer-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.composer-panel-title { color: #fff; font-size: 15px; font-weight: 700; }
.composer-panel-subtitle { margin-top: 4px; color: rgba(255,255,255,0.42); font-size: 13px; }

/* Video composer placeholder */
.video-panel-badge {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.22);
  font-size: 13px;
  font-weight: 700;
}
.video-upload-area { padding: 0 16px; border-bottom: 0; }
.video-upload-card {
  margin-top: 8px;
  min-height: 74px;
  background: rgba(56, 189, 248, 0.055);
  border: 1px dashed rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 16px;
}
.video-prompt-area { padding-top: 16px; }
.video-settings-row { flex-wrap: nowrap; overflow-x: auto; padding-right: 4px; }
.video-send-btn {
  background: linear-gradient(135deg, #0891b2, #7c3aed);
  box-shadow: 0 4px 20px rgba(8, 145, 178, 0.28);
}
.video-send-btn:hover { box-shadow: 0 6px 28px rgba(8, 145, 178, 0.42); }

.dance-mimic-placeholder {
  padding: 14px 16px 18px;
}
.dance-placeholder-card {
  min-height: 252px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.dance-placeholder-title {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}
.dance-placeholder-desc {
  max-width: 720px;
  color: rgba(255,255,255,0.48);
  font-size: 14px;
  line-height: 1.7;
}
.dance-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.dance-placeholder-box {
  min-height: 82px;
  border: 1px dashed rgba(56, 189, 248, 0.22);
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.055);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.dance-placeholder-box span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  font-size: 13px;
  font-weight: 800;
}
.dance-placeholder-box strong {
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  line-height: 1.35;
}
.dance-placeholder-btn {
  align-self: flex-start;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.42);
  font-size: 14px;
  font-weight: 700;
  cursor: not-allowed;
}

/* The mode switcher docks inside the panel top as a compact row. The
   content padding below reserves exactly that row's height. */
@media (max-width: 900px) {
  .input-panel-content { margin-left: 0; padding-top: 64px; }
  .media-mode-switcher {
    top: 10px;
    left: 12px;
    right: 12px;
    bottom: auto;
    width: auto;
    height: 44px;
    flex-direction: row;
    padding: 5px;
  }
  .media-mode-btn {
    width: auto;
    flex: 1 1 0;
    min-height: 34px;
    justify-content: center;
    padding: 0 10px;
    font-size: 13px;
  }
  .media-mode-btn:hover,
  .media-mode-btn:focus-visible { transform: translateY(-2px); }
  .dance-placeholder-grid { grid-template-columns: 1fr; }
}