/* Step 60: support bot UI helpers */
.nik60-bot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  padding: 9px;
  border: 1px solid rgba(125, 180, 255, .22);
  border-radius: 18px;
  background: rgba(240, 249, 255, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nik60-bot-badge,
.nik60-bot-bar button {
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, .20);
  background: rgba(255,255,255,.74);
  color: #075985;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.nik60-bot-badge {
  display: inline-flex;
  align-items: center;
}

.nik60-bot-bar button {
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.nik60-bot-bar button:hover {
  transform: translateY(-1px);
  background: rgba(224,242,254,.92);
  border-color: rgba(14,165,233,.36);
}


.nik61-support-bot-item {
  position: relative;
}

.nik61-pin {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  border-radius: 999px;
  background: rgba(224,242,254,.92);
  color: #0369a1;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}


/* Step 62: keep the pinned badge only on the bot chat card */
.nik61-pin {
  display: none !important;
}

[data-step62-bot-chat-card="true"] {
  position: relative !important;
}

[data-step62-bot-chat-card="true"] > .nik61-pin {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex !important;
  align-items: center;
  border-radius: 999px;
  background: rgba(224,242,254,.96);
  color: #0369a1;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

/* Step 62: names in participants/search should be readable */
.nik62-participants-panel button,
.nik62-employees-search-panel button,
.nik62-employees-search-panel label {
  align-items: flex-start !important;
}

.nik62-participants-panel p,
.nik62-participants-panel span,
.nik62-employees-search-panel p,
.nik62-employees-search-panel span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
}

.nik62-participants-panel button > div,
.nik62-participants-panel button > span,
.nik62-employees-search-panel button > span,
.nik62-employees-search-panel label > span {
  min-width: 0 !important;
  max-width: 100% !important;
}

.nik62-participants-panel button span[class*="rounded-full"],
.nik62-employees-search-panel button span[class*="rounded-full"] {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Step 63: fix right communications panel employee/group cards */
.nik63-people-list,
.nik63-group-list {
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

.nik63-people-list *,
.nik63-group-list * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
}

.nik63-employee-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-areas:
    "avatar text"
    "avatar status" !important;
  align-items: center !important;
  gap: 7px 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 18px 34px -30px rgba(15,23,42,.22) !important;
}

.nik63-employee-card:hover {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(14,165,233,.28) !important;
}

.nik63-employee-card > :first-child {
  grid-area: avatar !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  align-self: start !important;
}

.nik63-employee-text {
  grid-area: text !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.nik63-employee-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
}

.nik63-employee-position {
  display: block !important;
  max-width: 100% !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.nik63-employee-card > .nik63-status {
  grid-area: status !important;
  justify-self: start !important;
  align-self: start !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

.nik63-group-card {
  display: grid !important;
  grid-template-columns: auto 36px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.nik63-group-card > input {
  flex: 0 0 auto !important;
}

.nik63-group-card > :nth-child(2) {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}

.nik63-group-text {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (max-width: 1280px) {
  .nik63-employee-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }
  .nik63-employee-card > :first-child {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }
}