/* ─── Единый нижний док (канон-чертёж 01·3): fade + бумажная зона ───
   Одна бумажная зона на весь низ: композер [+ опции · поле с 🎤 · Add] (виден
   только на доске) над таб-баром (постоянный). Обводок НЕ одна общая, а
   РАЗДЕЛЬНЫЕ (как лист 01): своя у таб-бара (skTabbar.mount, boot.js) и у
   контролов ＋/поле/Add (mountPencil) — зона лишь непрозрачный paper-фон + fade.
   Закон 4/8: контролы 48/R12, таб-бар 64/R16, поля 16, зазор input↔Add 8,
   композер↔таб-бар 12. Всё анимируемое — transform/opacity (§1). */
.sk-dock{
  position:fixed; left:12px; right:12px;
  bottom:calc(10px + var(--safe-b));
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none; z-index:70;               /* тосты — сверху (notify.css) */
}
.sk-dock[hidden]{display:none;}

/* Растворитель хвоста списка теперь ВСТРОЕН в верх острова-плашки (её
   промаскированный верхний край, см. .sk-dock-plate::before ниже) — отдельный
   полноширинный .sk-dock-fade больше не нужен и СРЕЗАЛ БЫ верхние углы острова
   (прямоугольник над скруглённой плашкой). Оставлен скрытым: разметку #sk-dock
   (index.html) не трогаем. */
.sk-dock-fade{ display:none; }

/* бумажная зона-ОСТРОВ (скруглённый прямоугольник): paper-фон вынесен в ::before
   и промаскирован крест-градиентом — растворяется по ВСЕМ сторонам, ВСЕ углы
   скруглены (border-radius под маской повторяет форму дока). Обводок нет (канон
   01: .rdock — фон без рамки); список не просвечивает в зазорах контролов —
   ЦЕНТР маски полностью непрозрачен. Только gradient-mask: без blur/glow/shadow
   (канон SPEC §запреты) → не снимается body.light-fx (это не filter).
   Фон — `--paper2` (НЕ --paper!): это ТОТ ЖЕ токен, что заливка контролов
   ＋/поле/Add/таб-бар (mountPencil), поэтому остров и контролы = ОДИН оттенок.
   В dark `--paper` #211E1A ТЕМНЕЕ `--paper2` #2A2722 → островом из --paper
   получалась тёмная полоса над композером (в light токены почти совпадают, там
   не видно). Маска режет только альфу → тема-независима (оба токена из dark.css).
   padding тесный (16/16/12 — как поля контролов): остров плотно обнимает
   композер+таб-бар, БЕЗ высокого верхнего отступа; композер/таб-бар якорятся
   снизу. Хвост списка мягко тает верхним пером маски (--ftop). */
.sk-dock-plate{
  position:relative; isolation:isolate;   /* свой стек-контекст: ::before ложится ПОД контент */
  width:100%; max-width:520px; pointer-events:auto;
  padding:16px 16px 12px;
}
.sk-dock-plate::before{
  content:""; position:absolute; inset:0; z-index:-1;
  /* фон острова = РОВНЫЙ цвет страницы (--paper) без точечной сетки: док
     сливается с полотном по цвету, но точки под ним не двоятся с фоном */
  background:var(--paper);
  pointer-events:none; border-radius:24px;                 /* форма острова = скруг.-прямоуг. */
  --f:20px; --ftop:20px;                   /* перо фейда: симметрично по всем сторонам */
  -webkit-mask:
    linear-gradient(to right,  transparent, #000 var(--f),    #000 calc(100% - var(--f)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--ftop), #000 calc(100% - var(--f)), transparent);
  -webkit-mask-composite:source-in;        /* WebKit/iOS: пересечение слоёв маски */
          mask:
    linear-gradient(to right,  transparent, #000 var(--f),    #000 calc(100% - var(--f)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--ftop), #000 calc(100% - var(--f)), transparent);
          mask-composite:intersect;        /* стандарт/Chromium */
}

/* композер-зона: блок в плашке (не fixed). Виден только на доске — на др.
   вкладках плашка ужимается до таб-бара. margin-bottom 12 — зазор до бара. */
.cp-dock{display:none; margin-bottom:12px;}
body:not([data-view]) .cp-dock,
body[data-view="board"] .cp-dock{display:block;}
/* шкаф-режим (js/shelf-pile.js): та же плашка — захват «одной строкой» в кучу/
   ящик/календарь; задачные опции (＋ кому/когда, превью-чипы, думание) прячем */
body[data-view="shelf"] .cp-dock{display:block;}
body[data-view="shelf"] .cp-plus,
body[data-view="shelf"] .cp-opts,
body[data-view="shelf"] .cp-preview,
body[data-view="shelf"] .cp-thk{display:none !important;}
.cp-in{width:100%; pointer-events:auto;}

.cp-row{display:flex; gap:8px; align-items:stretch;}

.cp-plus{
  position:relative; width:48px; flex:none;   /* канон ＋ 48×48 · R12 (h/4) */
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--graphite);
  transition:transform .12s ease;
}
.cp-plus svg{width:20px; height:20px; position:relative;}
.cp-plus:active{transform:scale(.94);}
.cp-plus[aria-expanded="true"] svg{transform:rotate(45deg);}   /* + → ✕ */
.cp-plus svg{transition:transform .15s ease;}

.cp-field{
  position:relative; flex:1; min-width:0; display:flex; align-items:center;
  padding:0 44px 0 16px; min-height:48px;   /* канон инпут 48 · поле 16 · под мик 44 */
}
/* textarea + автогроу (cpAutoGrow, composer.js): длинный/надиктованный текст
   растит поле до ~4 строк, дальше внутренний скролл; подложку mountPencil
   перерисует её ResizeObserver */
.cp-field textarea{
  width:100%; background:none; border:none; outline:none;
  font-family:'Neucha',cursive; font-size:16px;  /* ≥16px — iOS не зумит (память ios-input-zoom) */
  color:var(--graphite); position:relative;
  resize:none; overflow-y:hidden; line-height:1.3;
  height:21px;               /* стартовая одна строка (лечит первый кадр до JS) */
  max-height:109px;          /* ~4 строки; дальше overflow-y:auto ставит JS */
  padding:0; margin:12px 0;  /* вертикальный ритм держат отступы, не высота поля */
}
.cp-field textarea::placeholder{color:var(--pencil); font-style:italic;}

.cp-mic{
  /* прижат к НИЗУ поля (не top:50%): у многострочного поля живёт рядом с
     последней строкой и не «съезжает» относительно текста */
  position:absolute; right:4px; bottom:4px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--graphite);
}
.cp-mic svg{width:24px; height:24px;}   /* канон иконка line 2.5/24 */
.cp-mic.rec{color:var(--red); animation:cp-pulse .8s ease infinite;}
@keyframes cp-pulse{50%{transform:scale(1.18);}}

/* ── Голос в поле (лист 16·А/Б) ──────────────────────────────────────
   Профиль голоса живёт ВНУТРИ поля вместо текста (не оверлей); при стопе
   волна «прочитывается» в текст слева направо. Всё transform/opacity (§1). */
.cp-wave{flex:1; min-width:0; display:flex; align-items:center; gap:3px; height:32px;}
.cp-wave i{flex:1; max-width:5px; height:26px; border-radius:2px; background:var(--graphite);
  transform:scaleY(.14); transform-origin:center;}
.cp-wave.live i{animation:cp-v16 .7s ease-in-out infinite alternate;}
.cp-wave i:nth-child(4n){animation-duration:.5s;}
.cp-wave i:nth-child(4n+1){animation-duration:.9s;}
.cp-wave i:nth-child(3n){animation-delay:-.35s;}
.cp-wave i:nth-child(5n){animation-delay:-.6s; animation-duration:.6s;}
.cp-wave i:nth-child(7n){animation-duration:1.05s;}
@keyframes cp-v16{from{transform:scaleY(.14);} to{transform:scaleY(1);}}
.cp-wave.rec i{animation:none; transition:transform .24s ease, opacity .24s ease;}
.cp-wave i.off{transform:scaleY(.1); opacity:.28;}
.cp-vtimer{flex:none; font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--red);}
.cp-vrec{flex:none; font-size:12px; color:var(--pencil); font-style:italic;}

/* ── Карандашик думает (лист 16·В) ───────────────────────────────────
   Бегущая карандашная линия (канон галки: stroke-dashoffset) + карандаш
   качается + чипы-догадки. Живёт под композером, доску не блокирует. */
.cp-thk{position:relative; margin:8px 2px 0; border-radius:12px; padding:12px 14px;
  display:flex; flex-direction:column; gap:8px;}
.cp-thk::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:12px; filter:url(#squiggle);}
.cp-thkline{height:24px; position:relative; overflow:hidden;}
.cp-thkline>svg{position:absolute; inset:0; width:100%; height:100%;}
.cp-thkline path{stroke:var(--graphite-soft); stroke-width:2; fill:none; stroke-linecap:round;
  stroke-dasharray:60 282;}
.cp-thk.run .cp-thkline path{animation:cp-v16run 1.2s linear infinite;}
@keyframes cp-v16run{from{stroke-dashoffset:0;} to{stroke-dashoffset:-342;}}
.cp-thkpen{position:absolute; right:8px; top:0; width:24px; height:24px; transform-origin:70% 90%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l2.5-7L17 2.5l4.5 4.5L11 17.5 4 20z' fill='none' stroke='%2355514A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat;}
.cp-thk.run .cp-thkpen{animation:cp-v16tilt .9s ease-in-out infinite;}
@keyframes cp-v16tilt{0%,100%{transform:rotate(-5deg) translateY(0);} 50%{transform:rotate(6deg) translateY(-2px);}}
.cp-thkchips{display:flex; gap:8px; flex-wrap:wrap; min-height:24px;}
.cp-gss{height:24px; border-radius:6px; padding:0 8px; font-size:12px; position:relative;
  display:inline-flex; align-items:center; gap:4px; opacity:0; transform:translateY(4px);
  transition:opacity .24s ease, transform .24s ease;}
.cp-gss.in{opacity:1; transform:none;}
.cp-gss::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed currentColor; border-radius:inherit; filter:url(#squiggle); opacity:.7;}
.cp-gss.solid::before{border-style:solid; opacity:1;}

@media (prefers-reduced-motion: reduce){
  .cp-wave.live i, .cp-thk.run .cp-thkline path, .cp-thk.run .cp-thkpen{animation:none;}
}

.cp-add{
  position:relative; width:76px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.35rem;
  color:var(--graphite); transition:transform .06s ease;
}
.cp-add > span{position:relative;}
.cp-add:active{transform:translate(1.5px,1.5px);}
.cp-add[disabled]{opacity:.55; cursor:default;}

/* ── строка опций над полем: кому / когда / полная форма ──
   бумажную подложку рисует mountPencil (иначе сливается с доской под доком) */
.cp-opts{
  position:relative; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin:0 2px 8px; padding:8px 12px;
}
.cp-opts > *{position:relative;}
.cp-opts .lbl{color:var(--pencil); font-size:.88rem;}
.cp-who{display:inline-flex; gap:5px; align-items:center;}
.cp-who .ava{cursor:pointer; opacity:.55; transition:transform .12s ease;}
.cp-who .ava.sel{opacity:1; transform:scale(1.12);}
.cp-opt{
  position:relative; padding:5px 11px 4px; font-family:inherit; font-size:.9rem;
  background:none; border:1.5px solid var(--pencil-faint); border-radius:var(--r-pill);
  color:var(--graphite-soft); cursor:pointer;
}
.cp-opt.sel{color:var(--amber); border-color:var(--amber);}
.cp-opt.cp-full{border-style:dashed; margin-left:auto;}
.cp-opt:hover{border-color:var(--graphite); color:var(--graphite);}

/* ── живое превью разбора: пунктирная карточка над композером ── */
.cp-preview{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:9px 13px; margin:0 0 8px; opacity:.94;
}
.cp-preview .cb{width:20px; height:20px; flex:none; opacity:.5; position:relative;}
.cp-preview .cb svg{width:100%; height:100%;}
.cp-preview .tx{
  font-size:.98rem; flex:1; min-width:0; position:relative;
  /* длинный (надиктованный) титул виден, а не режется в одну строку;
     кламп на 2 — компактность, полный текст всегда в поле ввода ниже */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
.cp-preview .chips{display:flex; gap:6px; flex:none; position:relative;}
.cp-preview .chip{
  font-size:.8rem; color:var(--amber); cursor:pointer; white-space:nowrap;
  border:none; background:none; font-family:inherit; padding:2px 2px 1px;
}
.cp-preview .who{width:22px; height:22px; flex:none; cursor:pointer; position:relative;}
.cp-preview .who .ava{width:22px; height:22px; font-size:.75rem;}

/* Контент дока приподнят над карандашными подложками. :not(.cp-mic) — иначе
   это правило (позже в каскаде, та же специфичность) съедало position:absolute
   мика: он вставал в флекс-поток и «съезжал» на своём translateY(-50%). */
.cp-plus > svg, .cp-field > :not(.cp-mic){position:relative;}

/* доска не прячет хвост списка под доком: клиренс = высота плашки с композером
   (16+48+12+64+12) + отступ снизу (10) + запас (fade полупрозрачен, под него можно) */
#board{padding-bottom:calc(176px + var(--safe-b));}

/* ── Карандашик (fixed, вне экранов): виден на «Задачах» и «Профиле».
   На Шкафу свой угловой маскот, на Календаре не мешаем гантам. До первого
   switchView атрибута data-view нет — это доска (стартовая вкладка). ── */
body[data-view="shelf"] .mascot,
body[data-view="calendar"] .mascot{display:none;}

/* Экран входа (лист 15) рисует свой карандашик из-за угла карточки — фиксиро-
   ванный маскот тут был бы вторым карандашом на экране и советовал бы про доску,
   которой ещё не видно. body.logged-out ставит showLogin(), снимает start(). */
body.logged-out .mascot{display:none;}

/* на доске маскот взлетает выше единой плашки (композер+таб-бар) */
body:not([data-view]) .mascot,
body[data-view="board"] .mascot{bottom:calc(172px + var(--safe-b));}

/* Широкий экран, доска: карандашик стоит СПРАВА ОТ дока/тап-бара в свободном
   поле — ноги на одной линии с верхней кромкой Add, на кнопки не наезжает
   (левый край = правый край дока 50vw+260 + 10px зазор). На телефоне/планшете
   медиа молчит — маскот остаётся ВЫШЕ Add. На «Профиле» дока нет — маскот
   живёт над тап-баром на дефолтных bottom (tabbar.css) и right (tasks.css). */
@media (min-width: 980px){
  body:not([data-view]) .mascot,
  body[data-view="board"] .mascot{
    bottom:calc(150px + var(--safe-b));
    right:calc(50vw - 330px);
  }
}

/* ── клавиатура открыта (телефон): бар прячем, док прижимаем к клавиатуре ──
   body.kb-open ставит js/composer.js по visualViewport; сам bottom дока
   выставляется инлайном (высота клавиатуры). Подпись в этом режиме — лишняя. */
body.kb-open .sk-tabbar{display:none;}    /* клавиатура: плашка = только композер */
body.kb-open .sk-dock-fade{display:none;}
body.kb-open .cp-dock{margin-bottom:0;}

@media (max-width:639px){
  .sk-dock{left:8px; right:8px;}          /* поля экрана 8; высоты 48 — канон, не жмём */
  .cp-add{width:64px; font-size:1.25rem;} /* Add «как у нас», компактный · 64 кратно 4 */
  .cp-field{padding-right:44px;}
}

@media (prefers-reduced-motion: reduce){
  .cp-mic.rec{animation:none;}
  .cp-plus svg, .cp-plus, .cp-add, .cp-who .ava{transition:none;}
}