/* Studio workspace: sessions sidebar, streaming text pane, image pane. */
.studio-page{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.studio-page .nav{position:relative}
.studio{flex:1;min-height:0;display:flex}
aside{width:290px;flex:none;display:flex;flex-direction:column;gap:14px;padding:18px 16px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 40%),var(--bg);min-height:0}
aside .btn-gold{width:100%}
.sessions{flex:1;min-height:60px;overflow:auto;display:flex;flex-direction:column;gap:2px;margin:0 -6px}
.session{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--faint);font-size:14px}
.session span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session button{opacity:0;background:none;border:0;color:var(--faint);cursor:pointer;padding:2px 4px;border-radius:6px}
.session:hover,.session.on{background:rgba(236,233,226,.05);color:var(--text)}
.session.on{box-shadow:inset 2px 0 0 var(--gold)}
.session:hover button,.session button:focus-visible{opacity:1}.session button:hover{color:var(--danger)}
.sessions .none{padding:8px 10px;font-size:13px;color:var(--faint)}
.side-settings{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.side-settings textarea{min-height:110px;max-height:34vh;font-size:13px}
.work{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.toolbar{display:flex;align-items:center;gap:12px;padding:12px clamp(14px,2.4vw,28px);border-bottom:1px solid var(--line)}
.toolbar .status{display:flex;align-items:center;gap:8px;min-width:0;font:13px/1.2 var(--mono);color:var(--faint)}
.toolbar .status span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toolbar .spacer{flex:1}
#menu{display:none}
.banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px clamp(14px,2.4vw,28px) 0;padding:14px 16px;border:1px solid rgba(201,180,138,.35);border-radius:14px;background:rgba(201,180,138,.06);font-size:14px}
.banner .ph{font-size:20px;color:var(--gold)}.banner p{flex:1;min-width:200px}
.pane{flex:1;min-height:0;display:flex;flex-direction:column}
#log{flex:1;overflow:auto;padding:28px clamp(14px,2.4vw,28px) 12px}
.inner{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.empty{margin:12vh auto 0;max-width:520px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.empty h1{font:300 clamp(34px,4vw,48px)/1.05 var(--serif);letter-spacing:-.02em}
.empty p{color:var(--muted);max-width:44ch}
.msg .who{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;gap:8px;align-items:center}
.msg.user .body{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}
.msg.user .who{color:var(--faint)}
.msg.assistant .body{font:400 18px/1.68 var(--serif);color:var(--text);overflow-wrap:anywhere}
.body p{margin:0 0 .8em}.body p:last-child{margin:0}
.body em{color:var(--gold-300)}
.body pre{font:13px/1.55 var(--mono);background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;overflow:auto}
.body code{font-family:var(--mono);font-size:.82em;background:rgba(236,233,226,.07);padding:1px 6px;border-radius:6px}.body pre code{background:none;padding:0;font-size:inherit}
.think{margin-bottom:14px;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font:13px/1.55 var(--sans);color:var(--faint)}
.think summary{cursor:pointer;color:var(--faint)}.think div{white-space:pre-wrap;margin-top:8px}
.err{color:var(--danger);font-family:var(--sans);font-size:14px}
.err a,.err button{color:var(--gold);background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
.meta{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:12px/1.4 var(--sans);color:var(--faint)}
.meta .acts{display:flex;gap:2px;margin-left:-6px}
.meta .acts button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;border-radius:8px;padding:4px 7px;color:var(--faint);cursor:pointer;font-size:12px}
.meta .acts button:hover{color:var(--gold);background:rgba(201,180,138,.08)}
.meta .cost{color:var(--gold-300);font-variant-numeric:tabular-nums}
.cursor{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--gold);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.composer{padding:10px clamp(14px,2.4vw,28px) 18px}
.box{max-width:780px;margin:0 auto;display:flex;align-items:flex-end;gap:10px;padding:10px 10px 10px 16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 60%),var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 50px rgba(0,0,0,.35);transition:border-color .3s}
.box:focus-within{border-color:rgba(201,180,138,.45)}
.box textarea{flex:1;min-height:28px;max-height:240px;padding:6px 0;background:none;border:0;outline:0;resize:none;line-height:1.5;color:var(--text)}
.box textarea::placeholder{color:var(--faint)}
.box .btn{height:40px;padding:0 16px;border-radius:12px}
.box .stop{background:var(--surface-2);border-color:var(--line);color:var(--text)}
.hint{max-width:780px;margin:8px auto 0;font-size:12px;color:var(--faint);text-align:center}
.img-scroll{flex:1;overflow:auto;padding:24px clamp(14px,2.4vw,28px) 32px}
.img-wrap{max-width:1180px;margin:0 auto}
.img-form{padding:16px;display:grid;gap:12px;border-radius:18px}
.img-form textarea{min-height:92px;background:var(--surface-2)}
.img-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.img-row select{width:auto;min-width:200px}
.img-row .go{margin-left:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:22px}
.shot{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.shot .ph-img{display:grid;place-items:center;background:var(--surface-2);color:var(--faint);font-size:13px;text-align:center;padding:10px}
.shot .ph-img:has(img){padding:0}
.shot img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.shot .cap{padding:10px 12px 4px;font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shot .foot{padding:4px 6px 8px 12px;display:flex;align-items:center;gap:2px;font-size:11.5px;color:var(--faint)}
.shot .foot .m{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot .foot a,.shot .foot button{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:8px;background:none;border:0;color:var(--faint);text-decoration:none;cursor:pointer;font-size:12px}
.shot .foot a:hover,.shot .foot button:hover{color:var(--gold);background:rgba(201,180,138,.08)}
.spin{font-size:22px;color:var(--gold);display:inline-block;animation:spin 1s linear infinite;margin-bottom:8px}@keyframes spin{to{transform:rotate(360deg)}}
.grid-empty{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--faint)}
#view{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(5,6,8,.9);cursor:zoom-out}
#view[hidden]{display:none}
#view img{max-width:94vw;max-height:94vh;border-radius:8px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:95;padding:9px 16px;border-radius:12px;background:var(--surface);border:1px solid rgba(201,180,138,.4);font-size:13px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.scrim{display:none}
@media (max-width:860px){
  aside{position:fixed;z-index:70;top:0;bottom:0;left:0;transform:translateX(-102%);transition:transform .25s ease;box-shadow:30px 0 60px rgba(0,0,0,.5)}
  aside.open{transform:none}
  .scrim.on{display:block;position:fixed;inset:0;z-index:65;background:rgba(5,6,8,.55)}
  #menu{display:inline-flex}
  .toolbar .status{display:none}
  .studio-page .nav-links{display:none}
  .msg.assistant .body{font-size:17px}
}
@media (max-width:640px){
  .studio-page .nav .brand{font-size:14px;letter-spacing:.16em}
  #exportBtn span,#send span,.toolbar .seg-opt span{display:none}
  .box .btn{padding:0 14px}
  .img-row select{min-width:0;flex:1}
  .img-row .go{width:100%}
}