/* ============================================================================
   17b-szkicownik.css — SZKICOWNIK: wysokość okna, DOK (tablet i telefon) i panele nad dokiem (M3, 18.10.2026)
   ----------------------------------------------------------------------------
   Reszta wyglądu szkicownika (szyna narzędzi, górny pasek, przyciski, suwak grubości, płótno) jest w 17-czat.css,
   sekcja 8. Tu jest to, co doszło z płótnem nieskończonym:
     · okno ma własną wysokość (płótno nie ma już kartki, która ją narzucała),
     · DOK — sześć przycisków pod kciukiem: Narzędzia, Kolor, Grubość, Cofnij, Ponów, Więcej,
     · szyna narzędzi i górny pasek, które w doku stają się PANELAMI nad dokiem.
   Układ doku wybiera JS atrybutem data-dok na .rich-sketch-overlay (szkicownik.js, `ustawTrybDoku`):
     brak atrybutu = komputer (pełny górny pasek i szyna, dok ukryty),
     data-dok="dol" = telefon w pionie (dok na dole), data-dok="bok" = tablet i telefon poziomo (dok po lewej, pionowo).
   Dzięki temu układ jest zapisany RAZ, a nie osobno dla tabletu i telefonu. Wymiary dotyku (44 px), pełny ekran,
   Wstaw/Anuluj w nagłówku — w 9-telefon/4-projekty-zadania-czat.css (:root[data-ui="mobile"]).
   ============================================================================ */
.rich-sketch-panel { height: min(86vh / var(--skala-ui), 900px); }
.rich-sketch-dok { display: none; }
:root[data-ui="tablet"] .rich-sketch-hint { display: none; }   /* dotyk: skrótów klawiszowych nie ma */
.rich-sketch-wstaw-krotki { display: none; }
.rich-sketch-head .rich-sketch-ikona { margin: calc(-1 * var(--s-1)) 0 calc(-1 * var(--s-1)) auto; }   /* przełącznik papieru: prawy koniec nagłówka (pasek narzędzi jest pełny) */

/* Przycisk doku: ikona nad podpisem. Aktywny (otwarty panel) — akcent, jak aktywne narzędzie w szynie. */
.rich-sketch-dk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; }
.rich-sketch-dk small { font-size: var(--t-xs); line-height: 1.1; }
.rich-sketch-dk:hover { color: var(--text); }
.rich-sketch-dk[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.rich-sketch-dk-i { display: grid; place-items: center; width: 28px; height: 28px; }
.rich-sketch-dk-kol { display: block; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--c); box-shadow: 0 0 0 2px var(--line-strong), inset 0 0 0 1px color-mix(in srgb, var(--text) 45%, transparent); }
.rich-sketch-dk-gr { display: block; width: var(--w, var(--s-2)); height: var(--w, var(--s-2)); border-radius: var(--r-pill); background: currentColor; }

/* ---------------------------------------------------------------------------
   TRYB DOKU (data-dok): okno jest układem odniesienia dla paneli; dok pokazany; palec nie ma pasków przewijania.
   --------------------------------------------------------------------------- */
.rich-sketch-overlay[data-dok] .rich-sketch-panel { position: relative; }
.rich-sketch-overlay[data-dok] .rich-sketch-dok { display: grid; background: var(--surface-2); }
.rich-sketch-overlay[data-dok] * { scrollbar-width: none; -ms-overflow-style: none; }
.rich-sketch-overlay[data-dok] *::-webkit-scrollbar { display: none; width: 0; height: 0; }
.rich-sketch-overlay[data-dok] .rich-sketch-canvas-wrap { min-width: 0; }

/* Szyna narzędzi i górny pasek → panele. Domyślnie schowane; otwiera je data-p na .rich-sketch-body. */
.rich-sketch-overlay[data-dok] .rich-sketch-rail,
.rich-sketch-overlay[data-dok] .rich-sketch-toolbar { display: none; position: absolute; z-index: 6; flex-wrap: wrap; max-height: calc(100% - 52px - 2 * var(--s-2)); overflow-y: auto; padding: var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-2); }
.rich-sketch-overlay[data-dok] .rich-sketch-rail-sep { display: none; }

/* Panel „Narzędzia": siatka 4 kolumn, przyciski na całą komórkę. */
.rich-sketch-overlay[data-dok] .rich-sketch-body[data-p="narz"] .rich-sketch-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.rich-sketch-overlay[data-dok] .rich-sketch-rail button { width: 100%; height: var(--h-control); }

/* Panele „Kolor", „Grubość" i „Więcej" — jeden pasek, w każdym widoczna inna część. */
.rich-sketch-overlay[data-dok] .rich-sketch-body:is([data-p="kolor"], [data-p="grub"], [data-p="wiecej"]) .rich-sketch-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }
.rich-sketch-overlay[data-dok] .rich-sketch-body[data-p="kolor"] .rich-sketch-toolbar > :not(.rich-sketch-colors),
.rich-sketch-overlay[data-dok] .rich-sketch-body[data-p="grub"] .rich-sketch-toolbar > :not(.rich-sketch-width) { display: none; }
.rich-sketch-overlay[data-dok] .rich-sketch-body[data-p="wiecej"] .rich-sketch-toolbar > :is(.rich-sketch-colors, .rich-sketch-width, .rich-sketch-sep, .rich-sketch-spacer, [data-sketch-undo], [data-sketch-redo]) { display: none; }
.rich-sketch-overlay[data-dok] .rich-sketch-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); justify-items: center; }
.rich-sketch-overlay[data-dok] .rich-sketch-width { display: flex; width: 100%; gap: var(--s-3); }
.rich-sketch-overlay[data-dok] .rich-sketch-width input[type="range"] { flex: 1; width: auto; }
.rich-sketch-overlay[data-dok] .rich-sketch-bg { width: 100%; justify-content: space-between; }
/* W „Więcej" przyciski-ikony są wierszami z podpisem (nazwa z aria-label) — na dotyku nie ma dymków. */
.rich-sketch-overlay[data-dok] .rich-sketch-body[data-p="wiecej"] .rich-sketch-toolbar > .rich-sketch-ikona:not([data-sketch-undo], [data-sketch-redo]) { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3); width: 100%; padding: 0 var(--s-3); }
.rich-sketch-overlay[data-dok] .rich-sketch-body[data-p="wiecej"] .rich-sketch-toolbar > .rich-sketch-ikona::after { content: attr(aria-label); color: var(--text); font-size: var(--t-sm); font-weight: var(--w-regular); }

/* Telefon w pionie: dok na dole, panele tuż nad nim. */
.rich-sketch-overlay[data-dok="dol"] .rich-sketch-body { flex-direction: column; }
.rich-sketch-overlay[data-dok="dol"] .rich-sketch-dok { order: 3; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.rich-sketch-overlay[data-dok="dol"] .rich-sketch-rail,
.rich-sketch-overlay[data-dok="dol"] .rich-sketch-toolbar { left: var(--s-2); right: var(--s-2); bottom: calc(56px + var(--s-2) + env(safe-area-inset-bottom)); max-height: calc(100% - 52px - 56px - 3 * var(--s-2) - env(safe-area-inset-bottom)); }

/* Tablet i telefon poziomo: dok po lewej, 6 przycisków jeden pod drugim, panele obok niego. */
.rich-sketch-overlay[data-dok="bok"] .rich-sketch-body { flex-direction: row; }
.rich-sketch-overlay[data-dok="bok"] .rich-sketch-dok { order: -1; grid-template-columns: 1fr; grid-template-rows: repeat(6, minmax(0, 1fr)); width: 64px; border-right: 1px solid var(--line); }
.rich-sketch-overlay[data-dok="bok"] .rich-sketch-dk { min-height: 0; }
.rich-sketch-overlay[data-dok="bok"] .rich-sketch-rail,
.rich-sketch-overlay[data-dok="bok"] .rich-sketch-toolbar { left: calc(64px + var(--s-2)); bottom: var(--s-2); width: min(440px, calc(100% - 64px - 2 * var(--s-2))); }