/* ============================================================================
   RoboDesk chat widget — theme override
   ============================================================================
   The widget's own CSS lives in a string inside robodesk.wedgit.js, which
   houston serves to every RoboDesk tenant, so it must not be edited. These
   rules restyle it from our side instead.

   These used to sit in a <style> block in <body>, where they also won on
   document order. From a bundled stylesheet they land in <head> *before* the
   widget's runtime-injected <style>, so order no longer helps — every rule
   below wins on specificity alone. That is what the #Robodesk-bot prefix buys:
   one id (1,0,0) outranks any number of classes, and the widget's selectors
   are class-only. Keep the prefix on every rule you add here.

   Palette matches the site hero: orange #f97316 -> violet #7c3aed.
   ========================================================================= */

#Robodesk-bot {
  /* Widget ships with no z-index; the cookie banner and header use z-50. */
  z-index: 2147483000;
}

#Robodesk-bot,
#Robodesk-bot * {
  font-family: inherit;
}

/* ---- Launcher ----------------------------------------------------------- */
#Robodesk-bot .robodesk-chatbot-btn {
  background: linear-gradient(135deg, #f97316, #7c3aed);
  box-shadow: 0 8px 24px rgba(124, 58, 237, .35);
}

/* robodesk.svg is orange artwork (gradient from rgb(241,109,37)), so it
   disappears into the orange half of the launcher gradient. brightness(0)
   crushes it to black, invert(1) flips it to solid white. Launcher only —
   the message panel is white, so the orange logo reads fine as an avatar. */
#Robodesk-bot .robodesk-chatbot-btn img {
  filter: brightness(0) invert(1);
}

/* ---- Panel -------------------------------------------------------------- */
#Robodesk-bot .robodesk-chat {
  background: #fff;
  border: 1px solid #eef0f4;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
}

#Robodesk-bot .robodesk-chat::after {
  border-top-color: #fff;
}

#Robodesk-bot .robodesk-chat .robodesk-chat-header p {
  background: linear-gradient(90deg, #f97316, #7c3aed);
  box-shadow: 0 4px 14px rgba(124, 58, 237, .28);
}

/* ---- Messages ----------------------------------------------------------- */
/* Bot bubble. Targets bare .media-body too, not just .justify-content-start —
   the widget builds the welcome message without that class, so it kept the
   default grey. The visitor rule below has one more class, so it still wins. */
#Robodesk-bot .media-body p {
  background: #f3f4f6;
  color: #374151;
}

/* Visitor bubble. The widget gives both sides the same grey, so they were
   indistinguishable; brand colour separates them. */
#Robodesk-bot .media-body.justify-content-end p {
  background: #7c3aed;
  color: #fff;
  /* Widget hardcodes dir="rtl" on sent messages, which mis-aligns Latin text.
     plaintext derives direction from the content instead. */
  unicode-bidi: plaintext;
}

#Robodesk-bot .media-body.justify-content-end p a {
  color: #e9d5ff;
}

/* ---- Composer ----------------------------------------------------------- */
#Robodesk-bot .robodesk-chat-footer .input-wrapper > input {
  border-color: #e5e7eb;
  color: #111827;
}

#Robodesk-bot .robodesk-chat-footer .input-wrapper > input::placeholder {
  color: #9ca3af;
}

#Robodesk-bot .robodesk-chat-footer .input-wrapper button {
  background: #fff;
  border-color: #e5e7eb;
}

#Robodesk-bot .robodesk-chat-footer .input-wrapper button svg {
  fill: #7c3aed;
}

/* The widget panel is a hard-coded 400px wide; clamp it on phones. */
@media (max-width: 480px) {
  #Robodesk-bot .robodesk-chat {
    width: calc(100vw - 30px);
    right: 0;
  }
}

/* ---- Fixes on top of the migrated theme --------------------------------- */

/* The widget gives the launcher `padding:.7em 1em` with no centring, so the
   40x40 logo sits off-centre inside the 70px circle. Centre it properly. */
#Robodesk-bot .robodesk-chatbot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#Robodesk-bot .robodesk-chatbot-btn img {
  margin: 0;
  display: block;
}

/* The widget sets no font-size on the composer, so it falls back to the
   browser default (~13px). Safari on iOS auto-zooms the page whenever a
   focused input is under 16px, which is what pushes the send button out of
   view. 16px stops the zoom entirely. */
#Robodesk-bot .robodesk-chat-footer .input-wrapper > input {
  font-size: 16px;
}

/* Send is the primary action but shipped looking identical to attach. */
#Robodesk-bot .robodesk-chat-footer .input-wrapper #robodesk-send-btn {
  background: #7c3aed;
  border-color: #7c3aed;
}

#Robodesk-bot .robodesk-chat-footer .input-wrapper #robodesk-send-btn svg {
  fill: #fff;
}

/* Bigger tap targets on phones. */
@media (max-width: 480px) {
  #Robodesk-bot .robodesk-chat-footer .input-wrapper button {
    padding: 10px 13px;
  }
}

/* Online indicator. Bound to the socket's real connected state by chat.js —
   grey until the widget is actually talking to houston, green once it is. */
#Robodesk-bot .robodesk-chatbot-btn::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #9aa0aa;
  border: 3px solid #fff;
  box-sizing: border-box;
  transition: background .3s ease;
}

#Robodesk-bot.rd-online .robodesk-chatbot-btn::after {
  background: #22c55e;
  animation: rd-online-pulse 2.6s ease-out infinite;
}

@keyframes rd-online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
