/* Mobile Studio refinements. Keep the existing keyboard and panel state logic. */
@media (max-width:860px){
  .studio .stage-head{gap:6px}
  .studio .stage-title{flex:1; min-width:0}
  .studio .stage-status{flex:0 1 auto; max-width:48%}
  .studio .stage-body{padding:16px 12px; scroll-padding-block:16px}
  .studio .chat{gap:22px}
  .studio .msg{gap:8px; min-width:0}
  .studio .msg-user .msg-main{max-width:94%; padding:10px 12px}
  .studio .msg-who{flex-wrap:wrap; gap:4px 7px; line-height:1.5}
  .studio .msg-who > span:first-child{max-width:100%; overflow-wrap:anywhere}
  .studio .msg-body{font-size:16px; line-height:1.65; overflow-wrap:anywhere}
  .studio .msg-body :is(pre,table){max-width:100%; overscroll-behavior-x:contain}
  .studio .msg-body :is(th,td){min-width:120px; max-width:280px; overflow-wrap:anywhere}
  .studio .msg-body pre{overflow-wrap:normal; padding:12px 10px; tab-size:2}
  .studio .msg-body pre code{white-space:pre}
  .studio .msg-body :is(ul,ol){padding-inline-start:20px}
  .studio .reasoning .r-text{overflow-wrap:anywhere}
  .studio .msg-tools{gap:4px; opacity:1}

  /* Keep the estimate readable instead of squeezing the model and send button. */
  .studio[data-tool="text"] .composer-bar{flex-wrap:wrap; gap:4px}
  .studio[data-tool="text"] .model-chip{flex:1 1 64px; max-width:none; font-size:12px}
  .studio[data-tool="text"] .composer-bar > .btn{flex:0 0 auto; padding-inline:10px}
  .studio[data-tool="text"] #ask-meta{order:2; flex:1 0 100%; justify-content:flex-end; margin:0; line-height:1.5; white-space:normal; overflow-wrap:anywhere}
  .studio[data-tool="text"] #ask-meta:has(> .kbd){display:none}
  .studio[data-tool="text"] .composer-bar:has(#stop:not([hidden])) #send{display:none}
  .studio[data-tool="text"] #stop{color:var(--err); background:var(--err-soft)}
  .studio .composer-bar:not(:has(#ask-meta)){flex-wrap:wrap}
  .studio .composer-bar .btn-primary{margin-inline-start:auto}
  .studio .composer-hint{min-width:0}
  .studio .composer-box textarea{font-size:16px; overscroll-behavior-y:contain; max-height:max(64px,min(180px,calc(28dvh - var(--kb,0px))))}
  .studio .composer-box textarea:placeholder-shown{overflow-y:hidden}
  .studio .composer-box.tall textarea{min-height:min(100px,max(64px,calc(22dvh - var(--kb,0px))))}
  .studio .composer-in > .attachments{max-height:104px; overflow-y:auto; overscroll-behavior:contain}
  .studio .cmp-strip{max-height:104px; overflow-y:auto; overscroll-behavior:contain; border-radius:12px}
  .studio .composer-run{gap:8px}
  .studio .composer-file{flex-basis:calc(100% - 116px)}

  /* A quiet close icon still needs a comfortable touch target. */
  .studio :is(.composer-bar .btn,.composer-run .btn,.model-chip,.side-btn,.msg-tools .btn,.feed-acts .btn,.msg-cmp-foot .btn){min-height:44px}
  .studio :is(.composer-bar .btn,.msg-tools .btn,.chat-act,.doc-x,.cmp-strip-off){min-width:44px}
  .studio :is(.chat-act,.doc-x,.cmp-strip-off){min-height:44px; display:inline-grid; place-items:center}
  .studio :is(.sheet-x,.focus-toggle,.to-end){width:44px; min-width:44px; height:44px; min-height:44px}
  .studio .chat-item-actions{gap:0; opacity:1}
  .studio .chat-item{padding:8px; gap:6px}
  .studio .chat-item-title{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4}
  .studio .chats-search{min-height:44px; max-width:none}
  .studio .chats-search input{font-size:16px}
  .studio .chat-rename{min-height:44px; font-size:16px}
  .studio .cmp-strip-edit{min-height:44px; padding-inline:8px}
  .studio .reasoning > summary{min-height:44px; display:flex; align-items:center}
  .studio .panel-head{position:sticky; top:0; flex-shrink:0; align-items:center}
  .studio .panel-head h1{font-size:16px}
  .studio .sheet-head{padding:10px 12px 10px 16px}
  .studio .sheet-body{padding-bottom:calc(20px + max(0px,env(safe-area-inset-bottom) - var(--kb,0px)))}
  .studio .panel-legal{padding-bottom:calc(16px + max(0px,env(safe-area-inset-bottom) - var(--kb,0px)))}
  .studio :is(.panel,.sheet,.composer) :is(input:not([type="checkbox"]):not([type="range"]),select,textarea){font-size:16px}
  .studio .panel :is(.picker-name,.picker-price){font-size:inherit}
  .studio .panel .picker-price{font-size:12px}
  .studio .panel .picker-name{font-size:14px}
  .studio .results{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
  .studio .compare{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
  .studio .feed-item{padding:12px; border-radius:16px}
  .studio .feed-acts{gap:4px; max-width:100%}
  .studio :is(.feed-meta,.results-bar){overflow-wrap:anywhere}
  .studio .msg-cmp{grid-auto-columns:minmax(min(260px,100%),1fr)}
  .studio .msg-cmp-meta{flex-wrap:wrap; justify-content:flex-end}
  .studio .msg-cmp-head{flex-wrap:wrap}
  .studio .msg-cmp-head b{max-width:100%}

  .picker-pop :is(.picker-close,.picker-star,.picker-clear){min-width:44px; min-height:44px}
  .picker-pop :is(.vchip,.fchip,.picker-view button,.picker-foot .btn,.picker-filters > summary){min-height:44px}
  .picker-pop .picker-list{min-height:0; overscroll-behavior-y:contain}
  .picker-pop .picker-row-name{overflow-wrap:anywhere}
  .picker-pop .picker-price-basis{font-size:11px}
  .picker-pop .picker-foot{padding-bottom:calc(10px + max(0px,env(safe-area-inset-bottom) - var(--kb,0px)))}
}

/* Less chrome on short screens, while all controls remain available. */
@media (max-width:860px) and (max-height:560px){
  .studio .stage-body{padding-block:10px}
  .studio .composer{padding-top:4px; padding-bottom:calc(6px + max(0px,env(safe-area-inset-bottom) - var(--kb,0px)))}
  .studio .composer-box textarea{min-height:44px; padding-top:8px}
  .studio .composer-box.tall textarea{min-height:64px}
  .studio .ctx{padding-bottom:3px}
  .studio .composer-in > .attachments,.studio .cmp-strip{max-height:64px}
  .studio .panel-head p{margin-top:2px}
  .picker-pop .picker-heading{padding-top:2px}
  .picker-pop .picker-view{margin-block:4px}
}

@media (max-width:380px){
  .studio .stage-body{padding-inline:10px}
  .studio .msg{gap:6px}
  .studio .msg-av{width:22px; height:22px; font-size:10px}
  .studio .composer{padding-inline:8px}
  .studio[data-tool="text"] .composer-bar{padding-inline:6px; gap:2px}
  .studio[data-tool="text"] .model-chip{padding-inline:8px; flex-basis:48px}
  .studio .chat-item{padding-inline:4px}
  .studio .chat-item-meta{font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  .studio .msg{animation:none}
  .studio :is(.panel,.sheet,.to-end){transition:none}
}