/* Phone layouts only. Existing desktop styles and permission gates remain authoritative. */
.mobile-nav-toggle{display:none}
@media(max-width:860px){
 .appbar{height:auto;min-height:64px;flex-wrap:wrap;gap:8px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left))}
 .brand{min-width:0}.brand small{display:none}
 .mobile-nav-toggle{display:inline-flex;min-height:44px;margin-left:auto;gap:8px}
 .mobile-nav-toggle[aria-expanded="true"]{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
 .appbar #mainNav{display:none;width:100%;max-height:calc(100dvh - 90px);overflow-y:auto;padding:8px 0 4px;border-top:1px solid var(--border)}
 .appbar #mainNav.mobile-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:stretch}
 #mainNav>.nav-link,#mainNav>.user-chip,#mainNav>button,#mainNav .nav-menu>summary{min-height:44px;display:flex;align-items:center;padding:10px 12px;border-radius:9px;white-space:normal}
 #mainNav>.user-chip{max-width:none;border-radius:9px}
 #mainNav .nav-menu{grid-column:1/-1}
 #mainNav .nav-menu-list{position:static;min-width:0;width:100%;box-shadow:none;margin-top:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 #mainNav .nav-menu-list .nav-link{min-height:44px;white-space:normal}
}
@media(max-width:680px){
 main{padding:18px max(12px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 main>section,.panel,.queue-section,.am-pane,.am-console,.rr-panel{min-width:0;max-width:100%}
 h1{font-size:25px}.page-title{gap:12px;margin-bottom:16px}.page-title p{font-size:13px}
 button,.button,.output-link,.row-open,.am-link{min-height:44px;touch-action:manipulation}
 button:hover,.button:hover{transform:none}.icon-btn,.small-icon{width:44px;height:44px}
 input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px;max-width:100%}
 input:not([type="checkbox"]):not([type="radio"]),select{min-height:44px}
 button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
 .stat-grid,.status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{min-width:0}.stat-card>b{font-size:25px}
 .filter-tabs,.tabs,.am-tabs{max-width:100%;overscroll-behavior-x:contain;scrollbar-width:thin}
 .filter-tabs button,.tabs button{flex:none;min-height:44px}
 .queue-toolbar{padding:12px;gap:12px}.queue-toolbar>.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .queue-toolbar .list-filter{width:100%;min-width:0}.queue-toolbar .list-search{grid-column:1/-1;width:100%}
 .queue-toolbar .job-retry{grid-column:1/-1;white-space:normal}.inline-limit{min-width:0;flex-wrap:wrap}
 .field-foot{flex-wrap:wrap;gap:8px}.composer-panel{padding:14px}.launch-pane{min-width:0}
 .job-table-wrap{width:100%;max-width:100%;min-width:0;overscroll-behavior-x:contain}
 /* Card tables have real, header-derived cell labels; detail and colspan rows stay separate. */
 .queue-table,.am-job-table,.am-page-table{display:block;width:100%;min-width:0;border-collapse:separate}
 .queue-table thead,.am-job-table thead,.am-page-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .queue-table tbody,.am-job-table tbody,.am-page-table tbody{display:block;padding:10px}
 .am-job-table thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;display:block;padding:10px 12px 0}
 .am-job-table thead tr{display:flex;flex-wrap:wrap;gap:6px}.am-job-table thead th{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .am-job-table thead th:has(button){position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;display:block;padding:0;border:0;background:transparent;font-size:12px;text-transform:none;letter-spacing:0}
 .am-job-table thead button.th-sort{min-height:44px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
 :is(.queue-table,.am-job-table,.am-page-table) tr.mobile-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-bottom:10px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:default}
 :is(.queue-table,.am-job-table,.am-page-table) tr.mobile-card>td{display:block;width:auto;min-width:0;max-width:none;padding:0;border:0;white-space:normal;text-align:left;overflow-wrap:anywhere;box-shadow:none}
 :is(.queue-table,.am-job-table,.am-page-table) tr.mobile-card>td::before{content:attr(data-mobile-label);display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.02em}
 .queue-table tr.mobile-card>.story-col{grid-column:1/-1;grid-row:1;min-width:0;width:auto;max-width:none}
 .queue-table tr.mobile-card>.story-col::before,.am-job-table tr.mobile-card>.am-col-job::before{display:none}
 .queue-table .job-title,.am-job-table .auto-title{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .queue-table .story-cell,.queue-table .story-text{min-width:0}.queue-table .story-text .tiny{overflow-wrap:anywhere}
 .queue-table tr.mobile-card>td:has(.output-links){grid-column:1/-1}.output-links{flex-wrap:wrap}.pipeline-track{min-height:30px}
 .queue-table tr.mobile-card>td:last-child{grid-column:1/-1;border-top:1px solid var(--border);padding-top:8px}
 .queue-table tr.mobile-card>td:last-child::before{display:none}.queue-table .row-open{width:100%;justify-content:space-between;border-radius:8px;background:var(--surface-2);padding:8px 12px;font-size:13px}
 .queue-table .row-open::before{content:'Mở project';font-weight:650}.queue-table tr.expanded{border-color:var(--brand)}
 .queue-table .quick-row{display:block}.queue-table .quick-row>td{display:block;width:100%;padding:0}
 .am-job-table tr.mobile-card>.am-col-job{grid-column:1/-1;min-width:0;width:auto}.am-job-table .am-col-state{min-width:0}
 .am-job-table tr.mobile-card>.am-col-error,.am-job-table tr.mobile-card>.am-col-actions{grid-column:1/-1;min-width:0;max-width:none}
 .am-job-table .am-col-actions{white-space:normal;display:flex;flex-wrap:wrap;gap:8px}.am-job-table .am-col-actions button{width:100%;margin:0}
 .am-job-table .am-row-attention{border-left:3px solid var(--red)}.am-job-table .am-row-attention td{background:transparent}
 .am-job-table tbody tr:not(.mobile-card),.am-job-table tbody tr:not(.mobile-card)>td{display:block;width:100%;padding:0;border:0}
 .am-page-table tr.mobile-card>td:nth-child(2){grid-column:1/-1;grid-row:1;font-weight:700}.am-page-table tr.mobile-card>td:first-child{font-size:12px}
 .am-cards.am-cards-flush{padding:0}.am-fields,.am-fields-2,.am-choice-grid{grid-template-columns:minmax(0,1fr)}
 .am-table .am-col-check input[type="checkbox"]{min-width:0;min-height:0;width:22px;height:22px}
 .am-controls,.am-filterbar,.am-toolbar{min-width:0}.am-search{min-width:0}.am-title-line{flex-wrap:wrap}
 #viewProject .banner,#viewProject .output-card header{flex-wrap:wrap;align-items:flex-start}
 #viewProject .banner>div,#projTitle,.prompt-box,.source-box pre{min-width:0;overflow-wrap:anywhere}
 #viewProject .banner .row{flex-wrap:wrap}.tab-body{padding:12px}.output-card{padding:12px}.media-detail{grid-template-columns:minmax(0,1fr)}
 .publish-tab .inline-select,.quick-schedule .inline-select{flex-wrap:wrap;flex:1 1 100%;min-width:0}
 .publish-tab .inline-select input[type="datetime-local"],.quick-schedule input[type="datetime-local"]{width:100%;min-width:0;max-width:100%;flex:1 1 100%}
 .quick-value>.quick-bar,.quick-value>.quick-manual,.quick-group,.quick-schedule{min-width:0;max-width:100%}
 .quick-value .inline-select{flex-wrap:wrap;min-width:0;width:100%}.quick-value .inline-select select{width:100%;max-width:100%;min-width:0}
 .quick-head,.quick-manual-head{flex-wrap:wrap}.quick-reels li span{overflow-wrap:anywhere;min-width:0}
 .rr-filters>*{min-width:0;max-width:100%}.rr-search{flex:1 1 100%;min-width:0}.rr-two{grid-template-columns:minmax(0,1fr)}.rr-chart{min-width:0}
 .pager{flex-wrap:wrap}.pager>.muted{flex-basis:100%}.facts dd{min-width:0;overflow-wrap:anywhere}
 dialog{width:calc(100% - 20px);max-width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;padding:16px;overscroll-behavior:contain}
 dialog.app-dialog{width:calc(100% - 20px)}.dialog-box{padding:16px;min-width:0}.dialog-box header>h3,.dialog-message{min-width:0;overflow-wrap:anywhere}
 .dialog-box footer,#userDialog .row.end,#settings .row.end{flex-wrap:wrap;gap:8px}.dialog-box footer button{flex:1}
 .toasts,.toasts[popover]{bottom:calc(12px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}.toast{max-width:100%}
}