/*
 * DeepILM workshops — visual adaptation of the supplied studio.
 * The application keeps its real forms, generated results and API behaviour.
 * Load after the legacy stylesheet and studio-tokens.css.
 */

/* Bridge the application palette to the seven shared studio themes. */
:root {
  --studio-bg: var(--bg);
  --studio-muted: var(--muted);
  --surface: var(--panel);
  --surface-2: var(--panel-alt);
  --surface-3: var(--field);
  --surface-code: var(--field);
  --ink: var(--text);
  --ink-soft: var(--text);
  --muted-2: var(--muted);
  --muted-3: var(--muted);
  --faint: var(--dim);
  --line-strong: var(--line);
  --brand: var(--accent);
  --brand-ink: var(--on-accent);
  --brand-text: var(--accent);
  --brand-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --hero: linear-gradient(120deg, var(--panel-alt), var(--panel));
  --hero-ink: var(--text);
  --bubble-me: color-mix(in srgb, var(--accent) 13%, var(--panel));
  --ok: var(--success);
  --online: var(--success);
  --warn: var(--danger);
  --warn-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --shimmer: var(--glow);
  --nebula-bg: var(--bg);
  --nebula-panel: var(--panel);
  --nebula-panel-strong: var(--panel);
  --nebula-line: var(--line);
  --nebula-text: var(--text);
  --nebula-muted: var(--muted);
  --nebula-violet: var(--accent);
  --nebula-pink: var(--accent-2);
  --nebula-cyan: var(--accent);
  --glow-cyan: var(--accent);
  --cobalt: var(--accent-2);
  --f-llm: var(--accent);
  --f-image: var(--accent);
  --f-video: var(--accent-2);
  --f-3d: var(--accent);
  --f-audio: var(--accent-2);
  --paper: var(--text);
  --bg-rgb: 3, 16, 29;
  --surface-rgb: 2, 18, 30;
  --ink-rgb: 240, 248, 255;
  --brand-rgb: 22, 227, 240;
  --brand-ink-rgb: 0, 33, 45;
  --muted-rgb: 175, 197, 213;
  --bubble-rgb: 4, 57, 73;
  --hero2-rgb: 0, 82, 109;
  --shadow-rgb: 0, 0, 0;
  --shade-rgb: 0, 0, 0;
  --surface-code-rgb: 1, 15, 27;
  --f-llm-rgb: 22, 227, 240;
  --f-video-rgb: 0, 167, 230;
  --f-3d-rgb: 22, 227, 240;
  --f-audio-rgb: 146, 167, 240;
  --online-rgb: 104, 228, 179;
  --warn-rgb: 255, 147, 144;
}
html[data-theme="aurore"] {
  --bg-rgb: 2, 25, 20; --surface-rgb: 2, 28, 25;
  --ink-rgb: 237, 255, 247; --brand-rgb: 86, 241, 193;
  --brand-ink-rgb: 0, 46, 34; --muted-rgb: 178, 214, 200;
  --f-llm-rgb: 86, 241, 193; --f-video-rgb: 19, 192, 173; --f-3d-rgb: 86, 241, 193;
}
html[data-theme="crepuscule"] {
  --bg-rgb: 28, 16, 28; --surface-rgb: 28, 16, 35;
  --ink-rgb: 255, 243, 250; --brand-rgb: 245, 163, 231;
  --brand-ink-rgb: 52, 18, 51; --muted-rgb: 213, 184, 205;
  --f-llm-rgb: 245, 163, 231; --f-video-rgb: 255, 169, 118; --f-3d-rgb: 245, 163, 231;
}
html[data-theme="blanc"] {
  --bg-rgb: 237, 246, 252; --surface-rgb: 255, 255, 255;
  --ink-rgb: 11, 36, 65; --brand-rgb: 0, 119, 143;
  --brand-ink-rgb: 255, 255, 255; --muted-rgb: 70, 97, 119;
  --f-llm-rgb: 0, 119, 143; --f-video-rgb: 0, 115, 175; --f-3d-rgb: 0, 119, 143;
  --shade-rgb: 200, 218, 230; --amber: #9a5e16;
}
html[data-theme="ivoire"] {
  --bg-rgb: 245, 239, 223; --surface-rgb: 255, 250, 238;
  --ink-rgb: 47, 44, 30; --brand-rgb: 139, 105, 44;
  --brand-ink-rgb: 255, 253, 245; --muted-rgb: 109, 100, 77;
  --f-llm-rgb: 139, 105, 44; --f-video-rgb: 179, 144, 66; --f-3d-rgb: 139, 105, 44;
  --shade-rgb: 219, 208, 181; --amber: #895c12;
}
html[data-theme="studio-dark"] {
  --bg-rgb: 22, 24, 22; --surface-rgb: 29, 32, 29;
  --ink-rgb: 240, 241, 234; --brand-rgb: 206, 218, 186;
  --brand-ink-rgb: 27, 37, 23; --muted-rgb: 179, 187, 176;
  --f-llm-rgb: 206, 218, 186; --f-video-rgb: 172, 187, 160; --f-3d-rgb: 206, 218, 186;
}
html[data-theme="studio-light"] {
  --bg-rgb: 246, 245, 240; --surface-rgb: 255, 254, 250;
  --ink-rgb: 37, 41, 31; --brand-rgb: 84, 104, 67;
  --brand-ink-rgb: 255, 255, 255; --muted-rgb: 99, 107, 91;
  --f-llm-rgb: 84, 104, 67; --f-video-rgb: 115, 135, 93; --f-3d-rgb: 84, 104, 67;
  --shade-rgb: 218, 221, 209; --amber: #846018;
}

html { min-width: 320px; min-height: 100%; background: var(--bg); }
html body {
  margin: 0; padding: 0; display: block; min-width: 320px;
  color: var(--text); background: var(--bg);
  font: 14px/1.5 var(--font-ui, Inter, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
body::before { background-image: var(--world); background-position: center; background-size: cover; opacity: var(--world-opacity,1); }
body::after { background: linear-gradient(180deg, transparent 55%, var(--bg)); opacity: .3; }
body, .phone, main, .screen, .card, .screen > * { min-width: 0; }
[hidden], .screen[hidden], nav.tabbar[hidden] { display: none !important; }
button, input, textarea, select { font-family: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--accent); text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
img, video, audio, canvas { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }
::selection { color: var(--on-accent); background: var(--accent); }
* { scrollbar-color: var(--line) transparent; scrollbar-width: thin; }

/* Airy header, illustrated floating sidebar and full width work area. */
html body > .phone {
  width: 100%; max-width: none; height: var(--app-h, 100dvh);
  min-height: 0; max-height: none; overflow: hidden;
  display: grid; grid-template-columns: calc(var(--side) + 40px) minmax(0, 1fr);
  grid-template-rows: var(--top) minmax(0, 1fr);
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.phone > #appTopbar {
  grid-column: 1 / -1; grid-row: 1; gap: 12px; min-width: 0;
  padding: 0 24px; height: var(--top); min-height: var(--top);
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(var(--panel), color-mix(in srgb, var(--panel) 84%, transparent));
  backdrop-filter: blur(14px); z-index: 35;
}
.studio-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; width: 218px; color: var(--text); text-decoration: none; }
.studio-brand img { width: 36px; height: 52px; object-fit: contain; }
.studio-brand > span { font-size: 25px; line-height: 1.1; letter-spacing: -.8px; }
.studio-brand small { display: block; margin-top: 6px; color: var(--accent); font-size: 8px; font-weight: 600; letter-spacing: 1.7px; }
.phone > #appTopbar h1 { color: var(--text); font-size: 22px; letter-spacing: -.6px; text-transform: none; }
.studio-search {
  display: flex; align-items: center; gap: 9px; flex: 1 1 280px;
  min-width: 100px; max-width: 470px; height: 40px; margin-right: auto;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px;
  color: var(--muted); background: var(--field); text-align: left; font: inherit; font-size: 12px;
}
.studio-search svg { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.studio-search span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.studio-search kbd { margin-left: auto; flex: 0 0 auto; padding: 2px 5px; border: 1px solid var(--hair); border-radius: 4px; font: 10px monospace; }
.studio-search:hover { border-color: var(--accent); }
#appTopbar #topbarRecharge, #appTopbar #langSelect, #appTopbar #themeSelect, #appTopbar #guideToggleApp {
  margin-right: 0 !important; height: 38px; min-height: 38px; flex-shrink: 0;
  background: var(--field) !important; color: var(--muted) !important;
  border-color: var(--line) !important; font-size: 11px !important;
}
#appTopbar #guideToggleApp { width: 38px !important; }
#appTopbar #themeSelect { max-width: 144px; padding: 6px 11px !important; }
#appTopbar #langSelect { padding: 6px 7px !important; }
#appTopbar #pillBalance { margin-left: 0; white-space: nowrap; padding: 8px 12px; border: 1px solid var(--line); border-radius: 50px; color: var(--text); background: var(--field); font-size: 12px; font-weight: 600; }
.studio-menu-toggle { display: none; }
.studio-app .studio-theme-trigger { height: 38px; padding: 7px 11px; color: var(--muted); background: var(--field); font-size: 11px; }
.phone > main { grid-column: 2; grid-row: 2; padding: 14px 22px 28px 0; overflow-x: clip; overflow-y: auto; background: transparent; }
nav.tabbar#tabbar {
  grid-column: 1; grid-row: 2; width: var(--side); margin: 12px 20px 20px;
  padding: 11px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 5px; overflow: clip;
  background: linear-gradient(var(--panel) 60%, color-mix(in srgb, var(--panel) 75%, transparent));
  box-shadow: var(--shadow); z-index: 30;
}
nav.tabbar#tabbar > button {
  display: flex; align-items: center; justify-content: flex-start; gap: 13px;
  flex: 0 0 auto; width: 100%; min-height: 44px; padding: 9px 10px;
  border: 1px solid transparent; border-radius: 10px;
  color: var(--muted); background: transparent; text-align: start;
  font-size: 12px; font-weight: 400; transition: color .16s, background .16s, border-color .16s;
}
nav.tabbar#tabbar > button svg { width: 21px; height: 21px; flex-shrink: 0; }
nav.tabbar#tabbar > button:hover { color: var(--accent); background: var(--panel-alt); }
nav.tabbar#tabbar > button[aria-selected="true"] {
  border-color: var(--line); color: var(--accent); font-weight: 700;
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 15%, var(--field)), var(--field));
  box-shadow: inset 2px 0 var(--accent), 0 0 18px var(--glow);
}
#tabInk { display: none; }
.studio-sidebar-footer { margin-top: auto; padding-top: 15px; color: var(--muted); }
.studio-side-garden { min-height: 150px; border-radius: 10px; overflow: hidden; background-image: linear-gradient(var(--panel) 0%, transparent 60%), var(--hub); background-size: cover; background-position: center; }
.studio-side-garden p { padding: 12px 8px; margin: 0; color: var(--text); font: italic 15px/1.45 Georgia, serif; }
.studio-side-garden em { color: var(--accent); }
.studio-sidebar-footer > small { display: block; padding: 11px 4px 2px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.studio-sidebar-footer > a { display: block; padding: 12px 4px 0; font-size: 10px; color: var(--muted); text-decoration: none; }
.studio-sidebar-footer > a:hover { color: var(--accent); }
.screen { max-width: 1720px; margin: 0 auto; }

/* Shared workshop hierarchy. */
.studio-page-hero, .chain-head {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; min-height: 124px;
  padding: 21px 24px; margin: 0 0 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); grid-column: 1 / -1;
}
.studio-page-hero::before, .chain-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, var(--panel) 33%, color-mix(in srgb, var(--panel) 60%, transparent) 62%, transparent), var(--banner);
  background-size: cover; background-position: center 43%; opacity: .65;
}
.studio-page-hero > *, .chain-head > * { position: relative; }
.studio-page-hero .eyebrow, .studio-page-hero > div > span, .studio-kicker, .chain-kicker {
  display: block; color: var(--accent); margin: 0 0 8px; font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.studio-page-hero h1, .studio-page-hero h2, .chain-head h2 {
  margin: 0; color: var(--text); font: 700 clamp(25px, 2.3vw, 37px)/1.15 var(--headline);
  letter-spacing: -1px;
}
.studio-page-hero p, .chain-head p { max-width: 650px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.studio-page-hero + .subtabs { margin-top: 0; }
.card { padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: var(--panel); box-shadow: var(--shadow); }
.card h2 { color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: -.35px; line-height: 1.3; margin: 0 0 7px; }
.card p.hint, .hint, label, .footnote { color: var(--muted); }
.card p.hint { font-size: 12px; line-height: 1.5; margin: 0 0 14px; }
label { font-size: 11px; line-height: 1.45; }
input, select, textarea {
  min-width: 0; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); background: var(--field); font-size: 13px; line-height: 1.5;
  padding: 10px 12px; transition: border-color .16s, box-shadow .16s;
}
select { min-height: 40px; }
option, optgroup { color: var(--text); background: var(--bg); }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 2px var(--glow); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input[type="range"] { accent-color: var(--accent); min-width: 0; }
input[type="file"] { max-width: 100%; font-size: 12px; }
button.btn, button.chain-run {
  min-height: 41px; border: 1px solid var(--accent); border-radius: 8px;
  padding: 10px 13px; color: var(--on-accent);
  background: linear-gradient(105deg, var(--accent), var(--accent-2));
  font-size: 12px; font-weight: 700; box-shadow: 0 5px 20px var(--glow);
}
button.btn.sec { border-color: var(--line); background: var(--field); color: var(--text); font-size: 12px; box-shadow: none; }
button.btn:hover, button.chain-run:hover { filter: brightness(1.06); }
button.btn.sec:hover { border-color: var(--accent); background: var(--panel-alt); }
.empty, .history-empty { padding: 28px 16px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.msg { border: 1px solid transparent; font-size: 12px; }
.msg.err { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.result-action, .home-promo-action { color: var(--text); border-color: var(--line); background: var(--field); }
.result-actions { flex-wrap: wrap; }
.dropzone { border-color: var(--line); border-width: 1px; border-radius: 9px; background-size: 16px 16px; padding: 18px 12px; }
.dropzone:hover, .dropzone.dragover { background-color: var(--glow); border-color: var(--accent); }
.dropzone strong { color: var(--text); }
.dropzone svg { stroke: var(--accent); }
.subtabs { border-radius: 10px; background: var(--panel); border-color: var(--line); padding: 3px; }
.subtab { font-size: 12px; min-height: 35px; padding: 6px 14px; }
.subtab[aria-selected="true"] { background: var(--brand-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }

/* Generators: a real controls / preview / recent work arrangement. */
#s-image.atelier-split, #s-video.atelier-split, #s-mesh3d.atelier-split, #s-audio.atelier-split {
  display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(180px, 238px);
  gap: 14px; max-width: 1720px; margin: 0 auto; align-items: start;
}
.atelier-split > .studio-page-hero { margin-bottom: 0; }
.atelier-split > .card { margin-bottom: 0; min-width: 0; }
.atelier-split > .atelier-resultat { min-height: 450px; display: flex; flex-direction: column; }
.atelier-split > .atelier-recentes { width: auto; max-height: calc(var(--app-h, 100dvh) - 260px); overflow: auto; }
.atelier-split > .atelier-recentes.recentes-repliees { width: auto; max-height: none; }
.atelier-split:has(> .recentes-repliees) { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(140px, 180px); }
.atelier-split .atelier-resultat > h2 { display: flex; align-items: center; min-height: 24px; margin-bottom: 12px; }
.atelier-split .atelier-placeholder {
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center;
  min-height: 345px; padding: 30px 22px; margin-bottom: 0; border: 1px dashed var(--line);
  border-radius: 11px; text-align: center; background: radial-gradient(ellipse at 50% 40%, var(--glow), transparent 65%);
}
.atelier-split .atelier-placeholder::before {
  content: ""; display: block; width: 48px; height: 48px; margin-bottom: 18px;
  background: var(--accent); opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M25 5C26 16 32 22 43 23C32 24 26 30 25 41C24 30 18 24 7 23C18 22 24 16 25 5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M25 5C26 16 32 22 43 23C32 24 26 30 25 41C24 30 18 24 7 23C18 22 24 16 25 5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.atelier-resultat:has(.imgbox:not(:empty)) .atelier-placeholder,
.atelier-resultat:has(.family-result:not(:empty)) .atelier-placeholder { display: none; }
.atelier-resultat .imgbox, .atelier-resultat .family-result { min-width: 0; width: 100%; margin-top: 0; }
.atelier-resultat .imgbox img, .atelier-resultat .imgbox video { width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 10px; }
.creation-screen[data-family] { --family-color: var(--accent); --family-glow: var(--glow); }
.family-controls { border-color: var(--line); background: var(--panel); }
.family-controls::before { display: none; }
.family-controls h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -.35px; line-height: 1.3; }
.family-screen-kicker { color: var(--accent); font-size: 9px; }
.family-result { border-color: var(--line); background: var(--field); }
.mesh-viewer { border-color: var(--line); background: radial-gradient(circle at 50% 36%, var(--glow), transparent 65%), var(--field); }
.mesh-viewer-stage { min-height: 340px; }
.mesh-viewer canvas { min-height: 340px; }
.atelier-recentes h2 { font-size: 13px; }
.atelier-recentes .hint { font-size: 11px; }
.atelier-recentes > h2 { display: flex; align-items: center; justify-content: space-between; gap: 7px; flex-wrap: wrap; }
.atelier-recentes > h2 .btn { min-height: 30px; padding: 5px 9px !important; margin-left: 0 !important; font-size: 10px !important; }
/* The server-populated recent grids carry an inline desktop minimum. */
.atelier-recentes > [id^="recent"] { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)) !important; }
.atelier-recentes .galerie-grid { grid-template-columns: repeat(auto-fill, minmax(min(175px, 100%), 1fr)); }

/* Chained generation keeps every step and result visible. */
.chain-workbench { --chain-color: var(--accent); --chain-glow: var(--glow); --panel-raised: var(--panel); --paper: var(--text); overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.chain-balance { min-width: 146px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); padding: 12px 16px; }
.chain-balance strong { font-size: 21px; font-weight: 600; }
.chain-layout { grid-template-columns: minmax(0, 1.1fr) minmax(310px, 1fr); gap: 14px; padding: 0; align-items: stretch; }
.chain-canvas, .chain-controls { border-radius: var(--radius); background-color: var(--panel); box-shadow: var(--shadow); }
.chain-canvas { min-height: 550px; padding: 18px; background-image: radial-gradient(circle at 50% 38%, var(--glow), transparent 56%); }
.chain-canvas::before, .chain-canvas::after { border-color: var(--hair); }
.chain-controls { padding: 16px; }
.chain-canvas-top strong { font-size: 16px; font-weight: 600; }
.chain-section-title { padding-bottom: 10px; }
.chain-section-title strong { font-size: 13px; font-weight: 600; }
.chain-empty { min-height: 430px; padding: 24px; align-content: center; }
.chain-empty-orb { width: 65px; height: 65px; border: 1px solid var(--accent); background: radial-gradient(circle at 35% 25%, var(--glow), var(--field)); box-shadow: 0 0 30px var(--glow), 0 0 0 9px var(--glow); }
.chain-empty-orb::after { content: "✦"; display: block; color: var(--accent); font-size: 32px; line-height: 63px; }
.chain-empty strong { font-size: 15px; font-weight: 600; }
.chain-field { gap: 5px; margin-top: 12px; }
.chain-field input, .chain-field select, .chain-field textarea { background: var(--field); border-radius: 8px; color: var(--text); font-size: 12px; }
.chain-field > span { font-size: 10px; letter-spacing: .6px; }
.chain-step-card, .chain-input-card { padding: 12px; border-radius: 11px; background: var(--panel-alt); border-color: var(--line); }
.chain-step-card:focus-within, .chain-input-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--glow); }
.chain-step-heading strong { font-size: 12px; font-weight: 600; }
.chain-step-heading small { font-size: 10px; }
.chain-stage { border-radius: 11px; background: var(--field); }
.chain-stage.is-failed .chain-stage-status { color: var(--danger); }
.chain-flow-pill { background: var(--field); white-space: normal; font-size: 10px; }
.chain-estimate { background: var(--brand-soft); border-color: var(--line); border-radius: 10px; }
.chain-estimate strong { font-size: 19px; }
.chain-run:hover { color: var(--on-accent); background: var(--accent); }
.chain-footer { padding: 12px 4px 0; border: 0; font-size: 10px; }

/* Conversation, code and film use the same precise panel language. */
#s-chat, #s-chain, #s-film, #s-code, #s-local { max-width: 1720px; }
.chat-workspace { grid-template-columns: 220px minmax(0, 1fr); min-height: 640px; border-radius: var(--radius); background: var(--panel); }
.chat-history-panel { background: var(--panel); border-color: var(--line); }
.chat-history-head strong { font-size: 17px; font-weight: 600; }
.chat-history-new { background: linear-gradient(105deg, var(--accent), var(--accent-2)); color: var(--on-accent); border-color: var(--accent); min-height: 39px; font-size: 11px; }
.chat-history-new:hover { background: var(--accent); color: var(--on-accent); }
.chat-history-search { background: var(--field); font-size: 12px; }
.chat-history-note { font-size: 11px; }
.chat-main { padding: 16px; }
.chat-main-head { border-color: var(--hair); }
.chat-main-title strong { color: var(--text); }
.chat-main > .card { border-radius: 11px; background: var(--field); box-shadow: none; }
.chat-generation-card { background: var(--panel-alt); }
.chat-generation-head strong { font-size: 12px; }
.chat-mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chat-mode-grid:has(.chat-mode[data-chat-mode="mesh3d"]:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chat-mode { border-radius: 8px; background: var(--panel); }
.chat-mode-copy small { font-size: 10px; }
.chat-mode select { background: var(--field); min-height: 32px; font-size: 11px; }
.chat-log, .chat { min-width: 0; }
#chatLog { min-height: 250px; overflow-anchor: none; }
#chatLog > .empty:only-child {
  min-height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  border: 1px solid var(--hair); border-radius: 11px; padding: 30px;
  background-image: linear-gradient(var(--panel) 5%, color-mix(in srgb, var(--panel) 80%, transparent)), var(--world);
  background-size: cover; background-position: center; color: var(--text); font-size: 15px;
}
.bubble { font-size: 13px; border-radius: 12px; overflow-wrap: anywhere; }
.bubble.me { color: var(--text); background: var(--bubble-me); }
.bubble.ai, .typing { color: var(--text); background: var(--panel-alt); border-color: var(--line); }
.chat-code, .chat-inline-code { background: var(--field); border-color: var(--hair); }
.chat-save-head { gap: 12px; }
.chat-save-head .btn { max-width: 160px; }
.code-workspace { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 14px; }
.code-editor-card, .code-assist-card { padding: 16px; margin-bottom: 0; }
.code-toolbar h2 { font-size: 16px; }
.monaco-host { border-radius: 9px; background: var(--field); }
.code-assist-out { border-color: var(--line); background: var(--field); overflow-wrap: anywhere; }
.film-workspace { grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: 14px; }
.film-compose { position: static; }
.film-compose h2 { font: 700 24px/1.12 var(--headline); letter-spacing: -.8px; }
.film-shot { border-color: var(--line); background: var(--field); border-radius: 10px; }
.film-shot-head { flex-wrap: wrap; }
.film-chip { background: var(--field); border-color: var(--line); }
.pc-chat-toggle { color: var(--text); }
.pc-msg.tool, .pc-md-pre { background: var(--field); }
.pc-agent-card { background: var(--panel); border-color: var(--line); }

/* Account, gallery, welcome and native dialogs. */
#s-account { max-width: 1120px; }
#s-account .balance { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--hero); color: var(--text); }
.balance .amount { font-size: 35px; font-weight: 700; letter-spacing: -1px; }
.balance .sub { color: var(--muted); opacity: 1; }
.ledger { overflow-wrap: anywhere; }
.studio-gallery-grid, .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.studio-gallery-card { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); min-width: 0; }
.studio-gallery-card img, .studio-gallery-card video { width: 100%; aspect-ratio: 1.25; object-fit: cover; border-radius: 9px; }
.studio-gallery-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.studio-gallery-toolbar input { width: min(100%, 330px); }
.studio-gallery-empty { padding: 80px 24px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
#s-overview .atelier { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
#s-overview .atelier .app-topbar { background: var(--panel); border-color: var(--line); }
#s-overview .atelier .artboard { background-image: linear-gradient(180deg, color-mix(in srgb, var(--panel) 30%, transparent), var(--panel)), var(--world); border-color: var(--line); }
.home-promo-card { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
.home-promo-media { background: var(--field); }
.home-promo-copy strong { color: var(--text); }
.home-promo-copy p { color: var(--muted); }
dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid var(--line); border-radius: 20px; color: var(--text); background: var(--panel); box-shadow: var(--shadow); }
dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
#studioThemeDialog, .studio-theme-dialog { width: min(760px, calc(100vw - 32px)); padding: 24px; }
.studio-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.studio-dialog-head h2 { margin: 0; font-size: 24px; letter-spacing: -.6px; }
.studio-dialog-head p { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.studio-dialog-head button { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--field); }
.studio-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.studio-theme-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 7px; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--text); text-align: left; }
.studio-theme-card img { width: 100%; aspect-ratio: 1.72; object-fit: cover; border-radius: 7px; }
.studio-theme-card strong, .studio-theme-card > span { display: block; padding: 2px 4px 4px; font-size: 12px; }
.studio-theme-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 400; }
.studio-theme-card:hover { border-color: var(--accent); background: var(--panel-alt); }
.studio-theme-card[aria-pressed="true"], .studio-theme-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--glow); }
.studio-theme-card[aria-pressed="true"]::after, .studio-theme-card.is-active::after { content: "✓"; position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); background: var(--accent); font-size: 12px; }
html[data-theme^="studio-"] .studio-side-garden { min-height: 110px; background: var(--panel-alt); }
html[data-theme^="studio-"] .studio-page-hero::before,
html[data-theme^="studio-"] .chain-head::before { display: none; }
html[data-theme^="studio-"] .chain-empty-orb { box-shadow: none; }

/* Auth is still functional, but now follows the selected garden theme. */
html body.public-mode {
  --bg: inherit; --muted: inherit; --line: inherit; --line-strong: inherit;
  --surface: inherit; --surface-2: inherit; --surface-3: inherit; --surface-code: inherit;
  --ink: inherit; --ink-soft: inherit; --muted-2: inherit; --muted-3: inherit; --faint: inherit;
  --brand: inherit; --brand-text: inherit; --brand-ink: inherit; --brand-soft: inherit;
  --hero: inherit; --hero-ink: inherit; --bubble-me: inherit;
  --ok: inherit; --online: inherit; --warn: inherit; --warn-soft: inherit;
  --amber: inherit; --glow-cyan: inherit; --cobalt: inherit; --paper: inherit;
  --shadow: inherit; --shimmer: inherit;
  --f-llm: inherit; --f-image: inherit; --f-video: inherit; --f-3d: inherit; --f-audio: inherit;
  --brand-rgb: inherit; --brand-ink-rgb: inherit; --bubble-rgb: inherit; --hero2-rgb: inherit;
  --bg-rgb: inherit; --surface-rgb: inherit; --surface-code-rgb: inherit; --shadow-rgb: inherit;
  --ink-rgb: inherit; --muted-rgb: inherit; --warn-rgb: inherit; --online-rgb: inherit;
  --paper-rgb: inherit; --shade-rgb: inherit;
  --f-llm-rgb: inherit; --f-video-rgb: inherit; --f-3d-rgb: inherit; --f-audio-rgb: inherit;
  --nebula-bg: inherit; --nebula-panel: inherit; --nebula-text: inherit; --nebula-muted: inherit;
  --nebula-violet: inherit; --nebula-cyan: inherit; --nebula-pink: inherit; --nebula-line: inherit;
  color: var(--text); background: var(--studio-bg); color-scheme: inherit;
}
html body.public-mode > .phone { display: block; height: auto; min-height: 100dvh; overflow: visible; }
html body.public-mode > .phone > main { padding: 0; overflow: visible; }
.auth-form-panel { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
.auth-form-panel > .card { background: var(--field); }

@media (min-width: 1600px) {
  nav.tabbar#tabbar > button { min-height: 48px; }
  .studio-side-garden { min-height: 190px; }
  #s-image.atelier-split, #s-video.atelier-split, #s-mesh3d.atelier-split, #s-audio.atelier-split { grid-template-columns: 320px minmax(0, 1fr) 260px; }
}
@media (max-width: 1240px) {
  .phone > #appTopbar { padding: 0 20px; gap: 9px; }
  .studio-brand { width: 184px; }
  .studio-brand > span { font-size: 22px; }
  .studio-brand small { font-size: 7px; letter-spacing: 1.2px; }
  .studio-search { max-width: 320px; }
  .studio-search kbd { display: none; }
  #appTopbar #topbarRecharge { padding: 6px 10px !important; }
  #s-image.atelier-split, #s-video.atelier-split, #s-mesh3d.atelier-split, #s-audio.atelier-split { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
  .atelier-split > .atelier-recentes { grid-column: 1 / -1; max-height: none; }
  .atelier-split > .atelier-recentes.recentes-repliees { width: 100%; }
  .atelier-split .atelier-resultat { min-height: 465px; }
  .chat-workspace { grid-template-columns: 195px minmax(0, 1fr); }
  .chat-main { padding: 13px; }
  .chat-mode-grid, .chat-mode-grid:has(.chat-mode[data-chat-mode="mesh3d"]:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .code-workspace { grid-template-columns: minmax(0, 1fr) 280px; }
  .chain-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); }
}
@media (max-width: 1050px) {
  .studio-search { flex-basis: 120px; min-width: 42px; }
  .studio-search > span { display: none; }
  .studio-search { flex: 0 0 40px; padding: 10px; }
  #appTopbar #topbarRecharge { margin-left: auto; }
  .code-workspace, .film-workspace { grid-template-columns: minmax(0, 1fr); }
  .chain-canvas-top { flex-wrap: wrap; }
  .chain-layout { grid-template-columns: minmax(0, 1fr); }
  .chain-canvas { min-height: 400px; }
  .chain-empty { min-height: 280px; }
  .chain-controls { grid-row: auto; }
  .chain-head p { max-width: 500px; }
  .chat-workspace { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
  .chat-history-panel { position: absolute; inset: 0 auto 0 0; width: min(280px, calc(100% - 35px)); z-index: 41; transform: translateX(-102%); transition: transform .2s ease; }
  .chat-workspace.history-open .chat-history-panel, .chat-workspace.is-history-open .chat-history-panel { transform: translateX(0); }
  .chat-history-toggle, .chat-history-close { display: inline-flex; }
  .chat-history-close { width: 32px; height: 32px; padding: 7px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); }
  .chat-history-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; }
  .chat-history-scrim { position: absolute; inset: 0; display: block; width: 100%; border: 0; padding: 0; z-index: 40; opacity: 0; pointer-events: none; background: #0007; }
  .chat-workspace.history-open .chat-history-scrim { opacity: 1; pointer-events: auto; }
}
@media (max-width:760px),(max-height:500px) and (pointer:coarse){
  :root { --top: 65px; }
  html body > .phone { display: flex; flex-direction: column; height: var(--app-h, 100dvh); }
  .phone > #appTopbar { height: 65px; min-height: 65px; gap: 7px; padding: 0 13px; flex-wrap: nowrap; }
  .studio-brand { width: auto; margin-right: auto; gap: 7px; }
  .studio-brand img { width: 28px; height: 40px; }
  .studio-brand > span { font-size: 20px; letter-spacing: -.6px; }
  .studio-brand small { font-size: 6px; letter-spacing: .75px; margin-top: 4px; }
  .studio-search { display: none; }
  #appTopbar #guideToggleApp { display: none !important; }
  #appTopbar #topbarRecharge { padding: 6px 9px !important; height: 34px; min-height: 34px; font-size: 10px !important; }
  #appTopbar #langSelect { height: 34px; min-height: 34px; font-size: 10px !important; padding: 5px !important; }
  #appTopbar #themeSelect { display: block; max-width: 116px; min-height: 34px; height: 34px; font-size: 10px !important; padding: 5px 7px !important; }
  #appTopbar #pillBalance { padding: 7px 9px; font-size: 10px; }
  .phone > main { flex: 1; min-height: 0; padding: 12px 13px 20px; overflow-y: auto; }
  nav.tabbar#tabbar {
    flex: 0 0 auto; width: 100%; min-height: 67px; max-height: 87px; margin: 0;
    padding: 5px 6px calc(6px + env(safe-area-inset-bottom)); gap: 4px;
    flex-direction: row; align-items: stretch; justify-content: flex-start;
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
    background: var(--panel); box-shadow: 0 -6px 25px #0001;
  }
  nav.tabbar#tabbar > button { width: auto; min-width: 64px; min-height: 54px; padding: 7px 9px; flex: 1 0 64px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-size: 10px; border-radius: 9px; }
  nav.tabbar#tabbar > button svg { width: 20px; height: 20px; }
  nav.tabbar#tabbar > button[aria-selected="true"] { box-shadow: inset 0 2px var(--accent); }
  .studio-sidebar-footer { display: none; }
  .studio-menu-toggle { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--text); }
  .studio-menu-toggle svg { width: 19px; height: 19px; }
  body.studio-menu-open nav.tabbar#tabbar { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: auto; max-height: 45dvh; padding-top: 10px; }
  body.studio-menu-open nav.tabbar#tabbar > button { min-width: 0; min-height: 57px; }
  .studio-page-hero, .chain-head { min-height: 117px; padding: 19px 17px; border-radius: 13px; gap: 12px; }
  .studio-page-hero h1, .studio-page-hero h2, .chain-head h2 { font-size: clamp(25px, 5.8vw, 34px); letter-spacing: -.9px; }
  .studio-page-hero p, .chain-head p { font-size: 12px; }
  .chain-head { display: block; }
  .chain-balance { display: inline-flex; align-items: center; gap: 12px; min-width: 0; margin-top: 14px; padding: 7px 10px; }
  .chain-balance strong { margin: 0; font-size: 15px; }
  .card { padding: 15px; border-radius: 13px; }
  #s-image.atelier-split, #s-video.atelier-split, #s-mesh3d.atelier-split, #s-audio.atelier-split { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .atelier-split > .atelier-recentes { grid-column: auto; }
  .atelier-split > .atelier-resultat { min-height: 300px; }
  .atelier-split .atelier-placeholder { min-height: 250px; }
  .atelier-split:has(> .recentes-repliees) { grid-template-columns: minmax(0, 1fr); }
  .chain-layout { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; gap: 12px; }
  .chain-canvas { grid-row: 2; margin: 0; min-height: 370px; padding: 15px; }
  .chain-empty { min-height: 250px; padding: 24px 10px; }
  .chain-controls { grid-row: 1; padding: 14px; }
  .chain-estimate { gap: 10px; }
  .chain-estimate small { max-width: 45%; }
  .chain-footer { display: grid; gap: 6px; padding: 12px 2px 0; }
  .chain-footer span:last-child { margin: 0; text-align: left; }
  .chat-workspace { border-radius: 13px; min-height: 600px; }
  .chat-main { padding: 12px; }
  .chat-main-head { gap: 9px; }
  .chat-main-title strong { font-size: 12px; }
  #chatLog { min-height: 210px; }
  #chatLog > .empty:only-child { font-size: 14px; min-height: 210px; }
  .bubble { max-width: 94%; }
  .chat-save-head { align-items: flex-start; }
  .chat-save-head .btn { max-width: 118px; }
  .code-workspace, .film-workspace { grid-template-columns: minmax(0, 1fr); }
  .monaco-host { min-height: 280px; height: 48dvh; }
  .code-toolbar-actions { flex-wrap: wrap; }
  .code-toolbar-actions select { max-width: 150px; }
  .film-row > div:first-child { width: 105px; }
  .pc-chat-form { flex-wrap: wrap; }
  .pc-chat-form textarea { flex-basis: calc(100% - 60px); }
  .studio-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #studioThemeDialog, .studio-theme-dialog { padding: 18px; }
  input, textarea, select { font-size: 16px; }
  .chain-field input, .chain-field textarea, .chain-field select { font-size: 16px; }
  .chat-history-search { font-size: 16px; }
  .chat-mode select { font-size: 13px; }
}
@media (max-width: 520px) {
  .phone > #appTopbar { gap: 5px; padding: 0 10px; }
  .studio-brand > span { font-size: 17px; }
  .studio-brand small { max-width: 120px; font-size: 5.5px; letter-spacing: .4px; }
  .studio-brand img { width: 24px; height: 35px; }
  #appTopbar #topbarRecharge { display: none !important; }
  #appTopbar #themeSelect { max-width: 102px; }
  #appTopbar #langSelect { max-width: 41px; }
  #appTopbar #pillBalance { padding: 6px; font-size: 10px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
  .phone > main { padding: 10px 10px 18px; }
  .studio-page-hero, .chain-head { padding: 17px 15px; }
  .studio-page-hero .eyebrow, .studio-page-hero > div > span, .chain-kicker { font-size: 9px; letter-spacing: 1px; }
  .studio-page-hero p, .chain-head p { font-size: 11px; }
  .card { padding: 13px; }
  .chat-generation-head { flex-wrap: wrap; gap: 5px; }
  .chat-mode-grid, .chat-mode-grid:has(.chat-mode[data-chat-mode="mesh3d"]:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .chat-mode { padding: 7px; gap: 3px 5px; }
  .chat-save-head { flex-wrap: wrap; }
  .chat-save-head .btn { max-width: none; }
  .chain-stage { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 11px; }
  .chain-stage-index { width: 28px; height: 28px; }
  .chain-stage-heading { flex-wrap: wrap; gap: 3px; }
  .chain-estimate { flex-wrap: wrap; }
  .chain-estimate small { max-width: none; text-align: left; }
  .studio-gallery-grid, .gallery-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}