/* Чаты: группа, личка, ассистент, комментарии, заметки, галерея. */
.channel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.channel-row .ch {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    cursor: pointer;
}
.active-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}
.i18n-cell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
}
.fm-voice svg,
.fm-tab .icon,
.channel-row .ch input[type="checkbox"] { width: 1.125rem; height: 1.125rem; }
/* Upload preview chip + its remove cross (client ask: wrong file must be
   removable before submitting the form). */
.up-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
    border: 0.0625rem solid var(--border);
    margin: 0.125rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.up-chip-x {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    color: var(--secondary);
    font-size: var(--fs-xs);
    line-height: 1;
    padding: 0.375rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Chat media payloads: TG voice notes / videos / documents (Alex 17.07). */
.chat-msg-audio,
.ac-media audio { display: block; width: 100%; max-width: 18rem; height: 2.25rem; }
/* Голосовое в личке — тот же плеер, что в чате объекта. */
.ac-audio { display: block; width: 100%; max-width: 16rem; height: 2.25rem; }
.chat-msg-video { display: block; max-width: 100%; max-height: 25rem; border: 0.0625rem solid var(--border); }
.chat-msg-doc,
.chat-msg-dl {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    text-decoration: underline;
    margin-top: 0.25rem;
}
@media (hover: hover) {
    .gallery-item:hover img {
        transform: scale(1.05);
    }
    .ac-send:hover { filter: brightness(1.08); }
}
@media (max-width: 47.99em) {
    /* Отступ под нижнюю панель фильтров + таб-бар. */
    .photo-grid { padding-bottom: 2rem; }
}
.gallery-grid {
    display: grid;
    /* 6.5rem даёт три колонки уже на 390 px: галерея должна показывать стену
       снимков, а не два крупных прев'ю в ряд. */
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.1875rem;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    background: var(--bg-surface);
    cursor: pointer;
    aspect-ratio: 1;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-normal) var(--ease-out);
}
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.7));
    display: flex;
    align-items: flex-end;
    padding: var(--space-xs);
    /* На телефоне наведения нет, и подпись «кто / объект» не показывалась
       никогда: снимок висел без привязки к работе. Прячем её только там,
       где курсор действительно есть. */
    opacity: 1;
    transition: opacity var(--dur-fast) var(--ease-out);
    pointer-events: none;
}
.gallery-overlay span {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    line-height: 1.25;
    color: var(--white);
    letter-spacing: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Відео в плитці: показуємо кадр і рідні елементи керування, без накладки. */
.gallery-item--video { cursor: default; background: var(--black); }
.gallery-item--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item--file {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid var(--border);
}
.gallery-item--file .gallery-overlay { background: none; align-items: center; justify-content: center; }
.gallery-item--file .gallery-overlay span { color: var(--text-secondary); }
.photo-grid {
    display: grid;
    /* №186 */
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--space-sm);
}
@media (min-width: 48em) {
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
}
.photo-card {
    position: relative;
    overflow: hidden;
    border: 0.09375rem solid var(--border);
    cursor: pointer;
}
.photo-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.photo-meta {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-surface);
}
.comment {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-surface);
    border: 0.09375rem solid var(--border);
    /* Type stripe on the block-start edge (not inline-start — house style bans
       a coloured left accent). Colour set per response type below. */
    border-top: 0.1875rem solid var(--comment-accent, var(--border));
}
.comment-user {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--primary);
    text-decoration: none;
}
.comment-date {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
}
.comment-text {
    font-size: var(--fs-xs);
    color: var(--text-primary);
    line-height: 1.5;
}
/* "Replying to @name" chip above the textarea, with a cancel link. */
.reply-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    padding: 0.35rem 0.5rem;
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.reply-context .tk-reply-chip-txt {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Bare icon button — kill the default <button> chrome (gray bevel) that made
   the ✕ look unstyled. */
.reply-cancel {
    flex: none; -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; padding: 0;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; line-height: 1;
}
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}
.inline-form {
    display: none;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 0.0625rem solid var(--border);
}
/* Форма одразу під заголовком секції (#new-task-form, #intake-form): у
   заголовка вже є власна trailing-риска (.section-title::after у
   primitives.css) — власна лінія .inline-form давала ДРУГУ смугу поспіль.
   Роздільник лишає заголовок, форма йде впритул. */
.section-title + .inline-form {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
/* №195 — Group Chat */
.group-chat-page {
    max-width: 56rem;
    margin: 0 auto;
}
.group-chat-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.chat-selector {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
}
.chat-selector-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    letter-spacing: 0;
}
.chat-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    min-height: 1.75rem;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2378716c'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
}
.chat-select:focus { outline: none; border-color: var(--primary); }
.chat-meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
    letter-spacing: 0;
}
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    max-height: 75vh;
    overflow-y: auto;
}
.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 0.0625rem solid var(--border);
    transition: background 0.15s ease;
    max-width: 86%;
}
.chat-msg:last-child,
.rule-row:last-of-type,
.wdir-item:last-child,
.assignee-opt:last-child,
.fb-row:last-child,
.sug-opt:last-child,
.sch-ghost .sch2-row,
.sch-ghost .sch2-phbar { border-bottom: 0; }
.chat-msg-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.chat-msg-author {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--primary);
}
.chat-msg-time {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
}
.chat-msg-kind {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    padding: 0.0625rem 0.25rem;
    border: 0.0625rem solid var(--border);
}
.chat-msg-body {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
}
.chat-msg-text { white-space: pre-wrap; }
.chat-msg-photo { margin-top: var(--space-xs); }
/* Internal vs Telegram in the merged feed — differentiated by author accent
   + a whisper-faint fill, no border bars. */
.chat-msg--fm { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.chat-msg--fm .chat-msg-author { color: var(--primary); }
.chat-msg--tg .chat-msg-author { color: var(--text-secondary); }
/* Compose bar — sticky at the bottom of the chat view */
.chat-reply {
    position: sticky;
    bottom: 0;
    margin-top: var(--space-sm);
    padding-top: var(--space-xs);
    /* Keep the composer clear of the iPhone home indicator (full-screen chat). */
    padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom));
    background: var(--bg-base);
}
.chat-reply-row {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}
.chat-reply-input {
    flex: 1 1 auto;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    /* iOS zooms the page when a focused input is < 16 px — kills the send button
       off the right edge. Hard 16 px so tapping the field never zooms. */
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius);
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
}
.chat-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    color: var(--white);
    background: var(--primary);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
}
.chat-reply-btn:hover { filter: brightness(1.08); }
.chat-reply-status { min-height: 1.1em; margin-top: 0.25rem; font-family: var(--font-mono); font-size: var(--micro-size); }
.chat-reply-ok { color: var(--primary); }
.chat-reply-err { color: var(--secondary); }
/* ── AI assistant chat (.ac-*) ──────────────────────────────────────
   Grouped bubbles, sender caption once per run, sharp corners (brand),
   tonal fill instead of a hard border on every message (kills the
   nested-box AI tell). Thread scrolls; compose pinned above the tab bar. */
.ac-chat {
    display: flex; flex-direction: column;
    height: calc(100dvh - var(--fm-header-h, 3.75rem) - var(--fm-bottombar-h, 3.5rem));
    min-height: 0;
}
/* Chat owns the whole viewport between header and tab bar — drop the page
   gutter + header gap that would otherwise push the compose under the bar. */
body:has(.ac-chat) .main { padding: 0; }
.ac-thread {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.12rem;
    padding: var(--space-md) var(--fm-gutter);
}
.ac-row { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.ac-row--me { align-items: flex-end; }
.ac-row--head { margin-top: 0.75rem; }
.ac-head { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.22rem; padding: 0 0.15rem; }
.ac-who {
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; color: var(--text-secondary);
}
.ac-time { font-family: var(--font-mono); font-size: var(--micro-size); color: var(--text-muted); }
.ac-bubble {
    max-width: 88%; padding: 0.55rem 0.78rem;
    background: var(--bg-elevated); color: var(--text-primary);
    animation: ac-bubble-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ac-row--me .ac-bubble { background: color-mix(in srgb, var(--primary) 15%, var(--bg-surface)); }
.ac-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.45; }
@keyframes ac-bubble-in { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: none; } }
.ac-empty {
    margin: auto; text-align: center; max-width: 22rem;
    font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
}
/* Media inside a bubble (DM/group photo, voice, video) — same concept, one
   vocabulary; media just fills the bubble width. */
.ac-media { margin-bottom: 0.35rem; }
.ac-media img, .ac-media video { display: block; max-width: 100%; max-height: 20rem; }
/* Read ticks for own DM messages: ✓ sent, ✓✓ read (tint). Trails the bubble. */
.ac-tick {
    margin-top: 0.2rem; text-align: right;
    font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0;
    color: var(--text-muted);
}
/* Compose — pinned, full width, sits above the fixed tab bar (thread height
   already excludes it). Apple press feedback on send. */
.ac-compose {
    flex-shrink: 0;
    border-top: 0.0625rem solid var(--border); background: var(--bg-surface);
    padding: var(--space-sm) var(--fm-gutter) calc(var(--space-sm) + env(safe-area-inset-bottom, 0rem));
}
.ac-compose-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.ac-input {
    flex: 1; resize: none; max-height: 8rem; min-height: 2.75rem;
    /* 16 px hard (not 1rem) so iOS never zooms the field on focus. */
    padding: 0.6rem 0.78rem; font-family: var(--font-sans); font-size: 1rem;
    border: 0.0625rem solid var(--border); background: var(--bg-base); color: var(--text-primary);
    -webkit-appearance: none; appearance: none;
}
.ac-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 0.125rem var(--focus-ring); }
.ac-send {
    flex-shrink: 0; width: 2.75rem; height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: var(--white); border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.ac-send:active { transform: scale(0.9); }
/* Typing — soft shimmer sweep, not pulsing dots (impeccable tell). Shown only
   while the request is in flight (htmx flags the form .htmx-request). */
.ac-typing {
    display: none; padding: 0 0.15rem 0.5rem;
    font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0;
    background: linear-gradient(90deg,
        var(--text-muted) 30%, var(--text-primary) 50%, var(--text-muted) 70%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: ac-shimmer 1.4s linear infinite;
}
@keyframes ac-shimmer { to { background-position: -200% center; } }
@media (prefers-reduced-motion: reduce) {
    .ac-bubble { animation: none; }
    .ac-typing { animation: none; -webkit-text-fill-color: var(--text-muted); }
}
.chat-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    letter-spacing: 0;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
}
/* ── Direct messages (moved from direct_messages.html head; foreman tokens) ── */
/* Мессенджер: full-height, БЕЗ декоративной рамки; высота вычитает реальные
   хедер и нижний таб-бар (--fm-* меряет app.js на каждой странице). */
.dm-layout { display:flex; height:calc(100dvh - var(--fm-header-h, 3.75rem) - var(--fm-bottombar-h, 3.5rem)); overflow:hidden; background:var(--bg-surface); }
/* Чат тянется на весь экран под хедером. .main НЕ должен добавлять свой
   padding: dm-layout высотой calc(100dvh − header − bottombar) уже точен, а
   любой отступ .main смещает его вниз ровно на padding → низ не помещается,
   появляется скролл. Обнуляем — окно садится впритык и «дышит» с ресайзом. */
body:has(.dm-layout) .main { padding: 0; }
.dm-sidebar { width:min(35vw, 21.25rem); border-right:0.0625rem solid var(--border); flex-shrink:0; background:var(--bg-base); display:flex; flex-direction:column; }
/* Tab bar pinned at top; only the list below it scrolls. */
.dm-tabs { display:flex; flex-shrink:0; border-bottom:0.0625rem solid var(--border); }
.dm-tab {
  flex:1; padding:0.75em 0.5em; min-height:var(--tap-target); background:var(--bg-base); border:0;
  border-right:0.0625rem solid var(--border);
  color:var(--text-muted); font-family:var(--font-mono); font-size:0.72em; letter-spacing: 0; cursor:pointer;
  transition:color 0.15s, background 0.15s;
}
.dm-tab:last-child { border-right:0; }
.dm-tab:hover { background:var(--bg-elevated); color:var(--text-secondary); }
/* Активная вкладка: светлый текст и черта снизу. Заливка цветом бренда
   рядом с серой соседкой читалась как кнопка тревоги. */
.dm-tab.is-active { color:var(--text-primary); background:var(--bg-base); font-weight:600; box-shadow: inset 0 -0.125rem 0 var(--primary); }
.dm-sidebar-scroll { flex:1; overflow-y:auto; min-height:0; }
/* Show only the section matching the active tab. */
.dm-sidebar[data-tab="groups"] .dm-section--dm { display:none; }
.dm-empty--mini { flex:initial; min-height:0; padding:2.5em 1em; }
.wdir-item:hover,
.chat-msg:hover,
.dm-contact:hover,
.dm-chat .chat-msg:hover,
.tk-rework-toggle.is-cancel:hover,
.kpi-link:hover,
.tl-phase:hover,
#fm-board button:active,
.fb-hub-link:hover,
.tb-col.is-over,
.sug-opt[aria-selected="true"],
.sug-opt:hover,
.dsrv-row:hover,
.dsrv-row:focus-visible,
.pp-pay tr.is-saved > .pp-name { background:var(--bg-elevated); }
.fm-install-txt span { font-size:var(--fs-xs); color:var(--text-muted); line-height:1.4; }
.dm-chat { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
/* render_inline wrapper must fill the column so messages grow and the
   compose form sticks to the bottom (instead of floating up top). */
.dm-chat > #frag-dm-chat { flex:1; display:flex; flex-direction:column; min-height:0; }
.dm-contact {
  display:flex; align-items:center; gap:0.5em; padding:0.7em 1em;
  border-bottom:0.0625rem solid var(--border);
  cursor:pointer; transition:background 0.15s;
}
/* Active row — soft fill + name accent, no border bar (cleaner, modern). */
.dm-contact--active { background: color-mix(in srgb, var(--primary) 9%, var(--bg-base)); }
.dm-contact--active .dm-contact-name { color: var(--primary); }
.dm-contact-avatar {
  width:2.5em; height:2.5em; border-radius:50%; flex-shrink:0;
  background:var(--bg-elevated);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:0.85em; color:var(--text-secondary); overflow:hidden;
}
.dm-contact-info,
.zone-task-info { flex:1; min-width:0; }
.dm-contact-name { font-weight:600; font-size:0.9em; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-contact-role { font-size:var(--micro-size); color:var(--text-secondary); letter-spacing: 0; font-family:var(--font-mono); }
.dm-contact-last { font-size:0.78em; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-contact-meta { text-align:right; flex-shrink:0; min-width:2.5em; }
.dm-contact-time { font-size:var(--micro-size); color:var(--text-muted); font-family:var(--font-mono); }
.dm-contact-badge {
  display:inline-block; background:var(--primary); color:var(--white);
  font-size:0.65em; font-weight:700; min-width:1.4em; padding:0.15em 0.35em;
  border-radius:0.7em; text-align:center; margin-top:0.15em;
}
.dm-empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--text-muted); gap:0.5em; font-family:var(--font-mono);
}
.dm-empty svg { width:3em; height:3em; opacity:0.3; }
.dm-empty p { font-size:0.85em; letter-spacing: 0; }
.dm-messages { flex:1; overflow-y:auto; padding:1em; display:flex; flex-direction:column; gap:0.3em; background:var(--bg-surface); }
/* Compose bar — industrial: square edges (--radius:0), accent send, focus ring. */
.dm-input-wrap {
  padding:0.6rem 0.7rem;
  padding-bottom:max(0.6rem, env(safe-area-inset-bottom));
  border-top:0.0625rem solid var(--border);
  display:flex; gap:0.5rem; align-items:stretch;
  background:var(--bg-base);
}
.dm-input {
  flex:1; min-height:2.75rem; border-radius:0;
  border:0.0625rem solid var(--border);
  padding:0.6rem 0.85rem; font-size:var(--fs-sm); line-height:1.45; outline:none;
  background:var(--bg-surface); color:var(--text-primary);
  max-height:10rem; resize:none; overflow-y:auto;
}
.dm-input:focus { border-color:var(--accent); box-shadow:inset 0 0 0 0.0625rem var(--accent); }
.dm-send-btn {
  width:2.75rem; min-height:2.75rem; border-radius:0; border:0;
  background:var(--accent); color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dm-send-btn:hover,
.fm-hint-ok:hover { background:var(--primary-dim); }
.dm-send-btn:disabled { opacity:0.4; cursor:default; }
@media (max-width:37.5em) {
    .dm-sidebar { width:100%; max-width:100%; }
    /* Hide the ugly scrollbar "полоски" on mobile — scroll still works. */
    .dm-sidebar, .dm-messages, .chat-messages { scrollbar-width: none; -ms-overflow-style: none; }
    .dm-sidebar::-webkit-scrollbar,
    .dm-messages::-webkit-scrollbar,
    .chat-messages::-webkit-scrollbar { width:0; height:0; display:none; }
    /* Нижний таб-бар «уезжает» в режиме переписки (композер занимает низ);
         закрытие треда снимает класс — бар возвращается тем же transition. */
    body.dm-chat-open .fm-bottombar { transform: translateY(110%); }
    body.dm-chat-open { padding-bottom: 0; }
}
.dm-back:hover { color:var(--primary); background:var(--bg-elevated); }
.fm-hint-card .fm-hint-ok {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 0.25rem 0.6rem;
  border: 0.0625rem solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
}
/* AI-переклад у чаті: згорнутий оригінал під перекладом — mono-мікрографіка. */
.chat-orig { margin-top: 0.25rem; }
.chat-orig[open] summary { color: var(--text-secondary); }
.chat-orig-text {
    margin-top: 0.25rem;
    font-size: var(--content-font, 0.8125rem);
    color: var(--text-secondary);
}
/* Мессенджер: свои пузыри справа, чужие слева; композер-textarea. */
.chat-msg--mine {
    margin-left: auto;
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-surface));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
/* Фрагмент-обёртка треда (#frag-group-chat) — прозрачный flex-проводник:
   именно она ребёнок .dm-chat, без этого .chat-messages не клампится. */
.dm-chat #frag-group-chat {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.dm-chat #frag-group-chat .chat-messages,
.dm-chat #frag-dm-chat .dm-messages { flex: 1 1 auto; min-height: 0; }
/* Reply-цитата в пузыре и chip в композере — mono-микро, полная рамка (не рейл). */
.chat-quote, .chat-quotechip {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    border: 0.0625rem solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-quote-author {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--primary);
    margin-right: 0.5em;
}
/* display:flex перебивал атрибут hidden: пустой чип с × висел над полем всегда. */
.chat-quotechip[hidden] { display: none; }
.chat-quotechip { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.25rem; }
.chat-quotechip button {
    margin-left: auto; background: none; border: 0; color: var(--text-muted);
    font-size: var(--fs-md); cursor: pointer; line-height: 1;
}
.chat-msg-replybtn {
    background: none; border: 0; color: var(--text-muted); cursor: pointer;
    font-size: var(--fs-xs); padding: 0 0.25rem; line-height: 1;
}
.chat-attach {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; min-height: 2.5rem; cursor: pointer;
    color: var(--text-muted); border: 0.0625rem solid var(--border);
}
/* Typing-индикатор и DM-галочки. */
.chat-typing {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    padding: 0.15rem var(--space-sm);
}
.asst-wait {
    font-family: var(--font-mono); font-size: var(--micro-size);
    letter-spacing: 0; color: var(--primary); padding-top: 0.25rem;
}
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
/* Заметки (A14) + PDF-кнопка доков (A13). */
.note-add { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: var(--space-md); }
.note-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.note-card { border: 0.0625rem solid var(--border); background: var(--bg-surface); padding: var(--space-sm) var(--space-md); }
.note-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.note-time { font-family: var(--font-mono); font-size: var(--micro-size); color: var(--text-muted); }
.note-archive { display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-target); min-height: var(--tap-target);
  background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 0.25rem; }
.note-text { white-space: pre-wrap; font-size: var(--fs-sm); line-height: 1.5; }
.weekly-done { margin-top: var(--space-md); }
.weekly-summary { margin-top: var(--space-sm); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; }
/* DM: композер-textarea (старый .dm-input был под однострочный input —
   line-height 2.75rem ломал textarea), flex-проводник фрагмента, фото. */
.dm-chat #frag-dm-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.notes-thread { flex-direction: column-reverse; }
.note-bubble .chat-msg-meta { justify-content: space-between; }
.note-bubble .note-archive { padding: 0 0.25rem; }
/* «Ожидает согласования» — состояние, не тревога: приглушённо. */
.dm-contact--disabled .dm-contact-role { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; }
.feature-pending-card { border: 0.0625rem solid var(--border); background: var(--bg-surface); padding: var(--space-lg); max-width: 34rem; }
.feature-pending-card p { margin: var(--space-sm) 0 0; font-size: var(--fs-sm); line-height: 1.55; }
/* Multi-assignee picker (create-task form): tap-target checkbox list scoped to
   the site. Sharp corners, no left-border accent — house style. */
.assignee-picker { display: flex; flex-direction: column; gap: 0.0625rem; border: 0.0625rem solid var(--border); background: var(--bg-surface); max-height: 14rem; overflow-y: auto; }
.assignee-opt { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; font-size: var(--fs-sm); cursor: pointer; border-bottom: 0.0625rem solid var(--border); }
.assignee-opt:has(input:checked) { background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface)); }
/* Assignee chip row on the task-detail page (shown when >1 executor). */
.assignee-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.assignee-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; background: var(--bg-surface); border: 0.0625rem solid var(--border); font-size: var(--fs-xs); font-family: var(--font-mono); }
/* AI-translated task title/description — shown under the original, muted, with a
   mono tag pill (house signal style: mono + pill, never a left-border accent). */
.task-tr { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0.25rem 0 0; line-height: 1.5; }
.task-tr-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; color: var(--primary); border: 0.0625rem solid var(--border); padding: 0 0.3rem; margin-right: 0.35rem; vertical-align: 0.1em; }
/* Inline marker when an AI translation REPLACES the original (task title/desc).
   Small, muted, trailing — original text stays available via the title= tooltip. */
.task-tr-mark { display: inline-block; font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; color: var(--text-muted); border: 0.0625rem solid var(--border); padding: 0 0.25rem; margin-left: 0.4rem; vertical-align: 0.15em; cursor: help; }
/* Evening-report morning-plan "ghost": markable rows (done/partial/miss). Sharp
   corners, mono source tag, no left-border accent (house style). */
.plan-ghost { display: flex; flex-direction: column; gap: 0.0625rem; }
.plan-ghost-empty { color: var(--text-muted); font-size: var(--fs-xs); margin: 0.25rem 0 0; }
/* Note photos (personal notes can carry images — client 22.07). Reuses the
   comment-thumb sizing; the attach button borrows .chat-attach. */
.note-media { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.note-thumb { width: 8rem; height: 8rem; object-fit: cover; border: 0.0625rem solid var(--border); display: block; cursor: pointer; }
.note-attach-count { position: absolute; top: -0.25rem; right: -0.25rem; min-width: 0.9rem; height: 0.9rem; padding: 0 0.2rem; display: grid; place-items: center; background: var(--primary); color: var(--white); font-family: var(--font-mono); font-size: var(--micro-size); line-height: 1; border-radius: 0.45rem; }
.fm-hint-card .fm-hint-off { background: none; border: 0; padding: 0; font-size: var(--fs-xs); color: var(--text-muted); text-decoration: underline; cursor: pointer; }