/* Conversation editor and inspector. Shared theme supplies neutral control tokens. */
body.studio-page { margin:0; background:var(--ds-bg); color:var(--ds-text); font-size:14px; }
.studio-page * { box-sizing:border-box; }
.studio-page button,.studio-page input,.studio-page textarea,.studio-page select { font:inherit; }
.studio-page button { cursor:pointer; }
.studio-page svg { width:18px; height:18px; flex-shrink:0; }
.studio-page.workspace-page .studio-main { width:100%; max-width:none; padding:0; margin:0; height:calc(100dvh - 66px); display:flex; flex-direction:column; }
.studio-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:12px 24px; flex-shrink:0; }
.studio-heading { display:flex; gap:12px; align-items:center; min-width:0; }
.studio-heading>div { min-width:0; }
body.studio-page .studio-heading h1 { font-size:20px; margin:0 0 3px; line-height:1.3; }
.studio-heading small { display:block; font-size:12px; color:var(--ds-muted); }
.studio-heading .ui-primary { min-height:44px; padding:10px 16px; white-space:nowrap; }
.studio-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--ds-raised); color:var(--ds-secondary); }
.studio-toolbar { display:flex; gap:4px; }
.studio-toolbar .ui-icon { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; width:auto; padding:10px; border-radius:999px; font-size:12px; }
.studio-layout { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; flex:1; }
.studio-layout.inspector-open { grid-template-columns:minmax(0,1fr) 390px; }
.studio-conversation { min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.studio-messages { flex:1; overflow:auto; padding:24px max(24px,calc((100% - 730px)/2)); scrollbar-width:thin; }
.studio-welcome { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; }
.studio-welcome>svg { width:36px; height:36px; color:var(--ds-secondary); }
body.studio-page .studio-welcome h2 { margin:0; font-size:26px; font-weight:600; }
.studio-welcome p { max-width:480px; margin:0; color:var(--ds-secondary); font-size:14px; line-height:1.6; }
.studio-example { max-width:100%; padding:12px 18px; min-height:44px; white-space:normal; }
.studio-welcome .ui-text { min-height:44px; color:var(--ds-secondary); }
.studio-message { margin:0 0 24px; line-height:1.75; overflow-wrap:anywhere; }
.studio-message-author { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; font-weight:500; color:var(--ds-secondary); }
.studio-message-text { font-size:15px; white-space:pre-wrap; }
.studio-message.user { margin-left:auto; max-width:90%; padding:13px 18px; background:var(--ds-raised); border-radius:20px; }
.studio-change { margin-top:14px; display:flex; align-items:center; gap:10px; border:0; border-radius:999px; background:var(--ds-raised); color:var(--ds-text); padding:12px 16px; min-height:44px; font-size:13px; }
.studio-error { color:var(--ds-danger); line-height:1.6; font-size:14px; padding:12px 0; }
.studio-pending { padding:0 24px 14px; text-align:center; color:var(--ds-muted); font-size:12px; }
.studio-pending svg { width:15px; height:15px; vertical-align:middle; margin-right:8px; animation:studio-spin 1.5s linear infinite; }
.studio-composer { display:flex; align-items:flex-end; gap:12px; margin:12px max(24px,calc((100% - 760px)/2)) 20px; padding:10px 12px 10px 18px; background:var(--ds-surface); }
body.studio-page .studio-composer textarea { display:block; width:100%; min-width:0; resize:none; max-height:180px; min-height:44px; padding:10px 0; border:0; background:transparent; color:var(--ds-text); outline:0; box-shadow:none; font-size:16px; line-height:1.5; }
.studio-page .ui-send { width:44px; height:44px; min-width:44px; border:0; border-radius:50%; background:var(--ds-primary); color:var(--ds-on-primary); }
.studio-inspector { min-height:0; display:flex; flex-direction:column; background:var(--ds-surface); }
.inspector-heading { display:flex; justify-content:space-between; align-items:center; padding:10px 18px; flex-shrink:0; }
.inspector-heading h2 { margin:0; font-size:16px; }
.studio-fields { overflow:auto; min-height:0; flex:1; padding:4px 18px 18px; scrollbar-width:thin; }
.studio-fields>label,.studio-page .ui-label { display:block; font-size:13px; font-weight:500; color:var(--ds-secondary); margin-bottom:14px; }
.studio-fields input,.studio-fields textarea,.studio-fields select,.studio-page .ui-label textarea { display:block; width:100%; margin-top:7px; padding:11px 12px; border:0; border-radius:16px; background:var(--ds-raised); color:var(--ds-text); font-size:14px; line-height:1.5; resize:vertical; }
.studio-fields input,.studio-fields select { min-height:44px; }
.studio-prompt-heading { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--ds-secondary); }
.studio-prompt-heading>div { display:flex; }
.studio-fields #studioPrompt { margin-bottom:16px; min-height:170px; }
.studio-portrait-row { display:flex; align-items:center; gap:14px; margin:6px 0 18px; }
.studio-portrait-row>div { display:flex; flex-direction:column; align-items:flex-start; }
.studio-portrait-row .ui-text { min-height:44px; font-size:13px; }
.studio-portrait { width:72px; height:72px; min-width:72px; display:grid; place-items:center; border:0; border-radius:50%; overflow:hidden; background:var(--ds-raised); color:var(--ds-secondary); cursor:pointer; padding:0; }
.studio-portrait img { width:100%; height:100%; object-fit:cover; }.studio-portrait svg { width:25px; height:25px; }
.studio-publish { display:flex; gap:10px; padding:12px 18px; flex-shrink:0; background:var(--ds-surface); }
.studio-publish button { flex:1; min-height:44px; padding:10px; font-size:13px; }
.studio-page .ui-label { margin:0 22px 16px; }
.studio-import-preview { margin:0 22px 20px; color:var(--ds-secondary); font-size:13px; line-height:1.6; }
.studio-page .ui-list { padding:0 16px 16px; }
.studio-page .ui-list .ui-row { width:100%; align-items:start; text-align:left; margin-bottom:8px; }
.studio-page .ui-list .ui-row>span { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.studio-page .ui-list small { display:block; max-width:none; margin-top:5px; font-size:12px; white-space:normal; overflow:visible; color:var(--ds-muted); }
.studio-page .toast { position:fixed; left:50%; bottom:24px; max-width:calc(100% - 32px); padding:12px 18px; background:var(--ds-raised); color:var(--ds-text); border-radius:16px; box-shadow:var(--ds-shadow); opacity:0; transform:translate(-50%,10px); pointer-events:none; font-size:13px; z-index:10000; }.studio-page .toast.show { opacity:1; transform:translate(-50%,0); }
@keyframes studio-spin { to { transform:rotate(360deg); } }
@media(max-width:1100px) {
  .studio-layout.inspector-open { grid-template-columns:minmax(0,1fr) 340px; }
  .studio-messages { padding:24px; }
  .studio-header { padding:12px 18px; }
  .studio-composer { margin:12px 18px 18px; }
}
@media(max-width:780px) {
  .studio-page.workspace-page .studio-main { height:calc(100dvh - 58px); }
  .studio-header { padding:8px 12px; gap:8px; }
  .studio-mark { display:none; }
  .studio-heading { width:100%; justify-content:space-between; gap:10px; }
  body.studio-page .studio-heading h1 { font-size:17px; }
  .studio-heading small { font-size:11px; }
  .studio-heading .ui-primary { padding:10px 12px; font-size:13px; }
  .studio-heading .ui-primary svg { display:none; }
  .studio-toolbar { width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
  .studio-toolbar .ui-icon { min-width:0; min-height:48px; flex-direction:column; gap:3px; padding:5px 2px; border-radius:16px; font-size:10px; }
  .studio-layout.inspector-open { grid-template-columns:1fr; }
  .studio-layout.inspector-open .studio-conversation { display:none; }
  .studio-messages { padding:20px 16px; }
  .studio-composer { margin:8px 12px max(12px,env(safe-area-inset-bottom)); padding:8px 10px 8px 14px; }
  .studio-welcome { gap:12px; }.studio-welcome p { font-size:13px; }
  body.studio-page .studio-welcome h2 { font-size:24px; }
  .studio-example { font-size:13px; }
  .studio-message.user { max-width:94%; }
  .studio-fields input,.studio-fields textarea,.studio-fields select,.studio-page .ui-label textarea { font-size:16px; }
  .studio-publish { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .studio-page .ui-dialog-actions { flex-wrap:wrap; }
}