@import url(https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100;300;400;500;700;800;900&display=swap);
@font-face {
  font-family: 'NHaasGroteskTextPro';
  src: url(a4c6f6d97398d8f9a96c.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'NHaasGroteskTextPro';
  src: url(bd0789975a9335536bb2.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100vw;
  height: 100vh;
  background: #ffffff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.agent-button {
  background-color: #67cddf;
  color: #000000;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 0.2s ease;
}

.agent-button:hover {
  background-color: #a4e0f6;
}
/* client/src/style.css */

/* Regeln för själva chat-fönstret */
.chatbot-widget {
  display: none !important; /* Börja dold som standard */
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 400px !important;
  height: 600px !important;
  box-shadow: 0 5px 40px rgba(0,0,0,.16) !important;
  border-radius: 10px !important;
  z-index: 2147483647 !important; /* Högsta möjliga z-index */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  font-family: 'NHaasGroteskTextPro', sans-serif !important;
  background-color: #f5f5f5;
}

/* När den ska vara öppen, tvinga den att synas */
.chatbot-widget.open {
  display: flex !important;
  flex-direction: column !important;
}

#chatbot-widget .message a {
  color: #0066cc; /* A standard, accessible blue color for links */
  text-decoration: underline;
  font-weight: bold; /* Optional: Makes links stand out more */
}

/* Optional: Style for when a user hovers over the link */
#chatbot-widget .message a:hover {
  text-decoration: none; /* Removes the underline on hover, a common UX pattern */
}


#chatbot-launcher {
  /* Positionering & Synlighet */
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 2147483646 !important; /* Näst högsta z-index */
  display: flex !important; /* Standard: Synlig. JS kan INTE ändra detta. */
  visibility: visible !important;
  opacity: 1 !important;
  
  /* Din gamla design */
  width: 85px !important;
  height: 38px !important;
  border: none !important;
  background: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding-left: 14px !important;
  padding-right: 10px !important;
  transition: transform 0.15s ease !important;
}

#chatbot-launcher:hover {
transform: scale(1.025) !important;
}

#chatbot-launcher span {
color: #000000 !important;
font-family: 'NHaasGroteskTextPro', sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
}

#chatbot-launcher:hover svg {
  stroke: #000000 !important;
}

#chatbot-launcher svg {
stroke: #000000 !important;
}


/* --- Header --- */
.chat-header {
  padding: 12px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;

  justify-content: space-between;
  align-items: center;
}

.chat-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}


.close-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #000000;
  padding: 0; /* Reset padding */
  margin: 0; /* Reset margin */
  display: flex; /* Use flexbox for centering */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  opacity: 1;
  transition: opacity 0.2s ease;
}

.close-button:hover {
  opacity: 1;
  border-color: #d0d0d0;
}

/* --- Message Area --- */
#chat_container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 13px;
  gap: 12px;
  
}

/* Spacing between messages */
#chat_container .wrapper {
  margin-bottom: 12px;
}


/* --- Message Stripes (replaces your old style) --- */
.wrapper {
  display: flex;
  width: 100%;
  animation: fadeInUp 0.4s ease; /* Apply the new animation */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 85%;
}

.profile {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile img {
  width: 20px;
  height: 20px;
}

.message {
  padding: 12px 20px; /* Increased padding for better spacing */
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Bot-specific styles */
.wrapper.ai {
  justify-content: flex-start;
}
.wrapper.ai .profile {
  display: none;
}
.wrapper.ai .message {
  background-color: #ffffff;
  color: #000000;
  border-radius: 12px; /* Main radius */
  border-top-left-radius: 3px; /* Speech bubble effect */
  max-width: 75%;
  padding-left: 15px;
  padding-right: 15px;
}

/* Special class for the wider initial message */
.wrapper.ai .chat.chat-full-width {
  width: 100%;
  max-width: 100%; /* Override the default max-width */
}

.message-subtext {
  display: block;
  margin-left: 7px; /* Indent the subtext */
  color: #000000; /* Make it slightly lighter for visual hierarchy */
}

/* User-specific styles */
.wrapper.user {
  justify-content: flex-end;
}
.wrapper.user .chat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.wrapper.user .profile {
  display: none;
}
.wrapper.user .message {
  /* Copied from the user's provided, working example */
  display: inline-block;
  position: relative;
  max-width: 240px;
  min-width: 32px;
  margin: 1px 0px;
  padding: 10px 15px;
  border-radius: 12px; /* Main radius */
  border-bottom-right-radius: 3px; /* Speech bubble effect */
  line-height: 18px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;

  /* My existing styles */
  background-color: #ffffff;
  color: #000000;
  font-size: 14px;
  text-align: left;
}


/* --- Input Form --- */
#chat-form {
  display: flex;
  padding: 10px;
  /*border-top: 1px solid #e0e0e0;*/
  align-items: flex-end; /* Aligns items to the bottom, preventing the button from moving up */
}

#chat-form textarea {
  flex-grow: 1;
  border: 1px solid #ffffff;
  border-radius: 12px;
  padding: 10px 15px;
  font-size: 14px;
  resize: none;
  height: 42px; /* Set a specific initial height for one line */
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.2s ease; /* Smooth transition for focus */
  max-height: 101px; /* Allow up to 4 lines of text */
  overflow-y: hidden; /* Start with scrollbar hidden, JS will manage it */
}

#chat-form textarea:focus {
  outline: none;
  border-color: #d0d0d0; /* Subtle grey border on focus */
}

#chat-form button {
  background: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  margin-left: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  
  /* Styles for the '>' icon */
  font-size: 22px;
  font-weight: 300; /* Lighter weight */
  line-height: 1;
  padding-left: 2px; /* Optical centering */
}

#chat-form button:hover {
  border-color: #d0d0d0;
}

/* --- Agent & Quick-Reply Buttons --- */
.agent-button, .quick-reply {
  background-color: #ffffff;
  border: 1px solid #7b7b7b;
  border-radius: 9px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
  width: 100%;
  margin-right: 0px;
  transition: all 0.2s ease;
}

.agent-button:hover, .quick-reply:hover {
  background-color: #f7f7f7;
  border-color: #000000;
}

.quick-replies-stripe .message {
  display: flex;
  flex-direction: column;
  align-items: center; /* This will center the buttons */
}

#welcome_message, #welcome_message_subtext {
  width: 100%;
  text-align: left;
}

/* Typing Indicator Animation */
.typing-indicator {
  display: flex;
  align-items: center;
  height: 20px; /* Give the container a fixed height */
  width: 40px;
}

.typing-indicator span {
  height: 5px; /* Start small */
  width: 2px;  /* Make them slightly wider than they are tall */
  background-color: #000000;
  border-radius: 2px; /* Rounded corners */
  margin: 0 2px;
  animation: stretch 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.1s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes stretch {
  0%, 40%, 100% {
    height: 2px;
  }
  20% {
    height: 16px; /* Stretch vertically */
  }
}

/* PRODUCTS IN CHAT */
.message .product-section {
  white-space: normal;    /* ta bort pre-wrap i produkt-sektionen */
}

.message .product-grid .product-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}

.product-card {
  width: 120px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  font-size: 0.75rem;
}

.product-card img {
  display: block;
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.product-card:hover img {
  transform: scale(1.05);
}

/* --- Handoff Form Styles --- */
.handoff-form {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Adds space between the form elements */
  margin-top: 12px; /* Adds space above the form */
  width: 100%; /* Make the form take full width */
}

.form-input {
  /* Mimic the main textarea style */
  width: 100%; /* Make inputs take full width */
  border: 1px solid #ffffff;
  border-radius: 12px;
  padding: 10px 15px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.2s ease;
  background-color: #f0f0f0; /* Slightly different background to stand out */
}

.handoff-form .agent-button {
  margin-top: 0; /* Remove default margin from agent-button to avoid double spacing */
}

.form-input:focus {
  outline: none;
  border-color: #d0d0d0; /* Subtle grey border on focus */
}


/* NEW: Make the handoff textarea identical to the main chat textarea */
.handoff-form textarea.form-input {
  resize: none;
  height: auto; /* Let content determine height */
  min-height: 84px; /* Set a minimum height for ~3 lines */
  max-height: 150px; /* Allow more room for details */
  overflow-y: auto; /* Show scrollbar if content exceeds max-height */
}


/* New, specific style for the loader's message bubble */
.message.loader-message {
  padding-top: 12px;
  padding-bottom: 12px;
  height: 40px; /* Force a specific, smaller height */
  display: flex;
  align-items: center; /* Center the dots vertically */
}

/* --- Zendesk Widget Override --- */
/* This targets the iframe for the launcher button */
iframe#launcher {
  right: auto !important; /* Remove the default right positioning */
  left: 20px !important; /* Add new positioning to the left */
}

/* This targets the main chat window iframe */
iframe#webWidget {
  right: auto !important; /* Remove the default right positioning */
  left: 20px !important; /* Add new positioning to the left */
}

/* ============================================= */
/* =========== MOBIL-ANPASSNINGAR ============ */
/* ============================================= */

@media (max-width: 600px) {

  html.chatbot-html-lock {
    overflow: hidden !important;
    height: 100% !important; /* Förhindrar ytterligare iOS-konstigheter */
  }

  /* --- KROPP & LAYOUT --- */
  body.chatbot-body-lock {
    overflow: hidden !important;
    position: fixed; /* Låser positionen helt */
    width: 100%;
    height: 100%;
  }

.chatbot-widget.open {
  width: 100% !important;
  height: auto !important; /* <--- LÄGG TILL DENNA RAD */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important; /* HINDRAR HELA WIDGETEN FRÅN ATT SCROLLA */
  transform: translateZ(0); /* NYTT: Tvinga fram hårdvaruacceleration */
}

  /* --- HEADER --- */
  .chat-header {
    flex-shrink: 0; /* Förhindrar att headern krymper */
      padding: 8px 16px;
  }

  /* --- MEDDELANDE-YTA --- */
  #chat_container {
    padding: 10px 10px 0 10px;
    flex: 1; /* Tvingar ytan att fylla allt tillgängligt utrymme */
    overflow-y: auto; /* TILLÅTER SCROLLNING ENDAST HÄR */
    min-height: 0; /* Flexbox-fix för att säkerställa korrekt storleksberäkning */
  }

  /* --- FORMULÄR & INMATNING --- */
  #chat-form {
    flex-shrink: 0; /* Förhindrar att formuläret krymper */
    background-color: #ffffff; /* LÖSER BAKGRUNDSFÄRG-BUGGEN */
    border-top: 1px solid #e0e0e0; /* Visuell avgränsare */
    padding: 8px;
    padding-bottom: 20px;
  }

  #chat-form textarea {
    font-size: 16px; /* LÖSER IOS AUTO-ZOOM-PROBLEMET */
  }

  /* --- STARTKNAPP --- */
  #chatbot-launcher {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  #chatbot-launcher span {
    display: none !important;
  }
  
  #chatbot-launcher svg {
    width: 28px !important;
    height: 28px !important;
  }
}

body.zendesk-handoff-active iframe#launcher,
body.zendesk-handoff-active iframe#webWidget {
  left: auto !important;
  right: 20px !important;
}

.wrapper.ai {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
}

/* Huvudcontainern för CSAT-blocket */
.csat-container {
  /* DEN VIKTIGA CENTRERINGSREGELN */
  align-self: left; 

  /* Gör containern till en vertikal flexbox för att stapla text och knappar */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centrera barnen (text och knappar) horisontellt */
  
  padding: 10px 0;
  margin-left: 22%;
}

/* Frågetexten "Hjälpsamt?" */
.csat-question {
  font-size: 14px !important;
  color: #000000; /* Diskret grå färg */
  margin-bottom: 10px; /* Avstånd till knapparna */
}

/* Hållare för knapparna */
.csat-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

/* Själva emoji-knappen */
.csat-button {
  background: transparent;
  border: none;
  padding: 0;
  width: 28px;
  height: 28px;
  color: #000000;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.2s ease;
}

.csat-button svg {
  width: 100%;
  height: 100%;
}

.csat-button:hover {
  transform: scale(1.125);
  color: #000000;
}

.csat-button:active {
  transform: scale(1.1);
  transition-duration: 0.1s;
}

/* "Tack"-meddelandet */
.csat-thanks {
  font-size: 14px !important;
  color: #000000; /* Diskret grå färg */
  margin-bottom: 10px; /* Avstånd till knapparna */
  margin-left: 73%;
}