/* TikTokLine mobile/tablet responsive layer.
   Desktop >=941px remains governed by the approved one-screen layout in index.html. */

@media(max-width:940px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{background:#eef2f7}
  .app-shell{width:100%;min-width:0}

  /* App header */
  .app-topbar{
    position:sticky;top:0;z-index:60;width:100%;height:58px;min-height:58px;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;
    padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));
    background:rgba(255,255,255,.97)
  }
  .brand-block{min-width:0;gap:8px}
  .brand-mark{width:30px;height:30px;border-radius:9px;flex:0 0 30px}
  .brand-copy{min-width:0}.brand-copy strong{font-size:13px;white-space:nowrap}.brand-copy span{display:none}
  .scene-chip,.save-status{display:none}
  .top-actions{justify-self:end;gap:5px;min-width:0}
  .top-action{height:34px;padding:0 9px;border-radius:9px;font-size:9px}

  /* Main content becomes a clean vertical workflow: Preview -> Library -> Composers. */
  .studio-main{
    width:100%;min-width:0;display:flex;flex-direction:column;align-items:stretch;
    gap:10px;padding:10px 10px 12px;overflow:visible
  }
  .preview-panel,.asset-panel{width:100%;min-width:0;height:auto;border-radius:14px}
  .preview-panel{overflow:hidden}
  .section-bar{height:auto;min-height:48px;padding:8px 12px;gap:8px;flex-wrap:wrap}
  .section-title strong{font-size:11px}.section-title span{font-size:8px}
  .preview-head-actions{min-width:0;margin-left:auto}
  .preview-canvas{
    width:100%;height:auto;min-height:0;padding:8px;overflow:hidden;
    display:grid;place-items:start center;justify-content:center
  }
  .preview-scaler{flex:none}

  /* Library gets its own usable viewport instead of a short desktop side rail. */
  .asset-panel{height:min(70dvh,680px);min-height:520px;max-height:720px}
  .asset-head{padding:12px}
  .asset-head-row{align-items:flex-start;flex-wrap:wrap}
  .asset-head h2{font-size:14px}.asset-head p{font-size:9px}
  .asset-import{margin-left:auto}
  .asset-grid-wrap,.pack-grid-wrap{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .asset-actions,.pack-actions{padding-bottom:max(9px,env(safe-area-inset-bottom))}

  /* Realtime composers become touch-first cards. */
  .composer-dock{
    position:static;width:100%;display:grid;grid-template-columns:1fr;gap:9px;
    padding:0 10px max(12px,env(safe-area-inset-bottom));background:transparent;border-top:0;backdrop-filter:none
  }
  .composer-side{width:100%;min-width:0;padding:10px;border-radius:14px;box-shadow:0 4px 14px rgba(28,45,68,.04)}
  .composer-label{height:auto;min-height:20px;margin-bottom:7px;gap:8px}
  .composer-label strong{font-size:11px}
  .composer-label .composer-options{margin-left:auto;flex-wrap:wrap;gap:7px}
  .composer-label .composer-option{font-size:9px;min-height:22px}
  .composer-dock .side-compose{
    display:block;min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none
  }
  .composer-dock .side-compose .side-title,.composer-dock .side-compose label.side-text-label{display:none}
  .composer-dock .side-compose textarea{
    display:block;width:100%;min-height:62px;max-height:120px;height:62px;resize:vertical;
    padding:9px 10px;border-radius:10px;font-size:13px;line-height:1.45
  }
  .composer-dock .send-row{
    display:grid;grid-template-columns:minmax(92px,110px) minmax(0,1fr);gap:8px;margin-top:8px;align-items:stretch
  }
  .composer-dock .send-time{display:block;min-width:0;font-size:0}
  .composer-dock .send-time input{
    display:block;width:100%;height:44px;margin:0;padding:0 7px;border-radius:9px;font-size:11px
  }
  .composer-dock .send-button{width:100%;min-height:44px;height:44px;border-radius:9px;font-size:10px}
  .composer-shortcut{display:none}

  /* Full-screen mobile Conversation Editor. */
  dialog.manager-dialog{
    width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:0;border-radius:0
  }
  .manager-dialog-shell{height:100dvh;max-height:100dvh}
  .manager-dialog-header{
    flex:0 0 auto;align-items:center;padding:14px max(14px,env(safe-area-inset-right)) 11px max(14px,env(safe-area-inset-left))
  }
  .manager-dialog-header h2{font-size:17px;margin:2px 0 0}.manager-dialog-header p{display:none}
  .dialog-close{width:38px;height:38px;min-width:38px;border-radius:10px;font-size:24px}
  .manager-dialog-body{min-height:0;flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
  .panel-tabs{padding:10px 12px;gap:7px}
  .panel-tab{min-height:42px;padding:9px;font-size:12px}
  .panel-section{padding:13px 12px 18px}
  .field-grid{grid-template-columns:1fr;gap:9px}
  .field input,.field select,.field textarea{font-size:16px}
  .message-list{max-height:none;overflow:visible}
  .date-controls{display:grid;grid-template-columns:1fr;gap:8px;align-items:stretch}
  .date-controls .secondary-btn{min-height:42px}
  .panel-footer{
    position:sticky;bottom:0;padding:10px 12px max(12px,env(safe-area-inset-bottom));
    background:rgba(255,255,255,.98);backdrop-filter:blur(10px)
  }
}

@media(max-width:640px){
  :root{--topbar-h:58px}

  .app-topbar{padding-left:max(9px,env(safe-area-inset-left));padding-right:max(9px,env(safe-area-inset-right))}
  .brand-mark{width:28px;height:28px;flex-basis:28px;font-size:11px}
  .brand-copy strong{font-size:12px}
  .top-actions{gap:4px}
  .top-action{height:32px;padding:0 7px;font-size:9px}
  #clear-chat{font-size:0;padding:0 7px}
  #clear-chat::after{content:"เคลียร์";font-size:9px}
  #open-manager{font-size:0;padding:0 8px}
  #open-manager::after{content:"ตั้งค่า";font-size:9px}

  .studio-main{padding:8px;gap:8px}
  .preview-panel,.asset-panel{border-radius:12px}
  .section-bar{
    display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:9px 10px;gap:7px
  }
  .section-title{width:100%}
  .section-title span{display:none}
  .preview-head-actions{width:100%;margin:0}
  .preview-badges{display:none}
  .preview-canvas{padding:6px}

  .asset-panel{height:68dvh;min-height:500px;max-height:650px}
  .asset-head-row{gap:7px}
  .asset-import{width:100%;margin:0}
  .asset-import span{width:100%;height:38px}
  .library-tabs{overflow-x:auto;scrollbar-width:none}.library-tabs::-webkit-scrollbar{display:none}
  .asset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

  .composer-dock{padding-left:8px;padding-right:8px}
  .composer-side{padding:9px}
  .composer-label{align-items:flex-start;flex-wrap:wrap}
  .composer-label .composer-options{width:100%;justify-content:flex-start;margin-left:0}
}

@media(max-width:420px){
  .studio-main{padding:6px}
  .preview-panel,.asset-panel{border-radius:10px}
  .preview-canvas{padding:4px}

  .asset-panel{height:66dvh;min-height:480px}
  .asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  .composer-dock{padding-left:6px;padding-right:6px}
  .composer-dock .send-row{grid-template-columns:96px minmax(0,1fr);gap:6px}
  .composer-dock .side-compose textarea{font-size:16px}

  .manager-footer-note{display:none}
  .panel-footer{justify-content:flex-end}
}

@media(max-width:340px){
  .brand-copy{display:none}
  .top-actions{grid-column:2}
  .top-action{padding:0 6px}
}