/* Единый современный вид переписки: кабинет, страница «Переписка», админка */
:root{--m-me1:#d42a45;--m-me2:#ef5f77;--m-bg:#f3f5f9;--m-card:#fff;--m-ease:cubic-bezier(.34,1.4,.64,1)}
html[data-theme=dark]{--m-bg:#0e1524;--m-card:#1c2740}

/* поле сообщений */
.cv-body,.ac-msgs,.chat-body,#chatModal .chat-messages{
  background:
    radial-gradient(circle at 12% 8%,rgba(200,32,58,.06),transparent 40%),
    radial-gradient(circle at 90% 90%,rgba(29,111,216,.06),transparent 40%),
    var(--m-bg)!important;
  scroll-behavior:smooth;gap:3px!important;padding:18px 18px 12px!important}
.cv-body::-webkit-scrollbar,.ac-msgs::-webkit-scrollbar,.chat-body::-webkit-scrollbar{width:8px}
.cv-body::-webkit-scrollbar-thumb,.ac-msgs::-webkit-scrollbar-thumb,.chat-body::-webkit-scrollbar-thumb{background:rgba(127,127,127,.28);border-radius:8px}

/* пузыри */
.msg,.ac-msg,.cmsg,#chatModal .chat-msg{
  position:relative;max-width:min(76%,560px)!important;padding:9px 14px 7px!important;font-size:14.5px!important;line-height:1.45!important;
  border-radius:20px!important;border:0!important;box-shadow:0 1px 2px rgba(15,26,46,.08),0 6px 14px -10px rgba(15,26,46,.25)!important;
  overflow-wrap:anywhere;margin-top:8px;animation:mIn .35s var(--m-ease) both}
@keyframes mIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
/* мои (справа) */
.msg.me,.ac-msg.me,.cmsg.applicant,#chatModal .chat-msg.admin{
  align-self:flex-end;background:linear-gradient(135deg,var(--m-me1),var(--m-me2))!important;color:#fff!important;border-bottom-right-radius:6px!important}
/* чужие (слева) */
.msg.them,.ac-msg.them,.cmsg.admin,#chatModal .chat-msg.applicant{
  align-self:flex-start;background:var(--m-card)!important;color:var(--ink,#16233d)!important;border-bottom-left-radius:6px!important}
/* серия подряд: тесно и без лишних «хвостов» */
.msg.me+.msg.me,.msg.them+.msg.them,.ac-msg.me+.ac-msg.me,.ac-msg.them+.ac-msg.them,.cmsg.applicant+.cmsg.applicant,.cmsg.admin+.cmsg.admin,
#chatModal .chat-msg.admin+.chat-msg.admin,#chatModal .chat-msg.applicant+.chat-msg.applicant{margin-top:0}
.msg.me:has(+.msg.me),.ac-msg.me:has(+.ac-msg.me),.cmsg.applicant:has(+.cmsg.applicant),#chatModal .chat-msg.admin:has(+.chat-msg.admin){border-bottom-right-radius:20px!important}
.msg.them:has(+.msg.them),.ac-msg.them:has(+.ac-msg.them),.cmsg.admin:has(+.cmsg.admin),#chatModal .chat-msg.applicant:has(+.chat-msg.applicant){border-bottom-left-radius:20px!important}
.msg .meta,.ac-msg .meta,.cmsg .cmeta,#chatModal .chat-msg .meta{font-size:10.5px!important;opacity:.62!important;margin-top:3px!important;text-align:right;display:flex!important;align-items:center;justify-content:flex-end;gap:5px}
/* удалённое сообщение - заглушка вместо содержимого */
.msg-deleted,.ac-msg-deleted{opacity:.65;font-style:italic}
/* изменить/удалить своё сообщение - показываем по наведению, чтобы не мешать чтению */
.msg-actions,.ac-msg-actions{display:inline-flex;gap:3px;margin-left:auto;opacity:0;transition:opacity .15s}
.msg:hover .msg-actions,.ac-msg:hover .ac-msg-actions{opacity:1}
.msg-actions button,.ac-msg-actions button{border:none;background:rgba(255,255,255,.3);color:inherit;width:19px;height:19px;
  border-radius:50%;font-size:10.5px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0}
.msg.them .msg-actions button,.ac-msg.them .ac-msg-actions button{background:rgba(22,35,61,.08)}
.msg-actions button:hover,.ac-msg-actions button:hover{background:rgba(255,255,255,.5)}
.msg.them .msg-actions button:hover,.ac-msg.them .ac-msg-actions button:hover{background:rgba(22,35,61,.16)}
/* крупный смайлик-стикер / картинка-стикер (Twemoji, см. /stickers/README.md) */
.msg.sticker,.ac-msg.sticker{background:none!important;box-shadow:none!important;font-size:54px!important;padding:0!important;line-height:1.1!important}
.sticker-img{width:84px;height:84px;display:block;margin:2px 0}

/* ---- ВК-функции: реакции, ответ на сообщение, пересылка, статус прочтения ---- */
/* Статус прочтения - галочки рядом со своим временем, как в ВК */
.ac-msg-tick{font-size:10.5px;opacity:.75}
.ac-msg-tick.read{opacity:1;color:#8fd3ff}
.msg.me .ac-msg-tick.read{color:#bfe8ff}

/* Реакции - пилюли под сообщением */
.ac-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ac-reaction-pill{border:1px solid rgba(127,127,127,.25);background:rgba(255,255,255,.65);color:inherit;
  border-radius:999px;padding:1px 7px;font-size:12px;cursor:pointer;line-height:1.6}
.msg.them .ac-reaction-pill,.ac-msg.them .ac-reaction-pill{background:rgba(22,35,61,.05)}
.ac-reaction-pill:hover{background:rgba(255,255,255,.9)}
.msg.them .ac-reaction-pill:hover,.ac-msg.them .ac-reaction-pill:hover{background:rgba(22,35,61,.1)}
/* Маленький всплывающий выбор эмодзи у кнопки-реакции */
.ac-react-pop{position:absolute;z-index:20;display:flex;gap:2px;background:var(--m-card,#fff);
  border:1px solid rgba(127,127,127,.2);border-radius:14px;padding:4px 5px;box-shadow:0 10px 26px rgba(15,26,46,.2);
  margin-top:4px}
.ac-react-pop button{border:none;background:none;font-size:17px;cursor:pointer;padding:2px 3px;border-radius:8px;line-height:1}
.ac-react-pop button:hover{background:rgba(127,127,127,.15)}

/* Цитата (ответ на сообщение) - узкая цветная полоска слева, как в ВК */
.ac-msg-quote,.msg-quote{border-left:2.5px solid currentColor;opacity:.82;padding:2px 0 2px 8px;margin-bottom:5px;
  font-size:12.5px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-msg-quote b,.msg-quote b{font-weight:700}
.ac-msg-quote:hover,.msg-quote:hover{opacity:1}

/* Подпись пересланного сообщения */
.ac-msg-fwdtag,.msg-fwdtag{font-size:11px;opacity:.75;margin-bottom:3px;font-style:italic}

/* Кратковременная подсветка сообщения при переходе по цитате */
@keyframes acMsgFlash{0%,100%{box-shadow:0 1px 2px rgba(15,26,46,.08),0 6px 14px -10px rgba(15,26,46,.25)}50%{box-shadow:0 0 0 3px rgba(200,32,58,.5)}}
.ac-msg-flash,.msg-flash{animation:acMsgFlash 1.1s ease}

/* Панель «Ответить» над полем ввода */
.ac-reply-bar,.reply-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--m-card,#fff);
  border-top:1px solid rgba(127,127,127,.15);flex-shrink:0}
.ac-reply-preview,.reply-preview{flex:1;min-width:0;font-size:12.5px;border-left:2.5px solid var(--m-me1,#d42a45);padding-left:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-reply-cancel,.reply-cancel{border:none;background:rgba(127,127,127,.12);width:22px;height:22px;border-radius:50%;
  cursor:pointer;font-size:12px;flex-shrink:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.ac-reply-cancel:hover,.reply-cancel:hover{background:rgba(127,127,127,.22)}

/* «печатает...» в подзаголовке чата */
.sub.ac-typing{color:var(--m-me1,#d42a45);font-style:italic}
/* картинки и файлы */
.msg img.att,.ac-msg img,.cmsg img.cimg,#chatModal .chat-msg img.chat-img{border-radius:14px!important;max-width:260px!important;margin:4px 0 2px!important;cursor:zoom-in;transition:transform .3s}
.msg img.att:hover,.ac-msg img:hover{transform:scale(1.02)}
/* разделитель дней */
.day-sep{align-self:center;font-size:11px;font-weight:600;color:var(--ink-soft,#6b7a90);background:rgba(127,127,127,.14);backdrop-filter:blur(6px);border-radius:999px;padding:4px 14px;margin:14px 0 8px}

/* шапки */
.cv-head,.ac-head,.chat-head,#chatModal .chat-header{backdrop-filter:blur(14px);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));border-bottom:1px solid rgba(127,127,127,.18)}
.chat-head,#chatModal .chat-header{background:linear-gradient(135deg,#1b2740,#2c3d63)!important;color:#fff}
.cv-ava,.ac-ava,.cl-ava{box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}

/* поле ввода */
.cv-foot,.ac-foot,.chat-foot,#chatModal .chat-input-row{padding:12px 14px!important;gap:8px!important;background:var(--m-card);border-top:1px solid rgba(127,127,127,.15)!important}
.cv-foot textarea,.ac-foot textarea,.chat-foot input[type=text],#chatModal .chat-input-row input{
  border-radius:22px!important;border:1.5px solid rgba(127,127,127,.25)!important;padding:11px 16px!important;background:rgba(127,127,127,.06)!important;transition:border-color .25s,box-shadow .25s,background .25s}
.cv-foot textarea:focus,.ac-foot textarea:focus,.chat-foot input[type=text]:focus,#chatModal .chat-input-row input:focus{
  outline:none;border-color:var(--accent,#c8203a)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(200,32,58,.12)}
.icon-btn{transition:transform .3s var(--m-ease),background .2s}.icon-btn:hover{transform:scale(1.12)}
.send-btn,.ac-foot .send-btn,#acSend{background:linear-gradient(135deg,var(--m-me1),var(--m-me2))!important;box-shadow:0 8px 18px -8px rgba(200,32,58,.7);transition:transform .3s var(--m-ease),opacity .2s}
.send-btn:hover:not(:disabled),#acSend:hover{transform:scale(1.1) rotate(-8deg)}

/* список диалогов */
.cl-item,.ac-item,.chat-row{transition:background .2s,transform .3s var(--m-ease)}
.cl-item:hover,.ac-item:hover{transform:translateX(2px)}
.cl-item.active,.ac-item.active{box-shadow:inset 3px 0 0 var(--accent,#c8203a)}
.cl-unread,.ac-unread{background:linear-gradient(135deg,var(--m-me1),var(--m-me2))!important;box-shadow:0 4px 10px -4px rgba(200,32,58,.7)}

/* быстрые ответы и инфо-полоса - переносятся на новую строку, а не обрезаются
   горизонтальной прокруткой (панель теперь на всю ширину, место для этого есть) */
.m-chips{display:flex;flex-wrap:wrap;gap:7px;padding:8px 14px;overflow-x:visible;max-height:94px;overflow-y:auto;scrollbar-width:none;background:var(--m-card);min-width:0;max-width:100%;box-sizing:border-box;flex-shrink:0}
.m-chips::-webkit-scrollbar{display:none}
.m-chips button{flex:none;border:1.5px solid rgba(200,32,58,.28);background:rgba(200,32,58,.06);color:var(--accent,#c8203a);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .25s var(--m-ease)}
.m-chips button:hover{background:var(--accent,#c8203a);color:#fff;transform:translateY(-2px)}
.m-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 16px;background:var(--m-card);border-bottom:1px solid rgba(127,127,127,.14);font-size:12px}
.m-steps{display:flex;align-items:center;gap:0;flex:1;min-width:200px}
.m-step{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#9aa4b5;white-space:nowrap}
.m-step i{width:20px;height:20px;border-radius:50%;background:#e3e7ee;color:#fff;font-style:normal;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .4s var(--m-ease)}
.m-step.done{color:#1b8a5a}.m-step.done i{background:#1b8a5a}
.m-step.cur{color:var(--accent,#c8203a)}.m-step.cur i{background:var(--accent,#c8203a);box-shadow:0 0 0 5px rgba(200,32,58,.16)}
.m-step.rej{color:#c8203a}.m-step.rej i{background:#c8203a}
.m-bar{flex:1;height:2px;min-width:14px;background:#e3e7ee;margin:0 6px;border-radius:2px}.m-bar.done{background:#1b8a5a}
.m-typing-hint{font-size:11px;color:var(--ink-soft)}
.m-sel{padding:6px 10px;border-radius:10px;border:1px solid rgba(127,127,127,.3);font:inherit;font-size:12.5px;background:transparent;color:inherit}

html[data-theme=dark] .cv-head,html[data-theme=dark] .ac-head{background:rgba(23,32,52,.9)}
html[data-theme=dark] .cv-foot textarea:focus,html[data-theme=dark] .chat-foot input[type=text]:focus{background:#0e1524!important}
@media(prefers-reduced-motion:reduce){.msg,.ac-msg,.cmsg,#chatModal .chat-msg{animation:none}}

/* Мои заявки */
.tk-bar{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.tk-search{width:100%;padding:11px 16px;border-radius:14px;border:1.5px solid rgba(127,127,127,.25);background:rgba(127,127,127,.06);font:inherit;transition:all .25s}
.tk-search:focus{outline:none;border-color:var(--accent,#c8203a);box-shadow:0 0 0 4px rgba(200,32,58,.12);background:#fff}
.tk-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tk-tabs button{flex:none;border:0;background:rgba(127,127,127,.12);color:inherit;border-radius:999px;padding:7px 14px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .25s var(--m-ease)}
.tk-tabs button.on{background:var(--accent,#c8203a);color:#fff;box-shadow:0 6px 14px -6px rgba(200,32,58,.7)}
.tk-items{display:flex;flex-direction:column;gap:10px}
.tk-card{display:flex!important;align-items:center;gap:14px;text-align:left;width:100%;border-radius:20px!important;padding:14px 16px!important;animation:mIn .4s var(--m-ease) both;position:relative}
.tk-card.has-new{border-color:var(--accent,#c8203a)!important;box-shadow:0 8px 22px -12px rgba(200,32,58,.55)}
.tk-ico{flex:none;width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:21px;background:linear-gradient(135deg,#e8eefb,#f6f8fd)}
.tk-ico.m-helpdesk{background:linear-gradient(135deg,#e3f1ff,#f3f9ff)}.tk-ico.m-cartridge{background:linear-gradient(135deg,#fff1dc,#fff9ee)}.tk-ico.m-corp-mail{background:linear-gradient(135deg,#ffe4e8,#fff3f5)}
.tk-main{flex:1;min-width:0}
.tk-go{font-size:26px;color:#aab3c2;transition:transform .3s var(--m-ease)}.tk-card:hover .tk-go{transform:translateX(4px);color:var(--accent,#c8203a)}
.tk-prog{display:flex;align-items:center;margin:9px 0 2px;max-width:200px}
.tk-dot{width:10px;height:10px;border-radius:50%;background:#dfe4ec;flex:none}
.tk-dot.done{background:#1b8a5a}.tk-dot.cur{background:var(--accent,#c8203a);box-shadow:0 0 0 4px rgba(200,32,58,.16)}.tk-dot.rej{background:#c8203a}
.tk-line{flex:1;height:2px;background:#dfe4ec}
.tk-none{text-align:center;color:var(--ink-soft);padding:24px 0}
html[data-theme=dark] .tk-ico{background:#24314d!important}
html[data-theme=dark] .tk-search:focus{background:#0e1524}

/* В разделе «Чат» плитки статистики не нужны — отдаём высоту переписке */
body:has(button.tab-chats.active) #statCardsRow{display:none!important}
/* .ac-app теперь всегда 100% высоты секции (#chatsSection, admin.html) -
   это надёжнее, чем угадывать отступы через calc(100vh - Npx) */

body:has(button.tab-gates.active) #statCardsRow{display:none!important}

/* Плавающие кнопки (бот, уведомления) не должны перекрывать «Отправить» */
.ac-foot{padding-right:88px!important}
#chatModal .chat-input-row,.desk-chat-foot{padding-right:88px!important}
@media(max-width:700px){.ac-foot{padding-right:76px!important}}
#acChips{padding-right:88px}

/* ---- Плеер голосовых сообщений (play/pause + прогресс), общий для кабинета, админки и заявок ---- */
.vp{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 6px;border-radius:999px;background:rgba(22,35,61,.05);min-width:168px;max-width:230px;margin-top:4px}
.msg.me .vp,.ac-msg.me .vp{background:rgba(255,255,255,.16)}
.vp-play{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:none;background:var(--accent,#c8203a);color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.msg.me .vp-play,.ac-msg.me .vp-play{background:#fff;color:var(--accent,#c8203a)}
.vp-bar{flex:1;height:4px;border-radius:999px;background:rgba(22,35,61,.14);cursor:pointer;position:relative}
.msg.me .vp-bar,.ac-msg.me .vp-bar{background:rgba(255,255,255,.3)}
.vp-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:999px;background:var(--accent,#c8203a);transition:width .1s linear}
.msg.me .vp-fill,.ac-msg.me .vp-fill{background:#fff}
.vp-time{flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;opacity:.72}
.vp.playing .vp-play{animation:vpPulse 1.1s ease-in-out infinite}
@keyframes vpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---- Системная «плашка» истории звонков в чате (пропущенный / длительность), как в WhatsApp ---- */
.call-chip-row{display:flex;justify-content:center;margin:8px 0}
.call-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:rgba(22,35,61,.06);color:var(--ink-soft,#3c4a63);font-size:12px;font-weight:600}
.call-chip.missed{background:rgba(217,62,62,.1);color:#b23a3a}
.call-chip b{font-weight:700;color:inherit}