.pdf-workspace { padding:16px; } #pdfContainer { position:relative; width:100%; min-height:380px; display:flex; flex-direction:column; align-items:center; padding:16px 0; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:8px; } #loadingMessage { position:absolute; inset:0; background:var(--bg); z-index:1; color:var(--muted); } .page-container { background:white; box-shadow:0 4px 20px #0002; max-width:100%; overflow:hidden; } .page-container canvas { display:block; } .controls { display:flex; justify-content:center; margin-top:16px; } .controls .btn-group { flex-wrap:wrap; justify-content:center; gap:6px; } .controls .btn { font-size:12px; } .actionButton { display:flex; justify-content:center; margin-top:12px; } .actionButton .btn { margin:0; } .pdf-workspace.fullscreen-mode { position:fixed; inset:0; width:100%; height:100dvh; z-index:9999; background:var(--bg); padding:0; border:0; border-radius:0; display:flex; flex-direction:column; } .fullscreen-mode #pdfContainer { flex:1; height:100%; min-height:0; padding:0; border:0; border-radius:0; justify-content:center; } .fullscreen-mode .controls { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); margin:0; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); max-width:calc(100% - 24px); width:max-content; z-index:2; } .fullscreen-mode .actionButton { display:none; } @media(max-width:600px) { .pdf-workspace { padding:10px; } .controls .btn { padding:7px 10px; } }