/* KHK - Voiceflow Widget Custom Styles */
/* Brand: #F8263E (red/pink), #F8263E (red/pink), #FFFFFF (white) */

/* === LAUNCHER CONTAINER === */
.vfrc-launcher__container {
  z-index: 9999 !important;
}

/* === LAUNCHER - CLOSED STATE (title="Open chat agent") === */
.vfrc-launcher[title="Open chat agent"] {
  background: transparent !important;
  border: 2px solid #F8263E !important;
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  max-width: 100px !important;
  max-height: 100px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  overflow: visible !important;
}

.vfrc-launcher[title="Open chat agent"] .vfrc-launcher__inner {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

.vfrc-launcher[title="Open chat agent"] .vfrc-launcher__chevron {
  display: none !important;
}

.vfrc-launcher[title="Open chat agent"] .vfrc-launcher--media-icon {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

.vfrc-launcher[title="Open chat agent"]:hover .vfrc-launcher--media-icon {
  transform: scale(1.02) !important;
  transition: transform 0.2s ease !important;
}

/* === LAUNCHER - OPENED STATE (title="Close chat agent") === */
.vfrc-launcher[title="Close chat agent"] {
  background: #F8263E !important;
  border: none !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.vfrc-launcher[title="Close chat agent"]:hover {
  background: #F8263E !important;
}

.vfrc-launcher[title="Close chat agent"] .vfrc-launcher__inner {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

.vfrc-launcher[title="Close chat agent"] .vfrc-launcher__chevron {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  color: white !important;
}

.vfrc-launcher[title="Close chat agent"] .vfrc-launcher__chevron path {
  fill: white !important;
}

.vfrc-launcher[title="Close chat agent"] .vfrc-launcher--media-icon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* === CHAT CONTAINER === */
.vfrc-chat__container,
.vfrc-chat__container-inner,
.vfrc-chat {
  border-radius: 16px !important;
}

.vfrc-chat__container {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  z-index: 10000 !important; /* Higher than launcher to prevent overlap */
}

/* === MOBILE Z-INDEX FIX === */
/* On mobile, ensure the chat widget is above the launcher button */
@media (max-width: 768px) {
  .vfrc-chat__container {
    z-index: 10001 !important;
  }

  /* Lower launcher z-index when widget is open (close button visible) */
  .vfrc-launcher[title="Close chat agent"] {
    z-index: 9998 !important;
  }

  .vfrc-launcher__container:has(.vfrc-launcher[title="Close chat agent"]) {
    z-index: 9998 !important;
  }
}

/* === HEADER === */
.vfrc-header {
  background: #F8263E !important;
  color: white !important;
}

.vfrc-header .vfrc-avatar {
  border: none !important;
}

.vfrc-header--title,
.vfrc-header--button,
.vfrc-header--icon,
.vfrc-header--icon svg {
  color: white !important;
}

.vfrc-header--icon svg {
  fill: white !important;
}

.vfrc-header--button {
  background: transparent !important;
  border: none !important;
}

.vfrc-header--button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* === MESSAGES === */
.vfrc-message,
.vfrc-system-response,
.vfrc-system-response--container,
.vfrc-message .markdown,
.vfrc-message .markdown p {
  text-align: left !important;
}

.vfrc-system-response--action .vfrc-button {
  background: #FFFFFF !important;
  color: #F8263E !important;
  border: 1px solid #F8263E !important;
  border-radius: 20px !important;
}

.vfrc-system-response--action .vfrc-button:hover {
  background: #F8263E !important;
  color: white !important;
}

.vfrc-system-response .vfrc-avatar {
  border: 2px solid #FFFFFF !important;
}

/* === INPUT & FOOTER === */
.vfrc-footer {
  background: white !important;
}

.vfrc-input-container {
  border: 1px solid #e0e0e0 !important;
  border-radius: 24px !important;
}

.vfrc-input-container:focus-within {
  border-color: #F8263E !important;
  box-shadow: 0 0 0 2px rgba(248, 38, 62, 0.1) !important;
}

.vfrc-chat-focus-ring {
  border-color: #F8263E !important;
}

.vfrc-chat-input__send,
.vfrc-footer__content-scroll-to-bottom-button {
  background: #F8263E !important;
  color: white !important;
  border-radius: 50% !important;
}

.vfrc-chat-input__send:hover:not(:disabled) {
  background: #F8263E !important;
}

.vfrc-chat-input__send:disabled {
  background: #ccc !important;
  opacity: 0.6 !important;
}

.vfrc-chat-input__send-icon {
  color: white !important;
}

.vfrc-chat-input__audio-input,
.vfrc-chat-input__audio-input-icon {
  color: #F8263E !important;
}

.vfrc-chat-input__audio-input:hover {
  color: #F8263E !important;
}

#vfrc-start-chat,
.vfrc-footer__start-button .vfrc-button {
  background: #F8263E !important;
  color: white !important;
  border-radius: 8px !important;
  border: none !important;
}

#vfrc-start-chat:hover,
.vfrc-footer__start-button .vfrc-button:hover {
  background: #F8263E !important;
}

/* === PRIVACY SCREEN === */
.vfrc-privacy {
  background: white !important;
  border-radius: 16px !important;
}

.vfrc-privacy__title {
  color: #F8263E !important;
  font-weight: 600 !important;
}

.vfrc-privacy__description {
  color: #666 !important;
}

.vfrc-privacy__primary-button {
  background: #F8263E !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
}

.vfrc-privacy__primary-button:hover {
  background: #F8263E !important;
}

.vfrc-privacy__secondary-button {
  color: #F8263E !important;
  border: 1px solid #F8263E !important;
  background: transparent !important;
  border-radius: 8px !important;
}

.vfrc-privacy__secondary-button:hover {
  background: #FFFFFF !important;
}

.vfrc-privacy__secondary-button-icon,
.vfrc-privacy__secondary-button-label {
  color: #F8263E !important;
}

/* === ASSISTANT INFO === */
.vfrc-assistant-info {
  text-align: center !important;
}

.vfrc-assistant-info--avatar {
  border: 3px solid #F8263E !important;
  border-radius: 50% !important;
}

.vfrc-assistant-info--title {
  color: #F8263E !important;
  font-weight: 600 !important;
}

.vfrc-assistant-info--description {
  color: #666 !important;
}

/* === FOOTER LINKS === */
.vfrc-footer__links-extra-text {
  color: #888 !important;
  font-size: 11px !important;
}

.vfrc-footer__links-extra-text:hover {
  color: #F8263E !important;
}

/* === CHAT DIALOG === */
.vfrc-chat-dialog__container {
  background: #fafafa !important;
}

/* === OVERLAY === */
.vfrc-popper__overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* === KHK-SPECIFIC EXTRAS === */

/* Icon color styling */
.vfrc-icon {
  color: #F8263E !important;
}

.vfrc-icon svg {
  fill: currentColor !important;
}

/* Header icon color (white on red background) */
.vfrc-header .vfrc-icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Proactive message styling */
.vfrc-proactive-message {
  position: relative !important;
  z-index: 0 !important;
  border-radius: 10px !important;
  background-color: #FFFFFF !important;
  color: #F8263E !important;
  border: 2px solid #F8263E !important;
  opacity: 1 !important;
  transform-origin: center center !important;
}

.vfrc-proactive-message > * {
  position: relative;
  z-index: 1;
}

/* Hide proactive message when chat is open */
.vfrc-launcher[title="Close chat agent"] ~ .vfrc-proactive-message,
.vfrc-chat__container ~ .vfrc-proactive-message__container,
.vfrc-widget--chat-open .vfrc-proactive-message,
.vfrc-widget--chat-open .vfrc-proactive-message__container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* === PROACTIVE CARDS (Updated selector for current Voiceflow widget) === */
/* Voiceflow uses class "vfrc-proactive__cards" with underscore, not "vfrc-proactive-message" */

/* Proactive cards styling */
div[class*="vfrc-proactive__cards"] {
  position: relative !important;
  z-index: 0 !important;
  border-radius: 10px !important;
  background-color: #FFFFFF !important;
  color: #F8263E !important;
  border: 2px solid #F8263E !important;
  opacity: 1 !important;
  transform-origin: center center !important;
}

div[class*="vfrc-proactive__cards"] > * {
  position: relative;
  z-index: 1;
}

/* Hide proactive cards when chat is open */
.vfrc-launcher[title="Close chat agent"] ~ div[class*="vfrc-proactive__cards"],
.vfrc-chat__container ~ div[class*="vfrc-proactive__cards"],
.vfrc-widget--chat-open div[class*="vfrc-proactive__cards"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hide entire proactive container when chat is open */
.vfrc-launcher[title="Close chat agent"] ~ div.vfrc-proactive,
.vfrc-launcher[title="Close chat agent"] ~ div[class*="vfrc-proactive "],
.vfrc-widget--chat-open div.vfrc-proactive,
.vfrc-widget--chat-open div[class*="vfrc-proactive "] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Czech button text replacements */
button[title="Open chat agent"] {
  color: transparent !important;
  position: relative !important;
}

button[title="Open chat agent"]::before {
  content: "Otevrit chatbot" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

button[title="Close chat agent"] {
  color: transparent !important;
  position: relative !important;
}

button[title="Close chat agent"]::before {
  content: "Zavrit chatbot" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Start new chat translation */
button[label="Start new chat"],
#vfrc-start-chat {
  background-color: #F8263E !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  color: transparent !important;
  position: relative !important;
}

button[label="Start new chat"] span,
#vfrc-start-chat span {
  display: none !important;
}

button[label="Start new chat"]::before,
#vfrc-start-chat::before {
  content: "Zacit novy chat" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 2 !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
}

/* Cancel translation */
button[label="Cancel"] {
  background-color: #F8263E !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  position: relative !important;
  color: transparent !important;
}

button[label="Cancel"] span {
  display: none !important;
}

button[label="Cancel"]::before {
  content: "Zavrit" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 2 !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
}

/* Chat has ended translation */
.t1cwqp2,
div.t1cwqp2,
.t1cwqp1,
div.t1cwqp1,
div[class^="t1cwqp"],
div[class*="t1cwqp"] {
  color: transparent !important;
  font-size: 0 !important;
  visibility: hidden !important;
  position: relative !important;
  display: block !important;
  height: 30px !important;
  width: 100% !important;
  margin: 8px 0 !important;
}

.t1cwqp2 *,
div.t1cwqp2 *,
.t1cwqp1 *,
div.t1cwqp1 *,
div[class^="t1cwqp"] *,
div[class*="t1cwqp"] * {
  color: transparent !important;
  font-size: 0 !important;
  visibility: hidden !important;
}

.t1cwqp2::after,
div.t1cwqp2::after,
.t1cwqp1::after,
div.t1cwqp1::after,
div[class^="t1cwqp"]::after,
div[class*="t1cwqp"]::after {
  content: "Chat byl ukoncen" !important;
  visibility: visible !important;
  color: #5F7CA0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  display: block !important;
}

/* Header avatar styling (wide landscape logo - Kralovehradecky kraj) */
.vfrc-header .vfrc-avatar,
div[class*="vfrc-header"] img.vfrc-avatar {
  width: 180.84px !important;
  height: 56px !important;
  border-radius: 0 !important;
  border: none !important;
  object-fit: contain !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 2px 0 0 -15px !important;
}

/* Chatbot avatar image styling */
img.vfrc-image {
  width: 150px !important;
  height: 150px !important;
  padding: 0 !important;
  margin-left: 55px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}