/* ════════════════════════════════════════
   ПАТЧ: чат поддержки, тогглы, новые badge
   ════════════════════════════════════════ */

/* ── Support / Chat ── */
.chat-layout{display:grid;grid-template-columns:280px 1fr;gap:1rem;height:calc(100vh - 200px);min-height:500px}
.chat-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.chat-sidebar-head{padding:1rem 1.2rem;border-bottom:1px solid var(--border);font-weight:700;font-size:.88rem;flex-shrink:0}
.chat-ticket-list{flex:1;overflow-y:auto}
.chat-ticket{padding:.85rem 1.2rem;border-bottom:1px solid rgba(28,36,56,.5);cursor:pointer;transition:background .14s}
.chat-ticket:hover{background:rgba(0,200,248,.04)}
.chat-ticket.active{background:var(--cyan-dim);border-left:3px solid var(--cyan)}
.ct-name{font-weight:600;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-preview{font-size:.73rem;color:var(--muted);margin-top:.16rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-meta{display:flex;align-items:center;justify-content:space-between;margin-top:.28rem}
.ct-time{font-size:.66rem;color:var(--muted)}
.chat-main{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden}
.chat-head{padding:1rem 1.4rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;flex-shrink:0}
.chat-messages{flex:1;overflow-y:auto;padding:1.4rem;display:flex;flex-direction:column;gap:.9rem}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:.7rem;padding:2rem;text-align:center}
.chat-input-area{padding:1rem 1.4rem;border-top:1px solid var(--border);display:flex;gap:.8rem;align-items:flex-end;flex-shrink:0}
.chat-input-area textarea{flex:1;background:var(--bg2);border:1px solid var(--border2);color:var(--text);padding:.65rem .95rem;border-radius:var(--r-sm);font-family:var(--font);font-size:.86rem;outline:none;resize:none;transition:border-color .18s;min-height:42px;max-height:120px}
.chat-input-area textarea:focus{border-color:var(--cyan)}
.msg{max-width:72%;display:flex;flex-direction:column}
.msg.own{align-self:flex-end}
.msg-bubble{padding:.65rem .95rem;border-radius:14px;font-size:.84rem;line-height:1.6;word-break:break-word}
.msg.other .msg-bubble{background:var(--surface2);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.own .msg-bubble{background:linear-gradient(135deg,rgba(0,200,248,.18),rgba(139,92,246,.18));border:1px solid rgba(0,200,248,.2);border-bottom-right-radius:4px}
.msg-meta{font-size:.67rem;color:var(--muted);margin-top:.25rem;display:flex;gap:.4rem;align-items:center}
.msg.own .msg-meta{justify-content:flex-end}

/* ── Toggle switch ── */
.toggle-wrap{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-sm);cursor:pointer;transition:border-color .18s;user-select:none}
.toggle-wrap:hover{border-color:var(--border3)}
.toggle-sw{width:42px;height:23px;border-radius:50px;background:var(--border2);position:relative;flex-shrink:0;transition:background .2s}
.toggle-sw.on{background:var(--cyan)}
.toggle-sw::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle-sw.on::after{transform:translateX(19px)}

/* ── Extra badges ── */
.badge.b-support{background:rgba(139,92,246,.12);color:#a78bfa;border:1px solid rgba(139,92,246,.25)}
.btn-sm.vi{border-color:rgba(139,92,246,.3);color:#a78bfa}
.btn-sm.vi:hover{background:rgba(139,92,246,.1)}

/* ── Admin card ── */
.card-title{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);margin-bottom:1rem}

/* ── Responsive chat ── */
@media(max-width:860px){
  .chat-layout{grid-template-columns:1fr;grid-template-rows:220px 1fr}
  .chat-sidebar{height:220px}
  .chat-ticket-list{overflow-x:auto;display:flex;flex-direction:row}
  .chat-ticket{flex-shrink:0;width:210px;border-right:1px solid rgba(28,36,56,.5);border-bottom:none}
  .chat-ticket.active{border-left:none;border-top:3px solid var(--cyan)}
}
@media(max-width:640px){
  .chat-layout{height:calc(100vh - 160px)}
}