/*
 * Outline Studio product skin
 * Target: Chatwoot Community Edition v4.17.0
 * This file is deliberately loaded after the compiled application CSS.
 */

:root,
:root.dark {
  color-scheme: dark;

  --outline-ink: 7 8 11;
  --outline-ink-soft: 11 12 16;
  --outline-surface: 17 19 26;
  --outline-surface-raised: 18 22 32;
  --outline-primary: 88 102 242;
  --outline-primary-hover: 75 87 216;
  --outline-primary-soft: 154 164 255;
  --outline-acid: 216 255 67;

  /* The app's next-generation design tokens. */
  --background-color: var(--outline-ink);
  --surface-1: var(--outline-ink-soft);
  --surface-2: 13 15 20;
  --surface-active: 30 34 49;
  --background-input-box: 255, 255, 255, 0.035;
  --border-container: 255, 255, 255, 0.12;
  --border-strong: 54 58 70;
  --border-weak: 31 34 43;
  --border-blue-strong: var(--outline-primary-soft);
  --solid-1: var(--outline-ink-soft);
  --solid-2: 13 15 20;
  --solid-3: var(--outline-surface-raised);
  --solid-active: 30 34 49;
  --card-color: var(--outline-surface);
  --overlay: 0, 0, 0, 0.72;
  --overlay-avatar: 7, 8, 11, 0.72;
  --button-color: 244 245 247;
  --button-hover-color: 255, 255, 255, 0.10;
  --label-background: 18 22 32;
  --label-border: 255, 255, 255, 0.08;
  --alpha-1: 255, 255, 255, 0.045;
  --alpha-2: 255, 255, 255, 0.075;
  --alpha-3: 17, 19, 26, 0.96;
  --black-alpha-1: 0, 0, 0, 0.42;
  --black-alpha-2: 0, 0, 0, 0.24;
  --border-blue: 154, 164, 255, 0.55;
  --white-alpha: 255, 255, 255, 0.86;

  /* Neutral scale: dark canvas to warm-white text. */
  --slate-1: 7 8 11;
  --slate-2: 11 12 16;
  --slate-3: 17 19 26;
  --slate-4: 24 27 36;
  --slate-5: 31 34 43;
  --slate-6: 42 47 60;
  --slate-7: 54 58 70;
  --slate-8: 75 81 97;
  --slate-9: 118 124 139;
  --slate-10: 145 150 162;
  --slate-11: 192 195 204;
  --slate-12: 244 245 247;

  /* Remap every blue/iris brand utility away from the upstream blue. */
  --blue-1: 12 13 26;
  --blue-2: 17 19 39;
  --blue-3: 27 31 67;
  --blue-4: 36 42 91;
  --blue-5: 45 52 113;
  --blue-6: 55 63 137;
  --blue-7: 69 78 164;
  --blue-8: 81 92 205;
  --blue-9: var(--outline-primary);
  --blue-10: var(--outline-primary-hover);
  --blue-11: var(--outline-primary-soft);
  --blue-12: 226 229 255;
  --iris-1: 12 13 26;
  --iris-2: 17 19 39;
  --iris-3: 27 31 67;
  --iris-4: 36 42 91;
  --iris-5: 45 52 113;
  --iris-6: 55 63 137;
  --iris-7: 69 78 164;
  --iris-8: 81 92 205;
  --iris-9: var(--outline-primary);
  --iris-10: var(--outline-primary-hover);
  --iris-11: var(--outline-primary-soft);
  --iris-12: 226 229 255;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "InterDisplay", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
}

html,
body,
#app {
  background: rgb(var(--outline-ink));
}

body.outline-studio-ui {
  color: rgb(var(--slate-11));
  letter-spacing: -0.012em;
}

::selection {
  color: rgb(var(--slate-12));
  background: rgb(var(--outline-primary) / 0.42);
}

*:focus-visible {
  outline-color: rgb(var(--outline-primary-soft)) !important;
  outline-offset: 2px;
}

/* Brand utilities emitted by the existing Tailwind build. */
.text-n-brand,
.text-woot-500,
.text-woot-600,
.text-link {
  color: rgb(var(--outline-primary-soft)) !important;
}

.bg-n-brand,
.bg-woot-500,
.bg-woot-600 {
  background-color: rgb(var(--outline-primary)) !important;
}

.bg-n-brand\/5 {
  background-color: rgb(var(--outline-primary) / 0.05) !important;
}

.bg-n-brand\/10 {
  background-color: rgb(var(--outline-primary) / 0.10) !important;
}

.bg-n-brand\/20 {
  background-color: rgb(var(--outline-primary) / 0.20) !important;
}

.border-n-brand,
.border-woot-500,
.ring-n-brand,
.outline-n-brand {
  border-color: rgb(var(--outline-primary)) !important;
  --tw-ring-color: rgb(var(--outline-primary) / 0.55) !important;
  outline-color: rgb(var(--outline-primary)) !important;
}

.hover\:bg-n-brand:hover,
.hover\:bg-woot-600:hover,
.hover\:enabled\:bg-n-brand:hover:enabled {
  background-color: rgb(var(--outline-primary-hover)) !important;
}

.outline-studio-ui .bg-white,
.outline-studio-ui .dark\:bg-n-solid-2,
.outline-studio-ui .dark\:bg-slate-800 {
  background-color: rgb(var(--surface-2)) !important;
}

/* Controls */
.outline-studio-ui button,
.outline-studio-ui [role="button"] {
  border-radius: 10px;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.outline-studio-ui button:active:not(:disabled),
.outline-studio-ui [role="button"]:active:not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.outline-studio-ui button[class*="bg-n-brand"],
.outline-studio-ui button[class*="bg-woot"],
.outline-studio-ui a[class*="bg-n-brand"] {
  color: #fff !important;
  background: rgb(var(--outline-primary)) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgb(var(--outline-primary) / 0.20);
}

.outline-studio-ui button[class*="bg-n-brand"]:hover:not(:disabled),
.outline-studio-ui button[class*="bg-woot"]:hover:not(:disabled),
.outline-studio-ui a[class*="bg-n-brand"]:hover {
  background: rgb(var(--outline-primary-hover)) !important;
  box-shadow: 0 10px 30px rgb(var(--outline-primary) / 0.28);
}

.outline-studio-ui input:not([type="checkbox"]):not([type="radio"]),
.outline-studio-ui textarea,
.outline-studio-ui select,
.outline-studio-ui [contenteditable="true"] {
  color: rgb(var(--slate-12)) !important;
  background-color: rgb(255 255 255 / 0.035) !important;
  border-color: rgb(90 97 112) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.025) !important;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.outline-studio-ui input:not([type="checkbox"]):not([type="radio"]):focus,
.outline-studio-ui textarea:focus,
.outline-studio-ui select:focus,
.outline-studio-ui [contenteditable="true"]:focus {
  background-color: rgb(255 255 255 / 0.055) !important;
  border-color: rgb(var(--outline-primary-soft)) !important;
  box-shadow: 0 0 0 3px rgb(var(--outline-primary) / 0.18) !important;
  outline: none !important;
}

.outline-studio-ui input::placeholder,
.outline-studio-ui textarea::placeholder {
  color: rgb(var(--slate-9)) !important;
  opacity: 1;
}

.outline-studio-ui label {
  color: rgb(var(--slate-11));
}

/* Panels, cards and popovers */
.outline-studio-ui [role="dialog"],
.outline-studio-ui [role="menu"],
.outline-studio-ui [role="listbox"],
.outline-studio-ui .modal-container,
.outline-studio-ui .dropdown-pane,
.outline-studio-ui .multiselect__content-wrapper {
  color: rgb(var(--slate-11));
  background: rgb(var(--outline-surface)) !important;
  border: 1px solid rgb(255 255 255 / 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.42) !important;
}

.outline-studio-ui .shadow,
.outline-studio-ui .shadow-sm,
.outline-studio-ui .shadow-md,
.outline-studio-ui .shadow-lg {
  --tw-shadow-color: rgb(0 0 0 / 0.24);
}

.outline-studio-ui table {
  border-collapse: separate;
  border-spacing: 0;
}

.outline-studio-ui th {
  color: rgb(var(--slate-9)) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.outline-studio-ui tr {
  border-color: rgb(255 255 255 / 0.08) !important;
}

.outline-studio-ui tbody tr:hover {
  background: rgb(255 255 255 / 0.025);
}

.outline-studio-ui .badge,
.outline-studio-ui [class*="rounded-full"] {
  letter-spacing: 0.015em;
}

/* Sidebar: quieter navigation with a branded active rail. */
.outline-studio-ui aside[class*="bg-n-background"] {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent 20%),
    rgb(var(--outline-ink-soft)) !important;
  border-color: rgb(255 255 255 / 0.10) !important;
  box-shadow: 14px 0 40px rgb(0 0 0 / 0.16);
}

.outline-studio-ui aside[class*="bg-n-background"] nav a,
.outline-studio-ui aside[class*="bg-n-background"] nav button {
  min-height: 36px;
  border-radius: 9px;
}

.outline-studio-ui aside[class*="bg-n-background"] nav a:hover,
.outline-studio-ui aside[class*="bg-n-background"] nav button:hover {
  background: rgb(255 255 255 / 0.055) !important;
}

.outline-studio-ui aside[class*="bg-n-background"] nav a.router-link-active,
.outline-studio-ui aside[class*="bg-n-background"] nav a[aria-current="page"],
.outline-studio-ui aside[class*="bg-n-background"] nav [data-active="true"] {
  color: rgb(var(--slate-12)) !important;
  background: linear-gradient(
    90deg,
    rgb(var(--outline-primary) / 0.18),
    rgb(var(--outline-primary) / 0.07)
  ) !important;
  box-shadow: inset 3px 0 0 rgb(var(--outline-primary-soft));
}

/* Conversation workspace */
.outline-studio-ui .conversations-list-wrap {
  background: rgb(var(--outline-ink-soft));
  border-color: rgb(255 255 255 / 0.10) !important;
}

.outline-studio-ui .conversations-list-wrap .conversation {
  border-color: rgb(255 255 255 / 0.075) !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}

.outline-studio-ui .conversations-list-wrap .conversation:hover {
  background: rgb(255 255 255 / 0.035) !important;
}

.outline-studio-ui .conversations-list-wrap .conversation.active,
.outline-studio-ui .conversations-list-wrap .conversation.selected {
  background: linear-gradient(
    90deg,
    rgb(var(--outline-primary) / 0.16),
    rgb(var(--outline-primary) / 0.045)
  ) !important;
  box-shadow: inset 3px 0 0 rgb(var(--outline-primary-soft));
}

.outline-studio-ui .message-bubble,
.outline-studio-ui [class*="message-bubble"] {
  border-radius: 14px !important;
}

.outline-studio-ui .prose-bubble {
  line-height: 1.58;
}

/* Login, password reset and signup: a purpose-built two-column auth shell. */
.outline-auth-shell {
  display: grid !important;
  grid-template-columns: minmax(340px, 0.84fr) minmax(520px, 1.16fr);
  grid-template-rows: 1fr auto 1fr;
  min-height: 100vh !important;
  padding: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 14%, rgb(var(--outline-primary) / 0.12), transparent 27%),
    rgb(var(--outline-ink)) !important;
}

.outline-auth-story {
  position: relative;
  isolation: isolate;
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: clamp(32px, 5vw, 72px);
  overflow: hidden;
  color: rgb(var(--slate-12));
  background:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px),
    radial-gradient(circle at 20% 16%, rgb(var(--outline-primary) / 0.35), transparent 26%),
    radial-gradient(circle at 84% 80%, rgb(var(--outline-primary-soft) / 0.16), transparent 31%),
    rgb(var(--outline-ink-soft));
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
  border-right: 1px solid rgb(255 255 255 / 0.12);
}

.outline-auth-story::before,
.outline-auth-story::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgb(var(--outline-primary-soft) / 0.35);
  border-radius: 38%;
  transform: rotate(45deg);
}

.outline-auth-story::before {
  top: 15%;
  right: -28%;
  width: min(34vw, 480px);
  aspect-ratio: 1;
  box-shadow:
    0 0 0 36px rgb(var(--outline-primary) / 0.035),
    0 0 0 72px rgb(var(--outline-primary) / 0.025);
}

.outline-auth-story::after {
  right: 18%;
  bottom: -11%;
  width: 190px;
  aspect-ratio: 1;
}

.outline-auth-wordmark {
  width: min(210px, 56%);
  height: auto;
}

.outline-auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: rgb(var(--outline-primary-soft));
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.outline-auth-kicker::before {
  width: 7px;
  height: 7px;
  content: "";
  background: rgb(var(--outline-acid));
  border-radius: 50%;
  box-shadow: 0 0 18px rgb(var(--outline-acid) / 0.55);
}

.outline-auth-copy h1 {
  max-width: 580px;
  margin: 0;
  color: rgb(var(--slate-12));
  font-size: clamp(46px, 5.2vw, 78px);
  font-weight: 580;
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.outline-auth-copy h1 em {
  color: rgb(var(--outline-primary-soft));
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.outline-auth-copy p {
  max-width: 500px;
  margin: 26px 0 0;
  color: rgb(var(--slate-10));
  font-size: 15px;
  line-height: 1.7;
}

.outline-auth-foot {
  display: flex;
  gap: 9px;
  align-items: center;
  color: rgb(var(--slate-9));
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.outline-auth-foot span {
  width: 26px;
  height: 1px;
  background: rgb(var(--outline-primary-soft));
}

.outline-auth-shell > section:not(.outline-auth-story) {
  grid-column: 2;
  width: min(480px, calc(100vw - 48px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.outline-auth-shell > section:first-of-type:not(.outline-auth-story) {
  grid-row: 1;
  align-self: end;
  padding-top: 44px;
}

.outline-auth-shell > section:first-of-type:not(.outline-auth-story) img {
  display: none !important;
}

.outline-auth-shell > section:first-of-type:not(.outline-auth-story) h2 {
  margin-top: 0 !important;
  color: rgb(var(--slate-12));
  font-size: 30px !important;
  font-weight: 570 !important;
  letter-spacing: -0.04em;
  text-align: left !important;
}

.outline-auth-shell > section:first-of-type:not(.outline-auth-story) h2::before {
  display: block;
  margin-bottom: 13px;
  color: rgb(var(--outline-primary-soft));
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  content: "SECURE WORKSPACE";
}

.outline-auth-shell > section[class*="shadow"],
.outline-auth-shell > section.mt-11:not(:first-of-type) {
  grid-row: 2;
  align-self: center;
  padding: 34px 0 52px !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.outline-auth-shell form {
  padding: 28px;
  background: rgb(var(--outline-surface) / 0.82);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 18px;
  box-shadow: 0 30px 100px rgb(0 0 0 / 0.28);
  backdrop-filter: blur(18px);
}

.outline-auth-shell form label {
  color: rgb(var(--slate-10)) !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.outline-auth-shell form input {
  min-height: 48px;
}

.outline-auth-shell form button[type="submit"] {
  min-height: 48px;
  margin-top: 6px;
  font-weight: 650;
}

.outline-auth-shell a {
  color: rgb(var(--outline-primary-soft)) !important;
}

/* Scrollbars */
.outline-studio-ui * {
  scrollbar-color: rgb(var(--slate-6)) transparent;
  scrollbar-width: thin;
}

.outline-studio-ui *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.outline-studio-ui *::-webkit-scrollbar-thumb {
  background: rgb(var(--slate-6));
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

@media (max-width: 900px) {
  .outline-auth-shell {
    display: flex !important;
    flex-direction: column;
    min-height: 100vh;
    overflow: auto;
  }

  .outline-auth-story {
    min-height: 310px;
    padding: 28px;
    border-right: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }

  .outline-auth-copy h1 {
    max-width: 440px;
    font-size: clamp(40px, 11vw, 58px);
  }

  .outline-auth-copy p,
  .outline-auth-foot {
    display: none;
  }

  .outline-auth-shell > section:not(.outline-auth-story) {
    width: min(480px, calc(100vw - 40px)) !important;
  }

  .outline-auth-shell > section:first-of-type:not(.outline-auth-story) {
    padding-top: 42px;
  }
}

@media (max-width: 560px) {
  .outline-auth-story {
    min-height: 240px;
  }

  .outline-auth-copy h1 {
    font-size: 38px;
  }

  .outline-auth-shell form {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .outline-studio-ui *,
  .outline-studio-ui *::before,
  .outline-studio-ui *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}