/* Keep the motion on the sign-in screen. The conversation has a static ink mark. */
.min-h-screen:has(> main [data-testid="login-button"]) {
  isolation: isolate;
  --cw-paper: #f4f6f5;
  --cw-tint: #d9e7e8;
  --cw-rule: rgb(25 76 85 / 10%);
  --cw-glass: rgb(255 255 255 / 93%);
  --cw-shadow: rgb(21 60 70 / 9%);
  --cw-watermark: rgb(25 79 89 / 18%);
  --cw-dust-main: #2d7490;
  --cw-dust-alt: #547da4;
  --cw-dust-opacity: .53;
  background:
    radial-gradient(ellipse at 26% 50%, var(--cw-tint), transparent 63%),
    var(--cw-paper);
}
.dark .min-h-screen:has(> main [data-testid="login-button"]) {
  --cw-paper: #101517;
  --cw-tint: #173338;
  --cw-rule: rgb(160 215 219 / 11%);
  --cw-glass: rgb(24 33 36 / 96%);
  --cw-shadow: rgb(0 0 0 / 20%);
  --cw-watermark: rgb(175 221 224 / 19%);
  --cw-dust-main: #9bd8eb;
  --cw-dust-alt: #80a4cf;
  --cw-dust-opacity: .59;
}
.min-h-screen:has(> main [data-testid="login-button"]) > div:has(> img[src$="assets/logo.svg"]) {
  display: none;
}
.min-h-screen:has(> main [data-testid="login-button"]) > main {
  position: relative;
  padding: clamp(56px, 9vh, 100px) 4% clamp(56px, 9vh, 100px) 50%;
}
.min-h-screen:has(> main [data-testid="login-button"]) > main::before {
  content: "";
  position: absolute;
  inset: 0 48% 0 2%;
  z-index: -1;
  pointer-events: none;
  background: var(--cw-watermark);
  mask: url("./contaweb-aym-3ffd8b6a81.svg") center / min(39vw, 66vh, 640px) auto no-repeat;
}
.min-h-screen:has(> main [data-testid="login-button"]) > div:has(button[aria-keyshortcuts]) {
  z-index: 1;
}
.min-h-screen:has(> main [data-testid="login-button"]) > main > div {
  width: min(100%, 408px);
  padding: clamp(25px, 3vw, 40px);
  border: 1px solid var(--cw-rule);
  border-radius: 20px;
  background: var(--cw-glass);
  box-shadow: 0 20px 64px -24px var(--cw-shadow);
}
.min-h-screen:has(> main [data-testid="login-button"]) h1 {
  text-align: start;
  letter-spacing: -.035em;
}
.min-h-screen:has(> main [data-testid="login-button"]) h1::before {
  content: "ContawebChat";
  display: flex;
  align-items: center;
  height: 38px;
  padding-inline-start: 48px;
  margin-bottom: 20px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.04em;
  background: url("./contaweb-mark.svg") left center / 38px 38px no-repeat;
}
[dir="rtl"] .min-h-screen:has(> main [data-testid="login-button"]) h1::before {
  background-position: right center;
}
[data-testid="login-button"] {
  background-color: #164951;
  color: white;
}
[data-testid="login-button"]:hover { background-color: #1a555d; }
.dark [data-testid="login-button"] { background-color: #a6dce1; color: #10272e; }
.dark [data-testid="login-button"]:hover { background-color: #b6e3e7; }
main[role="main"]:has([data-chat-pane]) {
  position: relative;
  isolation: isolate;
}
main[role="main"]:has([data-chat-pane])::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: #153c45;
  opacity: .065;
  mask: url("./contaweb-aym-3ffd8b6a81.svg") center / clamp(220px, 33vw, 470px) auto no-repeat;
}
.dark main[role="main"]:has([data-chat-pane])::before {
  background-color: #c2e5e9;
  opacity: .075;
}
@media (max-width: 720px) {
  .min-h-screen:has(> main [data-testid="login-button"]) > main {
    padding: clamp(140px, 25svh, 220px) 18px 76px;
  }
  .min-h-screen:has(> main [data-testid="login-button"]) > main::before {
    inset: 0;
    mask-position: 50% 14px;
    mask-size: min(66vw, 29svh) auto;
  }
  main[role="main"]:has([data-chat-pane])::before {
    mask-size: min(64vw, 260px) auto;
    opacity: .045;
  }
}
.min-h-screen:has(> main [data-testid="login-button"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--cw-dust-opacity);
  background-image:
    radial-gradient(ellipse 1.65px 1.15px at 19% 31%, var(--cw-dust-main) 65%, transparent),
    radial-gradient(circle 1.3px at 68% 74%, var(--cw-dust-alt) 70%, transparent),
    radial-gradient(ellipse 2px 1.3px at 82% 21%, var(--cw-dust-main) 65%, transparent),
    radial-gradient(circle 1px at 39% 54%, var(--cw-dust-alt) 70%, transparent);
  background-size: 142px 131px, 179px 167px, 217px 213px, 109px 151px;
  mask-image: radial-gradient(ellipse at 73% 50%, #0005, black 67%);
  animation: cw-particle-drift 12s ease-in-out infinite alternate;
}
@keyframes cw-particle-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 8px -14px, -9px -7px, 12px 5px, -5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .min-h-screen:has(> main [data-testid="login-button"])::before { animation: none; }
}
@media (forced-colors: active) {
  .min-h-screen:has(> main [data-testid="login-button"])::before,
  .min-h-screen:has(> main [data-testid="login-button"]) > main::before,
  main[role="main"]:has([data-chat-pane])::before { display: none; }
}