/* ============================================================
   COSTA.STUDIO — SHARED STUDIO WORKSPACE
   One layout for every generating studio:

     CANVAS  →  DOCK (prompt + controls)  →  BOARD / RESULTS

   The right rail is informational only. Creative controls live in
   the dock under the canvas (costa-dock.js), never in a sidebar.
   ============================================================ */

.ws {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: var(--sp-5);
  padding: var(--sp-5);
  align-items: start;
}
.ws-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* ── top bar ── */
.ws-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ws-proj {
  font-size: var(--fs-h3); font-weight: var(--fw-bold);
  background: none; border: none; border-bottom: 1px dashed transparent;
  padding: 2px 0; min-width: 170px; color: var(--text);
}
.ws-proj:hover, .ws-proj:focus { border-bottom-color: var(--border-strong); outline: none; }

/* ── canvas ── */
.ws-canvas {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ws-canvas video, .ws-canvas img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.ws-canvas.tall { aspect-ratio: 9 / 16; max-height: 62vh; margin: 0 auto; width: auto; }
.ws-canvas.square { aspect-ratio: 1; max-height: 62vh; margin: 0 auto; width: auto; }

.ws-ph {
  color: var(--text-3); text-align: center; padding: var(--sp-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.ws-ph > svg { width: 40px; height: 40px; opacity: .4; }
.ws-ph p { max-width: 380px; }

.ws-prog { width: min(340px, 70%); height: 4px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.ws-prog i { display: block; height: 100%; width: 5%; background: var(--accent); transition: width .5s var(--ease); }
.ws-prog-txt { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }

/* ── result actions ── */
.ws-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.ws-act-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }

/* ── storyboard / results strip ── */
.ws-board { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.ws-board-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ws-strip { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); }

.shot {
  width: 184px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface); cursor: pointer;
  transition: border-color var(--t) var(--ease);
}
.shot.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.shot-thumb {
  aspect-ratio: 16/9; background: var(--surface-2); position: relative;
  display: flex; align-items: center; justify-content: center;
}
.shot-thumb video, .shot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shot-n {
  position: absolute; top: 5px; inset-inline-start: 5px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  background: rgba(0,0,0,.66); color: #fff; padding: 2px 7px; border-radius: 4px;
}
.shot-st {
  position: absolute; top: 5px; inset-inline-end: 5px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
}
.shot-st.draft { background: var(--surface-3); color: var(--text-3); }
.shot-st.done  { background: var(--success); color: #fff; }
.shot-body { padding: 8px 10px; }
.shot-p {
  font-size: 11.5px; color: var(--text-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 32px;
}
.shot-meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); margin-top: 5px; }
.shot-acts { display: flex; gap: 3px; margin-top: 6px; }
.shot-acts button {
  width: 22px; height: 22px; border-radius: 5px; font-size: 11px;
  color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border);
}
.shot-acts button:hover { color: var(--text); border-color: var(--border-strong); }
.shot-acts button.dan:hover { color: var(--danger); border-color: var(--danger); }

.shot-add {
  width: 184px; flex-shrink: 0; border: 1.5px dashed var(--border-strong); border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--text-3); min-height: 150px; background: transparent;
}
.shot-add:hover { border-color: var(--accent); color: var(--accent); }

/* ── right rail: information only ── */
.ws-rail {
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: sticky; top: calc(var(--topbar-h) + var(--sp-5));
}
.ws-rail.hide { display: none; }
.ws-rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-4); }
.ws-rail-card h4 {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: var(--sp-3);
  display: flex; align-items: center; justify-content: space-between;
}
.ws-meta { display: flex; flex-direction: column; gap: 5px; }
.ws-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.ws-meta span {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); flex-shrink: 0;
}
.ws-meta b {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-2);
  text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-hist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ws-hist-i {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); padding: 0;
}
.ws-hist-i:hover { border-color: var(--accent); }
.ws-hist-i img, .ws-hist-i video { width: 100%; height: 100%; object-fit: cover; }

/* ── mode / format chip rows above the canvas ── */
.ws-modes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ws-modes::-webkit-scrollbar { height: 0; }
.ws-mode {
  flex-shrink: 0; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  padding: 8px 15px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.ws-mode:hover { border-color: var(--border-strong); color: var(--text); }
.ws-mode.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── results grid (image/video studios) ── */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.ws-grid-i { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.ws-grid-i .th { aspect-ratio: 1; background: var(--surface-2); }
.ws-grid-i .th img, .ws-grid-i .th video { width: 100%; height: 100%; object-fit: cover; }
.ws-grid-i .bd { padding: 8px 10px; }

@media (max-width: 1180px) {
  .ws { grid-template-columns: 1fr; }
  .ws-rail { position: static; display: none; }
  .ws-rail.show { display: flex; }
}
@media (max-width: 760px) {
  .ws { padding: var(--sp-3); gap: var(--sp-3); }
  .ws-canvas { border-radius: var(--r-sm); }
  .shot, .shot-add { width: 150px; }
}