/* Phone/tablet layout. Keep this after the desktop stylesheet. */
.sidebar-close{display:none}
@media (max-width:900px) {
  :root{--mobile-player-height:calc(116px + env(safe-area-inset-bottom,0px));--mobile-gutter:16px}
  html,body{width:100%;min-width:0}
  body{overflow-x:clip}
  .app{display:block;min-height:100svh}
  button,a{touch-action:manipulation}
  main{width:100%;max-width:100%;padding:26px max(var(--mobile-gutter),env(safe-area-inset-right)) 24px max(var(--mobile-gutter),env(safe-area-inset-left))}
  .workspace,.sidebar-collapsed .workspace{margin-left:0;width:100%;min-width:0;padding-bottom:calc(var(--mobile-player-height) + 24px);transition:none}
  /* The phone drawer is closed even before JavaScript initializes. */
  .sidebar,.sidebar-collapsed .sidebar{position:fixed;inset:0 auto var(--mobile-player-height) 0;width:min(296px,calc(100vw - 48px));height:auto;z-index:40;padding:26px 20px 18px;box-shadow:16px 0 50px #0715264d;transform:translateX(-110%);visibility:hidden;transition:transform .2s,visibility .2s}
  .sidebar-expanded .sidebar{transform:translateX(0);visibility:visible}
  .sidebar-expanded{overflow:hidden}
  .sidebar-backdrop{display:block;position:fixed;inset:0 0 var(--mobile-player-height) min(296px,calc(100vw - 48px));z-index:35;background:#07152680;backdrop-filter:blur(3px)}
  .sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:27px}
  .sidebar .brand{margin:0;min-width:0;gap:9px}
  .sidebar .sidebar-close{display:flex;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:11px;color:#b5c5dd;border-radius:10px}
  .sidebar .sidebar-close:hover{background:#ffffff12}
  .sidebar .brand img{width:50px;height:36px}
  .sidebar .brand>span{font-size:15px}
  .sidebar .brand small{font-size:8px}
  .sidebar .workspace-label{font-size:10px}
  .sidebar .side-link.selected{font-size:15px;min-height:48px}
  .sidebar .project-nav-item{min-height:64px;gap:13px;padding:12px}
  .sidebar .project-nav-item strong{font-size:15px;line-height:1.45}
  .sidebar .project-nav-item small{font-size:11px;margin-top:4px;display:block}
  .sidebar .song-nav-icon,.sidebar .song-nav-icon svg{width:19px;height:19px}
  .sidebar .studio-account{font-size:13px;min-height:58px}
  .sidebar .studio-account small{font-size:10px}
  .sidebar #project-nav{min-height:100px}
  .sidebar .wave-mark,.sidebar .sidebar-bottom>p{display:none}
  .topbar{height:auto;min-height:72px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:9px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));align-items:center}
  .sidebar-toggle{grid-column:1;grid-row:1}
  .topbar .breadcrumbs{grid-column:2;grid-row:1;min-width:0;font-size:13px;margin:0;gap:0}
  .breadcrumbs>span{display:none}
  .breadcrumbs strong{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .theme-toggle{grid-column:3;grid-row:1}
  .sidebar-toggle,.theme-toggle{width:44px;height:44px;min-width:44px;min-height:44px;padding:12px}
  .sidebar-toggle svg,.theme-toggle svg{height:21px;width:21px}
  .topbar .top-avatar{display:none}
  .topbar .view-toggle{grid-column:1/-1;grid-row:2;width:100%;padding:4px;gap:4px;display:flex;justify-content:stretch}
  .topbar .view-toggle button,.topbar .view-toggle a{min-height:40px;flex:1;font-size:12px;padding:9px 10px}
  .preview-note{font-size:11px;line-height:1.6;min-height:44px;gap:7px;padding:10px 16px;flex-wrap:wrap}
  .preview-note strong{font-size:11px}
  .preview-note>span:last-child{flex-basis:100%;padding-left:12px;font-size:10px}
  .preview-dot{margin-top:0}
  .page-heading,.page-heading:has(#welcome-logo:not([hidden])){display:flex;flex-direction:column;align-items:stretch;gap:18px;margin:0 0 23px;width:100%;min-width:0}
  .heading-identity{width:100%;min-width:0;gap:13px;align-items:flex-start}
  .heading-identity>div{min-width:0;flex:1}
  .heading-identity .eyebrow{font-size:10px;line-height:1.5}
  .heading-identity h1{font-size:clamp(26px,7.5vw,34px);line-height:1.2;letter-spacing:-.045em;margin-top:9px;overflow-wrap:anywhere}
  .page-heading p{font-size:14px;line-height:1.65;max-width:none;margin-top:11px}
  .artist-logo{width:66px;height:74px;margin-top:4px;border-radius:14px}
  .artist-logo .logo-prompt{font-size:7px}
  .artist-logo>svg{height:25px;width:25px}
  .heading-identity .membership-line{font-size:11px;line-height:1.5;display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;align-items:flex-start}
  .tenure-badge{font-size:10px;padding:4px 9px;white-space:normal}
  .page-heading .heading-actions,.page-heading:has(#welcome-logo:not([hidden])) .heading-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-self:stretch;width:100%;margin:0!important;min-width:0}
  .page-heading:has(#upload-open[hidden]) .heading-actions{grid-template-columns:minmax(0,1fr)}
  .page-heading .heading-actions .button,.page-heading .heading-actions .button.primary,.page-heading .heading-actions .button.secondary{font-size:13px;line-height:1.4;min-height:48px;width:100%;min-width:0;white-space:normal;gap:8px;padding:12px 10px;margin:0}
  .page-heading .heading-actions .button svg,.page-heading .heading-actions .button.primary svg,.page-heading .heading-actions .button.secondary svg{width:17px;height:17px}
  .project-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}
  .project-card{min-width:0;display:flex;gap:10px;padding:15px 12px;align-items:flex-start;border-radius:10px}
  .project-card .card-icon{height:32px;width:32px;flex:0 0 32px}
  .project-card .card-icon svg{height:16px;width:16px}
  .project-card>span:not(.card-icon){min-width:0}
  .project-card strong{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
  .project-card small{font-size:10px;line-height:1.65;margin-top:5px;overflow-wrap:anywhere}
  .project-card .chevron{display:none}
  .project-detail{width:100%;min-width:0;border-radius:12px}
  .project-header{display:grid;grid-template-columns:58px minmax(0,1fr);gap:9px 14px;padding:23px 17px;align-items:center}
  .project-header>div{min-width:0}
  .project-art{width:58px;height:64px;grid-column:1;grid-row:1/3}
  .project-art span{width:4px;height:22px}
  .project-art span:nth-child(2n){height:33px}
  .project-art span:nth-child(3){height:44px}
  .project-header .eyebrow{font-size:9px;overflow-wrap:anywhere}
  .project-header h2{font-size:27px;line-height:1.2;overflow-wrap:anywhere}
  .project-header p{font-size:12px;line-height:1.5;margin-top:7px}
  .project-status{position:static;grid-column:2;grid-row:2;justify-self:start;margin:0;font-size:11px;gap:7px}
  .section-tabs{padding:0 16px;gap:23px;overflow-x:auto;scrollbar-width:none}
  .section-tabs>button{font-size:13px;white-space:nowrap;flex-shrink:0;min-height:56px;gap:6px;padding:17px 0 15px}
  .section-tabs>button span{font-size:10px;padding:2px 5px}
  .file-toolbar{padding:17px 15px;gap:12px}
  .file-toolbar>span{display:none}
  .search-wrap{max-width:none;min-height:46px;width:100%;padding:10px 12px;gap:9px}
  .search-wrap svg{height:17px;width:17px}
  .search-wrap input{font-size:16px;min-width:0}
  .table-heading{display:none}
  .file-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:11px 8px;min-height:0;padding:17px 15px;align-items:center}
  .file-name{grid-column:1/-1;gap:12px;min-width:0}
  .file-name>div{min-width:0}
  .file-name strong,.older-version .file-name strong{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
  .file-name small{font-size:11px;gap:6px;line-height:1.65;flex-wrap:wrap;margin-top:6px}
  .version-chip{font-size:10px;padding:3px 6px}
  .file-play,.file-type{width:44px;height:44px;flex-shrink:0}
  .file-play svg,.file-type svg{width:17px;height:17px}
  .file-row .file-date{display:none}
  .file-row .review-badge{grid-column:1;grid-row:2;font-size:10px;line-height:1.4;padding:5px 8px}
  .file-actions{grid-column:2;grid-row:2;display:flex;gap:8px;justify-content:flex-end}
  .version-toggle{font-size:12px;gap:6px;min-height:44px;padding:8px 5px}
  .version-toggle svg{height:15px;width:15px}
  .download{height:44px;width:44px;min-height:44px;min-width:44px}
  .download svg{height:20px;width:20px}
  .older-version{min-height:0}
  .older-version .file-name{padding-left:10px}
  .older-version .file-play{width:40px;height:40px}
  .file-footnote{font-size:11px;line-height:1.75;align-items:flex-start;gap:8px;padding:15px}
  .file-footnote svg{height:14px;width:14px;margin-top:3px}
  .chat-heading{gap:11px;padding:18px 15px;align-items:center}
  .chat-heading>div:not(.chat-participants){min-width:0}
  .chat-heading>div>strong{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
  .chat-heading p{font-size:11px;line-height:1.6;margin-top:4px}
  .chat-participants{flex-shrink:0;padding-right:0}
  .participant{height:32px;width:32px;font-size:9px}
  .chat-project-label{display:none}
  .chat-thread{height:clamp(280px,52svh,470px);min-height:240px;padding:20px 13px 14px;-webkit-overflow-scrolling:touch}
  .chat-date{font-size:10px;line-height:1.6;margin-bottom:22px}
  .chat-message{max-width:95%;margin-bottom:21px}
  .message-label{font-size:10px;margin-bottom:7px}
  .message-bubble{padding:13px 14px;min-width:0;max-width:100%}
  .message-bubble>p{font-size:15px;line-height:1.65}
  .message-references{gap:9px;margin-top:12px}
  .message-reference{display:flex;gap:8px;min-width:0;width:100%;padding:10px 9px;min-height:57px}
  .reference-icon{width:29px;height:31px;flex-shrink:0}
  .reference-icon svg{width:15px;height:15px}
  .reference-description{min-width:0;flex:1}
  .reference-description strong{font-size:12px;line-height:1.5}
  .reference-description small{font-size:10px;line-height:1.5}
  .reference-time{font-size:12px;gap:5px;padding:7px 8px;max-width:100%;white-space:nowrap}
  .reference-time svg{width:9px;height:9px}
  .reference-whole{font-size:10px}
  .message-lower{gap:7px;margin-top:5px}
  .message-lower time{font-size:9px}
  .message-actions{gap:2px}
  .message-actions button{min-width:38px;min-height:38px;padding:8px;gap:5px}
  .message-actions button>svg{width:15px;height:15px}
  .message-actions button>span{font-size:10px}
  .reaction-pill{min-height:32px;min-width:36px;font-size:10px;padding:6px 9px;gap:5px}
  .reaction-pill svg{height:13px;width:13px}
  .quoted-message{padding:9px 10px;margin-bottom:11px}
  .quoted-message strong{font-size:11px;line-height:1.5}
  .quoted-message>span{font-size:12px;line-height:1.6}
  .chat-composer{padding:15px 13px 17px;scroll-margin-bottom:calc(var(--mobile-player-height) + 20px)}
  .message-input-wrap{gap:8px;align-items:flex-end;min-width:0;padding:7px 7px 7px 13px;border-radius:26px}
  .message-input-wrap textarea{font-size:16px;line-height:1.5;min-height:44px;max-height:180px;min-width:0;padding:10px 0}
  .send-message{height:44px;width:44px;min-height:44px;min-width:44px}
  .send-message svg{height:20px;width:20px}
  .composer-tools{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:13px 0 0}
  .composer-tools>span{display:none}
  .tag-file{min-height:52px;width:100%;padding:10px 16px;justify-content:center;gap:12px}
  .tag-file>svg{height:25px;width:25px}
  .tag-file>span{font-size:14px;line-height:1.4}
  .tag-file small{font-size:10px;line-height:1.5;margin-top:2px}
  .draft-tag{font-size:11px;line-height:1.6;padding:7px 7px 7px 10px;gap:7px}
  .draft-tag>svg{height:15px;width:15px}
  .draft-tag button{min-width:32px;min-height:32px;flex-shrink:0}
  .draft-tag button svg{height:15px;width:15px}
  .reply-preview{gap:10px;padding:11px 12px;min-width:0}
  .reply-preview>div{min-width:0;flex:1}
  .reply-preview strong{font-size:11px;line-height:1.5}
  .reply-preview span{font-size:12px;line-height:1.6}
  .reply-preview>button{min-height:38px;min-width:38px;display:flex;align-items:center;justify-content:center}
  .reply-preview>button svg{height:17px;width:17px}
  .player{height:var(--mobile-player-height);display:grid;position:fixed;inset:auto 0 0;grid-template-columns:minmax(0,1fr) 140px;grid-template-rows:48px 30px;align-content:center;gap:5px 9px;padding:10px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));z-index:10}
  .player-track{width:auto;min-width:0;gap:9px}
  .mini-cover{height:34px;width:34px;flex-shrink:0}
  .mini-cover svg{height:17px;width:17px}
  .player-track>div{min-width:0}
  .player-track strong{font-size:12px;line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .player-track span{font-size:9px;line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
  .playback{gap:4px;justify-content:flex-end}
  .playback .icon-button{height:40px;width:40px;min-height:40px;min-width:40px;padding:10px}
  .playback .icon-button svg{height:17px;width:17px}
  .play-button{height:44px;width:44px;min-height:44px;min-width:44px}
  .play-button svg{height:16px;width:16px}
  .seek{grid-column:1/-1;grid-row:2;gap:10px;width:100%;min-width:0}
  .seek span{font-size:11px;min-width:31px}
  .seek input[type=range]{height:24px;min-width:0}
  .player .volume{display:none}
  .workspace-footer{font-size:8px;line-height:1.7;margin-top:23px;flex-wrap:wrap}
  .history-panel{padding:24px 18px}
  .event{gap:14px;padding-bottom:26px}
  .event strong{font-size:14px;line-height:1.65;overflow-wrap:anywhere}
  .event p{font-size:11px;line-height:1.65}
  dialog{width:min(600px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:22px 19px;border-radius:16px;overflow-y:auto;overscroll-behavior:contain}
  .dialog-heading{gap:13px;align-items:flex-start}
  .dialog-heading>div{min-width:0}
  .dialog-heading .eyebrow{font-size:10px;line-height:1.6}
  .dialog-heading h2{font-size:28px;line-height:1.2;overflow-wrap:anywhere}
  .dialog-heading .icon-button{height:44px;width:44px;min-height:44px;min-width:44px;margin:-5px -6px 0 0;padding:11px}
  .dialog-heading .icon-button svg{height:21px;width:21px}
  .dialog-intro{font-size:14px;line-height:1.65;margin:17px 0 23px}
  dialog label:not(.dropzone):not(.checkbox){font-size:14px;line-height:1.5}
  dialog input[type=text],dialog input[type=date],dialog input[type=search],dialog select,dialog textarea{font-size:16px!important;line-height:1.5;min-height:48px;width:100%;min-width:0;padding:11px 12px}
  dialog .button{font-size:14px;line-height:1.4;min-height:48px;padding:12px 15px;white-space:normal;min-width:0}
  .dialog-actions{gap:10px;margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .field-hint,.profile-logo-row .field-hint{font-size:12px;line-height:1.7}
  .form-error{font-size:13px;line-height:1.6}
  .dropzone{min-height:145px;padding:22px 16px}
  .dropzone strong{font-size:15px;line-height:1.6}
  .dropzone span{font-size:11px;line-height:1.65}
  .dropzone svg{height:28px;width:28px}
  .checkbox{font-size:13px;line-height:1.6;gap:10px;align-items:flex-start}
  .checkbox input{width:19px;height:19px;flex-shrink:0}
  .profile-logo-row{gap:16px;align-items:center;margin-bottom:22px}
  .profile-logo-preview{height:78px;width:78px;flex-shrink:0}
  .logo-picker{font-size:13px!important;line-height:1.5;min-height:46px;padding:10px 12px}
  .logo-picker svg{height:16px;width:16px}
  .remove-logo{font-size:12px;min-height:40px;padding:8px 0;margin-top:6px}
  .profile-member-summary{font-size:12px;line-height:1.7}
  .reference-player-panel{padding:18px 15px;margin-top:22px}
  .reference-track-art{height:40px;width:40px}
  .reference-now>div{min-width:0}
  .reference-now strong{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
  .reference-now>div>span{font-size:12px;line-height:1.5}
  .reference-transport{gap:12px;margin-top:20px}
  .reference-play{height:46px;width:46px;min-height:46px;min-width:46px}
  .reference-play svg{height:17px;width:17px}
  .reference-timeline{padding-top:10px;min-width:0}
  #reference-scrub{height:26px;min-height:26px;padding:0;margin:0;border:0;background:transparent}
  .reference-time-labels{font-size:12px;line-height:1.5;margin-top:4px}
  .reference-point-choice{font-size:13px!important;line-height:1.7;gap:10px;padding-top:18px!important}
  .reference-point-choice strong{font-size:13px;margin-left:5px}
  .reference-point-choice input{width:20px;height:20px;flex-shrink:0;margin-top:3px}
  .reference-point-choice small{font-size:11px;line-height:1.65;margin-top:5px}
  #toast{bottom:calc(var(--mobile-player-height) + 16px);font-size:13px;line-height:1.6;padding:12px 16px;width:max-content;max-width:calc(100vw - 32px)}
}
@media(max-width:380px){
  :root{--mobile-gutter:13px}
  .project-cards{grid-template-columns:minmax(0,1fr)}
  .project-card{padding:14px;align-items:center}
  .project-card strong{font-size:14px}
  .project-card small{font-size:11px}
  .heading-identity{gap:11px}
  .artist-logo{width:58px;height:67px}
  .heading-identity h1{font-size:26px}
  .section-tabs{gap:17px;padding-inline:14px}
  .section-tabs>button{font-size:12px}
  .reference-time{font-size:11px;padding:7px 6px;gap:4px}
  .reference-description strong{font-size:11px}
  .message-reference{gap:6px;padding:9px 7px}
  .player{grid-template-columns:minmax(0,1fr) 132px;gap:5px 7px;padding-inline:11px}
  .mini-cover{display:none}
  .profile-logo-row{gap:12px;align-items:flex-start}
  .profile-logo-preview{height:64px;width:64px}
}
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  .sidebar .brand{margin-bottom:18px}
  .sidebar .workspace-label,.sidebar .side-rule,.sidebar .sidebar-bottom{display:none!important}
  .sidebar #project-nav{min-height:0}
  .sidebar .project-nav-item{min-height:50px;padding:9px 12px}
  dialog{max-height:calc(100dvh - 16px);padding:18px}
  .chat-thread{height:260px}
}

.app-load-notice{font:14px/1.7 Westwave,Arial,sans-serif;padding:18px 20px;background:#e6eefc;color:#385b8e;border-bottom:1px solid #c9d9f3;max-width:100%;overflow-wrap:anywhere}