/* ============================================================
   Empir.Fun — chat.css
   Чат клиента (неон): виджет на странице обмена + страница общего чата.
   Все правила scoped под body.neon-account.
   ============================================================ */

/* ---------- Виджет чата ---------- */
.neon-account .ef-chat{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--border);border-radius:var(--radius);
  margin-top:22px;overflow:hidden;
}
.neon-account .ef-chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border);
  background:rgba(0,229,255,.04);
}
.neon-account .ef-chat-head h3{
  display:block;font-size:17px;font-weight:800;margin:0;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.neon-account .ef-chat-head .ef-chat-sub{font-size:12.5px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.neon-account .ef-chat-status{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  color:var(--muted);white-space:nowrap;
}
.neon-account .ef-chat-status .d{
  width:8px;height:8px;border-radius:50%;background:var(--muted-2);display:inline-block;
}
.neon-account .ef-chat-status.online{color:var(--green)}
.neon-account .ef-chat-status.online .d{background:var(--green);box-shadow:0 0 8px rgba(25,240,160,.8)}
.neon-account .ef-chat-status.offline{color:var(--red)}
.neon-account .ef-chat-status.offline .d{background:var(--red)}

.neon-account .ef-chat-body{
  height:340px;overflow-y:auto;padding:18px 20px;
  display:flex;flex-direction:column;gap:10px;
  background:
    radial-gradient(600px 200px at 20% 0%,rgba(0,229,255,.05),transparent 60%),
    radial-gradient(600px 200px at 80% 100%,rgba(139,92,255,.05),transparent 60%);
}
.neon-account .ef-chat-body::-webkit-scrollbar{width:8px}
.neon-account .ef-chat-body::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}

.neon-account .ef-chat-empty{
  margin:auto;text-align:center;color:var(--muted);font-size:14px;line-height:1.6;
  max-width:340px;
}
.neon-account .ef-chat-empty i{font-size:30px;display:block;margin-bottom:10px;color:var(--cyan-dim)}

.neon-account .ef-msg{max-width:78%;display:flex;flex-direction:column;gap:3px}
.neon-account .ef-msg .ef-msg-meta{font-size:11px;color:var(--muted-2);font-family:var(--mono);padding:0 4px}
.neon-account .ef-msg .ef-msg-bubble{
  padding:11px 15px;border-radius:14px;font-size:14.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
}
/* клиент — справа (неон циан), staff — слева (фиолет) */
.neon-account .ef-msg.client{align-self:flex-end;align-items:flex-end}
.neon-account .ef-msg.client .ef-msg-bubble{
  background:linear-gradient(135deg,rgba(0,229,255,.16),rgba(0,229,255,.07));
  border:1px solid rgba(0,229,255,.35);color:var(--text);
  border-bottom-right-radius:4px;
  box-shadow:0 4px 18px rgba(0,229,255,.10);
}
.neon-account .ef-msg.staff{align-self:flex-start;align-items:flex-start}
.neon-account .ef-msg.staff .ef-msg-bubble{
  background:linear-gradient(135deg,rgba(139,92,255,.16),rgba(139,92,255,.07));
  border:1px solid rgba(139,92,255,.4);color:var(--text);
  border-bottom-left-radius:4px;
  box-shadow:0 4px 18px rgba(139,92,255,.10);
}
.neon-account .ef-msg.staff .ef-msg-meta .ef-role{color:var(--purple);font-weight:700}
/* системные сообщения (статусы обмена) — по центру */
.neon-account .ef-msg.system{max-width:100%;align-self:center;align-items:center}
.neon-account .ef-msg.system .ef-msg-bubble{
  background:rgba(10,15,28,.55);
  border:1px dashed var(--border-2);
  color:var(--muted);font-size:13px;line-height:1.45;
  padding:8px 14px;border-radius:999px;
  display:flex;align-items:center;gap:8px;
}
.neon-account .ef-msg.system .ef-sys-ico{color:var(--cyan-dim);font-size:13px;flex:none}
.neon-account .ef-msg.system .ef-msg-text{padding:0}
.neon-account .ef-msg.system .ef-msg-meta{padding:0}

.neon-account .ef-chat-input{
  display:flex;flex-direction:column;gap:10px;padding:14px 20px;border-top:1px solid var(--border);
  background:rgba(10,15,28,.6);
}
.neon-account .ef-chat-input textarea{
  width:100%;resize:none;height:64px;max-height:140px;
  background:var(--bg-2);border:1px solid var(--border-2);color:var(--text);
  padding:12px 14px;border-radius:12px;font-size:14.5px;line-height:1.5;font-family:var(--font);
  outline:none;transition:border-color .18s, box-shadow .18s;
}
.neon-account .ef-chat-input textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.15)}
.neon-account .ef-chat-input textarea::placeholder{color:var(--muted-2)}
/* строка кнопок под полем ввода: [Прикрепить] ... [Отправить] */
.neon-account .ef-chat-actions{
  display:flex;align-items:center;gap:10px;
}
.neon-account .ef-chat-send{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--cyan),#22d3ee);color:#04121a;
  border:none;border-radius:12px;padding:0 20px;height:46px;
  font-weight:800;font-size:14.5px;font-family:var(--font);cursor:pointer;
  box-shadow:var(--glow-cyan);transition:filter .18s, transform .15s;
}
.neon-account .ef-chat-send:hover{filter:brightness(1.08)}
.neon-account .ef-chat-send:active{transform:translateY(1px)}
.neon-account .ef-chat-send:disabled{opacity:.5;cursor:default;filter:none}
.neon-account .ef-chat-hint{
  padding:0 20px 14px;font-size:11.5px;color:var(--muted-2);font-family:var(--mono);
  background:rgba(10,15,28,.6);
}

/* ---------- Бейдж непрочитанных в меню кабинета ---------- */
.neon-account .user-menu a .ef-chat-badge{
  display:none;position:absolute;top:-7px;right:-7px;
  min-width:20px;height:20px;line-height:20px;padding:0 5px;
  border-radius:10px;background:var(--red);color:#fff;
  font-size:11px;font-weight:800;text-align:center;font-family:var(--mono);
  box-shadow:0 0 10px rgba(255,84,112,.6);
}
.neon-account .user-menu li{position:relative}
.neon-account .user-menu a{position:relative}
.neon-account .user-menu a .ef-chat-badge.show{display:inline-block}
.neon-account .user-menu a .ef-chat-badge.pulse{animation:efchatpulse 1.2s ease-out 3}
@keyframes efchatpulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,84,112,.7)}
  70%{transform:scale(1.25);box-shadow:0 0 0 10px rgba(255,84,112,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,84,112,0)}
}

/* ---------- Картинки в сообщениях ---------- */
.neon-account .ef-msg .ef-msg-bubble.has-img{padding:6px 8px}
.neon-account .ef-msg .ef-msg-img{
  display:block;max-width:240px;max-height:240px;width:auto;height:auto;
  border-radius:10px;border:1px solid var(--border);cursor:pointer;
  background:var(--bg-2);
}
.neon-account .ef-msg .ef-msg-text{display:inline-block;white-space:pre-wrap;word-break:break-word;padding:4px 6px}
.neon-account .ef-msg .ef-msg-bubble:not(.has-img) .ef-msg-text{padding:5px 9px}

/* ---------- Прикреплённая картинка (превью перед отправкой) ---------- */
.neon-account .ef-chat-attach{display:none;padding:0 20px;background:rgba(10,15,28,.6)}
.neon-account .ef-chat-attach.show{display:block}
.neon-account .ef-attach-row{
  display:flex;align-items:center;gap:10px;padding:10px 0;
}
.neon-account .ef-attach-img{
  width:56px;height:56px;object-fit:cover;border-radius:10px;
  border:1px solid var(--border-2);background:var(--bg-2);flex:none;
}
.neon-account .ef-attach-name{
  flex:1;font-size:12.5px;color:var(--muted);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.neon-account .ef-attach-rm{
  flex:none;width:30px;height:30px;border-radius:8px;cursor:pointer;
  background:rgba(255,84,112,.12);border:1px solid rgba(255,84,112,.4);
  color:var(--red);font-size:13px;line-height:1;
}
.neon-account .ef-attach-rm:hover{background:rgba(255,84,112,.22)}

/* ---------- Кнопка-скрепка в строке кнопок ---------- */
.neon-account .ef-chat-clip{
  flex:none;
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 18px;border-radius:12px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--border-2);
  color:var(--muted);font-size:14px;font-weight:700;font-family:var(--font);
  transition:color .18s, border-color .18s, box-shadow .18s;
}
.neon-account .ef-chat-clip i{font-size:16px}
.neon-account .ef-chat-clip:hover{
  color:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,229,255,.12);
}
.neon-account .ef-chat-file{display:none}

/* ---------- Плавающая кнопка чата (правый нижний угол) ---------- */
.ef-fab{
  position:fixed;right:22px;bottom:22px;z-index:9000;
  width:58px;height:58px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  border:none;color:#04121a;font-size:24px;
  box-shadow:0 6px 24px rgba(0,229,255,.35), 0 0 0 1px rgba(0,229,255,.4);
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.ef-fab:hover{transform:translateY(-2px) scale(1.05);filter:brightness(1.08)}
.ef-fab:active{transform:translateY(0) scale(.98)}
.ef-fab i{color:#04121a}
.ef-fab-dot{
  display:none;position:absolute;top:2px;right:2px;
  width:16px;height:16px;border-radius:50%;
  background:var(--red);border:2px solid #0a0f1c;
  box-shadow:0 0 8px rgba(255,84,112,.8);
}
.ef-fab.has-unread .ef-fab-dot{display:block;animation:efchatpulse 1.4s ease-out infinite}

/* ---------- Попап чата (страницы без виджета) ---------- */
.ef-chat-overlay{
  position:fixed;inset:0;z-index:9500;
  background:rgba(4,8,16,.55);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:flex-end;
}
.ef-chat-popup{
  position:relative;width:400px;max-width:calc(100vw - 32px);
  height:auto;max-height:min(640px, calc(100vh - 40px));
  display:flex;flex-direction:column;margin:0 16px 16px 0;
  border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px var(--border);
  animation:efpopin .22s ease-out;
}
@keyframes efpopin{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.ef-chat-popup .ef-chat-body{height:320px;flex:none}
.ef-chat-popup .ef-chat-head{
  justify-content:space-between;
}
.ef-chat-head-right{display:flex;align-items:center;gap:10px}
.ef-chat-close{
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--border);
  color:var(--muted);font-size:14px;line-height:1;flex:none;
  transition:color .18s, border-color .18s;
}
.ef-chat-close:hover{color:var(--red);border-color:var(--red)}

/* ---------- Гостевой попап: войти / зарегистрироваться ---------- */
.neon-account.ef-chat-auth .ef-chat-auth-body{
  padding:30px 26px 26px;text-align:center;
  background:
    radial-gradient(400px 160px at 50% 0%,rgba(0,229,255,.06),transparent 70%);
}
.neon-account .ef-chat-auth-icon{
  width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:linear-gradient(135deg,rgba(0,229,255,.14),rgba(139,92,255,.14));
  border:1px solid rgba(0,229,255,.35);color:var(--cyan);
  box-shadow:0 0 24px rgba(0,229,255,.18);
}
.neon-account .ef-chat-auth-title{
  margin:0 0 10px;font-size:17px;font-weight:800;color:var(--text);
}
.neon-account .ef-chat-auth-text{
  margin:0 0 22px;font-size:13.5px;line-height:1.65;color:var(--muted);
  max-width:320px;margin-left:auto;margin-right:auto;
}
.neon-account .ef-chat-auth-btns{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
.neon-account .ef-chat-auth-btns .btn{
  width:auto;flex:1;min-width:130px;margin-top:0;
  padding:13px 18px;font-size:15px;border-radius:11px;
}
.neon-account .ef-chat-auth-btns .btn-primary{box-shadow:var(--glow-cyan)}
.neon-account .ef-chat-auth-btns .btn-ghost:hover{background:rgba(0,229,255,.06)}

/* ---------- Мобильная вёрстка ---------- */
@media (max-width:640px){
  .neon-account .ef-chat-body{height:280px;padding:14px}
  .neon-account .ef-msg{max-width:88%}
  .neon-account .ef-chat-head{flex-wrap:wrap}
  .ef-fab{right:16px;bottom:16px;width:54px;height:54px;font-size:22px}
  .ef-chat-overlay{align-items:flex-end;justify-content:center}
  .ef-chat-popup{width:100%;max-width:100%;margin:0 0 0 0;border-radius:16px 16px 0 0}
}