/* ===============================================
Letter Builder — Practice EHR
Pixel-faithful to Figma file KHW7yBOfornPSkKG0waPKD
=============================================== */
:root {
--bg: #f9fafb;
--bg-ad: #f3f4f6;
--bg-sidebar: rgba(221, 235, 254, 0.88);
--bg-active-pill: #c1dbfe;
--bg-active-tab: #eff6ff;
--bg-soft: #edf3ff;
--border: #e5e7eb;
--border-strong: #d1d5db;
--border-soft: #e1e1e2;
--text: #1a1a1a;
--text-strong: #1f2937;
--text-mid: #374151;
--text-soft: #4b5563;
--text-muted: #6b7280;
--text-placeholder: #adaebc;
--text-secondary: rgba(26, 26, 26, 0.7);
--primary: #3377ff;
--primary-hover: #2563eb;
--primary-soft-text: #2563eb;
--ai: #8b5cf6;
--danger: #ef4444;
--shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.05);
--shadow-md: 0 1px 0 rgba(26, 26, 26, 0.08), 0 2px 4px -1px rgba(26, 26, 26, 0.08);
--shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-pill: 9999px;
/* type scale */
--fs-xs: 11px;
--fs-sm: 12px;
--fs-md: 13px;
--fs-base: 14px;
--fs-lg: 16px;
--fs-xl: 18px;
--header-h: 98px;
--nav-h: 67px;
--footer-h: 53px;
--sidebar-w: 258px;
/* document margins (drive .doc-page padding; updated by ruler + Page Settings) */
--doc-margin-left: 96px;
--doc-margin-right: 96px;
--doc-margin-top: 96px;
--doc-margin-bottom: 96px;
/* page dimensions */
--doc-page-width: 8.5in;
--doc-page-height: 11in;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text-strong);
font-family: "Geist", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
font-size: 14px;
line-height: 1.45;
font-feature-settings: "ss01", "cv11"; /* Geist's stylistic tweaks for nicer 'a' and digits */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Tabular numerals for everything that displays counts or coordinates */
.zoom-val,
.editor-footer__words,
.muted,
.ruler-h__label,
.ruler-v__label,
.cl-step__num,
.page-btn,
.page-ellipsis {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "ss01" 1;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: transparent;
color: inherit;
}
input,
select,
textarea {
font-family: inherit;
font-size: 14px;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ============================================================
Material Symbols Rounded — replaces Lucide SVG icons.
Existing markup is preserved; this CSS
paints the matching Material Symbols glyph via ::before and
sizes each icon by font-size in its context.
============================================================ */
i[data-lucide] {
font-family: "Material Symbols Rounded";
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
user-select: none;
/* defeat any historic [data-lucide] { width: Xpx; height: Xpx; } pixel sizing */
width: 1em !important;
height: 1em !important;
overflow: visible;
}
i[data-lucide]::before { content: ""; }
/* ----- Lucide → Material Symbols glyph map ----- */
i[data-lucide="align-center"]::before { content: "format_align_center"; }
i[data-lucide="align-justify"]::before { content: "format_align_justify"; }
i[data-lucide="align-left"]::before { content: "format_align_left"; }
i[data-lucide="align-right"]::before { content: "format_align_right"; }
i[data-lucide="arrow-down-from-line"]::before { content: "vertical_align_bottom"; }
i[data-lucide="arrow-left"]::before { content: "arrow_back"; }
i[data-lucide="arrow-left-from-line"]::before { content: "first_page"; }
i[data-lucide="arrow-right"]::before { content: "arrow_forward"; }
i[data-lucide="arrow-right-from-line"]::before { content: "last_page"; }
i[data-lucide="arrow-up-from-line"]::before { content: "vertical_align_top"; }
i[data-lucide="bar-chart-3"]::before { content: "bar_chart"; }
i[data-lucide="baseline"]::before { content: "format_color_text"; }
i[data-lucide="bell"]::before { content: "notifications"; }
i[data-lucide="bold"]::before { content: "format_bold"; }
i[data-lucide="braces"]::before { content: "data_object"; }
i[data-lucide="calendar"]::before { content: "calendar_today"; }
i[data-lucide="calendar-clock"]::before { content: "schedule"; }
i[data-lucide="check"]::before { content: "check"; }
i[data-lucide="chevron-down"]::before { content: "keyboard_arrow_down"; }
i[data-lucide="chevron-left"]::before { content: "keyboard_arrow_left"; }
i[data-lucide="chevron-right"]::before { content: "keyboard_arrow_right"; }
i[data-lucide="circle-dot"]::before { content: "circle"; }
i[data-lucide="clipboard-paste"]::before { content: "content_paste"; }
i[data-lucide="clock"]::before { content: "schedule"; }
i[data-lucide="cloud"]::before { content: "cloud"; }
i[data-lucide="columns-2"]::before { content: "view_column"; }
i[data-lucide="copy"]::before { content: "content_copy"; }
i[data-lucide="download"]::before { content: "download"; }
i[data-lucide="eraser"]::before { content: "ink_eraser"; }
i[data-lucide="file-plus"]::before { content: "note_add"; }
i[data-lucide="file-text"]::before { content: "description"; }
i[data-lucide="filter"]::before { content: "filter_alt"; }
i[data-lucide="folder"]::before { content: "folder"; }
i[data-lucide="hash"]::before { content: "tag"; }
i[data-lucide="highlighter"]::before { content: "format_color_fill"; }
i[data-lucide="home"]::before { content: "home"; }
i[data-lucide="image"]::before { content: "image"; }
i[data-lucide="indent-decrease"]::before { content: "format_indent_decrease"; }
i[data-lucide="indent-increase"]::before { content: "format_indent_increase"; }
i[data-lucide="italic"]::before { content: "format_italic"; }
i[data-lucide="layers"]::before { content: "layers"; }
i[data-lucide="link"]::before { content: "link"; }
i[data-lucide="list"]::before { content: "format_list_bulleted"; }
i[data-lucide="list-ordered"]::before { content: "format_list_numbered"; }
i[data-lucide="list-tree"]::before { content: "list_alt"; }
i[data-lucide="loader-2"]::before { content: "progress_activity"; }
i[data-lucide="menu"]::before { content: "menu"; }
i[data-lucide="minus"]::before { content: "remove"; }
i[data-lucide="mouse-pointer-square-dashed"]::before { content: "highlight"; }
i[data-lucide="notebook-pen"]::before { content: "edit_note"; }
i[data-lucide="panel-bottom"]::before { content: "vertical_align_bottom"; }
i[data-lucide="panel-top"]::before { content: "vertical_align_top"; }
i[data-lucide="pencil"]::before { content: "edit"; }
i[data-lucide="plus"]::before { content: "add"; }
i[data-lucide="printer"]::before { content: "print"; }
i[data-lucide="receipt"]::before { content: "receipt_long"; }
i[data-lucide="redo-2"]::before { content: "redo"; }
i[data-lucide="refresh-cw"]::before { content: "refresh"; }
i[data-lucide="replace"]::before { content: "find_replace"; }
i[data-lucide="rows-2"]::before { content: "table_rows"; }
i[data-lucide="save"]::before { content: "save"; }
i[data-lucide="scan-barcode"]::before { content: "barcode_scanner"; }
i[data-lucide="scissors"]::before { content: "content_cut"; }
i[data-lucide="search"]::before { content: "search"; }
i[data-lucide="send"]::before { content: "send"; }
i[data-lucide="settings"]::before { content: "settings"; }
i[data-lucide="settings-2"]::before { content: "tune"; }
i[data-lucide="sliders"]::before { content: "tune"; }
i[data-lucide="sliders-horizontal"]::before { content: "tune"; }
i[data-lucide="sparkles"]::before { content: "auto_awesome"; }
i[data-lucide="spell-check"]::before { content: "spellcheck"; }
i[data-lucide="square-asterisk"]::before { content: "asterisk"; }
i[data-lucide="sticky-note"]::before { content: "sticky_note_2"; }
i[data-lucide="strikethrough"]::before { content: "format_strikethrough"; }
i[data-lucide="table-2"]::before { content: "table_chart"; }
i[data-lucide="text-cursor"]::before { content: "text_select_start"; }
i[data-lucide="trash-2"]::before { content: "delete"; }
i[data-lucide="underline"]::before { content: "format_underlined"; }
i[data-lucide="undo-2"]::before { content: "undo"; }
i[data-lucide="upload"]::before { content: "upload"; }
i[data-lucide="user"]::before { content: "person"; }
i[data-lucide="user-plus"]::before { content: "person_add"; }
i[data-lucide="users"]::before { content: "group"; }
i[data-lucide="x"]::before { content: "close"; }
i[data-lucide="format"]::before { content: "match_case"; }
/* Newly used icons (form fields + chat assistant) */
i[data-lucide="star"]::before { content: "star"; }
i[data-lucide="pen-tool"]::before { content: "draw"; }
i[data-lucide="paperclip"]::before { content: "attach_file"; }
i[data-lucide="chevrons-up-down"]::before { content: "unfold_more"; }
i[data-lucide="square-check"]::before { content: "check_box"; }
i[data-lucide="list-checks"]::before { content: "checklist"; }
i[data-lucide="toggle-right"]::before { content: "toggle_on"; }
i[data-lucide="bar-chart-2"]::before { content: "bar_chart"; }
i[data-lucide="separator-horizontal"]::before { content: "horizontal_rule"; }
i[data-lucide="clipboard-list"]::before { content: "assignment"; }
i[data-lucide="briefcase"]::before { content: "work"; }
i[data-lucide="graduation-cap"]::before { content: "school"; }
i[data-lucide="stethoscope"]::before { content: "stethoscope"; }
i[data-lucide="type"]::before { content: "title"; }
i[data-lucide="arrow-up"]::before { content: "arrow_upward"; }
i[data-lucide="upload-cloud"]::before { content: "cloud_upload"; }
i[data-lucide="layout-template"]::before { content: "dashboard"; }
i[data-lucide="grip-vertical"]::before { content: "drag_indicator"; }
i[data-lucide="eye"]::before { content: "visibility"; }
i[data-lucide="external-link"]::before { content: "open_in_new"; }
i[data-lucide="check-circle"]::before { content: "check_circle"; }
i[data-lucide="check"]::before { content: "check"; }
i[data-lucide="alert-circle"]::before { content: "error"; }
/* ----- Form-builder field icons ----- */
i[data-lucide="heading-1"]::before { content: "title"; }
i[data-lucide="text"]::before { content: "subject"; }
i[data-lucide="cake"]::before { content: "cake"; }
i[data-lucide="at-sign"]::before { content: "alternate_email"; }
i[data-lucide="phone"]::before { content: "call"; }
i[data-lucide="map-pin"]::before { content: "location_on"; }
i[data-lucide="globe"]::before { content: "public"; }
i[data-lucide="key-round"]::before { content: "key"; }
i[data-lucide="plus-square"]::before { content: "add_box"; }
i[data-lucide="grid-3x3"]::before { content: "grid_view"; }
i[data-lucide="eye-off"]::before { content: "visibility_off"; }
i[data-lucide="scroll"]::before { content: "description"; }
i[data-lucide="shield-check"]::before { content: "verified_user"; }
i[data-lucide="asterisk"]::before { content: "asterisk"; }
i[data-lucide="zap"]::before { content: "bolt"; }
i[data-lucide="chevron-up"]::before { content: "keyboard_arrow_up"; }
i[data-lucide="layout-template"]::before { content: "dashboard"; }
i[data-lucide="grip-vertical"]::before { content: "drag_indicator"; }
/* ----- Per-context icon size (was set via width/height pixels) ----- */
.user-chip i[data-lucide] { font-size: 12px; }
.main-nav__primary li a i[data-lucide] { font-size: 18px; }
.main-nav__primary li a.active .chev { font-size: 14px; }
.sidebar__head i[data-lucide] { font-size: 18px; }
.sidebar__list li i[data-lucide] { font-size: 16px; }
.select i[data-lucide] { font-size: 18px; }
.page-footer__time i[data-lucide] { font-size: 18px; }
.tool-btn i[data-lucide] { font-size: 20px; }
.cb--checked i[data-lucide] { font-size: 14px; }
.ai-chat__send i[data-lucide] { font-size: 16px; }
.row-icon i[data-lucide] { font-size: 18px; }
.editor-menubar__actions .btn i[data-lucide] { font-size: 14px; }
.menu-item i[data-lucide] { font-size: 16px; }
.menu-pop i[data-lucide] { font-size: 16px; }
.tb-select i[data-lucide] { font-size: 14px; }
.tb-color i[data-lucide] { font-size: 18px; }
.zoom-btn i[data-lucide] { font-size: 16px; }
.fields-select .fs-leading { font-size: 16px; }
.fields-select .fs-trailing { font-size: 16px; }
.cl-topbar__back i[data-lucide] { font-size: 18px; }
.cl-topbar__status i[data-lucide] { font-size: 14px; }
.cl-topbar__icon-btn i[data-lucide] { font-size: 22px; }
.tb-insert__btn i[data-lucide] { font-size: 16px; }
.tb-insert__item-icon i[data-lucide] { font-size: 18px; }
.cl-overflow__item i[data-lucide] { font-size: 18px; }
.ai-status__icon i[data-lucide] { font-size: 20px; }
.btn--sm i[data-lucide] { font-size: 14px; }
.btn--primary i[data-lucide] { font-size: 16px; }
.btn i[data-lucide] { font-size: 16px; }
.modal__icon-btn i[data-lucide] { font-size: 18px; }
.brand-mark, .brand-logo { /* not Material Symbols */ }
.icon-btn i[data-lucide] { font-size: 18px; }
.nav-icon-btn i[data-lucide] { font-size: 20px; }
.search-pill > i[data-lucide] { font-size: 18px; }
.search-pill .filter-btn i[data-lucide] { font-size: 16px; }
/* Carets / chevrons inside compound buttons stay small */
i[data-lucide].tb-caret { font-size: 12px; }
i[data-lucide].tb-dd__caret { font-size: 14px; }
i[data-lucide].chev { font-size: 14px; }
/* ----- The gear icon must be blue per spec ----- */
i[data-lucide="settings"] { color: #2563eb; }
/* =========================================================
PHASE 5 — Minimal Notion-style editor chrome
- Step 2 keeps the stepper centered in the header
- Formatting lives with the editor actions beside Save
- Persistent toolbar becomes a floating pill triggered by Format
========================================================= */
.modal--fullscreen .modal__panel--shell { position: relative; }
/* Stepper always lives inside the top bar, absolutely centered. */
.cl-topbar .cl-stepper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 20;
width: auto;
padding: 0;
border-bottom: 0;
background: transparent;
gap: 14px;
pointer-events: none; /* let back-button/actions stay clickable beneath */
}
.cl-topbar .cl-stepper * { pointer-events: auto; }
.cl-topbar .cl-step__line { width: 64px; }
/* Back button and actions sit above the stepper so they're always reachable */
.cl-topbar__back,
.cl-editor-actions {
position: relative;
z-index: 25;
}
/* Editor pane is positioned to host the floating toolbar + toggle */
.cl-pane--editor { position: relative; }
/* Top bar is the positioning context for the centered stepper */
.cl-topbar { position: relative; }
/* Format toggle: compact editor action beside Save, hidden in step 1. */
.fmt-toggle {
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-mid);
cursor: pointer;
flex-shrink: 0;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.fmt-toggle[hidden] { display: none; }
.fmt-toggle i[data-lucide] { font-size: 18px; }
.fmt-toggle:hover {
border-color: var(--primary-hover);
color: var(--primary-hover);
box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.28);
}
.modal--fullscreen.is-toolbar-open .fmt-toggle {
background: var(--primary-hover);
color: #fff;
border-color: var(--primary-hover);
box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.40);
}
/* Only show the toggle in step 2 */
.modal--fullscreen.is-step-2 .fmt-toggle { display: inline-flex; }
/* Floating toolbar pill: hidden by default. cl-pane--editor starts right
under the top bar, so the pill opens beneath the right-side actions.
overflow: visible so toolbar dropdowns (Fields list, font menu, etc.)
can escape the pill bounds and stack above the page. */
.modal--fullscreen.is-step-2 .editor-toolbar {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%) translateY(-8px);
margin: 0;
padding: 6px 14px;
width: max-content;
max-width: calc(100vw - 48px);
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
box-shadow:
0 16px 32px -12px rgba(15, 23, 42, 0.20),
0 4px 10px -2px rgba(15, 23, 42, 0.08);
z-index: 35;
flex-wrap: nowrap;
overflow: visible;
opacity: 0;
pointer-events: none;
transition:
opacity 0.20s ease,
transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal--fullscreen.is-step-2 .editor-toolbar::-webkit-scrollbar { height: 4px; }
.modal--fullscreen.is-step-2 .editor-toolbar::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18); border-radius: 2px;
}
.modal--fullscreen.is-step-2.is-toolbar-open .editor-toolbar {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
/* Inside the floating pill, downsize visual weight */
/* Floating pill — single-row, tightly spaced */
.modal--fullscreen.is-step-2 .editor-toolbar {
gap: 4px;
}
.modal--fullscreen.is-step-2 .editor-toolbar .editor-toolbar__divider {
height: 18px;
margin: 0 3px;
flex-shrink: 0;
}
.modal--fullscreen.is-step-2 .editor-toolbar .tool-btn {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.modal--fullscreen.is-step-2 .editor-toolbar .editor-toolbar__spacer {
flex: 1 1 auto;
min-width: 8px;
}
.modal--fullscreen.is-step-2 .editor-toolbar .tool-btn i[data-lucide] { font-size: 18px; }
.modal--fullscreen.is-step-2 .editor-toolbar .tb-dd__trigger { height: 28px; }
.modal--fullscreen.is-step-2 .editor-toolbar .tb-dd--font .tb-dd__trigger { width: 110px; }
.modal--fullscreen.is-step-2 .editor-toolbar .tb-dd--size .tb-dd__trigger { width: 52px; }
.modal--fullscreen.is-step-2 .editor-toolbar .fields-select { height: 30px; width: 148px; flex-shrink: 0; }
.modal--fullscreen.is-step-2 .editor-toolbar .fields-select input { font-size: var(--fs-md); }
.modal--fullscreen.is-step-2 .editor-toolbar .tb-insert__btn {
height: 28px;
padding: 0 10px 0 8px;
flex-shrink: 0;
}
/* When the toolbar is open, also ensure the rulers don't visually clash */
.modal--fullscreen.is-step-2.is-toolbar-open .ruler-h { box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.10); }
/* Top bar visual breath in step 2: stepper is absolutely centered above. */
.modal--fullscreen.is-step-2 .cl-content { padding-top: 0; }
/* On small screens allow the pill to scroll rather than clip */
@media (max-width: 900px) {
.modal--fullscreen.is-step-2 .editor-toolbar {
overflow-x: auto;
overflow-y: visible;
}
}
@media (max-width: 880px) {
.modal--fullscreen.is-step-2 .cl-stepper {
gap: 10px;
}
.modal--fullscreen.is-step-2 .cl-step__line {
width: 40px;
}
}
@media (max-width: 720px) {
.modal--fullscreen.is-step-2 .cl-step__label,
.modal--fullscreen.is-step-2 .cl-topbar__status {
display: none;
}
.modal--fullscreen.is-step-2 .cl-step__line {
width: 32px;
}
}
@media (max-width: 480px) {
.modal--fullscreen.is-step-2 .cl-topbar {
padding: 0 12px;
gap: 8px;
}
.modal--fullscreen.is-step-2 .cl-topbar__back span {
display: none;
}
.modal--fullscreen.is-step-2 .cl-editor-actions {
gap: 6px;
}
.modal--fullscreen.is-step-2 .fmt-toggle,
.modal--fullscreen.is-step-2 .cl-topbar__icon-btn {
width: 32px;
height: 32px;
}
.modal--fullscreen.is-step-2 #btnEditorSave {
padding-inline: 10px;
}
.modal--fullscreen.is-step-2 .cl-stepper {
gap: 8px;
}
.modal--fullscreen.is-step-2 .cl-step__line {
width: 24px;
}
}
/* ============= APP SHELL ============= */
.app-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ============= AD BAR ============= */
.ad-bar {
background: var(--bg-ad);
height: var(--header-h);
padding: 0 16px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
}
.brand {
display: inline-flex;
align-items: center;
height: 100%;
padding: 6px 0;
}
.brand-logo {
height: 56px;
width: auto;
display: block;
user-select: none;
-webkit-user-drag: none;
}
@media (max-width: 880px) {
.brand-logo { height: 40px; }
}
.ad-text {
text-align: center;
color: var(--text-soft);
font-size: 14px;
}
.ad-actions {
display: inline-flex;
align-items: center;
gap: 14px;
}
.icon-btn {
position: relative;
width: 30px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
color: var(--text-mid);
}
.icon-btn:hover {
background: rgba(0, 0, 0, 0.04);
}
.icon-btn .badge-dot {
position: absolute;
top: 4px;
right: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--danger);
}
.user-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 4px;
height: 32px;
border-radius: var(--radius-pill);
}
.user-chip img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.user-chip [data-lucide] {
width: 12px;
height: 12px;
color: var(--text-muted);
}
/* ============= MAIN NAV ============= */
.main-nav {
background: #f9fafb;
height: var(--nav-h);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sm);
padding: 0 24px;
display: flex;
align-items: center;
gap: 24px;
position: relative;
z-index: 5;
}
.main-nav__primary {
display: flex;
align-items: center;
gap: 32px;
flex: 1;
min-width: 0;
}
.main-nav__primary li a {
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
padding: 0 4px;
color: var(--text-mid);
font-size: 16px;
white-space: nowrap;
border-radius: var(--radius-pill);
}
.main-nav__primary li a [data-lucide] {
width: 16px;
height: 16px;
}
.main-nav__primary li a.active {
background: var(--bg-active-tab);
color: var(--primary-soft-text);
padding: 0 18px;
font-weight: 500;
}
.main-nav__primary li a.active .chev {
width: 12px;
height: 12px;
margin-left: 4px;
}
.main-nav__primary li a.ai-link {
color: var(--ai);
font-weight: 500;
}
.main-nav__actions {
display: inline-flex;
align-items: center;
gap: 14px;
}
.nav-icon-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
color: var(--ai);
}
.nav-icon-btn:hover {
background: rgba(139, 92, 246, 0.08);
}
.nav-icon-btn:nth-child(2) {
color: var(--text-mid);
}
.search-pill {
display: inline-flex;
align-items: center;
gap: 8px;
height: 46px;
width: 256px;
padding: 0 14px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
}
.search-pill > i {
color: var(--text-muted);
}
.search-pill input {
flex: 1;
border: none;
outline: none;
background: transparent;
color: var(--text);
font-size: 16px;
min-width: 0;
}
.search-pill input::placeholder {
color: var(--text-placeholder);
}
.filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--text-muted);
}
.search-pill--sm {
width: 290px;
height: 38px;
font-size: 14px;
}
.search-pill--sm input {
font-size: 14px;
}
.nav-mobile-toggle {
display: none;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
align-items: center;
justify-content: center;
}
/* ============= LAYOUT ============= */
.layout {
flex: 1;
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
background: #fff;
min-height: 0;
}
/* ============= SIDEBAR ============= */
.sidebar {
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
padding: 24px 25px 48px;
overflow-y: auto;
}
.sidebar__group + .sidebar__group {
margin-top: 24px;
}
.sidebar__head {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: var(--text-strong);
font-size: 15px;
margin-bottom: 14px;
}
.sidebar__head [data-lucide] {
color: var(--primary-hover);
width: 18px;
height: 18px;
}
.sidebar__list li {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 4px;
color: var(--text-strong);
font-size: 13px;
border-radius: 8px;
cursor: pointer;
}
.sidebar__list li [data-lucide] {
width: 14px;
height: 14px;
color: var(--primary-hover);
}
.sidebar__list li:hover {
background: rgba(255, 255, 255, 0.4);
}
.sidebar__list li.active {
background: var(--bg-active-pill);
color: var(--primary-soft-text);
padding: 10px 14px;
}
/* ============= MAIN CONTENT ============= */
.main {
padding: 32px 32px 48px;
background: #fff;
min-width: 0;
}
/* ============= FILTERS ============= */
.filters {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px 32px;
align-items: end;
margin-bottom: 32px;
}
.filter-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 32px;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
}
.field label {
font-weight: 500;
color: var(--text-mid);
font-size: 14px;
}
.field input[type="text"],
.field input[type="number"],
.field .select select {
height: 42px;
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-sm);
outline: none;
color: var(--text-strong);
font-size: 14px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.field input[type="text"]:focus,
.field input[type="number"]:focus,
.field .select select:focus {
border-color: var(--primary-hover);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.select {
position: relative;
}
.select select {
appearance: none;
width: 100%;
padding-right: 36px;
}
.select [data-lucide] {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--text-muted);
}
.field--radios {
justify-content: flex-end;
}
.radios {
display: inline-flex;
align-items: center;
gap: 16px;
height: 42px;
}
.radio {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 16px;
color: var(--text-mid);
cursor: pointer;
}
.radio input[type="radio"] {
appearance: none;
width: 17px;
height: 17px;
border: 1.5px solid #9ca3af;
border-radius: 50%;
display: inline-grid;
place-items: center;
margin: 0;
}
.radio input[type="radio"]::after {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--primary);
transform: scale(0);
transition: transform 0.15s;
}
.radio input[type="radio"]:checked {
border-color: var(--primary);
}
.radio input[type="radio"]:checked::after {
transform: scale(1);
}
.filters__actions {
align-self: end;
}
/* ============= BUTTONS ============= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 20px;
font-size: 16px;
font-weight: 500;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.btn:active {
transform: translateY(1px);
}
.btn--rounded {
border-radius: var(--radius-pill);
}
.btn--sm {
padding: 7px 19px;
font-size: 12px;
}
.btn--primary {
background: var(--primary);
color: #fff;
height: 46px;
}
.btn--primary.btn--sm {
height: 29px;
}
.btn--primary:hover {
background: var(--primary-hover);
}
.btn--soft {
background: var(--bg-soft);
color: var(--primary-soft-text);
height: 36px;
padding: 9px 20px;
}
.btn--soft:hover {
background: #d8e3ff;
}
.btn--outline-blue {
background: #fff;
color: var(--primary);
border: 1px solid var(--primary);
}
.btn--outline-blue:hover {
background: rgba(51, 119, 255, 0.06);
}
/* ============= CARD / TABLE ============= */
.card {
background: #fff;
border: 2px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
min-height: 600px;
}
.card__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 25px;
gap: 16px;
flex-wrap: wrap;
}
.card__header h2 {
font-size: 18px;
font-weight: 600;
margin: 0;
color: #000;
}
.card__header-actions {
display: inline-flex;
align-items: center;
gap: 16px;
}
.table-wrap {
flex: 1;
overflow-x: auto;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.data-table thead {
background: #f9fafb;
}
.data-table thead th {
text-align: left;
font-weight: 500;
color: var(--text-muted);
padding: 12px 24px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.data-table .th-icon {
width: 14px;
height: 14px;
margin-left: 6px;
vertical-align: -2px;
color: var(--text-muted);
}
.data-table tbody td {
padding: 14px 24px;
border-bottom: 1px solid var(--border);
color: var(--text);
}
.data-table tbody tr:hover {
background: #fafbfc;
}
.link {
color: var(--primary-hover);
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-decoration: underline;
}
.card__footer {
display: flex;
align-items: center;
justify-content: space-between;
background: #f9fafb;
border-top: 1px solid var(--border);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
padding: 12px 24px;
gap: 12px;
flex-wrap: wrap;
}
.muted {
color: var(--text-mid);
font-size: 14px;
}
.pagination {
display: inline-flex;
align-items: center;
gap: 8px;
}
.page-btn {
min-width: 32px;
height: 30px;
padding: 0 8px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: #fff;
color: var(--text-mid);
font-weight: 500;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.page-btn:hover:not(:disabled) {
background: #f3f4f6;
}
.page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.page-btn--active {
background: var(--primary-hover);
color: #fff;
border-color: var(--primary-hover);
}
.page-btn--ghost {
border-color: transparent;
color: var(--primary);
}
.page-ellipsis {
color: var(--text-muted);
font-size: 16px;
padding: 0 4px;
}
/* ============= PAGE FOOTER ============= */
.page-footer {
background: #fff;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 96px;
height: var(--footer-h);
font-size: 14px;
color: var(--text-muted);
gap: 32px;
}
.page-footer > span:first-child {
flex: 1;
}
.page-footer__time {
display: inline-flex;
align-items: center;
gap: 8px;
}
.page-footer__time [data-lucide] {
width: 18px;
height: 18px;
}
.page-footer__links {
display: inline-flex;
align-items: center;
gap: 32px;
flex: 1;
justify-content: flex-end;
}
.page-footer__links a:hover {
color: var(--primary-hover);
}
/* ============= MODAL ============= */
.modal {
position: fixed;
inset: 0;
z-index: 50;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.modal.open {
display: flex;
}
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(137, 137, 137, 0.76);
}
.modal__panel {
position: relative;
background: #fff;
border-radius: 10px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
max-height: calc(100vh - 48px);
overflow: hidden;
}
.modal__panel--md {
width: min(100%, 1136px);
}
.modal__panel--lg {
width: min(100%, 880px);
max-height: calc(100vh - 48px);
}
.modal__panel--xl {
width: min(100%, 1251px);
height: min(100%, 1065px);
max-height: calc(100vh - 48px);
}
.modal__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 30px 16px;
gap: 16px;
}
.modal__head h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-strong);
}
.modal__head-actions {
display: inline-flex;
align-items: center;
gap: 16px;
}
.modal__icon-btn {
width: 32px;
height: 32px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.modal__icon-btn:hover {
background: rgba(0, 0, 0, 0.04);
}
.modal__divider {
height: 1px;
background: var(--border);
}
.modal__body {
padding: 24px 30px;
overflow-y: auto;
}
.modal__footer {
display: flex;
justify-content: flex-end;
gap: 16px;
padding: 16px 30px 24px;
border-top: 1px solid var(--border);
background: #fcfcfc;
}
.form-grid {
display: grid;
gap: 20px 32px;
}
.form-grid--2 {
grid-template-columns: 1fr 1fr;
}
.field--toggles,
.field--inline {
align-self: end;
}
.toggles {
display: inline-flex;
align-items: flex-start;
gap: 28px;
flex-wrap: wrap;
}
.toggles--inline {
display: inline-flex;
align-items: flex-start;
gap: 40px;
}
.toggle {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
cursor: pointer;
user-select: none;
}
.toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.toggle__track {
order: 2;
width: 44px;
height: 22px;
background: #d9d9d9;
border-radius: 16px;
position: relative;
transition: background 0.18s;
flex-shrink: 0;
}
.toggle__track::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 14px;
height: 14px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transition: transform 0.18s;
}
.toggle input:checked ~ .toggle__track {
background: #2563eb;
}
.toggle input:checked ~ .toggle__track::after {
transform: translateX(22px);
}
.toggle__lbl {
order: 1;
font-size: 14px;
color: #374151;
font-weight: 500;
}
.toggle--stacked {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
/* Letter mode: 2-column stacked layout for Step 1 details */
.modal[data-mode="letter"] .cl-pane--details .form-grid--2 {
grid-template-columns: 1fr 1fr;
grid-auto-flow: row;
}
.modal[data-mode="letter"] .cl-pane--details .form-grid--2 > .field--desc { grid-column: 1; grid-row: 2 / span 2; }
.modal[data-mode="letter"] .cl-pane--details .form-grid--2 > .field--profile { grid-column: 2; grid-row: 2; }
.modal[data-mode="letter"] .cl-pane--details .form-grid--2 > .field--doc { grid-column: 2; grid-row: 3; }
.modal[data-mode="letter"] .cl-pane--details .form-grid--2 > .field--toggles-left { grid-column: 1; grid-row: 4; }
.modal[data-mode="letter"] .cl-pane--details .form-grid--2 > .field--toggles-right { grid-column: 2; grid-row: 4; }
.modal[data-mode="letter"] .cl-pane--details .form-grid--2 > .field--desc textarea {
height: 100%; min-height: 120px; resize: none;
}
.length-row {
display: flex;
align-items: end;
gap: 16px;
width: 100%;
}
/* ============= EDITOR (WYSIWYG) ============= */
.editor-menubar {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
border-bottom: 1px solid var(--border-soft);
background: #fcfcfc;
flex-wrap: wrap;
}
.editor-tabs {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 1;
min-width: 0;
flex-wrap: wrap;
}
.editor-tabs button {
height: 44px;
padding: 0 16px;
border-radius: var(--radius-xl);
font-weight: 600;
font-size: 16px;
color: var(--text-secondary);
}
.editor-tabs button:hover {
background: rgba(0, 0, 0, 0.04);
}
.editor-tabs button.active {
background: var(--bg-soft);
color: var(--primary-soft-text);
}
.editor-menubar__actions {
display: inline-flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.editor-toolbar {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 24px;
border-bottom: 1px solid var(--border-soft);
background: #fff;
flex-wrap: nowrap;
}
.editor-toolbar__group {
display: inline-flex;
align-items: center;
gap: 4px;
}
.editor-toolbar__divider {
width: 1px;
height: 24px;
background: var(--border);
}
.editor-toolbar__spacer {
flex: 1;
}
.tool-btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: var(--text-mid);
}
.tool-btn:hover {
background: rgba(0, 0, 0, 0.05);
}
.tool-btn [data-lucide] {
width: 18px;
height: 18px;
}
.fields-select {
position: relative;
display: inline-block;
width: 220px;
height: 36px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
flex-shrink: 0;
}
.fields-select:hover {
border-color: var(--text-muted);
}
.fields-select.open {
border-color: var(--primary-hover);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.fields-select input {
width: 100%;
height: 100%;
border: none;
outline: none;
background: transparent;
padding: 0 32px 0 36px;
font-size: var(--fs-base);
color: var(--text-strong);
cursor: pointer;
}
.fields-select input::placeholder {
color: var(--text-placeholder);
}
.fields-select .fs-trailing {
position: absolute;
right: 10px;
top: 50%;
width: 16px;
height: 16px;
color: var(--text-muted);
transform: translateY(-50%);
transition: transform 0.18s;
pointer-events: none;
}
.fields-select.open .fs-trailing {
transform: translateY(-50%) rotate(180deg);
color: var(--primary-hover);
}
.editor-content {
flex: 1;
overflow-y: auto;
padding: 32px 64px 96px;
background: #fff;
position: relative;
}
.doc-h1 {
font-size: 48px;
line-height: 64px;
font-weight: 600;
color: var(--text);
margin: 0 0 16px;
}
.doc-sub {
font-size: 24px;
line-height: 38px;
color: var(--text-secondary);
margin: 0 0 24px;
}
.doc-checklist {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.doc-checklist li {
display: flex;
align-items: center;
gap: 16px;
font-size: 20px;
font-weight: 500;
color: var(--text);
line-height: 32px;
}
.doc-checklist li.checked {
color: var(--text);
}
.cb {
width: 32px;
height: 32px;
border: 2px solid var(--border-soft);
border-radius: var(--radius-xl);
background: #f4f4f5;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cb--checked {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.cb--checked [data-lucide] {
width: 18px;
height: 18px;
color: #fff;
}
.doc-field-token {
font-size: 20px;
font-weight: 500;
color: var(--text);
background: rgba(51, 119, 255, 0.06);
padding: 6px 10px;
border-radius: 6px;
display: inline-block;
margin: 0;
cursor: pointer;
}
.doc-field-token:hover {
background: rgba(51, 119, 255, 0.12);
}
.editor-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
background: #fcfcfc;
border-top: 1px solid var(--border-soft);
height: 40px;
font-size: 16px;
font-weight: 500;
color: var(--text-secondary);
flex-shrink: 0;
}
/* ============= AI FLOATING ASSISTANT ============= */
:root {
--ai-grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #3b82f6 100%);
--ai-soft: #f5f3ff;
--ai-soft-2: #ede9fe;
--ai-ring: rgba(139, 92, 246, 0.28);
}
/* ----- Floating action button ----- */
.ai-fab {
position: absolute;
bottom: 72px;
right: 28px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--ai-grad);
color: #fff;
padding: 0;
border: none;
box-shadow:
0 1px 1px rgba(15, 23, 42, 0.06),
0 12px 28px -8px rgba(99, 102, 241, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
z-index: 5;
cursor: pointer;
transition: transform 0.22s cubic-bezier(0.34, 1.5, 0.64, 1),
box-shadow 0.22s ease;
}
.ai-fab:hover {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 1px 1px rgba(15, 23, 42, 0.06),
0 18px 36px -10px rgba(99, 102, 241, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ai-fab:active {
transform: translateY(0) scale(0.98);
}
.ai-fab.is-active {
transform: scale(0.94) rotate(45deg);
}
.ai-fab__core {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
}
.ai-fab__icon {
grid-area: 1 / 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: #fff;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.ai-fab__icon::before {
font-size: 24px;
line-height: 1;
display: inline-block;
}
.ai-fab__icon--close { opacity: 0; transform: rotate(-45deg) scale(0.85); }
.ai-fab.is-active .ai-fab__icon--open { opacity: 0; transform: rotate(-45deg) scale(0.85); }
.ai-fab.is-active .ai-fab__icon--close { opacity: 1; transform: rotate(-45deg) scale(1); }
/* Halo + pulse */
.ai-fab__halo {
position: absolute;
inset: -10px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.35), transparent 60%);
filter: blur(10px);
z-index: -1;
opacity: 0.85;
}
.ai-fab__pulse {
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 0 0 var(--ai-ring);
animation: ai-fab-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ai-fab.is-active .ai-fab__pulse { animation: none; }
@keyframes ai-fab-pulse {
0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.40); }
70% { box-shadow: 0 0 0 14px rgba(139, 92, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
/* ----- Chat panel ----- */
.ai-chat {
position: absolute;
bottom: 142px;
right: 28px;
width: 408px;
max-width: calc(100vw - 56px);
max-height: min(640px, calc(100vh - 220px));
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 20px;
box-shadow:
0 1px 1px rgba(15, 23, 42, 0.04),
0 24px 64px -12px rgba(76, 29, 149, 0.28),
0 8px 16px -8px rgba(15, 23, 42, 0.10);
overflow: hidden;
z-index: 6;
display: flex;
flex-direction: column;
transform-origin: bottom right;
transform: translateY(8px) scale(0.96);
opacity: 0;
pointer-events: none;
transition:
transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1),
opacity 0.18s ease;
}
.ai-chat.is-open {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
/* Subtle violet wash behind the head */
.ai-chat::before {
content: "";
position: absolute;
top: -40px;
left: -20px;
right: -20px;
height: 200px;
background:
radial-gradient(60% 80% at 30% 0%, rgba(139, 92, 246, 0.16), transparent 70%),
radial-gradient(50% 70% at 80% 0%, rgba(59, 130, 246, 0.12), transparent 70%);
pointer-events: none;
z-index: 0;
}
.ai-chat > * { position: relative; z-index: 1; }
/* Head */
.ai-chat__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 18px 18px 14px;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ai-chat__title-wrap {
display: flex;
align-items: center;
gap: 12px;
}
.ai-chat__avatar {
width: 36px; height: 36px;
border-radius: 12px;
background: var(--ai-grad);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px -6px rgba(99, 102, 241, 0.55);
}
.ai-chat__avatar [data-lucide]::before { font-size: 18px; }
.ai-chat__title {
margin: 0;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
font-family: "Geist", sans-serif;
}
.ai-chat__subtitle {
margin: 2px 0 0;
font-size: 12px;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.ai-chat__pulse-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
animation: ai-status-dot 2.4s ease-in-out infinite;
}
@keyframes ai-status-dot {
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.ai-chat__icon-btn {
width: 30px; height: 30px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.ai-chat__icon-btn:hover { background: rgba(15, 23, 42, 0.05); color: var(--text); }
.ai-chat__icon-btn [data-lucide]::before { font-size: 18px; }
/* Quick prompt chips */
.ai-chat__suggest {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 12px 18px 6px;
}
.ai-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 8px;
background: var(--ai-soft);
border: 1px solid rgba(139, 92, 246, 0.18);
color: #6d28d9;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
cursor: pointer;
}
.ai-chip:hover {
background: var(--ai-soft-2);
border-color: rgba(139, 92, 246, 0.32);
transform: translateY(-1px);
}
.ai-chip [data-lucide]::before { font-size: 13px; }
/* Message list */
.ai-chat__msgs {
flex: 1;
min-height: 140px;
overflow-y: auto;
padding: 14px 18px 6px;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: thin;
}
.ai-chat__msgs::-webkit-scrollbar { width: 6px; }
.ai-chat__msgs::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.12);
border-radius: 999px;
}
.ai-msg {
display: flex;
gap: 8px;
max-width: 88%;
animation: ai-msg-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes ai-msg-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.ai-msg__avatar {
flex: 0 0 26px;
width: 26px; height: 26px;
border-radius: 8px;
background: var(--ai-grad);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2px;
box-shadow: 0 4px 10px -4px rgba(99, 102, 241, 0.45);
}
.ai-msg__avatar [data-lucide]::before { font-size: 14px; }
.ai-msg__bubble {
background: #f8f7ff;
border: 1px solid rgba(139, 92, 246, 0.14);
color: var(--text);
padding: 10px 12px;
border-radius: 14px;
border-top-left-radius: 4px;
font-size: 13px;
line-height: 1.55;
white-space: pre-wrap;
}
.ai-msg__bubble p { margin: 0 0 4px; }
.ai-msg__bubble p:last-child { margin: 0; }
.ai-msg__hint { color: var(--text-muted); font-size: 12px; }
.ai-msg--user {
align-self: flex-end;
margin-left: auto;
flex-direction: row-reverse;
}
.ai-msg--user .ai-msg__bubble {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 55%, #6d28d9 100%);
color: #fff;
border-color: transparent;
border-radius: 14px;
border-top-right-radius: 4px;
box-shadow: 0 8px 18px -10px rgba(124, 58, 237, 0.55);
}
.ai-msg--welcome .ai-msg__bubble {
background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
}
/* Thinking dots */
.ai-msg__dots {
display: inline-flex;
gap: 4px;
padding: 2px 0;
}
.ai-msg__dots span {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ai);
opacity: 0.45;
animation: ai-dot 1s ease-in-out infinite;
}
.ai-msg__dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-msg__dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot {
0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
40% { transform: translateY(-3px); opacity: 1; }
}
/* Composer */
.ai-chat__composer {
padding: 10px 14px 14px;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.ai-chat__composer-inner {
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 14px;
padding: 10px 12px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.ai-chat__composer-inner:focus-within {
border-color: rgba(139, 92, 246, 0.45);
box-shadow:
0 0 0 4px rgba(139, 92, 246, 0.12),
0 1px 2px rgba(15, 23, 42, 0.03);
}
.ai-chat__composer textarea {
display: block;
width: 100%;
border: none;
outline: none;
resize: none;
font-family: inherit;
font-size: 13px;
line-height: 1.55;
color: var(--text);
background: transparent;
max-height: 168px;
}
.ai-chat__composer textarea::placeholder { color: #9aa0aa; }
.ai-chat__composer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 6px;
}
.ai-chat__composer-tools {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.ai-chat__tool {
width: 26px; height: 26px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.ai-chat__tool:hover { background: rgba(15, 23, 42, 0.05); color: var(--text-mid); }
.ai-chat__tool [data-lucide]::before { font-size: 15px; }
.ai-chat__hint-text {
font-size: 11px;
color: var(--text-muted);
margin-left: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-chat__send {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 10px;
background: var(--ai-grad);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 14px -6px rgba(99, 102, 241, 0.55);
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.ai-chat__send:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(99, 102, 241, 0.65); }
.ai-chat__send:disabled { opacity: 0.5; cursor: progress; }
.ai-chat__send [data-lucide]::before { font-size: 16px; }
.ai-chat.is-generating .ai-chat__composer-inner {
border-color: rgba(139, 92, 246, 0.55);
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14);
}
@media (max-width: 720px) {
.ai-chat {
right: 16px;
left: 16px;
width: auto;
bottom: 132px;
}
.ai-fab { right: 18px; bottom: 60px; }
.ai-chat__hint-text { display: none; }
}
/* ============= FORM FIELD WIDGETS (JotForm-style) ============= */
.doc-ff {
display: block;
position: relative;
margin: 14px 0;
padding: 14px 16px;
background: #fcfcfd;
border: 1px solid #e6e8ef;
border-radius: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.doc-ff:hover {
border-color: #c9d2e5;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.doc-ff.is-selected {
border-color: #2563eb;
background: #fff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 4px 12px -4px rgba(37, 99, 235, 0.18);
}
.doc-ff.is-selected::before { opacity: 1; }
.doc-ff.is-dragging-ff {
opacity: 0.55;
z-index: 50;
pointer-events: none;
transition: none;
}
.doc-ff.is-leaving {
opacity: 0;
transform: translateX(-12px);
transition: opacity 0.16s ease, transform 0.16s ease;
}
.doc-ff.is-just-added {
animation: doc-ff-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes doc-ff-pop {
0% { transform: scale(0.96); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* Floating action toolbar (top-right of each field) */
.doc-ff__toolbar {
position: absolute;
top: 6px;
right: 6px;
display: inline-flex;
align-items: center;
gap: 1px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 9px;
padding: 2px;
box-shadow:
0 1px 1px rgba(15, 23, 42, 0.04),
0 8px 18px -8px rgba(15, 23, 42, 0.18);
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 0.14s ease, transform 0.14s ease;
z-index: 3;
}
.doc-ff:hover > .doc-ff__toolbar,
.doc-ff.is-selected > .doc-ff__toolbar,
.doc-ff:focus-within > .doc-ff__toolbar {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.doc-ff__toolbar-sep {
display: inline-block;
width: 1px;
height: 14px;
background: rgba(15, 23, 42, 0.10);
margin: 0 2px;
}
.doc-ff__handle,
.doc-ff__action {
width: 26px;
height: 26px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
background: transparent;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.doc-ff__handle { cursor: grab; }
.doc-ff__handle:hover {
background: rgba(37, 99, 235, 0.10);
color: #2563eb;
}
.doc-ff__action:hover {
background: rgba(15, 23, 42, 0.06);
color: var(--text);
}
.doc-ff__action--danger:hover {
background: rgba(239, 68, 68, 0.10);
color: var(--danger);
}
.doc-ff__handle [data-lucide]::before { font-size: 16px; }
.doc-ff__action [data-lucide]::before { font-size: 14px; }
body.is-ff-drag,
body.is-ff-drag .doc-ff__handle {
cursor: grabbing !important;
}
/* Drop indicator while reordering */
.ff-drop-indicator {
height: 3px;
margin: 6px 0;
background: linear-gradient(90deg, transparent, #2563eb 12%, #2563eb 88%, transparent);
border-radius: 999px;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
animation: ff-drop-pulse 1.1s ease-in-out infinite;
pointer-events: none;
}
@keyframes ff-drop-pulse {
0%, 100% { opacity: 0.78; }
50% { opacity: 1; }
}
.doc-ff::before {
content: "";
position: absolute;
left: 0; top: 12px; bottom: 12px;
width: 3px;
border-radius: 0 3px 3px 0;
background: #2563eb;
opacity: 0.7;
}
.doc-ff__head {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 6px;
}
.doc-ff__label {
font-size: 14px;
font-weight: 600;
color: var(--text);
outline: none;
border-radius: 4px;
}
.doc-ff__label:focus { background: rgba(37, 99, 235, 0.08); padding: 0 2px; }
.doc-ff__req { color: var(--danger); font-weight: 700; }
.doc-ff__hint {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 8px;
font-style: italic;
}
.doc-ff__placeholder {
color: #9aa0aa;
font-style: italic;
outline: none;
}
/* Short text / number / date — fillable bordered line */
.doc-ff__line {
display: flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 12px;
background: #fff;
border: 1px solid #d8dde9;
border-radius: 8px;
font-size: 13px;
}
.doc-ff__line [data-lucide] { color: var(--text-muted); }
.doc-ff__line [data-lucide]::before { font-size: 15px; }
/* Long text */
.doc-ff__textarea {
min-height: 80px;
padding: 10px 12px;
background: #fff;
border: 1px solid #d8dde9;
border-radius: 8px;
font-size: 13px;
}
/* Inline blank line */
.doc-ff--inline {
display: inline-block;
vertical-align: baseline;
margin: 0 2px;
padding: 0;
background: transparent;
border: none;
}
.doc-ff--inline::before { display: none; }
.doc-ff__blank {
display: inline-block;
min-width: 140px;
border-bottom: 1.5px dashed #94a3b8;
padding: 0 6px;
text-align: center;
outline: none;
background: linear-gradient(180deg, transparent 92%, rgba(37, 99, 235, 0.10) 92%);
}
.doc-ff__blank:focus { border-bottom-color: #2563eb; border-bottom-style: solid; }
/* Dropdown */
.doc-ff__select {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
height: 36px;
padding: 0 12px;
background: #fff;
border: 1px solid #d8dde9;
border-radius: 8px;
font-size: 13px;
}
.doc-ff__select [data-lucide] { color: var(--text-muted); }
.doc-ff__options {
list-style: disc;
padding-left: 22px;
margin: 8px 0 0;
color: var(--text-mid);
font-size: 12.5px;
outline: none;
}
.doc-ff__options li { padding: 1px 0; }
/* Checkbox + radio */
.doc-ff__optlist {
display: flex;
flex-direction: column;
gap: 8px;
}
.doc-ff__opt {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text);
}
.doc-ff__check {
flex: 0 0 18px;
width: 18px; height: 18px;
border: 1.5px solid #b6bdcc;
border-radius: 4px;
background: #fff;
position: relative;
}
.doc-ff__radio {
flex: 0 0 18px;
width: 18px; height: 18px;
border: 1.5px solid #b6bdcc;
border-radius: 50%;
background: #fff;
}
.doc-ff__opt-text { outline: none; }
.doc-ff__opt-text:focus { background: rgba(37, 99, 235, 0.08); padding: 0 2px; border-radius: 3px; }
/* Yes / No */
.doc-ff__pillgroup {
display: inline-flex;
border: 1px solid #d8dde9;
border-radius: 999px;
background: #fff;
padding: 3px;
gap: 2px;
}
.doc-ff__pill {
padding: 6px 18px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-mid);
cursor: pointer;
}
.doc-ff__pill--yes {
background: rgba(16, 185, 129, 0.10);
color: #059669;
}
.doc-ff__pill--no { color: var(--text-muted); }
/* Star rating */
.doc-ff__stars {
display: inline-flex;
gap: 6px;
color: #f59e0b;
}
.doc-ff__stars [data-lucide]::before { font-size: 22px; }
/* 1–10 scale */
.doc-ff__scale {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 4px;
}
.doc-ff__scale-step {
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
color: var(--text-mid);
background: #fff;
border: 1px solid #d8dde9;
border-radius: 6px;
font-variant-numeric: tabular-nums;
}
.doc-ff__scale-legend {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 11px;
color: var(--text-muted);
}
.doc-ff__scale-legend span { outline: none; }
/* Signature */
.doc-ff__sig {
position: relative;
height: 70px;
background: #fff;
border: 1px dashed #c9d2e5;
border-radius: 8px;
display: flex;
align-items: flex-end;
padding: 10px 14px;
}
.doc-ff__sig-line {
position: absolute;
left: 14px; right: 14px;
bottom: 28px;
border-bottom: 1.5px solid #1f2937;
height: 0;
}
.doc-ff__sig-caption {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.doc-ff__sig-meta {
display: flex;
gap: 24px;
margin-top: 8px;
font-size: 12px;
color: var(--text-muted);
}
.doc-ff__sig-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.doc-ff__sig-meta-item [data-lucide]::before { font-size: 13px; }
/* File upload */
.doc-ff__file {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: #fff;
border: 1.5px dashed #c9d2e5;
border-radius: 10px;
}
.doc-ff__file-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: rgba(37, 99, 235, 0.08);
color: #2563eb;
display: inline-flex;
align-items: center;
justify-content: center;
}
.doc-ff__file-icon [data-lucide]::before { font-size: 20px; }
.doc-ff__file-text strong {
display: block;
font-size: 13px;
color: var(--text);
font-weight: 600;
}
.doc-ff__file-text small {
display: block;
font-size: 11.5px;
color: var(--text-muted);
margin-top: 2px;
}
/* Section divider widget */
.doc-ff--section {
background: transparent;
border: none;
padding: 18px 0 6px;
margin: 18px 0 6px;
display: flex;
align-items: center;
gap: 12px;
}
.doc-ff--section::before { display: none; }
.doc-ff__section-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, #d1d5db, transparent);
}
.doc-ff__section-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
outline: none;
white-space: nowrap;
}
/* Insert popover — section head + chip grid for form fields */
.tb-insert__sectionhead {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 10px 12px 4px;
border-top: 1px solid rgba(15, 23, 42, 0.06);
margin-top: 4px;
}
.tb-insert__sectionhead span {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-mid);
}
.tb-insert__sectionhead small {
font-size: 10.5px;
color: var(--text-muted);
}
.tb-insert__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
padding: 4px 8px 8px;
}
.tb-insert__chip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
font-size: 12.5px;
color: var(--text);
text-align: left;
transition: background 0.12s ease;
}
.tb-insert__chip:hover { background: rgba(37, 99, 235, 0.08); color: #1d4ed8; }
.tb-insert__chip [data-lucide] { color: var(--text-muted); flex-shrink: 0; }
.tb-insert__chip:hover [data-lucide] { color: #2563eb; }
.tb-insert__chip [data-lucide]::before { font-size: 14px; }
/* ============= RESPONSIVE ============= */
@media (max-width: 1280px) {
.main {
padding: 24px 24px 32px;
}
.filter-grid {
gap: 16px 24px;
}
.page-footer {
padding: 0 32px;
}
}
@media (max-width: 1024px) {
.main-nav__primary li a span {
display: none;
}
.main-nav__primary li a.active span {
display: inline;
}
:root {
--sidebar-w: 220px;
}
.editor-content {
padding: 24px 32px 96px;
}
.doc-h1 {
font-size: 36px;
line-height: 48px;
}
.doc-sub {
font-size: 20px;
line-height: 32px;
}
.doc-checklist li {
font-size: 16px;
line-height: 24px;
}
}
@media (max-width: 880px) {
.ad-bar {
grid-template-columns: auto auto;
grid-template-rows: auto auto;
height: auto;
padding: 12px 16px;
}
.ad-text {
grid-column: 1 / -1;
text-align: left;
font-size: 12px;
}
.main-nav {
height: auto;
padding: 8px 16px;
flex-wrap: wrap;
gap: 12px;
}
.main-nav__primary {
order: 2;
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
gap: 16px;
padding-bottom: 4px;
}
.main-nav__actions {
margin-left: auto;
}
.search-pill {
width: 200px;
}
.filters {
grid-template-columns: 1fr;
}
.filter-grid {
grid-template-columns: 1fr;
}
.filters__actions {
text-align: right;
}
.layout {
grid-template-columns: 1fr;
}
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: 280px;
z-index: 30;
transform: translateX(-100%);
transition: transform 0.2s ease;
}
.sidebar.open {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}
.nav-mobile-toggle {
display: inline-flex;
}
.page-footer {
flex-direction: column;
height: auto;
padding: 12px 16px;
gap: 8px;
align-items: flex-start;
}
.page-footer__links {
flex-wrap: wrap;
gap: 16px;
justify-content: flex-start;
}
.form-grid--2 {
grid-template-columns: 1fr;
}
.modal__panel--xl {
height: calc(100vh - 32px);
}
.editor-menubar,
.editor-toolbar {
padding: 8px 12px;
}
.editor-tabs button {
height: 36px;
padding: 0 10px;
font-size: 14px;
}
.doc-h1 {
font-size: 28px;
line-height: 36px;
}
.doc-sub {
font-size: 16px;
line-height: 24px;
}
.doc-checklist li {
font-size: 14px;
line-height: 20px;
}
.cb {
width: 24px;
height: 24px;
}
}
@media (max-width: 540px) {
.modal {
padding: 8px;
}
.modal__head,
.modal__body,
.modal__footer {
padding-left: 16px;
padding-right: 16px;
}
.card__header {
padding: 16px;
}
.data-table thead th,
.data-table tbody td {
padding: 12px 16px;
}
.editor-content {
padding: 16px 16px 96px;
}
}
/* =========================================================
PHASE 2 ADDITIONS — features from Letter Builder PDF
========================================================= */
/* ---------- Letters grid: actions column ---------- */
.th-actions {
width: 130px;
text-align: right;
}
.td-actions {
text-align: right;
white-space: nowrap;
}
.row-icon {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: var(--text-muted);
margin-left: 4px;
transition: background 0.15s, color 0.15s;
}
.row-icon:hover {
background: rgba(37, 99, 235, 0.08);
color: var(--primary-hover);
}
.row-icon--duplicate:hover {
background: rgba(139, 92, 246, 0.10);
color: var(--ai);
}
.row-icon--danger:hover {
background: rgba(239, 68, 68, 0.10);
color: var(--danger);
}
.row-icon [data-lucide] {
width: 16px;
height: 16px;
}
/* Text buttons are icon-free — hide any icon child as a safety net */
.btn i[data-lucide] { display: none; }
/* ---------- Editor tabs (now real menu triggers) ---------- */
.editor-tabs {
gap: 2px;
}
.editor-tabs > .menu {
position: relative;
}
.editor-tabs > .menu > button {
height: 36px;
padding: 0 14px;
font-size: var(--fs-base);
font-weight: 600;
color: var(--text-secondary);
border-radius: 8px;
}
.editor-tabs > .menu > button:hover,
.editor-tabs > .menu.open > button {
background: var(--bg-soft);
color: var(--primary-soft-text);
}
.editor-tabs > .menu > button.active {
background: var(--bg-soft);
color: var(--primary-soft-text);
}
/* dropdown popover */
.menu-pop {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 220px;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
display: none;
flex-direction: column;
z-index: 60;
}
.menu-pop--wide {
min-width: 260px;
}
.menu.open > .menu-pop {
display: flex;
}
.menu-item {
display: grid;
grid-template-columns: 16px 1fr auto;
align-items: center;
gap: 10px;
width: 100%;
height: 32px;
padding: 0 10px;
font-size: var(--fs-md);
color: var(--text-strong);
border-radius: 6px;
text-align: left;
white-space: nowrap;
}
.menu-item:hover {
background: var(--bg-active-tab);
color: var(--primary-soft-text);
}
.menu-item [data-lucide] {
width: 14px;
height: 14px;
color: var(--text-muted);
}
.menu-item:hover [data-lucide] {
color: var(--primary-hover);
}
.menu-item kbd {
font-family: inherit;
font-size: var(--fs-xs);
color: var(--text-muted);
background: rgba(0, 0, 0, 0.04);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid var(--border);
white-space: nowrap;
}
.menu-item .mi-arrow {
width: 14px;
height: 14px;
color: var(--text-muted);
}
.menu-item .mi-check {
color: var(--primary-hover);
}
.menu-item .mi-spacer,
.menu-item .mi-toggle {
width: 14px;
height: 14px;
display: inline-block;
}
.menu-item.toggle-item .mi-toggle {
width: 26px;
height: 14px;
border-radius: 9999px;
background: #d1d5db;
position: relative;
transition: background 0.18s;
grid-column: 1;
}
.menu-item.toggle-item .mi-toggle::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
transition: transform 0.18s;
}
.menu-item.toggle-item.on .mi-toggle {
background: var(--primary);
}
.menu-item.toggle-item.on .mi-toggle::after {
transform: translateX(12px);
}
.menu-item.toggle-item {
grid-template-columns: 26px 1fr auto;
}
.menu-section {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
padding: 6px 10px 2px;
font-weight: 600;
}
.menu-sep {
height: 1px;
background: var(--border);
margin: 4px 0;
}
/* ---------- Toolbar: font/size selects ---------- */
.tb-select {
position: relative;
display: inline-flex;
align-items: center;
height: 32px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: #fff;
padding: 0 28px 0 10px;
}
.tb-select select {
appearance: none;
border: none;
background: transparent;
outline: none;
font-size: var(--fs-md);
color: var(--text-strong);
width: 100%;
cursor: pointer;
}
.tb-select [data-lucide] {
position: absolute;
right: 8px;
width: 14px;
height: 14px;
color: var(--text-muted);
pointer-events: none;
}
.tb-select--font {
width: 132px;
}
.tb-select--size {
width: 64px;
}
/* ---------- Toolbar: color picker buttons ---------- */
.tb-color {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1px;
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
color: var(--text-mid);
transition: background 0.15s;
}
.tb-color:hover {
background: rgba(0, 0, 0, 0.05);
}
.tb-color [data-lucide] {
width: 16px;
height: 16px;
}
.tb-color__swatch {
width: 18px;
height: 3px;
border-radius: 1px;
margin-top: -1px;
}
.tb-color input[type="color"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
border: none;
padding: 0;
}
/* ---------- Toolbar: table picker ---------- */
.tb-table-btn {
position: relative;
width: 50px;
gap: 2px;
}
.tb-table-btn .tb-caret {
width: 12px;
height: 12px;
}
.table-picker {
position: absolute;
top: calc(100% + 6px);
left: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
padding: 10px;
z-index: 60;
}
.table-picker__grid {
display: grid;
grid-template-columns: repeat(10, 18px);
grid-template-rows: repeat(8, 18px);
gap: 3px;
}
.tp-cell {
width: 18px;
height: 18px;
border: 1px solid var(--border);
border-radius: 2px;
background: #fff;
cursor: pointer;
}
.tp-cell.active {
background: rgba(37, 99, 235, 0.15);
border-color: var(--primary-hover);
}
.table-picker__label {
margin-top: 8px;
text-align: center;
font-size: var(--fs-md);
color: var(--text-mid);
}
/* ---------- Toolbar: Fields dropdown ---------- */
.fields-select .fs-leading {
position: absolute;
left: 12px;
top: 50%;
width: 16px;
height: 16px;
color: var(--ai);
transform: translateY(-50%);
pointer-events: none;
}
.fields-pop {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 260px;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
z-index: 60;
max-height: 360px;
overflow-y: auto;
}
.fields-select.open .fields-pop {
display: block;
}
.fields-select:not(.open) .fields-pop {
display: none;
}
/* ---------- Rulers (refined minimal) ---------- */
/* Slim, calm rulers — the writable area is a clean white band, gutters are
barely-there warm gray, and only inch numbers appear (no fractional
labels, no quarter-inch tick clutter). */
.ruler-h {
position: relative;
height: 18px;
background: #f6f6f5;
border-bottom: 1px solid #e7e7e4;
flex-shrink: 0;
overflow: hidden;
font-family: "Geist Mono", "Geist", ui-monospace, monospace;
}
.ruler-h__track { position: absolute; inset: 0; }
.ruler-h::before {
content: "";
position: absolute;
left: var(--ruler-h-page-start, 64px);
width: var(--ruler-h-page-width, calc(100% - 128px));
top: 0;
bottom: 0;
background: #ffffff;
/* hairline edges where the writable band meets the gutter */
box-shadow:
inset 1px 0 0 0 rgba(37, 99, 235, 0.18),
inset -1px 0 0 0 rgba(37, 99, 235, 0.18);
pointer-events: none;
}
/* Tick marks: only at full + half inch, ultra subtle */
.ruler-h__tick,
.ruler-v__tick {
position: absolute;
background: #d4d4d2;
pointer-events: none;
z-index: 1;
}
.ruler-h__tick { bottom: 0; width: 1px; }
.ruler-h__tick--major { height: 5px; background: #a3a3a0; }
.ruler-h__tick--medium { height: 3px; background: #d4d4d2; }
/* minor (quarter-inch) ticks are no longer drawn — kept as a class for compat */
.ruler-h__tick--minor { display: none; }
.ruler-h__label,
.ruler-v__label {
position: absolute;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1;
color: #71717a;
font-variant-numeric: tabular-nums;
font-family: "Geist Mono", "Geist", ui-monospace, monospace;
pointer-events: none;
user-select: none;
z-index: 2;
}
.ruler-h__label {
top: 4px;
transform: translateX(-50%);
}
/* Slim chevron-style margin handles. drop-shadow filter is gone — it
triggers a re-paint on every transition; instead we use a slightly
larger triangle and shift on hover. */
.ruler-h__handle {
position: absolute;
bottom: -1px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 7px solid #2563eb;
transform: translateX(-50%) rotate(180deg);
cursor: ew-resize;
z-index: 4;
transition: transform 0.15s ease, border-bottom-color 0.15s ease;
}
.ruler-h__handle:hover { border-bottom-color: #1d4ed8; }
.ruler-h__handle:active { transform: translateX(-50%) rotate(180deg) scale(0.92); }
.ruler-h__handle--left { left: var(--ruler-h-handle-left, 64px); }
.ruler-h__handle--right { left: var(--ruler-h-handle-right, calc(100% - 64px)); }
/* Margin-amount badges that sit centered in each gutter, telling the user
exactly how many inches the margin is set to. */
.ruler-h__margin-lbl,
.ruler-v__margin-lbl {
position: absolute;
font-family: "Geist Mono", "Geist", ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.02em;
color: #4f4f4a;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.06);
padding: 1px 6px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
pointer-events: none;
white-space: nowrap;
z-index: 3;
user-select: none;
}
.ruler-h__margin-lbl {
top: 50%;
transform: translate(-50%, -50%);
}
.ruler-v__margin-lbl {
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
transform-origin: center center;
}
.editor-body {
flex: 1;
display: flex;
min-height: 0;
overflow: hidden;
position: relative;
}
.ruler-v {
position: relative;
width: 18px;
background: #f6f6f5;
border-right: 1px solid #e7e7e4;
flex-shrink: 0;
overflow: hidden;
font-family: "Geist Mono", "Geist", ui-monospace, monospace;
}
.ruler-v::before {
content: "";
position: absolute;
top: var(--ruler-v-page-start, 32px);
height: var(--ruler-v-page-height, calc(100% - 128px));
left: 0;
right: 0;
background: #ffffff;
box-shadow:
inset 0 1px 0 0 rgba(37, 99, 235, 0.18),
inset 0 -1px 0 0 rgba(37, 99, 235, 0.18);
pointer-events: none;
}
.ruler-v__tick { right: 0; height: 1px; }
.ruler-v__tick--major { width: 5px; background: #a3a3a0; }
.ruler-v__tick--medium { width: 3px; background: #d4d4d2; }
.ruler-v__tick--minor { display: none; }
.ruler-v__label {
left: 4px;
transform: translateY(-50%);
}
.ruler-v__handle {
position: absolute;
right: -1px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 7px solid #2563eb;
transform: translateY(-50%) rotate(180deg);
cursor: ns-resize;
z-index: 4;
transition: transform 0.15s ease, border-right-color 0.15s ease;
}
.ruler-v__handle:hover { border-right-color: #1d4ed8; }
.ruler-v__handle:active { transform: translateY(-50%) rotate(180deg) scale(0.92); }
.ruler-v__handle--top { top: var(--ruler-v-handle-top, 32px); }
.ruler-v__handle--bottom { top: var(--ruler-v-handle-bottom, calc(100% - 96px)); }
.editor-content {
flex: 1;
overflow-y: auto;
padding: 32px 64px 96px;
background: #fff;
position: relative;
transform-origin: top left;
transition: transform 0.18s ease;
}
/* ---------- Zoom (footer) ---------- */
.editor-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 16px;
background: #fcfcfc;
border-top: 1px solid var(--border-soft);
height: 36px;
font-size: var(--fs-md);
color: var(--text-secondary);
flex-shrink: 0;
}
.editor-footer__words {
font-weight: 500;
}
.editor-footer__zoom {
display: inline-flex;
align-items: center;
gap: 8px;
}
.zoom-btn {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: var(--text-mid);
}
.zoom-btn:hover {
background: rgba(0, 0, 0, 0.06);
}
.zoom-btn [data-lucide] {
width: 14px;
height: 14px;
}
#zoomRange {
appearance: none;
width: 140px;
height: 4px;
background: #e5e7eb;
border-radius: 9999px;
outline: none;
}
#zoomRange::-webkit-slider-thumb {
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--primary);
}
#zoomRange::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--primary);
}
.zoom-val {
min-width: 40px;
text-align: right;
font-variant-numeric: tabular-nums;
font-size: var(--fs-md);
color: var(--text-mid);
}
/* ---------- Page Settings modal ---------- */
.modal__panel--sm {
width: min(100%, 640px);
}
.ps-section {
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 20px 18px;
margin-bottom: 16px;
}
.ps-section:last-child {
margin-bottom: 0;
}
.ps-section__title {
margin: 0 0 14px;
font-size: var(--fs-base);
font-weight: 600;
color: var(--text-strong);
}
.form-grid--4 {
grid-template-columns: repeat(4, 1fr);
gap: 14px 16px;
}
.field-row {
display: flex;
gap: 12px;
align-items: flex-end;
}
.field--inline-half {
flex: 1;
}
.input-suffix {
position: relative;
display: flex;
align-items: center;
}
.input-suffix input {
flex: 1;
padding-right: 32px;
height: 38px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
outline: none;
padding-left: 10px;
font-size: var(--fs-base);
color: var(--text-strong);
background: #fff;
width: 100%;
}
.input-suffix input:focus {
border-color: var(--primary-hover);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.input-suffix span {
position: absolute;
right: 10px;
font-size: var(--fs-sm);
color: var(--text-muted);
pointer-events: none;
}
/* tighten editor toolbar spacing/typography */
.editor-toolbar {
gap: 8px;
padding: 8px 16px;
flex-wrap: wrap;
overflow: visible;
row-gap: 8px;
}
.editor-toolbar__group {
gap: 2px;
flex-shrink: 0;
}
.editor-toolbar__divider {
flex-shrink: 0;
}
.tool-btn {
width: 30px;
height: 30px;
border-radius: 6px;
flex-shrink: 0;
}
.tool-btn [data-lucide] {
width: 16px;
height: 16px;
}
.editor-toolbar__divider {
height: 22px;
width: 1px;
background: var(--border);
}
/* ---------- Per-page running header / footer ---------- */
/* These live inside each .doc-page (top/bottom margin area). They don't push
body content because they're absolutely positioned within the page's
relative box. */
.doc-page__header,
.doc-page__footer {
position: absolute;
left: var(--doc-margin-left);
right: var(--doc-margin-right);
display: flex;
align-items: center;
justify-content: center;
outline: none;
font-size: 10pt;
color: #4b5563;
padding: 4px 0;
}
.doc-page__header {
top: calc(var(--doc-margin-top) * 0.25);
min-height: calc(var(--doc-margin-top) * 0.45);
border-bottom: 1px dashed rgba(37, 99, 235, 0.30);
}
.doc-page__footer {
bottom: calc(var(--doc-margin-bottom) * 0.25);
min-height: calc(var(--doc-margin-bottom) * 0.45);
border-top: 1px dashed rgba(37, 99, 235, 0.30);
}
.doc-page__header:focus,
.doc-page__footer:focus {
background: rgba(37, 99, 235, 0.04);
border-color: var(--primary);
border-style: solid;
}
/* =========================================================
PHASE 4 — Full-screen Create Letter modal (step-wise)
Modernized chrome inspired by Notion/Linear/Confluence
========================================================= */
/* Inline editor: open in the content area instead of covering the chrome.
Top nav + ad-bar + sidebar stay visible. The "fullscreen" name is kept
for compatibility with existing JS class references. NOTE: `inset: auto`
must come BEFORE individual top/left/right/bottom — `inset` is a shorthand
that resets all four when set last. */
.modal--fullscreen {
padding: 0;
align-items: stretch;
justify-content: stretch;
inset: auto;
/* Sit below header + nav, to the right of the sidebar */
top: calc(var(--header-h) + var(--nav-h));
left: var(--sidebar-w);
right: 0;
bottom: 0;
}
.modal--fullscreen .modal__backdrop { display: none; }
.modal--fullscreen .modal__panel--shell {
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
display: flex;
flex-direction: column;
box-shadow: none;
overflow: hidden;
background: #fff;
}
/* Mobile / narrow: collapse to full viewport since sidebar collapses too.
The breakpoint matches when the sidebar+nav layout itself collapses. */
@media (max-width: 720px) {
.modal--fullscreen {
top: 0; left: 0; right: 0; bottom: 0;
}
}
/* While the inline editor is open, lock document scroll so the chrome (top
header + nav) can't scroll out from behind the fixed-position modal. The
:has() selector is supported in all current browsers. */
html:has(.modal--fullscreen.open),
body:has(.modal--fullscreen.open) {
overflow: hidden !important;
height: 100vh;
}
/* ---------- Top bar (back + title + actions) ---------- */
.cl-topbar {
display: flex;
align-items: center;
height: 56px;
padding: 0 20px;
border-bottom: 1px solid var(--border);
gap: 12px;
flex-shrink: 0;
background: #fff;
}
.cl-topbar__back {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 8px 0 4px;
border-radius: 8px;
color: var(--text-strong);
font-size: var(--fs-base);
font-weight: 500;
white-space: nowrap;
max-width: 360px;
overflow: hidden;
text-overflow: ellipsis;
}
.cl-topbar__back:hover { background: rgba(0, 0, 0, 0.04); }
.cl-topbar__back [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }
.cl-topbar__title {
font-size: var(--fs-lg);
font-weight: 600;
color: var(--text-strong);
margin: 0;
}
.cl-topbar__name {
font-size: var(--fs-lg);
font-weight: 600;
color: var(--text-strong);
border: 1px solid transparent;
border-radius: 6px;
padding: 4px 8px;
margin: 0;
outline: none;
min-width: 200px;
max-width: 480px;
background: transparent;
}
.cl-topbar__name:hover { border-color: var(--border); }
.cl-topbar__name:focus {
border-color: var(--primary-hover);
background: #fff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.cl-topbar__spacer { flex: 1; }
.cl-editor-actions {
display: inline-flex;
align-items: center;
gap: 10px;
}
.cl-editor-actions[hidden] { display: none; }
.cl-topbar__status {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
border-radius: 999px;
background: #f4f4f1;
font-size: var(--fs-md);
font-weight: 500;
color: #71717a;
margin-right: 8px;
font-feature-settings: "tnum" 1;
transition: background 0.18s ease, color 0.18s ease;
}
.cl-topbar__status [data-lucide] { width: 14px; height: 14px; }
.cl-topbar__status.is-saved {
background: #ecfdf5;
color: #047857;
}
.cl-topbar__status.is-saved [data-lucide] { color: #10b981; }
.cl-topbar__status.is-saving {
background: #eff6ff;
color: #1d4ed8;
}
.cl-topbar__status.is-saving .loader-lottie-tab {
width: 14px;
height: 14px;
}
/* Inline Lottie loader (matches phase1Docs components.html) */
.loader-lottie { display: inline-block; }
.loader-lottie-tab { width: 18px; height: 18px; }
/* Save button loader: hide label, show loader while saving */
#btnEditorSave .btn-loader { display: none; align-items: center; justify-content: center; }
#btnEditorSave.is-saving .btn-label { visibility: hidden; }
#btnEditorSave.is-saving .btn-loader {
display: inline-flex;
position: absolute;
inset: 0;
margin: auto;
}
#btnEditorSave { position: relative; }
#btnEditorSave[disabled] { cursor: progress; opacity: 0.85; }
.cl-topbar__icon-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--text-mid);
position: relative;
}
.cl-topbar__icon-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--primary-hover); }
.cl-topbar__icon-btn [data-lucide] { width: 18px; height: 18px; }
/* ---------- Step indicator ---------- */
.cl-stepper {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
height: 64px;
background: #f9fafb;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
padding: 0 20px;
}
.cl-step {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text-muted);
font-size: var(--fs-base);
font-weight: 500;
transition: color 0.15s;
}
.cl-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--border-strong);
font-size: 13px;
color: var(--text-muted);
font-weight: 600;
transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.cl-step.is-active { color: var(--text-strong); }
.cl-step.is-active .cl-step__num {
background: var(--primary-hover);
border-color: var(--primary-hover);
color: #fff;
}
.cl-step.is-done {
color: var(--text-strong);
cursor: pointer;
}
.cl-step.is-done:hover { color: var(--primary-soft-text); }
.cl-step.is-done:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.18);
outline-offset: 4px;
border-radius: 999px;
}
.cl-step.is-done .cl-step__num {
background: #16a34a;
border-color: #16a34a;
color: #fff;
font-size: 0;
}
.cl-step.is-done .cl-step__num::after {
content: "";
width: 9px;
height: 5px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
}
.cl-step__line {
height: 2px;
width: 80px;
background: var(--border);
border-radius: 2px;
flex-shrink: 0;
transition: background 0.18s;
}
.cl-step__line.is-done { background: #16a34a; }
/* ---------- Step content panes ---------- */
.cl-content {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
background: #fff;
}
.cl-pane { display: none; flex: 1; flex-direction: column; min-height: 0; }
.cl-pane.is-active { display: flex; }
/* Step 1: form */
.cl-pane--details {
overflow-y: auto;
padding: 40px 24px 32px;
}
.cl-form { width: 100%; max-width: 760px; margin: 0 auto; }
.cl-form__section + .cl-form__section { margin-top: 36px; }
.cl-form__title {
font-size: 18px;
font-weight: 600;
color: var(--text-strong);
margin: 0 0 4px;
}
.cl-form__sub {
font-size: var(--fs-md);
color: var(--text-muted);
margin: 0 0 18px;
}
.cl-form .field textarea {
resize: vertical;
min-height: 80px;
padding: 10px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: #fff;
font-family: inherit;
font-size: var(--fs-base);
outline: none;
color: var(--text-strong);
width: 100%;
box-shadow: var(--shadow-sm);
transition: border-color 0.15s, box-shadow 0.15s;
}
.cl-form .field textarea:focus {
border-color: var(--primary-hover);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.cl-toggle-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.cl-toggle-card {
display: flex;
gap: 12px;
padding: 14px;
border: 1.5px solid var(--border-strong);
border-radius: 10px;
background: #fff;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.cl-toggle-card:hover { border-color: var(--text-muted); }
.cl-toggle-card input { margin-top: 2px; accent-color: var(--primary-hover); width: 16px; height: 16px; flex-shrink: 0; }
.cl-toggle-card:has(input:checked) {
border-color: var(--primary-hover);
background: var(--bg-active-tab);
}
.cl-toggle-card__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-toggle-card__label strong { font-size: var(--fs-base); color: var(--text-strong); font-weight: 600; }
.cl-toggle-card__label span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
/* ---------- Step 1 footer ---------- */
.cl-footer {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 24px;
border-top: 1px solid var(--border);
background: #fff;
flex-shrink: 0;
gap: 16px;
}
.cl-footer__hint { font-size: var(--fs-md); color: var(--text-muted); }
.cl-footer__actions { display: inline-flex; align-items: center; gap: 12px; }
/* ---------- Step 2: editor pane ---------- */
.cl-pane--editor { padding: 0; overflow: hidden; }
.cl-pane--editor .editor-toolbar { padding: 8px 16px; }
/* ---------- Modern Insert popover (replaces Insert/Table tabs) ---------- */
.tb-insert { position: relative; flex-shrink: 0; }
.tb-insert__btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px 0 10px;
border: 1px dashed var(--border-strong);
border-radius: 8px;
background: #fff;
color: var(--text-mid);
font-size: var(--fs-md);
font-weight: 500;
transition: all 0.15s;
}
.tb-insert__btn:hover {
border-color: var(--primary-hover);
background: var(--bg-active-tab);
color: var(--primary-hover);
border-style: solid;
}
.tb-insert.is-open .tb-insert__btn {
border-color: var(--primary-hover);
background: var(--bg-active-tab);
color: var(--primary-hover);
border-style: solid;
}
.tb-insert__btn [data-lucide] { width: 16px; height: 16px; }
.tb-insert__pop {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 240px;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 6px;
z-index: 70;
display: none;
}
.tb-insert.is-open .tb-insert__pop { display: block; }
.tb-insert__item {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 8px;
text-align: left;
cursor: pointer;
}
.tb-insert__item:hover { background: var(--bg-active-tab); }
.tb-insert__item-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f4f4f5;
border-radius: 7px;
color: var(--text-mid);
flex-shrink: 0;
}
.tb-insert__item:hover .tb-insert__item-icon { background: rgba(37, 99, 235, 0.10); color: var(--primary-hover); }
.tb-insert__item-icon [data-lucide] { width: 16px; height: 16px; }
.tb-insert__item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-insert__item-text strong { font-weight: 500; font-size: var(--fs-base); color: var(--text-strong); }
.tb-insert__item-text small { font-size: var(--fs-xs); color: var(--text-muted); }
.tb-insert__sep { height: 1px; background: var(--border); margin: 4px 0; }
/* ---------- Modern Overflow (top-bar "⋮") ---------- */
.cl-overflow { position: relative; }
.cl-overflow__pop {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 252px;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 6px;
z-index: 70;
display: none;
max-height: 80vh;
overflow-y: auto;
}
.cl-overflow.is-open .cl-overflow__pop { display: block; }
.cl-overflow__group { display: flex; flex-direction: column; }
.cl-overflow__group + .cl-overflow__group {
border-top: 1px solid var(--border);
margin-top: 4px;
padding-top: 4px;
}
.cl-overflow__head {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
font-weight: 600;
padding: 6px 10px 2px;
}
.cl-overflow__item {
width: 100%;
display: grid;
grid-template-columns: 16px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
text-align: left;
font-size: var(--fs-md);
color: var(--text-strong);
}
.cl-overflow__item:hover { background: var(--bg-active-tab); color: var(--primary-hover); }
.cl-overflow__item [data-lucide] { width: 16px; height: 16px; color: var(--text-muted); }
.cl-overflow__item:hover [data-lucide] { color: var(--primary-hover); }
.cl-overflow__item.is-danger { color: var(--danger); }
.cl-overflow__item.is-danger [data-lucide] { color: var(--danger); }
.cl-overflow__item.is-danger:hover { background: rgba(239, 68, 68, 0.06); }
.cl-overflow__item kbd {
font-family: inherit;
font-size: var(--fs-xs);
color: var(--text-muted);
background: rgba(0, 0, 0, 0.04);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid var(--border);
white-space: nowrap;
}
.cl-overflow__toggle {
margin-left: auto;
width: 28px;
height: 16px;
background: #d1d5db;
border-radius: 9999px;
position: relative;
flex-shrink: 0;
transition: background 0.18s;
}
.cl-overflow__toggle::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
transition: transform 0.18s;
}
.cl-overflow__item.is-on .cl-overflow__toggle { background: var(--primary); }
.cl-overflow__item.is-on .cl-overflow__toggle::after { transform: translateX(12px); }
/* Hide old centered modal chrome that the fullscreen layout replaces */
.modal--fullscreen .modal__head,
.modal--fullscreen .editor-menubar { display: none !important; }
/* ============= AI generation animations ============= */
/* spinner used inside the send button */
@keyframes ai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ai-spin { animation: ai-spin 0.9s linear infinite; }
.ai-chat__send:disabled { cursor: progress; opacity: 0.85; }
.ai-chat__composer textarea:disabled { color: var(--text-muted); }
/* "AI is writing your letter" banner that sits at the top of the editor */
.ai-status {
position: relative;
z-index: 5;
width: var(--doc-page-width);
max-width: calc(100% - 24px);
margin: 0 auto 18px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 14px;
background:
linear-gradient(135deg,
rgba(221, 214, 254, 0.55) 0%,
rgba(224, 231, 255, 0.55) 35%,
rgba(243, 232, 255, 0.55) 70%,
rgba(221, 214, 254, 0.55) 100%);
background-size: 220% 220%;
border: 1px solid rgba(139, 92, 246, 0.28);
border-radius: 12px;
box-shadow: 0 6px 18px rgba(139, 92, 246, 0.16);
animation: ai-shimmer 2.4s ease-in-out infinite;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.28s ease, transform 0.28s ease;
}
.ai-status.is-visible {
opacity: 1;
transform: translateY(0);
}
@keyframes ai-shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.ai-status__icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(139, 92, 246, 0.14);
color: #6d28d9;
flex-shrink: 0;
animation: ai-icon-pulse 1.6s ease-in-out infinite;
}
.ai-status__icon [data-lucide] {
width: 18px;
height: 18px;
}
@keyframes ai-icon-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
.ai-status__text { flex: 1; min-width: 0; line-height: 1.3; }
.ai-status__title {
display: block;
font-weight: 600;
font-size: 13px;
color: #5b21b6;
}
.ai-status__sub {
display: block;
font-size: 12px;
color: #7c3aed;
margin-top: 2px;
}
.ai-status__dots { display: inline-flex; align-items: center; gap: 5px; }
.ai-status__dots span {
width: 6px; height: 6px; border-radius: 50%;
background: #8b5cf6;
animation: ai-dot 1.3s ease-in-out infinite;
}
.ai-status__dots span:nth-child(2) { animation-delay: 0.18s; }
.ai-status__dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ai-dot {
0%, 80%, 100% { transform: scale(0.55); opacity: 0.45; }
40% { transform: scale(1); opacity: 1; }
}
/* Blinking caret that follows the AI as it types */
.ai-typing-cursor {
display: inline-block;
width: 2px;
height: 1em;
background: #8b5cf6;
margin: 0 1px;
vertical-align: text-bottom;
animation: ai-cursor-blink 0.85s steps(2) infinite;
transform: translateY(2px);
pointer-events: none;
}
@keyframes ai-cursor-blink { to { opacity: 0; } }
/* Subtle entrance for the page when AI starts writing */
.doc-page.ai-writing {
animation: ai-page-enter 0.45s ease-out;
}
@keyframes ai-page-enter {
from { opacity: 0.6; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Running clinic mark used in the header */
.doc-clinic--running {
display: inline-flex;
align-items: center;
gap: 8px;
}
.doc-clinic--running .doc-clinic__logo {
width: 22px;
height: 22px;
}
.doc-clinic--running .doc-clinic__name {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
color: #111827;
}
/* =========================================================
PHASE 3 — Word-style pages, EHR letter, custom dropdowns
========================================================= */
/* Editor canvas — ghost-white background with a subtle dotted grid.
The grid is drawn via a small radial-gradient tile (1px dot every 22px),
giving the surface gentle texture without taxing paint. */
.editor-content {
flex: 1;
overflow-y: auto;
background-color: #f8f8f7;
background-image: radial-gradient(circle, rgba(15, 23, 42, 0.10) 1px, transparent 1px);
background-size: 22px 22px;
background-position: 0 0;
padding: 32px 0 56px;
outline: none;
font-size: 11pt;
line-height: 1.55;
color: var(--text);
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
box-shadow: none !important;
transform-origin: top center;
}
/* Each page is a white sheet — single composite shadow */
.doc-page {
width: var(--doc-page-width);
min-height: var(--doc-page-height);
padding-top: var(--doc-margin-top);
padding-right: var(--doc-margin-right);
padding-bottom: var(--doc-margin-bottom);
padding-left: var(--doc-margin-left);
margin: 0 auto 36px;
background: #fff;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.05),
0 8px 16px -6px rgba(15, 23, 42, 0.12);
position: relative;
outline: none;
border-radius: 2px;
}
.doc-page::before {
content: attr(data-page-num);
position: absolute;
top: -26px;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-family: "Geist Mono", "Geist", ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #9b988f;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.doc-page::after {
content: "PAGE";
position: absolute;
top: -26px;
right: calc(50% + 14px);
font-family: "Geist Mono", "Geist", ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
color: #9b988f;
pointer-events: none;
}
.doc-page--blank .doc-page__hint {
text-align: center;
color: #9ca3af;
margin-top: 200px;
font-style: italic;
}
/* EHR letterhead */
.doc-letterhead {
text-align: center;
margin-bottom: 24px;
padding-bottom: 14px;
border-bottom: 1px solid #e5e7eb;
}
.doc-clinic {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.doc-clinic__logo {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.doc-clinic__name {
font-size: 24px;
font-weight: 700;
color: #111827;
letter-spacing: 0.5px;
}
.doc-letterhead__line {
margin: 2px 0;
font-size: 10pt;
color: #4b5563;
line-height: 1.5;
}
.doc-h2 {
font-size: 14pt;
font-weight: 700;
margin: 22px 0 16px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
color: #111827;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
padding: 10px 0;
}
/* Doc body typography */
.doc-page p {
margin: 0 0 12px;
}
.doc-list {
margin: 8px 0 16px 28px;
padding: 0;
}
.doc-list li {
margin-bottom: 6px;
}
.doc-signoff {
margin-top: 36px !important;
}
/* Form-style table rows used in the letter (Employer/Patient lines) */
.doc-form-table {
width: 100%;
margin: 10px 0;
border-collapse: collapse;
}
.doc-form-table td {
padding: 8px 12px;
font-size: 11pt;
vertical-align: top;
}
/* Field tokens: tighter, more letter-like */
.doc-field-token {
display: inline;
background: rgba(51, 119, 255, 0.08);
border: 1px solid rgba(51, 119, 255, 0.18);
color: #1d4ed8;
font-weight: 500;
font-size: 0.95em;
padding: 1px 6px;
border-radius: 4px;
cursor: pointer;
transition: background 0.12s;
white-space: nowrap;
}
.doc-field-token:hover {
background: rgba(51, 119, 255, 0.16);
}
/* ---------- Custom toolbar dropdowns (font + size) ---------- */
.tb-dd {
position: relative;
flex-shrink: 0;
}
.tb-dd__trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
height: 32px;
padding: 0 8px 0 12px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: #fff;
cursor: pointer;
font-size: var(--fs-base);
color: var(--text-strong);
transition: border-color 0.15s, box-shadow 0.15s;
}
.tb-dd__trigger:hover {
border-color: var(--text-muted);
}
.tb-dd.open .tb-dd__trigger {
border-color: var(--primary-hover);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.tb-dd__value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tb-dd__caret {
width: 14px;
height: 14px;
color: var(--text-muted);
transition: transform 0.18s, color 0.15s;
flex-shrink: 0;
}
.tb-dd.open .tb-dd__caret {
transform: rotate(180deg);
color: var(--primary-hover);
}
.tb-dd--font .tb-dd__trigger {
width: 148px;
}
.tb-dd--size .tb-dd__trigger {
width: 68px;
}
.tb-dd__menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 100%;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
padding: 4px;
z-index: 70;
max-height: 320px;
overflow-y: auto;
list-style: none;
margin: 0;
}
.tb-dd--font .tb-dd__menu {
min-width: 200px;
}
.tb-dd--size .tb-dd__menu {
min-width: 90px;
}
.tb-dd__menu li {
padding: 8px 12px 8px 32px;
border-radius: 5px;
cursor: pointer;
font-size: var(--fs-base);
color: var(--text-strong);
white-space: nowrap;
position: relative;
user-select: none;
}
.tb-dd__menu li:hover {
background: var(--bg-active-tab);
color: var(--primary-hover);
}
.tb-dd__menu li.is-selected {
color: var(--primary-hover);
font-weight: 500;
}
.tb-dd__menu li.is-selected::before {
content: "";
position: absolute;
left: 12px;
top: 50%;
width: 10px;
height: 6px;
border-left: 2px solid var(--primary-hover);
border-bottom: 2px solid var(--primary-hover);
transform: translateY(-70%) rotate(-45deg);
}
.tb-dd--size .tb-dd__menu li {
text-align: center;
padding: 8px 12px;
}
.tb-dd--size .tb-dd__menu li.is-selected::before {
display: none;
}
.tb-dd--size .tb-dd__menu li.is-selected {
background: var(--bg-soft);
}
/* ---------- Doc-page editing affordances ---------- */
.doc-page {
cursor: text;
caret-color: var(--primary-hover);
}
.doc-page:focus-within {
outline: 2px solid rgba(37, 99, 235, 0.18);
outline-offset: 2px;
}
/* Empty page placeholder via :empty + ::before. Browsers leave a
in
newly-emptied editables; treat any page that only holds
as empty too. */
.doc-page[data-placeholder] > p:only-child:empty::before,
.doc-page[data-placeholder] > p:only-child > br:only-child::before {
content: attr(data-placeholder);
color: #9ca3af;
font-style: italic;
pointer-events: none;
}
.doc-page[data-placeholder] > p:only-child > br:only-child::before {
display: block;
}
/* Doc-page typography for execCommand-generated headings */
.doc-page h1 { font-size: 22pt; font-weight: 700; margin: 18px 0 10px; line-height: 1.2; }
.doc-page h2 { font-size: 16pt; font-weight: 700; margin: 16px 0 8px; line-height: 1.25; }
.doc-page h3 { font-size: 13pt; font-weight: 600; margin: 14px 0 6px; line-height: 1.3; }
.doc-page h4 { font-size: 11pt; font-weight: 600; margin: 12px 0 6px; line-height: 1.3; }
/* Inserted images live inside the doc */
.doc-page img {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle;
}
/* Inserted barcode placeholder */
.doc-barcode {
display: inline-block;
font-family: "Libre Barcode 39", "Courier New", monospace;
font-size: 11pt;
letter-spacing: 1px;
background: linear-gradient(
90deg,
#000 0 2px, transparent 2px 4px, #000 4px 5px, transparent 5px 8px,
#000 8px 11px, transparent 11px 13px, #000 13px 14px, transparent 14px 17px,
#000 17px 19px, transparent 19px 21px, #000 21px 24px, transparent 24px 26px
);
background-repeat: repeat-x;
background-size: 26px 100%;
height: 36px;
width: 132px;
vertical-align: middle;
user-select: none;
margin: 0 4px;
}
.doc-barcode::after {
content: attr(data-value);
display: block;
text-align: center;
font-size: 9px;
letter-spacing: 1px;
font-family: "Inter", sans-serif;
color: #fff;
background: #000;
padding: 2px 0;
margin-top: 26px;
}
/* ---------- Tables inserted into the document ---------- */
.doc-table {
width: auto;
border-collapse: collapse;
margin: 16px 0;
font-size: var(--fs-base);
font-family: inherit;
table-layout: fixed;
}
.doc-table td {
border: 1px solid var(--border-strong);
padding: 8px 12px;
min-width: 60px;
min-height: 32px;
vertical-align: top;
background: #fff;
}
.doc-table td:focus {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
.doc-table.is-selected {
outline: 2px dashed rgba(37, 99, 235, 0.45);
outline-offset: 4px;
}
.doc-table td.is-active-cell {
background: rgba(37, 99, 235, 0.06);
}
/* frame variants */
.doc-table--frame-none, .doc-table--frame-none td { border-color: transparent !important; }
.doc-table--frame-box { outline: 1px solid currentColor; outline-offset: 0; }
.doc-table--frame-box td { border-color: transparent !important; }
.doc-table--frame-all td { /* default */ }
.doc-table--frame-grid td { border-color: var(--border-strong); }
.doc-table--frame-grid tr:first-child td { border-top: 0; }
.doc-table--frame-grid tr:last-child td { border-bottom: 0; }
.doc-table--frame-grid td:first-child { border-left: 0; }
.doc-table--frame-grid td:last-child { border-right: 0; }
/* ---------- Active state for toolbar buttons ---------- */
.tool-btn.is-active {
background: var(--bg-soft);
color: var(--primary-soft-text);
}
.tool-btn.is-active [data-lucide] {
color: var(--primary-soft-text);
}
/* ---------- Right-click context menu ---------- */
.ctx-menu {
position: fixed;
z-index: 80;
min-width: 240px;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
display: flex;
flex-direction: column;
}
.ctx-menu[hidden] {
display: none;
}
.ctx-menu .menu-item.ctx-danger:hover {
background: rgba(239, 68, 68, 0.08);
color: var(--danger);
}
.ctx-menu .menu-item.ctx-danger:hover [data-lucide] {
color: var(--danger);
}
/* ---------- Modal tabs (Table Properties) ---------- */
.modal-tabs {
display: flex;
align-items: stretch;
gap: 4px;
padding: 8px 24px 0;
border-bottom: 1px solid var(--border);
}
.modal-tab {
padding: 10px 14px;
font-size: var(--fs-base);
font-weight: 500;
color: var(--text-mid);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.modal-tab:hover {
color: var(--primary-hover);
}
.modal-tab.active {
color: var(--primary-hover);
border-bottom-color: var(--primary-hover);
}
.tp-panel {
display: flex;
flex-direction: column;
}
.tp-panel[hidden] {
display: none;
}
/* ---------- Frame options grid ---------- */
.frame-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.frame-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 8px;
border: 1.5px solid var(--border-strong);
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.frame-option:hover {
border-color: var(--primary);
}
.frame-option.active {
border-color: var(--primary);
background: var(--bg-active-tab);
}
.frame-option span {
font-size: var(--fs-sm);
color: var(--text-mid);
}
.frame-preview {
width: 44px;
height: 30px;
border-radius: 2px;
background: #fff;
}
.frame-preview--none {
background:
repeating-linear-gradient(135deg, #f3f4f6 0 4px, #fff 4px 8px);
border: 1px dashed #d1d5db;
}
.frame-preview--box {
border: 2px solid #1a1a1a;
}
.frame-preview--all {
border: 2px solid #1a1a1a;
background:
linear-gradient(#1a1a1a, #1a1a1a) center/100% 1px no-repeat,
linear-gradient(#1a1a1a, #1a1a1a) center/1px 100% no-repeat,
#fff;
}
.frame-preview--grid {
background:
linear-gradient(#1a1a1a, #1a1a1a) center/100% 1px no-repeat,
linear-gradient(#1a1a1a, #1a1a1a) center/1px 100% no-repeat,
#fff;
border-bottom: 2px solid #1a1a1a;
border-top: 2px solid #1a1a1a;
}
/* ---------- Color input combo ---------- */
.color-input {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: 4px 10px;
height: 38px;
background: #fff;
}
.color-input input[type="color"] {
width: 28px;
height: 24px;
padding: 0;
border: 1px solid var(--border);
border-radius: 4px;
background: none;
cursor: pointer;
}
.color-input span {
font-size: var(--fs-sm);
color: var(--text-mid);
font-variant-numeric: tabular-nums;
}
/* ---------- Cell-height row + checkbox row ---------- */
.cell-h-row {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.checkbox-row {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--fs-base);
color: var(--text-strong);
cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--primary);
}
/* tighten editor menubar */
.editor-menubar {
padding: 8px 16px;
gap: 12px;
}
.editor-menubar__actions {
gap: 10px;
}
/* tighten doc typography (was huge from Figma export) */
.editor-content {
padding: 32px 64px 96px;
font-size: var(--fs-base);
line-height: 1.55;
color: var(--text);
}
.doc-h1 {
font-size: 28px;
line-height: 1.25;
font-weight: 700;
margin: 0 0 12px;
}
.doc-sub {
font-size: 16px;
line-height: 1.5;
color: var(--text-secondary);
margin: 0 0 18px;
}
.doc-checklist {
gap: 10px;
margin-bottom: 18px;
}
.doc-checklist li {
font-size: var(--fs-base);
line-height: 1.5;
gap: 10px;
font-weight: 500;
}
.cb {
width: 22px;
height: 22px;
border-radius: 6px;
}
.cb--checked [data-lucide] {
width: 14px;
height: 14px;
}
.doc-field-token {
font-size: var(--fs-base);
padding: 2px 6px;
}
/* responsive: rulers + page settings ---------- */
@media (max-width: 880px) {
.ruler-h,
.ruler-v {
display: none;
}
.editor-body {
flex-direction: column;
}
.form-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
.tb-select--font {
width: 110px;
}
}
@media (max-width: 540px) {
.form-grid--4 {
grid-template-columns: 1fr;
}
.editor-tabs > .menu > button {
padding: 0 10px;
font-size: var(--fs-md);
}
.menu-pop {
min-width: 200px;
}
}
/* =========================================================
Accessibility — focus rings + reduced motion
========================================================= */
/* Visible focus ring for keyboard users (mouse clicks remain quiet).
Two-layer ring keeps contrast against any background. */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
border-radius: 4px;
}
/* Inputs / textareas get a softer inner ring instead of the offset outline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
border-color: #2563eb !important;
}
/* Honour OS-level reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ============= @-MENTION FIELD PICKER ============= */
.mention-pop {
position: fixed;
z-index: 1200;
width: 320px;
max-height: 360px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 14px;
box-shadow:
0 1px 1px rgba(15, 23, 42, 0.04),
0 18px 48px -10px rgba(76, 29, 149, 0.22),
0 4px 12px -4px rgba(15, 23, 42, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(4px) scale(0.98);
opacity: 0;
pointer-events: none;
transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.14s ease;
font-family: "Geist", sans-serif;
}
.mention-pop.is-open {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
.mention-pop__head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
background: linear-gradient(180deg, #faf9ff, #fff);
}
.mention-pop__head [data-lucide] { color: var(--ai); }
.mention-pop__head [data-lucide]::before { font-size: 16px; }
.mention-pop__title {
flex: 1;
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text);
}
.mention-pop__kbd,
.mention-pop kbd {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 10.5px;
color: var(--text-muted);
background: #f3f4f6;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 5px;
padding: 1px 5px;
}
.mention-pop__list {
flex: 1;
overflow-y: auto;
padding: 6px;
scrollbar-width: thin;
}
.mention-pop__list::-webkit-scrollbar { width: 6px; }
.mention-pop__list::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.12);
border-radius: 999px;
}
.mention-pop__grouphead {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px 4px;
margin-top: 2px;
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--text-muted);
}
.mention-pop__grouphead [data-lucide] { color: #2563eb; }
.mention-pop__grouphead [data-lucide]::before { font-size: 13px; }
.mention-pop__item {
display: flex;
align-items: baseline;
gap: 10px;
width: 100%;
padding: 7px 10px;
border-radius: 8px;
text-align: left;
cursor: pointer;
transition: background 0.1s ease;
}
.mention-pop__item:hover { background: #eff6ff; }
.mention-pop__item.is-active {
background: linear-gradient(180deg, #eff6ff, #dbeafe);
outline: 1px solid rgba(37, 99, 235, 0.20);
}
.mention-pop__token {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
color: #1d4ed8;
background: rgba(37, 99, 235, 0.08);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
}
.mention-pop__label {
font-size: 12.5px;
color: var(--text-mid);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mention-pop__item.is-active .mention-pop__label { color: var(--text); }
.mention-pop__empty {
padding: 28px 16px;
text-align: center;
color: var(--text-muted);
font-size: 12.5px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.mention-pop__empty [data-lucide]::before { font-size: 22px; color: #cbd5e1; }
.mention-pop__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-top: 1px solid rgba(15, 23, 42, 0.06);
background: #fafafa;
font-size: 10.5px;
color: var(--text-muted);
}
.mention-pop__foot span {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* ============= SIGNATURE MODAL ============= */
.tool-btn--signature [data-lucide] { color: #2563eb; }
.modal-tabs .modal-tab {
display: inline-flex;
align-items: center;
gap: 6px;
}
.modal-tabs .modal-tab [data-lucide]::before { font-size: 15px; }
.sig-pane { padding: 4px 0; }
.sig-pane[hidden] { display: none; }
/* Upload tab */
.sig-drop {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 20px;
background: #fafbff;
border: 1.5px dashed #c9d2e5;
border-radius: 12px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.sig-drop:hover, .sig-drop.is-drag {
border-color: #2563eb;
background: #eff6ff;
}
.sig-drop__icon {
width: 48px; height: 48px;
border-radius: 12px;
background: #fff;
border: 1px solid rgba(37, 99, 235, 0.20);
color: #2563eb;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sig-drop__icon [data-lucide]::before { font-size: 22px; }
.sig-drop__text strong {
display: block;
font-size: 13.5px;
color: var(--text);
font-weight: 600;
margin-bottom: 2px;
}
.sig-drop__text small {
display: block;
font-size: 11.5px;
color: var(--text-muted);
}
.sig-preview {
position: relative;
margin-top: 14px;
padding: 14px;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: repeating-linear-gradient(45deg, #fafbff 0 8px, #ffffff 8px 16px);
display: flex;
align-items: center;
justify-content: center;
min-height: 110px;
}
.sig-preview img {
max-width: 100%;
max-height: 140px;
object-fit: contain;
}
.sig-preview__remove {
position: absolute;
top: 8px; right: 8px;
width: 26px; height: 26px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.06);
color: var(--text-mid);
display: inline-flex;
align-items: center;
justify-content: center;
}
.sig-preview__remove:hover { background: rgba(15, 23, 42, 0.12); }
.sig-preview__remove [data-lucide]::before { font-size: 15px; }
/* Draw tab */
.sig-canvas-wrap {
position: relative;
border: 1.5px dashed #c9d2e5;
border-radius: 12px;
background: linear-gradient(180deg, #fff, #fbfbff);
overflow: hidden;
height: 220px;
}
.sig-canvas-wrap canvas {
display: block;
width: 100%;
height: 100%;
cursor: crosshair;
touch-action: none;
}
.sig-canvas-baseline {
position: absolute;
left: 8%;
right: 8%;
bottom: 38px;
border-bottom: 1.5px solid rgba(15, 23, 42, 0.16);
pointer-events: none;
}
.sig-canvas-hint {
position: absolute;
left: 0; right: 0;
bottom: 14px;
text-align: center;
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
pointer-events: none;
transition: opacity 0.2s ease;
}
.sig-canvas-hint.is-hidden { opacity: 0; }
.sig-canvas-tools {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
}
.sig-color-row { display: inline-flex; gap: 8px; }
.sig-color {
position: relative;
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sig-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sig-color__swatch {
width: 22px;
height: 22px;
border-radius: 50%;
box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent;
transition: box-shadow 0.15s ease;
}
.sig-color input:checked + .sig-color__swatch {
box-shadow: 0 0 0 2px #fff, 0 0 0 3px #2563eb;
}
/* Type tab */
.sig-type-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.sig-type-opt {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 10px 12px;
border: 1.5px solid var(--border);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease;
}
.sig-type-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sig-type-opt__preview {
font-size: 26px;
color: var(--text);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.sig-type-opt__name {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sig-type-opt:hover { border-color: rgba(37, 99, 235, 0.35); }
.sig-type-opt.is-selected {
border-color: #2563eb;
background: #eff6ff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
/* Inserted signature image — sized like a real signature line */
.doc-signature-img {
display: inline-block;
max-height: 70px;
width: auto;
vertical-align: bottom;
user-select: none;
}
/* ============= FLOATING IMAGES (text-wrap + drag + resize) =============
Floating images use CSS float so surrounding text reflows around them.
Default side is right; users can drag to either side, and shape-outside
clamps the exclusion area to the image's margin box. */
.doc-floating {
position: relative;
display: block;
float: right;
shape-outside: margin-box;
margin: 0 0 12px 18px;
user-select: none;
cursor: grab;
z-index: 2;
transition: outline-color 0.15s ease, box-shadow 0.15s ease;
outline: 1px dashed transparent;
outline-offset: 2px;
}
.doc-floating--left {
float: left;
margin: 0 18px 12px 0;
}
.doc-floating:hover {
outline-color: rgba(37, 99, 235, 0.35);
}
.doc-floating.is-selected {
outline: 2px solid #2563eb;
outline-offset: 3px;
cursor: grab;
box-shadow: 0 8px 24px -10px rgba(37, 99, 235, 0.45);
}
.doc-floating.is-dragging {
opacity: 0.85;
z-index: 50;
outline: 2px solid #2563eb;
box-shadow: 0 16px 36px -10px rgba(37, 99, 235, 0.5);
pointer-events: none;
}
body.is-floating-drag {
user-select: none;
cursor: grabbing;
}
body.is-floating-drag .doc-floating.is-dragging,
body.is-floating-drag .doc-floating.is-selected {
cursor: grabbing;
}
/* Live drop indicator: highlights the paragraph the image will anchor before */
.doc-floating-drop-target {
position: relative;
}
.doc-floating-drop-target::before {
content: "";
position: absolute;
left: -6px; right: -6px;
top: -6px;
height: 2px;
background: linear-gradient(90deg, transparent, #2563eb 20%, #2563eb 80%, transparent);
border-radius: 2px;
pointer-events: none;
animation: doc-drop-pulse 1.2s ease-in-out infinite;
}
/* When the empty page itself is the drop target, ring the whole page. */
.doc-page.doc-floating-drop-target {
box-shadow: 0 0 0 2px #2563eb, 0 0 0 5px rgba(37, 99, 235, 0.18);
transition: box-shadow 0.18s ease;
}
.doc-page.doc-floating-drop-target::before { display: none; }
@keyframes doc-drop-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
.doc-floating__img {
display: block;
width: 100%;
height: auto;
pointer-events: none;
-webkit-user-drag: none;
user-drag: none;
}
.doc-floating--signature {
/* Pure background-free transparent presentation */
}
.doc-floating--signature .doc-floating__img {
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.04));
}
/* Eight-corner resize handles (only NW/NE/SW/SE for now) */
.doc-floating__handle {
position: absolute;
width: 12px;
height: 12px;
border-radius: 3px;
background: #2563eb;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
display: none;
z-index: 1;
}
.doc-floating.is-selected .doc-floating__handle { display: block; }
.doc-floating__handle[data-handle="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.doc-floating__handle[data-handle="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.doc-floating__handle[data-handle="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.doc-floating__handle[data-handle="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
/* ============= SHARE-LINK MODAL ============= */
.share-link__head-icon {
margin-right: 8px;
color: #2563eb;
vertical-align: middle;
}
.share-link__head-icon::before { font-size: 18px; }
#shareLinkModal h3 {
display: inline-flex;
align-items: center;
gap: 8px;
}
.share-link__intro {
margin: 0 0 14px;
font-size: 13px;
color: var(--text-mid);
line-height: 1.55;
}
.share-link__label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
.share-link__row {
display: flex;
gap: 8px;
align-items: center;
}
.share-link__row input {
flex: 1;
height: 38px;
padding: 0 12px;
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 12px;
color: var(--text-mid);
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 8px;
text-overflow: ellipsis;
}
.share-link__row input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
#btnCopyShareLink.is-copied {
background: #16a34a;
border-color: #16a34a;
}
.share-link__stats {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--border);
}
.share-link__stat {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted);
}
.share-link__stat [data-lucide]::before {
font-size: 14px;
color: #2563eb;
}
/* ============= PREVIEW SHELL (patient-facing fill mode) ============= */
body.is-preview-mode .app-shell { display: none !important; }
body.is-preview-mode .modal:not(#shareLinkModal) { display: none !important; }
body.is-preview-mode {
background:
radial-gradient(60% 80% at 20% 0%, rgba(37, 99, 235, 0.06), transparent 70%),
radial-gradient(60% 80% at 90% 10%, rgba(139, 92, 246, 0.05), transparent 75%),
#f4f6fb;
min-height: 100vh;
font-family: "Geist", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
}
body.is-preview-mode.is-embedded-preview {
background: #fff;
min-height: 100%;
}
.preview-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
body.is-embedded-preview .preview-shell {
min-height: 100vh;
}
.preview-shell[hidden] { display: none; }
.preview-shell__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 28px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
position: sticky;
top: 0;
z-index: 5;
}
body.is-embedded-preview .preview-shell__head {
display: none;
}
.preview-shell__brand {
display: flex;
align-items: center;
gap: 14px;
}
.preview-shell__logo {
height: 28px;
width: auto;
}
.preview-shell__title-wrap { display: flex; flex-direction: column; }
.preview-shell__title {
margin: 0;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
}
.preview-shell__subtitle {
font-size: 11.5px;
color: var(--text-muted);
}
.preview-shell__actions {
display: flex;
align-items: center;
gap: 12px;
}
.preview-shell__badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
background: rgba(37, 99, 235, 0.10);
color: #1d4ed8;
}
.preview-shell__badge [data-lucide]::before { font-size: 13px; }
.preview-shell__body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 24px 80px;
gap: 24px;
}
body.is-embedded-preview .preview-shell__body {
align-items: stretch;
padding: 0;
gap: 0;
}
.preview-shell__paper {
width: min(820px, 100%);
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 18px;
box-shadow:
0 1px 1px rgba(15, 23, 42, 0.04),
0 24px 60px -20px rgba(15, 23, 42, 0.18),
0 6px 14px -8px rgba(15, 23, 42, 0.08);
padding: 56px 64px;
overflow: hidden;
}
body.is-embedded-preview .preview-shell__paper {
width: 100%;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 42px 52px;
overflow: visible;
}
.preview-shell__paper .doc-page {
width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
page-break-after: auto;
}
.preview-shell__paper .doc-page + .doc-page {
margin-top: 28px !important;
padding-top: 28px !important;
border-top: 1px dashed var(--border) !important;
}
/* In preview mode, fields look "fillable" not "designable" */
.preview-shell__paper .doc-ff {
background: #fff;
}
.preview-shell__paper .doc-ff::before { display: none; }
.preview-shell__paper .doc-ff:hover {
border-color: rgba(37, 99, 235, 0.35);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
/* Fillable text placeholders */
.is-fillable {
color: var(--text);
font-style: normal !important;
outline: none;
cursor: text;
display: inline-block;
min-width: 60px;
}
.is-fillable:not(.was-touched) {
color: #9ca3af;
font-style: italic !important;
}
.is-fillable:focus {
outline: 2px solid rgba(37, 99, 235, 0.35);
outline-offset: 1px;
border-radius: 3px;
}
.doc-ff__textarea.is-fillable {
display: block;
min-height: 80px;
width: 100%;
}
.doc-ff__blank.is-fillable {
min-width: 140px;
}
/* Checkbox / radio chosen states */
.doc-ff__opt {
cursor: pointer;
transition: background 0.12s ease;
border-radius: 6px;
padding: 4px 6px;
margin: -4px -6px;
}
.preview-shell__paper .doc-ff__opt:hover { background: rgba(37, 99, 235, 0.06); }
.doc-ff__opt.is-checked .doc-ff__check {
background: #2563eb;
border-color: #2563eb;
position: relative;
}
.doc-ff__opt.is-checked .doc-ff__check::after {
content: "";
position: absolute;
left: 4px; top: 1px;
width: 5px; height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.doc-ff__opt.is-checked .doc-ff__radio {
border-color: #2563eb;
}
.doc-ff__opt.is-checked .doc-ff__radio::after {
content: "";
position: absolute;
inset: 3px;
background: #2563eb;
border-radius: 50%;
}
.doc-ff__radio { position: relative; }
/* Yes / No active state */
.doc-ff__pill { transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease; }
.preview-shell__paper .doc-ff__pill { cursor: pointer; }
.doc-ff__pill.is-active.doc-ff__pill--yes {
background: #16a34a;
color: #fff;
}
.doc-ff__pill.is-active.doc-ff__pill--no {
background: #ef4444;
color: #fff;
}
.preview-shell__paper .doc-ff__pill:hover {
transform: translateY(-1px);
}
/* Star rating interactions */
.doc-ff__stars [data-lucide].is-clickable { cursor: pointer; transition: transform 0.12s ease; }
.doc-ff__stars [data-lucide].is-clickable:hover { transform: scale(1.12); }
.doc-ff__stars [data-lucide].is-active::before,
.doc-ff__stars [data-lucide].is-hover::before {
font-variation-settings: "FILL" 1;
}
.doc-ff__stars [data-lucide]:not(.is-active):not(.is-hover)::before {
font-variation-settings: "FILL" 0;
}
/* Scale step active */
.preview-shell__paper .doc-ff__scale-step {
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.preview-shell__paper .doc-ff__scale-step:hover {
background: rgba(37, 99, 235, 0.08);
border-color: #2563eb;
}
.doc-ff__scale-step.is-active {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
/* Dropdown collapse / expand */
.doc-ff__options.is-collapsed { display: none; }
.doc-ff__select.is-clickable { cursor: pointer; }
.preview-shell__paper .doc-ff__options li.is-clickable {
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
list-style-position: inside;
}
.preview-shell__paper .doc-ff__options li.is-clickable:hover {
background: rgba(37, 99, 235, 0.10);
color: var(--text);
}
/* File upload "ready" state */
.doc-ff__file.is-clickable { cursor: pointer; }
.doc-ff__file.is-uploaded {
border-color: #16a34a;
background: #f0fdf4;
}
.doc-ff__file.is-uploaded .doc-ff__file-icon {
background: rgba(22, 163, 74, 0.12);
color: #16a34a;
}
/* Signature live canvas */
.doc-ff__sig.is-clickable { cursor: pointer; }
.sig-canvas-live {
position: absolute;
left: 14px;
top: 14px;
background: transparent;
cursor: crosshair;
}
/* Hide editor-only toolbars/handles defensively */
.preview-shell__paper .doc-ff__toolbar,
.preview-shell__paper .doc-floating__handle,
.preview-shell__paper .ff-drop-indicator { display: none !important; }
.preview-shell__paper .doc-ff:hover > .doc-ff__toolbar { display: none !important; }
/* CTA + toast */
.preview-shell__cta {
width: min(820px, 100%);
display: flex;
justify-content: flex-end;
}
body.is-embedded-preview .preview-shell__cta {
width: 100%;
padding: 22px 52px 42px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
background: #fff;
}
#btnPreviewSubmit { padding: 10px 20px; font-size: 14px; }
#btnPreviewSubmit i[data-lucide]::before { font-size: 18px; }
.preview-shell__toast {
position: fixed;
left: 50%;
bottom: 36px;
transform: translateX(-50%) translateY(12px);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: #16a34a;
color: #fff;
border-radius: 999px;
box-shadow: 0 18px 40px -12px rgba(22, 163, 74, 0.45);
font-size: 13px;
font-weight: 500;
opacity: 0;
pointer-events: none;
transition: transform 0.24s ease, opacity 0.18s ease;
z-index: 100;
}
.preview-shell__toast.is-shown {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.preview-shell__toast [data-lucide]::before { font-size: 18px; }
@media (max-width: 720px) {
.preview-shell__paper { padding: 32px 22px; border-radius: 12px; }
body.is-embedded-preview .preview-shell__paper { padding: 28px 18px; border-radius: 0; }
body.is-embedded-preview .preview-shell__cta { padding: 18px; }
.preview-shell__head { padding: 12px 16px; }
.preview-shell__title { font-size: 14px; }
.preview-shell__subtitle { font-size: 11px; }
}
/* ============= PREVIEW NATIVE INPUTS + VALIDATION ============= */
.doc-ff__input {
flex: 1;
display: block;
width: 100%;
border: none;
outline: none;
background: transparent;
font: inherit;
font-size: 13px;
color: var(--text);
padding: 0;
min-width: 0;
}
.doc-ff__input::placeholder { color: #9aa0aa; font-style: italic; }
.doc-ff__input--textarea {
display: block;
width: 100%;
min-height: 80px;
padding: 10px 12px;
background: #fff;
border: 1px solid #d8dde9;
border-radius: 8px;
resize: vertical;
font-family: inherit;
font-size: 13px;
line-height: 1.5;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.doc-ff__input--textarea:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* Date / time inputs render as plain text fields styled to match the rest
of the form. A custom popover (.ffx-picker) is mounted on click. */
.doc-ff__input--date,
.doc-ff__input--time {
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
cursor: text;
}
.doc-ff__line--date,
.doc-ff__line--icon:has(.doc-ff__input--date),
.doc-ff__line--icon:has(.doc-ff__input--time) {
cursor: text;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.doc-ff__line--date:hover,
.doc-ff__line--icon:has(.doc-ff__input--date):hover,
.doc-ff__line--icon:has(.doc-ff__input--time):hover {
border-color: #b8c2d3;
}
.doc-ff__line--date [data-lucide],
.doc-ff__line--icon:has(.doc-ff__input--date) [data-lucide],
.doc-ff__line--icon:has(.doc-ff__input--time) [data-lucide] {
color: #2563eb;
}
.doc-ff__line--date:focus-within [data-lucide],
.doc-ff__line--icon:focus-within [data-lucide] { color: #1d4ed8; }
.doc-ff__input--number::-webkit-outer-spin-button,
.doc-ff__input--number::-webkit-inner-spin-button {
height: 1.6em;
opacity: 0.6;
}
/* ============= CUSTOM CALENDAR & TIME PICKER POPOVER ============= */
.ffx-picker {
position: fixed;
z-index: 1000;
background: #fff;
border: 1px solid #e2e6ef;
border-radius: 14px;
box-shadow: 0 18px 48px -16px rgba(15, 23, 42, 0.22), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
padding: 14px;
font: inherit;
font-size: 13px;
color: var(--text, #0f172a);
user-select: none;
animation: ffx-picker-in 0.14s ease-out;
}
@keyframes ffx-picker-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Calendar --- */
.ffx-cal { width: 264px; }
.ffx-cal__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.ffx-cal__title {
font-weight: 600;
font-size: 14px;
color: #0f172a;
letter-spacing: 0.01em;
}
.ffx-cal__nav {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: #475569;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ffx-cal__nav:hover {
background: #f1f5f9;
color: #1d4ed8;
border-color: #e2e8f0;
}
.ffx-cal__weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #94a3b8;
text-align: center;
}
.ffx-cal__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.ffx-cal__day {
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
font: inherit;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: #0f172a;
cursor: pointer;
transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
}
.ffx-cal__day--empty { visibility: hidden; cursor: default; }
.ffx-cal__day:hover {
background: #eff5ff;
color: #1d4ed8;
}
.ffx-cal__day.is-today {
border-color: #c7d2fe;
color: #1d4ed8;
font-weight: 600;
}
.ffx-cal__day.is-selected,
.ffx-cal__day.is-selected:hover {
background: #2563eb;
color: #fff;
border-color: #2563eb;
font-weight: 600;
box-shadow: 0 4px 10px -4px rgba(37, 99, 235, 0.55);
}
.ffx-cal__day:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.ffx-cal__foot {
display: flex;
justify-content: space-between;
gap: 6px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eef1f6;
}
.ffx-cal__btn {
padding: 7px 14px;
border-radius: 8px;
border: 1px solid transparent;
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
background: #f1f5f9;
color: #334155;
}
.ffx-cal__btn:hover { background: #e2e8f0; color: #0f172a; }
.ffx-cal__btn--ghost {
background: transparent;
color: #64748b;
}
.ffx-cal__btn--ghost:hover { background: #f1f5f9; color: #0f172a; }
.ffx-cal__btn--primary {
background: #2563eb;
color: #fff;
box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.5);
}
.ffx-cal__btn--primary:hover { background: #1d4ed8; }
.ffx-cal__btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
/* --- Time --- */
.ffx-time { width: 268px; }
.ffx-time__readout {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
padding: 10px 0 14px;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
color: #0f172a;
}
.ffx-time__sep { color: #94a3b8; }
.ffx-time__ampm {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
margin-left: 6px;
padding: 3px 8px;
background: #eff6ff;
color: #1d4ed8;
border-radius: 6px;
text-transform: uppercase;
}
.ffx-time__cols {
display: grid;
grid-template-columns: 1fr 1fr 64px;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #eef1f6;
}
.ffx-time__col-head {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #94a3b8;
text-align: center;
margin-bottom: 4px;
min-height: 14px;
}
.ffx-time__col-scroll {
height: 156px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
padding: 2px;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.ffx-time__col-scroll::-webkit-scrollbar { width: 6px; }
.ffx-time__col-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.ffx-time__col-scroll::-webkit-scrollbar-track { background: transparent; }
.ffx-time__ampm-toggle {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 2px;
}
.ffx-time__cell {
display: block;
width: 100%;
padding: 6px 0;
text-align: center;
background: transparent;
border: 1px solid transparent;
border-radius: 7px;
font: inherit;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: #334155;
cursor: pointer;
transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.ffx-time__cell:hover {
background: #eff5ff;
color: #1d4ed8;
}
.ffx-time__cell.is-selected {
background: #2563eb;
color: #fff;
border-color: #2563eb;
font-weight: 600;
}
.ffx-time .ffx-cal__foot { margin-top: 10px; }
@media (max-width: 380px) {
.ffx-picker { padding: 12px; }
.ffx-cal { width: 240px; }
.ffx-time { width: 244px; }
}
/* Focused line wrapper + invalid line wrapper */
.doc-ff__line:focus-within {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.doc-ff__line.is-error,
.doc-ff__input--textarea.is-error {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
background: #fff7f7;
}
/* Selected field-level error state */
.doc-ff.is-error {
border-color: rgba(239, 68, 68, 0.55);
background: #fff;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
animation: doc-ff-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes doc-ff-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.doc-ff__error {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: 12px;
font-weight: 500;
color: var(--danger);
animation: doc-ff-err-in 0.18s ease;
}
@keyframes doc-ff-err-in {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
.doc-ff__error [data-lucide]::before { font-size: 14px; }
/* Submit-toast variants */
.preview-shell__toast.is-success { background: #16a34a; }
.preview-shell__toast.is-error {
background: #ef4444;
box-shadow: 0 18px 40px -12px rgba(239, 68, 68, 0.5);
}
/* ============================================================
FORM BUILDER — view switching, mode gating, JotForm field set
============================================================ */
/* Letters / Forms view switch (only one .view is visible at a time) */
.main .view { display: none; }
.main .view.is-active { display: block; }
/* Status pill used in the Forms grid */
.status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
}
.status-pill--ok {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
}
.status-pill--off {
background: rgba(100, 116, 139, 0.14);
color: #475569;
}
/* ===== Modal mode gating =====
The shared #newLetterModal carries data-mode="letter" or "form".
These rules show/hide the JotForm-style field palette and the
step-1 form fields that are specific to one mode. */
.modal[data-mode="letter"] .ff-only,
.modal[data-mode="letter"] .cl-form-only {
display: none !important;
}
.modal[data-mode="form"] .cl-letter-only {
display: none !important;
}
/* The [hidden] HTML attribute should always win over .btn's display: */
.btn[hidden],
button[hidden],
[hidden] { display: none !important; }
/* Field menu / @-mention palettes are letter-specific (token merge fields) */
.modal[data-mode="form"] .fields-select,
.modal[data-mode="form"] .editor-tabs > li[data-menu="field"] {
display: none !important;
}
/* In form mode, the Insert popover should lead with form fields, so the
"Form fields" intro line ("For patient input") is unnecessary. We also
keep core inserts (image / table / link / userField / textFile) hidden
because the field palette covers them more cleanly for forms. */
.modal[data-mode="form"] .tb-insert__pop > .tb-insert__item[data-insert="userField"],
.modal[data-mode="form"] .tb-insert__pop > .tb-insert__item[data-insert="textFile"] {
display: none;
}
/* ===== JotForm-style field shells that didn't exist before ===== */
/* Section sublabel — small caps text under a row's input */
.doc-ff__sublabel {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted, #64748b);
margin-bottom: 4px;
}
/* Two-up grid for first/last name, date+time appointment, etc. */
.doc-ff__inline-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.doc-ff__inline-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.doc-ff__field--full { grid-column: 1 / -1; }
.doc-ff__address {
display: flex;
flex-direction: column;
gap: 12px;
}
.doc-ff__address .doc-ff__inline-grid {
grid-template-columns: 1fr 1fr;
}
/* Lines that lead with an icon (email, phone, time, url, password, hidden) */
.doc-ff__line--icon {
display: flex;
align-items: center;
gap: 8px;
}
.doc-ff__line--icon [data-lucide] {
color: var(--text-muted, #64748b);
flex-shrink: 0;
}
.doc-ff__line--icon [data-lucide]::before { font-size: 14px; }
.doc-ff__line--icon .doc-ff__placeholder { flex: 1; }
/* Heading + paragraph (display-only fields) */
.doc-ff--heading { padding: 8px 12px; }
.doc-ff__heading-text {
margin: 0 0 4px;
font-size: 22px;
font-weight: 700;
color: var(--text, #0f172a);
}
.doc-ff__heading-sub {
margin: 0;
color: var(--text-mid, #475569);
font-size: 13.5px;
}
.doc-ff--paragraph { padding: 8px 12px; }
.doc-ff__paragraph-text {
margin: 0;
color: var(--text-mid, #475569);
font-size: 13.5px;
line-height: 1.55;
}
/* Spinner (number with -/+ buttons) */
.doc-ff__spinner {
display: inline-flex;
align-items: stretch;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 8px;
overflow: hidden;
}
.doc-ff__spinner-btn {
width: 32px;
font-size: 16px;
font-weight: 600;
background: rgba(15, 23, 42, 0.04);
color: var(--text, #0f172a);
border: 0;
cursor: pointer;
transition: background 0.12s ease;
}
.doc-ff__spinner-btn:hover { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; }
.doc-ff__spinner .doc-ff__placeholder {
min-width: 56px;
text-align: center;
padding: 6px 8px;
border-left: 1px solid rgba(15, 23, 42, 0.08);
border-right: 1px solid rgba(15, 23, 42, 0.08);
outline: none;
}
/* Slider — purely visual mock for the editor preview */
.doc-ff__slider { padding: 8px 4px 0; }
.doc-ff__slider-track {
position: relative;
height: 6px;
background: rgba(15, 23, 42, 0.08);
border-radius: 999px;
}
.doc-ff__slider-fill {
position: absolute;
inset: 0 50% 0 0;
background: #2563eb;
border-radius: 999px;
}
.doc-ff__slider-thumb {
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 2px solid #2563eb;
transform: translate(-50%, -50%);
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.doc-ff__slider-legend {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 12px;
color: var(--text-mid, #475569);
}
.doc-ff__slider-value {
font-weight: 700;
color: #1d4ed8;
}
/* Matrix — radio table */
.doc-ff__matrix { overflow-x: auto; }
.doc-ff__matrix-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.doc-ff__matrix-table th,
.doc-ff__matrix-table td {
padding: 8px 10px;
text-align: center;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.doc-ff__matrix-table thead th {
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-mid, #475569);
}
.doc-ff__matrix-table tbody th {
text-align: left;
font-weight: 500;
color: var(--text, #0f172a);
}
.doc-ff__matrix-table .doc-ff__radio {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(15, 23, 42, 0.3);
vertical-align: middle;
transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.doc-ff__matrix-table td.is-clickable:hover .doc-ff__radio {
border-color: var(--fb-primary);
background: rgba(37, 99, 235, 0.08);
}
.doc-ff__matrix-table td.is-checked {
background: rgba(37, 99, 235, 0.06);
}
.doc-ff__matrix-table .doc-ff__radio.is-checked {
border-color: var(--fb-primary);
background: var(--fb-primary);
box-shadow: inset 0 0 0 3px #fff;
}
/* Captcha verified state — green check + filled background */
.doc-ff__captcha.is-verifying .doc-ff__captcha-check {
background: rgba(37, 99, 235, 0.15);
border-color: var(--fb-primary);
}
.doc-ff__captcha.is-verifying .doc-ff__captcha-check::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--fb-primary);
border-top-color: transparent;
border-radius: 50%;
animation: jf-spin 0.7s linear infinite;
}
.doc-ff__captcha.is-verified .doc-ff__captcha-check {
background: #16A34A;
border-color: #16A34A;
color: #fff;
}
.doc-ff__captcha.is-verified .doc-ff__captcha-text {
color: #15803D;
font-weight: 600;
}
/* Image display field */
.doc-ff__image {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
height: 140px;
border: 2px dashed rgba(15, 23, 42, 0.18);
border-radius: 10px;
color: var(--text-muted, #64748b);
background: rgba(15, 23, 42, 0.03);
}
.doc-ff__image [data-lucide] { font-size: 28px; }
.doc-ff__image [data-lucide]::before { font-size: 28px; }
.doc-ff__image-caption {
font-size: 12.5px;
outline: none;
}
/* Page break */
.doc-ff--pagebreak {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
margin: 12px 0;
}
.doc-ff__pagebreak-line {
flex: 1;
height: 0;
border-top: 2px dashed rgba(15, 23, 42, 0.25);
}
.doc-ff__pagebreak-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted, #64748b);
padding: 2px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
}
/* Terms & conditions box */
.doc-ff__terms {
max-height: 160px;
overflow-y: auto;
padding: 12px 14px;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 8px;
background: rgba(15, 23, 42, 0.02);
font-size: 13px;
line-height: 1.5;
color: var(--text-mid, #475569);
margin-bottom: 10px;
outline: none;
}
.doc-ff__terms p { margin: 0 0 8px; }
.doc-ff__terms p:last-child { margin-bottom: 0; }
/* Captcha (visual stub) */
.doc-ff__captcha {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border: 1px solid rgba(15, 23, 42, 0.18);
border-radius: 8px;
background: #fff;
user-select: none;
}
.doc-ff__captcha-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 2px solid rgba(15, 23, 42, 0.25);
border-radius: 4px;
color: transparent;
}
.doc-ff__captcha-check [data-lucide]::before { font-size: 14px; }
.doc-ff__captcha-text { font-size: 13px; color: var(--text, #0f172a); }
.doc-ff__captcha-brand {
margin-left: 12px;
font-size: 10.5px;
color: var(--text-muted, #64748b);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
/* Section Collapse (visual stub) */
.doc-ff--collapse { padding: 0; }
.doc-ff__collapse-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 8px;
}
.doc-ff__collapse-head [data-lucide] { width: 18px; height: 18px; color: var(--text-muted, #64748b); }
.doc-ff__collapse-title { font-weight: 600; color: var(--text, #0f172a); flex: 1; }
/* Product list (visual stub) */
.doc-ff--product { padding: 0; }
.doc-ff__product {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border: 1px dashed rgba(15, 23, 42, 0.18);
border-radius: 10px;
background: #fff;
}
.doc-ff__product [data-lucide] { width: 28px; height: 28px; color: #6366f1; }
.doc-ff__product-text strong { display: block; font-size: 14px; color: var(--text, #0f172a); }
.doc-ff__product-text small { display: block; font-size: 12px; color: var(--text-muted, #64748b); margin-top: 2px; }
/* Hidden field badge */
.doc-ff__hidden-badge {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--text-muted, #64748b);
padding: 2px 8px;
background: rgba(15, 23, 42, 0.06);
border-radius: 4px;
}
/* Submit button form-field */
.doc-ff--submit {
padding: 8px 12px;
text-align: center;
}
.doc-ff__submit-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
background: #2563eb;
color: #fff;
border: 0;
cursor: pointer;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.doc-ff__submit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}
.doc-ff__submit-btn [data-lucide]::before { font-size: 16px; }
/* Autocomplete options list (collapsed by default) */
.doc-ff__options--collapsed { display: none; }
/* ============================================================
FORM BUILDER · Modern Minimal (Google Forms × JotForm)
------------------------------------------------------------
Single-blue accent (#2563eb), clean white canvas, low-noise
rail. Selection = a thin blue bar on the left edge of each
field card (Google Forms gesture). Letter mode is untouched.
============================================================ */
:root {
--fb-ink: #0F172A;
--fb-ink-mid: #475569;
--fb-ink-soft: #94A3B8;
--fb-canvas: #F4F5F7; /* tinted off-white canvas */
--fb-paper: #FFFFFF; /* card + rail surface */
--fb-line: #E5E7EB; /* default border */
--fb-line-soft: #F1F2F4;
--fb-line-strong: #CBD5E1;
--fb-primary: #2563EB; /* Practice EHR blue — single accent */
--fb-primary-hover: #1D4ED8;
--fb-primary-soft: #EFF6FF; /* tint for hover bg */
--fb-primary-tint: #DBEAFE; /* slightly stronger tint */
--fb-primary-glow: rgba(37, 99, 235, 0.16);
--fb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--fb-shadow-md: 0 4px 12px -4px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.04);
--fb-shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, 0.20), 0 4px 12px rgba(15, 23, 42, 0.06);
--fb-radius: 10px;
--fb-radius-sm: 8px;
}
/* ===== Form-mode editor-body becomes a 2-col stage ===== */
.modal[data-mode="form"] .editor-body {
background: var(--fb-canvas);
}
/* Hide rulers (no margin tools in a form designer) */
.modal[data-mode="form"] .ruler-h,
.modal[data-mode="form"] .ruler-v {
display: none !important;
}
/* The canvas: clean tinted-white surface, no dotted grid. A single
centered column hosts the form-card stack — Google-Forms style. */
.modal[data-mode="form"] .editor-content {
background: var(--fb-canvas);
padding: 32px 40px 220px;
}
/* The form gets a thin blue accent strip at the top — JotForm gesture */
.modal[data-mode="form"] .editor-content::before {
content: "";
display: block;
height: 8px;
width: 100%;
max-width: 720px;
margin: 0 auto 0;
background: var(--fb-primary);
border-radius: 8px 8px 0 0;
}
/* Hide the "PAGE 1" label that lives on .doc-page::before / ::after */
.modal[data-mode="form"] .editor-content .doc-page::before,
.modal[data-mode="form"] .editor-content .doc-page::after {
display: none !important;
content: none !important;
}
/* In form mode the "doc-page" loses its Word-page chrome — becomes a
transparent column that the form-cards live inside. */
.modal[data-mode="form"] .editor-content .doc-page {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 0;
min-height: auto;
}
.modal[data-mode="form"] .editor-content .doc-page--blank,
.modal[data-mode="form"] .editor-content .doc-page[data-page-num="2"] {
display: none; /* one continuous canvas, no page 2 */
}
/* Strip running header/footer + letterhead from the canvas in form mode */
.modal[data-mode="form"] .editor-content .doc-letterhead,
.modal[data-mode="form"] .editor-content .doc-page__header,
.modal[data-mode="form"] .editor-content .doc-page__footer {
display: none !important;
}
/* ===== Empty-canvas state — Google Forms-inspired hero card ===== */
.modal[data-mode="form"] .editor-content:not(.has-fields)::after {
content: "";
display: block;
margin: 0 auto;
max-width: 720px;
height: 280px;
background:
radial-gradient(circle at 50% 38%, var(--fb-primary-soft) 0%, var(--fb-paper) 70%);
border: 2px dashed var(--fb-primary-tint);
border-radius: 0 0 14px 14px;
background-image:
linear-gradient(0deg, transparent 0%, transparent 100%);
}
.modal[data-mode="form"] .editor-content:not(.has-fields) .doc-page::before {
content: "Start building your form";
display: block;
text-align: center;
font-family: "Geist", system-ui, sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--fb-ink);
margin: -240px auto 8px;
position: relative;
z-index: 2;
}
.modal[data-mode="form"] .editor-content:not(.has-fields) .doc-page::after {
content: "Drag a component from the right rail, or click any card to insert.";
display: block;
text-align: center;
font-family: "Geist", system-ui, sans-serif;
font-size: 13.5px;
color: var(--fb-ink-mid);
letter-spacing: 0.005em;
position: relative;
z-index: 2;
margin-bottom: 200px;
}
/* ===== Form mode hides the entire text toolbar =====
All editing in form mode happens through the right-rail components.
The doc-page is still contenteditable for inline label edits, but no
formatting toolbar is shown. */
.modal[data-mode="form"] .editor-toolbar {
display: none !important;
}
.modal[data-mode="form"] .ruler-h { display: none !important; }
/* ===== Form mode hides the Details/Build stepper =====
The user named "page 1 / page 2" — the two-step stepper at the top
of the modal. Form-mode collapses the topbar to just the back arrow
+ form name. Step navigation still works programmatically. */
.modal[data-mode="form"] .cl-stepper {
display: none !important;
}
/* The floating "open toolbar" pill is meaningless without a toolbar */
.modal[data-mode="form"] .fmt-toggle {
display: none !important;
}
/* ===== Components rail — clean white panel, single blue accent ===== */
.form-rail { display: none; }
.modal[data-mode="form"] .form-rail {
display: flex;
flex-direction: column;
width: 320px;
flex-shrink: 0;
background: var(--fb-paper);
border-right: 1px solid var(--fb-line);
border-left: 0;
font-family: "Geist", system-ui, sans-serif;
color: var(--fb-ink);
position: relative;
z-index: 5;
/* Render before the canvas so the rail sits on the LEFT of the editor body. */
order: -1;
}
.modal[data-mode="form"] .rules-panel {
order: -1;
}
.form-rail__head {
padding: 20px 20px 14px;
border-bottom: 1px solid var(--fb-line-soft);
flex-shrink: 0;
}
.form-rail__title-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.form-rail__title {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--fb-ink);
margin: 0;
}
.form-rail__count {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 10.5px;
font-weight: 600;
color: var(--fb-primary);
background: var(--fb-primary-soft);
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0;
}
.form-rail__sub {
font-size: 12px;
color: var(--fb-ink-mid);
margin: 0 0 14px;
line-height: 1.5;
}
.form-rail__search {
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
height: 36px;
background: var(--fb-canvas);
border: 1px solid transparent;
border-radius: 8px;
cursor: text;
transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.form-rail__search:focus-within {
border-color: var(--fb-primary);
background: #fff;
box-shadow: 0 0 0 3px var(--fb-primary-glow);
}
.form-rail__search [data-lucide] {
color: var(--fb-ink-soft);
flex-shrink: 0;
}
.form-rail__search [data-lucide]::before { font-size: 16px; }
.form-rail__search:focus-within [data-lucide] { color: var(--fb-primary); }
.form-rail__search input {
flex: 1;
border: 0;
outline: none;
background: transparent;
font: inherit;
font-size: 13px;
color: var(--fb-ink);
letter-spacing: 0.005em;
}
.form-rail__search input::placeholder { color: var(--fb-ink-soft); }
.form-rail__kbd {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
color: var(--fb-ink-soft);
background: #fff;
border: 1px solid var(--fb-line);
border-radius: 4px;
padding: 1px 6px;
letter-spacing: 0;
flex-shrink: 0;
}
.form-rail__scroll {
flex: 1;
overflow-y: auto;
padding: 16px 14px 24px;
scrollbar-width: thin;
scrollbar-color: var(--fb-line) transparent;
}
.form-rail__scroll::-webkit-scrollbar { width: 8px; }
.form-rail__scroll::-webkit-scrollbar-thumb {
background: var(--fb-line);
border-radius: 999px;
border: 2px solid var(--fb-paper);
}
.form-rail__scroll::-webkit-scrollbar-thumb:hover { background: var(--fb-line-strong); }
.form-rail__section { margin-bottom: 20px; }
.form-rail__section:last-child { margin-bottom: 0; }
.form-rail__section[hidden] { display: none; }
.form-rail__sechead {
display: flex;
align-items: center;
gap: 8px;
padding: 0 4px 10px;
}
.form-rail__sechead-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--fb-primary);
flex-shrink: 0;
opacity: 0.55;
}
.form-rail__sechead-label {
font-family: "Geist", system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fb-ink);
}
.form-rail__sechead-hint {
display: none; /* keep the rail clean — hint moves to ARIA */
}
.form-rail__sechead-count {
margin-left: auto;
color: var(--fb-ink-soft);
font-size: 10.5px;
font-family: "Geist Mono", ui-monospace, monospace;
font-weight: 500;
letter-spacing: 0;
}
/* All sections share the single blue accent — no per-tone palette */
.form-rail__section[data-tone] .form-rail__sechead-dot { background: var(--fb-primary); }
.form-rail__cards {
display: flex;
flex-direction: column;
gap: 2px;
}
.form-rail__card {
display: grid;
grid-template-columns: 32px 1fr;
align-items: center;
gap: 12px;
padding: 9px 12px 9px 10px;
background: var(--fb-paper);
border: 1px solid transparent;
border-radius: 8px;
cursor: grab;
text-align: left;
font: inherit;
color: inherit;
transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
position: relative;
}
.form-rail__card[hidden] { display: none; }
.form-rail__card:active { cursor: grabbing; }
.form-rail__card:hover {
background: var(--fb-primary-soft);
border-color: var(--fb-primary-tint);
}
.form-rail__card:hover .form-rail__card-icon {
background: #fff;
color: var(--fb-primary);
box-shadow: 0 0 0 1px var(--fb-primary-tint);
}
.form-rail__card:hover .form-rail__card-name { color: var(--fb-primary-hover); }
.form-rail__card:focus-visible {
outline: none;
border-color: var(--fb-primary);
box-shadow: 0 0 0 3px var(--fb-primary-glow);
}
.form-rail__card.is-dragging {
opacity: 0.5;
transform: scale(0.97);
background: var(--fb-primary-soft);
border-color: var(--fb-primary);
box-shadow: var(--fb-shadow-md);
cursor: grabbing;
}
/* Drag-affordance dots on the very left edge — JotForm-style */
.form-rail__card::before {
content: "";
position: absolute;
left: 4px;
top: 50%;
width: 2px;
height: 16px;
border-radius: 1px;
background-image: radial-gradient(circle, var(--fb-line-strong) 0.8px, transparent 1px);
background-size: 2px 4px;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.14s ease;
}
.form-rail__card:hover::before { opacity: 0.9; }
.form-rail__card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 7px;
background: var(--fb-canvas);
color: var(--fb-ink-mid);
flex-shrink: 0;
transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.form-rail__card-icon [data-lucide]::before { font-size: 17px; }
.form-rail__card-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.form-rail__card-name {
font-size: 13px;
font-weight: 500;
color: var(--fb-ink);
line-height: 1.35;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.14s ease;
}
.form-rail__card-desc {
font-size: 11.5px;
color: var(--fb-ink-soft);
line-height: 1.4;
letter-spacing: 0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.form-rail__card-id {
display: none; /* the kind id was tech-y noise — drop it */
}
.form-rail__foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--fb-line-soft);
font-size: 11.5px;
color: var(--fb-ink-soft);
flex-shrink: 0;
background: var(--fb-paper);
font-family: "Geist", system-ui, sans-serif;
}
.form-rail__foot-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--fb-primary);
box-shadow: 0 0 0 3px var(--fb-primary-glow);
flex-shrink: 0;
animation: rail-pulse 2.4s ease-in-out infinite;
}
@keyframes rail-pulse {
0%, 100% { box-shadow: 0 0 0 3px var(--fb-primary-glow); }
50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.06); }
}
/* ===== Drag-active state ===== */
body.is-rail-drag .editor-content {
background-color: var(--fb-primary-soft);
}
body.is-rail-drag .doc-ff {
pointer-events: none;
opacity: 0.5;
transition: opacity 0.18s ease;
}
.editor-content.is-rail-dragover {
outline: 2px dashed var(--fb-primary);
outline-offset: -8px;
border-radius: 8px;
}
/* Drop indicator (between fields) — minimal Google-Forms-style line */
.rail-drop-indicator {
position: relative;
height: 4px;
margin: 6px auto;
max-width: 720px;
border-radius: 999px;
background: var(--fb-primary);
box-shadow:
0 0 0 4px var(--fb-primary-glow),
0 2px 8px rgba(37, 99, 235, 0.32);
animation: rail-drop-pulse 1s ease-in-out infinite;
}
.rail-drop-indicator::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--fb-primary);
transform: translate(-50%, -50%);
box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--fb-primary);
}
@keyframes rail-drop-pulse {
0%, 100% { transform: scaleX(0.97); opacity: 0.85; }
50% { transform: scaleX(1); opacity: 1; }
}
/* ===== "Just-added" highlight ===== */
.modal[data-mode="form"] .doc-ff.is-just-added {
animation: ff-just-added 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ff-just-added {
0% { transform: translateY(-8px); opacity: 0; box-shadow: 0 0 0 0 var(--fb-primary-glow); }
60% { transform: translateY(0); opacity: 1; box-shadow: 0 0 0 4px var(--fb-primary-glow); }
100% { transform: translateY(0); opacity: 1; box-shadow: var(--fb-shadow-sm); }
}
/* ===== In-canvas field cards — Google-Forms style ===== */
.modal[data-mode="form"] .doc-ff:not(.doc-ff--inline) {
background: var(--fb-paper);
border-top: 1px solid var(--fb-line);
border-right: 1px solid var(--fb-line);
border-bottom: 1px solid var(--fb-line);
border-left: 4px solid transparent; /* selection accent bar slot */
border-radius: var(--fb-radius);
padding: 18px 22px 20px;
margin: 10px auto;
max-width: 720px;
position: relative;
box-shadow: var(--fb-shadow-sm);
transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.modal[data-mode="form"] .doc-ff:not(.doc-ff--inline):hover {
border-top-color: var(--fb-line-strong);
border-right-color: var(--fb-line-strong);
border-bottom-color: var(--fb-line-strong);
box-shadow: var(--fb-shadow-md);
}
.modal[data-mode="form"] .doc-ff.is-selected {
border-top-color: var(--fb-line-strong) !important;
border-right-color: var(--fb-line-strong) !important;
border-bottom-color: var(--fb-line-strong) !important;
border-left-color: var(--fb-primary) !important;
background: var(--fb-paper) !important;
box-shadow: var(--fb-shadow-md) !important;
}
/* Active drag handle on the doc-ff itself shows the same blue */
.modal[data-mode="form"] .doc-ff.is-dragging-ff {
border-left-color: var(--fb-primary) !important;
box-shadow: var(--fb-shadow-lg) !important;
opacity: 0.96;
}
.modal[data-mode="form"] .doc-ff__label {
font-family: "Geist", system-ui, sans-serif;
font-weight: 600;
font-size: 14.5px;
color: var(--fb-ink);
letter-spacing: -0.005em;
}
.modal[data-mode="form"] .doc-ff__hint {
font-family: "Geist", system-ui, sans-serif;
font-size: 12px;
color: var(--fb-ink-mid);
margin-top: 4px;
line-height: 1.45;
}
/* Required marker uses the unified blue */
.modal[data-mode="form"] .doc-ff__req {
color: var(--fb-primary);
font-weight: 700;
}
/* Toolbar inside each field card — quieter, blue-on-hover */
.modal[data-mode="form"] .doc-ff__toolbar {
background: transparent;
}
.modal[data-mode="form"] .doc-ff__action:hover {
background: var(--fb-primary-soft);
color: var(--fb-primary);
}
.modal[data-mode="form"] .doc-ff__action--danger:hover {
background: #FEF2F2;
color: #DC2626;
}
.modal[data-mode="form"] .doc-ff__handle:hover {
background: var(--fb-primary-soft);
color: var(--fb-primary);
}
/* ===== Empty rail (search yielded nothing) ===== */
.form-rail__scroll.is-empty::after {
content: "No matching components.";
display: block;
text-align: center;
padding: 32px 16px;
color: var(--fb-ink-soft);
font-size: 12.5px;
font-style: italic;
}
/* ===== Letter mode: belt-and-suspenders ensure rail stays gone ===== */
.modal[data-mode="letter"] .form-rail { display: none !important; }
.modal[data-mode="letter"] body.is-rail-drag .editor-content { background-color: inherit; }
/* ===== Responsive tweaks ===== */
@media (max-width: 1080px) {
.modal[data-mode="form"] .form-rail { width: 280px; }
.modal[data-mode="form"] .form-rail__card { grid-template-columns: 32px 1fr; }
.modal[data-mode="form"] .form-rail__card-id { display: none; }
.modal[data-mode="form"] .editor-content { padding: 40px 28px 200px; }
}
@media (max-width: 880px) {
.modal[data-mode="form"] .form-rail {
width: 100%;
max-height: 280px;
border-left: 0;
border-top: 1px solid var(--fb-line);
flex-direction: column;
}
.modal[data-mode="form"] .editor-body { flex-direction: column; }
}
/* ============================================================
QUIET STUDIO — Form Builder Refinement Pass
------------------------------------------------------------
Tally + Google Forms patterns:
- Drag handle moves to LEFT, fades in on hover
- Top-right action tray (required / duplicate / delete)
- Right-gutter floating side-actions on selection
- "+" insert button between cards on gap-hover
- Editable form header card at top of canvas
- Smooth motion: insertion overshoot, reorder ghost, removal collapse
============================================================ */
/* The canvas needs left padding for the drag-handle gutter, and right
padding for the side-actions panel. The form column stays max 720px
centered. */
.modal[data-mode="form"] .editor-content {
padding: 28px 88px 240px 88px;
scroll-behavior: smooth;
}
/* The form column (doc-page) lives inside a scrollable area; fields sit
max-width 640px but the gutter on each side gives room for chrome. */
.modal[data-mode="form"] .editor-content .doc-page {
max-width: 640px;
}
.modal[data-mode="form"] .doc-ff:not(.doc-ff--inline) {
max-width: 640px;
padding: 16px 22px 18px;
border-radius: 10px;
}
/* === DRAG HANDLE: moved to LEFT side, in the negative gutter === */
.modal[data-mode="form"] .doc-ff__toolbar {
/* Hide the original combined toolbar — we split it into left handle
+ top-right tray below. */
position: static !important;
display: contents;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border: 0 !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
.modal[data-mode="form"] .doc-ff__toolbar-sep { display: none !important; }
/* Handle: 24px wide column outside the card on the left */
.modal[data-mode="form"] .doc-ff__handle {
position: absolute;
left: -34px;
top: 14px;
width: 24px;
height: 28px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent !important;
color: var(--fb-ink-soft) !important;
opacity: 0;
transform: translateX(4px);
transition: opacity 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
color 0.14s ease, background 0.14s ease;
cursor: grab;
z-index: 4;
}
.modal[data-mode="form"] .doc-ff:hover > .doc-ff__toolbar > .doc-ff__handle,
.modal[data-mode="form"] .doc-ff.is-selected > .doc-ff__toolbar > .doc-ff__handle,
.modal[data-mode="form"] .doc-ff:focus-within > .doc-ff__toolbar > .doc-ff__handle {
opacity: 1;
transform: translateX(0);
}
.modal[data-mode="form"] .doc-ff__handle:hover {
background: var(--fb-primary-soft) !important;
color: var(--fb-primary) !important;
}
.modal[data-mode="form"] .doc-ff__handle [data-lucide]::before {
content: "drag_indicator";
font-size: 18px;
}
/* === ACTION TRAY: top-right, hover-revealed pill === */
/* Wrap the duplicate + delete actions inside a virtual "tray" via positioning. */
.modal[data-mode="form"] .doc-ff__action {
position: absolute;
top: 8px;
width: 28px;
height: 28px;
border-radius: 7px;
background: #fff !important;
border: 1px solid var(--fb-line);
color: var(--fb-ink-mid) !important;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(-3px);
transition: opacity 0.18s ease,
transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
z-index: 4;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.modal[data-mode="form"] .doc-ff__action[data-ff-action="duplicate"] { right: 44px; }
.modal[data-mode="form"] .doc-ff__action[data-ff-action="delete"] { right: 8px; }
.modal[data-mode="form"] .doc-ff:hover > .doc-ff__toolbar > .doc-ff__action,
.modal[data-mode="form"] .doc-ff.is-selected > .doc-ff__toolbar > .doc-ff__action,
.modal[data-mode="form"] .doc-ff:focus-within > .doc-ff__toolbar > .doc-ff__action {
opacity: 1;
transform: translateY(0);
}
/* Stagger by 30ms for a tactile reveal */
.modal[data-mode="form"] .doc-ff:hover > .doc-ff__toolbar > .doc-ff__action[data-ff-action="duplicate"],
.modal[data-mode="form"] .doc-ff.is-selected > .doc-ff__toolbar > .doc-ff__action[data-ff-action="duplicate"] {
transition-delay: 30ms;
}
.modal[data-mode="form"] .doc-ff__action:hover {
background: var(--fb-primary) !important;
color: #fff !important;
border-color: var(--fb-primary) !important;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.32);
}
.modal[data-mode="form"] .doc-ff__action--danger:hover {
background: #DC2626 !important;
color: #fff !important;
border-color: #DC2626 !important;
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.32);
}
.modal[data-mode="form"] .doc-ff__action [data-lucide]::before {
font-size: 14px;
}
/* === SIDE ACTIONS (right gutter, on selection) ===
A vertical pill anchored to the right of the selected card. Like
Google Forms' floating right toolbar. Lives in the canvas gutter
between the form column and the rail. */
.modal[data-mode="form"] .doc-ff:not(.doc-ff--inline) {
/* anchor for the side actions. Note: NOT using `isolation: isolate`
so the side-action tooltips (which sit to the left of each button)
can render above neighbouring cards instead of being clipped by
each card's own stacking context. */
position: relative;
}
.modal[data-mode="form"] .doc-ff.is-selected {
/* Selected card jumps above its neighbours so the side-actions
panel and its tooltips never get covered by the next card. */
z-index: 6;
}
.modal[data-mode="form"] .ff-side-actions {
position: absolute;
top: 8px;
right: -56px;
width: 40px;
display: none;
flex-direction: column;
gap: 2px;
padding: 4px;
background: #fff;
border: 1px solid var(--fb-line);
border-radius: 10px;
box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.14), 0 1px 2px rgba(15, 23, 42, 0.04);
z-index: 5;
animation: side-actions-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal[data-mode="form"] .doc-ff.is-selected .ff-side-actions {
display: flex;
}
@keyframes side-actions-in {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
}
.modal[data-mode="form"] .ff-side-action {
width: 32px;
height: 32px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--fb-ink-mid);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease, transform 0.12s ease;
position: relative;
}
.modal[data-mode="form"] .ff-side-action:hover {
background: var(--fb-primary-soft);
color: var(--fb-primary);
}
.modal[data-mode="form"] .ff-side-action:active {
transform: scale(0.94);
}
.modal[data-mode="form"] .ff-side-action.is-on {
background: var(--fb-primary);
color: #fff;
box-shadow: 0 1px 3px rgba(37, 99, 235, 0.32);
}
.modal[data-mode="form"] .ff-side-action [data-lucide]::before {
font-size: 16px;
}
.modal[data-mode="form"] .ff-side-action__sep {
height: 1px;
margin: 2px 4px;
background: var(--fb-line);
}
/* Tooltip on hover */
.modal[data-mode="form"] .ff-side-action::before {
content: attr(data-tooltip);
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(2px);
background: #fff;
color: var(--fb-ink);
font-size: 11px;
font-weight: 500;
padding: 5px 10px;
border-radius: 6px;
border: 1px solid var(--fb-line);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.14s ease, transform 0.14s ease;
z-index: 10000;
box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(15, 23, 42, 0.06);
}
.modal[data-mode="form"] .ff-side-action:hover::before {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* === "+" INSERT BUTTON between cards (Tally) === */
.modal[data-mode="form"] .ff-gap {
position: relative;
height: 12px;
margin: 0 auto;
max-width: 640px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 2;
}
.modal[data-mode="form"] .ff-gap__line {
position: absolute;
inset: 50% 0 auto 0;
height: 1px;
background: transparent;
transition: background 0.16s ease;
pointer-events: none;
}
.modal[data-mode="form"] .ff-gap__btn {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--fb-primary);
color: #fff;
border: 2px solid #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: scale(0.4);
transition: opacity 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: auto;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.32);
z-index: 3;
position: relative;
}
.modal[data-mode="form"] .ff-gap__btn::before {
content: "+";
font-family: "Geist", system-ui, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
}
.modal[data-mode="form"] .ff-gap:hover {
height: 28px;
}
.modal[data-mode="form"] .ff-gap:hover .ff-gap__line {
background: var(--fb-primary-tint);
}
.modal[data-mode="form"] .ff-gap:hover .ff-gap__btn {
opacity: 1;
transform: scale(1);
}
.modal[data-mode="form"] .ff-gap__btn:hover {
background: var(--fb-primary-hover);
transform: scale(1.12);
}
.modal[data-mode="form"] .ff-gap.is-active .ff-gap__btn {
opacity: 1;
transform: scale(1);
background: var(--fb-primary-hover);
}
/* Mini popover that opens above the "+" button */
.modal[data-mode="form"] .ff-gap-pop {
position: absolute;
top: -6px;
left: 50%;
transform: translate(-50%, -100%);
width: 320px;
max-height: 380px;
background: #fff;
border: 1px solid var(--fb-line);
border-radius: 12px;
box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.06);
padding: 8px 6px 6px;
z-index: 30;
display: none;
pointer-events: auto;
animation: gap-pop-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal[data-mode="form"] .ff-gap.is-active .ff-gap-pop { display: block; }
@keyframes gap-pop-in {
from { opacity: 0; transform: translate(-50%, -100%) translateY(8px) scale(0.98); }
to { opacity: 1; transform: translate(-50%, -100%) translateY(0) scale(1); }
}
.modal[data-mode="form"] .ff-gap-pop__head {
padding: 6px 10px 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fb-ink-soft);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal[data-mode="form"] .ff-gap-pop__list {
max-height: 320px;
overflow-y: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
padding: 0 4px 4px;
}
.modal[data-mode="form"] .ff-gap-pop__item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 7px;
cursor: pointer;
text-align: left;
transition: background 0.12s ease, color 0.12s ease;
}
.modal[data-mode="form"] .ff-gap-pop__item:hover {
background: var(--fb-primary-soft);
color: var(--fb-primary);
}
.modal[data-mode="form"] .ff-gap-pop__item-icon {
width: 24px;
height: 24px;
border-radius: 5px;
background: var(--fb-canvas);
color: var(--fb-ink-mid);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.modal[data-mode="form"] .ff-gap-pop__item:hover .ff-gap-pop__item-icon {
background: #fff;
color: var(--fb-primary);
}
.modal[data-mode="form"] .ff-gap-pop__item-icon [data-lucide]::before { font-size: 14px; }
.modal[data-mode="form"] .ff-gap-pop__item-name {
font-size: 12.5px;
font-weight: 500;
color: var(--fb-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal[data-mode="form"] .ff-gap-pop__item:hover .ff-gap-pop__item-name {
color: var(--fb-primary-hover);
}
/* === FORM HEADER CARD ===
The first child of the canvas is a contenteditable header card with
form title + description + theme color row. Sticky-ish at top. */
.modal[data-mode="form"] .editor-content::before {
display: none !important; /* kill the previous 8px accent strip */
content: none !important;
}
.modal[data-mode="form"] .form-header {
max-width: 640px;
margin: 8px auto 16px;
padding: 28px 28px 22px;
background: #fff;
border-radius: 12px;
border: 1px solid var(--fb-line);
border-top: 6px solid var(--fb-primary);
position: relative;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.modal[data-mode="form"] .form-header:hover {
border-color: var(--fb-line-strong);
border-top-color: var(--fb-primary);
box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.12);
}
.modal[data-mode="form"] .form-header__title {
font-family: "Geist", system-ui, sans-serif;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.018em;
color: var(--fb-ink);
line-height: 1.2;
outline: none;
margin: 0 0 6px;
}
.modal[data-mode="form"] .form-header__title:empty::before {
content: attr(data-placeholder);
color: var(--fb-ink-soft);
font-weight: 700;
}
.modal[data-mode="form"] .form-header__title:focus {
text-decoration: underline 1.5px var(--fb-primary);
text-underline-offset: 6px;
}
.modal[data-mode="form"] .form-header__desc {
font-family: "Geist", system-ui, sans-serif;
font-size: 14px;
color: var(--fb-ink-mid);
line-height: 1.55;
outline: none;
margin: 0;
padding: 0;
}
.modal[data-mode="form"] .form-header__desc:empty::before {
content: attr(data-placeholder);
color: var(--fb-ink-soft);
}
.modal[data-mode="form"] .form-header__theme {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--fb-line-soft);
}
.modal[data-mode="form"] .form-header__theme-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fb-ink-soft);
}
.modal[data-mode="form"] .form-header__swatch {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--fb-line);
cursor: pointer;
transition: transform 0.14s ease, box-shadow 0.14s ease;
position: relative;
}
.modal[data-mode="form"] .form-header__swatch:hover {
transform: scale(1.12);
}
.modal[data-mode="form"] .form-header__swatch.is-active {
box-shadow: 0 0 0 2px var(--fb-primary);
}
.modal[data-mode="form"] .form-header__swatch.is-active::after {
content: "✓";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 700;
}
/* === EMPTY-STATE OVERHAUL ===
With the form-header always visible, the empty state moves below it. */
.modal[data-mode="form"] .editor-content:not(.has-fields) .doc-page::before,
.modal[data-mode="form"] .editor-content:not(.has-fields) .doc-page::after,
.modal[data-mode="form"] .editor-content:not(.has-fields)::after {
display: none !important;
content: none !important;
}
.modal[data-mode="form"] .editor-content:not(.has-fields) .form-empty {
display: flex;
}
.modal[data-mode="form"] .form-empty {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 32px;
margin: 8px auto 0;
max-width: 640px;
background: #fff;
border: 1.5px dashed var(--fb-primary-tint);
border-radius: 12px;
gap: 6px;
animation: empty-pulse 3s ease-in-out infinite;
}
.modal[data-mode="form"] .form-empty__icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--fb-primary-soft);
color: var(--fb-primary);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.modal[data-mode="form"] .form-empty__icon [data-lucide]::before { font-size: 22px; }
.modal[data-mode="form"] .form-empty__title {
font-family: "Geist", system-ui, sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--fb-ink);
letter-spacing: -0.005em;
}
.modal[data-mode="form"] .form-empty__sub {
font-size: 13px;
color: var(--fb-ink-mid);
line-height: 1.5;
max-width: 360px;
}
.modal[data-mode="form"] .form-empty__shortcut {
margin-top: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--fb-canvas);
border-radius: 999px;
font-size: 12px;
color: var(--fb-ink-mid);
}
.modal[data-mode="form"] .form-empty__shortcut kbd {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 11px;
background: #fff;
border: 1px solid var(--fb-line);
border-radius: 4px;
padding: 1px 6px;
}
@keyframes empty-pulse {
0%, 100% { border-color: var(--fb-primary-tint); }
50% { border-color: var(--fb-primary); }
}
body.is-rail-drag .modal[data-mode="form"] .form-empty,
.modal[data-mode="form"] body.is-rail-drag .form-empty {
border-color: var(--fb-primary);
background: var(--fb-primary-soft);
animation: none;
}
/* === MOTION SYSTEM ===
Insertion: settle from above with a slight bounce.
Removal: collapse height + fade.
Reorder: handled by FLIP in JS. */
.modal[data-mode="form"] .doc-ff.is-just-added {
animation: ff-insert 360ms cubic-bezier(0.34, 1.36, 0.64, 1);
}
@keyframes ff-insert {
0% { opacity: 0; transform: translateY(-12px) scale(0.985); }
60% { opacity: 1; transform: translateY(0) scale(1.005); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.modal[data-mode="form"] .doc-ff.is-leaving {
animation: ff-leaving 200ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
pointer-events: none;
}
@keyframes ff-leaving {
0% { opacity: 1; transform: scale(1); max-height: 600px; margin-top: 10px; margin-bottom: 10px; padding-top: 16px; padding-bottom: 18px; }
60% { opacity: 0; transform: translateX(-8px) scale(0.98); }
100% { opacity: 0; transform: scale(0.98); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
/* Reorder transition (CSS-driven FLIP fallback) */
.modal[data-mode="form"] .doc-ff:not(.is-dragging-ff):not(.is-just-added):not(.is-leaving) {
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.14s ease,
box-shadow 0.14s ease;
}
/* === RAIL POLISH === */
/* Pinned section accent + collapse caret */
.modal[data-mode="form"] .form-rail__sechead {
cursor: pointer;
user-select: none;
position: relative;
transition: color 0.12s ease;
}
.modal[data-mode="form"] .form-rail__sechead:hover .form-rail__sechead-label {
color: var(--fb-primary);
}
.modal[data-mode="form"] .form-rail__sechead-caret {
margin-left: 6px;
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fb-ink-soft);
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal[data-mode="form"] .form-rail__section.is-collapsed .form-rail__sechead-caret {
transform: rotate(-90deg);
}
.modal[data-mode="form"] .form-rail__section.is-collapsed .form-rail__cards {
display: none;
}
.modal[data-mode="form"] .form-rail__sechead-caret [data-lucide]::before { font-size: 14px; }
.modal[data-mode="form"] .form-rail__section[data-section="pinned"] .form-rail__sechead-dot {
background: var(--fb-primary);
width: 5px;
height: 5px;
opacity: 1;
}
.modal[data-mode="form"] .form-rail__section[data-section="pinned"] .form-rail__sechead-label::after {
content: "★";
margin-left: 6px;
color: var(--fb-primary);
font-size: 11px;
}
/* Subtle scale on rail card hover */
.modal[data-mode="form"] .form-rail__card {
transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.modal[data-mode="form"] .form-rail__card:hover {
transform: translateY(-1px);
}
.modal[data-mode="form"] .form-rail__card:active {
transform: translateY(0) scale(0.985);
}
.modal[data-mode="form"] .form-rail__card-icon {
transition: background 0.16s ease, color 0.16s ease,
box-shadow 0.16s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal[data-mode="form"] .form-rail__card:hover .form-rail__card-icon {
transform: rotate(-4deg) scale(1.06);
}
/* Drop indicator now shows a "ZAPP" pulse with primary blue */
.modal[data-mode="form"] .rail-drop-indicator {
height: 3px;
background: var(--fb-primary);
box-shadow:
0 0 0 4px var(--fb-primary-glow),
0 4px 14px rgba(37, 99, 235, 0.36);
animation: drop-zap 1s ease-in-out infinite;
}
@keyframes drop-zap {
0%, 100% { transform: scaleX(0.94); opacity: 0.85; }
50% { transform: scaleX(1); opacity: 1; box-shadow: 0 0 0 6px var(--fb-primary-glow), 0 4px 14px rgba(37, 99, 235, 0.36); }
}
/* === FOCUS STATE on form labels: blue underline grows === */
.modal[data-mode="form"] .doc-ff__label {
position: relative;
outline: none;
}
.modal[data-mode="form"] .doc-ff__label:focus {
text-decoration: underline 1.5px var(--fb-primary);
text-underline-offset: 4px;
}
/* Light dotted-grid texture on the canvas only — barely there */
.modal[data-mode="form"] .editor-content {
background-image:
radial-gradient(circle at 1px 1px, rgba(37, 99, 235, 0.05) 0.8px, transparent 1.2px);
background-size: 24px 24px;
background-position: -1px -1px;
}
/* =================================================================
FORM-MODE SPACING · consistent, tight inter-card gaps
----------------------------------------------------------------
In form mode the .ff-gap markers handle insertion, so the cards
themselves don't need vertical margins. We collapse those, shrink
the gap height, and hide stray empty paragraphs that
execCommand sometimes leaves behind between fields.
================================================================= */
.modal[data-mode="form"] .editor-content .doc-ff:not(.doc-ff--inline) {
margin: 0 auto;
max-width: 720px;
}
.modal[data-mode="form"] .editor-content .ff-gap {
height: 6px;
}
.modal[data-mode="form"] .editor-content .ff-gap:hover {
height: 22px;
}
/* Hide empty
paragraphs that aren't actually wanted spacing.
They're a side-effect of execCommand insertHTML; in form mode the form
header / cards / gaps are the only legitimate page children. */
.modal[data-mode="form"] .editor-content .doc-page > p:empty,
.modal[data-mode="form"] .editor-content .doc-page > p:has(> br:only-child) {
display: none;
}
/* =================================================================
CONDITIONAL LOGIC · Phase 1
- Logic badge on field cards (bottom-right)
- "Hidden by rule" / Conditional tag
- Rules slide-in panel (replaces the form-rail)
- Preview-mode hidden-field state
================================================================= */
/* ---------- Logic badge on the field card (bottom-right) ---------- */
.modal[data-mode="form"] .ff-logic-badge {
position: absolute;
bottom: 8px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 8px 0 6px;
border: 1px solid var(--fb-primary-tint);
background: linear-gradient(180deg, #FFFFFF 0%, var(--fb-primary-soft) 100%);
color: var(--fb-primary);
border-radius: 999px;
font: 600 11px/1 "Geist", system-ui, sans-serif;
letter-spacing: 0.02em;
cursor: pointer;
z-index: 4;
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.10);
transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.modal[data-mode="form"] .ff-logic-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.32);
background: var(--fb-primary);
color: #fff;
border-color: var(--fb-primary);
}
.modal[data-mode="form"] .ff-logic-badge [data-lucide]::before {
font-size: 13px;
}
/* ---------- "Hidden by rule" inline tag (top-left of card) ---------- */
.modal[data-mode="form"] .ff-conditional-tag {
position: absolute;
top: 8px;
left: 14px;
display: inline-flex;
align-items: center;
gap: 4px;
height: 20px;
padding: 0 8px;
background: rgba(15, 23, 42, 0.06);
border: 1px dashed rgba(15, 23, 42, 0.18);
color: var(--fb-ink-mid);
border-radius: 999px;
font: 500 10.5px/1 "Geist", system-ui, sans-serif;
letter-spacing: 0.02em;
pointer-events: none;
z-index: 3;
}
.modal[data-mode="form"] .ff-conditional-tag [data-lucide]::before {
font-size: 12px;
}
/* When a card has a rule that defaults it hidden (a "show" rule),
dim the entire card so designers see it'll be hidden by default. */
.modal[data-mode="form"] .doc-ff.is-hidden-by-rule {
opacity: 0.55;
background-image:
repeating-linear-gradient(
135deg,
rgba(37, 99, 235, 0.04) 0,
rgba(37, 99, 235, 0.04) 8px,
transparent 8px,
transparent 16px
);
}
.modal[data-mode="form"] .doc-ff.is-hidden-by-rule:hover {
opacity: 0.78;
}
/* Slight push so the conditional tag has room above the field head */
.modal[data-mode="form"] .doc-ff.is-conditional > .doc-ff__head {
margin-top: 18px;
}
/* ---------- Preview-mode: hidden field gets fully removed visually ---------- */
.preview-shell .doc-ff.is-rule-hidden,
.is-preview-mode .doc-ff.is-rule-hidden {
display: none !important;
}
/* Strip the "PAGE N" header / footer labels in preview mode — patients
don't need to see editor-side page chrome. */
.preview-shell .doc-page::before,
.preview-shell .doc-page::after,
.is-preview-mode .doc-page::before,
.is-preview-mode .doc-page::after {
content: none !important;
display: none !important;
}
/* =================================================================
TABS · free-navigation header for editing existing forms
================================================================= */
.cl-tabs {
display: flex;
align-items: center;
gap: 4px;
height: 100%;
padding: 0 4px;
}
.cl-tabs[hidden] { display: none; }
.cl-tab {
position: relative;
background: transparent;
border: 0;
padding: 0 14px;
height: 100%;
font: 500 13.5px/1 "Geist", system-ui, sans-serif;
color: var(--text-muted);
cursor: pointer;
transition: color 0.14s ease;
display: inline-flex;
align-items: center;
}
.cl-tab:hover { color: var(--text-strong); }
.cl-tab.is-active { color: var(--fb-primary); font-weight: 600; }
.cl-tab.is-active::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 0;
height: 2px;
background: var(--fb-primary);
border-radius: 2px 2px 0 0;
}
/* =================================================================
SUBMISSIONS PANE · step 3 (form mode only)
================================================================= */
.cl-step--hidden { display: none !important; }
.cl-pane--submissions { display: none; }
.modal.is-step-3 .cl-pane--submissions { display: flex; }
.modal.is-step-3 .cl-pane--editor,
.modal.is-step-3 .cl-pane--details { display: none; }
.submissions-pane {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 36px 40px 40px;
display: flex;
flex-direction: column;
gap: 26px;
height: 100%;
overflow: hidden;
}
/* ============================================================
Header band — count tile + title + controls in one row
============================================================ */
.submissions-pane__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-shrink: 0;
}
.submissions-pane__lead {
display: flex;
align-items: center;
gap: 18px;
}
/* The tile: a flat blue gradient block with the live count. */
.submissions-pane__count {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 80px;
padding: 14px 18px;
border-radius: 14px;
color: #fff;
background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
}
.submissions-pane__count-num {
font: 600 30px/1 "Geist", system-ui, sans-serif;
letter-spacing: -0.04em;
font-feature-settings: "tnum" 1, "ss01" 1;
position: relative;
}
.submissions-pane__count-lbl {
font: 500 9.5px/1 "Geist Mono", ui-monospace, monospace;
text-transform: uppercase;
letter-spacing: 0.18em;
margin-top: 5px;
opacity: 0.78;
position: relative;
}
.submissions-pane__lead-meta {
display: flex;
flex-direction: column;
gap: 3px;
}
.submissions-pane__title {
margin: 0;
font: 600 24px/1.15 "Geist", system-ui, sans-serif;
color: var(--fb-ink);
letter-spacing: -0.02em;
}
.submissions-pane__sub {
margin: 0;
font: 400 12.5px/1.45 "Geist", system-ui, sans-serif;
color: var(--fb-ink-mid);
font-feature-settings: "tnum" 1;
}
/* Controls cluster on the right */
.submissions-pane__controls {
display: flex;
align-items: center;
gap: 10px;
}
.submissions-search {
position: relative;
display: flex;
align-items: center;
}
.submissions-search [data-lucide] {
position: absolute;
left: 12px;
color: var(--fb-ink-soft);
pointer-events: none;
}
.submissions-search [data-lucide]::before { font-size: 14px; }
.submissions-search input {
border: 1px solid var(--fb-line);
border-radius: 999px;
padding: 9px 16px 9px 38px;
font: 500 12.5px/1 "Geist", system-ui, sans-serif;
width: 240px;
background: #fff;
color: var(--fb-ink);
outline: none;
transition: border-color 0.14s ease, box-shadow 0.14s ease, width 0.18s ease;
}
.submissions-search [data-lucide] { left: 14px; }
.submissions-search input::placeholder { color: var(--fb-ink-soft); font-weight: 400; }
.submissions-search input:focus {
border-color: var(--fb-primary);
box-shadow: 0 0 0 4px var(--fb-primary-glow);
width: 280px;
}
.submissions-pane__filters {
display: flex;
align-items: center;
gap: 2px;
background: #F1F5F9;
border: 1px solid var(--fb-line);
border-radius: 10px;
padding: 3px;
}
.submissions-pill {
background: transparent;
border: 0;
border-radius: 7px;
padding: 6px 12px;
font: 500 11.5px/1 "Geist", system-ui, sans-serif;
color: var(--fb-ink-mid);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease;
}
.submissions-pill:hover { color: var(--fb-ink); }
.submissions-pill.is-active {
background: #fff;
color: var(--fb-primary);
font-weight: 600;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(37, 99, 235, 0.14);
}
/* Count chips inside the pills (Pending / Completed / All) */
.submissions-pill {
display: inline-flex;
align-items: center;
gap: 6px;
}
.submissions-pill__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
font-size: 10.5px;
font-weight: 700;
background: #E5E7EB;
color: var(--fb-ink-mid);
border-radius: 9999px;
letter-spacing: 0.01em;
}
.submissions-pill__count--pending { background: #FEF3C7; color: #B45309; }
.submissions-pill__count--done { background: #DCFCE7; color: #15803D; }
.submissions-pill.is-active[data-filter="pending_practice"] .submissions-pill__count { background: #FEF3C7; color: #B45309; }
.submissions-pill.is-active[data-filter="completed"] .submissions-pill__count { background: #DCFCE7; color: #15803D; }
/* Bare-icon refresh — no container, just the icon */
.submissions-pane__refresh {
width: 32px;
height: 32px;
border: 0;
background: transparent;
color: var(--fb-ink-soft);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.14s ease, transform 0.18s ease;
}
.submissions-pane__refresh:hover {
color: var(--fb-primary);
transform: rotate(45deg);
}
.submissions-pane__refresh [data-lucide]::before { font-size: 18px; }
.submissions-pane__refresh:active i[data-lucide]::before {
animation: jf-spin 0.6s ease;
}
@keyframes jf-spin { to { transform: rotate(360deg); } }
/* ============================================================
Body — list shell
============================================================ */
.submissions-pane__body {
flex: 1;
overflow-y: auto;
border: 1px solid var(--fb-line);
border-radius: 16px;
background: #fff;
position: relative;
min-height: 320px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.submissions-pane__list {
display: flex;
flex-direction: column;
}
/* ============================================================
Row — clickable, expands inline. Uses a 5-col grid:
avatar · id+time · preview chips · status pill · chevron
============================================================ */
.submission-row {
position: relative;
display: grid;
grid-template-columns: 220px 1fr auto auto;
gap: 20px;
padding: 18px 22px;
border-bottom: 1px solid var(--fb-line-soft);
cursor: pointer;
transition: background 0.14s ease;
align-items: center;
outline: none;
}
.submission-row:last-child { border-bottom: 0; }
.submission-row:hover { background: #FAFBFC; }
.submission-row:focus-visible { background: #FAFBFC; box-shadow: inset 3px 0 0 var(--fb-primary); }
.submission-row.is-expanded {
background: linear-gradient(180deg, var(--fb-primary-soft) 0%, transparent 70%);
}
.submission-row.is-expanded .submission-row__chev { transform: rotate(90deg); color: var(--fb-primary); }
/* Staggered fade-in on first paint of the list */
.submissions-pane__list:not([hidden]) .submission-row {
animation: row-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.submissions-pane__list .submission-row:nth-child(1) { animation-delay: 0s; }
.submissions-pane__list .submission-row:nth-child(2) { animation-delay: 0.04s; }
.submissions-pane__list .submission-row:nth-child(3) { animation-delay: 0.08s; }
.submissions-pane__list .submission-row:nth-child(4) { animation-delay: 0.12s; }
.submissions-pane__list .submission-row:nth-child(5) { animation-delay: 0.16s; }
.submissions-pane__list .submission-row:nth-child(n+6) { animation-delay: 0.20s; }
@keyframes row-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Explicit grid placement so hiding the preview column on narrow widths
doesn't shift the status pill into the 1fr slot. */
.submission-row__id { grid-column: 1; }
.submission-row__preview { grid-column: 2; }
.submission-row__status { grid-column: 3; }
.submission-row__chev { grid-column: 4; }
.submission-row__detail { grid-column: 1 / -1; }
.submission-row__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.submission-row__id-num {
font: 500 12.5px/1.3 "Geist Mono", ui-monospace, monospace;
color: var(--fb-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.submission-row__id-time {
font: 400 11.5px/1.3 "Geist", system-ui, sans-serif;
color: var(--fb-ink-soft);
}
.submission-row__preview {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
min-width: 0;
overflow: hidden;
}
.submission-row__chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: #F8F9FB;
border: 1px solid var(--fb-line-soft);
border-radius: 999px;
font: 400 11.5px/1.4 "Geist", system-ui, sans-serif;
color: var(--fb-ink-mid);
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
}
.submission-row__chip strong {
font-weight: 600;
color: var(--fb-ink);
}
.submission-row__chip--more {
background: transparent;
border-color: transparent;
color: var(--fb-ink-soft);
padding-left: 2px;
}
.submission-row__status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
font: 600 10px/1 "Geist Mono", ui-monospace, monospace;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.submission-row__status--active {
background: rgba(34, 197, 94, 0.12);
color: #166534;
}
.submission-row__status--active::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #22C55E;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
}
.submission-row__status--other {
background: rgba(15, 23, 42, 0.06);
color: var(--fb-ink-mid);
}
.submission-row__chev {
width: 28px;
height: 28px;
border-radius: 8px;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fb-ink-soft);
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.14s ease, background 0.14s ease;
}
.submission-row:hover .submission-row__chev {
background: rgba(37, 99, 235, 0.06);
color: var(--fb-primary);
}
.submission-row__chev [data-lucide]::before { font-size: 16px; }
/* Expandable detail drawer */
.submission-row__detail {
grid-column: 1 / -1;
margin: 0 -22px -18px;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.submission-row.is-expanded .submission-row__detail {
max-height: 1200px;
margin-top: 14px;
}
.submission-row__detail-inner {
padding: 18px 22px 20px;
border-top: 1px dashed var(--fb-line);
background: #FBFCFD;
}
.submission-row__answers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 36px;
margin: 0;
}
.submission-row__answer {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.submission-row__answer dt {
font: 500 10.5px/1.3 "Geist", system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fb-ink-soft);
margin: 0;
}
.submission-row__answer dd {
font: 400 13px/1.5 "Geist", system-ui, sans-serif;
color: var(--fb-ink);
margin: 0;
word-break: break-word;
}
/* ============================================================
Loading skeleton — three shimmering rows
============================================================ */
.submissions-pane__loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding: 0;
gap: 0;
align-items: stretch;
justify-content: flex-start;
}
.submissions-pane__loading[hidden] { display: none; }
.submissions-skeleton {
height: 76px;
border-bottom: 1px solid var(--fb-line-soft);
background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.06) 50%, transparent 100%);
background-size: 200% 100%;
animation: skel-shimmer 1.6s linear infinite;
}
.submissions-skeleton:nth-child(2) { animation-delay: 0.2s; }
.submissions-skeleton:nth-child(3) { animation-delay: 0.4s; }
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ============================================================
Empty state — illustration + copy + CTA
============================================================ */
.submissions-pane__empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 48px 32px;
text-align: center;
}
.submissions-pane__empty[hidden] { display: none; }
.submissions-pane__empty-art {
position: relative;
width: 132px;
height: 132px;
margin-bottom: 6px;
}
.submissions-pane__empty-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(15, 23, 42, 0.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 23, 42, 0.10) 1px, transparent 1px);
background-size: 14px 14px;
-webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
opacity: 0.7;
}
.submissions-pane__empty-blob {
position: absolute;
inset: 18px;
border-radius: 32% 68% 60% 40% / 50% 60% 40% 50%;
background: radial-gradient(circle at 30% 25%, rgba(37, 99, 235, 0.30), rgba(37, 99, 235, 0.05) 70%);
filter: blur(10px);
animation: blob-drift 7s ease-in-out infinite;
}
@keyframes blob-drift {
0%, 100% { border-radius: 32% 68% 60% 40% / 50% 60% 40% 50%; transform: rotate(0deg) scale(1); }
50% { border-radius: 60% 40% 32% 68% / 40% 50% 60% 50%; transform: rotate(8deg) scale(1.04); }
}
.submissions-pane__empty-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
background: transparent;
color: var(--fb-primary);
border-radius: 0;
}
.submissions-pane__empty-icon [data-lucide]::before {
font-size: 36px;
filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.35));
}
.submissions-pane__empty-title {
font: 600 18px/1.3 "Geist", system-ui, sans-serif;
letter-spacing: -0.02em;
color: var(--fb-ink);
}
.submissions-pane__empty-sub {
font: 400 13px/1.55 "Geist", system-ui, sans-serif;
color: var(--fb-ink-mid);
max-width: 360px;
}
.submissions-pane__empty-cta {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
background: #fff;
border: 1px solid var(--fb-line);
border-radius: 10px;
font: 500 12.5px/1 "Geist", system-ui, sans-serif;
color: var(--fb-ink);
cursor: pointer;
transition: border-color 0.14s ease, color 0.14s ease, transform 0.14s ease, background 0.14s ease;
}
.submissions-pane__empty-cta:hover {
border-color: var(--fb-primary);
color: var(--fb-primary);
transform: translateY(-1px);
}
.submissions-pane__empty-cta [data-lucide]::before { font-size: 14px; }
.submissions-pane__empty-cta.is-copied {
border-color: #22C55E;
background: rgba(34, 197, 94, 0.06);
color: #166534;
}
/* No-match state when a search/filter yields zero rows */
.submissions-no-match {
padding: 56px 32px;
text-align: center;
color: var(--fb-ink-mid);
font: 400 13px/1.5 "Geist", system-ui, sans-serif;
}
.submissions-no-match::before {
content: "🔍";
display: block;
font-size: 28px;
margin-bottom: 8px;
filter: grayscale(0.6);
}
/* Responsive: collapse the preview chips on narrow widths */
@media (max-width: 1100px) {
.submission-row {
/* Preview column collapses to 0 so id+time picks up the slack. */
grid-template-columns: minmax(140px, 1fr) 0 auto auto;
padding: 16px 18px;
gap: 14px;
}
.submission-row__preview { display: none; }
.submissions-search input { width: 180px; }
.submissions-search input:focus { width: 200px; }
}
@media (max-width: 860px) {
.submissions-pane__head { flex-direction: column; align-items: stretch; }
.submissions-pane__controls { flex-wrap: wrap; }
}
/* ---------- Thank-you panel after a successful submit ---------- */
.preview-shell__thanks {
max-width: 520px;
margin: 48px auto;
padding: 40px 32px;
background: #fff;
border: 1px solid var(--fb-line);
border-radius: 16px;
text-align: center;
box-shadow: 0 4px 18px -8px rgba(15, 23, 42, 0.10);
}
.preview-shell__thanks-icon {
width: 64px;
height: 64px;
border-radius: 50%;
margin: 0 auto 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--fb-primary-soft);
color: var(--fb-primary);
}
.preview-shell__thanks-icon [data-lucide]::before { font-size: 32px; }
.preview-shell__thanks-title {
font: 600 22px/1.2 "Geist", system-ui, sans-serif;
color: var(--fb-ink);
margin: 0 0 6px;
}
.preview-shell__thanks-msg {
font: 400 14px/1.5 "Geist", system-ui, sans-serif;
color: var(--fb-ink-mid);
margin: 0;
}
/* ---------- Rules panel (slide-in, replaces the form-rail) ---------- */
/* =================================================================
RULES PANEL · Linear-style rules editor
- Wider panel (380px) with breathing room
- WHEN / THEN section labels
- Stacked condition rows
- Soft chevron-bg selects
- Sticky footer with rule count
================================================================= */
.modal[data-mode="form"] .rules-panel {
display: none;
position: relative;
flex: 0 0 380px;
width: 380px;
background: var(--fb-paper);
border-right: 1px solid var(--fb-line);
flex-direction: column;
overflow: hidden;
animation: rules-panel-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal[data-mode="form"] .editor-body.is-rules-open .rules-panel {
display: flex;
}
.modal[data-mode="form"] .editor-body.is-rules-open .form-rail {
display: none;
}
@keyframes rules-panel-in {
from { transform: translateX(8px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.rules-panel__head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--fb-line-soft);
}
.rules-panel__back {
width: 32px;
height: 32px;
border-radius: 8px;
background: transparent;
border: 1px solid transparent;
color: var(--fb-ink-mid);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.rules-panel__back:hover {
background: var(--fb-primary-soft);
border-color: var(--fb-primary-tint);
color: var(--fb-primary);
}
.rules-panel__back [data-lucide]::before { font-size: 16px; }
.rules-panel__title-wrap { min-width: 0; flex: 1; }
.rules-panel__title {
margin: 0;
font: 600 16px/1.2 "Geist", system-ui, sans-serif;
color: var(--fb-ink);
letter-spacing: -0.01em;
}
.rules-panel__sub {
margin: 3px 0 0;
font: 500 12px/1.3 "Geist", system-ui, sans-serif;
color: var(--fb-ink-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rules-panel__intro {
padding: 14px 20px 16px;
border-bottom: 1px solid var(--fb-line-soft);
background: linear-gradient(180deg, var(--fb-primary-soft) 0%, transparent 100%);
}
.rules-panel__intro p {
margin: 0;
font: 400 12.5px/1.5 "Geist", system-ui, sans-serif;
color: var(--fb-ink-mid);
}
.rules-panel__body {
flex: 1;
overflow-y: auto;
padding: 18px 18px 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Empty state — illustrated */
.rules-panel__empty {
margin: 36px auto;
text-align: center;
max-width: 280px;
color: var(--fb-ink-mid);
display: flex;
flex-direction: column;
align-items: center;
}
.rules-panel__empty-icon {
width: 64px;
height: 64px;
border-radius: 18px;
margin: 0 auto 16px;
background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
color: var(--fb-primary);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.rules-panel__empty-icon::before {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.18), transparent 60%);
filter: blur(8px);
z-index: -1;
}
.rules-panel__empty-icon [data-lucide]::before {
font-size: 28px;
filter: drop-shadow(0 1px 2px rgba(37, 99, 235, 0.25));
}
.rules-panel__empty-title {
font: 600 15px/1.3 "Geist", system-ui, sans-serif;
color: var(--fb-ink);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.rules-panel__empty-sub {
font: 400 12.5px/1.55 "Geist", system-ui, sans-serif;
color: var(--fb-ink-mid);
}
/* Sticky footer */
.rules-panel__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-top: 1px solid var(--fb-line);
background: var(--fb-paper);
}
.rules-panel__foot-status {
font: 600 10.5px/1 "Geist Mono", ui-monospace, monospace;
letter-spacing: 0.10em;
color: var(--fb-ink-soft);
text-transform: uppercase;
font-feature-settings: "tnum" 1;
}
/* ---------- Rule card ---------- */
.rule-card {
border: 1px solid var(--fb-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
overflow: visible;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
animation: rule-card-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.rule-card:nth-child(1) { animation-delay: 0s; }
.rule-card:nth-child(2) { animation-delay: 0.06s; }
.rule-card:nth-child(3) { animation-delay: 0.12s; }
.rule-card:nth-child(n+4) { animation-delay: 0.18s; }
@keyframes rule-card-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.rule-card:hover {
border-color: var(--fb-primary-tint);
box-shadow: 0 6px 20px -8px rgba(37, 99, 235, 0.18);
}
.rule-card:focus-within {
border-color: var(--fb-primary);
box-shadow: 0 0 0 3px var(--fb-primary-glow);
}
.rule-card__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 14px 0;
background: transparent;
border: 0;
}
.rule-card__num {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--fb-primary-soft);
color: var(--fb-primary);
border-radius: 999px;
font: 600 10.5px/1 "Geist Mono", ui-monospace, monospace;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.rule-card__del {
width: 28px;
height: 28px;
border-radius: 8px;
background: transparent;
border: 0;
color: var(--fb-ink-soft);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease;
}
.rule-card__del:hover {
background: rgba(239, 68, 68, 0.10);
color: #DC2626;
}
.rule-card__del [data-lucide]::before { font-size: 14px; }
.rule-card__body {
padding: 12px 14px 16px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* WHEN / THEN sections */
.rule-card__section {
display: flex;
flex-direction: column;
gap: 10px;
}
.rule-card__section-lbl {
display: flex;
align-items: center;
gap: 10px;
font: 600 10px/1 "Geist Mono", ui-monospace, monospace;
letter-spacing: 0.18em;
color: var(--fb-ink-soft);
text-transform: uppercase;
}
.rule-card__section-lbl::after {
content: "";
flex: 1;
height: 1px;
background: var(--fb-line-soft);
}
.rule-card__lead,
.rule-card__action {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.rule-card__lbl,
.rule-card__lead-text {
font: 400 12.5px/1 "Geist", system-ui, sans-serif;
color: var(--fb-ink-mid);
}
.rule-card__conds {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Stacked condition: field on top, op + value on next row */
.rule-cond {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
.rule-cond + .rule-cond {
padding-top: 12px;
border-top: 1px dashed var(--fb-line-soft);
}
.rule-cond__row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 6px;
}
.rule-cond__del {
position: absolute;
top: -2px;
right: -2px;
width: 22px;
height: 22px;
border-radius: 6px;
background: transparent;
border: 0;
color: var(--fb-ink-soft);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease;
}
.rule-cond__del:hover {
background: rgba(239, 68, 68, 0.10);
color: #DC2626;
}
.rule-cond__del [data-lucide]::before { font-size: 12px; }
.rule-cond__value-spacer { display: block; }
.rule-card__add-cond {
align-self: stretch;
height: 36px;
padding: 0 14px;
border-radius: 9px;
border: 1px dashed var(--fb-line-strong);
background: transparent;
color: var(--fb-ink-mid);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font: 500 12px/1 "Geist", system-ui, sans-serif;
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.rule-card__add-cond:hover {
background: var(--fb-primary-soft);
border-color: var(--fb-primary);
border-style: solid;
color: var(--fb-primary);
}
.rule-card__add-cond [data-lucide]::before { font-size: 13px; }
/* ---------- Custom soft selects + inputs ---------- */
.rules-select,
.rules-input {
height: 36px;
border: 1px solid var(--fb-line);
border-radius: 9px;
padding: 0 12px;
font: 500 12.5px/1 "Geist", system-ui, sans-serif;
color: var(--fb-ink);
background: #fff;
outline: none;
min-width: 0;
width: 100%;
transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.rules-select {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
cursor: pointer;
}
.rules-select:hover {
border-color: var(--fb-line-strong);
background-color: #FAFBFC;
}
.rules-select:focus,
.rules-input:focus {
border-color: var(--fb-primary);
box-shadow: 0 0 0 3px var(--fb-primary-glow);
background-color: #fff;
}
.rules-select--inline {
width: auto;
min-width: 70px;
height: 32px;
padding: 0 26px 0 10px;
border-radius: 8px;
}
/* === PRACTICE-AUDIENCE FIELDS ===
Fields marked data-ff-audience="practice" are filled by the clinic
after submission, not by the patient. The visual treatment is a soft
indigo accent so the designer sees at a glance which fields will
land in the Tasks queue. */
.modal[data-mode="form"] .doc-ff[data-ff-audience="practice"] {
background: linear-gradient(180deg, #f5f3ff 0%, #faf9ff 100%);
box-shadow:
inset 3px 0 0 #6366f1,
0 0 0 1px rgba(99, 102, 241, 0.18);
}
.modal[data-mode="form"] .doc-ff[data-ff-audience="practice"].is-selected {
box-shadow:
inset 3px 0 0 #4f46e5,
0 0 0 2px rgba(99, 102, 241, 0.42);
}
.modal[data-mode="form"] .doc-ff__audience {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px;
margin-left: auto;
border-radius: 999px;
background: #eef2ff;
color: #4338ca;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
user-select: none;
}
.modal[data-mode="form"] .doc-ff__audience [data-lucide] {
display: inline-flex;
width: 12px;
height: 12px;
}
.modal[data-mode="form"] .doc-ff__audience [data-lucide]::before {
font-size: 13px;
color: #6366f1;
}
.modal[data-mode="form"] .doc-ff__head {
align-items: center;
}
/* Audience toggle button — distinctive "on" color (indigo, not the
default blue) so it's visually distinct from Required and Rules. */
.modal[data-mode="form"] .ff-side-action--audience.is-on {
background: #4f46e5;
color: #fff;
box-shadow: 0 1px 3px rgba(79, 70, 229, 0.36);
}
/* === SUBMISSION DETAIL MODAL — PEHR form-style ===
Mirrors the "New Referral" modal pattern: title bar, sectioned form
layout with labeled inputs in a 2-column grid, status pill, and a
Close/Send footer. Patient fields render disabled, practice fields
enabled when pending. */
.sm-modal__panel {
width: min(100%, 920px);
max-height: min(100vh - 48px, 920px);
display: flex;
flex-direction: column;
background: #FFFFFF;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
/* ----- Header ----- */
.sm-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 28px;
border-bottom: 1px solid var(--border);
background: #FFFFFF;
}
.sm-modal__title {
margin: 0;
font-family: "Geist", system-ui, sans-serif;
font-size: 14.5px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.sm-modal__close {
width: 28px;
height: 28px;
border: 0;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: background 0.14s ease, color 0.14s ease;
}
.sm-modal__close:hover {
background: #F3F4F6;
color: var(--text);
}
.sm-modal__close i[data-lucide] { width: 16px; height: 16px; }
.sm-modal__close i[data-lucide]::before { font-size: 17px; }
/* ----- Body ----- */
.sm-modal__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 28px 32px 12px;
background: #FFFFFF;
}
.sm-modal__body::-webkit-scrollbar { width: 10px; }
.sm-modal__body::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.18);
border-radius: 9999px;
border: 2px solid #FFFFFF;
}
.sm-modal__body::-webkit-scrollbar-track { background: transparent; }
/* ----- Section ----- */
.sm-section {
margin-bottom: 28px;
}
.sm-section:last-child { margin-bottom: 0; }
.sm-section__title {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 16px 0;
font-family: "Geist", system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.005em;
}
.sm-section__hint {
font-size: 11.5px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0;
}
.sm-section--practice {
border-top: 1px solid var(--border);
margin-top: 8px;
padding-top: 24px;
}
/* ----- Grid ----- */
.sm-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 28px;
}
/* ----- Field ----- */
.sm-field {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.sm-field--full { grid-column: 1 / -1; }
.sm-field__label {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 12px;
font-weight: 500;
color: var(--text-soft);
letter-spacing: -0.002em;
}
.sm-field__req {
color: var(--danger);
font-weight: 700;
}
.sm-field__input,
.sm-field__textarea,
.sm-field__select {
width: 100%;
height: 36px;
padding: 0 12px;
font: inherit;
font-size: 13px;
color: var(--text);
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 6px;
outline: none;
transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.sm-field__textarea {
height: auto;
min-height: 60px;
padding: 8px 12px;
font-family: inherit;
line-height: 1.45;
resize: vertical;
}
.sm-field__select {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
cursor: pointer;
}
.sm-field__input:hover:not(:disabled),
.sm-field__textarea:hover:not(:disabled),
.sm-field__select:hover:not(:disabled) {
border-color: var(--border-strong);
}
.sm-field__input:focus:not(:disabled),
.sm-field__textarea:focus:not(:disabled),
.sm-field__select:focus:not(:disabled) {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(51, 119, 255, 0.18);
}
.sm-field__input:disabled,
.sm-field__textarea:disabled,
.sm-field__select:disabled {
background: #F9FAFB;
color: var(--text-strong);
cursor: default;
}
/* Status pill (in input-shaped wrapper) */
.sm-field__pillwrap {
width: 100%;
height: 36px;
padding: 0 12px;
display: flex;
align-items: center;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 6px;
}
.sm-field__pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0;
border-radius: 9999px;
white-space: nowrap;
background: #FEF3C7;
color: #B45309;
}
.sm-field__pill--pending { background: #FEF3C7; color: #B45309; }
.sm-field__pill--done { background: #DCFCE7; color: #15803D; }
.sm-field__pill--received{ background: #E0F2FE; color: #075985; }
/* Radio / checkbox groups (used by some practice field kinds) */
.sm-field__radio-group,
.sm-field__checkbox-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.sm-field__radio,
.sm-field__checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 11px;
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
background: #FFFFFF;
transition: border-color 0.14s ease, background 0.14s ease;
}
.sm-field__radio:hover,
.sm-field__checkbox:hover {
background: #F9FAFB;
border-color: var(--border-strong);
}
.sm-field__radio input,
.sm-field__checkbox input { accent-color: var(--primary); }
/* ----- Footer ----- */
.sm-modal__foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 28px;
background: #FFFFFF;
border-top: 1px solid var(--border);
}
/* Compact 29px-tall footer buttons (override the global .btn sizing) */
.sm-modal__foot .btn {
height: 29px;
min-height: 29px;
padding: 0 14px;
font-size: 12px;
font-weight: 500;
line-height: 1;
}
.sm-modal__foot .btn i[data-lucide] { width: 13px; height: 13px; }
.sm-modal__foot .btn i[data-lucide]::before { font-size: 14px; }
/* ----- Read-only mode (completed task) — disable every practice input ----- */
#submissionDetailModal.is-readonly .sm-modal__foot { display: none; }
#submissionDetailModal.is-readonly .sm-section--practice .sm-field__input,
#submissionDetailModal.is-readonly .sm-section--practice .sm-field__textarea,
#submissionDetailModal.is-readonly .sm-section--practice .sm-field__select {
background: #F9FAFB;
color: var(--text-strong);
pointer-events: none;
}
#submissionDetailModal.is-readonly .sm-section--practice .sm-field__radio,
#submissionDetailModal.is-readonly .sm-section--practice .sm-field__checkbox {
background: #F9FAFB;
pointer-events: none;
}
/* ----- Submission-only mode (no practice work to do) ----- */
#submissionDetailModal.is-submission-only .sm-section--practice { display: none; }
#submissionDetailModal.is-submission-only .sm-modal__foot { display: none; }
/* ----- Open animation ----- */
.sm-modal.open .sm-modal__panel {
animation: sm-modal-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sm-modal-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ----- Responsive ----- */
@media (max-width: 720px) {
.sm-modal__panel {
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
}
.sm-grid { grid-template-columns: 1fr; }
}
/* Submission row status pills (in the Submissions list) */
.submission-row__status--pending {
background: #FEF3C7 !important;
color: #B45309 !important;
}
.submission-row__status--done {
background: #DCFCE7 !important;
color: #15803D !important;
}
.submission-row__status--received {
background: #E0F2FE !important;
color: #075985 !important;
}
/* ===== Role-disabled fields (patient/practice preview) ===== */
.doc-ff.is-role-disabled {
position: relative;
opacity: 0.65;
cursor: not-allowed;
}
.doc-ff.is-role-disabled input,
.doc-ff.is-role-disabled textarea,
.doc-ff.is-role-disabled select {
background: #f9fafb;
color: #6b7280;
cursor: not-allowed;
}
/* Non-input controls inside a disabled field don't accept clicks */
.doc-ff.is-role-disabled .doc-ff__opt,
.doc-ff.is-role-disabled .doc-ff__pill,
.doc-ff.is-role-disabled .doc-ff__placeholder,
.doc-ff.is-role-disabled .doc-ff__stars,
.doc-ff.is-role-disabled .doc-ff__scale-step,
.doc-ff.is-role-disabled .doc-ff__file,
.doc-ff.is-role-disabled .doc-ff__slider,
.doc-ff.is-role-disabled .doc-ff__signature {
pointer-events: none;
}
/* Small muted tag in the field head, replaces the stripped audience pill */
.doc-ff__role-tag {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
background: #f3f4f6;
color: #6b7280;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.01em;
user-select: none;
}
.doc-ff__role-tag--practice { background: #eef2ff; color: #4338ca; }
.doc-ff__role-tag--patient { background: #ecfdf5; color: #047857; }
.preview-error {
max-width: 480px;
margin: 80px auto;
padding: 32px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.preview-error h2 { margin: 0 0 8px; font-size: 20px; color: #111827; }
.preview-error p { margin: 0 0 12px; font-size: 14px; color: #6b7280; }
.preview-error a { color: #2563eb; text-decoration: none; }
.preview-error a:hover { text-decoration: underline; }
.preview-shell__banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 20px;
background: #eef2ff;
border-radius: 8px;
margin: 0 0 16px;
font-size: 14px;
color: #4338ca;
}
.preview-shell__back {
color: #4338ca;
text-decoration: none;
font-weight: 500;
}
.preview-shell__back:hover { text-decoration: underline; }