/* Njuškalo najam portal — жёлтый FAB + свой ТП (как на posao), без зависимости от Tailwind JIT */

body.njn-land .hidden,
body.njn-how .hidden {
  display: none !important;
}

body.njn-land .nj-support-fab,
body.njn-how .nj-support-fab,
#supportFab.nj-support-fab {
  position: fixed !important;
  right: 16px !important;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 10250 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px 0 10px;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fdcd00 !important;
  color: #1a1a1a !important;
  font: 800 13px/1 Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  box-shadow: 0 8px 22px rgba(253, 205, 0, 0.45);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.njn-land .nj-support-fab__mark,
body.njn-how .nj-support-fab__mark,
#supportFab.nj-support-fab .nj-support-fab__mark {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
}

body.njn-land .nj-support-fab:hover,
body.njn-how .nj-support-fab:hover,
#supportFab.nj-support-fab:hover {
  background: #e6b800 !important;
}

body.njn-land .nj-support-fab:focus-visible,
body.njn-how .nj-support-fab:focus-visible {
  outline: 3px solid rgba(0, 159, 227, 0.35);
  outline-offset: 2px;
}

body.njn-land #supportPanel,
body.njn-how #supportPanel,
body.njn-land .nj-tp-panel,
body.njn-how .nj-tp-panel {
  position: fixed;
  z-index: 10260;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: min(520px, 72vh);
  max-height: calc(100dvh - 24px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  border: 1px solid #e5e7eb;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #1a1a1a;
}

body.njn-land #supportPanel.support-panel-open,
body.njn-how #supportPanel.support-panel-open,
body.njn-land #supportPanel:not(.hidden),
body.njn-how #supportPanel:not(.hidden) {
  display: flex !important;
}

body.njn-land #supportPanel.hidden,
body.njn-how #supportPanel.hidden {
  display: none !important;
}

@media (min-width: 640px) {
  body.njn-land #supportPanel,
  body.njn-how #supportPanel,
  body.njn-land .nj-tp-panel,
  body.njn-how .nj-tp-panel {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: min(380px, calc(100vw - 24px));
  }
}

body.njn-land.support-open .nj-support-fab,
body.njn-how.support-open .nj-support-fab {
  display: none !important;
}

/* Шапка / сообщения / ввод — явные стили (innerHTML не попадает в Tailwind CDN) */
body.njn-land #supportPanel > div:first-child,
body.njn-how #supportPanel > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 18px;
  background: linear-gradient(90deg, #1a1a1a 0%, #fdcd00 100%);
  color: #fff;
}

body.njn-land #supportPanel > div:first-child .text-\[15px\],
body.njn-how #supportPanel > div:first-child .text-\[15px\],
body.njn-land #supportPanel > div:first-child [class*="font-semibold"],
body.njn-how #supportPanel > div:first-child [class*="font-semibold"] {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

body.njn-land #supportPanel > div:first-child .text-white\/80,
body.njn-how #supportPanel > div:first-child .text-white\/80 {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

body.njn-land #supportPanel #supportChatMessages,
body.njn-how #supportPanel #supportChatMessages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.njn-land #supportPanel > div:last-child,
body.njn-how #supportPanel > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

body.njn-land #supportChatInput,
body.njn-how #supportChatInput {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  outline: none;
  background: #f9fafb;
  font-size: 13px;
  color: #1a1a1a;
}

body.njn-land #supportChatSend,
body.njn-how #supportChatSend {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #fdcd00 !important;
  color: #1a1a1a !important;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

body.njn-land #supportChatSend:hover,
body.njn-how #supportChatSend:hover {
  background: #e6b800 !important;
}

body.njn-land #supportPanel button[onclick*="supportChatAttach"],
body.njn-how #supportPanel button[onclick*="supportChatAttach"] {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #4b5563;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

body.njn-land #supportPanel button[aria-label],
body.njn-how #supportPanel button[aria-label] {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.njn-fab--pulse {
  animation: njnFabPulse 0.9s ease;
}

@keyframes njnFabPulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.06); }
}

/* На портале никогда не прятать наш FAB через Smartsupp-хаки */
html[data-nj-stan-tp="own"] #supportFab.nj-support-fab,
html[data-nj-stan-tp="own"] body.njn-land #supportFab,
html[data-nj-stan-tp="own"] body.njn-how #supportFab {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html[data-nj-stan-tp="own"].support-open #supportFab,
html[data-nj-stan-tp="own"] body.support-open #supportFab {
  display: none !important;
}