.kreechat-widget {
  --kc-surface: #ffffff;
  --kc-surface-alt: #f4f6f8;
  --kc-header-bg: #ffffff;
  --kc-header-text: #0f172a;
  --kc-text: #1e293b;
  --kc-text-muted: #64748b;
  --kc-border: #e2e8f0;
  --kc-accent: #2563eb;
  --kc-accent-hover: #1d4ed8;
  --kc-accent-contrast: #ffffff;
  --kc-accent-soft: #eaf2fe;
  --kc-bubble-client-bg: #2563eb;
  --kc-bubble-client-text: #ffffff;
  --kc-bubble-agent-bg: #eef2f7;
  --kc-bubble-agent-text: #1e293b;
  --kc-danger: #b91c1c;
  --kc-danger-soft: #fef2f2;
  --kc-success: #15803d;
  --kc-scrollbar-thumb: #cbd5e1;
  --kc-scrollbar-track: transparent;
  --kc-launcher-bg: #2563eb;
  --kc-launcher-shadow: var(--kc-shadow);
  --kc-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);

  --kc-input-text: var(--kc-text);
  --kc-input-border: var(--kc-border);
  --kc-input-placeholder: var(--kc-text-muted);
  --kc-input-focus: var(--kc-accent);
  --kc-link: var(--kc-accent);
  --kc-icon: var(--kc-text-muted);
  --kc-launcher-icon: var(--kc-accent-contrast);

  --kc-radius: 12px;
  --kc-radius-bubble: 8px;
  --kc-radius-btn: 8px;
  --kc-radius-launcher: 50%;
  --kc-order-attach: 1;
  --kc-order-input: 2;
  --kc-order-send: 3;
  --kc-hover-scale: 1.12;
  --kc-active-scale: 0.95;

  --kc-btn-bg: var(--kc-accent);
  --kc-btn-text: var(--kc-accent-contrast);
  --kc-btn-border: transparent;
  --kc-btn-bg-hover: var(--kc-accent-hover);
  --kc-btn-text-hover: var(--kc-accent-contrast);

  position: fixed;
  bottom: 1.5%;
  right: 1.5%;
  width: clamp(280px, 90%, 370px);
  height: 560px;
  border-radius: var(--kc-radius);
  z-index: 9999;
  box-shadow: var(--kc-shadow);
  background: var(--kc-surface);
  color: var(--kc-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: sans-serif;
  font-size: clamp(0.8rem, 1vw, 1rem);
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
  will-change: width, height, border-radius;
  box-sizing: border-box;
}

/* Cache-skew insurance: pages cached before 1.1.0 carry the old theme classes but no inline var block. */
.kreechat-widget-dark {
  --kc-surface: linear-gradient(160deg, #101a3a 0%, #0a0f24 100%);
  --kc-surface-alt: #1a2342;
  --kc-header-bg: #141d3d;
  --kc-header-text: #e6eaf6;
  --kc-text: #dbe2f4;
  --kc-text-muted: #93a0c4;
  --kc-border: #33518f;
  --kc-bubble-agent-bg: #232c4e;
  --kc-bubble-agent-text: #e6eaf6;
  --kc-launcher-bg: #4361ee;
}

.kreechat-widget *,
.kreechat-widget *::before,
.kreechat-widget *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.kreechat-widget button,
.kreechat-widget .send-button,
.kreechat-widget .button-attach,
.kreechat-widget .emoji-button,
.kreechat-widget .emoji-item,
.kreechat-widget .minimized-message,
.kreechat-widget .download-arrow {
  touch-action: manipulation;
}

.kreechat-widget--pos-left {
  right: auto;
  left: 1.5%;
}

.kreechat-widget--btn-solid {
  --kc-btn-bg: var(--kc-accent);
  --kc-btn-text: var(--kc-accent-contrast);
  --kc-btn-border: transparent;
  --kc-btn-bg-hover: var(--kc-accent-hover);
  --kc-btn-text-hover: var(--kc-accent-contrast);
}

.kreechat-widget--btn-outline {
  --kc-btn-bg: transparent;
  --kc-btn-text: var(--kc-accent);
  --kc-btn-border: var(--kc-accent);
  --kc-btn-bg-hover: var(--kc-accent);
  --kc-btn-text-hover: var(--kc-accent-contrast);
}

.kreechat-widget--btn-soft {
  --kc-btn-bg: var(--kc-accent-soft);
  --kc-btn-text: var(--kc-accent);
  --kc-btn-border: transparent;
  --kc-btn-bg-hover: var(--kc-accent);
  --kc-btn-text-hover: var(--kc-accent-contrast);
}

.kreechat-widget .kc-btn {
  background: var(--kc-btn-bg);
  color: var(--kc-btn-text);
  border: 1.5px solid var(--kc-btn-border);
  border-radius: var(--kc-radius-btn);
  padding: 0.5em 1.1em;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s;
  min-width: 60%;
}

.kreechat-widget .kc-btn:hover:not(:disabled) {
  background: var(--kc-btn-bg-hover);
  color: var(--kc-btn-text-hover);
}

.kreechat-widget .kc-btn:active {
  transform: scale(var(--kc-active-scale));
}

.kreechat-widget .kc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kreechat-widget .kc-btn:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 2px;
}

.kreechat-widget--btn-full .kc-btn {
  width: 100%;
  min-width: 100%;
}

.kreechat-widget.kreechat-widget--minimized {
  width: 64px;
  height: 64px;
  border-radius: var(--kc-radius-launcher);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--kc-launcher-bg);
  box-shadow: var(--kc-launcher-shadow);
}

.kreechat-widget.kreechat-widget--minimized.kreechat-widget--launcher-transparent {
  background: transparent;
  box-shadow: none;
}

.kreechat-widget:not(.kreechat-widget--minimized) .minimized-message {
  display: none;
}

.kreechat-widget.kreechat-widget--minimized > :not(.minimized-message) {
  display: none !important;
}

.kreechat-widget.kreechat-widget--minimized .minimized-message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--kc-launcher-icon);
}

.minimized-icon {
  width: 52%;
  height: 52%;
}

.kc-custom-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kc-custom-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.kreechat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--kc-header-bg);
  color: var(--kc-header-text);
  padding: 0.5em 0.8em;
  font-weight: bold;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--kc-border);
  flex-shrink: 0;
}

.kreechat-widget--header-center .kreechat-header {
  justify-content: center;
  position: relative;
}

.kreechat-widget--header-center .minimize_button {
  position: absolute;
  right: 0.8em;
  top: 50%;
  transform: translateY(-50%);
}

.kreechat-welcome-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5em;
  overflow-y: auto;
}

.widget_welcome_message,
.widget_welcome_message_client {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 15px;
  gap: 10px;
}

.image-input {
  display: none;
}

.button-attach {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  align-self: center;
  color: var(--kc-icon);
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}

.button-attach:hover {
  transform: scale(var(--kc-hover-scale));
  color: var(--kc-accent);
}

.button-attach:active {
  transform: scale(var(--kc-active-scale));
}

.button-attach .kc-icon,
.send-button .kc-icon,
.minimize_button .kc-icon {
  width: 100%;
  height: 100%;
}

.widget_welcome_message h3,
.widget_welcome_message_client h3 {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--kc-text);
}

.widget_welcome_message p,
.widget_welcome_message_client p {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--kc-text);
}

.widget_welcome_message .invalid-token-notice,
.widget_welcome_message_client .invalid-token-notice,
.widget_welcome_message .chat-unavailable-notice,
.widget_welcome_message_client .chat-unavailable-notice,
.widget_welcome_message .start-chat-failed-notice,
.widget_welcome_message_client .start-chat-failed-notice,
.widget_welcome_message .rate-limited-notice,
.widget_welcome_message_client .rate-limited-notice {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--kc-danger);
  border-radius: 6px;
  color: var(--kc-danger);
  background-color: var(--kc-danger-soft);
  font-weight: bold;
  text-align: center;
}

.email-input-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  color: var(--kc-text);
  background-color: transparent;
  margin-top: 2em;
}

.client_submit_email_form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 1em;
}

.kreechat-widget .input_wrapper {
  width: 100%;
  position: relative;
}

.kreechat-widget .input_wrapper input {
  width: 100%;
  height: 2.5em;
  border-radius: 6px;
  border: 1px solid var(--kc-input-border);
  padding: 0 0.5em;
  font-size: 0.85rem;
  outline: none;
  color: var(--kc-input-text);
  background-color: transparent;
}

.kreechat-widget .input_wrapper label {
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kc-input-placeholder);
  padding: 0 0.2em;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
  pointer-events: none;
  font-size: 0.85rem;
}

.kreechat-widget .input_wrapper input:focus + label,
.kreechat-widget .input_wrapper input:valid + label {
  top: -0.6em;
  font-size: 0.75rem;
  color: var(--kc-input-focus);
}

.kreechat-widget .input_wrapper input:focus {
  border-color: var(--kc-input-focus);
}

.loading-chat-message {
  color: var(--kc-text-muted);
}

.kreechat-ratelimit-notice {
  align-self: stretch;
  padding: 8px 12px;
  border: 1px solid var(--kc-danger);
  border-radius: 6px;
  color: var(--kc-danger);
  background-color: var(--kc-danger-soft);
  font-size: 0.85rem;
  text-align: center;
}

.widget_service_name {
  color: var(--kc-text);
}

.kreechat-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.messages-container::-webkit-scrollbar {
  width: 6px;
}

.messages-container::-webkit-scrollbar-track {
  background-color: var(--kc-scrollbar-track);
}

.messages-container::-webkit-scrollbar-thumb {
  background-color: var(--kc-scrollbar-thumb);
  border-radius: 3px;
}

.client-message,
.agent-message {
  padding: 0.4em 0.6em;
  border-radius: var(--kc-radius-bubble);
  max-width: 90%;
  word-break: break-word;
  font-size: 0.8rem;
  line-height: 1.35;
}

.client-message {
  align-self: flex-end;
  background: var(--kc-bubble-client-bg);
  color: var(--kc-bubble-client-text);
}

.agent-message {
  align-self: flex-start;
  background: var(--kc-bubble-agent-bg);
  color: var(--kc-bubble-agent-text);
}

.client-message p:not(.msg-timestamp):not(.msg-timestamp-closed),
.agent-message p:not(.msg-timestamp):not(.msg-timestamp-closed) {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

.agent-typing-indicator {
  opacity: 0.85;
}

.agent-typing-text {
  margin: 0;
  font-style: italic;
  font-size: 0.85rem;
  color: inherit;
}

.msg-timestamp {
  font-size: 0.7rem;
  color: inherit;
  opacity: 0.65;
  margin-top: 2px;
  align-self: flex-end;
}

.msg-timestamp-closed {
  font-size: 0.7rem;
  color: var(--kc-text);
  opacity: 0.75;
  margin-top: 2px;
}

.video-message {
  max-width: 100%;
  border-radius: 8px;
  outline: none;
  background: #000;
  display: block;
  cursor: pointer;
}

.client-message .video-message {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.agent-message .video-message {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.video-message::-webkit-media-controls {
  background: rgba(0, 0, 0, 0.2);
}

.textarea-container {
  display: flex;
  gap: 0.3em;
  padding: 0.3em;
  border-top: 1px solid var(--kc-border);
  flex-shrink: 0;
}

.textarea-container > .kc-slot-attach {
  order: var(--kc-order-attach);
}

.textarea-container > .textarea {
  order: var(--kc-order-input);
}

.textarea-container > .send-button {
  order: var(--kc-order-send);
}

.textarea {
  flex: 1;
  resize: none;
  padding: 0.3em 0.5em;
  font-size: 0.85rem;
  background: transparent;
  color: var(--kc-text);
  border: none;
  outline: none;
  min-width: 0;
  max-height: 5em;
}

.textarea::placeholder {
  color: var(--kc-input-placeholder);
}

.send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  align-self: center;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--kc-icon);
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}

.send-button:hover {
  transform: scale(var(--kc-hover-scale));
  color: var(--kc-accent);
}

.send-button:active {
  transform: scale(var(--kc-active-scale));
}

.emoji-button-container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: max-height 0.25s ease-out;
  will-change: max-height;
  max-height: 48px;
}

.emoji-button-container.open {
  max-height: 35vh;
}

.emoji-button {
  user-select: none;
  cursor: pointer;
  font-size: 1.8rem;
  transition: transform 0.2s ease-in-out;
}

.emoji-button:hover {
  transform: scale(var(--kc-hover-scale));
}

.emoji-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 0.3em;
  padding: 0.3em;
  overflow-y: auto;
  max-height: 120px;
}

.emoji-item {
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.emoji-item:hover {
  transform: scale(var(--kc-hover-scale));
}

.emoji-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  height: 50px;
}

.logo-container,
.logo-container-outside {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 3px;
  font-size: 0.7rem;
  cursor: pointer;
  text-decoration: none;
  align-self: flex-end;
  color: var(--kc-text-muted);
}

#minimize-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  background: none;
  cursor: pointer;
  border: none;
  color: var(--kc-header-text);
}

#minimize-button:active {
  transform: scale(var(--kc-active-scale));
}

.logo-image {
  width: 20px;
  height: 20px;
}

.logo {
  text-decoration: none;
  user-select: none;
  color: inherit;
}

.image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  cursor: pointer;
}

.doc-info-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.download-arrow {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.download-arrow:hover {
  transform: scale(var(--kc-hover-scale));
}

.ticket-closed-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.ticket-locked-notice {
  padding: 12px;
  text-align: center;
  font-weight: bold;
  color: var(--kc-danger);
  background-color: var(--kc-danger-soft);
  border: 1px solid var(--kc-danger);
  border-radius: 6px;
  font-size: 0.85rem;
  width: 100%;
}

#chat-closed-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em;
  padding-bottom: 1em;
  border-top: 1px solid var(--kc-danger);
  background-color: var(--kc-danger-soft);
}

.chat-closed-bar-text {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--kc-danger);
  text-align: center;
}

.kreechat-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.kreechat-rating-prompt {
  font-size: 0.8rem;
  color: var(--kc-text-muted);
  text-align: center;
  margin: 0;
}

.kreechat-rating-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.kreechat-rating-button {
  background-color: var(--kc-surface-alt);
  color: var(--kc-text);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-btn);
  padding: 0.4em 0.7em;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.kreechat-rating-button:hover {
  background-color: var(--kc-accent-soft);
}

.kreechat-rating-button:active {
  transform: scale(var(--kc-active-scale));
}

.kreechat-rating-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.kreechat-rating-thanks {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--kc-success);
  text-align: center;
  margin: 0;
}

.kreechat-rating-message {
  align-self: center;
  color: #f5a623;
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-align: center;
}

.client_email_submit.input-error {
  border-bottom: 2px solid var(--kc-danger) !important;
}

.email-error-message,
.otp-error-message {
  color: var(--kc-danger);
  font-size: 12px;
  margin: 4px 0 0 0;
  padding: 0;
}

.otp-verification-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  color: var(--kc-text);
  background-color: transparent;
  margin-top: 2em;
}

.client_submit_otp_form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.otp-guide-message {
  font-size: 0.85rem;
  text-align: center;
}

.otp-warning-message {
  color: var(--kc-danger);
  font-size: 12px;
  margin: 4px 0 0 0;
  padding: 0;
  text-align: center;
}

.otp-secondary-actions {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-top: 0.25em;
}

.resend_otp_button,
.back_to_email_button {
  background: none;
  border: none;
  color: var(--kc-link);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  text-decoration: underline;
}

.resend_otp_button:disabled,
.back_to_email_button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kreechat-widget .hidden {
  display: none !important;
}

.kc-preview-stage .kreechat-widget {
  position: static;
  width: 100%;
  max-width: 370px;
  height: 540px;
  margin: 0 auto;
  transition: none;
  will-change: auto;
}

.kc-preview-stage .kreechat-widget.kreechat-widget--minimized {
  width: 76px;
  height: 76px;
}

@media (max-width: 480px) {
  .kreechat-widget:not(.kreechat-widget--preview) {
    transition: none;
    will-change: auto;
  }

  .kreechat-widget:not(.kreechat-widget--preview):not(.kreechat-widget--minimized) {
    width: 100% !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    max-height: none !important;
    height: 100%;
  }

  .kreechat-widget:not(.kreechat-widget--preview) .kreechat-header {
    font-size: 1rem;
    padding: 0.7em 1em;
  }

  .kreechat-widget:not(.kreechat-widget--preview) .textarea,
  .kreechat-widget:not(.kreechat-widget--preview) .client-message,
  .kreechat-widget:not(.kreechat-widget--preview) .agent-message {
    font-size: 0.8rem;
  }

  .kreechat-widget:not(.kreechat-widget--preview) .emoji-list {
    grid-template-columns: repeat(5, 1fr);
  }
}