/* Mobile web: no UA sniffing; desktop layout remains unchanged. */ .mobile-studio-nav,.mobile-preview-tools,.mobile-feature-menu,#mobileEraseSurface { display:none; } .render-recovery-note,.mobile-save-help { font-size:12px; line-height:1.6; overflow-wrap:anywhere; } .video-container.rendered-output #mainVideoPlayer { width:100%!important; height:100%!important; left:0!important; top:0!important; transform:none!important; object-fit:contain!important; } .video-container.rendered-output .layout-title-preview,.video-container.rendered-output .layout-bottom-preview, .video-container.rendered-output .ad-label-preview,.video-container.rendered-output .blur-overlay-box, .video-container.rendered-output .caption-preview-overlay,.video-container.rendered-output .cta-banner-overlay { display:none!important; } @media (max-width:720px) { /* Beta admin remains permission-gated, with a phone-sized scrolling dialog. */ .dashboard-shell #openAdminBtn { min-height:44px; white-space:nowrap; } #adminModal { width:100%; height:100dvh; } #adminModal .admin-modal { width:calc(100% - 16px); max-width:600px; max-height:calc(100dvh - 24px); padding:0; gap:0; overflow:hidden; } #adminModal .modal-header { flex-shrink:0; padding:14px 16px; } #adminModal .modal-header h3 { font-size:20px; color:#17253D; } #adminModal .modal-close { min-width:44px; min-height:44px; color:#526078; } #adminModal .admin-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex-shrink:0; gap:4px; padding:10px 12px 0; } #adminModal .admin-tabs button { min-width:0; min-height:44px; padding:7px 3px; font-size:12px; } #adminModal .admin-tabs span { margin-left:2px; } #adminModal .admin-panel { flex:1 1 auto; min-height:0; max-height:none; padding:16px; overflow-y:auto; overscroll-behavior:contain; } #adminModal .admin-payment-item { align-items:stretch; flex-direction:column; gap:12px; padding:16px 0; } #adminModal .admin-payment-item strong,#adminModal .admin-payment-item small { overflow-wrap:anywhere; } #adminModal .admin-payment-item>div:last-child:not(:first-child) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #adminModal button { min-height:44px; } #adminModal .admin-user-toolbar { align-items:stretch; flex-direction:column; } #adminModal .admin-user-toolbar strong,#adminModal .admin-user-identity strong,#adminModal .admin-support-heading strong { color:var(--text-primary,#17253D); } #adminModal input,#adminModal textarea,#adminModal select { max-width:100%; min-width:0; min-height:44px; font-size:16px; } #adminModal #adminUserSearch { width:100%; } #adminModal .admin-user-item { grid-template-columns:38px minmax(0,1fr); gap:10px; padding:16px 0; } #adminModal .admin-user-identity strong,#adminModal .admin-user-identity small { white-space:normal; overflow-wrap:anywhere; font-size:12px; } #adminModal .admin-user-meta,#adminModal .admin-user-date { grid-column:2; } #adminModal .admin-user-date small { white-space:normal; overflow-wrap:anywhere; font-size:11px; } #adminModal .admin-user-actions { grid-column:1 / -1; grid-row:auto; justify-content:stretch; } #adminModal .admin-plan-btn { width:100%; font-size:13px; } #adminModal .admin-support-actions { grid-template-columns:1fr; } .dashboard-shell>.app-layout { padding-bottom:calc(90px + env(safe-area-inset-bottom)); } .app-sidebar { position:static; } .sidebar-nav { display:flex; flex-direction:row; gap:6px; } .sidebar-nav .sidebar-nav-item { width:auto; flex:0 0 auto; } #studioView { min-width:0; gap:14px; } #studioView .controls-panel,#studioView .preview-panel,#studioView .step-card { min-width:0; max-width:100%; } #studioView:not(.mobile-preview)>.preview-panel { display:none; } #studioView.mobile-preview>.controls-panel { display:none; } #studioView:not(.mobile-preview)>.mobile-feature-menu { display:block; } .mobile-feature-menu>strong,.mobile-preview-tools>strong { font-size:16px; } .mobile-feature-menu>p { margin:6px 0 12px; font-size:12px; color:var(--text-secondary,#526078); } .mobile-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .mobile-feature-grid button { text-align:left; padding:12px 8px; background:var(--bg-card,#fff); color:var(--text-primary,#182238); border:1px solid #c2cee0; border-radius:12px; font-size:13px; font-weight:750; } .mobile-feature-grid small { display:block; font-size:10px; font-weight:400; margin-top:5px; } .mobile-feature-grid button[aria-pressed="true"],#mobileDrawToggle[aria-pressed="true"] { background:#eaf1ff; color:#1748b2; border-color:#2c68fb; box-shadow:inset 0 0 0 1px #2c68fb; } #studioView .controls-panel .step-card,[id$="EditorTitle"],#voiceSelect,#scriptToneSelect { scroll-margin-top:12px; } /* Editing steps stay visible in document order; feature tiles are jump links. */ #studioView .controls-panel>#keywordDiscoveryCard { order:2; } #studioView .controls-panel>.render-action-card { order:1; } #studioView .preview-panel { position:static; } .mobile-studio-nav { display:flex; position:fixed; z-index:80; bottom:0; left:0; right:0; gap:6px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:var(--bg-card,#fff); border-top:1px solid #91a4c3; box-shadow:0 -3px 18px #0002; } .mobile-studio-nav button { flex:1; min-width:0; min-height:46px; border:1px solid #a2b5d3; border-radius:10px; background:var(--bg-card,#fff); color:var(--text-primary,#182238); font-size:14px; font-weight:700; } .mobile-studio-nav button[aria-pressed="true"],#mobileRenderBtn { background:#2c68fb; color:white; } .mobile-preview-tools { display:block; padding:10px 0; } .mobile-preview-tools button { min-height:44px; padding:8px 15px; border:1px solid #7395d8; border-radius:10px; background:#eef3ff; color:#163d91; } .mobile-preview-tools p { font-size:13px; line-height:1.5; margin-top:8px; } .mobile-preview-tools p:empty { display:none; } #studioView .preview-card { padding:12px; } #studioView .card-header { flex-wrap:wrap; gap:10px; } #studioView .card-header h2 { font-size:14px; } #studioView .phone-viewport { width:min(320px,100%); height:auto; aspect-ratio:9 / 16; border-width:0; border-radius:14px; } #studioView .step-body { padding:14px; } #studioView .step-header { padding:14px; } #studioView input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),#studioView select,#studioView textarea { font-size:16px; max-width:100%; min-width:0; } #studioView button,#studioView .btn-download,#studioView .btn-secondary { min-height:44px; } #studioView .field-row,#studioView .form-row,#studioView .btn-group { flex-wrap:wrap; } #studioView .field-col { min-width:0; } #studioView .script-line-item { flex-wrap:wrap; } #studioView .script-line-item .scene-input { min-width:0; flex-basis:100%; } #studioView .scene-time-controls { flex-wrap:wrap; } #studioView .trim-header { flex-wrap:wrap; } #studioView .timeline-header-actions { width:100%; flex-wrap:wrap; } #studioView .scene-time-controls input { width:75px; } #studioView .video-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #studioView .timeline-handle { width:28px; touch-action:none; } #studioView .filmstrip-timeline { touch-action:pan-y; } #studioView .blur-resize-handle { width:36px; height:36px; right:-10px; bottom:-10px; } #studioView[data-mobile-tool] #mainVideoPlayer, #studioView[data-mobile-tool] #layoutTitlePreview, #studioView[data-mobile-tool] #layoutBottomPreview, #studioView[data-mobile-tool] #adLabelPreview, #studioView[data-mobile-tool] #previewCaption, #studioView[data-mobile-tool] #blurGuideBox { pointer-events:none; } #studioView[data-mobile-tool="scroll"] #mainVideoPlayer, #studioView[data-mobile-tool="direct"] #mainVideoPlayer, #studioView[data-mobile-tool="direct"] #layoutTitlePreview, #studioView[data-mobile-tool="direct"] #layoutBottomPreview, #studioView[data-mobile-tool="direct"] #adLabelPreview, #studioView[data-mobile-tool="direct"] #previewCaption, #studioView[data-mobile-tool="direct"] #blurGuideBox { pointer-events:auto; } #studioView[data-mobile-tool="direct"] #adLabelPreview, #studioView[data-mobile-tool="direct"] #previewCaption, #studioView[data-mobile-tool="direct"] #layoutTitlePreview, #studioView[data-mobile-tool="direct"] #layoutBottomPreview { min-height:32px; min-width:44px; touch-action:none; } #studioView[data-mobile-tool="draw"] #mobileEraseSurface { display:block; position:absolute; inset:0; z-index:36; touch-action:none; } #studioView .preview-player-controls { z-index:40; } #studioView .preview-fullscreen-btn { z-index:45; } #studioView #previewCtaBanner { pointer-events:none; } #studioView input[type="range"] { min-height:32px; } #studioView .preview-player-controls button,#studioView .preview-fullscreen-btn { min-width:44px; min-height:44px; } #studioView .preview-fullscreen-btn { bottom:56px; } #studioView .blur-tag { max-width:100%; white-space:normal; font-size:10px; } #studioView:not(.mobile-position-edit) #mainVideoPlayer, #studioView:not(.mobile-position-edit) #videoWrapper [id$="Preview"], #studioView:not(.mobile-position-edit) #previewCaption, #studioView:not(.mobile-position-edit) #blurGuideBox { touch-action:pan-y; } #studioView:not(.mobile-position-edit) #videoWrapper .blur-resize-handle { pointer-events:none; } #studioView.mobile-expanded::before { content:''; position:fixed; inset:0; z-index:1000; background:#05070a; } #studioView.mobile-expanded .phone-viewport { position:fixed; z-index:1001; top:50%; left:50%; transform:translate(-50%,-50%); width:min(100vw,56.25vh); width:min(100vw,56.25dvh); max-width:none; border-radius:0; } #studioView.mobile-expanded .mobile-studio-nav { display:none; } .commercial-modal,.login-modal,.admin-modal { max-height:90vh; max-height:90dvh; overflow:auto; } .commercial-modal input,.commercial-modal select,.login-modal input { font-size:16px; } }