* {
  font-family: 'UCity Pro', 'UCityPro', sans-serif !important;
}

:root {
  --chat--color--primary: #D55B19;
  --chat--color--primary-shade-50: #B74E15;
  --chat--color--primary--shade-100: #893B10;
  --chat--color--secondary: #D55B19;
  --chat--color-secondary-shade-50: #B74E15;
  --chat--color-white: #ffffff;
  --chat--color-light: #F5F5F5;
  --chat--color-light-shade-50: #EBEBEB;
  --chat--color-light-shade-100: #E0E0E0;
  --chat--color-dark: #1A1A1A;
  --chat--color-typing: #D55B19;
  --chat--border-radius: 4px;
  --chat--window--width: 390px;
  --chat--window--height: 600px;
  --chat--window--border-radius: 16px;
  --chat--window--border: none;
  --chat--header--background: #D55B19;
  --chat--header--color: #ffffff;
  --chat--header--border-bottom: none;
  --chat--header--padding: 12px 16px;
  --chat--body--background: #ffffff;
  --chat--message--bot--background: #ffffff;
  --chat--message--bot--color: #1A1A1A;
  --chat--message--bot--border: 1px solid #E8E8E8;
  --chat--message--user--background: #D55B19;
  --chat--message--user--color: #ffffff;
  --chat--message--border-radius: 12px;
  --chat--message--padding: 10px 14px;
  --chat--message--font-size: 14px;
  --chat--messages-list--padding: 16px 12px;
  --chat--toggle--background: #D55B19;
  --chat--toggle--hover--background: #B74E15;
  --chat--toggle--active--background: #893B10;
  --chat--toggle--color: #ffffff;
  --chat--input--container--background: #ffffff;
  --chat--input--container--border: 1px solid #E0E0E0;
  --chat--input--container--border-radius: 24px;
  --chat--input--background: #ffffff;
  --chat--input--send--button--background: #D0D0D0;
  --chat--input--send--button--color: #ffffff;
  --chat--input--send--button--background-hover: #B74E15;
  --chat--input--send--button--color-hover: #ffffff;
  --chat--input--button--border-radius: 50%;
  --chat--footer--background: #ffffff;
  --chat--footer--border-top: 1px solid #EBEBEB;
  --chat--footer--padding: 6px 10px;
}

/* ── Header ── */
.chat-layout .chat-header {
  background: #D55B19 !important;
  padding: 12px 16px !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.chat-heading {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 10px !important;
}

.bb-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.bb-header-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.chat-layout .chat-header h1 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 !important;
  font-family: 'UCityPro', 'UCity Pro', sans-serif !important;
  white-space: nowrap !important;
}

.chat-layout .chat-header p { display: none !important; }

/* ── Messages ── */
.chat-message.chat-message-from-bot {
  background-color: #F0F0F0 !important;
  border: none !important;
  border-bottom-left-radius: 2px !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  color: #1A1A1A !important;
  max-width: 82% !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* Bot message row — avatar + bubble side by side */
.chat-message-wrapper-bot,
.chat-message-from-bot-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

/* Avatar circle next to bot bubble */
.bb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
}

.chat-message.chat-message-from-user {
  background-color: #D55B19 !important;
  border-bottom-right-radius: 2px !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  color: #ffffff !important;
  max-width: 78% !important;
  width: fit-content !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Spacing between consecutive same-sender messages */
.chat-message.chat-message-from-user + .chat-message.chat-message-from-user {
  margin-top: 4px !important;
}

.chat-message.chat-message-from-bot + .chat-message.chat-message-from-bot {
  margin-top: 4px !important;
}

/* Larger gap when sender switches */
.chat-message.chat-message-from-user + .chat-message.chat-message-from-bot,
.chat-message.chat-message-from-bot + .chat-message.chat-message-from-user {
  margin-top: 16px !important;
}



/* ── Send button ── */
.chat-input-send-button {
  background: #D0D0D0 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  margin: 3px !important;
  transition: background 0.2s ease !important;
}

.chat-input-send-button:hover:not([disabled]) { background: #B74E15 !important; }

.chat-input-send-button svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  width: 14px !important;
  height: 14px !important;
}

/* ── Input ── */
.chat-inputs {
  border-radius: 20px !important;
  border: 1.5px solid #E0E0E0 !important;
  background: #ffffff !important;
  padding: 2px 3px 2px 10px !important;
  min-height: 36px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.chat-inputs:focus-within {
  border-color: #D55B19 !important;
  box-shadow: 0 0 0 3px rgba(213,91,25,0.18) !important;
}

.chat-inputs textarea {
  min-height: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
  font-size: 13px !important;
  padding: 10px 6px !important;
  line-height: 1.4 !important;
  text-align: left !important;
  font-family: 'UCityPro', 'UCity Pro', sans-serif !important;
  overflow: hidden !important;
  resize: none !important;
}

/* Allow scroll and expand only when content exceeds one line */
.chat-inputs textarea.expanded {
  max-height: 120px !important;
  overflow-y: auto !important;
}

.chat-layout .chat-footer {
  background: #ffffff !important;
  border-top: none !important;
  padding: 10px 10px 20px !important;
}

.chat-layout .chat-body {
  background: #ffffff !important;
}

/* ── Toggle bubble ── */
.chat-window-toggle svg { display: none !important; }

.chat-window-toggle {
  background: #D55B19 !important;
  box-shadow: 0 4px 16px rgba(213,91,25,0.4) !important;
  width: auto !important;
  height: 52px !important;
  border-radius: 28px !important;
  padding: 0 20px 0 10px !important;
  background-image: url('https://www.dropbox.com/scl/fi/2cirls1ok1tc1x4xfs3h3/TMG-LOGO.png?rlkey=qodd8zp9obl1vc77c8qdfnwic&raw=1') !important;
  background-repeat: no-repeat !important;
  background-size: 32px !important;
  background-position: 10px center !important;
  transition: width 0.2s ease, border-radius 0.2s ease, padding 0.2s ease, background 0.2s ease !important;
  overflow: hidden !important;
}

.chat-window-toggle::after {
  content: "Let's Chat!";
  color: #ffffff;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  font-family: 'UCityPro', 'UCity Pro', sans-serif;
  margin-left: 36px;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.chat-window-toggle::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-right: 0px solid #ffffff;
  border-bottom: 0px solid #ffffff;
  opacity: 0;
  transition: opacity 0.15s ease 0.1s;
}

/* Open state — smooth morph to circle with down arrow */
.chat-window-wrapper.chat-window-open .chat-window-toggle {
  width: 52px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background-image: none !important;
  justify-content: center !important;
}

.chat-window-wrapper.chat-window-open .chat-window-toggle::after {
  opacity: 0 !important;
  margin-left: 0 !important;
  content: "" !important;
}

.chat-window-wrapper.chat-window-open .chat-window-toggle::before {
  width: 11px;
  height: 11px;
  border-right: 2.5px solid #ffffff;
  border-bottom: 2.5px solid #ffffff;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 1;
}

/* ── Window ── */
.chat-window {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
  font-family: 'UCityPro', 'UCity Pro', sans-serif !important;
}

.chat-layout { font-family: 'UCityPro', 'UCity Pro', sans-serif !important; }

/* ── Chips ── */
.bb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
}

.bb-chip {
  background: #FCEFE8;
  color: #B74E15;
  border: 1px solid #FAE0D1;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'UCityPro', 'UCity Pro', sans-serif;
  line-height: 1;
  transition: background 0.15s;
}

.bb-chip:hover { background: #F4C0A4; }

/* ── Welcome branding ── */
.bb-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 8px;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
}

/* ── Hide until logo loads ── */
.chat-window-wrapper {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.chat-window-wrapper.bb-ready { opacity: 1; }