/* Phone queue first; desktop keeps its existing composer and library. */
.composer #composer-toggle{display:none}
#composer-toggle svg{width:22px;height:22px;color:var(--accent-strong);transition:transform .2s var(--ease)}
#composer-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.records,.composer{scroll-margin-top:88px}
.reader-heading>div:first-child{min-width:0}
.download-menu{max-width:100%}
.form-error,.notice,.library-footer{overflow-wrap:anywhere}

/* A tablet keeps the queue at full width instead of shrinking two columns. */
@media(max-width:980px){
 .work-grid{grid-template-columns:minmax(0,1fr);gap:20px}
 .workspace{padding:24px}
 .composer{padding:20px}
 .composer-content{max-width:640px;margin:auto}
 .composer .field-row{margin-top:20px}
 .composer .select-trigger,.vocabulary textarea,.search-field input{font-size:16px}
 .composer .select-trigger{min-height:48px}
 .segmented span{display:grid;place-items:center;min-height:44px;font-size:14px}
 .composer .toggle-row{min-height:72px;padding:14px 0}
 .toggle-row strong{font-size:14px}
 .toggle-row small,.composer .field-row>label,.quality-field legend{font-size:13px}
 .composer .toggle{width:40px;height:24px;border-radius:12px}
 .composer .toggle:after{position:absolute;width:18px;height:18px;top:3px;left:3px;margin:0}
 .composer .toggle-row input:checked+.toggle:after{transform:translateX(16px)}
 .composer .toggle-row input{width:44px;height:44px;min-height:44px}
 .composer .toggle{position:relative}
 .vocabulary summary{display:flex;align-items:center;min-height:44px;font-size:13px}
 .vocabulary textarea{padding:12px;line-height:1.6}
 .field-hint,.composer .form-error{font-size:12px}
 #quality-hint{min-height:0;margin:10px 0 18px}
 #upload-button{min-height:50px;font-size:15px}
 .clear-file{width:44px;height:44px;right:4px;top:4px}
 .clear-file svg{width:18px;height:18px}
 .select-menu{font-size:16px}
 .select-option{min-height:48px;padding:12px}
 .account-button{min-width:44px;min-height:44px;justify-content:center}
 .drawer-close{width:44px;height:44px}
 .drawer-logout{min-height:52px;font-size:16px}
 .job-actions button{min-height:44px;font-size:13px;padding:10px 12px}
 .job-actions .delete-job{min-width:44px}
 .job-actions .delete-job svg{width:18px;height:18px}
 .filters button{min-width:44px;min-height:44px}
 .download-menu a{min-height:48px;display:flex;align-items:center;font-size:14px}
}

@media(max-width:800px), (max-width:980px) and (max-height:500px){
 body{font-size:16px}
 .topbar{position:sticky;top:0;z-index:8;height:auto;min-height:64px;padding:calc(6px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left))}
 .topbar-end{width:100%;justify-content:space-between;gap:16px}
 .connection{font-size:12px;padding:8px 0;gap:8px}
 .connection>span{display:inline}
 .account-button>span:first-child{width:36px;height:36px;font-size:13px}
 .account-button>span:last-child{display:none}
 .workspace{padding:16px max(16px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .composer{padding:18px;border-radius:14px}
 .composer.collapsed{padding:8px 18px}
 .composer h2{margin:0;font-size:16px;min-height:48px}
 .composer #composer-toggle{display:grid;place-items:center;flex:none;width:48px;min-height:48px;padding:0;border-radius:8px;color:var(--accent-strong)}
 .composer #composer-toggle:active{background:#fee9d4}
 .composer-content{padding-top:16px}
 .composer.collapsed>:not(h2){display:none!important}
 .work-grid,.work-grid:has(.composer.collapsed){gap:16px}
 .dropzone{min-height:132px;padding:18px 16px}
 .upload-symbol{width:36px;height:36px;margin-bottom:10px;border-radius:10px}
 .dropzone .upload-icon{width:21px;height:21px}
 .dropzone strong{font-size:16px;line-height:1.45}
 .dropzone>span:not(.upload-symbol){font-size:12px}
 .dropzone .file-types{margin-top:8px}
 .dropzone.has-file{min-height:112px;padding-right:40px;padding-left:40px}
 .dropzone.has-file strong{padding:0}
 .dropzone.has-file .upload-symbol,.dropzone.has-file .file-types{display:none}
 .processing-settings>summary{min-height:52px;font-size:13px}
 .records{border-radius:14px}
 .records-heading{flex-wrap:wrap;gap:16px;padding:20px 18px 14px}
 .records-heading h2{font-size:20px;gap:10px}
 #record-count{height:24px;min-width:24px;font-size:12px}
 .search-field{width:100%;max-width:none;padding:0 12px;gap:10px}
 .search-field input{min-height:46px;font-size:16px;padding:10px 0}
 .search-field svg{width:18px;height:18px}
 .filters{padding:0 12px 14px;gap:4px;overscroll-behavior-x:contain;scroll-padding:12px}
 .filters button{flex:none;min-height:44px;padding:10px;font-size:13px;border-radius:8px;gap:5px}
 .filters button span{font-size:11px}
 .job{grid-template-columns:36px minmax(0,1fr);gap:10px 12px;padding:20px 18px}
 .job-symbol{width:36px;height:40px;border-radius:9px;align-self:start}
 .job-title{font-size:16px;line-height:1.5;-webkit-line-clamp:3}
 .job-meta{font-size:12px;line-height:1.65;gap:3px 10px}
 .job-meta span+span:before{display:none}
 .job-meta .job-worker{flex-basis:100%;overflow-wrap:anywhere}
 .job-right{grid-column:1 / -1;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
 .status-label{font-size:12px;min-height:28px;padding:5px 8px;text-align:left;max-width:100%}
 .job-actions{gap:6px;margin-left:auto;flex-shrink:0}
 .job-actions button{font-size:13px;min-height:44px;padding:10px 12px;border-radius:8px}
 .job-actions .delete-job{min-width:44px;padding:10px}
 .job-progress,.job-error{grid-column:1 / -1}
 .job-progress{gap:12px;margin-top:2px}
 .job-progress>span{font-size:12px}
 .job-progress progress{height:4px}
 .job-error{font-size:13px;line-height:1.65}
 .empty-state{min-height:280px;padding:32px 24px}
 .empty-state h3{font-size:17px}
 .empty-state p{font-size:14px;line-height:1.65}
 #empty-action{min-height:46px;padding:12px 16px;font-size:14px}
 .library-footer{padding:14px 18px;font-size:12px;line-height:1.6;flex-wrap:wrap;gap:6px 16px}
 #queue-summary{max-width:100%;text-align:left}
 .storage{flex:none}
 .notice{font-size:14px;text-align:left;line-height:1.6}
 .upload-progress{font-size:13px;padding:14px}
 .upload-progress #cancel-upload{min-height:44px;font-size:13px;padding:10px 0}
 .reader-view{padding:16px max(20px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
 .back-button{min-height:44px;margin-bottom:16px;font-size:14px}
 .reader-heading h1{font-size:25px;line-height:1.35;letter-spacing:-.025em;text-wrap:wrap}
 .reader-heading{display:block}
 .reader-heading p{font-size:13px;line-height:1.7;margin-top:10px}
 .reader-actions{position:relative;gap:10px;margin-top:20px;align-items:flex-start}
 .reader-actions button,.reader-actions summary{min-height:48px;font-size:14px;padding:12px}
 .reader-actions>button,.reader-actions>.download-menu{flex:1;min-width:0}
 .download-menu{position:static}
 .download-menu>div{top:calc(100% + 8px);left:0;right:0;min-width:0;max-height:min(340px,60svh);overflow:auto;padding:8px;border-radius:12px;overscroll-behavior:contain}
 .download-menu a{min-height:48px;padding:12px;font-size:15px}
 audio{min-width:0;height:48px;margin:24px 0 16px}
 .reader-tabs{gap:4px;overflow-x:auto;scrollbar-width:none;margin-bottom:24px}
 .reader-tabs button{flex:1;flex-shrink:0;min-height:48px;font-size:14px;padding:12px;text-align:center}
 .transcript{font-size:17px;line-height:1.85}
 .transcript p{margin-bottom:22px}
 .time-row{grid-template-columns:56px minmax(0,1fr);gap:12px;margin-bottom:22px}
 .time-row button{min-height:44px;font-size:13px;padding:8px 0}
 .turn h3{font-size:13px}
 .account-drawer{width:340px;max-width:calc(100vw - 24px);height:100dvh;padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
 .drawer-heading{padding:16px;gap:10px}
 .drawer-content{padding:16px}
 .toast{bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);width:max-content;font-size:14px;padding:12px 16px}
 .login-view{padding:max(32px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));min-height:100svh}
 .login-fields .password-label .text-button{min-height:44px;min-width:68px;font-size:13px;padding:10px 0;text-align:right}
 .login-fields input{font-size:16px}
}

@media(max-width:360px){
 .workspace{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 .records-heading,.job{padding-left:14px;padding-right:14px}
 .composer{padding:16px}
 .composer.collapsed{padding:8px 16px}
 .filters{gap:2px;padding-left:10px;padding-right:10px}
 .filters button{font-size:12px;padding-left:9px;padding-right:9px}
 .reader-view{padding-left:16px;padding-right:16px}
 .reader-actions{gap:8px}
 .reader-actions button,.reader-actions summary{font-size:13px}
 .segmented span{font-size:13px}
 .library-footer{padding-left:14px;padding-right:14px}
 .login-view{padding-left:18px;padding-right:18px}
}

@media(max-width:980px) and (max-height:500px){
 .login-view{align-items:start;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:28px}
 .login-fields{padding-top:32px;padding-bottom:12px}
 .login-fields .password-label{margin-top:12px}
 .login-card .login-submit{min-height:56px;padding-top:14px;padding-bottom:14px}
}

@media(hover:none){.primary:hover:not(:disabled),.dropzone:hover .upload-symbol{transform:none}}