/* Team cabinet (frontend/team.html/js) — layered on top of app.css (brand
   vars, .card/.status/.media, .btn, .toast) and projects.css (.field-label/
   .field-input/.fp-box/.error-box, reused here). Only what's actually
   specific to this page lives here. */

.team-login-box{max-width:420px;margin:18px auto 0}
.team-login-error{margin-top:12px}

.team-empty{margin:40px 20px;text-align:center;color:var(--muted);font-size:14px}

/* Раздел "Комментарии" (заглушка — реальная лента и разбор по тональности
   ещё не подключены, см. team.js openTeamCommentsView). */
.team-comments-empty{max-width:420px;margin:48px auto;padding:0 20px;text-align:center}
.team-comments-empty-icon{font-size:36px;margin-bottom:14px}
.team-comments-empty-text{margin:0 0 18px;color:var(--ink);font-size:14px;line-height:1.5}
.team-comments-legend{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.tc-tag{display:inline-block;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:700;text-align:left}
.tc-tag.tc-positive{background:#E1F3E5;color:#216A39}
.tc-tag.tc-neutral{background:#F2F4F4;color:#33413F}
.tc-tag.tc-negative{background:#FBE0E0;color:#A12E2E}
.team-comments-empty-sub{margin:0;color:var(--muted);font-size:12.5px}

/* Фильтр-чипы по статусам: все включены по умолчанию; статусы, где нужны
   действия ответственного (В ПРОЦЕССЕ, КОРРЕКТИРОВКА) — тёплым цветом,
   остальные (НА СОГЛАСОВАНИИ, СДАЛИ, ЗАПЛАНИРОВАНО) — серым. */
/* Фильтр по проекту — над списком/календарём, видим и там, и там (см.
   #teamProjectFilterRow в team.html, вне #teamListView/#teamCalendarView). */
.team-project-filter{padding:4px 12px 10px}
.team-project-filter select{max-width:280px}
.team-sort-row{display:flex;align-items:center;gap:8px;padding:4px 12px 6px}
.team-sort-label{font-size:13px;opacity:.7}
.team-sort-row select{max-width:200px}
.team-filters{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 12px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;color:var(--muted);cursor:pointer;letter-spacing:.01em}
.chip.need.active{background:#FFF1EF;border-color:#F0C4BF;color:#B4483F}
.chip.wait.active{background:#EDEFEF;border-color:#DDE1E1;color:#4B5654}
.chip:not(.active){opacity:.45}

/* Фильтр-чипы по соцсети (мультивыбор, задача 2026-09-28) — та же строка,
   что и .team-filters, но цвет каждого чипа берётся из SOCIAL_MAP через
   инлайновую переменную --net-color (см. renderNetworkFilterOptions в
   team.js), чтобы не заводить отдельный CSS-класс на каждую сеть. Видим и
   над списком, и над календарём (см. #teamNetworkFilterRow в team.html,
   вне #teamListView/#teamCalendarView — тот же принцип, что и у фильтра
   по проекту). */
.team-network-filter{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 12px}
.chip.net-chip.active{background:var(--net-color);border-color:var(--net-color);color:#fff}

/* «Выбрать» — массовые операции, общие для календаря И перечня карточек
   (team.js: setSelectMode, deleteSelectedTasks — по прямому запросу
   пользователя, 2026-09-25: «а теперь и в перечне карточек, но только для
   админа»). В календаре кнопка живёт третьим элементом в .cal-header
   (app.css: display:flex;justify-content:space-between — трогать сам
   .cal-header не нужно, он общий с клиентским календарём в app.js); в
   перечне — тот же класс, но отдельно позиционирована (.team-list-select-
   toggle/-bar ниже), т.к. там нет готового header-flex-ряда. Видна только
   админам (см. showApp() в team.js). */
.cal-select-toggle{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:800;color:var(--ink);cursor:pointer}
/* «Ссылка клиенту» — по прямому запросу 2026-10-28 ("незаметна! сделай
   красиво! как дизайнер!"): в отличие от прочих кнопок в .cal-header
   (серые, нейтральные) эта — единственное действие, которое напрямую
   радует клиента, так что ей нужен отдельный, заметный вид — градиент в
   фирменном teal + мягкое свечение + лёгкий "живой" hover, а не ещё одна
   серая кнопка в ряду. Иконка — отдельный span, чтобы искрой анимировать
   только её при наведении, не дёргая весь текст.*/
.cal-share-btn{flex:0 0 auto;border:0;border-radius:999px;padding:7px 15px 7px 12px;font-size:12px;font-weight:800;letter-spacing:.01em;color:#fff;cursor:pointer;background:linear-gradient(135deg,#00605B,#3FA98F);box-shadow:0 2px 10px rgba(0,70,67,.38),0 0 0 1px rgba(0,70,67,.12);transition:transform .15s ease,box-shadow .15s ease;display:inline-flex;align-items:center;gap:5px}
.cal-share-btn:hover{transform:translateY(-1px) scale(1.035);box-shadow:0 5px 16px rgba(0,70,67,.5),0 0 0 1px rgba(0,70,67,.15)}
.cal-share-btn:active{transform:translateY(0) scale(.97)}
.cal-share-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.cal-share-btn-icon{display:inline-block;transition:transform .25s ease}
.cal-share-btn:hover .cal-share-btn-icon{transform:rotate(18deg) scale(1.15)}
.cal-select-toggle.active{background:var(--ink-solid);border-color:var(--ink-solid);color:#fff}
.cal-select-bar{display:flex;align-items:center;gap:10px;margin:-4px 0 12px;padding:9px 12px;background:#F7F8F8;border:1px solid var(--line);border-radius:12px}
.cal-select-count{font-size:12px;font-weight:800;color:var(--ink);flex:1}
/* Тот же красный, что у .tm-delete-btn (одиночное удаление карточки) —
   единый визуальный язык "необратимо удаляет", не редактирует. */
.cal-select-delete-btn{border:1px solid #F0C4BF;background:#FFF3F1;color:#C8473F;border-radius:999px;padding:7px 13px;font-size:11.5px;font-weight:800;cursor:pointer}
.cal-select-delete-btn:hover{background:#FFE3DE}
.cal-select-delete-btn:active{background:#FBD5CE}
.cal-select-delete-btn:disabled{opacity:.5;cursor:default}
/* Позиционирование той же кнопки/бара над #teamList (нет готового header-
   ряда, в отличие от .cal-header в календаре). */
.team-list-select-toggle{margin:10px 12px 0;display:inline-flex}
.team-list-select-bar{margin:10px 12px}

/* Чекбокс выбора на карточке календаря в режиме "Выбрать" (см.
   checkboxHtml в renderTeamCalendarGrid) + подсветка выбранной карточки
   целиком. .cal-post само по себе — общий класс из app.css; расширяем его
   здесь, а не там, т.к. режим выбора существует только в кабинете команды. */
.cal-post.selected{background:rgba(0,70,67,.08);border-radius:6px;padding:1px 2px;margin:-1px -2px}
.cal-post-check{flex:0 0 auto;width:11px;height:11px;margin-top:2px;border:1.5px solid #C7CECD;border-radius:50%;background:#fff}
.cal-post-check.checked{background:var(--accent);border-color:var(--accent);position:relative}
.cal-post-check.checked::after{content:"";position:absolute;left:2.5px;top:0px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(40deg)}

/* Тот же чекбокс, но на карточке перечня (.team-task, см. app.css/team.css
   выше) — крупнее (16px), т.к. сама карточка заметно больше, чем .cal-post
   в клетке календаря; абсолютно спозиционирован в правый верхний угол,
   чтобы не разъезжаться с существующей flex-раскладкой .team-task-top. */
.team-task{position:relative}
.team-task-check{position:absolute;top:14px;right:16px;width:16px;height:16px;border:1.5px solid #C7CECD;border-radius:50%;background:#fff}
.team-task-check.checked{background:var(--accent);border-color:var(--accent)}
.team-task-check.checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}
.team-task.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;background:#F2F8F7}

.team-list{display:grid;gap:12px;padding:4px 12px 32px}
/* Same reasoning as .proj-list in projects.css — the page's own max-width
   is already widened there (projects.css, loaded before this file), this
   just lets the task cards actually use that room as a grid instead of one
   long single column. */
@media(min-width:860px){
  .team-list{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));align-items:start}
}

/* Read-only task row for phase 1 — title/project/status/date only, no media,
   no actions yet. Deliberately its own (simpler) shape rather than reusing
   .card wholesale: the client-facing .card is built around a media carousel
   and swipe-to-approve, neither of which applies here. */
.team-task{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.team-task-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.team-task-title{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.3;min-width:0;display:flex;align-items:flex-start;gap:6px}
.team-task-project{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.team-task-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
/* Статус — над датой, прижато к правому краю карточки. */
.team-task-meta{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.team-task-status{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.team-task-date{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.02em}
/* Горящая задача — требующая действий ответственного с дедлайном ≤3 дня или
   просроченная (аналог .card.urgent в кабинете клиента). */
.team-task.urgent{border-color:var(--urgent);box-shadow:0 0 0 2px var(--urgent),0 10px 26px rgba(255,95,96,.28);background:#FFF5F4}
/* «Задача» (work_tasks) среди постов в общем списке /team и /tool — тот же
   .team-task, но зелёное свечение ПОД карточкой (не рамка вокруг, как у
   .urgent выше) — прямой запрос пользователя 2026-10-29: "выделим
   зеленоватым свечением под карточкой", чтобы отличать от постов на
   глаз, не трогая форму/контраст самой карточки. */
.team-task.wt-card{box-shadow:0 14px 28px -6px rgba(31,122,82,.35)}
/* Статус, где нужны действия ответственного (В ПРОЦЕССЕ / КОРРЕКТИРОВКА). */
.status.active{background:#FFE8E2;color:#C94F2E}
/* Internal-only statuses (not one of the 5 client-facing ones) don't have a
   dedicated color in app.css's .status.* — this neutral fallback covers them
   (e.g. "В процессе", "ТЗ РАЙТЕРУ") without inventing a whole new palette. */
.status.internal{background:#EDEFEF;color:#4B5654}

/* Модалка — полноценная карточка поста: шапка (статус/дата/соцсеть) +
   вкладки (Медиа/Текст/ЧАТ КОМАНДЫ/Чат с клиентом/Предпросмотр поста). */
.tm-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}
.tm-backdrop{position:absolute;inset:0;background:rgba(15,25,24,.45)}
.tm-card{position:relative;background:#fff;border-radius:26px 26px 0 0;max-width:640px;width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 -16px 50px rgba(15,25,24,.25)}
@media(min-width:700px){
  .tm-modal{align-items:center;padding:20px}
  .tm-card{border-radius:26px;max-height:88vh}
}
.tm-close{position:absolute;top:14px;right:14px;z-index:2;border:0;background:#F2F4F4;border-radius:999px;width:32px;height:32px;font-size:14px;cursor:pointer;color:#33413F}
.tm-close:active{background:#E4E8E8}

/* --- Шапка: проект, название (+карандаш), пилюли статуса/даты/соцсети --- */
.tm-head{padding:18px 52px 14px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.tm-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tm-project{font-size:14px;font-weight:850;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;margin-bottom:4px}
/* Ссылка MM ID на строке проекта, прижата к правому краю (под крестиком) —
   клик копирует ссылку на карточку, без перехода (см. copy-card-link). */
.tm-card-link{font-size:9px;line-height:1.4}
.tm-title-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px}
.tm-title{font-size:18px;font-weight:850;line-height:1.3;letter-spacing:-.01em;flex:1;min-width:0}
.tm-title-edit-btn{flex:0 0 auto;border:0;background:#F2F4F4;border-radius:999px;width:28px;height:28px;font-size:12px;color:#33413F;margin-top:1px}
.tm-title-editor{display:flex;gap:8px;align-items:flex-start}
.tm-title-editor textarea{flex:1;border:1px solid var(--line);border-radius:12px;padding:9px 11px;font:inherit;font-size:15px;font-weight:750;resize:vertical;min-height:44px;outline:none;background:var(--card);color:var(--ink)}
.tm-title-editor textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,70,67,.08)}
.tm-title-editor .tm-mini-btn{flex:0 0 auto}

.tm-pills{display:flex;flex-wrap:wrap;gap:8px}
.tm-pill-wrap{position:relative}
.tm-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap}
.tm-pill .tm-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.tm-pill.tm-status-pill.need{background:#FFE8E2;border-color:#F0C4BF;color:#C94F2E}
.tm-pill.tm-status-pill.need .tm-pill-dot{background:#C94F2E}
.tm-pill.tm-status-pill.wait{background:#EDEFEF;border-color:#DDE1E1;color:#4B5654}
.tm-pill.tm-status-pill.wait .tm-pill-dot{background:#4B5654}
.tm-pill.tm-network-pill.empty{color:var(--muted)}

/* «Удалить» — небольшая красная кнопка в шапке карточки (по прямому
   запросу, 2026-09-08). Отодвинута в конец ряда пилюль (margin-left:auto),
   чтобы не путалась со статусом/датой/соцсетью — она не редактирует
   карточку, а необратимо удаляет её (подтверждение — см. confirm() в
   team.js, действие спрашивает разрешение ПЕРЕД вызовом API). */
.tm-delete-btn{
  display:inline-flex;align-items:center;gap:5px;
  margin-left:auto;
  border:1px solid #F0C4BF;
  background:#FFF3F1;
  color:#C8473F;
  border-radius:999px;
  padding:7px 12px;
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
}
.tm-delete-btn:hover{background:#FFE3DE}
.tm-delete-btn:active{background:#FBD5CE}
.tm-delete-btn:disabled{opacity:.55;cursor:default}

.tm-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:5;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 34px rgba(15,25,24,.16);padding:8px;min-width:210px;max-height:60vh;overflow:auto}
.tm-pop-option{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:10px;padding:8px 9px;font-size:13px;font-weight:700;color:var(--ink)}
.tm-pop-option:hover,.tm-pop-option:active{background:#F2F4F4}
.tm-pop-option .tm-pill-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.tm-pop-option.selected{background:#EAF3F1;color:var(--accent)}

/* --- Пилюля даты: попап содержит мини-календарь на месяц --- */
.tm-cal-pop{min-width:260px;padding:12px}
.tm-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tm-cal-nav-btn{border:1px solid var(--line);background:#fff;border-radius:9px;width:26px;height:26px;font-size:14px;font-weight:800;line-height:1}
.tm-cal-title{font-weight:850;font-size:12.5px}
.tm-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px;font-size:9.5px;font-weight:800;color:var(--muted);text-align:center}
.tm-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.tm-cal-day{position:relative;border:1px solid transparent;background:#F7F8F8;border-radius:8px;height:32px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:750;color:var(--ink)}
.tm-cal-day.other-month{opacity:.35}
.tm-cal-day.today{border-color:var(--accent)}
.tm-cal-day.selected{background:var(--accent);color:#fff}
.tm-cal-day.busy:not(.selected)::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--urgent)}
.tm-cal-day:disabled{opacity:.3;cursor:default}
.tm-cal-legend{margin-top:8px;font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.tm-cal-legend .dot{width:5px;height:5px;border-radius:50%;background:var(--urgent);display:inline-block}

/* --- Вкладки + аватар ИИ-генератора на том же уровне --- */
.tm-tabbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);flex:0 0 auto;position:relative}
.tm-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.tm-tabs::-webkit-scrollbar{display:none}
.tm-tab{flex:0 0 auto;border:0;background:transparent;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}
.tm-tab.active{background:var(--ink-solid);color:#fff}
.tm-ai-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:2px solid var(--ai);padding:0;overflow:hidden;box-shadow:0 4px 12px rgba(155,90,246,.28)}
.tm-ai-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.tm-ai-pop{position:absolute;top:calc(100% - 4px);right:14px;z-index:6;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 34px rgba(15,25,24,.16);padding:12px;width:250px}
.tm-ai-pop-title{font-size:12.5px;font-weight:850;margin-bottom:8px}
.tm-ai-pop-option{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;font-size:12.5px;font-weight:750;color:var(--ink);margin-bottom:7px}
.tm-ai-pop-option:last-child{margin-bottom:0}
.tm-ai-pop-option:active{background:#F7F5FF}
.tm-ai-pop-icon{font-size:16px}

/* --- Тело: прокручиваемая область с панелями вкладок --- */
.tm-body{overflow-y:auto;padding:16px 20px 20px;flex:1;min-height:0}
.tm-pane{display:grid;gap:14px}

/* Медиа */
.tm-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tm-media-thumb{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#F2F4F4;border:1px solid var(--line)}
.tm-media-thumb img,.tm-media-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.tm-media-pos{position:absolute;top:5px;left:5px;background:rgba(23,32,31,.65);color:#fff;font-size:10px;font-weight:800;border-radius:999px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.tm-media-kind{position:absolute;bottom:5px;right:5px;background:rgba(23,32,31,.65);color:#fff;font-size:9px;font-weight:800;border-radius:6px;padding:2px 5px}
.tm-media-link-badge{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#33413F;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.tm-media-link-badge.copied{background:var(--accent);color:#fff}
/* Большой файл (2026-10-15) — ссылка на полноразмерный оригинал во внешнем
   хранилище проекта; свободный угол (низ-лево — верх занят .tm-media-pos/
   .tm-media-link-badge, низ-право — .tm-media-kind). */
.tm-media-full-badge{position:absolute;bottom:5px;left:5px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#33413F;box-shadow:0 2px 6px rgba(0,0,0,.18);text-decoration:none}
.tm-media-empty{grid-column:1/-1;background:#F7F8F8;border:1px dashed #C7CECD;border-radius:16px;padding:26px 14px;text-align:center;color:var(--muted);font-size:12.5px}
.tm-media-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tm-media-toolbar-title{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.tm-reorder-toggle{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:800;color:var(--ink)}
.tm-reorder-list{display:grid;gap:6px}
.tm-reorder-row{display:flex;align-items:center;gap:8px;background:#F7F8F8;border-radius:12px;padding:6px 8px}
.tm-reorder-thumb{width:38px;height:38px;border-radius:8px;overflow:hidden;flex:0 0 auto;background:#E9ECEB}
.tm-reorder-thumb img,.tm-reorder-thumb video{width:100%;height:100%;object-fit:cover}
.tm-reorder-name{flex:1;min-width:0;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-reorder-btns{display:flex;gap:4px}
.tm-mini-btn{border:1px solid var(--line);background:#fff;border-radius:8px;width:26px;height:26px;font-size:12px;color:var(--ink)}
.tm-mini-btn:disabled{opacity:.35}
.tm-mini-btn-danger{border-color:var(--urgent);color:var(--urgent)}

/* Текст + ключевые слова */
.tm-field-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px}
.tm-textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 13px;font:inherit;font-size:13.5px;line-height:1.5;resize:vertical;min-height:120px;outline:none;background:var(--card);color:var(--ink)}
.tm-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,70,67,.08)}
.tm-keywords-textarea{min-height:70px}
.tm-save-row{display:flex;justify-content:flex-end;gap:8px}
.tm-save-row .btn{padding:9px 16px;font-size:12.5px;border-radius:11px}

/* Стикеры клиента (кастомные эмодзи, кнопка «🎟 Стикер» у текста поста) —
   всплывающая панель с миниатюрами, вставляет маркер в textarea (см.
   insertSticker() в team.js). .tm-sticker-inline — та же маленькая картинка
   внутри предпросмотра поста (captionWithStickers()), что и у клиента
   (app.css .sticker-inline) — размер подогнан по тому же принципу. */
.tm-sticker-picker{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card);max-height:260px;overflow-y:auto}
.tm-sticker-pack-group{margin-bottom:10px}
.tm-sticker-pack-group:last-child{margin-bottom:0}
.tm-sticker-pack-title{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px}
.tm-sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.tm-sticker-tile{aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:#F2F4F4;display:grid;place-items:center;cursor:pointer;padding:4px}
.tm-sticker-tile img{width:100%;height:100%;object-fit:contain;display:block}
.tm-sticker-empty{font-size:12px;color:var(--muted);text-align:center;padding:4px}
.tm-sticker-inline{width:1.1em;height:1.1em;vertical-align:-0.2em;object-fit:contain}

/* Живой предпросмотр текста поста прямо под textarea (см. renderTextPane()
   в team.js) — textarea всегда хранит маркеры [[sticker:id:emoji]] как
   читаемый сырой текст (это нормально и ожидаемо при редактировании), но
   без этого блока единственный способ увидеть, что стикер и правда
   отрисуется картинкой — переключиться на вкладку «Предпросмотр». Этот
   блок обновляется на каждый input (включая Ctrl+V и клик по стикеру из
   пикера — см. updateCaptionLivePreview() в team.js), поэтому после вставки
   готового поста с маркерами стикеров сразу видно результат, не уходя со
   вкладки «Текст». */
/* Прямой запрос 2026-10-20: раньше этот блок дублировал ВЕСЬ текст поста
   целиком (видимый, хоть и без стикеров, у 90% карточек) — теперь он
   скрыт, пока в тексте нет [[sticker:...]] (см. renderTextPane/
   updateCaptionLivePreview в team.js), и при появлении стикера выглядит
   как отдельная подсказка, а не второе текстовое поле: мягкий акцентный
   фон вместо var(--card), пунктирная рамка, ограничение по высоте со
   своим скроллом — даже у длинного текста со стикером блок не растягивает
   карточку. */
.tm-caption-live-preview{margin-top:8px;border:1px dashed rgba(0,70,67,.3);border-radius:12px;padding:9px 12px;background:rgba(0,70,67,.05);font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:140px;overflow-y:auto}
.tm-caption-live-preview-empty{color:var(--muted);font-style:italic}

/* Чаты (команда / клиент) */
.tm-chat{display:flex;flex-direction:column;gap:10px}
.tm-chat-empty{color:var(--muted);font-size:12.5px;text-align:center;padding:18px 0}
.tm-chat-msg{background:#F7F8F8;border-radius:14px;padding:9px 12px;max-width:88%}
/* 2026-10-16, по прямому замечанию пользователя («пропало выделение
   цветом») — "своё" сообщение (мои/агентство) теперь залито акцентным
   цветом (как уже было у клиентского чата в app.css's .client-chat-msg.mine),
   а не едва заметным оттенком того же серого — иначе две стороны диалога
   не различить на глаз. */
.tm-chat-msg.mine{background:var(--accent);align-self:flex-end;color:#fff}
.tm-chat-msg-author{font-size:10.5px;font-weight:800;color:var(--muted);margin-bottom:2px}
.tm-chat-msg.mine .tm-chat-msg-author{color:rgba(255,255,255,.75)}
.tm-chat-msg-author.cerberus{color:#7A4D00;background:#FFF1D6;border:1px solid #F3C76A;border-radius:5px;padding:1px 6px;display:inline-block}
.tm-chat-msg-text{font-size:13px;line-height:1.45;white-space:pre-wrap}
.tm-chat-msg-time{font-size:9.5px;color:var(--muted);margin-top:3px}
.tm-chat-msg.mine .tm-chat-msg-time{color:rgba(255,255,255,.72)}
.tm-chat-msg.system{background:transparent;align-self:center;max-width:100%;text-align:center;color:var(--muted);font-size:11px;padding:2px 0}
/* Ограничение загрузки (хранилище проекта не настроено / диск не
   настроен) — акцентный баннер поверх вкладок модалки задачи, не
   исчезающий самостоятельно (в отличие от toast()), см. showLimitBanner()
   в team.js. Тот же стиль, что .tech-works-banner в app.css. */
.tm-limit-banner{margin:0 20px;padding:11px 14px;background:#FFF8E1;border:1px solid #F0C419;border-radius:14px;display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.45;color:#5B4A00}
.tm-limit-banner span{flex:1}
.tm-limit-banner button{flex:0 0 auto;border:0;background:transparent;color:#5B4A00;font-size:13px;cursor:pointer;padding:2px}

/* Напоминание команде, что публикации ведутся через Согласователь (эту
   систему), отдельно от Mattermost (2026-10-18, прямой запрос). Не
   предупреждение — информационный акцент (цвет var(--accent), а не
   жёлтый у .tm-limit-banner выше); закрывается один раз навсегда на
   этом устройстве/браузере (localStorage, см. approvalNoticeDismissed()
   в team.js) — не нагоняет повторно того, кто уже прочитал. */
.team-notice-banner{margin:0 16px 12px;padding:11px 14px;background:rgba(0,70,67,.07);border:1px solid rgba(0,70,67,.22);border-radius:14px;display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.45;color:var(--ink)}
.team-notice-banner span{flex:1}
.team-notice-banner button{flex:0 0 auto;border:0;background:transparent;color:var(--accent);font-size:13px;cursor:pointer;padding:2px}

/* Оценка замечания Цербера специалистом («Согласен/Отчасти/Не согласен»,
   см. cerberusFeedbackHtml() в team.js) — показывается только под
   сообщениями самого Цербера, прямо под текстом замечания. Цвета кнопок
   намеренно светофорные (зелёный/жёлтый/красный) — быстро читаются даже
   не вникая в подпись. .tm-cerberus-fb-btn.active.bad дополнительно
   подсвечен: это и есть признак "пост пропустят при следующей обработке",
   должно быть заметно, а не теряться среди остальных кнопок. */
.tm-cerberus-feedback{margin-top:8px;padding-top:8px;border-top:1px dashed #F3C76A}
.tm-cerberus-feedback-label{font-size:11px;font-weight:700;color:#7A4D00;margin-bottom:6px}
.tm-cerberus-feedback-btns{display:flex;gap:6px;flex-wrap:wrap}
.tm-cerberus-fb-btn{font-size:11.5px;font-weight:700;border:1px solid var(--line);border-radius:9px;padding:5px 10px;background:var(--card);color:var(--ink);cursor:pointer}
.tm-cerberus-fb-btn:disabled{opacity:.6;cursor:default}
.tm-cerberus-fb-btn.active.good{background:#E3F3E9;border-color:#9FCDB3;color:#1F6B44}
.tm-cerberus-fb-btn.active.partial{background:#FFF1D6;border-color:#F3C76A;color:#7A4D00}
.tm-cerberus-fb-btn.active.bad{background:#FFE8E2;border-color:#F0C4BF;color:#C94F2E}
.tm-cerberus-feedback-status{font-size:10.5px;color:var(--muted);margin-top:6px}
.tm-chat-compose{display:flex;flex-direction:column;gap:8px}
.tm-chat-compose-row{display:flex;gap:8px;align-items:flex-end}
.tm-chat-compose textarea{flex:1;border:1px solid var(--line);border-radius:14px;padding:10px 12px;font:inherit;font-size:13px;resize:none;min-height:40px;max-height:120px;outline:none;background:var(--card);color:var(--ink)}
.tm-chat-compose textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,70,67,.08)}
.tm-chat-send{flex:0 0 auto;border:0;background:var(--accent);color:#fff;border-radius:12px;width:40px;height:40px;font-size:15px}
.tm-chat-attach{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--accent);border-radius:12px;width:40px;height:40px;font-size:17px;display:grid;place-items:center;cursor:pointer}
.tm-chat-attach:active{background:#F2F4F4}
.tm-chat-pending-img{position:relative;display:inline-flex;width:60px;height:60px;border-radius:12px;overflow:hidden;background:#F2F4F4;border:1px solid var(--line)}
.tm-chat-pending-img img{width:100%;height:100%;object-fit:cover;display:block}
.tm-chat-pending-img.uploading{opacity:.5}
.tm-chat-pending-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border:0;border-radius:999px;background:rgba(15,25,24,.72);color:#fff;font-size:11px;line-height:1;display:grid;place-items:center;cursor:pointer}
.tm-chat-img{display:block;max-width:170px;max-height:170px;border-radius:12px;margin-top:6px;cursor:zoom-in;object-fit:cover}
.tm-client-readonly-note{font-size:11px;color:var(--muted);text-align:center}

/* Полноэкранный просмотр фото из чата (openLightbox в team.js/app.js) — до
   80% ширины/высоты экрана; закрывается крестиком, кликом по фону или
   аппаратной кнопкой "назад" (см. history.pushState в openLightbox). */
.lightbox{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(8,14,13,.88)}
.lightbox img{position:relative;max-width:80vw;max-height:80vh;border-radius:12px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:17px;display:grid;place-items:center;cursor:pointer;z-index:1}

/* Предпросмотр поста */
.tm-preview-phone{background:#0F1917;border-radius:22px;padding:12px;max-width:320px;margin:0 auto}
.tm-preview-inner{background:#fff;border-radius:16px;overflow:hidden}
.tm-preview-media{aspect-ratio:1;background:#F2F4F4}
.tm-preview-media img,.tm-preview-media video{width:100%;height:100%;object-fit:cover;display:block}
.tm-preview-text{padding:12px}
.tm-preview-social{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#fff;border-radius:999px;padding:3px 8px;margin-bottom:7px}
.tm-preview-caption{font-size:12.5px;line-height:1.5;white-space:pre-wrap}
.tm-preview-empty{color:var(--muted);font-size:12px;text-align:center}
.tm-preview-keywords{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);font-size:11px;line-height:1.5;color:var(--muted);white-space:pre-wrap}

/* Иконки-ссылки в шапке — «Админка»/«Статистика» здесь, «Статистика»/
   «CEO-дашборд» на странице /admin (см. projects.html) — теперь общий стиль
   .head-icon-link, объявлен в app.css (грузится на всех трёх страницах),
   чтобы не дублировать в каждом файле. */

/* «Сохранено» — короткая вспышка рамки вокруг поля/пилюли, которую только
   что сохранили (flashSaved() в team.js). Применяется точечно к самому
   элементу, а не отдельным попапом — понятно, что именно сохранилось, без
   лишнего модального шума на каждое маленькое действие. */
@keyframes tm-flash-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,70,67,0)}
  18%{box-shadow:0 0 0 3px rgba(0,70,67,.4)}
  100%{box-shadow:0 0 0 0 rgba(0,70,67,0)}
}
.tm-flash-save{animation:tm-flash-pulse 1100ms ease-out}

/* Праздничная вспышка при переходе в статус "Опубликовано"
   (celebratePublish() в team.js) — несколько мелких искр-эмодзи
   разлетаются от пилюли статуса и гаснут. Сознательно без фона/оверлея/
   конфетти на весь экран — по прямому запросу "не очень сильно, но
   молодец". pointer-events:none — вспышка декоративная, не должна
   перехватывать клики. */
.tm-celebrate-burst{position:fixed;z-index:60;pointer-events:none}
.tm-celebrate-spark{position:absolute;top:0;left:0;font-size:14px;line-height:1;transform:translate(-50%,-50%);animation:tm-celebrate-spark 850ms ease-out forwards;will-change:transform,opacity}
@keyframes tm-celebrate-spark{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--tm-sx)), calc(-50% + var(--tm-sy))) scale(.5);opacity:0}
}

/* --- Загрузка медиа: drag-and-drop + выбор файла с устройства ---
   Одна карточка: зона перетаскивания сверху, поле для готовой ссылки
   снизу — визуально один блок, а не два разных. */
.tm-attach-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.tm-dropzone{position:relative;padding:22px 16px 18px;text-align:center;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;align-items:center;gap:7px}
.tm-dropzone:hover{background:#F7F8F8}
.tm-dropzone.drag-over{background:#EAF3F1}
.tm-dropzone-icon{width:42px;height:42px;border-radius:999px;background:#EAF3F1;color:var(--accent);display:grid;place-items:center}
.tm-dropzone-icon svg{width:21px;height:21px;display:block}
.tm-dropzone-title{font-size:12.5px;font-weight:800;color:var(--ink)}
.tm-dropzone-hint{font-size:11px;color:var(--muted);max-width:230px;line-height:1.4}
.tm-dropzone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.tm-dropzone.uploading{opacity:.55;pointer-events:none}
.tm-attach-link-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#FBFCFC}
.tm-attach-link-label{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.tm-attach-link-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:8px 10px;font-size:12.5px;outline:none;font:inherit;background:#fff}
.tm-attach-link-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,70,67,.08)}
.tm-attach-link-btn{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer}
.tm-attach-link-btn svg{width:16px;height:16px;display:block}

/* --- «Запланировать публикацию» — плавающая кнопка + модалка создания ---
   Единственное действие в этом кабинете, которое заводит НОВУЮ карточку
   (а не редактирует существующую, как всё остальное здесь) — поэтому
   намеренно самое заметное: фирменный рыжий (--kf-coral) градиент + мягкое
   дыхание тени, вместо ещё одной серой пилюли рядом со статусом/датой.
   --spark (жёлтый) — тёплым отсветом в пульсе тени, второй акцент поверх
   кораллового, тоже до этого нигде не был подключён (см. app.css). */
.fab-create{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:0;
  border-radius:999px;
  padding:15px 22px 15px 15px;
  background:linear-gradient(120deg, #EE8145 0%, var(--kf-coral) 55%, #C8473F 140%);
  color:#fff;
  font-size:13.5px;
  font-weight:850;
  letter-spacing:.005em;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(223,97,98,.38), 0 3px 10px rgba(223,97,98,.26);
  animation:fab-breathe 3.4s ease-in-out infinite;
  transition:transform .18s ease, box-shadow .18s ease;
}
.fab-create:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 34px rgba(223,97,98,.44), 0 4px 12px rgba(223,97,98,.3)}
.fab-create:active{transform:translateY(0) scale(.97)}
.fab-create-icon{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.26);
  font-size:17px;line-height:1;font-weight:900;
}
@keyframes fab-breathe{
  0%,100%{box-shadow:0 12px 28px rgba(223,97,98,.38), 0 3px 10px rgba(223,97,98,.26), 0 0 0 0 rgba(246,233,90,0)}
  50%{box-shadow:0 12px 28px rgba(223,97,98,.38), 0 3px 10px rgba(223,97,98,.26), 0 0 0 7px rgba(246,233,90,.22)}
}
@media (max-width:480px){
  .fab-create-label{display:none}
  .fab-create{padding:15px;gap:0}
}

.create-card{max-width:520px}
.create-body{padding:22px 22px calc(22px + env(safe-area-inset-bottom, 0px));flex:1;min-height:0;overflow-y:auto}
.create-head{text-align:center;margin-bottom:18px}
.create-head-icon{width:52px;height:52px;margin:0 auto 10px;border-radius:16px;background:linear-gradient(135deg, #FBEAE6, #FBF3D9);display:grid;place-items:center;font-size:24px}
.create-title{margin:0 0 6px;font-size:19px;font-weight:850;letter-spacing:-.01em}
.create-subtitle{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.create-form{display:flex;flex-direction:column}
.create-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.create-optional{text-transform:none;font-weight:600;color:var(--muted);letter-spacing:0}
.create-form textarea{margin-top:2px;min-height:90px}
.create-form .error-box{margin-top:14px;padding:11px 14px;font-size:12px}
.fab-create-submit{
  width:100%;
  margin-top:18px;
  border:0;
  border-radius:14px;
  padding:15px 12px;
  font-size:14px;
  font-weight:850;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(120deg, #EE8145 0%, var(--kf-coral) 55%, #C8473F 140%);
  box-shadow:0 10px 22px rgba(223,97,98,.32);
  transition:transform .15s ease, box-shadow .15s ease;
}
.fab-create-submit:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(223,97,98,.38)}
.fab-create-submit:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}

/* --- «Открыть чат» — вторая плавающая кнопка, тот же приём/стиль, что и
   «Запланировать публикацию» (см. .fab-create выше), но с двумя явными
   состояниями: обычная (спокойная, без пульса) — нет новых сообщений, и
   акцентная (фирменный рыжий градиент + дыхание тени, .fab-chat-unread) —
   есть непрочитанные (см. team.js's refreshChatStatus/updateChatButtonState,
   опрашивает GET /api/team/chat/status). Стоит НАД «Запланировать
   публикацию», а не рядом — на мобильной ширине рядом было бы тесно. */
.fab-chat{
  bottom:calc(82px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(120deg, #6B7674 0%, #4B5654 60%, #33403D 140%);
  box-shadow:0 10px 22px rgba(20,30,28,.28), 0 3px 8px rgba(20,30,28,.18);
  animation:none;
}
.fab-chat:hover{box-shadow:0 14px 28px rgba(20,30,28,.32), 0 4px 10px rgba(20,30,28,.2)}
.fab-chat.fab-chat-unread{
  background:linear-gradient(120deg, #EE8145 0%, var(--kf-coral) 55%, #C8473F 140%);
  box-shadow:0 12px 28px rgba(223,97,98,.38), 0 3px 10px rgba(223,97,98,.26);
  animation:fab-breathe 3.4s ease-in-out infinite;
}
.fab-chat.fab-chat-unread:hover{box-shadow:0 16px 34px rgba(223,97,98,.44), 0 4px 12px rgba(223,97,98,.3)}

/* --- Вкладки внутри модалки «Запланировать публикацию» — «Одиночный» /
   «Пакетный» (JSON-файл) / «Буфер обмена» (вставка из Google Таблиц) — по
   прямому запросу: импорт контент-плана должен жить внутри этой же кнопки/
   попапа, не отдельной FAB-кнопкой. Тот же pill-toggle приём, что и .chip
   выше, но крупнее — под заголовком модалки. Три вкладки вместо двух —
   чуть уже padding/шрифт, чтобы «Буфер обмена» не переносился на телефоне. */
.create-tabs{display:flex;gap:4px;margin-bottom:16px;background:#F2F4F4;border-radius:14px;padding:4px}
.create-tab{flex:1;border:0;background:transparent;border-radius:11px;padding:9px 6px;font-size:11.5px;font-weight:800;color:var(--muted);cursor:pointer;white-space:nowrap}
.create-tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(15,25,24,.1)}
.create-tab-panel[hidden]{display:none}

.bi-links-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:8px 0 2px}
.bi-example-link{display:inline-block;margin:0;font-size:12.5px;color:var(--kf-coral);font-weight:750;text-decoration:none}
.bi-example-link:hover{text-decoration:underline}
.bi-prompt-copy-btn{border:0;background:none;padding:0;cursor:pointer;font-family:inherit}
.bi-prompt-copy-btn.copied{color:var(--accent)}
.bi-hint{margin-top:2px}
.bi-results{margin-top:14px;padding:11px 14px;border-radius:12px;background:#F6F7F7;font-size:12.5px;line-height:1.7;max-height:220px;overflow:auto}
.bi-row-ok{color:#2E7D4F}
.bi-row-fail{color:#E0484A}
.bi-row-note{color:var(--muted);font-size:11.5px;margin:-2px 0 4px 18px}

/* --- Импорт «Буфер обмена» (вкладка createTabClipboard) — пошаговая
   инструкция + скриншот примера диапазона + область вставки. */
.cp-steps{margin:0 0 10px;padding-left:20px;font-size:12.5px;line-height:1.55;color:var(--ink)}
.cp-steps li{margin-bottom:4px}
.cp-example-img{display:block;max-width:100%;width:260px;margin:0 auto 14px;border-radius:12px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(15,25,24,.12)}
.cp-paste-area{min-height:130px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;white-space:pre}
.cp-paste-area:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,70,67,.08)}
.cp-parse-btn{margin-top:12px;width:100%;padding:11px 12px;border-radius:12px;font-size:13px;color:#fff;cursor:pointer;background:linear-gradient(120deg, #EE8145 0%, var(--kf-coral, #DF6162) 55%, #C8473F 140%);box-shadow:0 8px 18px rgba(223,97,98,.3);transition:transform .15s ease, box-shadow .15s ease}
.cp-parse-btn:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(223,97,98,.36)}
.cp-parse-btn:active{transform:translateY(0)}

/* --- Подтверждение разметки (по решению пользователя 2026-09-24: копируем
   ВСЕГДА только один столбец одного дня, без подписей строк — структура
   каждый раз одна и та же, но чтобы не создать карточку с перепутанными
   полями "на автомате", каждая вставленная строка размечается явно,
   пользователь может поправить в выпадающем списке перед созданием поста). */
.cp-confirm-section{margin-top:14px}
.cp-confirm-hint{font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.4}
.cp-confirm-rows{display:flex;flex-direction:column;gap:6px}
.cp-confirm-row{display:grid;grid-template-columns:132px 1fr;gap:8px;align-items:start;background:#F7F8F8;border-radius:10px;padding:7px 9px}
.cp-confirm-select{font:inherit;font-size:11.5px;font-weight:750;border:1px solid var(--line);border-radius:8px;padding:6px 7px;background:#fff;color:var(--ink)}
.cp-confirm-value{font-size:12px;line-height:1.4;color:var(--ink);white-space:pre-wrap;word-break:break-word;padding-top:6px;max-height:90px;overflow:auto}
.cp-confirm-value.empty{color:var(--muted);font-style:italic}

/* --- Панель чата команды — выезжает СБОКУ (справа), а не снизу как
   .tm-modal/.tm-card — по прямому запросу ("при нажатии на кнопку сбоку
   должна открыться панель"). Переиспользует .tm-chat-* словарь классов
   (сообщения/composer) из карточки задачи для визуальной консистентности. */
.chat-panel{position:fixed;inset:0;z-index:55;display:flex;justify-content:flex-end}
.chat-panel-backdrop{position:absolute;inset:0;background:rgba(15,25,24,.45)}
.chat-panel-card{
  position:relative;
  width:min(400px, 100vw);
  height:100%;
  background:var(--card);
  box-shadow:-16px 0 50px rgba(15,25,24,.25);
  display:flex;
  flex-direction:column;
  animation:chat-panel-slide-in .22s ease;
}
@keyframes chat-panel-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.chat-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 56px 14px 18px;border-bottom:1px solid var(--line)}
.chat-panel-title-wrap{display:flex;align-items:center;gap:10px;min-width:0}
.chat-panel-icon{font-size:19px;flex:0 0 auto}
.chat-panel-title{margin:0;font-size:15px;font-weight:850;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-panel-head .tm-close{position:absolute;top:14px;right:14px}
.chat-messages{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.chat-messages .tm-chat-msg{max-width:82%}
.chat-panel-compose{padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--line)}
@media (max-width:480px){
  .chat-panel-card{width:100vw}
}

/* Плавающий КОТЭ (2026-10-16, прямой запрос — "лапку сверху оставь, а
   самого котэ сделай как в my, масштабно и в углу") — левый нижний угол,
   чтобы не конкурировать с .fab-create/.fab-chat в правом. Картинка —
   готовый composited SVG с my.kontentferma (фон+огонёк+эффекты+реплика
   внутри, см. fetchMyPortalKote в backend), крупно. Виден только когда
   картинка реально пришла (team.js снимает [hidden] сам) — пустого места
   без кота в углу не остаётся. */
.kf-mascot-widget{
  position:fixed;
  left:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:39;
  display:block;
  border-radius:18px;
  box-shadow:0 14px 30px rgba(20,30,28,.22), 0 3px 8px rgba(20,30,28,.14);
  transition:transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
  line-height:0;
}
.kf-mascot-widget:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(20,30,28,.28), 0 4px 10px rgba(20,30,28,.18)}
.kf-mascot-img{display:block;width:260px;height:130px;object-fit:contain;background:#fff}
@media(max-width:600px){
  .kf-mascot-widget{left:10px}
  .kf-mascot-img{width:180px;height:90px}
}


/* ============================================================
   «Задачи» (work_tasks) — см. claude/kf-work-tasks-feature.md.
   Переиспользует .team-task/.team-list/.tm-modal/.tm-chat-* как есть;
   здесь — только то, чего не было: подзаголовок-переключатель, статус-пилюли
   3 состояний, чеклист подзадач, история, поле заголовка в хедере модалки.
   ============================================================ */
.wt-subnav{display:flex;gap:8px;padding:4px 16px 10px}
.wt-subnav-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:800;color:var(--muted);cursor:pointer}
.wt-subnav-btn.active{background:var(--ink-solid);border-color:var(--ink-solid);color:#fff}

.status.wt-todo{background:#EDEFEF;color:#4B5654}
.status.wt-in_progress{background:#FFE8E2;color:#C94F2E}
.status.wt-done{background:#E3F3EC;color:#1F7A52}

.wt-subtask-chip{font-size:11px;font-weight:800;color:var(--muted);background:#EDEFEF;border-radius:999px;padding:4px 9px}
.wt-subtask-chip.done{background:#E3F3EC;color:#1F7A52}

.wt-title-input{border:0;background:transparent;font-size:17px;font-weight:800;letter-spacing:-.02em;width:100%;padding:0;outline:none;font-family:inherit;color:var(--ink)}
.wt-title-input:focus{text-decoration:underline;text-decoration-color:var(--line)}

.wt-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.wt-overdue-note{color:#C94F2E;font-size:12.5px;font-weight:800;margin:-4px 0 12px}

.wt-status-row{display:flex;gap:8px;margin:6px 0 16px;flex-wrap:wrap}
.wt-status-btn{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 8px;font-size:12.5px;font-weight:800;color:var(--muted);cursor:pointer;text-align:center}
.wt-status-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

.wt-subtasks-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.wt-subtask-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.wt-subtask-row{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0;cursor:pointer}
.wt-subtask-row input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.wt-subtask-row.done span{color:var(--muted);text-decoration:line-through}
.wt-subtask-empty{color:var(--muted);font-size:12.5px;padding:4px 0}
.wt-add-subtask-form input{border:1px dashed var(--line);background:transparent}

.wt-history-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.wt-history-line{font-size:12px;color:var(--muted);padding:3px 0}
.wt-history-when{font-weight:800;color:var(--ink);margin-right:4px}

/* "Попап обучения при запуске новой функции" (прямой запрос 2026-11-02) —
   переиспользуемая карусель анонсов фич: .tm-modal/.tm-backdrop/.tm-card
   (общий язык модалок) + свои .ann-* классы для контента. Один показ может
   содержать несколько анонсов подряд (точки-пагинация), иллюстрация —
   простой CSS-мокап (без скриншотов), под каждый .illustration-ключ из
   announcements.js — свой блок разметки в JS (annIllustrationHtml()).
   См. openAnnouncementsModal()/ANN_* в team.js. */
.ann-card{max-width:420px}
.ann-body{padding:26px 22px 20px}
.ann-eyebrow{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--kf-coral);margin:0 0 8px}
.ann-title{font-size:19px;font-weight:800;margin:0 0 16px;line-height:1.32}
.ann-section{margin:0 0 14px}
.ann-section-label{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:0 0 4px}
.ann-section p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.ann-illustration{margin:6px 0 18px;border-radius:16px;background:var(--bg);border:1px solid var(--line);padding:20px 16px 18px;position:relative;overflow:hidden}
.ann-wish{margin:0 0 20px;font-size:13.5px;font-weight:700;text-align:center;color:var(--kf-green)}
.ann-dots{display:flex;justify-content:center;gap:6px;margin:0 0 16px}
.ann-dot{width:7px;height:7px;border-radius:999px;background:var(--line);transition:width .15s,border-radius .15s}
.ann-dot.active{background:var(--accent);width:18px;border-radius:999px}
.ann-actions{display:flex;gap:10px;align-items:center;justify-content:space-between}
.ann-skip{border:0;background:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:8px 4px}
.ann-next{border:0;background:var(--accent);color:#fff;font-weight:800;font-size:13.5px;border-radius:999px;padding:11px 24px;cursor:pointer}
.ann-next:active{opacity:.85}

/* Мокап "вкладка Задачи внутри карточки поста" (wt-post-link-gate). */
.ann-mock-tabs{display:flex;gap:6px;font-size:11px;margin-bottom:10px}
.ann-mock-tab{padding:6px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.ann-mock-tab.hot{background:var(--kf-green);color:#fff;border-color:var(--kf-green);box-shadow:0 0 0 3px rgba(0,70,67,.15)}
.ann-mock-arrow-row{display:flex;justify-content:center;margin:2px 0}
.ann-mock-arrow{font-size:20px;color:var(--kf-coral);animation:annBounce 1.1s ease-in-out infinite}
.ann-mock-caption{font-size:11px;color:var(--kf-coral);font-weight:700;text-align:center}
@keyframes annBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Мокап "задача в общем списке со свечением" (wt-list-merge). */
.ann-mock-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.ann-mock-row{height:28px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.ann-mock-row.glow{box-shadow:0 10px 20px -4px rgba(31,122,82,.45);border-color:rgba(31,122,82,.3)}

/* Мокап "поле images в пакетной загрузке" (wt-bulk-images). */
.ann-mock-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;line-height:1.65;color:var(--muted);margin-bottom:8px;white-space:pre}
.ann-mock-code .hl{color:var(--kf-green);font-weight:700;background:rgba(0,70,67,.08);border-radius:4px}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#12181A;
    --card:#1B2320;
    --ink:#ECEFED;
    --muted:#93A19C;
    --line:#2A3532;
    --accent:#3FA98F;
  }
  .tm-sticker-tile{background:#222525}
  .chip{background:#262222}
  .chip.need.active{background:#2E1C19;border-color:#4E302C}
  .chip.wait.active{background:#222626;border-color:#3A4040;color:#ECEEEE}
  .team-task{background:#262222}
  .team-task.urgent{background:#2E1B19}
  .team-task.wt-card{box-shadow:0 14px 28px -6px rgba(95,203,150,.3)}
  .status.active{background:#2E1D19}
  .status.internal{background:#222626;color:#ECEEEE}
  .tm-card{background:#262222}
  .tm-close{background:#222525;color:#ECEEEE}
  .tm-close:active{background:#292E2E}
  .tm-title-edit-btn{background:#222525;color:#ECEEEE}
  .tm-pill{background:#262222}
  .tm-pill.tm-status-pill.need{background:#2E1D19;border-color:#4E302C}
  .tm-pill.tm-status-pill.wait{background:#222626;border-color:#3A4040;color:#ECEEEE}
  .tm-popover{background:#262222}
  .tm-pop-option:hover,.tm-pop-option:active{background:#222525}
  .tm-pop-option.selected{background:#1E2927}
  .tm-cal-nav-btn{background:#262222}
  .tm-cal-day{background:#222626}
  .tm-ai-pop{background:#262222}
  .tm-ai-pop-option{background:#262222}
  .tm-ai-pop-option:active{background:#1D192E}
  .tm-media-thumb{background:#222525}
  .tm-media-link-badge{color:#ECEEEE}
  .tm-media-full-badge{color:#ECEEEE}
  .tm-media-empty{background:#222626}
  .tm-reorder-toggle{background:#262222}
  .tm-reorder-row{background:#222626}
  .tm-reorder-thumb{background:#292E2C}
  .tm-mini-btn{background:#262222}
  .tm-mini-btn-danger{background:#2E2020}
  .tm-chat-msg{background:#222626}
  .tm-chat-msg-author.cerberus{background:#332A17;border-color:#8A6D2A;color:#F2C45C}
  .tm-limit-banner{background:#332A17;border-color:#8A6D2A;color:#F2C45C}
  .tm-limit-banner button{color:#F2C45C}
  .team-notice-banner{background:rgba(63,169,143,.1);border-color:rgba(63,169,143,.35)}
  .tm-caption-live-preview{background:rgba(63,169,143,.08);border-color:rgba(63,169,143,.3)}
  .tm-cerberus-feedback{border-top-color:#8A6D2A}
  .tm-cerberus-feedback-label{color:#F2C45C}
  .tm-cerberus-fb-btn.active.good{background:#1C2E22;border-color:#3FA98F;color:#7FD3AE}
  .tm-cerberus-fb-btn.active.partial{background:#332A17;border-color:#8A6D2A;color:#F2C45C}
  .tm-cerberus-fb-btn.active.bad{background:#2E1D19;border-color:#4E302C;color:#E68A6B}
  .tm-chat-attach{background:#262222}
  .tm-chat-attach:active{background:#222525}
  .tm-chat-pending-img{background:#222525}
  .tm-preview-inner{background:#262222}
  .tm-preview-media{background:#222525}
  .tm-attach-card{background:#262222}
  .tm-dropzone:hover{background:#222626}
  .tm-dropzone.drag-over{background:#1E2927}
  .tm-dropzone-icon{background:#1E2927}
  .tm-attach-link-row{background:#212727}
  .tm-attach-link-row input{background:#262222}
  .tc-tag.tc-positive{background:#213626;color:#85DCA2}
  .tc-tag.tc-neutral{background:#222626;color:#ECEEEE}
  .tc-tag.tc-negative{background:#2E1919;color:#E58A8A}
  .chat-panel-card{background:#1B2320}
  .chat-panel-head{border-color:#2A3532}
  .chat-panel-compose{border-color:#2A3532}
  .tm-delete-btn{background:#2E1919;border-color:#4E302C;color:#E58A8A}
  .tm-delete-btn:hover{background:#3A211F}
  .tm-delete-btn:active{background:#452824}
  .cal-select-toggle{background:#262222;border-color:#3A4040;color:#ECEFED}
  .cal-share-btn{background:linear-gradient(135deg,#0A746D,#3FA98F);box-shadow:0 2px 12px rgba(63,169,143,.3),0 0 0 1px rgba(63,169,143,.25)}
  .cal-share-btn:hover{box-shadow:0 5px 18px rgba(63,169,143,.42),0 0 0 1px rgba(63,169,143,.3)}
  .cal-select-toggle.active{background:#ECEFED;border-color:#ECEFED;color:#12181A}
  .cal-select-bar{background:#1B2320;border-color:#2A3532}
  .cal-select-delete-btn{background:#2E1919;border-color:#4E302C;color:#E58A8A}
  .cal-select-delete-btn:hover{background:#3A211F}
  .cal-select-delete-btn:active{background:#452824}
  .cal-post.selected{background:rgba(63,169,143,.16)}
  .cal-post-check{border-color:#3A4040;background:#222626}
  .team-task-check{border-color:#3A4040;background:#222626}
  .team-task.selected{background:#1E2927}
  .create-tabs{background:#222626}
  .create-tab{color:#93A19C}
  .create-tab.active{background:#262222;color:#ECEFED}
  .cp-confirm-row{background:#222626}
  .cp-confirm-select{background:#262222;border-color:#3A4040;color:#ECEEEE}
  .wt-subnav-btn{background:#1B2320;border-color:#2A3532;color:#93A19C}
  .wt-subnav-btn.active{background:#ECEFED;border-color:#ECEFED;color:#12181A}
  .status.wt-todo{background:#222626;color:#93A19C}
  .status.wt-in_progress{background:#3A211F;color:#E58A6E}
  .status.wt-done{background:#173326;color:#5FCB96}
  .wt-subtask-chip{background:#222626;color:#93A19C}
  .wt-subtask-chip.done{background:#173326;color:#5FCB96}
  .wt-status-btn{background:#1B2320;border-color:#2A3532;color:#93A19C}
  .wt-add-subtask-form input{border-color:#3A4040}
  .ann-illustration{background:#1B2320;border-color:#2A3532}
  .ann-mock-tab{background:#262222;border-color:#3A4040;color:#93A19C}
  .ann-mock-row{background:#262222;border-color:#3A4040}
  .ann-mock-code{background:#262222;border-color:#3A4040;color:#93A19C}
  .ann-dot{background:#3A4040}
}