/* Техподдержка: панель чата (контраст на тёмном фоне) */
.zk-support-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 12000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.55);
  background: rgba(124, 58, 237, 0.92);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.zk-support-fab:hover { filter: brightness(1.06); }
.zk-support-fab .badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fbbf24;
  color: #1f1635;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.zk-support-fab .badge[hidden] { display: none; }

.zk-support-panel {
  position: fixed;
  right: 16px;
  bottom: 72px;
  width: min(420px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 100px));
  z-index: 12001;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: #121829;
  color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.zk-support-panel[hidden] { display: none !important; }
.zk-support-panel * {
  color: inherit;
  box-sizing: border-box;
}
.zk-support-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(124,58,237,.22);
  color: #fff;
}
.zk-support-panel-head strong {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: #fff !important;
}
.zk-support-panel-head button {
  border: 0;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9) !important;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.zk-support-app {
  display: grid;
  gap: 0;
  min-height: 0;
  flex: 1;
  color: rgba(255, 255, 255, 0.94);
}
@media (min-width: 900px) {
  .zk-support-app[data-is-agent="1"] {
    grid-template-columns: 280px 1fr;
    min-height: 560px;
  }
}
.zk-support-list, .zk-support-chat {
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.94);
}
.zk-support-list-head, .zk-support-chat-head {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,.88) !important;
}
.zk-support-thread-items { overflow: auto; flex: 1; }
.zk-support-thread-item {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,.06);
  background: transparent; color: rgba(255,255,255,.92) !important; cursor: pointer;
}
.zk-support-thread-item:hover, .zk-support-thread-item.active {
  background: rgba(124,58,237,.16);
}
.zk-support-thread-item .u { font-weight: 800; font-size: 13px; color: #fff !important; }
.zk-support-thread-item .m { font-size: 11px; color: rgba(255,255,255,.55) !important; margin-top: 4px; }
.zk-support-thread-item .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #fbbf24; margin-right: 6px;
}

.zk-support-msgs {
  flex: 1; overflow: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: #0f1422;
}
.zk-support-bubble {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: #fff !important;
}
.zk-support-bubble.user {
  align-self: flex-end;
  background: #6d28d9;
  border: 1px solid rgba(167, 139, 250, 0.45);
  color: #fff !important;
}
.zk-support-bubble.tim {
  align-self: flex-start;
  background: #1f2937;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff !important;
}
.zk-support-bubble .meta {
  font-size: 11px;
  color: rgba(255,255,255,.65) !important;
  margin-bottom: 6px;
  font-weight: 600;
}
.zk-support-bubble .photos {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.zk-support-bubble .photos img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18); cursor: zoom-in;
}

.zk-support-compose {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: grid; gap: 10px;
  background: #151b2c;
}
.zk-support-compose textarea {
  width: 100%; min-height: 72px; resize: vertical;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: #0c101c; color: #fff !important; padding: 12px 14px;
  font: inherit; box-sizing: border-box;
}
.zk-support-compose textarea::placeholder {
  color: rgba(255,255,255,.45);
}
.zk-support-compose-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.zk-support-compose-row .btn,
.zk-support-compose-row button,
.zk-support-compose-row label.btn {
  cursor: pointer;
  border: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
}
.zk-support-btn-photo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
}
.zk-support-btn-send {
  margin-left: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  color: #fff !important;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(91, 33, 182, 0.45);
}
.zk-support-btn-send:disabled {
  opacity: 0.55;
  box-shadow: none;
}
.zk-support-btn-send:not(:disabled):active {
  transform: scale(0.98);
}
.zk-support-pending {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.zk-support-pending img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
}
.zk-support-empty {
  margin: auto; padding: 24px; text-align: center;
  color: rgba(255,255,255,.6) !important; font-size: 13px;
}

.zk-support-panel .zk-support-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.zk-support-panel .zk-support-chat {
  flex: 1;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}


/* iOS / кабинет: глобальные стили кнопок и текста не должны ломать чат */
html.zk-cab-client-mobile .zk-support-panel,
body.zk-android-webview .zk-support-panel,
.zk-support-panel {
  color: #fff !important;
}
.zk-support-panel .zk-support-bubble,
.zk-support-panel .zk-support-bubble.user,
.zk-support-panel .zk-support-bubble.tim,
.zk-support-panel .zk-support-bubble .meta,
.zk-support-panel .zk-support-compose textarea,
.zk-support-panel .zk-support-btn-photo,
.zk-support-panel .zk-support-btn-send {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.zk-support-panel .zk-support-btn-send {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  border: 0 !important;
}
.zk-support-panel .zk-support-compose textarea::placeholder {
  color: rgba(255,255,255,.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,.45);
}

.zk-support-thread-item { cursor: pointer; }
.zk-support-thread-item .p {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.72) !important;
  margin-top: 2px;
}
.zk-support-user-link {
  color: #c4b5fd !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 800;
}
.zk-support-user-link:hover { color: #ddd6fe !important; }
.zk-support-head-phone {
  font-weight: 600;
  color: rgba(255,255,255,.65);
  font-size: 13px;
}