/* ============================================================================
   08-edytor-zalaczniki.css — edytor tekstu: załączniki jako linki, lista „Załącznik jako link”, podgląd załącznika,
   upuszczanie plików, pasek na komputerze (M2, 18.10.2026; wzór: artefakt okna_css.txt B30, B31, B33, B34)
   ----------------------------------------------------------------------------
   Logika: js/okna/edytor-zalaczniki.js. Telefon (pasek Aa / siatka 7×3, ed-fokus): css/9-telefon/11-edytor-pasek.css.
   Tokeny programu zamiast tokenów wzoru: --ak → --accent, --ak-tlo → --accent-soft, --bl → --danger, --pow → --surface,
   --ramka → --line, --r-s → --r-sm, --r-l → --r-lg. Zero !important.
   ============================================================================ */

/* Ikona spinacza — jedna definicja dla przycisku w pasku i dla znaku przed nazwą w linku w tekście. */
:root { --ikona-spinacz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 11.5-8.6 8.6a5.5 5.5 0 0 1-7.8-7.8l8.6-8.6a3.7 3.7 0 0 1 5.2 5.2l-8.6 8.6a1.8 1.8 0 0 1-2.6-2.6l7.9-7.9'/%3E%3C/svg%3E"); }
.icon-wz-spinacz { mask-image: var(--ikona-spinacz); }

/* --- Link do załącznika w tekście: <a class="ed-zal" href="#zal" data-edzal="…"> --- */
a.ed-zal { display: inline; border-radius: var(--r-sm); color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
a.ed-zal::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -.14em; background-color: currentColor; mask-image: var(--ikona-spinacz); mask-position: center; mask-repeat: no-repeat; mask-size: contain; }
a.ed-zal:hover { background: var(--accent-soft); }
a.ed-zal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Lista pod spinaczem (komputer: dymek pod przyciskiem; telefon: dolny arkusz — 9-telefon/11-edytor-pasek.css) --- */
.zal-menu { position: fixed; z-index: var(--z-lista); display: grid; gap: 2px; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-1); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); box-shadow: var(--cien-3); }
.zal-menu:focus { outline: none; }
.zal-grupa { padding: var(--s-2) var(--s-2) var(--s-1); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.zal-grupa:empty { display: none; }
.zal-poz { display: grid; gap: 2px; justify-items: start; width: 100%; padding: var(--s-2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.zal-poz b { max-width: 100%; overflow: hidden; font-size: var(--t-base); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
.zal-poz small { color: var(--text-muted); font-size: var(--t-xs); }
.zal-poz:hover, .zal-poz:focus-visible { outline: none; background: var(--surface-3); }
.zal-poz:disabled { cursor: default; opacity: .62; }
.zal-poz:disabled:hover { background: transparent; }
.zal-menu-tlo { position: fixed; inset: 0; z-index: var(--z-lista); background: color-mix(in srgb, var(--zaslona-kolor) 40%, transparent); }

/* --- Podgląd załącznika po kliknięciu w link (w nakładce potwierdzeń: nad pełnoekranowym edytorem) --- */
.app-confirm.zal-podglad { --okno-w: 360px; }
.zal-podglad-tresc { justify-items: center; padding-block: var(--s-5); text-align: center; }
.zal-podglad .zal-nazwa { max-width: 100%; overflow-wrap: anywhere; }
.zal-typ { color: var(--text-muted); font-size: var(--t-xs); }
.zal-ikona { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent-strong); font-weight: var(--w-strong); }
.zal-ikona.is-pdf { background: var(--danger-soft); color: var(--danger); }
.zal-ikona .icon { width: 32px; height: 32px; }

/* --- Upuszczanie plików: podświetlenie pola tekstu oraz nakładka na całe okno --- */
.rich-editor.drop .rich-editable { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft); }
.modal.drop, .rich-expand-panel.drop { position: relative; outline: 2px dashed var(--accent); outline-offset: -6px; }
.zal-nakladka { position: absolute; inset: var(--s-2); z-index: 60; display: grid; place-items: center; padding: var(--s-4); border-radius: var(--r); background: color-mix(in srgb, var(--accent-soft) 72%, transparent); backdrop-filter: blur(2px); color: var(--accent-strong); font-size: var(--t-md); font-weight: var(--w-strong); text-align: center; pointer-events: none; }

/* --- Pasek na komputerze: gdy pole jest węższe niż 640 / 560 px przyciski robią się ciaśniejsze (30 / 27 px),
       zamiast zawijać się do dwóch wierszy. Rozmiar czyta sam edytor (container query), nie okno. --- */
:root[data-ui="desktop"] :is(.modal, .rich-expand-panel) .rich-editor { container-type: inline-size; }
@container (max-width: 640px) {
  :root[data-ui="desktop"] :is(.modal, .rich-expand-panel) .rich-editor .rich-toolbar { gap: 0; }
  :root[data-ui="desktop"] :is(.modal, .rich-expand-panel) .rich-editor .rich-toolbar > .rich-sep { margin-inline: 1px; }
  :root[data-ui="desktop"] :is(.modal, .rich-expand-panel) .rich-editor .rich-toolbar :is(button, .rich-image-button) { width: 30px; min-width: 30px; }
  :root[data-ui="desktop"] :is(.modal, .rich-expand-panel) .rich-editor .rich-toolbar select { padding-left: var(--s-1); padding-right: calc(var(--s-4) + var(--s-2)); }
}
@container (max-width: 560px) {
  :root[data-ui="desktop"] :is(.modal, .rich-expand-panel) .rich-editor .rich-toolbar :is(button, .rich-image-button) { width: 27px; min-width: 27px; }
  :root[data-ui="desktop"] :is(.modal, .rich-expand-panel) .rich-editor .rich-toolbar select { padding-left: 3px; padding-right: calc(var(--s-3) + var(--s-2)); }
}

/* --- Pełny ekran edytora — komputer i tablet (GUI-DESIGN-FIX1, 18.10.2026; wzór: artefakt `edRozwin`, okno „Edytor tekstu”) ---
   Nagłówek: tytuł 19 px i opis 13 px pod spodem, ✕ po prawej, kreska pod spodem; edytor w ramce z odstępem 16 px; stopka z „Gotowe” po prawej.
   Telefon: css/9-telefon/11-edytor-pasek.css. */
:root:not([data-ui="mobile"]) .rich-expand-panel { background: var(--surface); border: 1px solid var(--line); }
:root:not([data-ui="mobile"]) .rich-expand-head { align-items: flex-start; justify-content: space-between; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-3) var(--s-5); background: transparent; }
:root:not([data-ui="mobile"]) .rich-expand-tytul { display: flex; flex-direction: column; min-width: 0; }
:root:not([data-ui="mobile"]) .rich-expand-tytul > strong { font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); line-height: var(--lh-base); letter-spacing: -.01em; }
:root:not([data-ui="mobile"]) .rich-expand-tytul > small { margin-top: 2px; color: var(--text-faint); font-size: var(--t-sm); }
:root:not([data-ui="mobile"]) .rich-expand-panel .rich-editor.rich-expand-editor { margin: var(--s-4) var(--s-5) 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
:root:not([data-ui="mobile"]) .rich-expand-stopka { display: flex; flex: none; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-4); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); }
/* pasek narzędzi w pełnym ekranie = ten sam wygląd przycisków co w opisie Design (kwadraty wysokości kontrolki, przyciszony kolor) */
.rich-expand-panel .rich-toolbar :is(button, .rich-image-button, .rich-attach-button):not(.is-active, .rich-aa-toggle) { min-width: var(--h-control); height: var(--h-control); padding: 1px 6px; border-radius: var(--r-sm); border-color: transparent; background: transparent; color: var(--text-muted); font-weight: var(--w-regular); }
.rich-expand-panel .rich-toolbar :is(strong, em, u) { font-size: var(--t-base); font-weight: var(--w-strong); }
/* --- Panel emotikon wg wzoru (.ui-ed-ep): 8 kolumn, odstęp 2 px, wewnętrzny odstęp 8 px, pola wysokości kontrolki (36 / 44 px), znaki 20 px, wysokość do 240 px (telefon poziomo 200 px).
   Położenie i szerokość (min(340 px, edytor − 16 px), 8 px od lewej krawędzi edytora) liczy positionRichEmojiPanel (js/okna/edytor-tekstu.js). Czat i notatki mają własny układ. --- */
.rich-editor:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-emoji-panel { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; padding: var(--s-2); max-height: 240px; }
.rich-editor:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-emoji-panel .rich-emoji { aspect-ratio: auto; min-width: 0; height: var(--h-control); font-size: calc(var(--t-md) + var(--s-1)); }   /* wzór: znaki 20 px (= 16 + 4; w tokenach nie ma 20 px) */
:root[data-telefon-poziomo] .rich-editor:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-emoji-panel { max-height: 200px; }
.rich-expand-head > .rich-expand-x { flex: none; margin-left: auto; border-color: transparent; background: transparent; color: var(--text-muted); }
.rich-expand-head > .rich-expand-x:hover { background: var(--surface-3); color: var(--text); }