/* Scanet AI theme for the Web Chat Service. Loaded after the upstream stylesheet, overrides its role variables only. */

@font-face {
  font-family: "Sora";
  src: url("/brand/fonts/Sora-VF.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}

/* Light: paper canvas, white cards */
html {
  --brand-purple: #0A7A76;
  --presentation: var(--sc-paper);
  --text-primary: var(--sc-ink);
  --text-secondary: #3F4F63;
  --text-secondary-alt: #5B6B7F;
  --text-tertiary: #5B6B7F;
  --ring-primary: var(--sc-teal);
  --header-primary: var(--sc-paper);
  --header-hover: var(--sc-paper-2);
  --header-button-hover: var(--sc-paper-2);
  --surface-active: var(--sc-paper-2);
  --surface-active-alt: #E3E0D6;
  --surface-hover: #E3E0D6;
  --surface-hover-alt: #DAD7CC;
  --surface-primary: var(--sc-paper);
  --surface-primary-alt: var(--sc-paper-3);
  --surface-primary-contrast: var(--sc-paper-2);
  --surface-secondary: var(--sc-paper-2);
  --surface-secondary-alt: #E3E0D6;
  --surface-tertiary: var(--sc-paper-2);
  --surface-tertiary-alt: var(--sc-paper-3);
  --surface-dialog: var(--sc-paper-3);
  --surface-submit: #0A7A76;
  --surface-submit-hover: #086561;
  --surface-chat: var(--sc-paper-3);
  --border-light: #DAD7CC;
  --border-medium-alt: #C9C5B8;
  --border-medium: #C9C5B8;
  --border-heavy: #A9A597;
  --border-xheavy: #7E7A6C;
  --background: 50 21% 94%;
  --foreground: 213 55% 10%;
  --card: 0 0% 100%;
  --card-foreground: 213 55% 10%;
  --primary: 178 85% 26%;
  --primary-foreground: 0 0% 100%;
  --secondary: 48 20% 90%;
  --secondary-foreground: 213 55% 10%;
  --muted: 48 20% 90%;
  --muted-foreground: 213 17% 43%;
  --accent: 48 20% 90%;
  --accent-foreground: 213 55% 10%;
  --border: 47 16% 83%;
  --input: 47 16% 83%;
  --ring: 178 84% 34%;
  --radius: .75rem;
}

/* Dark: the default identity */
.dark {
  --brand-purple: var(--sc-teal-text-dark);
  --presentation: var(--sc-ink);
  --text-primary: var(--sc-paper);
  --text-secondary: #C3CEDB;
  --text-secondary-alt: #9FB0C4;
  --text-tertiary: #7D90A6;
  --ring-primary: var(--sc-teal);
  --header-primary: var(--sc-ink-2);
  --header-hover: var(--sc-ink-4);
  --header-button-hover: var(--sc-ink-4);
  --surface-active: var(--sc-ink-4);
  --surface-active-alt: var(--sc-ink-4);
  --surface-hover: var(--sc-ink-4);
  --surface-hover-alt: #24405F;
  --surface-primary: var(--sc-ink);
  --surface-primary-alt: var(--sc-ink-2);
  --surface-primary-contrast: var(--sc-ink-2);
  --surface-secondary: var(--sc-ink-2);
  --surface-secondary-alt: var(--sc-ink-3);
  --surface-tertiary: var(--sc-ink-3);
  --surface-tertiary-alt: var(--sc-ink-3);
  --surface-dialog: var(--sc-ink-2);
  --surface-submit: #0A7A76;
  --surface-submit-hover: #086561;
  --surface-chat: var(--sc-ink-2);
  --border-light: #22364F;
  --border-medium-alt: #2B4260;
  --border-medium: #2B4260;
  --border-heavy: #3A5678;
  --border-xheavy: #4A6A90;
  --background: 213 55% 10%;
  --foreground: 50 21% 94%;
  --card: 214 52% 13%;
  --card-foreground: 50 21% 94%;
  --primary: 178 84% 34%;
  --primary-foreground: 213 55% 10%;
  --secondary: 214 48% 17%;
  --secondary-foreground: 50 21% 94%;
  --muted: 214 48% 17%;
  --muted-foreground: 212 24% 70%;
  --accent: 214 48% 17%;
  --accent-foreground: 50 21% 94%;
  --border: 213 40% 22%;
  --input: 213 40% 22%;
  --ring: 178 84% 34%;
}

html, body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }

/* Sign-in and other auth pages hard-code white / gray-900 instead of using the role variables */
body { background-color: var(--sc-paper); }
.dark body { background-color: var(--sc-ink); }
.min-h-screen.bg-white { background-color: var(--sc-paper); }
.w-authPageWidth.bg-white { background-color: var(--sc-paper-3); }
.dark .dark\:bg-gray-900 { background-color: var(--sc-ink); }
.dark .w-authPageWidth, .dark .w-authPageWidth .dark\:bg-gray-900 { background-color: var(--sc-ink-2); }
.webkit-dark-styles, .webkit-dark-styles:focus { box-shadow: 0 0 0 50vh var(--sc-paper) inset; }
.dark .webkit-dark-styles, .dark .webkit-dark-styles:focus { box-shadow: 0 0 0 50vh var(--sc-ink) inset; }
::selection { background: color-mix(in srgb, var(--sc-teal) 35%, transparent); }

/* Composer: viewfinder corners on focus, taken from the logo */
.sc-composer::before {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease);
  --c: var(--sc-teal);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 0 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px;
  background-repeat: no-repeat;
}
.sc-composer:focus-within::before { opacity: 1; }

/* Sign-in rate-limit notice with countdown */
.sc-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--v-warn) 55%, transparent);
  border-left: 4px solid var(--v-warn);
  background: var(--sc-paper-3);
  color: var(--sc-ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.5;
  box-shadow: 0 10px 30px rgb(0 0 0 / .25);
  font-variant-numeric: tabular-nums;
}
.dark .sc-toast { background: var(--sc-ink-3); color: var(--sc-paper); }
.sc-toast.sc-toast-ok { border-color: color-mix(in srgb, var(--v-allow) 55%, transparent); border-left-color: var(--v-allow); }
body.sc-limited a[href*="/oauth/"], body.sc-limited form button[type="submit"] { opacity: .45; pointer-events: none; }

/* Scan sweep when a message is sent */
.sc-scan {
  position: fixed;
  z-index: 60;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sc-teal) 20%, var(--sc-teal) 80%, transparent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--sc-teal) 70%, transparent);
  animation: sc-sweep var(--scan-duration) var(--ease) 1 forwards;
}
@keyframes sc-sweep {
  0% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--h, 60px)); }
}