/* ============================================================================
   Файли у вбудованому переглядачі: редагування (малювання, текст, клітинки),
   версії файлів, позначки «v2» і кнопки відкриття файлів у модулях.
   Токени — з app.css, оболонка переглядача — у knowledge.css.
   ========================================================================= */

@layer components {

  /* ─────────────── Версія у шапці переглядача ─────────────── */
  .dv-version {
    flex: none;
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px 0 8px;
    border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
    border-radius: var(--r-full);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--t-xs); font-weight: 650; white-space: nowrap;
    cursor: pointer;
    transition: background var(--d-fast) var(--e-out);
  }
  .dv-version:hover { background: color-mix(in oklab, var(--accent) 18%, transparent); }
  .dv-version.is-old { --accent: var(--warn); }

  .dv__edit { gap: 6px; }
  .dv__edit:disabled { opacity: .5; cursor: not-allowed; }
  .dv__upload { position: relative; cursor: pointer; }
  .dv__upload input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
  .dv__upload.is-busy { pointer-events: none; }

  /* ─────────────── Панель інструментів редагування ─────────────── */
  .dv__editbar {
    flex: none;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    min-height: 52px; padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--accent) 5%, transparent), transparent),
      var(--surface-solid);
    animation: dv-editbar-in .2s var(--e-out);
  }
  @keyframes dv-editbar-in { from { opacity: 0; transform: translateY(-4px); } }

  .dv-tools, .dv-swatches, .dv-sizes {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px;
    border-radius: var(--r-md);
    background: var(--bg-sunken);
  }
  .dv-tool {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 0; border-radius: 9px;
    background: none; color: var(--ink-2);
    cursor: pointer;
    transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
  }
  .dv-tool:hover:not(:disabled) { background: var(--surface-solid); color: var(--ink); }
  .dv-tool:active:not(:disabled) { transform: scale(.94); }
  .dv-tool.is-active { background: var(--surface-solid); color: var(--accent); box-shadow: var(--sh-sm), inset 0 0 0 1.5px var(--accent); }
  .dv-tool:disabled { opacity: .35; cursor: default; }

  .dv-swatches { gap: 4px; padding: 5px 7px; }
  .dv-swatch {
    width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--sw);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 18%, transparent);
    cursor: pointer;
    transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
  }
  .dv-swatch:hover { transform: scale(1.12); }
  .dv-swatch.is-active { box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--sw), inset 0 0 0 1px color-mix(in oklab, #000 18%, transparent); }

  .dv-size {
    display: grid; place-items: center;
    width: 30px; height: 34px;
    border: 0; border-radius: 9px; background: none; cursor: pointer;
  }
  .dv-size span { width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink-3); }
  .dv-size:hover span { background: var(--ink); }
  .dv-size.is-active { background: var(--surface-solid); box-shadow: var(--sh-sm); }
  .dv-size.is-active span { background: var(--accent); }

  .dv-edit-hint {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--t-sm); color: var(--ink-2);
  }
  .dv-edit-hint svg { color: var(--accent); flex: none; }
  .dv-edit-note { width: min(260px, 100%); height: 34px; font-size: var(--t-sm); }

  .dv-oldbar {
    flex: none;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 14px;
    border-bottom: 1px solid color-mix(in oklab, var(--warn) 30%, transparent);
    background: var(--warn-soft);
    color: color-mix(in oklab, var(--warn) 70%, var(--ink));
    font-size: var(--t-sm);
  }

  @media (max-width: 900px) {
    .dv__editbar { gap: 6px; padding: 6px 8px; }
    .dv-edit-note { order: 10; flex: 1 1 100%; width: auto; }
    .dv-tool { width: 32px; height: 32px; }
  }

  /* ─────────────── Полотно для малювання ─────────────── */
  .dv-ink {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
  }
  .dv-ink-draw .dv-ink { pointer-events: auto; touch-action: none; cursor: crosshair; }
  .dv-ink-draw[data-ink-tool="text"] .dv-ink { cursor: text; }
  .dv-ink-draw[data-ink-tool="eraser"] .dv-ink { cursor: cell; }
  .dv-pdf__page canvas.dv-ink { position: absolute; }

  .dv-ink-wrap { position: relative; display: block; flex: none; margin: auto; line-height: 0; }
  .dv-ink-wrap img { display: block; max-width: none !important; max-height: none !important; margin: 0 !important; cursor: inherit !important; }

  .dv-ink__text {
    position: absolute; z-index: 3;
    min-width: 40px; max-width: 70%;
    padding: 2px 4px; margin: -4px 0 0 -4px;
    border-radius: 6px;
    outline: 2px dashed currentColor; outline-offset: 2px;
    background: color-mix(in oklab, #fff 55%, transparent);
    font-family: Inter, "Segoe UI", system-ui, sans-serif; font-weight: 600; line-height: 1.22;
    white-space: pre-wrap; word-break: break-word;
    cursor: text;
  }

  /* ─────────────── Word: правка тексту ─────────────── */
  .dv-docx--edit [contenteditable="true"] {
    outline: none;
    border-radius: 3px;
    transition: background var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
    cursor: text;
  }
  .dv-docx--edit [contenteditable="true"]:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
  .dv-docx--edit [contenteditable="true"]:focus { background: color-mix(in oklab, var(--accent) 9%, transparent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent); }
  .dv-docx--edit .dv-docx__locked { opacity: .7; }

  /* ─────────────── Excel: правка клітинок ─────────────── */
  .dv-editing .dv-grid td[contenteditable="true"] { cursor: cell; }
  .dv-editing .dv-grid td[contenteditable="true"]:focus {
    outline: 2px solid var(--accent); outline-offset: -2px;
    background: var(--surface-solid);
  }
  .dv-editing .dv-grid td.is-changed { background: color-mix(in oklab, var(--warn) 14%, var(--surface-solid)); }

  /* ─────────────── Текст ─────────────── */
  .dv-textedit {
    display: block;
    width: min(980px, calc(100% - 32px)); min-height: calc(100% - 48px);
    margin: 24px auto;
    padding: 20px 22px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-solid); color: var(--ink);
    font: 13px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
    resize: none; outline: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 24px rgba(0,0,0,.06);
  }
  .dv-textedit:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

  .dv__audio audio { width: min(460px, 100%); margin-top: 6px; }

  /* ─────────────── Відомості й версії ─────────────── */
  .dv-facts { display: grid; gap: 10px; margin: 0; }
  .dv-facts > div { display: grid; gap: 2px; }
  .dv-facts dt { font-size: var(--t-2xs); font-weight: 620; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }
  .dv-facts dd { margin: 0; font-size: var(--t-sm); overflow-wrap: anywhere; }

  .dv-versions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
  .dv-versions__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
  .dv-versions__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .dv-versions__item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 8px 0 12px; }
  .dv-versions__item:not(:last-child)::before {
    content: ""; position: absolute; left: 16px; top: 38px; bottom: -4px; width: 2px;
    background: var(--line);
  }
  .dv-versions__num {
    display: grid; place-items: center;
    width: 34px; height: 26px; border-radius: var(--r-full);
    background: var(--bg-sunken); color: var(--ink-3);
    font-size: var(--t-2xs); font-weight: 700;
  }
  .dv-versions__item.is-current .dv-versions__num { background: var(--accent); color: #fff; }
  .dv-versions__item.is-shown .dv-versions__body b { color: var(--accent); }
  .dv-versions__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .dv-versions__note { color: var(--ink-2); font-style: italic; overflow-wrap: anywhere; }

  /* ─────────────── «v2» у списках ─────────────── */
  .file-version {
    display: inline-flex; align-items: center;
    height: 18px; padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--accent-soft); color: var(--accent);
    font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .02em;
    vertical-align: middle; white-space: nowrap;
  }
  .file-version.is-old { background: var(--warn-soft); color: var(--warn); }

  /* Кнопка «відкрити файл» у картках модулів (резюме, скан, документ). */
  .file-open {
    display: inline-flex; align-items: center; gap: 10px;
    max-width: 100%; min-height: 46px; padding: 7px 14px 7px 8px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-solid); color: var(--ink);
    text-align: left; cursor: pointer;
    transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
  }
  .file-open:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); transform: translateY(-1px); }
  .file-open__icon {
    flex: none; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--accent-soft); color: var(--accent);
  }
  .file-open__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .file-open__text b { font-size: var(--t-sm); font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-open__text span { font-size: var(--t-xs); color: var(--ink-3); }

  button.upload__file { border: 0; padding: 0; cursor: pointer; color: inherit; }
  button.upload__file:hover { color: var(--accent); }

  .file-thumb { position: relative; }
  .file-thumb > .file-version { position: absolute; right: 10px; bottom: 10px; box-shadow: 0 0 0 2px var(--surface-solid); }
  .mk-asset { position: relative; }
  .mk-asset .file-version { position: absolute; right: 4px; bottom: 4px; box-shadow: 0 0 0 2px var(--surface-solid); }
  .mk-asset__file { display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-3); }

  /* Посилання-кнопка на файл у тексті (чати, докази, вкладення). */
  .file-link {
    padding: 0; border: 0; background: none;
    color: var(--accent); font: inherit; text-align: left;
    cursor: pointer; overflow-wrap: anywhere;
  }
  .file-link:hover { text-decoration: underline; }
}