feat: polish director studio responsive layout

src/styles.css

@@ -29,7 +29,7 @@ body {
     #eef2ef;
 }
 
-.app-shell { min-width: 1180px; }
+.app-shell { min-width: 0; }
 
 button,
 select {
@@ -42,7 +42,7 @@ button {
 
 .app-shell {
   display: grid;
-  grid-template-columns: 304px minmax(920px, 1fr);
+  grid-template-columns: 304px minmax(0, 1fr);
   min-height: 100vh;
 }
 
@@ -5253,6 +5253,156 @@ body {
 .production-section-bar h3 { margin: 0; color: var(--ink); font-size: 14px; }
 .production-section-bar span { display: block; margin-top: 3px; color: var(--faint); font-size: 10px; }
 .production-card { min-width: 0; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(27, 38, 31, 0.035); }
+.studio-console {
+  --ink: #edf3fb;
+  --muted: #aebad0;
+  --faint: #7f8ca4;
+  --line: rgba(150, 170, 199, 0.18);
+  --panel: #111826;
+  --panel-2: #0d1420;
+  --accent: #7d9bff;
+  --accent-2: #ffb36d;
+  --gold: #f0c56b;
+  --blue: #8eb0ff;
+  background:
+    radial-gradient(circle at top left, rgba(125, 155, 255, 0.18), transparent 30%),
+    radial-gradient(circle at top right, rgba(255, 179, 109, 0.12), transparent 28%),
+    linear-gradient(180deg, #090d14 0%, #0b1119 100%);
+}
+.studio-console .production-header { padding: 0 0 2px; }
+.studio-console .production-header h2 { color: #f4f7ff; font-size: 31px; }
+.studio-console .production-header p { color: #9da9be; }
+.studio-console .production-card,
+.studio-console .production-modal {
+  color: #edf3fb;
+  background: linear-gradient(180deg, rgba(17, 24, 38, 0.96), rgba(11, 17, 26, 0.98));
+  border-color: rgba(144, 165, 201, 0.18);
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.33);
+}
+.studio-console .production-card input,
+.studio-console .production-card select,
+.studio-console .production-card textarea,
+.studio-console .production-modal input,
+.studio-console .production-modal select,
+.studio-console .production-modal textarea {
+  color: #eef3fb;
+  background: rgba(255, 255, 255, 0.03);
+  border-color: rgba(150, 170, 199, 0.2);
+}
+.studio-console .production-empty { color: #8f9db5; }
+.studio-console .production-status { color: #b8c3d9; background: rgba(255, 255, 255, 0.04); border-color: rgba(150, 170, 199, 0.18); }
+.studio-console .production-status.ok { color: #9dd5b8; background: rgba(84, 180, 130, 0.12); border-color: rgba(84, 180, 130, 0.24); }
+.studio-console .production-status.warn { color: #efbb72; background: rgba(239, 187, 114, 0.12); border-color: rgba(239, 187, 114, 0.24); }
+.studio-banner { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; min-width: 0; padding: 18px 18px 14px; border: 1px solid rgba(144, 165, 201, 0.18); border-radius: 12px; background: linear-gradient(180deg, rgba(18, 25, 39, 0.92), rgba(12, 18, 28, 0.96)); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); }
+.studio-banner-copy { display: grid; gap: 10px; min-width: 0; flex: 1; }
+.studio-banner-copy h2 { margin: 0; color: #f6f8ff; font-size: 28px; line-height: 1.08; }
+.studio-banner-copy p { margin: 0; color: #9caac0; font-size: 12px; line-height: 1.6; }
+.studio-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
+.studio-pill { display: grid; gap: 3px; min-width: 118px; padding: 9px 11px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(144, 165, 201, 0.18); border-radius: 10px; }
+.studio-pill span { color: #7f8ca4; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
+.studio-pill strong { color: #edf3fb; font-size: 12px; }
+.studio-pill.ok { border-color: rgba(84, 180, 130, 0.28); background: rgba(84, 180, 130, 0.12); }
+.studio-pill.ok strong { color: #b7f0d0; }
+.studio-banner-side { display: grid; gap: 10px; width: min(280px, 100%); }
+.studio-console-stat { display: grid; gap: 4px; padding: 12px 13px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.18); border-radius: 10px; }
+.studio-console-stat span { color: #7f8ca4; font-size: 10px; font-weight: 800; text-transform: uppercase; }
+.studio-console-stat strong { color: #f6f8ff; font-size: 15px; }
+.studio-console-stat small { color: #9caac0; font-size: 11px; line-height: 1.45; }
+.studio-banner-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.studio-workbench { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.46fr) minmax(300px, .84fr); gap: 14px; align-items: start; }
+.studio-shot-rail,
+.studio-stage,
+.studio-inspector { display: grid; gap: 12px; min-width: 0; }
+.studio-shot-list { display: grid; gap: 10px; max-height: 1070px; overflow: auto; padding-right: 2px; }
+.studio-shot-card { display: grid; gap: 10px; align-items: start; width: 100%; padding: 10px; color: #aebad0; text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.15); border-radius: 12px; }
+.studio-shot-card:hover,
+.studio-shot-card.selected { border-color: rgba(125, 155, 255, 0.6); background: rgba(125, 155, 255, 0.09); box-shadow: 0 0 0 1px rgba(125, 155, 255, 0.18) inset; }
+.studio-shot-thumb .scene-preview { aspect-ratio: 16 / 9; min-height: 126px; border-color: rgba(150, 170, 199, 0.16); }
+.studio-shot-copy { display: grid; gap: 4px; min-width: 0; }
+.studio-shot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.studio-shot-copy strong { overflow: hidden; color: #f4f7ff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+.studio-shot-copy small { overflow: hidden; color: #93a0b7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.studio-shot-card .shot-bridge { justify-self: start; max-width: none; color: #86a4ff; font-size: 10px; }
+.studio-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; }
+.studio-stage-title { display: grid; gap: 4px; min-width: 0; }
+.studio-stage-title h3 { margin: 0; color: #f4f7ff; font-size: 18px; }
+.studio-stage-title p { margin: 0; color: #93a0b7; font-size: 11px; line-height: 1.55; }
+.stage-tabs { display: inline-flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.16); border-radius: 12px; }
+.stage-tabs button { min-height: 34px; padding: 0 12px; color: #9caac0; background: transparent; border: 0; border-radius: 9px; font: inherit; font-size: 11px; font-weight: 800; }
+.stage-tabs button.selected,
+.stage-tabs button:hover { color: #f4f7ff; background: rgba(125, 155, 255, 0.18); }
+.studio-preview-panel,
+.studio-continuity-panel,
+.studio-version-panel,
+.studio-queue-panel { display: grid; gap: 12px; }
+.studio-preview-frame { display: grid; gap: 12px; padding: 12px; background: linear-gradient(180deg, rgba(8, 12, 18, 0.8), rgba(10, 14, 22, 0.96)); border: 1px solid rgba(144, 165, 201, 0.16); border-radius: 14px; }
+.studio-preview-frame .scene-preview { min-height: 520px; aspect-ratio: 16 / 9; border-color: rgba(144, 165, 201, 0.16); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
+.studio-preview-summary,
+.studio-preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.studio-preview-stats > div,
+.studio-preview-copy > div,
+.studio-inspector-section,
+.studio-queue-grid > .studio-inspector-section { display: grid; gap: 6px; padding: 12px 13px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.14); border-radius: 12px; }
+.studio-preview-stats span,
+.studio-preview-copy span,
+.studio-definition-list dt,
+.studio-ledger span,
+.studio-mini-prompts span,
+.studio-voice-list span,
+.studio-queue-summary span { color: #7f8ca4; font-size: 10px; font-weight: 800; text-transform: uppercase; }
+.studio-preview-stats strong,
+.studio-preview-copy p,
+.studio-definition-list dd,
+.studio-ledger strong,
+.studio-mini-prompts p,
+.studio-voice-list strong,
+.studio-queue-summary strong { color: #eef3fb; font-size: 11px; line-height: 1.55; }
+.studio-preview-copy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.studio-preview-copy p { margin: 0; }
+.studio-continuity-grid,
+.studio-queue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.studio-definition-list { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 7px 10px; }
+.studio-definition-list dd { margin: 0; color: #edf3fb; }
+.studio-ledger { display: grid; gap: 8px; }
+.studio-ledger > div { display: grid; gap: 4px; padding: 10px 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.12); border-radius: 10px; }
+.studio-ledger strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.studio-mini-prompts { display: grid; gap: 8px; }
+.studio-mini-prompts > div { display: grid; gap: 4px; padding: 10px 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.12); border-radius: 10px; }
+.studio-mini-prompts p { margin: 0; white-space: pre-wrap; }
+.studio-voice-list { display: grid; gap: 8px; }
+.studio-voice-list > div { display: grid; gap: 3px; padding: 10px 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.12); border-radius: 10px; }
+.studio-voice-list > div strong { color: #f4f7ff; }
+.studio-request-preview { overflow: auto; margin: 0; padding: 12px; color: #b9c6dc; background: rgba(6, 10, 16, 0.88); border: 1px solid rgba(144, 165, 201, 0.16); border-radius: 10px; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
+.studio-queue-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.studio-queue-actions button { min-height: 36px; }
+.studio-console .director-contract { color: #86a4ff; background: rgba(125, 155, 255, 0.08); border-color: rgba(125, 155, 255, 0.18); }
+.studio-console .director-contract span { color: #9caac0; }
+.studio-console .production-notice { color: #d7e4ff; background: rgba(125, 155, 255, 0.12); border-color: rgba(125, 155, 255, 0.18); }
+.studio-console .production-notice.warn { color: #ffd7a4; background: rgba(255, 179, 109, 0.12); border-color: rgba(255, 179, 109, 0.2); }
+.studio-console .production-notice button { color: inherit; }
+.studio-console .shot-version-row,
+.studio-console .workflow-run-list > div,
+.studio-console .workflow-step-strip > div,
+.studio-console .review-list > button { background: rgba(255, 255, 255, 0.03); border-color: rgba(144, 165, 201, 0.12); }
+.studio-console .shot-version-row strong,
+.studio-console .workflow-run-list strong,
+.studio-console .workflow-step-strip strong,
+.studio-console .review-list strong { color: #f4f7ff; }
+.studio-console .shot-version-row span,
+.studio-console .shot-version-row small,
+.studio-console .workflow-run-list span,
+.studio-console .workflow-run-list small,
+.studio-console .workflow-step-strip span,
+.studio-console .workflow-step-strip small,
+.studio-console .review-list small { color: #8f9db5; }
+.studio-console .production-modal-backdrop { background: rgba(5, 8, 13, 0.78); }
+.studio-console .production-modal { background: linear-gradient(180deg, rgba(17, 24, 38, 0.98), rgba(12, 17, 26, 0.98)); border-color: rgba(144, 165, 201, 0.18); }
+.studio-console .production-modal-head h3 { color: #f4f7ff; }
+.studio-console .production-modal input,
+.studio-console .production-modal textarea,
+.studio-console .production-modal select { background: rgba(255, 255, 255, 0.03); border-color: rgba(144, 165, 201, 0.2); }
+.studio-console .production-modal .form-actions { border-top-color: rgba(144, 165, 201, 0.14); }
+.studio-console .scene-preview { background: linear-gradient(180deg, #182232 0%, #39526c 48%, #0f1826 100%); border-color: rgba(150, 170, 199, 0.2); }
 .production-two-column { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 14px; }
 .production-three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
 .production-form { display: grid; gap: 12px; }
@@ -5767,6 +5917,18 @@ body {
   .episode-catalog-layout,
   .director-production-layout,
   .qa-review-layout { grid-template-columns: 1fr; }
+  .studio-banner,
+  .studio-workbench,
+  .studio-preview-copy,
+  .studio-preview-summary,
+  .studio-preview-stats,
+  .studio-continuity-grid,
+  .studio-queue-grid { grid-template-columns: 1fr; }
+  .studio-banner,
+  .studio-stage-head { flex-direction: column; }
+  .studio-banner-side { width: 100%; }
+  .studio-stage { min-width: 0; }
+  .studio-inspector { min-width: 0; }
   .asset-governance-bar,
   .qa-review-summary,
   .delivery-contract-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -5776,6 +5938,25 @@ body {
 @media (max-width: 680px) {
   .production-header h2 { font-size: 21px; }
   .production-header p { font-size: 11px; }
+  .studio-banner { padding: 14px; }
+  .studio-banner-copy h2 { font-size: 23px; }
+  .studio-banner-actions { justify-content: stretch; }
+  .studio-banner-actions button { flex: 1 1 100%; }
+  .studio-chip-row { display: grid; grid-template-columns: 1fr 1fr; }
+  .studio-pill { min-width: 0; }
+  .studio-workbench { gap: 12px; }
+  .studio-shot-list { max-height: none; }
+  .studio-stage-head { align-items: stretch; }
+  .stage-tabs { width: 100%; overflow: auto; }
+  .stage-tabs button { flex: 1 0 auto; }
+  .studio-preview-frame .scene-preview { min-height: 300px; }
+  .studio-preview-copy,
+  .studio-preview-stats { grid-template-columns: 1fr; }
+  .studio-continuity-grid,
+  .studio-queue-grid { grid-template-columns: 1fr; }
+  .studio-definition-list { grid-template-columns: 76px minmax(0, 1fr); }
+  .studio-queue-actions { flex-direction: column; }
+  .studio-queue-actions button { width: 100%; justify-content: flex-start; }
   .production-three-column,
   .production-template-grid,
   .asset-governance-bar,