:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #e9edf6;
  background: #090b10;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #090b10; }
button { font: inherit; color: inherit; }
.studio { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 58px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; border-bottom: 1px solid #252936; background: #11141b;
}
.topbar div:first-child { display: flex; align-items: baseline; gap: 10px; }
.topbar strong { letter-spacing: .08em; }
.topbar span { color: #7f8798; font-size: 11px; letter-spacing: .12em; }
.status { color: #a6afbf; font-size: 12px; }
.status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7be6a4; margin-right: 7px; }
.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 33%) 1fr; }
.left { padding: 20px; border-right: 1px solid #252936; background: #0e1117; overflow: auto; }
.panel-title { color: #747d91; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; }
h1 { font-size: 22px; margin: 8px 0; }
p { color: #8d96a8; line-height: 1.5; margin: 0 0 18px; }
.agents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agents button, .modes button {
  border: 1px solid #2a3040; border-radius: 8px; background: #161a23; padding: 9px 10px; cursor: pointer;
}
.agents button:hover, .modes button:hover { background: #1e2430; }
.agents button[aria-pressed="true"], .modes button[aria-pressed="true"] { border-color: #6c7cff; background: #232a42; }
.task { margin-top: 18px; padding: 14px; border: 1px solid #282e3b; border-radius: 10px; background: #131720; }
.task small { color: #747d91; display: block; margin-bottom: 6px; }
.task strong { font-size: 13px; display: block; }
progress { width: 100%; margin-top: 12px; accent-color: #6c7cff; }
.console { margin-top: 18px; }
pre {
  white-space: pre-wrap; color: #99a5b9; font-size: 11px; line-height: 1.55;
  border: 1px solid #282e3b; background: #090c11; border-radius: 10px; padding: 12px;
}
.right { min-width: 0; display: flex; flex-direction: column; background: #0b0e14; }
.preview-toolbar {
  min-height: 64px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 16px; border-bottom: 1px solid #252936;
}
.preview-toolbar > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.preview-toolbar span { color: #788196; font-size: 11px; }
.modes { display: flex; gap: 7px; }
.modes button { padding: 7px 10px; font-size: 12px; }
.stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 22px; overflow: auto; }
iframe {
  width: min(100%, 1440px); height: min(100%, 900px); min-height: 520px;
  border: 1px solid #32394b; border-radius: 12px; background: white; transition: width .18s ease, height .18s ease;
}
.bottom {
  min-height: 38px; display: flex; align-items: center; gap: 18px; padding: 0 16px;
  border-top: 1px solid #252936; color: #798297; font-size: 11px;
}
@media (max-width: 820px) {
  .workspace { grid-template-columns: 1fr; }
  .left { border-right: 0; border-bottom: 1px solid #252936; max-height: 42vh; }
  .preview-toolbar { align-items: flex-start; flex-direction: column; }
}

.section-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px;
}
.section-tabs button, .library-item {
  border: 1px solid #2a3040; border-radius: 8px; background: #121722;
  color: #a8b1c2; padding: 8px 9px; cursor: pointer;
}
.section-tabs button { font-size: 11px; }
.section-tabs button[aria-pressed="true"], .library-item[aria-pressed="true"] {
  border-color: #6c7cff; background: #232a42; color: #eef1ff;
}
[data-section-panel][hidden] { display: none; }
.panel-card {
  display: grid; gap: 8px; padding: 12px; border: 1px solid #282e3b;
  border-radius: 10px; background: #10141d;
}
.planning-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid #232936; font-size: 12px;
}
.planning-row:last-child { border-bottom: 0; }
.planning-row b {
  border-radius: 999px; padding: 4px 7px; font-size: 9px; letter-spacing: .06em;
  background: #1a2130; color: #aab3c5;
}
.planning-row b[data-status="done"] { color: #7be6a4; }
.planning-row b[data-status="progress"] { color: #82a7ff; }
.planning-row b[data-status="validation"] { color: #f2c879; }
.library-item { width: 100%; text-align: left; font-size: 12px; }

.conversation{border-top:1px solid #252936;background:#0d1016;padding:12px 14px;display:grid;gap:10px}
.conversation-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.conversation-head>div{display:flex;align-items:baseline;gap:10px}.conversation-head span,.voice-status{font-size:11px;color:#7f8798}
.conversation-head select{max-width:240px;border:1px solid #2a3040;border-radius:9px;background:#161a23;color:#e9edf6;padding:8px 10px}
.conversation-log{min-height:54px;max-height:150px;overflow:auto;padding:4px 2px;display:grid;gap:7px}
.assistant-message,.user-message{width:fit-content;max-width:82%;padding:8px 11px;border-radius:12px;background:#171c26;font-size:13px;line-height:1.45}
.user-message{justify-self:end;background:#232a42}
.composer{display:grid;grid-template-columns:42px 1fr 42px 42px auto;gap:7px;align-items:end}
.composer textarea{resize:none;min-height:44px;max-height:120px;border:1px solid #303748;border-radius:12px;background:#12161e;color:#f1f4fb;padding:11px 12px;font:inherit;outline:none}
.composer textarea:focus{border-color:#6c7cff}.composer button{min-height:44px;border:1px solid #2a3040;border-radius:10px;background:#161a23;color:#e9edf6;cursor:pointer;padding:0 12px}
.composer #sendButton{background:#5b67e8;border-color:#6974ef;font-weight:650}.composer button[aria-pressed="true"]{background:#205f4d;border-color:#45a986}
@media(max-width:700px){.workspace{grid-template-columns:1fr}.left{display:none}.right{min-width:0}.conversation{padding:10px}.composer{grid-template-columns:40px 1fr 40px 40px}.composer #sendButton{grid-column:2/5}.conversation-head{align-items:flex-start;flex-direction:column}.conversation-head select{max-width:100%;width:100%}}

/* MOK VS conversational composer — ChatGPT-like interaction, MOK VS visual identity */
.conversation{padding:18px 20px 16px;background:linear-gradient(180deg,#0b0e14 0%,#0a0d12 100%);border-top:1px solid #202530}
.conversation-shell{width:min(900px,100%);margin:0 auto;display:grid;gap:10px}
.conversation-head{padding:0 4px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.conversation-identity{display:flex;align-items:center;gap:9px}.conversation-identity strong{font-size:13px}.conversation-identity span{font-size:11px;color:#7e8798}
.model-pill{display:flex;align-items:center;gap:7px;color:#7f8798;font-size:10px}.model-pill select{appearance:none;border:0;background:transparent;color:#b8c0cf;padding:4px 20px 4px 2px;font:inherit;font-size:11px;cursor:pointer}
.conversation-log{min-height:44px;max-height:180px;padding:2px 4px 4px;overflow:auto;display:grid;gap:8px}
.assistant-message,.user-message{max-width:78%;width:fit-content;padding:9px 12px;border-radius:16px;font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.assistant-message{background:transparent;color:#d9dee8;padding-left:2px}.user-message{justify-self:end;background:#222733;color:#f2f4f8}
.composer{display:flex;flex-direction:column;gap:8px;padding:11px 12px 10px;border:1px solid #303640;border-radius:24px;background:#171a20;box-shadow:0 8px 30px #0000002b;transition:border-color .15s,box-shadow .15s}
.composer:focus-within{border-color:#4b5361;box-shadow:0 10px 36px #0000003d}.composer textarea{width:100%;min-height:34px;max-height:150px;padding:5px 5px 2px;border:0;outline:0;resize:none;background:transparent;color:#f1f3f6;font:15px/1.45 Inter,ui-sans-serif,system-ui}.composer textarea::placeholder{color:#8b919c}
.composer-tools{display:flex;align-items:center;justify-content:space-between;gap:8px}.composer-tools-left,.composer-tools-right{display:flex;align-items:center;gap:6px}.composer button{border:0;cursor:pointer}
.icon-button{width:34px;height:34px;border-radius:50%!important;background:transparent!important;color:#cbd0d8!important;font-size:22px;padding:0!important;display:grid;place-items:center}.icon-button:hover,.tool-label:hover{background:#242830!important}
.tool-label{min-height:32px!important;padding:0 9px!important;border-radius:16px!important;background:transparent!important;color:#aeb5c1!important;font-size:11px}
.voice-button{min-height:34px!important;padding:0 11px!important;border-radius:18px!important;background:#242830!important;color:#e6e9ee!important;display:flex;align-items:center;gap:7px;font-size:11px}.voice-wave{font-size:8px;letter-spacing:1px}.voice-button[aria-pressed=true]{background:#e8ebef!important;color:#11151b!important}
.send-button{width:34px;height:34px;min-height:34px!important;padding:0!important;border-radius:50%!important;background:#e9ecf0!important;color:#11151b!important;font-size:20px;font-weight:700;display:grid;place-items:center}.send-button:hover{background:#fff!important}
.voice-status{padding:0 6px;text-align:center;color:#656d7b;font-size:10px}
@media(max-width:700px){.conversation{padding:12px 10px}.conversation-head{align-items:center;flex-direction:row}.conversation-identity span{display:none}.model-pill>span{display:none}.model-pill select{max-width:150px}.conversation-log{max-height:120px}.composer{border-radius:20px}.voice-button span:last-child{display:none}.voice-button{width:34px;padding:0!important;justify-content:center}.assistant-message,.user-message{max-width:90%}}

/* Three-pane MOK VS workspace */
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(420px,1fr) minmax(420px,1.05fr);background:#0b0d11}
.left{padding:12px 10px;border-right:1px solid #23262d;background:#101216;overflow:auto;display:flex;flex-direction:column;gap:12px;transition:width .18s}
.rail-head{display:flex;align-items:center;gap:9px;padding:5px 4px}.rail-head>div{display:grid}.rail-head small{font-size:9px;color:#707783;letter-spacing:.14em}.rail-toggle{width:34px;height:34px;border:0;border-radius:9px;background:transparent;cursor:pointer}.rail-toggle:hover{background:#1d2026}
.new-project{width:100%;text-align:left;border:1px solid #2b2f37;border-radius:10px;background:#181b21;padding:10px;cursor:pointer}.primary-nav{display:grid;gap:3px}.primary-nav button,.rail-section button{border:0;border-radius:8px;background:transparent;color:#bbc1cb;text-align:left;padding:8px 9px;cursor:pointer}.primary-nav button:hover,.rail-section button:hover,.primary-nav button[aria-pressed=true]{background:#1c1f25;color:#fff}.rail-section{display:grid;gap:2px}.rail-section small{padding:5px 9px;color:#626976;font-size:9px}.rail-spacer{flex:1}.rail-bottom{border-top:1px solid #23262d;padding-top:8px}
.chat-column{min-width:0;display:flex;flex-direction:column;background:#0e1014;border-right:1px solid #23262d}.chat-topbar{height:58px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:0 15px;border-bottom:1px solid #23262d}.chat-topbar>div{display:flex;align-items:baseline;gap:8px}.chat-topbar span{font-size:10px;color:#737b89}.preview-toggle{border:1px solid #30343d;border-radius:9px;background:#181b21;padding:7px 10px;cursor:pointer}
.chat-log{flex:1;max-height:none;min-height:0;padding:28px clamp(18px,5vw,70px);align-content:start}.welcome-message{display:grid;gap:5px;margin:auto;max-width:520px;text-align:center;width:100%;padding-top:12vh}.welcome-message strong{font-size:22px}.welcome-message span{color:#7d8490}
.conversation{border-top:0;padding:12px clamp(14px,4vw,56px) 16px;background:linear-gradient(180deg,#0e101400,#0e1014 22%)}.conversation-shell{max-width:760px}.preview-column{min-width:0;display:flex;flex-direction:column;background:#0a0c10;transition:opacity .18s}.preview-column .stage{flex:1;padding:14px}.preview-column iframe{min-height:420px;height:100%;border-radius:10px}.preview-footer{height:34px;border-top:1px solid #23262d;display:flex;align-items:center;gap:15px;padding:0 12px;color:#707783;font-size:10px}
.workspace.preview-hidden{grid-template-columns:250px minmax(0,1fr)}.workspace.preview-hidden .preview-column{display:none}.workspace.rail-collapsed{grid-template-columns:58px minmax(420px,1fr) minmax(420px,1.05fr)}.workspace.rail-collapsed.preview-hidden{grid-template-columns:58px 1fr}.workspace.rail-collapsed .left{padding-inline:7px}.workspace.rail-collapsed .left span,.workspace.rail-collapsed .rail-head>div,.workspace.rail-collapsed .rail-section{display:none}.workspace.rail-collapsed .new-project,.workspace.rail-collapsed .primary-nav button{text-align:center;padding-inline:0}
.preview-column.fullscreen-pane{position:fixed;inset:0;z-index:50;background:#090b0f}.preview-column.fullscreen-pane .stage{padding:12px}.preview-column.fullscreen-pane iframe{width:100%;height:100%;max-width:none}
.settings-dialog{width:min(760px,calc(100% - 28px));border:1px solid #303540;border-radius:18px;background:#12151b;color:#e9edf6;padding:22px;box-shadow:0 30px 90px #000a}.settings-dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.settings-dialog h2{margin:0 0 5px}.settings-dialog p{margin-bottom:18px}.dialog-close{float:right;border:0;background:transparent;color:#fff;font-size:24px;cursor:pointer}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.settings-grid button{display:grid;text-align:left;border:1px solid #2d323d;border-radius:11px;background:#181c24;padding:12px;color:#eef1f5;cursor:pointer}.settings-grid small{color:#767f8e;margin-top:3px}
@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(390px,1fr) minmax(360px,.9fr)}}@media(max-width:820px){.workspace,.workspace.preview-hidden{grid-template-columns:58px 1fr}.left{padding-inline:7px}.left span,.rail-head>div,.rail-section{display:none}.new-project,.primary-nav button{text-align:center;padding-inline:0}.preview-column{display:none}.chat-column{border-right:0}.chat-topbar{grid-template-columns:1fr auto}.model-pill{display:none}.settings-grid{grid-template-columns:1fr}}

/* Responsive preview viewport: the rendered app always fits its pane */
.stage{min-width:0;min-height:0;overflow:hidden;position:relative}
.preview-column iframe{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain}
.preview-column[data-viewport="mobile"] .stage{padding:14px 20%}.preview-column[data-viewport="tablet"] .stage{padding:14px 8%}.preview-column[data-viewport="desktop"] .stage{padding:14px}
.preview-column.fullscreen-pane .stage{padding:10px}.preview-column.fullscreen-pane iframe{width:100%;height:100%;max-width:none;min-height:0}

/* Viewport lock: MOK VS behaves like a desktop studio, not a scrolling document */
html,body{width:100%;height:100%;overflow:hidden}
body{min-height:0}
.studio{height:100dvh;min-height:0;overflow:hidden}
.topbar{flex:0 0 58px}
.workspace{flex:1;height:calc(100dvh - 58px);min-height:0;overflow:hidden}
.left,.chat-column,.preview-column{height:100%;min-height:0;overflow:hidden}
.left{overflow-y:auto;overscroll-behavior:contain}
.chat-column{position:relative}
.chat-topbar{flex:0 0 58px}
.chat-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:18px}
.conversation{flex:0 0 auto;position:relative;z-index:4}
.preview-column{min-width:0;max-width:100%;overflow:hidden}
.preview-toolbar{flex:0 0 auto;min-width:0}
.preview-column .stage{flex:1;width:100%;min-width:0;min-height:0;overflow:hidden;display:flex;align-items:stretch;justify-content:stretch;padding:12px}
.preview-column iframe{flex:1 1 auto;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;border:1px solid #32394b;border-radius:10px;transform-origin:top left}
.preview-footer{flex:0 0 34px}
.preview-column[data-viewport="mobile"] .stage,.preview-column[data-viewport="tablet"] .stage,.preview-column[data-viewport="desktop"] .stage{padding:12px}
@media(max-height:700px){.chat-log{padding-top:14px}.welcome-message{padding-top:3vh}.conversation{padding-bottom:8px}.composer{padding-block:8px}}

.capability-bar{flex:0 0 auto;display:flex;gap:6px;padding:8px 14px;border-bottom:1px solid #23262d;background:#0d0f13;overflow-x:auto;scrollbar-width:none}.capability-bar::-webkit-scrollbar{display:none}.capability-bar button{white-space:nowrap;border:1px solid #2c313a;border-radius:999px;background:#15181e;color:#9fa7b4;padding:6px 10px;font-size:10px;cursor:pointer}.capability-bar button[aria-pressed=true]{background:#eef1f4;color:#11151b;border-color:#eef1f4}.capability-bar button[data-state="configured"]::after{content:" · prêt à qualifier";color:#d3a65d}.capability-bar button[data-state="unavailable"]{opacity:.55}.capability-bar button[data-state="available"]::after{content:" · connecté";color:#55c990}
.media-result{display:grid;gap:8px;max-width:min(560px,90%);padding:10px 12px;border:1px solid #2a3039;border-radius:14px;background:#13171d}.media-result img,.media-result video{max-width:100%;border-radius:10px}.media-result audio{width:100%}.media-result a{color:#9eb7ff}
@media(max-width:820px){.capability-bar{padding-inline:10px}}

/* Real task progress: values come from AI Core / RunPod worker progress, never decorative animation. */
.task-progress{justify-self:end;width:min(420px,78%);margin-top:-2px;margin-bottom:7px;padding:7px 10px;border-radius:10px;background:#11151c;border:1px solid #252b35}
.task-progress-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px;color:#9ba4b3}
.task-progress-head strong{font-variant-numeric:tabular-nums;color:#e7ebf1}
.task-progress-track{height:4px;margin:6px 0 5px;border-radius:999px;overflow:hidden;background:#252b34}
.task-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:currentColor;color:#dfe5ef;transition:width .18s linear}
.task-progress small{display:block;color:#697382;font-size:9px;line-height:1.35}
.task-progress[data-status="failed"],.task-progress[data-status="cancelled"],.task-progress[data-status="timed_out"]{border-color:#6d3238}
.task-progress[data-status="completed"]{border-color:#285643}
@media(max-width:700px){.task-progress{width:min(90%,420px)}}