/* ============================================================
   BOTVIET MOBILE PRO R57
   Mobile-only responsive repair for iPhone / Android portrait.
   Desktop >= 769px is intentionally untouched.
   ============================================================ */

@media screen and (max-width:768px){

  :root{
    --r57-x:10px;
    --r57-gap:9px;
    --r57-radius:14px;
    --r57-control:40px;
    --r57-header:58px;
    --r57-bottom:58px;

    /* Override the existing R12 mobile shell with a more compact scale. */
    --m12-top:58px!important;
    --m12-bottom:60px!important;
    --m12-x:10px!important;
    --m12-gap:9px!important;
    --m12-radius:14px!important;
    --m12-control:40px!important;
  }

  html.bv-r57-mobile,
  body.bv-r57-mobile{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }

  body.bv-r57-mobile{
    font-size:13px!important;
    line-height:1.42!important;
    padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;
  }

  body.bv-r57-mobile *,
  body.bv-r57-mobile *::before,
  body.bv-r57-mobile *::after{
    box-sizing:border-box!important;
  }

  body.bv-r57-mobile .app-shell,
  body.bv-r57-mobile .user-app-shell,
  body.bv-r57-mobile .content,
  body.bv-r57-mobile #page-body,
  body.bv-r57-mobile #page-body > *{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  body.bv-r57-mobile .app-shell,
  body.bv-r57-mobile .user-app-shell,
  body.bv-r57-mobile .content{
    overflow-x:hidden!important;
  }

  body.bv-r57-mobile #page-body{
    padding-bottom:18px!important;
  }

  body.bv-r57-mobile #page-body :where(
    section,article,main,aside,form,fieldset,header,footer,
    .card,.panel,.table-wrap
  ){
    min-width:0!important;
    max-width:100%!important;
  }

  body.bv-r57-mobile #page-body :where(
    h1,h2,h3,h4,p,strong,b,small,label,pre
  ){
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }

  body.bv-r57-mobile #page-body img,
  body.bv-r57-mobile #page-body video,
  body.bv-r57-mobile #page-body canvas,
  body.bv-r57-mobile #page-body svg{
    max-width:100%;
  }

  /* iOS: 16px form text prevents unwanted Safari zoom while controls stay compact. */
  body.bv-r57-mobile #page-body input:not([type="checkbox"]):not([type="radio"]),
  body.bv-r57-mobile #page-body select,
  body.bv-r57-mobile #page-body textarea{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }

  body.bv-r57-mobile #page-body input:not([type="checkbox"]):not([type="radio"]),
  body.bv-r57-mobile #page-body select{
    min-height:40px!important;
  }

  body.bv-r57-mobile #page-body textarea{
    min-height:112px!important;
    resize:vertical!important;
  }

  /* ==========================================================
     TOP HEADER — compact, safe-area aware
     ========================================================== */
  body.bv-r57-mobile .topbar{
    height:calc(var(--r57-header) + env(safe-area-inset-top))!important;
    min-height:calc(var(--r57-header) + env(safe-area-inset-top))!important;
    padding:env(safe-area-inset-top) 8px 0!important;
  }

  body.bv-r57-mobile .bv-m12-header{
    height:var(--r57-header)!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:6px!important;
  }

  body.bv-r57-mobile .bv-m12-head-btn{
    width:37px!important;
    height:37px!important;
    min-width:37px!important;
    min-height:37px!important;
  }

  body.bv-r57-mobile .bv-m12-head-btn.square{
    border-radius:12px!important;
  }

  body.bv-r57-mobile .bv-m12-head-btn svg{
    width:19px!important;
    height:19px!important;
  }

  body.bv-r57-mobile .bv-m12-head-actions{
    gap:4px!important;
  }

  body.bv-r57-mobile .bv-m12-brand{
    gap:6px!important;
    overflow:hidden!important;
  }

  body.bv-r57-mobile .bv-m12-brand img{
    width:31px!important;
    height:31px!important;
  }

  body.bv-r57-mobile .bv-m12-brand strong{
    font-size:14px!important;
    line-height:1!important;
  }

  body.bv-r57-mobile .content{
    margin-left:0!important;
    padding:
      calc(var(--r57-header) + env(safe-area-inset-top) + 9px)
      var(--r57-x)
      calc(88px + env(safe-area-inset-bottom))!important;
  }

  /* ==========================================================
     BOTTOM NAV — smaller and never covers the last control
     ========================================================== */
  body.bv-r57-mobile .bv-m12-bottom-nav{
    left:9px!important;
    right:9px!important;
    bottom:max(5px,env(safe-area-inset-bottom))!important;
    height:58px!important;
    padding:4px 3px!important;
    border-radius:19px!important;
    gap:1px!important;
  }

  body.bv-r57-mobile .bv-m12-bottom-nav button{
    min-width:0!important;
    padding:2px 1px!important;
    gap:1px!important;
    border-radius:14px!important;
  }

  body.bv-r57-mobile .bv-m12-bottom-nav svg{
    width:20px!important;
    height:20px!important;
  }

  body.bv-r57-mobile .bv-m12-bottom-nav span{
    font-size:8.5px!important;
    line-height:1.1!important;
  }

  /* ==========================================================
     GENERIC MOBILE CARDS / HEADINGS
     ========================================================== */
  body.bv-r57-mobile .page-head{
    margin-bottom:9px!important;
    gap:6px!important;
  }

  body.bv-r57-mobile .page-head h1{
    font-size:21px!important;
    line-height:1.12!important;
  }

  body.bv-r57-mobile .page-head p{
    font-size:11px!important;
  }

  body.bv-r57-mobile .card,
  body.bv-r57-mobile [class*="-card"],
  body.bv-r57-mobile [class*="-panel"]{
    min-width:0!important;
    max-width:100%!important;
  }

  body.bv-r57-mobile .btn{
    min-height:40px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }

  /* ==========================================================
     CONTENT / ĐĂNG BÀI
     Fix giant platform cards + composer + recent content table
     ========================================================== */

  body.bv-r57-mobile .content-reference-shell{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
  }

  body.bv-r57-mobile .content-reference-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:13px!important;
    border-radius:14px!important;
  }

  body.bv-r57-mobile .content-reference-header h1{
    font-size:22px!important;
    margin:0!important;
  }

  body.bv-r57-mobile .content-reference-header p{
    font-size:11px!important;
    margin:3px 0 0!important;
  }

  body.bv-r57-mobile .content-reference-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .content-reference-actions > *{
    width:100%!important;
    min-width:0!important;
  }

  /* V8.7/V8.9 platform cards: fixed compact mobile height. */
  body.bv-r57-mobile #page-body .content-reference-shell .bv87-tabs{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin:0 0 10px!important;
    padding:0!important;
    align-items:stretch!important;
  }

  body.bv-r57-mobile #page-body .content-reference-shell .bv87-tabs .bv87-tab{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    min-height:90px!important;
    height:90px!important;
    max-height:90px!important;
    padding:43px 9px 9px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    gap:2px!important;
    overflow:hidden!important;
    border-radius:13px!important;
    font-size:13px!important;
    line-height:1.15!important;
  }

  body.bv-r57-mobile #page-body .content-reference-shell .bv87-tabs .bv87-tab > .bv87-icon{
    position:absolute!important;
    left:10px!important;
    top:10px!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
    margin:0!important;
  }

  body.bv-r57-mobile #page-body .content-reference-shell .bv87-tab-title{
    width:100%!important;
    min-width:0!important;
    font-size:13px!important;
    line-height:1.12!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.bv-r57-mobile #page-body .content-reference-shell .bv87-tab-subtitle{
    width:100%!important;
    min-width:0!important;
    font-size:8.5px!important;
    line-height:1.18!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.bv-r57-mobile .content-stats-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  body.bv-r57-mobile .content-stats-grid > *{
    min-width:0!important;
    min-height:76px!important;
    padding:10px!important;
  }

  body.bv-r57-mobile .content-compose-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  body.bv-r57-mobile .content-compose-card,
  body.bv-r57-mobile .content-preview-card,
  body.bv-r57-mobile .content-management-card{
    width:100%!important;
    min-width:0!important;
    padding:12px!important;
    border-radius:14px!important;
  }

  body.bv-r57-mobile .content-channel-tabs,
  body.bv-r57-mobile .content-type-tabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
  }

  body.bv-r57-mobile .content-channel-tabs button,
  body.bv-r57-mobile .content-type-tabs button{
    min-width:0!important;
    min-height:39px!important;
    padding:0 6px!important;
    font-size:10px!important;
  }

  body.bv-r57-mobile .content-management-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  body.bv-r57-mobile .content-management-tabs{
    width:100%!important;
    display:flex!important;
    gap:5px!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    padding-bottom:2px!important;
  }

  body.bv-r57-mobile .content-management-tabs::-webkit-scrollbar{
    display:none!important;
  }

  body.bv-r57-mobile .content-management-tabs button{
    flex:0 0 auto!important;
    min-height:36px!important;
    padding:0 10px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }

  body.bv-r57-mobile .content-management-filters{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .content-management-filters input{
    min-width:0!important;
  }

  /* Recent content becomes mobile cards instead of a clipped desktop table. */
  body.bv-r57-mobile table.bv-r57-card-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    border:0!important;
    background:transparent!important;
  }

  body.bv-r57-mobile table.bv-r57-card-table thead{
    display:none!important;
  }

  body.bv-r57-mobile table.bv-r57-card-table tbody{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:100%!important;
  }

  body.bv-r57-mobile table.bv-r57-card-table tbody tr{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px 9px!important;
    width:100%!important;
    min-width:0!important;
    padding:10px!important;
    border:1px solid rgba(31,82,127,.72)!important;
    border-radius:12px!important;
    background:linear-gradient(145deg,#061a32,#05152a)!important;
  }

  body.bv-r57-mobile table.bv-r57-card-table tbody td{
    display:block!important;
    min-width:0!important;
    width:auto!important;
    padding:0!important;
    border:0!important;
    white-space:normal!important;
    overflow:hidden!important;
  }

  body.bv-r57-mobile table.bv-r57-card-table tbody td::before{
    content:attr(data-r57-label);
    display:block!important;
    margin-bottom:3px!important;
    color:#7897ba!important;
    font-size:8px!important;
    line-height:1.1!important;
    font-weight:750!important;
    text-transform:uppercase!important;
    letter-spacing:.03em!important;
  }

  body.bv-r57-mobile table.bv-r57-content-table tbody td:first-child,
  body.bv-r57-mobile table.bv-r57-content-table tbody td:last-child,
  body.bv-r57-mobile table.bv-r57-project-table tbody td:first-child,
  body.bv-r57-mobile table.bv-r57-project-table tbody td:last-child{
    grid-column:1/-1!important;
  }

  body.bv-r57-mobile table.bv-r57-card-table [hidden]{
    display:none!important;
  }

  /* ==========================================================
     AI VIDEO STUDIO
     ========================================================== */

  body.bv-r57-mobile .video-studio-reference{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  body.bv-r57-mobile .video-studio-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px!important;
  }

  body.bv-r57-mobile .video-studio-head h1{
    font-size:22px!important;
    line-height:1.12!important;
    margin:0!important;
  }

  body.bv-r57-mobile .video-studio-head p{
    font-size:11px!important;
  }

  body.bv-r57-mobile .video-studio-head-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .video-studio-head-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:0 8px!important;
    font-size:10.5px!important;
  }

  body.bv-r57-mobile .video-studio-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  body.bv-r57-mobile .video-kpi{
    min-width:0!important;
    min-height:76px!important;
    padding:10px!important;
    gap:10px!important;
    border-radius:12px!important;
  }

  body.bv-r57-mobile .video-kpi-icon{
    width:39px!important;
    height:39px!important;
    min-width:39px!important;
    border-radius:10px!important;
  }

  body.bv-r57-mobile .video-kpi-icon .video-studio-icon{
    width:23px!important;
    height:23px!important;
  }

  body.bv-r57-mobile .video-kpi label{
    font-size:10px!important;
  }

  body.bv-r57-mobile .video-kpi strong{
    font-size:21px!important;
  }

  body.bv-r57-mobile .video-kpi small{
    font-size:8.5px!important;
  }

  body.bv-r57-mobile .video-studio-workspace{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    align-items:start!important;
  }

  body.bv-r57-mobile .video-studio-panel,
  body.bv-r57-mobile .video-projects-section{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:12px!important;
    border-radius:13px!important;
    overflow:hidden!important;
  }

  body.bv-r57-mobile .video-panel-title{
    min-height:26px!important;
    margin-bottom:9px!important;
    gap:8px!important;
  }

  body.bv-r57-mobile .video-panel-title h3{
    font-size:15px!important;
  }

  body.bv-r57-mobile .video-script-input{
    height:148px!important;
    min-height:148px!important;
    max-height:280px!important;
    padding:11px!important;
    line-height:1.48!important;
    overflow:auto!important;
  }

  body.bv-r57-mobile .video-control-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  body.bv-r57-mobile .video-control-grid label{
    min-width:0!important;
    gap:5px!important;
    font-size:10px!important;
  }

  body.bv-r57-mobile .video-control-grid select,
  body.bv-r57-mobile .video-mini-select{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:0 8px!important;
  }

  body.bv-r57-mobile .video-consistency-toggle{
    grid-template-columns:auto auto minmax(0,1fr)!important;
    gap:7px!important;
    margin:10px 0!important;
    font-size:11px!important;
  }

  body.bv-r57-mobile .video-consistency-toggle small{
    grid-column:2/-1!important;
    font-size:9px!important;
    line-height:1.25!important;
  }

  body.bv-r57-mobile .video-storyboard-list{
    max-height:none!important;
    overflow:visible!important;
    padding-right:0!important;
  }

  body.bv-r57-mobile .video-scene-row{
    grid-template-columns:22px minmax(0,1fr)!important;
    gap:5px!important;
  }

  body.bv-r57-mobile .video-scene-join-check{
    width:22px!important;
  }

  body.bv-r57-mobile .video-scene-card{
    grid-template-columns:15px 27px 56px minmax(0,1fr)!important;
    gap:6px!important;
    min-height:64px!important;
    padding:6px!important;
  }

  body.bv-r57-mobile .video-scene-thumb{
    width:56px!important;
    height:42px!important;
  }

  body.bv-r57-mobile .video-scene-number{
    height:28px!important;
    font-size:11px!important;
  }

  body.bv-r57-mobile .video-scene-copy{
    min-width:0!important;
  }

  body.bv-r57-mobile .video-scene-copy b{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    white-space:normal!important;
    font-size:11px!important;
    line-height:1.28!important;
  }

  body.bv-r57-mobile .video-scene-copy small{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:9px!important;
  }

  body.bv-r57-mobile .video-scene-state{
    grid-column:4!important;
    justify-self:start!important;
    margin-top:2px!important;
  }

  body.bv-r57-mobile .video-stitch-panel{
    padding:10px!important;
    border-radius:11px!important;
  }

  body.bv-r57-mobile .video-stitch-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .video-preview-canvas{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:10px!important;
  }

  body.bv-r57-mobile .video-preview-canvas.ratio-16-9{
    aspect-ratio:16/9!important;
  }

  body.bv-r57-mobile .video-preview-canvas.ratio-9-16{
    aspect-ratio:9/16!important;
    width:min(100%,270px)!important;
    max-width:270px!important;
    margin-inline:auto!important;
  }

  body.bv-r57-mobile .video-preview-placeholder{
    min-width:0!important;
    padding:16px!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .video-ai-orb{
    width:54px!important;
    height:54px!important;
  }

  body.bv-r57-mobile .video-preview-placeholder strong{
    font-size:19px!important;
    line-height:1.15!important;
  }

  body.bv-r57-mobile .video-preview-placeholder span{
    max-width:100%!important;
    font-size:9px!important;
    line-height:1.35!important;
  }

  body.bv-r57-mobile .video-preview-tools{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .video-tool-btn{
    min-width:0!important;
    min-height:40px!important;
    padding:0 8px!important;
    font-size:10px!important;
  }

  body.bv-r57-mobile .video-generate-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .video-provider-state{
    margin:0!important;
  }

  body.bv-r57-mobile .video-generate-button,
  body.bv-r57-mobile .video-refresh-button{
    width:100%!important;
    justify-content:center!important;
  }

  body.bv-r57-mobile .video-reference-panel{
    margin-top:10px!important;
    padding:10px!important;
    border-radius:11px!important;
  }

  body.bv-r57-mobile .video-reference-head{
    gap:7px!important;
    margin-bottom:8px!important;
  }

  body.bv-r57-mobile .video-reference-head small{
    font-size:8px!important;
  }

  body.bv-r57-mobile .video-reference-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .video-projects-section{
    padding:11px!important;
  }

  body.bv-r57-mobile .video-project-table-wrap{
    width:100%!important;
    overflow:visible!important;
  }

  body.bv-r57-mobile .video-project-name{
    gap:8px!important;
  }

  body.bv-r57-mobile .video-project-thumb{
    width:52px!important;
    height:38px!important;
    flex:0 0 auto!important;
  }

  body.bv-r57-mobile .video-project-name b{
    max-width:100%!important;
    white-space:normal!important;
  }

  body.bv-r57-mobile .video-progress{
    min-width:0!important;
    width:100%!important;
  }

  /* ==========================================================
     PROMPT AI / TẠO CÂU LỆNH AI
     ========================================================== */

  body.bv-r57-mobile .prompt-ai-page{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body.bv-r57-mobile .prompt-ai-hero{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:15px!important;
    border-radius:13px!important;
  }

  body.bv-r57-mobile .prompt-ai-hero h1{
    font-size:25px!important;
    line-height:1.08!important;
    letter-spacing:-.3px!important;
  }

  body.bv-r57-mobile .prompt-ai-hero p{
    font-size:12px!important;
    line-height:1.35!important;
  }

  body.bv-r57-mobile .prompt-hero-flow,
  body.bv-r57-mobile .prompt-doc-graphic,
  body.bv-r57-mobile .film-hero-flow{
    display:none!important;
  }

  body.bv-r57-mobile .prompt-ai-nav{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:7px!important;
    overflow:visible!important;
    border-radius:12px!important;
  }

  body.bv-r57-mobile .prompt-ai-nav > button{
    min-width:0!important;
    min-height:42px!important;
    padding:0 8px!important;
    gap:6px!important;
    white-space:normal!important;
    font-size:10.5px!important;
    line-height:1.2!important;
  }

  body.bv-r57-mobile .prompt-ai-nav .prompt-nav-arrow{
    display:none!important;
  }

  body.bv-r57-mobile .prompt-glyph{
    min-width:22px!important;
    height:22px!important;
    font-size:19px!important;
  }

  body.bv-r57-mobile .prompt-ai-body{
    margin-top:8px!important;
  }

  body.bv-r57-mobile .prompt-create-layout,
  body.bv-r57-mobile .film-builder{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  body.bv-r57-mobile .prompt-script-card,
  body.bv-r57-mobile .prompt-quick-card,
  body.bv-r57-mobile .prompt-featured,
  body.bv-r57-mobile .prompt-result-card,
  body.bv-r57-mobile .prompt-explore-main,
  body.bv-r57-mobile .prompt-tuning-card,
  body.bv-r57-mobile .film-idea-card,
  body.bv-r57-mobile .film-style-card,
  body.bv-r57-mobile .film-advanced-card,
  body.bv-r57-mobile .film-preview-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:12px!important;
    border-radius:12px!important;
  }

  body.bv-r57-mobile .prompt-section-head{
    gap:7px!important;
    margin-bottom:8px!important;
    flex-wrap:wrap!important;
  }

  body.bv-r57-mobile .prompt-section-head h2{
    font-size:16px!important;
  }

  body.bv-r57-mobile .prompt-section-head p{
    font-size:10px!important;
    line-height:1.3!important;
  }

  body.bv-r57-mobile .prompt-script-card textarea,
  body.bv-r57-mobile .film-idea-card textarea{
    width:100%!important;
    height:138px!important;
    min-height:138px!important;
    max-height:280px!important;
    padding:11px!important;
    overflow:auto!important;
  }

  body.bv-r57-mobile .prompt-form-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:end!important;
  }

  body.bv-r57-mobile .prompt-form-row > *{
    min-width:0!important;
  }

  body.bv-r57-mobile .prompt-form-row label,
  body.bv-r57-mobile .film-selects label{
    min-width:0!important;
    gap:5px!important;
    font-size:10px!important;
  }

  body.bv-r57-mobile .prompt-generate-button,
  body.bv-r57-mobile .prompt-clear-button,
  body.bv-r57-mobile .prompt-apply-button,
  body.bv-r57-mobile .film-generate-button,
  body.bv-r57-mobile .film-save-button{
    width:100%!important;
    min-height:40px!important;
    height:40px!important;
  }

  body.bv-r57-mobile .prompt-toggle-row{
    min-height:54px!important;
    padding:8px 10px!important;
    margin-bottom:7px!important;
  }

  body.bv-r57-mobile .prompt-toggle-row b{
    font-size:11px!important;
  }

  body.bv-r57-mobile .prompt-toggle-row small{
    font-size:9px!important;
  }

  body.bv-r57-mobile .prompt-smart-tip{
    min-width:0!important;
  }

  body.bv-r57-mobile .prompt-featured{
    margin-top:8px!important;
  }

  body.bv-r57-mobile .prompt-feature-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .prompt-feature-card{
    min-height:54px!important;
    grid-template-columns:40px minmax(0,1fr) 18px!important;
    padding:7px 9px!important;
  }

  body.bv-r57-mobile .prompt-feature-card .prompt-glyph{
    width:34px!important;
    height:32px!important;
  }

  body.bv-r57-mobile .prompt-feature-card span:nth-child(2){
    font-size:11px!important;
  }

  body.bv-r57-mobile .prompt-template-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .prompt-template-card{
    min-height:104px!important;
    padding:10px!important;
  }

  body.bv-r57-mobile .prompt-template-card h3{
    font-size:12px!important;
  }

  body.bv-r57-mobile .prompt-template-card p{
    font-size:9px!important;
  }

  body.bv-r57-mobile .film-selects{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  body.bv-r57-mobile .film-story-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  body.bv-r57-mobile .film-story-grid button{
    min-height:86px!important;
    padding:8px!important;
  }

  body.bv-r57-mobile .film-switch-grid,
  body.bv-r57-mobile .film-style-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  /* ==========================================================
     CONNECTIONS — undo tall desktop cards on phones
     (also overrides old R56 fixed 350px mobile heights)
     ========================================================== */

  body.bv-r57-mobile .connections-r42 .r42-platform-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    align-items:start!important;
  }

  body.bv-r57-mobile .connections-r42 .r42-platform-grid > .r44-platform-card,
  body.bv-r57-mobile .connections-r42 .r42-platform-grid > .r44-platform-card.r42-facebook{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding:12px!important;
    overflow:hidden!important;
  }

  body.bv-r57-mobile .connections-r42 .r44-platform-copy{
    padding-bottom:0!important;
  }

  body.bv-r57-mobile .connections-r42 .r52-facebook-pages,
  body.bv-r57-mobile .connections-r42 .r42-platform-grid > .r44-platform-card.r42-facebook .r44-card-actions,
  body.bv-r57-mobile .connections-r42 .r44-card-actions{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin:9px 0 0!important;
  }

  body.bv-r57-mobile .connections-r42 .r56-fanpage-simple{
    height:48px!important;
    min-height:48px!important;
  }

  /* ==========================================================
     MODALS / DROPDOWNS / POPOVERS
     ========================================================== */
  body.bv-r57-mobile .modal,
  body.bv-r57-mobile .dialog,
  body.bv-r57-mobile [role="dialog"]{
    max-width:calc(100vw - 18px)!important;
    max-height:calc(100dvh - 22px)!important;
  }

  body.bv-r57-mobile .modal-card,
  body.bv-r57-mobile .dialog-card{
    max-width:calc(100vw - 18px)!important;
    max-height:calc(100dvh - 22px)!important;
    overflow:auto!important;
  }
}

/* Very narrow phones: iPhone SE / compact Android. */
@media screen and (max-width:360px){
  :root{
    --r57-x:8px;
  }

  body.bv-r57-mobile .bv-m12-brand strong{
    font-size:12.5px!important;
  }

  body.bv-r57-mobile .bv-m12-brand img{
    width:29px!important;
    height:29px!important;
  }

  body.bv-r57-mobile .bv-m12-head-btn{
    width:35px!important;
    height:35px!important;
    min-width:35px!important;
    min-height:35px!important;
  }

  body.bv-r57-mobile .video-control-grid,
  body.bv-r57-mobile .prompt-form-row,
  body.bv-r57-mobile .film-selects,
  body.bv-r57-mobile .film-story-grid,
  body.bv-r57-mobile .film-switch-grid,
  body.bv-r57-mobile .film-style-grid{
    grid-template-columns:1fr!important;
  }

  body.bv-r57-mobile #page-body .content-reference-shell .bv87-tabs .bv87-tab{
    min-height:84px!important;
    height:84px!important;
    max-height:84px!important;
  }

  body.bv-r57-mobile .content-reference-actions{
    grid-template-columns:1fr!important;
  }

  body.bv-r57-mobile .bv-m12-bottom-nav span{
    font-size:7.7px!important;
  }
}