/* =========================================================
   MatchMate — поддержка. Слой оформления поверх support.css.
   Одна статичная страница: скроллится только переписка.
   ========================================================= */
html body.support-body{
  --s-panel:rgba(9,13,23,.88);
  --s-surface:rgba(255,255,255,.045);
  --s-line:rgba(255,255,255,.09);
  --s-line-soft:rgba(255,255,255,.06);
  --s-text:#eaf1ff;
  --s-dim:#93a5be;
  --s-accent:#3fd7f5;
  --s-grad:linear-gradient(135deg,#48dcf7 0%,#6f7bff 60%,#9a63ff 100%);
}
html body.support-body .support-page{
  width:min(1120px,100%) !important;
  margin:0 auto !important;
  padding:18px 20px 92px !important;
  min-height:0 !important;
}
html body.support-body .support-shell{
  display:flex !important;flex-direction:column !important;
  gap:14px !important;padding:0 !important;
  background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html body.support-body .support-head{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:14px !important;margin:0 !important;padding:14px 16px !important;
  border-radius:16px !important;
  background:var(--s-panel) !important;border:1px solid var(--s-line-soft) !important;
}
html body.support-body .support-eyebrow{
  margin:0 0 3px !important;font-size:10.5px !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;color:var(--s-dim) !important;font-weight:800 !important;
}
html body.support-body .support-head h1{
  margin:0 !important;font-size:22px !important;line-height:1.15 !important;
  font-weight:800 !important;color:var(--s-text) !important;
}
html body.support-body .support-status-pill{
  flex:none !important;min-height:32px !important;height:32px !important;padding:0 13px !important;
  border-radius:999px !important;
  background:rgba(46,213,115,.1) !important;border:1px solid rgba(46,213,115,.24) !important;
  color:#9df3bd !important;font-size:12.5px !important;font-weight:700 !important;
}
html body.support-body .support-status-pill::before{
  width:7px !important;height:7px !important;box-shadow:none !important;background:#63f29b !important;
}
html body.support-body .support-alert{
  margin:0 !important;padding:11px 14px !important;border-radius:14px !important;font-size:13.5px !important;
}

/* ---------- создание тикета ---------- */
html body.support-body .support-cols{
  display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,300px) !important;
  gap:14px !important;align-items:start !important;
}
html body.support-body .ticket-form{
  display:flex !important;flex-direction:column !important;gap:12px !important;
  margin:0 !important;padding:16px !important;border-radius:18px !important;
  background:var(--s-panel) !important;border:1px solid var(--s-line-soft) !important;
}
html body.support-body .support-form-row{
  display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important;margin:0 !important;
}
html body.support-body .field{display:flex !important;flex-direction:column !important;gap:6px !important;margin:0 !important}
html body.support-body .field > span{
  font-size:12.5px !important;font-weight:700 !important;color:var(--s-dim) !important;
}
html body.support-body .field input,
html body.support-body .field textarea,
html body.support-body .field .select,
html body.support-body .chat-input{
  width:100% !important;padding:11px 13px !important;border-radius:12px !important;
  background:var(--s-surface) !important;border:1px solid var(--s-line) !important;
  color:var(--s-text) !important;font-size:14px !important;font-family:inherit !important;
  box-shadow:none !important;transition:border-color .15s ease !important;
}
html body.support-body .field input{height:44px !important}
html body.support-body .field .select{
  height:44px !important;appearance:none !important;-webkit-appearance:none !important;
  background-image:linear-gradient(45deg,transparent 50%,#93a5be 50%),linear-gradient(135deg,#93a5be 50%,transparent 50%) !important;
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px !important;
  background-size:5px 5px,5px 5px !important;background-repeat:no-repeat !important;
  padding-right:36px !important;
}
html body.support-body .field textarea{
  min-height:120px !important;max-height:26vh !important;resize:none !important;line-height:1.5 !important;
}
html body.support-body .field input:focus,
html body.support-body .field textarea:focus,
html body.support-body .field .select:focus,
html body.support-body .chat-input:focus{
  outline:none !important;border-color:rgba(63,215,245,.5) !important;background:rgba(255,255,255,.06) !important;
}
html body.support-body .field-meta{
  display:flex !important;justify-content:flex-end !important;margin:0 !important;
  font-size:11.5px !important;color:var(--s-dim) !important;
}
html body.support-body .support-actions{
  display:flex !important;justify-content:flex-end !important;margin:2px 0 0 !important;padding:0 !important;
}
html body.support-body .support-actions .btn{
  min-width:170px !important;height:44px !important;padding:0 20px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border-radius:12px !important;border:0 !important;cursor:pointer !important;
  background:var(--s-grad) !important;color:#04070f !important;
  font-size:14px !important;font-weight:800 !important;font-family:inherit !important;box-shadow:none !important;
}
html body.support-body .support-actions .btn .btn-glow{display:none !important}
html body.support-body .support-actions .btn:disabled{opacity:.55 !important;cursor:not-allowed !important}

/* подсказка сбоку */
html body.support-body .support-aside{
  padding:16px !important;border-radius:18px !important;
  background:var(--s-panel) !important;border:1px solid var(--s-line-soft) !important;
}
html body.support-body .support-aside-title{
  margin:0 0 12px !important;font-size:13px !important;font-weight:800 !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;color:var(--s-dim) !important;
}
html body.support-body .support-steps{
  display:flex !important;flex-direction:column !important;gap:11px !important;
  margin:0 !important;padding:0 !important;list-style:none !important;
}
html body.support-body .support-steps li{
  display:flex !important;align-items:flex-start !important;gap:10px !important;
  font-size:13.5px !important;line-height:1.45 !important;color:#c8d6ea !important;
}
html body.support-body .support-steps li span{
  flex:none !important;width:22px !important;height:22px !important;margin-top:1px !important;
  display:grid !important;place-items:center !important;border-radius:8px !important;
  background:rgba(63,215,245,.12) !important;border:1px solid rgba(63,215,245,.26) !important;
  color:#9ce8fb !important;font-size:12px !important;font-weight:800 !important;
}
html body.support-body .support-aside-note{
  margin:14px 0 0 !important;padding:11px 12px !important;border-radius:12px !important;
  background:var(--s-surface) !important;border:1px solid var(--s-line-soft) !important;
  font-size:12.5px !important;line-height:1.45 !important;color:var(--s-dim) !important;
}

/* ---------- открытый тикет ---------- */
html body.support-body #chat-view{
  display:flex !important;flex-direction:column !important;gap:12px !important;min-height:0 !important;
}
html body.support-body #chat-view[hidden],
html body.support-body #create-ticket-view[hidden]{display:none !important}
html body.support-body .ticket-meta-card{
  display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:12px !important;
  margin:0 !important;padding:13px 15px !important;border-radius:16px !important;
  background:var(--s-panel) !important;border:1px solid var(--s-line-soft) !important;
  box-shadow:none !important;backdrop-filter:none !important;
}
html body.support-body .ticket-meta-main{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:12px !important;flex:1 1 320px !important;min-width:0 !important;
}
html body.support-body .ticket-meta-main h2{
  margin:0 !important;font-size:16px !important;font-weight:800 !important;color:var(--s-text) !important;
  overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
}
html body.support-body .ticket-meta-sub{margin:2px 0 0 !important;font-size:12.5px !important;color:var(--s-dim) !important}
html body.support-body .ticket-meta-actions{display:flex !important;align-items:center !important;gap:8px !important;flex:none !important}
html body.support-body .ticket-status-badge{
  height:28px !important;padding:0 11px !important;display:inline-flex !important;align-items:center !important;
  border-radius:999px !important;font-size:12px !important;font-weight:700 !important;
}
html body.support-body .ticket-meta-actions .btn.ghost{
  height:34px !important;padding:0 14px !important;display:inline-flex !important;align-items:center !important;
  border-radius:11px !important;cursor:pointer !important;
  background:var(--s-surface) !important;border:1px solid var(--s-line) !important;
  color:var(--s-text) !important;font-size:12.5px !important;font-weight:700 !important;font-family:inherit !important;
}
html body.support-body .ticket-meta-grid{display:flex !important;gap:8px !important;flex:none !important;margin:0 !important}
html body.support-body .ticket-meta-cell{
  display:flex !important;flex-direction:column !important;gap:1px !important;padding:7px 12px !important;
  border-radius:11px !important;background:var(--s-surface) !important;border:1px solid var(--s-line-soft) !important;
}
html body.support-body .ticket-meta-cell span{
  font-size:10.5px !important;text-transform:uppercase !important;letter-spacing:.08em !important;color:var(--s-dim) !important;
}
html body.support-body .ticket-meta-cell strong{font-size:13px !important;color:var(--s-text) !important;white-space:nowrap !important}

/* переписка: единственное, что скроллится */
html body.support-body .chat-shell{
  display:flex !important;flex-direction:column !important;min-height:0 !important;
  height:calc(100dvh - 376px) !important;min-height:240px !important;max-height:none !important;margin:0 !important;
  border-radius:18px !important;
  background:var(--s-panel) !important;border:1px solid var(--s-line-soft) !important;
  overflow:hidden !important;
}
html body.support-body .chat-messages{
  flex:1 1 auto !important;min-height:0 !important;max-height:none !important;
  padding:16px !important;gap:10px !important;background:none !important;
  overflow-y:auto !important;scrollbar-width:thin !important;
}
html body.support-body .message-content{
  max-width:min(76%,620px) !important;padding:10px 13px !important;border-radius:14px !important;
  background:var(--s-surface) !important;border:1px solid var(--s-line-soft) !important;
}
html body.support-body .message-content.own{
  margin-left:auto !important;background:rgba(63,215,245,.1) !important;border-color:rgba(63,215,245,.24) !important;
}
html body.support-body .message-content.admin{
  background:rgba(46,213,115,.09) !important;border-color:rgba(46,213,115,.2) !important;
}
html body.support-body .message-header{margin-bottom:4px !important;gap:12px !important}
html body.support-body .message-nickname{font-size:12.5px !important;font-weight:700 !important;color:#9ce8fb !important}
html body.support-body .message-content.admin .message-nickname{color:#7df0a8 !important}
html body.support-body .message-content.own .message-nickname{color:#9ce8fb !important}
html body.support-body .message-time{font-size:11px !important;color:var(--s-dim) !important}
html body.support-body .message-text{
  font-size:14px !important;line-height:1.5 !important;color:#dbe6f6 !important;
  overflow-wrap:anywhere !important;word-break:break-word !important;
}
html body.support-body .chat-input-container{
  flex:none !important;padding:10px !important;
  background:rgba(6,9,16,.6) !important;border-top:1px solid var(--s-line-soft) !important;
}
html body.support-body .chat-input-wrapper{display:flex !important;align-items:flex-end !important;gap:9px !important}
html body.support-body .chat-input{
  flex:1 1 auto !important;min-height:44px !important;max-height:110px !important;
  padding:11px 13px !important;resize:none !important;line-height:1.45 !important;
}
html body.support-body .send-btn{
  flex:none !important;min-width:120px !important;height:44px !important;padding:0 18px !important;
  border-radius:12px !important;border:0 !important;cursor:pointer !important;
  background:var(--s-grad) !important;color:#04070f !important;
  font-size:13.5px !important;font-weight:800 !important;font-family:inherit !important;
}
html body.support-body .send-btn:disabled{opacity:.45 !important}
html body.support-body .chat-hint{margin:8px 2px 0 !important;font-size:12px !important;color:var(--s-dim) !important}
html body.support-body .loading,
html body.support-body .empty-state{
  margin:auto !important;padding:20px !important;color:var(--s-dim) !important;font-size:13.5px !important;
}

/* ---------- телефон ---------- */
@media (max-width:900px){
  html body.support-body .support-cols{grid-template-columns:minmax(0,1fr) !important}
  html body.support-body .support-aside{order:2 !important}
}
@media (max-width:760px){
  html body.support-body .support-page{padding:12px 12px calc(96px + env(safe-area-inset-bottom,0px)) !important}
  html body.support-body .support-shell{gap:10px !important}
  html body.support-body .support-head{padding:12px 14px !important;border-radius:14px !important}
  html body.support-body .support-head h1{font-size:19px !important}
  html body.support-body .support-status-pill{
    height:28px !important;min-height:28px !important;padding:0 11px !important;font-size:11.5px !important;
  }
  html body.support-body .ticket-form{padding:14px !important;gap:10px !important;border-radius:16px !important}
  html body.support-body .support-form-row{grid-template-columns:1fr !important;gap:10px !important}
  html body.support-body .field textarea{min-height:104px !important;max-height:22vh !important}
  html body.support-body .support-actions .btn{width:100% !important;min-width:0 !important}
  /* подсказку на телефоне не показываем — страница должна помещаться в экран */
  html body.support-body .support-aside{display:none !important}
  html body.support-body .support-head{
    flex-direction:row !important;flex-wrap:nowrap !important;
    align-items:center !important;justify-content:space-between !important;text-align:left !important;
  }
  html body.support-body .support-head-main{text-align:left !important;min-width:0 !important}
  html body.support-body .field textarea{min-height:132px !important;max-height:30vh !important}
  html body.support-body .ticket-meta-card{
    padding:11px 13px !important;gap:9px !important;border-radius:14px !important;text-align:left !important;
  }
  html body.support-body .ticket-meta-main{
    flex:1 1 100% !important;flex-direction:row !important;align-items:flex-start !important;
    justify-content:space-between !important;gap:10px !important;text-align:left !important;
  }
  html body.support-body .ticket-meta-main > div:first-child{min-width:0 !important;flex:1 1 auto !important}
  html body.support-body .ticket-meta-main h2{
    font-size:15px !important;white-space:normal !important;
    display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;
  }
  html body.support-body .ticket-meta-actions{
    flex-direction:column !important;align-items:flex-end !important;gap:6px !important;flex:none !important;
  }
  html body.support-body .ticket-status-badge{height:24px !important;padding:0 9px !important;font-size:11px !important}
  html body.support-body .ticket-meta-actions .btn.ghost{height:30px !important;padding:0 11px !important;font-size:11.5px !important}
  html body.support-body .ticket-meta-grid{
    flex:1 1 100% !important;flex-direction:row !important;gap:8px !important;
  }
  html body.support-body .ticket-meta-cell{flex:1 1 0 !important;min-width:0 !important;padding:6px 10px !important}
  html body.support-body .ticket-meta-cell strong{overflow:hidden !important;text-overflow:ellipsis !important}
  html body.support-body .chat-shell{
    height:calc(100dvh - 436px) !important;min-height:190px !important;border-radius:16px !important;
  }
  html body.support-body .chat-messages{padding:12px !important}
  html body.support-body .message-content{max-width:86% !important}
  html body.support-body .chat-input-wrapper{
    flex-direction:row !important;align-items:flex-end !important;gap:8px !important;
  }
  html body.support-body .chat-input{min-height:42px !important;max-height:96px !important}
  html body.support-body .send-btn{min-width:0 !important;width:46px !important;height:42px !important;padding:0 !important;font-size:0 !important;margin:0 !important}
  html body.support-body .send-btn::after{content:"\27A4" !important;font-size:16px !important;line-height:1 !important}
}