@braincrew-lab/langchain-canvas 0.3.0 → 0.5.0

package/dist/styles.css

@@ -278,16 +278,6 @@
 .cv-body--flush { padding: 0; overflow: hidden; }
 .cv-fallback { color: var(--cv-muted); font-size: 14px; }
 
-/* Browsing an old version: a preview, not an editing surface. Interaction is
-   blocked wholesale — renderers patch by artifact id, so edits made "in the
-   past" would silently overwrite the live version. */
-.cv-body--history > :not(.cv-history-note) { pointer-events: none; user-select: none; }
-.cv-history-note {
-  position: sticky; top: 0; z-index: 5; margin-bottom: 12px;
-  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
-  color: var(--cv-muted); background: var(--cv-surface); border: 1px solid var(--cv-border);
-}
-
 /* --- inline editing (document / table / slides) ------------------------------- */
 
 .cv-edit-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
@@ -480,308 +470,7 @@
 .cv-sheet-tools__filter { min-width: 96px; max-width: 160px; }
 .cv-sheet-tools__sort:focus, .cv-sheet-tools__filter:focus { outline: none; border-color: var(--cv-accent); }
 .cv-sheet-tools__hint { margin-left: auto; font-size: 11px; color: var(--cv-muted); }
-
-/* --- Excel-style ribbon toolbar ----------------------------------------------- */
-/* The Excel model in the canvas's language: each group is a soft "keycap" tray
-   of ghost controls with the group's name set small underneath — organized at a
-   glance, quiet until hovered. */
-
-.cv-ribbon {
-  align-items: flex-start;
-  gap: 8px;
-  padding: 7px 12px 5px;
-  overflow-x: auto;
-  scrollbar-width: thin;
-}
-.cv-ribbon__group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-}
-.cv-ribbon__items {
-  display: flex;
-  align-items: center;
-  gap: 1px;
-  padding: 2px;
-  background: var(--cv-surface);
-  border: 1px solid var(--cv-border);
-  border-radius: 9px;
-}
-.cv-ribbon__label {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  color: var(--cv-muted);
-  white-space: nowrap;
-  user-select: none;
-}
-.cv-ribbon__gap { width: 5px; }
-
-/* ghost controls — the tray is the chrome */
-.cv-ribbon .cv-ribbon__btn {
-  height: 26px;
-  min-width: 26px;
-  padding: 0 9px;
-  border: none;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--cv-text);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  transition: background 0.12s, box-shadow 0.12s;
-}
-.cv-ribbon .cv-ribbon__btn:hover:not(:disabled) {
-  background: var(--cv-bg);
-  border: none;
-  color: var(--cv-text);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-}
-.cv-ribbon .cv-ribbon__btn:active:not(:disabled) { box-shadow: none; }
-.cv-ribbon .cv-ribbon__btn:disabled { opacity: 0.35; cursor: default; }
-.cv-ribbon .cv-ribbon__btn.is-on {
-  background: var(--cv-accent-weak);
-  color: var(--cv-accent);
-  box-shadow: inset 0 0 0 1px var(--cv-accent);
-}
-.cv-ribbon .cv-ribbon__btn--icon { padding: 0 6px; }
-.cv-ribbon .cv-ribbon__btn--glyph { font-weight: 800; font-size: 13px; width: 26px; padding: 0; }
-
-/* Excel-style color swatches: glyph over a live color bar, picker underneath */
-.cv-ribbon__swatch {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-  width: 26px;
-  height: 26px;
-  border-radius: 7px;
-  cursor: pointer;
-  transition: background 0.12s, box-shadow 0.12s;
-}
-.cv-ribbon__swatch:hover:not(.is-disabled) { background: var(--cv-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
-.cv-ribbon__swatch.is-disabled { opacity: 0.35; cursor: default; }
-.cv-ribbon__swatch-glyph { font-size: 12px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; }
-.cv-ribbon__swatch-bar { width: 15px; height: 3.5px; border-radius: 2px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
-.cv-ribbon__swatch input[type="color"] {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: none;
-  cursor: pointer;
-}
-.cv-ribbon__swatch.is-disabled input { pointer-events: none; }
-
-/* selects/inputs live in the tray as quiet controls */
-.cv-ribbon .cv-ribbon__select,
-.cv-ribbon .cv-ribbon__input {
-  height: 26px;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 0 7px;
-  border: none;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--cv-text);
-  max-width: 130px;
-  transition: background 0.12s;
-}
-.cv-ribbon .cv-ribbon__select:hover:not(:disabled),
-.cv-ribbon .cv-ribbon__input:hover { background: var(--cv-bg); border: none; }
-.cv-ribbon .cv-ribbon__select:focus,
-.cv-ribbon .cv-ribbon__input:focus { outline: none; background: var(--cv-bg); box-shadow: inset 0 0 0 1px var(--cv-accent); }
-.cv-ribbon .cv-ribbon__select:disabled { opacity: 0.35; }
-.cv-ribbon .cv-ribbon__input { width: 88px; font-weight: 500; }
-.cv-ribbon .cv-ribbon__input::placeholder { color: var(--cv-muted); }
-
-/* selection formatting cluster — reads as one tight group between separators */
-.cv-sheet-tools__fmt { display: inline-flex; align-items: center; gap: 3px; }
-.cv-sheet-tools__fmt button:disabled,
-.cv-sheet-tools button:disabled { opacity: 0.4; cursor: default; }
-.cv-sheet-tools button:disabled:hover { border-color: var(--cv-border); color: var(--cv-text); }
-.cv-sheet-tools__bold, .cv-sheet-tools__align { width: 28px; padding: 4px 0 !important; text-align: center; }
-.cv-sheet-tools__bold--on,
-.cv-sheet-tools__freeze--on {
-  background: var(--cv-accent-weak) !important; border-color: var(--cv-accent) !important;
-  color: var(--cv-accent) !important;
-}
-.cv-sheet-tools__color {
-  width: 28px; height: 26px; padding: 2px; border: 1px solid var(--cv-border);
-  border-radius: 6px; background: var(--cv-bg); cursor: pointer;
-}
-.cv-sheet-tools__color:disabled { opacity: 0.4; cursor: default; }
-.cv-sheet-tools__numfmt, .cv-sheet-tools__fx {
-  font: inherit; font-size: 12.5px; padding: 4px 6px; border-radius: 6px;
-  border: 1px solid var(--cv-border); background: var(--cv-bg); color: var(--cv-text);
-}
-.cv-sheet-tools__numfmt:disabled, .cv-sheet-tools__fx:disabled { opacity: 0.4; }
-.cv-sheet-tools__numfmt:focus, .cv-sheet-tools__fx:focus { outline: none; border-color: var(--cv-accent); }
-
-/* formula bar — a hairline row between the toolbar and the grid */
-.cv-sheet-fxbar {
-  display: flex; align-items: center; gap: 8px; padding: 4px 10px;
-  border-bottom: 1px solid var(--cv-border); background: var(--cv-bg); flex: 0 0 auto;
-}
-.cv-sheet-fxbar__cell {
-  min-width: 44px; text-align: center; font-size: 12px; font-weight: 600;
-  color: var(--cv-muted); font-variant-numeric: tabular-nums;
-  border-right: 1px solid var(--cv-border); padding-right: 8px;
-}
-.cv-sheet-fxbar__input {
-  flex: 1; font-family: var(--cv-mono); font-size: 12.5px; padding: 3px 8px;
-  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--cv-text);
-}
-.cv-sheet-fxbar__input:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }
-.cv-sheet-fxbar__input:disabled { opacity: 0.5; }
 .cv-sheet { position: relative; width: 100%; flex: 1; height: auto; min-height: 0; }
-
-/* --- Fortune-sheet internals, retuned to the canvas design language ----------- */
-/* Fortune ships its own visual defaults (raw blues, hard corners, UA-grey
-   dialogs). Everything user-visible is re-tokenized here so the spreadsheet
-   reads as part of the canvas, not an embedded third-party widget. */
-
-/* toolbar */
-.cv-sheet .fortune-toolbar {
-  background: var(--cv-bg);
-  border-bottom: 1px solid var(--cv-border);
-  padding: 4px 8px;
-}
-.cv-sheet .fortune-toolbar-button,
-.cv-sheet .fortune-toolbar-item {
-  border-radius: 6px;
-  transition: background 0.12s;
-}
-.cv-sheet .fortune-toolbar-button:hover,
-.cv-sheet .fortune-toolbar-item:hover,
-.cv-sheet .fortune-toolbar-combo-button:hover {
-  background: var(--cv-surface);
-}
-.cv-sheet .fortune-toolbar-divider { border-color: var(--cv-border); }
-.cv-sheet .fortune-toolbar-combo { border-radius: 6px; }
-
-/* Fortune's own formula row duplicates the canvas formula bar above it — hide it
-   (the name box A1 + fx input live in .cv-sheet-fxbar). */
-.cv-sheet .fortune-fx-editor { display: none !important; }
-
-/* dialogs (conditional format, insert link, …) */
-.luckysheet-modal-dialog {
-  border: 1px solid var(--cv-border) !important;
-  border-radius: 12px !important;
-  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22) !important;
-  background: var(--cv-bg) !important;
-  color: var(--cv-text) !important;
-  font-family: var(--cv-font) !important;
-  padding: 18px 20px !important;
-}
-.luckysheet-modal-dialog-border { border: none !important; }
-.luckysheet-modal-dialog input[type="text"],
-.luckysheet-modal-dialog input[type="number"],
-.luckysheet-modal-dialog select,
-.luckysheet-modal-dialog textarea {
-  font: inherit;
-  padding: 6px 10px;
-  border: 1px solid var(--cv-border);
-  border-radius: 8px;
-  background: var(--cv-bg);
-  color: var(--cv-text);
-}
-.luckysheet-modal-dialog input:focus,
-.luckysheet-modal-dialog select:focus,
-.luckysheet-modal-dialog textarea:focus { outline: none; border-color: var(--cv-accent); }
-.luckysheet-modal-dialog button {
-  font: 600 13px/1.2 var(--cv-font);
-  padding: 7px 16px;
-  border: 1px solid var(--cv-border);
-  border-radius: 8px;
-  background: var(--cv-bg);
-  color: var(--cv-text);
-  cursor: pointer;
-}
-.luckysheet-modal-dialog button:hover { background: var(--cv-surface); }
-/* Fortune marks its confirm buttons with a solid blue — remap to the accent. */
-.luckysheet-modal-dialog button[style*="rgb(26, 115, 232)"],
-.luckysheet-modal-dialog .fortune-message-box-button-primary,
-.luckysheet-modal-dialog button.primary {
-  background: var(--cv-accent) !important;
-  border-color: var(--cv-accent) !important;
-  color: #fff !important;
-}
-
-/* context menus (right-click, header menus) */
-.fortune-context-menu,
-.luckysheet-cols-menu {
-  border: 1px solid var(--cv-border) !important;
-  border-radius: 10px !important;
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16) !important;
-  background: var(--cv-bg) !important;
-  color: var(--cv-text) !important;
-  font-family: var(--cv-font) !important;
-  padding: 6px !important;
-  overflow: hidden;
-}
-.fortune-context-menu > div,
-.luckysheet-cols-menuitem {
-  border-radius: 7px;
-  font-size: 13px;
-}
-.fortune-context-menu > div:hover,
-.luckysheet-cols-menuitem:hover { background: var(--cv-surface) !important; }
-.fortune-context-menu-divider { border-color: var(--cv-border) !important; }
-
-/* sheet tabs + status bar */
-.cv-sheet .fortune-sheettab-container {
-  background: var(--cv-bg);
-  border-top: 1px solid var(--cv-border);
-  font-family: var(--cv-font);
-}
-.cv-sheet .luckysheet-sheets-item {
-  border-radius: 7px 7px 0 0;
-  color: var(--cv-muted);
-}
-.cv-sheet .luckysheet-sheets-item-active {
-  color: var(--cv-accent);
-  background: var(--cv-accent-weak);
-  font-weight: 600;
-}
-.cv-sheet .fortune-sheettab-button { border-radius: 6px; }
-.cv-sheet .fortune-sheettab-button:hover { background: var(--cv-surface); }
-.cv-sheet .fortune-stat-area,
-.cv-sheet .fortune-zoom-container { font-family: var(--cv-font); color: var(--cv-muted); }
-.cv-sheet .fortune-zoom-button { border-radius: 6px; }
-.cv-sheet .fortune-zoom-button:hover { background: var(--cv-surface); }
-
-/* tooltips + scrollbars */
-.fortune-tooltip {
-  border-radius: 7px !important;
-  font-family: var(--cv-font) !important;
-  font-size: 12px !important;
-}
-.cv-sheet .luckysheet-scrollbar-x::-webkit-scrollbar,
-.cv-sheet .luckysheet-scrollbar-y::-webkit-scrollbar { width: 8px; height: 8px; }
-.cv-sheet .luckysheet-scrollbar-x::-webkit-scrollbar-thumb,
-.cv-sheet .luckysheet-scrollbar-y::-webkit-scrollbar-thumb {
-  background: var(--cv-border);
-  border-radius: 999px;
-}
-.cv-sheet .luckysheet-scrollbar-x::-webkit-scrollbar-thumb:hover,
-.cv-sheet .luckysheet-scrollbar-y::-webkit-scrollbar-thumb:hover { background: var(--cv-muted); }
-
-/* in-cell editor */
-.cv-sheet .luckysheet-cell-input,
-.cv-sheet .luckysheet-input-box-inner { font-family: var(--cv-font); }
 .cv-sheet .fortune-container { height: 100% !important; width: 100% !important; }
 .cv-sheet--empty { display: grid; place-items: center; height: 200px; color: var(--cv-muted); font-size: 14px; }
 
@@ -822,7 +511,6 @@
   border: 1px solid var(--cv-border);
   border-radius: 5px;
   overflow: hidden;
-  container-type: inline-size;
 }
 .cv-deck__thumb.is-active .cv-deck__thumb-slide { border-color: var(--cv-accent); box-shadow: 0 0 0 1px var(--cv-accent); }
 .cv-deck__thumb-slide b { display: block; margin-bottom: 3px; font-size: 9px; line-height: 1.2; }
@@ -950,19 +638,14 @@
 
 /* blank / free-canvas layout */
 .cv-slide { position: relative; }
-.cv-slide--blank { display: block; padding: 0; container-type: inline-size; }
-/* Text on a free slide is sized in cqw (1cqw = 1% of the slide's width), so type
-   scales with the slide exactly like the percent geometry does — the editor,
-   thumbnails, and present mode all show the same proportions at any width. */
+.cv-slide--blank { display: block; padding: 0; }
 .cv-free { position: absolute; inset: 0; }
 .cv-free__el { position: absolute; box-sizing: border-box; cursor: move; }
 .cv-free__guide { position: absolute; z-index: 6; background: #f43f5e; pointer-events: none; }
 .cv-free__guide--v { top: 0; bottom: 0; width: 1px; }
 .cv-free__guide--h { left: 0; right: 0; height: 1px; }
 .cv-free__el.is-selected { outline: 1.5px solid var(--cv-accent); outline-offset: 1px; }
-/* PowerPoint semantics: a text box is a layout hint, not a clip — text that
-   runs long paints past the box instead of vanishing mid-word. */
-.cv-free__text { width: 100%; min-height: 100%; outline: none; overflow: visible; line-height: 1.2; }
+.cv-free__text { width: 100%; height: 100%; outline: none; overflow: hidden; line-height: 1.3; }
 .cv-free__img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
 .cv-free__resize {
   position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px;
@@ -996,42 +679,6 @@
 .cv-free__fmt input[type="number"] { width: 46px; height: 24px; border: 1px solid var(--cv-border); border-radius: 5px; background: var(--cv-bg); color: var(--cv-text); font-size: 12px; padding: 0 4px; }
 .cv-free__fmt input[type="color"] { width: 26px; height: 24px; padding: 0; border: 1px solid var(--cv-border); border-radius: 5px; background: none; cursor: pointer; }
 
-/* multi-select: marquee, selection state, floating action bar */
-.cv-free { outline: none; } /* the canvas is focusable for keyboard nudge/shortcuts */
-.cv-free:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -2px; border-radius: 4px; }
-.cv-free__marquee {
-  position: absolute; z-index: 7; pointer-events: none;
-  border: 1px solid var(--cv-accent);
-  background: color-mix(in srgb, var(--cv-accent) 10%, transparent);
-  border-radius: 2px;
-}
-.cv-free__el--selected { outline: 1.5px solid var(--cv-accent); outline-offset: 1px; }
-.cv-free__multibar {
-  position: absolute; z-index: 8; transform: translate(-50%, calc(-100% - 8px));
-  display: flex; align-items: center; gap: 2px;
-  padding: 3px; background: var(--cv-bg); border: 1px solid var(--cv-border);
-  border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); cursor: default;
-}
-.cv-free__multibar--below { transform: translate(-50%, 8px); }
-.cv-free__multibar button {
-  min-width: 24px; height: 24px; padding: 0 6px; border: none; border-radius: 5px;
-  background: transparent; color: var(--cv-text); cursor: pointer; font-size: 12px; white-space: nowrap;
-}
-.cv-free__multibar button:hover { background: var(--cv-surface); }
-.cv-free__multibar button:disabled { opacity: 0.4; cursor: default; background: transparent; }
-.cv-free__multibar-del:hover { background: #fee2e2 !important; color: #dc2626; }
-
-/* per-element control-bar inputs: rotation + corner radius */
-.cv-free__ctl-rot, .cv-free__ctl-radius {
-  width: 44px; height: 22px; font: inherit; font-size: 11.5px; padding: 0 4px;
-  border: 1px solid var(--cv-border); border-radius: 5px; background: var(--cv-bg); color: var(--cv-text);
-}
-.cv-free__ctl-rot:focus, .cv-free__ctl-radius:focus { outline: none; border-color: var(--cv-accent); }
-
-/* slide reorder: insertion indicator while dragging a thumbnail */
-.cv-deck__thumb-wrap--drop-before { box-shadow: 0 -2px 0 0 var(--cv-accent); }
-.cv-deck__thumb-wrap--drop-after { box-shadow: 0 2px 0 0 var(--cv-accent); }
-
 /* toolbar: background swatch + present button */
 .cv-deck__bg input[type="color"] {
   width: 30px; height: 30px; padding: 0;
@@ -1075,22 +722,6 @@
   background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 10px; padding: 12px 16px; cursor: default; white-space: pre-wrap;
 }
-/* Deck progress: a hairline track pinned to the bottom edge, plus a counter chip. */
-.cv-present__progress {
-  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
-  background: rgba(255, 255, 255, 0.08);
-}
-.cv-present__progress-fill {
-  height: 100%; background: var(--cv-accent);
-  transition: width 0.28s ease;
-}
-@media (prefers-reduced-motion: reduce) { .cv-present__progress-fill { transition: none; } }
-.cv-present__count {
-  position: absolute; top: 16px; right: 20px;
-  color: #9aa4b2; font-size: 13px; font-variant-numeric: tabular-nums;
-  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 999px; padding: 3px 10px; cursor: default;
-}
 
 /* in-place editing cues */
 .cv-word .cv-doc { cursor: text; }
@@ -1352,14 +983,6 @@
   transition: width 0.2s ease;
 }
 
-/* document-mode chip on the html toolbar (imported .hwp/.hwpx etc.) */
-.cv-html-doc-chip {
-  display: inline-flex; align-items: center; gap: 4px;
-  font-size: 11.5px; font-weight: 700; color: var(--cv-accent);
-  background: var(--cv-accent-weak); border: 1px solid var(--cv-border);
-  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
-}
-
 /* --- selection quick-edit bar ------------------------------------------------- */
 
 .cv-selection {
@@ -1529,36 +1152,6 @@
   color: var(--cv-muted);
 }
 
-/* --- PDF viewer ---------------------------------------------------------------- */
-
-/* Fills the flush body outright — `flex: 1` alone collapsed the iframe to its
-   content height (a thin strip of page) because `.cv-body` is a block, not a
-   flex container. */
-.cv-pdf-panel { display: flex; flex-direction: column; height: 100%; min-height: 480px; }
-.cv-pdf-tools {
-  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
-  border-bottom: 1px solid var(--cv-border); background: var(--cv-bg); flex: 0 0 auto;
-}
-.cv-pdf-tools button {
-  font-size: 12px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--cv-border);
-  border-radius: 6px; background: var(--cv-bg); color: var(--cv-text); cursor: pointer;
-}
-.cv-pdf-tools button:hover { border-color: var(--cv-accent); color: var(--cv-accent); }
-.cv-pdf-tools__name {
-  font-size: 12px; font-weight: 600; color: var(--cv-muted);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
-}
-.cv-pdf-tools__spacer { flex: 1; }
-.cv-pdf-tools__sep { width: 1px; height: 18px; background: var(--cv-border); margin: 0 2px; }
-.cv-pdf-tools__zoom { display: inline-flex; align-items: center; gap: 3px; }
-.cv-pdf-tools__zoom button { min-width: 26px; }
-.cv-pdf-tools__zoom-label {
-  min-width: 52px; font-variant-numeric: tabular-nums; color: var(--cv-muted);
-}
-.cv-pdf { position: relative; flex: 1; min-height: 0; background: var(--cv-surface); }
-.cv-pdf__frame { display: block; width: 100%; height: 100%; border: 0; }
-.cv-pdf--empty { display: grid; place-items: center; min-height: 200px; color: var(--cv-muted); }
-
 /* --- inline artifact card (for the transcript) -------------------------------- */
 
 .cv-card {
@@ -1618,6 +1211,63 @@
 
 /* --- responsive --------------------------------------------------------------- */
 
+/* --- file artifact (uploads shown as themselves) ------------------------------ */
+
+.cv-file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  max-width: 640px;
+  margin: 0 auto;
+}
+.cv-file__image,
+.cv-file__cover {
+  max-width: 100%;
+  max-height: 60vh;
+  border: 1px solid var(--cv-border);
+  border-radius: 12px;
+  background: #fff;
+}
+.cv-file__excerpt {
+  width: 100%;
+  max-height: 40vh;
+  overflow: auto;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--cv-border);
+  border-radius: 12px;
+  background: var(--cv-bg);
+  font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--cv-text);
+}
+.cv-file__card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--cv-border);
+  border-radius: 12px;
+  background: var(--cv-bg);
+}
+.cv-file__icon { font-size: 24px; line-height: 1; }
+.cv-file__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.cv-file__meta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cv-file__facts { font-size: 11px; color: var(--cv-muted); }
+.cv-file__download {
+  flex: 0 0 auto;
+  padding: 6px 12px;
+  border: 1px solid var(--cv-border);
+  border-radius: 8px;
+  font-size: 12px;
+  color: var(--cv-text);
+  text-decoration: none;
+}
+.cv-file__download:hover { border-color: var(--cv-accent); }
+
 /* Tablet / narrow desktop: tighten paddings, let toolbars wrap. */
 @media (max-width: 900px) {
   .cv-body { padding: 16px; }