/* ============================================================================
   Чати CRM — миттєвий інтерфейс і згадки: повідомлення «в дорозі», особисті розмови
   «бульбашками» (мої — праворуч), чипи згадок ролей і груп, підсвічування згадок у полі
   введення, меню «…», що розгортається вгору, лічильник «Збереженого».
   Окремий файл поруч із chat.css; кольори й розміри — токени з app.css (світла й темна теми).
   ========================================================================= */

@layer components {

  /* ─────────────────────── Згадки ролей і груп у повідомленнях ─────────────────────── */

  /* --mc — колір ролі в компанії або відтінок групового чату. */
  .cm-mention--role, .cm-mention--group {
    background: color-mix(in oklab, var(--mc) 15%, transparent);
    color: color-mix(in oklab, var(--mc) 78%, var(--ink));
  }
  .cm-mention--role.is-mine, .cm-mention--group.is-mine {
    background: color-mix(in oklab, var(--mc) 26%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mc) 45%, transparent);
  }

  /* ─────────────────────── Список «Згадати» ─────────────────────── */

  .mention-pop { max-height: min(470px, 62vh); overflow-y: auto; overscroll-behavior: contain; }
  /* MentionPopover: невелике віконце біля «@» під рядком із курсором (left/top ставить aaChat.placeMention).
     Без скрипту — просто під полем. */
  .mention-pop--caret {
    left: 0; top: 100%; right: auto; bottom: auto;
    width: min(340px, calc(100vw - 24px));
    max-height: min(340px, 52vh);
    z-index: 40;
  }
  .mention-pop__item { cursor: pointer; }
  .mention-pop__item:not(.is-active):hover { background: var(--accent-soft); }
  .mention-pop__item b { min-width: 0; overflow-wrap: anywhere; }
  .mention-pop__section {
    margin-top: 4px; padding: 8px 8px 4px;
    border-top: 1px solid var(--line);
    font-size: var(--t-2xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .mention-pop__role {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 8px;
    background: color-mix(in oklab, var(--mc) 18%, transparent);
    color: var(--mc);
  }
  .mention-pop__chip {
    padding: 1px 7px;
    border-radius: 6px;
    background: color-mix(in oklab, var(--mc) 14%, transparent);
    color: color-mix(in oklab, var(--mc) 80%, var(--ink));
  }
  /* Вибраний рядок — акцентний фон: аватар, значок ролі й чип не мають у ньому зникати. */
  .mention-pop__item.is-active .avatar { background: var(--accent-ink); color: var(--accent); }
  .mention-pop__item.is-active .mention-pop__role { background: var(--accent-ink); color: var(--mc); }
  .mention-pop__item.is-active .mention-pop__chip { background: color-mix(in oklab, var(--accent-ink) 24%, transparent); color: var(--accent-ink); }
  .mention-pop__item.is-active .cnav-ico { box-shadow: 0 0 0 2px var(--accent-ink); }

  /* ─────────────────────── Підсвічування згадок у полі введення ─────────────────────── */

  .composer__field { position: relative; }
  .composer__hl {
    position: absolute; left: 0; top: 0; right: 0; z-index: 0;
    box-sizing: border-box;
    overflow: hidden; pointer-events: none;
    white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
    color: transparent;
  }
  .composer__input.has-tags { position: relative; z-index: 1; }
  .composer__hl .ctag {
    color: transparent;
    border-radius: 5px;
    background: color-mix(in oklab, var(--mc, var(--info)) 18%, transparent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--mc, var(--info)) 18%, transparent);
  }
  .composer__hl .ctag--all { --mc: var(--warn); }

  /* ─────────────────────── Повідомлення «в дорозі» ─────────────────────── */

  /* «Надсилається…» з'являється, лише якщо сервер думає довше за пів секунди. */
  .cm-send {
    display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
    margin-top: 3px;
    font-size: var(--t-2xs); color: var(--ink-4);
    animation: cm-send-in var(--d-base) var(--e-out) .6s both;
  }
  .cm-send.is-failed { color: var(--danger); font-weight: 600; animation: page-in var(--d-fast) var(--e-out); }
  .cm-send__btn {
    display: inline-flex; align-items: center; gap: 4px;
    height: 22px; padding: 0 9px;
    border: 1px solid color-mix(in oklab, var(--danger) 38%, transparent);
    border-radius: var(--r-full);
    color: var(--danger); font-weight: 650;
    transition: background var(--d-fast);
  }
  .cm-send__btn:hover { background: color-mix(in oklab, var(--danger) 10%, transparent); }
  .cm--failed .cm-text, .cm--failed .cm-sticker, .cm--failed .cm-gallery { opacity: .7; }
  @keyframes cm-send-in { from { opacity: 0; } to { opacity: 1; } }

  /* Збережене — заповнена закладка, що «підстрибує» в момент збереження. */
  .cm-actions__btn.is-on svg { fill: currentColor; animation: cm-save-pop var(--d-slow) var(--e-spring); }
  @keyframes cm-save-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.3); } 100% { transform: none; } }

  /* ─────────────────────── Меню «…»: вгору, якщо внизу немає місця ─────────────────────── */

  .cm-menu.is-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }

  /* ─────────────────────── Особисті повідомлення: бульбашки, мої — праворуч ─────────────────────── */

  .chat-stream--dm .cm:hover { background: transparent; }
  .chat-stream--dm .cm-text:not(.cm-text--jumbo):not(.cm-text--deleted) {
    display: inline-block;
    max-width: min(640px, 100%);
    padding: 7px 12px;
    border-radius: 4px 16px 16px 16px;
    background: var(--bg-sunken);
  }
  .chat-stream--dm .cm--compact .cm-text:not(.cm-text--jumbo):not(.cm-text--deleted) { border-radius: 16px; }

  .chat-stream--dm .cm--mine {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 64px;
  }
  .chat-stream--dm .cm--mine .cm__gutter { display: none; }
  .chat-stream--dm .cm--mine .cm__body { display: flex; flex-direction: column; align-items: flex-end; text-align: left; }
  .chat-stream--dm .cm--mine .cm__head { justify-content: flex-end; }
  .chat-stream--dm .cm--mine .cm__author, .chat-stream--dm .cm--mine .cm__position { display: none; }
  .chat-stream--dm .cm--mine .cm-text:not(.cm-text--jumbo):not(.cm-text--deleted) {
    border-radius: 16px 4px 16px 16px;
    background: color-mix(in oklab, var(--accent) 15%, var(--bg-elevated));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
  }
  .chat-stream--dm .cm--mine.cm--compact .cm-text:not(.cm-text--jumbo):not(.cm-text--deleted) { border-radius: 16px; }
  .chat-stream--dm .cm--mine .cm-gallery { width: min(520px, 100%); }
  .chat-stream--dm .cm--mine .cshare-list { width: min(560px, 100%); }
  .chat-stream--dm .cm--mine .cm-reactions { justify-content: flex-end; }
  .chat-stream--dm .cm--mine .cm-quote-ref { align-self: flex-end; }
  .chat-stream--dm .cm--mine .cm-actions { right: auto; left: 18px; }
  .chat-stream--dm .cm--mine .cm-actions .cm-menu { right: auto; left: 0; }

  /* ─────────────────────── «Збережене»: лічильник і спалах ─────────────────────── */

  .cnav__link--saved { position: relative; overflow: hidden; isolation: isolate; }
  .cnav__count {
    display: inline-grid; place-items: center;
    min-width: 19px; height: 19px; margin-left: auto; padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--bg-sunken); color: var(--ink-2);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .cnav__link.is-active .cnav__count { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
  .cnav__count.is-bump { animation: cnav-count-bump .7s var(--e-spring); }
  .cnav__flash {
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: var(--accent);
    opacity: 0; pointer-events: none;
    animation: cnav-flash 1.1s var(--e-out);
  }
  .cnav__link--saved:has(.cnav__flash) svg { animation: cm-save-pop var(--d-slow) var(--e-spring); }
  @keyframes cnav-count-bump {
    0% { transform: scale(.55); background: var(--accent); color: var(--accent-ink); }
    45% { transform: scale(1.28); background: var(--accent); color: var(--accent-ink); }
    100% { transform: none; }
  }
  @keyframes cnav-flash { 0% { opacity: .32; } 100% { opacity: 0; } }

  /* ─────────────────────── Колір ролі (Користувачі та ролі) ─────────────────────── */

  .role-dot {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 7px;
    background: color-mix(in oklab, var(--mc) 16%, transparent);
    color: var(--mc);
  }
  .role-color { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
  .role-color__chip {
    padding: 1px 8px;
    border-radius: 6px;
    background: color-mix(in oklab, var(--mc) 15%, transparent);
    color: color-mix(in oklab, var(--mc) 78%, var(--ink));
    font-weight: 600; font-size: var(--t-sm);
    transition: background var(--d-fast), color var(--d-fast);
  }
  .role-color__swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
  .role-color__swatch, .role-color__custom {
    position: relative;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--mc);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 12%, transparent);
    transition: transform var(--d-fast) var(--e-spring), box-shadow var(--d-fast);
  }
  .role-color__swatch:hover { transform: scale(1.15); }
  .role-color__swatch.is-on { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--mc); }
  .role-color__custom {
    display: inline-grid; place-items: center; overflow: hidden; cursor: pointer;
    background: conic-gradient(#E5484D, #D99A00, #46A758, #12A594, #0090FF, #8E4EC6, #D6409F, #E5484D);
    color: #fff;
  }
  .role-color__custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

  @media (max-width: 900px) {
    .chat-stream--dm .cm--mine { padding-left: 40px; }
    .chat-stream--dm .cm--mine .cm-actions { left: 8px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cm-send, .cnav__count.is-bump, .cnav__flash, .cm-actions__btn.is-on svg, .cnav__link--saved:has(.cnav__flash) svg { animation: none; }
  }
}

/* ─────────────────────── Міні-чати поверх сторінки ─────────────────────── */
/* Вікна стоять праворуч унизу (спливні картки повідомлень — ліворуч, не перекриваються).
   Модальні вікна сторінки (z-index 90+) лягають поверх міні-чатів. */

@layer components {
  .chat-dock {
    position: fixed; right: 16px; bottom: 0; z-index: 85;
    display: flex; align-items: flex-end; gap: 10px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
  }
  .chat-dock > * { pointer-events: auto; }

  .chat-dock__win {
    position: relative;
    display: flex; flex-direction: column;
    width: 360px; height: min(540px, calc(100dvh - 96px));
    background: var(--bg-elevated);
    border: 1px solid var(--line-strong); border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--sh-lg);
    overflow: hidden;
    animation: ctoast-in var(--d-base) var(--e-out);
  }

  .chat-dock__head {
    display: flex; align-items: center; gap: 4px;
    height: 52px; padding: 0 6px 0 8px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg) 55%, var(--bg-elevated));
    flex-shrink: 0;
  }
  .chat-dock__title {
    display: flex; align-items: center; gap: 9px;
    flex: 1; min-width: 0; padding: 4px 6px;
    border-radius: var(--r-md);
    text-align: left;
  }
  .chat-dock__title:hover { background: var(--surface-hover); }
  .chat-dock__title b { font-size: var(--t-sm); font-weight: 680; }
  .chat-dock__sub { font-size: var(--t-2xs); color: var(--ink-3); }
  .chat-dock__actions { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }

  .chat-dock__body {
    position: relative;
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
  }
  /* Розмова у вузькому вікні: щільніше, кнопка «донизу» — над полем введення. */
  .chat-dock__body .chat-stream__inner { padding: 4px 0 10px; }
  .chat-dock__body .chat-intro { padding: 22px 14px 14px; }
  .chat-dock__body .chat-intro h2 { font-size: var(--t-md); }
  .chat-dock__body .chat-jump { right: 12px; bottom: 96px; }
  .chat-dock__body .composer { padding: 0 8px 6px; }
  .chat-dock__body .chat-banner { margin: 0 8px 8px; }

  .chat-dock__chip {
    display: flex; align-items: center; gap: 2px;
    max-width: 230px; height: 44px; padding: 0 4px 0 2px;
    background: var(--bg-elevated);
    border: 1px solid var(--line-strong); border-bottom: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
    box-shadow: var(--sh-md);
  }
  .chat-dock__chip.has-unread { border-color: var(--accent-line); }
  .chat-dock__chip-main {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; height: 100%; padding: 0 6px;
    font-size: var(--t-sm); font-weight: 620;
  }

  @media (max-width: 767px) {
    .chat-dock { right: 8px; left: 8px; justify-content: flex-end; gap: 6px; }
    .chat-dock__chip { max-width: 46%; }
    /* На телефоні розгорнуте вікно — на весь екран, як окремий застосунок чату. */
    .chat-dock__win {
      position: fixed; inset: 0; z-index: 86;
      width: auto; height: 100dvh;
      border: 0; border-radius: 0;
    }
  }
}