@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;800&display=swap");

/*
 * Capzula's look for the OpenMaus web app. The fork loads this file when
 * OMB_PORTAL_EMBED_THEME_FILE points at it, after its own styles.
 *
 * OpenMaus builds every skin from these tokens, so overriding them restyles the whole app, whichever
 * skin a person's device would pick. Values come from the Capzula design system. Where a brand colour
 * doesn't reach 4.5:1 for text or small controls, this uses the design system's darker step.
 */

:root,
[data-skin] {
  color-scheme: light;
  --code-color-scheme: light;

  /* White-first surfaces. */
  --color-app: #ffffff;
  --color-panel: #fbfbfb;
  --color-frame: #fbfbfb;
  --color-raised: #feeff4;
  --color-raised-hover: #ffe0ea;
  --color-card: #f4f2f3;
  --color-inset: #f4f2f3;
  --color-control: #e0e0e0;
  --color-composer: #ffffff;
  --color-composer-ring: rgb(145 158 171 / 0.32);
  --color-menu: #ffffff;
  --color-menu-hover: rgb(145 158 171 / 0.08);
  --color-menu-active: rgb(145 158 171 / 0.16);
  --color-hairline: rgb(145 158 171 / 0.4);
  --color-edge: rgb(145 158 171 / 0.2);
  --color-scrollbar: #e0e0e0;

  /* Ink. */
  --color-ink: #1c1c1c;
  --color-ink-secondary: #424242;
  --color-ink-tertiary: #616161;

  /* Accent. */
  --color-accent: #c95076;
  --color-accent-border: #e25a85;
  --color-accent-text: #a63b5d;
  --color-accent-ink: #ffffff;
  --color-focus: #e25a85;

  /* Messages. */
  --color-bubble-user: #feeff4;
  --color-bubble-user-ink: #1c1c1c;

  /* Status, on the design system's darker steps so they read as text. */
  --color-success: #4a7021;
  --color-success-ink: #ffffff;
  --color-danger: #c24444;
  --color-danger-ink: #ffffff;
  --color-warning: #a86a1f;

  /* A person's bot keeps one colour, not the rainbow OpenMaus offers. */
  --identity-green: #a63b5d;
  --identity-blue: #a63b5d;
  --identity-red: #a63b5d;
  --identity-orange: #a63b5d;
  --identity-purple: #a63b5d;
  --identity-cyan: #a63b5d;
  --identity-pink: #a63b5d;
  --identity-yellow: #a63b5d;
  --identity-teal: #a63b5d;
  --identity-coral: #a63b5d;
  --identity-silver: #a63b5d;
  --identity-chrome: #a63b5d;

  /* Type. */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-bold: 600;

  /* Shape: 8px is the default. */
  --radius-xs: 4px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-2xl: 8px;
  --radius-3xl: 12px;
  --radius-4xl: 12px;

  /* The design system's card shadow. */
  --shadow-lg: 0 0 2px 0 rgb(145 158 171 / 0.2), 0 12px 24px -4px rgb(145 158 171 / 0.12);
  --shadow-xl: 0 0 2px 0 rgb(145 158 171 / 0.2), 0 12px 24px -4px rgb(145 158 171 / 0.16);
  --shadow-2xl: 0 0 2px 0 rgb(145 158 171 / 0.2), 0 16px 32px -4px rgb(145 158 171 / 0.2);
  --shadow-float: 0 0 2px 0 rgb(145 158 171 / 0.2), 0 12px 24px -4px rgb(145 158 171 / 0.12);
}

/* A person's message is coloured per bot through inline styles, which only !important can replace. */
.user-bubble-colored {
  background-color: #feeff4 !important;
  background-image: none !important;
  box-shadow: none !important;
  --color-bubble-user: #feeff4 !important;
  --color-bubble-user-ink: #1c1c1c !important;
  --color-ink: #1c1c1c !important;
  --color-ink-secondary: #424242 !important;
  --color-ink-tertiary: #616161 !important;
  --color-accent: #c95076 !important;
  --color-accent-text: #a63b5d !important;
  --color-accent-ink: #ffffff !important;
  --color-focus: #e25a85 !important;
  --bubble-selection: #ffc2d5 !important;
  --bubble-selection-ink: #1c1c1c !important;
}

/* The send button is coloured per bot through an inline style. */
[data-tour="composer"] button[style*="background-color"] {
  background-color: #e25a85 !important;
}

/* Primary buttons are drawn in ink, where the portal's are pink. */
button.bg-ink {
  background-color: #e25a85 !important;
  color: #ffffff !important;
}
button.bg-ink:hover:not(:disabled) {
  background-color: #c95076 !important;
}

/* These shapes are hard-coded as pills, which the brand keeps for hero buttons. Round icon buttons stay round. */
button.rounded-full:not([class*="size-"]) {
  border-radius: 8px !important;
}
[class*="rounded-[22px]"],
[class*="rounded-[24px]"],
[class*="rounded-[26px]"],
[data-chat-bubble] {
  border-radius: 12px !important;
}

/*
 * At half a screen the bot's name, the thread's title and the model picker meet. Centring lets the title run under the
 * picker, while stretching lets it shorten. The column already fits the title when there's room, so it stays centred.
 */
[data-chathead-row] {
  column-gap: 8px;
}

[data-chathead-identity] {
  justify-self: stretch;
  justify-content: center;
}