:root {
  --inprox-ai-primary: #64005f;
}

#inprox-ai-chat-root {
  position: fixed !important;
  z-index: 2147483000 !important;
  right: 20px !important;
  bottom: 20px !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

#inprox-ai-chat-root * {
  box-sizing: border-box;
}

.inprox-ai-fab {
  min-width: 148px;
  height: 56px;
  border-radius: 999px;
  border: none;
  background: var(--inprox-ai-primary);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  font-size: 15px;
}

.inprox-ai-fab span {
  font-size: 22px;
  line-height: 1;
}

.inprox-ai-fab strong {
  font-size: 15px;
  line-height: 1;
  color: #fff;
}

.inprox-ai-panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: 380px;
  max-width: calc(100vw - 28px);
  height: 560px;
  max-height: calc(100vh - 110px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  display: none;
  flex-direction: column;
  border: 1px solid rgba(100, 0, 95, .14);
}

.inprox-ai-panel.is-open {
  display: flex;
}

.inprox-ai-header {
  background: var(--inprox-ai-primary);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.inprox-ai-header strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
}

.inprox-ai-header span {
  display: block;
  font-size: 12px;
  opacity: .86;
  margin-top: 2px;
  color: #fff;
}

.inprox-ai-close {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.inprox-ai-prechat {
  padding: 20px;
  background: #fbf8fb;
  flex: 1;
  overflow-y: auto;
}

.inprox-ai-prechat h3 {
  margin: 0 0 8px;
  color: #211523;
  font-size: 18px;
}

.inprox-ai-prechat p {
  margin: 0 0 16px;
  color: #665b68;
  font-size: 13px;
  line-height: 1.45;
}

.inprox-ai-prechat-form input,
.inprox-ai-prechat-form select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  background: #fff;
  color: #222;
}

.inprox-ai-prechat-form input:focus,
.inprox-ai-prechat-form select:focus {
  outline: none;
  border-color: var(--inprox-ai-primary);
}

.inprox-ai-prechat-form button {
  width: 100%;
  border: none;
  background: var(--inprox-ai-primary);
  color: #fff;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}

.inprox-ai-prechat-form button:disabled {
  opacity: .7;
  cursor: wait;
}

.inprox-ai-prechat-error {
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #ffd2cc;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}

.inprox-ai-chat-area {
  flex: 1;
  overflow: hidden;
  background: #fbf8fb;
  display: flex;
  flex-direction: column;
}

.inprox-ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: #fbf8fb;
}

.inprox-ai-msg {
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 88%;
  clear: both;
  word-break: break-word;
}

.inprox-ai-bot {
  background: #fff;
  color: #26202a;
  border: 1px solid rgba(100, 0, 95, .10);
  float: left;
}

.inprox-ai-user {
  background: var(--inprox-ai-primary);
  color: #fff;
  float: right;
}

.inprox-ai-typing {
  display: none;
  padding: 5px 14px;
  font-size: 12px;
  color: #716575;
  background: #fbf8fb;
  flex-shrink: 0;
}

.inprox-ai-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

.inprox-ai-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
  font-size: 14px;
  color: #222;
  background: #fff;
}

.inprox-ai-input:focus {
  border-color: var(--inprox-ai-primary);
}

.inprox-ai-send {
  border: none;
  background: var(--inprox-ai-primary);
  color: #fff;
  padding: 0 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

@media (max-width: 480px) {
  #inprox-ai-chat-root {
    right: 14px !important;
    bottom: 14px !important;
  }
  .inprox-ai-fab {
    min-width: 134px;
    height: 52px;
  }
  .inprox-ai-panel {
    right: -2px;
    bottom: 66px;
    width: calc(100vw - 24px);
    height: min(600px, calc(100vh - 95px));
  }
}