:root {
  --callindo-brand: #d44444;
  --callindo-navy: #151b2d;
  --callindo-coral: #f36b73;
  --isla-chat-yellow: #ffbe00;
  --isla-chat-navy: #001e3f;
  --isla-chat-label: #001226;
  --isla-chat-system: #f1f1f1;
}

.callindo-360-return {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483646;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 8px 15px 8px 9px;
  color: #fff !important;
  background: rgba(21, 27, 45, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.callindo-360-return::before {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  content: "360°";
  color: #fff;
  background: linear-gradient(135deg, var(--callindo-coral), var(--callindo-brand));
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}

.callindo-360-return:hover {
  color: #fff !important;
  background: #20283f !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.34);
  transform: translateY(-2px);
}

.bg-n-brand,
[class~="checked:bg-n-brand"]:checked,
[class~="indeterminate:bg-n-brand"]:indeterminate,
.group:hover [class~="group-hover:bg-n-brand"],
.dark [class~="dark:checked:bg-n-brand"]:checked,
[class~="before:bg-n-brand"]::before,
[class~="after:bg-n-brand"]::after {
  background-color: var(--callindo-brand) !important;
}

[class~="bg-n-brand/5"] {
  background-color: #d444440d !important;
}

[class~="bg-n-brand/10"],
[class~="hover:bg-n-brand/10"]:hover,
.dark [class~="dark:bg-n-brand/10"] {
  background-color: #d444441a !important;
}

[class~="focus-visible:bg-n-brand/20"]:focus-visible,
[class~="hover:enabled:bg-n-brand/20"]:enabled:hover {
  background-color: #d4444433 !important;
}

[class~="hover:bg-n-brand/80"]:hover {
  background-color: #d44444cc !important;
}

.text-n-brand,
.text-link,
[class~="hover:text-n-brand"]:hover,
.group:focus-within [class~="group-focus-within:text-n-brand"],
.group:hover [class~="group-hover:text-n-brand"],
.dark [class~="dark:hover:text-n-brand"]:hover {
  color: var(--callindo-brand) !important;
}

.border-n-brand,
[class~="checked:border-n-brand"]:checked,
[class~="indeterminate:border-n-brand"]:indeterminate,
[class~="focus:border-n-brand"]:focus,
.dark [class~="dark:border-n-brand"],
.dark [class~="dark:checked:border-n-brand"]:checked {
  border-color: var(--callindo-brand) !important;
}

.border-t-n-brand,
[class~="before:!border-t-n-brand"]::before {
  border-top-color: var(--callindo-brand) !important;
}

.outline-n-brand,
\.!outline-n-brand,
[class~="focus:outline-n-brand"]:focus,
[class~="focus-within:outline-n-brand"]:focus-within,
[class~="has-[:focus]:outline-n-brand"]:has(:focus),
.dark [class~="dark:outline-n-brand"],
.dark [class~="dark:!outline-n-brand"],
.dark [class~="dark:focus:outline-n-brand"]:focus,
.dark [class~="dark:focus-within:outline-n-brand"]:focus-within,
.dark [class~="dark:has-[:focus]:outline-n-brand"]:has(:focus) {
  outline-color: var(--callindo-brand) !important;
}

.ring-n-brand,
[class~="focus:ring-n-brand"]:focus,
[class~="focus-visible:ring-n-brand"]:focus-visible,
[class~="focus-within:ring-n-brand"]:focus-within,
.dark [class~="dark:ring-n-brand"] {
  --tw-ring-color: rgb(212 68 68 / var(--tw-ring-opacity, 1)) !important;
}

main img[alt="Callindo Inbox"] {
  height: 3.5rem !important;
}

/* ISLA Energy website widget, per Chatbot Style Guide (2026-09-14). */
.is-isla-live-chat .conversation-wrap .chat-bubble.agent {
  color: var(--isla-chat-label) !important;
  background: var(--isla-chat-system) !important;
}

.is-isla-live-chat .conversation-wrap .chat-bubble.agent .prose-bubble,
.is-isla-live-chat .conversation-wrap .chat-bubble.agent p,
.is-isla-live-chat .conversation-wrap .chat-bubble.agent span {
  color: var(--isla-chat-label) !important;
}

.is-isla-live-chat .conversation-wrap .chat-bubble.user {
  color: #fff !important;
  background: var(--isla-chat-navy) !important;
}

.is-isla-live-chat .conversation-wrap .chat-bubble.user .prose-bubble,
.is-isla-live-chat .conversation-wrap .chat-bubble.user p,
.is-isla-live-chat .conversation-wrap .chat-bubble.user span {
  color: #fff !important;
}

.is-isla-live-chat .conversation-wrap .option {
  color: var(--isla-chat-label) !important;
  background: #fff !important;
  border-color: #fff !important;
}

.is-isla-live-chat .conversation-wrap .option .option-button {
  color: var(--isla-chat-label) !important;
  background: #fff !important;
}

.is-isla-live-chat footer button:has(.i-lucide-send),
.is-isla-live-chat footer button:has([class*="i-lucide-send"]) {
  color: var(--isla-chat-label) !important;
  background: var(--isla-chat-yellow) !important;
  border-radius: 999px !important;
}

.is-isla-live-chat [class~="!bg-n-button-color"],
.is-isla-live-chat .bg-n-button-color {
  color: var(--isla-chat-label) !important;
  background-color: var(--isla-chat-yellow) !important;
}

.is-isla-live-chat [unread-count] > button:has(.i-lucide-chevron-right) {
  align-self: flex-start;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  color: var(--isla-chat-label) !important;
  background: var(--isla-chat-yellow) !important;
  border: 1px solid var(--isla-chat-yellow);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 30, 63, 0.14);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.is-isla-live-chat [unread-count] > button:has(.i-lucide-chevron-right):hover {
  background: #f2b500 !important;
  box-shadow: 0 6px 16px rgba(0, 30, 63, 0.2);
  transform: translateY(-1px);
}

.is-isla-live-chat [unread-count] > button:has(.i-lucide-chevron-right):focus-visible {
  outline: 3px solid rgba(0, 30, 63, 0.35);
  outline-offset: 3px;
}

@media (max-width: 800px) {
  .callindo-360-return {
    right: 12px;
    bottom: 12px;
  }
}