/* rich_compose.css — единый компонент «расширенное поле сообщения». build 1527.
   Компактный: всё в одной рамке — поле сверху, тонкая полоса кнопок снизу. */
.rc { display: flex; flex-direction: column; }

/* единая рамка вокруг поля + панели кнопок */
.rc-field {
  border: 1px solid #ced4da; border-radius: 6px; background: #fff;
  display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s;
}
.rc-field:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .15rem rgba(13,110,253,.15); }
.rc-field.rc-dragover { border-color: #43b77a; background: rgba(67,183,122,.05); }

/* поле ввода — без своей рамки */
.rc-editor {
  padding: 7px 10px 4px; background: transparent; color: #212529;
  font-size: .875rem; line-height: 1.5; overflow-y: auto; max-height: 280px;
  outline: 0; word-break: break-word;
}
.rc-editor:empty::before { content: attr(data-ph); color: #9aa6b2; pointer-events: none; }
.rc-editor a { color: #0d6efd; }
.rc-editor blockquote { margin: 4px 0; padding: 2px 10px; border-left: 3px solid #ced4da; color: #555; }
.rc-editor code {
  background: #f3f4f6; border-radius: 3px; padding: 1px 5px; font-size: .85em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #b5093a;
}

/* нижняя полоса кнопок — внутри рамки */
.rc-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 5px 4px; gap: 4px;
}
.rc-fmts, .rc-actions { display: flex; align-items: center; gap: 1px; }
/* счётчик символов (опция counter:true) — в правой части полосы кнопок */
.rc-count { color: #8a929c; font-size: .74rem; padding: 0 6px; white-space: nowrap; -webkit-user-select: none; user-select: none; }
.rc-fmt, .rc-attach-btn, .rc-expand {
  border: none; background: none; color: #8a929c; width: 24px; height: 22px; padding: 0;
  border-radius: 4px; font-size: .78rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.rc-fmt:hover, .rc-attach-btn:hover, .rc-expand:hover { background: #eef2f5; color: #198754; }
.rc-fmt:focus-visible, .rc-attach-btn:focus-visible, .rc-expand:focus-visible {
  outline: 2px solid var(--brand-primary, #43b77a); outline-offset: 1px;
}

/* развёрнутый режим: рамка ограничена по высоте, поле скроллится ВНУТРИ,
   полоса кнопок (.rc-bar) всегда видна снизу и не перекрывается. */
.rc.rc-expanded .rc-field { max-height: 60vh; }
.rc.rc-expanded .rc-editor { flex: 1 1 auto; min-height: 220px; max-height: none; }
.rc.rc-expanded .rc-bar { flex: 0 0 auto; }
/* если родитель-flex (дровер) отдал высоту — занять её целиком */
.rc.rc-expanded { flex: 1 1 auto; min-height: 0; }

/* чипы файлов */
.rc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rc-chip {
  display: inline-flex; align-items: center; gap: 4px; background: #f1f3f5;
  border: 1px solid #e3e6ea; border-radius: 12px; padding: 2px 8px; font-size: .72rem; max-width: 100%;
}
.rc-chip img { width: 20px; height: 20px; object-fit: cover; border-radius: 3px; }
.rc-chip-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.rc-chip-sz { color: #6c757d; }
.rc-chip-rm { cursor: pointer; color: #dc3545; font-size: .7rem; }
/* кнопка-обёртка превью+имя: кликабельна для переименования */
.rc-chip-edit {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: none;
  padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; max-width: 100%;
  border-radius: 6px;
}
.rc-chip-edit:hover .rc-chip-nm { text-decoration: underline dotted; }
.rc-chip-edit:focus-visible { outline: 2px solid var(--brand-primary, #43b77a); outline-offset: 1px; }

/* всплывающий поповер переименования — открывается ВВЕРХ (чипы вложений
   внизу композера, поповер вниз обрезался бы за краем экрана) */
.rc-chip { position: relative; }
.rc-rename-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 3050;
  background: #fff; border: 1px solid #d0d7de; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.16); padding: 8px 9px; min-width: 210px;
  max-width: min(280px, 92vw);
}
.rc-rename-pop::after {   /* стрелка-указатель вниз (на чип) */
  content: ""; position: absolute; top: 100%; left: 14px;
  border: 6px solid transparent; border-top-color: #fff;
  filter: drop-shadow(0 1px 0 #d0d7de);
}
.rc-rename-lbl { display: block; font-size: .72rem; color: #6c757d; margin-bottom: 4px; }
.rc-rename-ext { color: #adb5bd; }
.rc-rename-row { display: flex; gap: 5px; align-items: center; }
.rc-rename-inp {
  flex: 1 1 auto; min-width: 0; font-size: .82rem; padding: 4px 8px;
  border: 1px solid #ced4da; border-radius: 5px; background: #fff; color: #212529;
}
.rc-rename-inp:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .15rem rgba(13,110,253,.15); }
.rc-rename-ok {
  flex: 0 0 auto; border: none; background: #43b77a; color: #fff; width: 30px; height: 28px;
  border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rc-rename-ok:hover { background: #379065; }
.rc-rename-ok:focus-visible { outline: 2px solid #198754; outline-offset: 1px; }

/* ── тёмная тема (оба селектора: Bootstrap 5.3 [data-bs-theme] + legacy .dark-theme) ── */
/* внешняя рамка — раньше не переопределялась → оставалась белой на тёмных страницах */
[data-bs-theme="dark"] .rc-field, .dark-theme .rc-field { background: #15181b; border-color: #2a2f37; }
[data-bs-theme="dark"] .rc-field:focus-within, .dark-theme .rc-field:focus-within {
  border-color: #3f7d5f; box-shadow: 0 0 0 .15rem rgba(67,183,122,.18);
}
[data-bs-theme="dark"] .rc-field.rc-dragover, .dark-theme .rc-field.rc-dragover {
  border-color: #43b77a; background: rgba(67,183,122,.08);
}
/* поле ввода */
[data-bs-theme="dark"] .rc-editor, .dark-theme .rc-editor { background: transparent; color: #dbe2ea; }
[data-bs-theme="dark"] .rc-editor:empty::before, .dark-theme .rc-editor:empty::before { color: #6b7683; }
[data-bs-theme="dark"] .rc-editor a, .dark-theme .rc-editor a { color: #6ea8fe; }
[data-bs-theme="dark"] .rc-editor blockquote, .dark-theme .rc-editor blockquote { border-left-color: #3a3f47; color: #adb5bd; }
[data-bs-theme="dark"] .rc-editor code, .dark-theme .rc-editor code { background: #2a2f37; color: #ff9ec2; }
/* кнопки — прозрачные как в светлой теме (без ошибочного boxed-фона) */
[data-bs-theme="dark"] .rc-fmt, [data-bs-theme="dark"] .rc-attach-btn, [data-bs-theme="dark"] .rc-expand,
.dark-theme .rc-fmt, .dark-theme .rc-attach-btn, .dark-theme .rc-expand { background: none; color: #8a929c; }
[data-bs-theme="dark"] .rc-fmt:hover, [data-bs-theme="dark"] .rc-attach-btn:hover, [data-bs-theme="dark"] .rc-expand:hover,
.dark-theme .rc-fmt:hover, .dark-theme .rc-attach-btn:hover, .dark-theme .rc-expand:hover { background: #22262c; color: #7fd6a8; }
/* чипы файлов */
[data-bs-theme="dark"] .rc-chip, .dark-theme .rc-chip { background: #2b2f36; border-color: #3a3f47; color: #ccd3db; }
[data-bs-theme="dark"] .rc-chip-sz, .dark-theme .rc-chip-sz { color: #8a929c; }
[data-bs-theme="dark"] .rc-count, .dark-theme .rc-count { color: #6b7683; }
/* поповер переименования */
[data-bs-theme="dark"] .rc-rename-pop, .dark-theme .rc-rename-pop { background: #1c2025; border-color: #3a3f47; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .rc-rename-pop::after, .dark-theme .rc-rename-pop::after { border-top-color: #1c2025; filter: drop-shadow(0 1px 0 #3a3f47); }
[data-bs-theme="dark"] .rc-rename-lbl, .dark-theme .rc-rename-lbl { color: #8a929c; }
[data-bs-theme="dark"] .rc-rename-inp, .dark-theme .rc-rename-inp { background: #15181b; border-color: #3a3f47; color: #dbe2ea; }
[data-bs-theme="dark"] .rc-rename-inp:focus, .dark-theme .rc-rename-inp:focus { border-color: #3f7d5f; box-shadow: 0 0 0 .15rem rgba(67,183,122,.18); }

/* ── мобильная адаптация: тач-таргеты ≥40px, поле не крадёт высоту экрана ── */
@media (max-width: 575.98px) {
  .rc-editor { font-size: 16px; max-height: 40vh; }   /* 16px = iOS не зумит при фокусе */
  .rc-bar { padding: 3px 4px 5px; gap: 2px; flex-wrap: wrap; }
  .rc-fmt, .rc-attach-btn, .rc-expand { width: 40px; height: 38px; font-size: .95rem; }
  .rc-fmts, .rc-actions { gap: 2px; }
  .rc.rc-expanded .rc-field { max-height: 72vh; }
  .rc.rc-expanded .rc-editor { min-height: 40vh; }
  .rc-chip-nm { max-width: 46vw; }
}

/* уважать prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .rc-field, .rc-fmt, .rc-attach-btn, .rc-expand { transition: none; }
}