/* Workspace mobile — html.workspace-mobile set in */
.ws-mobile-tabs {
display: none;
}
.mobile-tailor-header,
.mobile-tailor-analysis {
display: none;
}
html.workspace-mobile,
html.workspace-mobile body {
overflow-x: clip !important;
max-width: 100% !important;
}
html.workspace-mobile {
--ws-topbar: 64px;
}
html.workspace-mobile .topbar {
height: auto !important;
min-height: 56px !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
}
html.workspace-mobile .topbar {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
z-index: 30 !important;
background: rgba(250, 250, 250, 0.94) !important;
border-bottom: 1px solid rgba(228, 228, 231, 0.9) !important;
backdrop-filter: blur(18px) !important;
}
html.workspace-mobile .brand-logo {
height: 30px !important;
}
html.workspace-mobile .topbar-center {
order: 3 !important;
flex: 1 1 100% !important;
max-width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
}
html.workspace-mobile .mode-tabs {
flex: 1 1 auto !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
html.workspace-mobile .mode-tabs::-webkit-scrollbar {
display: none !important;
}
html.workspace-mobile .mode-tabs button {
padding: 7px 12px !important;
font-size: 11px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
html.workspace-mobile .mode-tabs button span {
display: inline !important;
}
html.workspace-mobile .top-actions {
margin-left: auto !important;
gap: 6px !important;
flex-wrap: nowrap !important;
}
html.workspace-mobile .save-pill,
html.workspace-mobile #reset-btn,
html.workspace-mobile #templates-btn,
html.workspace-mobile #find-improvements-btn {
display: none !important;
}
html.workspace-mobile .tool-btn {
padding: 8px 10px !important;
font-size: 11px !important;
}
html.workspace-mobile .top-actions .tool-btn.primary {
position: fixed !important;
right: 12px !important;
top: calc(var(--ws-topbar) + 8px) !important;
z-index: 28 !important;
min-height: 44px !important;
padding: 0 16px !important;
border-radius: 999px !important;
box-shadow: 0 16px 34px rgba(24, 24, 27, 0.18) !important;
}
html.workspace-mobile .topbar-center {
display: none !important;
}
html.workspace-mobile .workspace,
html.workspace-mobile body[data-mode="builder"] .workspace,
html.workspace-mobile body[data-mode="tailor"] .workspace,
html.workspace-mobile body[data-mode="compare"] .workspace,
html.workspace-mobile body[data-mode="export"] .workspace,
html.workspace-mobile body.sidebar-editing[data-mode="builder"] .workspace,
html.workspace-mobile body.sidebar-editing[data-mode="tailor"] .workspace {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
height: auto !important;
min-height: calc(100dvh - var(--ws-topbar)) !important;
}
html.workspace-mobile .sidebar,
html.workspace-mobile .center-panel,
html.workspace-mobile .preview-panel {
grid-column: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
html.workspace-mobile .flow-connector {
display: none !important;
}
html.workspace-mobile body[data-mode="builder"] .center-panel,
html.workspace-mobile body[data-mode="tailor"] .flow-connector,
html.workspace-mobile body[data-mode="compare"] .flow-connector,
html.workspace-mobile body[data-mode="export"] .flow-connector {
display: none !important;
}
html.workspace-mobile body[data-mode="tailor"] .center-panel,
html.workspace-mobile body[data-mode="compare"] .center-panel,
html.workspace-mobile body[data-mode="export"] .center-panel {
display: block !important;
border-right: 0 !important;
border-bottom: 1px solid var(--line) !important;
padding: 16px 14px 20px !important;
}
html.workspace-mobile body[data-mode="tailor"] .center-panel {
min-height: calc(100dvh - var(--ws-topbar)) !important;
padding: calc(var(--ws-topbar) + 14px) 14px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
background: #fafafa !important;
}
html.workspace-mobile body[data-mode="tailor"]:not([data-mobile-tailor-step="preview"]):not([data-mobile-tailor-step="result"]) .sidebar,
html.workspace-mobile body[data-mode="tailor"]:not([data-mobile-tailor-step="preview"]):not([data-mobile-tailor-step="result"]) .preview-panel {
display: none !important;
}
html.workspace-mobile .sidebar {
border-right: 0 !important;
border-bottom: 1px solid var(--line) !important;
padding: 16px 14px 20px !important;
max-height: none !important;
}
html.workspace-mobile body[data-mode="builder"] .sidebar {
padding: 16px 14px 20px !important;
}
html.workspace-mobile .preview-panel {
flex: 1 1 auto !important;
min-height: calc(100dvh - var(--ws-topbar)) !important;
display: flex !important;
flex-direction: column !important;
padding-top: var(--ws-topbar) !important;
background: #f4f4f5 !important;
}
html.workspace-mobile .preview-head {
display: none !important;
}
html.workspace-mobile .preview-scroll-container {
min-height: calc(100dvh - var(--ws-topbar)) !important;
padding: 52px 8px 118px !important;
background: linear-gradient(180deg, #f8f8f9 0%, #f0f0f2 100%) !important;
}
html.workspace-mobile .preview-side-controls {
display: none !important;
}
html.workspace-mobile .zoom-dock {
display: flex !important;
bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 26 !important;
background: rgba(24, 24, 27, 0.92) !important;
color: #fff !important;
border-radius: 999px !important;
box-shadow: 0 18px 45px rgba(24, 24, 27, 0.28) !important;
}
html.workspace-mobile .job-meta {
grid-template-columns: 1fr !important;
}
html.workspace-mobile .form-grid {
grid-template-columns: 1fr !important;
}
html.workspace-mobile .editor-drawer,
html.workspace-mobile .improvements-panel {
width: 100% !important;
max-width: 100% !important;
}
html.workspace-mobile .mobile-tailor-header {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
align-items: start !important;
gap: 10px !important;
margin: 0 0 14px !important;
}
html.workspace-mobile .mobile-tailor-back,
html.workspace-mobile .mobile-tailor-preview {
min-height: 40px !important;
border: 1px solid var(--line) !important;
border-radius: 999px !important;
background: #fff !important;
color: var(--ink) !important;
font-weight: 800 !important;
box-shadow: 0 10px 24px rgba(24, 24, 27, 0.08) !important;
}
html.workspace-mobile .mobile-tailor-back {
width: 40px !important;
padding: 0 !important;
font-size: 18px !important;
}
html.workspace-mobile .mobile-tailor-preview {
padding: 0 14px !important;
font-size: 13px !important;
}
html.workspace-mobile .mobile-tailor-preview:disabled {
opacity: 0.45 !important;
}
html.workspace-mobile .mobile-tailor-step {
display: inline-flex !important;
width: fit-content !important;
margin-bottom: 5px !important;
color: #ea580c !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
html.workspace-mobile .mobile-tailor-title {
display: block !important;
color: var(--ink) !important;
font-size: 28px !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
html.workspace-mobile .mobile-tailor-lead {
margin: 8px 0 0 !important;
color: var(--muted) !important;
font-size: 14px !important;
line-height: 1.35 !important;
}
html.workspace-mobile body[data-mode="tailor"] .tailor-head {
display: none !important;
}
html.workspace-mobile body[data-mode="tailor"] #tailor-mode {
display: block !important;
}
html.workspace-mobile body[data-mode="tailor"] #tailor-form,
html.workspace-mobile body[data-mode="tailor"] #tailor-result,
html.workspace-mobile body[data-mode="tailor"] .mobile-tailor-analysis,
html.workspace-mobile body[data-mode="tailor"] #cover-letter-disclosure {
display: none !important;
}
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="job"] #tailor-form,
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="analyzing"] .mobile-tailor-analysis,
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="result"] #tailor-result,
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="result"] #cover-letter-disclosure {
display: block !important;
}
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="preview"] .center-panel {
display: none !important;
}
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="preview"] .preview-panel {
display: flex !important;
}
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="result"] .workspace {
display: flex !important;
flex-direction: column !important;
}
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="result"] .sidebar {
display: none !important;
}
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="result"] .preview-panel {
order: 1 !important;
display: flex !important;
min-height: 58dvh !important;
padding-top: var(--ws-topbar) !important;
}
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="result"] .preview-scroll-container {
min-height: 58dvh !important;
max-height: 58dvh !important;
padding-bottom: 18px !important;
}
html.workspace-mobile body[data-mode="tailor"][data-mobile-tailor-step="result"] .center-panel {
order: 2 !important;
padding-top: 18px !important;
border-top: 1px solid var(--line) !important;
border-bottom: 0 !important;
}
html.workspace-mobile body[data-mode="tailor"] #tailor-form {
padding: 18px !important;
border: 1px solid #e7e5e4 !important;
border-radius: 22px !important;
background: #fff !important;
box-shadow: 0 18px 45px rgba(24, 24, 27, 0.08) !important;
}
html.workspace-mobile body[data-mode="tailor"] #tailor-form .job-meta {
gap: 12px !important;
}
html.workspace-mobile body[data-mode="tailor"] #tailor-form label {
gap: 7px !important;
}
html.workspace-mobile body[data-mode="tailor"] #tailor-form input,
html.workspace-mobile body[data-mode="tailor"] #tailor-form textarea {
min-height: 48px !important;
border-radius: 14px !important;
font-size: 16px !important;
}
html.workspace-mobile body[data-mode="tailor"] #tailor-form textarea[name="jobDescription"] {
min-height: 220px !important;
}
html.workspace-mobile body[data-mode="tailor"] .tailor-action-row {
display: grid !important;
grid-template-columns: 1fr !important;
}
html.workspace-mobile body[data-mode="tailor"] #tailor-form .generate-btn {
width: 100% !important;
margin-top: 4px !important;
min-height: 52px !important;
border-radius: 16px !important;
}
html.workspace-mobile .mobile-tailor-analysis {
padding: 22px !important;
border: 1px solid #e7e5e4 !important;
border-radius: 22px !important;
background: #fff !important;
box-shadow: 0 18px 45px rgba(24, 24, 27, 0.08) !important;
}
html.workspace-mobile .mobile-tailor-analysis strong {
display: block !important;
margin-bottom: 14px !important;
font-size: 22px !important;
color: var(--ink) !important;
}
html.workspace-mobile .mobile-tailor-progress {
height: 8px !important;
overflow: hidden !important;
border-radius: 999px !important;
background: #eceff3 !important;
}
html.workspace-mobile .mobile-tailor-progress span {
display: block !important;
width: 72% !important;
height: 100% !important;
border-radius: inherit !important;
background: linear-gradient(90deg, #f97316, #111827) !important;
animation: mobile-tailor-progress 1.2s ease-in-out infinite alternate !important;
}
html.workspace-mobile .mobile-tailor-analysis ul {
display: grid !important;
gap: 10px !important;
margin: 18px 0 0 !important;
padding: 0 !important;
list-style: none !important;
color: #374151 !important;
font-weight: 800 !important;
}
@keyframes mobile-tailor-progress {
from { transform: translateX(-22%); }
to { transform: translateX(34%); }
}
html.workspace-mobile body[data-mode="tailor"] #tailor-result {
margin-top: 10px !important;
}
html.workspace-mobile body[data-mode="tailor"] .review-head,
html.workspace-mobile body[data-mode="tailor"] .review-topbar {
position: static !important;
}
html.workspace-mobile body[data-mode="tailor"] .review-topbar {
display: grid !important;
gap: 12px !important;
padding: 14px !important;
border: 1px solid #e7e5e4 !important;
border-radius: 18px !important;
background: #fff !important;
}
html.workspace-mobile body[data-mode="tailor"] .review-topbar-actions {
display: grid !important;
grid-template-columns: 1fr !important;
}
html.workspace-mobile body[data-mode="tailor"] .review-change {
padding: 14px !important;
border-radius: 18px !important;
}
html.workspace-mobile body[data-mode="tailor"] .review-change-head,
html.workspace-mobile body[data-mode="tailor"] .review-buttons {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
html.workspace-mobile body[data-mode="tailor"] .review-line {
grid-template-columns: 1fr !important;
}
/* Builder: toggle between edit list and preview */
html.workspace-mobile .ws-mobile-tabs {
display: flex !important;
}
html.workspace-mobile body[data-mode="builder"]:not(.sidebar-editing) .preview-panel,
html.workspace-mobile body[data-mode="builder"]:not(.ws-mobile-show-preview):not(.sidebar-editing) .preview-panel {
display: flex !important;
}
html.workspace-mobile body[data-mode="builder"]:not(.sidebar-editing) .sidebar,
html.workspace-mobile body[data-mode="builder"].ws-mobile-show-preview:not(.sidebar-editing) .sidebar {
position: fixed !important;
left: 8px !important;
right: 8px !important;
bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
z-index: 27 !important;
display: none !important;
max-height: min(58dvh, 520px) !important;
overflow: auto !important;
border: 1px solid var(--line) !important;
border-radius: 20px !important;
background: #fff !important;
box-shadow: 0 24px 70px rgba(24, 24, 27, 0.22) !important;
}
html.workspace-mobile body[data-mode="builder"]:not(.ws-mobile-show-preview):not(.sidebar-editing) .sidebar {
display: block !important;
}
html.workspace-mobile body[data-mode="builder"].sidebar-editing .preview-panel {
display: flex !important;
pointer-events: none !important;
}
html.workspace-mobile body[data-mode="builder"].sidebar-editing .sidebar {
position: fixed !important;
left: 8px !important;
right: 8px !important;
bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
z-index: 40 !important;
display: block !important;
max-height: calc(100dvh - 92px) !important;
overflow: auto !important;
border: 1px solid var(--line) !important;
border-radius: 20px !important;
background: #fff !important;
box-shadow: 0 24px 80px rgba(24, 24, 27, 0.26) !important;
}
html.workspace-mobile body[data-mode="builder"].sidebar-editing .ws-mobile-tabs {
display: none !important;
}
html.workspace-mobile body:not([data-mode="builder"]):not(.ws-mobile-show-preview) .preview-panel {
display: none !important;
}
html.workspace-mobile body:not([data-mode="builder"]).ws-mobile-show-preview .sidebar,
html.workspace-mobile body:not([data-mode="builder"]).ws-mobile-show-preview .center-panel {
display: none !important;
}
html.workspace-mobile body:not([data-mode="builder"]).ws-mobile-show-preview .preview-panel {
display: flex !important;
}
html.workspace-mobile body[data-mode="applications"] .workspace {
display: block !important;
min-height: calc(100dvh - var(--ws-topbar)) !important;
}
html.workspace-mobile body[data-mode="applications"] .center-panel {
display: block !important;
width: 100% !important;
padding: 0 !important;
border: 0 !important;
}
html.workspace-mobile body[data-mode="applications"] #applications-mode {
min-height: calc(100dvh - var(--ws-topbar)) !important;
}
html.workspace-mobile body[data-mode="applications"] #applications-mode .column-head {
padding: 16px 14px 0 !important;
}
html.workspace-mobile .applications-shell {
display: flex !important;
flex-direction: column !important;
height: auto !important;
min-height: auto !important;
overflow: visible !important;
}
html.workspace-mobile .applications-list-panel,
html.workspace-mobile .applications-detail-panel {
width: 100% !important;
padding: 14px !important;
overflow: visible !important;
}
html.workspace-mobile .applications-list-panel {
border-right: 0 !important;
border-bottom: 1px solid var(--line) !important;
}
html.workspace-mobile .applications-detail-panel {
background: #fafafa !important;
}
html.workspace-mobile .applications-list-toolbar {
position: sticky !important;
top: 0 !important;
z-index: 3 !important;
margin: -14px -14px 12px !important;
padding: 12px 14px !important;
background: rgba(255, 255, 255, 0.96) !important;
border-bottom: 1px solid var(--line) !important;
backdrop-filter: blur(14px) !important;
}
html.workspace-mobile .applications-list {
display: flex !important;
gap: 10px !important;
overflow-x: auto !important;
padding: 2px 2px 10px !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
}
html.workspace-mobile .app-list-item {
flex: 0 0 min(84vw, 340px) !important;
scroll-snap-align: start !important;
}
html.workspace-mobile .app-list-actions,
html.workspace-mobile .app-doc-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html.workspace-mobile .app-list-action,
html.workspace-mobile .app-doc-btn {
justify-content: center !important;
min-height: 40px !important;
white-space: normal !important;
}
html.workspace-mobile .app-detail-header,
html.workspace-mobile .app-detail-form,
html.workspace-mobile .app-progress-bar {
grid-template-columns: 1fr !important;
}
html.workspace-mobile .app-progress-cell {
border-right: 0 !important;
border-bottom: 1px solid #f4f4f5 !important;
}
html.workspace-mobile .app-progress-cell:last-child {
border-bottom: 0 !important;
}
html.workspace-mobile .app-open-workspace,
html.workspace-mobile .app-new-btn,
html.workspace-mobile .generate-btn,
html.workspace-mobile .export-option {
min-height: 44px !important;
}
html.workspace-mobile .export-option {
width: 100% !important;
padding: 14px !important;
text-align: left !important;
}
html.workspace-mobile .export-photo-radios,
html.workspace-mobile .translate-lang-row,
html.workspace-mobile .cover-letter-actions {
grid-template-columns: 1fr !important;
flex-direction: column !important;
align-items: stretch !important;
}
html.workspace-mobile .account-drawer-panel,
html.workspace-mobile .editor-drawer,
html.workspace-mobile .improvements-panel,
html.workspace-mobile .import-dialog,
html.workspace-mobile .variations-dialog,
html.workspace-mobile .custom-section-dialog,
html.workspace-mobile .credits-dialog {
width: calc(100% - 16px) !important;
max-width: calc(100% - 16px) !important;
max-height: calc(100dvh - 16px) !important;
}
html.workspace-mobile .account-drawer-panel {
right: 8px !important;
top: 8px !important;
bottom: 8px !important;
border-radius: 18px !important;
}
html.workspace-mobile #account-drawer-content,
html.workspace-mobile .drawer-body {
overflow-x: hidden !important;
}
html.workspace-mobile .account-profile-card,
html.workspace-mobile .account-menu-row,
html.workspace-mobile .account-doc-item {
min-width: 0 !important;
}
html.workspace-mobile .account-menu-row-text,
html.workspace-mobile .account-profile-body,
html.workspace-mobile .account-doc-item {
overflow-wrap: anywhere !important;
}
html.workspace-mobile .ws-mobile-tabs {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 35;
gap: 0;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
background: rgba(250, 250, 250, 0.96);
border-top: 1px solid var(--line);
backdrop-filter: blur(16px);
}
html.workspace-mobile .ws-mobile-tab {
flex: 1;
min-height: 56px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--muted);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
html.workspace-mobile .ws-mobile-tab::before {
display: block;
margin-bottom: 4px;
color: currentColor;
font-size: 20px;
line-height: 1;
letter-spacing: 0;
text-transform: none;
}
html.workspace-mobile .ws-mobile-tab[data-ws-mobile-panel="templates"]::before { content: "▦"; }
html.workspace-mobile .ws-mobile-tab[data-ws-mobile-panel="edit"]::before { content: "⌕"; }
html.workspace-mobile .ws-mobile-tab[data-ws-mobile-panel="issues"]::before { content: "↶"; }
html.workspace-mobile .ws-mobile-tab[data-ws-mobile-panel="tailor"]::before { content: "◎"; }
html.workspace-mobile .ws-mobile-tab.active {
background: #fff;
color: var(--ink);
box-shadow: var(--shadow-sm);
}
html.workspace-mobile body[data-mode="tailor"] .ws-mobile-tab[data-ws-mobile-panel="tailor"] {
background: #fff;
color: var(--ink);
box-shadow: var(--shadow-sm);
}
html.workspace-mobile .resume-page {
box-shadow: 0 18px 50px rgba(24, 24, 27, 0.18) !important;
}
html.workspace-mobile .resume-page a {
color: inherit !important;
text-decoration-color: currentColor !important;
}
html.workspace-mobile .cv-empty-state-upload,
html.workspace-mobile .cv-empty-state-visual {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
html.workspace-mobile body[data-mode="builder"] .resume-page:not(.style-preview-page):not(.layout-thumb-page):not(:has(.cv-empty-state-visual)):not(:has(.cv-empty-state-upload)) {
min-width: 0 !important;
}
@media (max-width: 480px) {
html.workspace-mobile .tool-btn:not(.primary) {
padding: 8px !important;
min-width: 36px !important;
}
}