/* Задача №786. Единый вид сообщений чата (ПК и мобильный кабинет) */
.cu-thread {
    --cu-bg: #f6f8fb; --cu-card: #ffffff; --cu-line: #e2e8f0; --cu-ink: #1f2937; --cu-soft: #6b7280;
    --cu-mine: #e3efff; --cu-mine-line: #bcd4f7; --cu-accent: #2563eb; --cu-danger: #dc2626; --cu-ok: #15803d;
    --cu-warn-bg: #fff7e0; --cu-warn-line: #f2d98a;
    overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; scroll-behavior: auto;
    -webkit-overflow-scrolling: touch; color: var(--cu-ink);
}
.cu-panel, .cu-compose-tools, .cu-tools, .cu-broadcast {
    --cu-bg: #f6f8fb; --cu-card: #ffffff; --cu-line: #e2e8f0; --cu-ink: #1f2937; --cu-soft: #6b7280;
    --cu-accent: #2563eb; --cu-danger: #dc2626; --cu-ok: #15803d;
}
@media (prefers-color-scheme: dark) {
    body[data-mode="auto"] .cu-thread, body[data-mode="dark"] .cu-thread {
        --cu-bg: #0b1220; --cu-card: #162033; --cu-line: #263349; --cu-ink: #e5e7eb; --cu-soft: #94a3b8;
        --cu-mine: #1e3a8a; --cu-mine-line: #2b4fa8; --cu-warn-bg: #3a2f10; --cu-warn-line: #6b5a1d; --cu-ok: #4ade80;
    }
}
body[data-mode="dark"] .cu-thread {
    --cu-bg: #0b1220; --cu-card: #162033; --cu-line: #263349; --cu-ink: #e5e7eb; --cu-soft: #94a3b8;
    --cu-mine: #1e3a8a; --cu-mine-line: #2b4fa8; --cu-warn-bg: #3a2f10; --cu-warn-line: #6b5a1d; --cu-ok: #4ade80;
}

.cu-day, .cu-newline { display: flex; align-items: center; justify-content: center; margin: 4px 0; font-size: 12px; color: var(--cu-soft); }
.cu-day span { background: rgba(148,163,184,.18); border-radius: 999px; padding: 2px 12px; }
.cu-newline { color: var(--cu-danger); }
.cu-newline::before, .cu-newline::after { content: ''; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .35; margin: 0 10px; }
.cu-newline span { font-weight: 600; }

.cu-row { position: relative; display: flex; gap: 8px; align-items: flex-end; max-width: 86%; align-self: flex-start; }
.cu-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.cu-row.unread .cu-bubble { border-color: var(--cu-warn-line); background: var(--cu-warn-bg); }
.cu-row.cu-flash .cu-bubble { box-shadow: 0 0 0 3px rgba(37,99,235,.45); transition: box-shadow .3s; }
.cu-row.sending { opacity: .65; }
.cu-row.failed .cu-bubble { border-color: var(--cu-danger); background: rgba(220,38,38,.08); }

.cu-ava {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff; background: #64748b; margin-bottom: 2px;
}
.cu-ava.r-admin { background: #7c3aed; } .cu-ava.r-leader { background: #0d9488; } .cu-ava.r-manager { background: #2563eb; }
.cu-ava.r-quality { background: #d97706; } .cu-ava.r-executor { background: #16a34a; } .cu-ava.r-user { background: #64748b; }

.cu-bubble {
    position: relative; min-width: 0; background: var(--cu-card); border: 1px solid var(--cu-line); border-radius: 14px; padding: 7px 34px 7px 11px;
    font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.cu-row.mine .cu-bubble { background: var(--cu-mine); border-color: var(--cu-mine-line); border-bottom-right-radius: 4px; }
.cu-row:not(.mine) .cu-bubble { border-bottom-left-radius: 4px; }

.cu-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12px; margin-bottom: 2px; }
.cu-author { font-weight: 700; }
.cu-role { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 0 7px; line-height: 16px; color: #fff; background: #64748b; }
.cu-role.r-admin { background: #7c3aed; } .cu-role.r-leader { background: #0d9488; } .cu-role.r-manager { background: #2563eb; }
.cu-role.r-quality { background: #d97706; } .cu-role.r-executor { background: #16a34a; }
.cu-time { color: var(--cu-soft); font-size: 11.5px; margin-left: auto; }
.cu-pin { font-size: 11px; }

.cu-quote {
    border-left: 3px solid var(--cu-accent); background: rgba(37,99,235,.08); border-radius: 6px; padding: 3px 8px; margin: 2px 0 4px;
    font-size: 12.5px; cursor: pointer; display: flex; flex-direction: column; min-width: 0;
}
.cu-quote b { color: var(--cu-accent); } .cu-quote span { color: var(--cu-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cu-body { white-space: normal; }
.cu-body a { color: var(--cu-accent); text-decoration: underline; }
.cu-mention { background: rgba(37,99,235,.15); color: var(--cu-accent); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.cu-deleted { color: var(--cu-soft); }
.cu-file { display: flex; align-items: center; gap: 8px; margin-top: 6px; text-decoration: none !important; color: var(--cu-ink) !important; }
.cu-file.cu-img { flex-direction: column; align-items: flex-start; gap: 3px; }
.cu-file.cu-img img { max-width: 260px; max-height: 170px; border-radius: 8px; border: 1px solid var(--cu-line); object-fit: cover; background: #fff; }
.cu-file.cu-img span { font-size: 11.5px; color: var(--cu-soft); }
.cu-file.cu-doc { border: 1px solid var(--cu-line); border-radius: 10px; padding: 6px 10px; background: rgba(148,163,184,.12); }
.cu-file.cu-doc b { font-size: 11px; background: #dc2626; color: #fff; border-radius: 4px; padding: 1px 5px; }

.cu-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cu-react { border: 1px solid var(--cu-line); background: var(--cu-card); border-radius: 999px; padding: 0 8px; font-size: 13px; line-height: 22px; cursor: pointer; color: var(--cu-ink); }
.cu-react.mine { border-color: var(--cu-accent); background: rgba(37,99,235,.12); }
.cu-react span { font-size: 12px; font-weight: 600; }

.cu-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; font-size: 11px; color: var(--cu-soft); margin-top: 3px; }
.cu-status.read { color: var(--cu-ok); font-weight: 600; }
.cu-edited { font-style: italic; }

.cu-menu-btn {
    position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--cu-soft);
    font-size: 18px; line-height: 20px; cursor: pointer; opacity: 0;
}
.cu-row:hover .cu-menu-btn, .cu-row.menu-open .cu-menu-btn, .cu-menu-btn:focus { opacity: 1; }
@media (hover: none) { .cu-menu-btn { opacity: .7; } }
.cu-menu {
    display: none; position: absolute; z-index: 30; right: 4px; top: 30px; min-width: 190px; background: var(--cu-card); border: 1px solid var(--cu-line);
    border-radius: 12px; box-shadow: 0 8px 28px rgba(15,23,42,.22); padding: 6px;
}
.cu-row.menu-open .cu-menu { display: block; }
.cu-row:last-of-type .cu-menu { top: auto; bottom: 30px; }
.cu-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--cu-ink); }
.cu-menu button:hover { background: rgba(148,163,184,.18); }
.cu-menu button.danger { color: var(--cu-danger); }
.cu-menu-react { display: flex; gap: 2px; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--cu-line); }
.cu-menu-react button { width: auto; flex: 1 1 0; text-align: center; font-size: 17px; padding: 4px 0; }

.cu-edit { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.cu-edit textarea { width: 100%; border: 1px solid var(--cu-line); border-radius: 8px; padding: 6px 8px; font: inherit; background: var(--cu-card); color: var(--cu-ink); }
.cu-edit .cu-btn { align-self: flex-start; }
.cu-confirm { margin-top: 6px; font-size: 12.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cu-btn { border: 1px solid var(--cu-line); background: var(--cu-card); color: var(--cu-ink); border-radius: 8px; padding: 3px 11px; font-size: 12.5px; cursor: pointer; }
.cu-btn-primary { background: var(--cu-accent); border-color: var(--cu-accent); color: #fff; }
.cu-btn-danger { background: var(--cu-danger); border-color: var(--cu-danger); color: #fff; }

.cu-typing { align-self: flex-start; font-size: 12.5px; color: var(--cu-soft); display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.cu-dots { display: inline-flex; gap: 3px; }
.cu-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--cu-soft); animation: cuBlink 1.2s infinite ease-in-out; opacity: .35; }
.cu-dots i:nth-child(2) { animation-delay: .2s; } .cu-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes cuBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.cu-more {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 20; border: 0; border-radius: 999px; background: var(--cu-accent, #2563eb);
    color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(37,99,235,.4);
}

.cu-empty { margin: auto; max-width: 360px; text-align: center; color: var(--cu-soft); padding: 24px 12px; }
.cu-empty-ico { font-size: 34px; margin-bottom: 6px; }
.cu-empty-title { font-weight: 700; color: var(--cu-ink); font-size: 15px; margin-bottom: 4px; }
.cu-empty-text { font-size: 13px; margin-bottom: 10px; }
.cu-phrases { display: flex; flex-direction: column; gap: 6px; }
.cu-phrase { border: 1px solid var(--cu-line); background: var(--cu-card); color: var(--cu-ink); border-radius: 10px; padding: 7px 10px; font-size: 13px; cursor: pointer; text-align: left; }
.cu-phrase:hover { border-color: var(--cu-accent); }

/* Полоски над и под перепиской */
.cu-pinbar {
    display: flex; align-items: center; gap: 8px; background: #fff7e0; border: 1px solid #f2d98a; border-radius: 10px; padding: 5px 10px;
    margin-bottom: 6px; font-size: 12.5px; cursor: pointer; color: #5c4a0a;
}
.cu-pinbar b { flex: 0 0 auto; } .cu-pinbar span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-pinbar em { font-style: normal; color: #8a7420; font-size: 11.5px; }
.cu-replybar {
    display: flex; align-items: center; gap: 8px; border-left: 3px solid #2563eb; background: rgba(37,99,235,.08); border-radius: 6px;
    padding: 4px 8px; font-size: 12.5px; margin-bottom: 6px;
}
.cu-replybar div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cu-replybar b { color: #2563eb; } .cu-replybar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.cu-replybar button { border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; opacity: .6; }
.cu-attach {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 3px 6px 3px 8px; font-size: 12.5px;
    background: rgba(148,163,184,.14); margin-bottom: 6px; max-width: 100%;
}
.cu-attach img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.cu-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cu-attach button { border: 0; background: transparent; font-size: 17px; line-height: 1; cursor: pointer; opacity: .6; }
.cu-dropping { outline: 2px dashed #2563eb; outline-offset: -4px; }

@media (max-width: 600px) {
    .cu-row { max-width: 94%; }
    .cu-file.cu-img img { max-width: 200px; }
}

/* сообщения прижаты к низу окна, когда их мало */
.cu-thread > :first-child { margin-top: auto; }

/* Выбор файла в окне чата: своя русская кнопка вместо системной («Choose File» зависит от языка браузера) */
#chatsModal .cu-file-native { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
#chatsModal .cu-file-btn {
  border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 8px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
#chatsModal .cu-file-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
#chatsModal .cu-file-name { margin: 0 12px 0 8px; font-size: 12px; color: #64748b; max-width: 200px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Пометка «Важно» в общих лентах исполнителей и копирайтеров */
.cu-important-badge { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 0 7px; line-height: 16px; color: #fff; background: #dc2626; }