.chat {
  --c-bg: #09080e;
  --c-text: #ecebf2;
  --c-dim: rgba(236, 235, 242, .55);
  --c-line: rgba(255, 255, 255, .08);
  --c-glass: rgba(255, 255, 255, .06);
  --c-acc: #f97316;
  --c-acc-2: #fb923c;
  --from-top: 50%;
  --from-right: 10%;
  --from-bottom: 40%;
  --from-left: 10%;
  position: fixed;
  top: var(--vvtop, 0px);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  height: var(--vvh, 100dvh);
  overscroll-behavior: none;
  touch-action: manipulation;
  color: var(--c-text);
  background: var(--c-bg);
  font-family: var(--font);
  clip-path: inset(var(--from-top) var(--from-right) var(--from-bottom) var(--from-left) round 18px);
  opacity: 0;
  visibility: hidden;
  transition: clip-path .62s cubic-bezier(.7, 0, .2, 1), opacity .3s ease, visibility 0s .62s;
}
.chat.is-open {
  clip-path: inset(0 0 0 0 round 0);
  opacity: 1;
  visibility: visible;
  transition: clip-path .62s cubic-bezier(.7, 0, .2, 1), opacity .2s ease;
}
html.chat-lock, html.chat-lock body { overflow: hidden; overscroll-behavior: none; }
@media (max-width: 899px) {
  html.chat-lock body { position: fixed; left: 0; right: 0; width: 100%; }
  .chat.is-keyboard .chat-compose { padding-bottom: 8px; }
  .chat.is-keyboard .chat-note { display: none; }
}

.chat-backdrop, .chat-side { display: none; }
.chat-window {
  flex: 1;
  min-height: 0;
  display: flex;
}
.chat-main {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.chat-aura::before,
.chat-aura::after {
  content: "";
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .22;
}
.chat-aura::before {
  top: -45vmax;
  left: -20vmax;
  background: radial-gradient(circle, var(--c-acc), transparent 65%);
  animation: chat-drift 18s ease-in-out infinite alternate;
}
.chat-aura::after {
  top: -40vmax;
  right: -30vmax;
  background: radial-gradient(circle, #7c3aed, transparent 65%);
  animation: chat-drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes chat-drift {
  to { transform: translate(12vmax, 8vmax) scale(1.15); }
}

.chat-bar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.chat.is-scrolled .chat-bar {
  background: rgba(9, 8, 14, .72);
  border-color: var(--c-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.chat-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--c-text);
  background: var(--c-glass);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  transition: background .25s, transform .2s;
}
.chat-icon-btn:hover { background: rgba(255, 255, 255, .1); }
.chat-icon-btn:active { transform: scale(.92); }
.chat-icon-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.chat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-left: 4px;
}
.chat-title b { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.chat-title .chat-mark { --d: 8px; }

.chat-mark {
  --d: 7px;
  display: inline-flex;
  flex: none;
  align-items: flex-end;
  gap: calc(var(--d) * .55);
  height: calc(var(--d) * 2.6);
}
.chat-mark i {
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: #4a8df0;
}
.chat-mark i:nth-child(2) { background: #e84230; }
.chat-mark i:nth-child(3) { background: #f8b800; }
.is-thinking .chat-mark i,
.is-streaming .chat-mark i,
.chat-hello .chat-mark i {
  animation: mark-hop 1s cubic-bezier(.5, 0, .5, 1) infinite;
}
.chat-mark i:nth-child(2) { animation-delay: .14s !important; }
.chat-mark i:nth-child(3) { animation-delay: .28s !important; }
@keyframes mark-hop {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(calc(var(--d) * -1.4)); }
}

.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent;
}
.chat-inner {
  max-width: 740px;
  min-height: 100%;
  margin: 0 auto;
  padding: 12px 18px 24px;
  display: flex;
  flex-direction: column;
}

.chat-hello {
  margin: auto 0;
  padding: 24px 0 8px;
  text-align: center;
}
.chat-hello .chat-mark {
  --d: 16px;
  margin: 0 auto 30px;
  filter: drop-shadow(0 10px 24px rgba(255, 255, 255, .08));
}
.chat-hello .chat-mark i { animation-duration: 2.4s; }
.chat-hello h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 600;
  letter-spacing: -.03em;
}
.chat-hello p {
  margin: 0 auto 28px;
  max-width: 360px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-dim);
}
.chat-suggest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
}
.chat-suggest button {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 16px;
  text-align: left;
  color: var(--c-text);
  background: var(--c-glass);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  opacity: 0;
  translate: 0 12px;
  transition: background .25s, border-color .25s, transform .2s;
}
.chat.is-open .chat-suggest button {
  opacity: 1;
  translate: 0 0;
  transition: opacity .5s ease calc(.35s + var(--i) * .07s), translate .6s var(--ease) calc(.35s + var(--i) * .07s), background .25s, border-color .25s, transform .2s;
}
.chat-suggest button:hover { background: rgba(255, 255, 255, .09); border-color: rgba(249, 115, 22, .35); }
.chat-suggest button:active { transform: scale(.97); }
.chat-suggest svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--c-acc-2); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.chat-suggest b { font-size: 14px; font-weight: 600; }
.chat-suggest small { margin-top: -6px; font-size: 12.5px; color: var(--c-dim); }

.msg {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  animation: msg-in .45s var(--ease) both;
}
@keyframes msg-in {
  from { opacity: 0; translate: 0 10px; }
}
.msg--user { justify-content: flex-end; }
.msg--user .msg-body {
  max-width: 82%;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.55;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--c-line);
  border-radius: 20px 20px 6px 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg--bot .chat-mark { --d: 6px; margin-top: 6px; width: 26px; }
.msg--bot .msg-body {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.msg-body p { margin: 0 0 10px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body ul, .msg-body ol { margin: 0 0 10px; padding-left: 20px; }
.msg-body li { margin: 3px 0; }
.msg-body li::marker { color: var(--c-acc-2); }
.msg-body strong { font-weight: 600; color: #fff; }

.msg.is-streaming .msg-body > :last-child::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--c-acc);
  animation: caret 1s ease-in-out infinite;
}
@keyframes caret { 50% { opacity: .2; scale: .7; } }

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0 38px;
  animation: msg-in .45s var(--ease) .1s both;
}
.chat-chips button,
.chat-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-glass);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  transition: background .25s, border-color .25s, transform .2s;
}
.chat-chips button:hover { border-color: rgba(249, 115, 22, .45); }
.chat-chips :active { transform: scale(.96); }
.chat-chips .is-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--c-acc), var(--c-acc-2));
  border-color: transparent;
  box-shadow: 0 10px 24px -12px rgba(249, 115, 22, .9);
}
.chat-chips svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.msg-error {
  margin: 14px 0 0 38px;
  font-size: 13px;
  color: #fca5a5;
}

.chat-compose {
  flex: none;
  padding: 8px 14px calc(12px + env(safe-area-inset-bottom));
}
.chat-compose form {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color .3s, box-shadow .3s;
}
.chat-compose form:focus-within {
  border-color: rgba(249, 115, 22, .5);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, .12);
}
.chat-compose textarea {
  flex: 1;
  min-width: 0;
  max-height: 150px;
  padding: 10px 0;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  color: var(--c-text);
  background: none;
  border: 0;
  outline: 0;
  resize: none;
}
.chat-compose textarea::placeholder { font-size: 14px; color: rgba(236, 235, 242, .4); }
.chat-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: linear-gradient(135deg, var(--c-acc), var(--c-acc-2));
  border-radius: 13px;
  box-shadow: 0 8px 18px -8px rgba(249, 115, 22, .9);
  transition: opacity .25s, transform .2s, background .3s, box-shadow .3s;
}
.chat-send:active { transform: scale(.9); }
.chat-send:disabled { background: rgba(255, 255, 255, .1); box-shadow: none; color: rgba(255, 255, 255, .35); }
.chat-send svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.chat-send .i-stop { display: none; fill: currentColor; stroke: none; }
.chat.is-busy .chat-send { background: #fff; color: var(--c-bg); box-shadow: none; }
.chat.is-busy .chat-send:disabled { background: #fff; color: var(--c-bg); }
.chat.is-busy .chat-send .i-send { display: none; }
.chat.is-busy .chat-send .i-stop { display: block; width: 14px; height: 14px; }
.chat-note {
  max-width: 740px;
  margin: 8px auto 0;
  font-size: 11px;
  text-align: center;
  color: rgba(236, 235, 242, .35);
}

@media (max-width: 640px) {
  .chat-inner { padding: 8px 16px 18px; }
  .chat-hello .chat-mark { --d: 14px; }
  .chat-suggest { gap: 8px; }
  .chat-suggest button { padding: 14px; border-radius: 16px; }
  .msg--user .msg-body { max-width: 88%; }
  .chat-compose { padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat, .chat.is-open { transition: opacity .2s, visibility 0s; clip-path: none; }
  .chat-mark i, .chat-aura::before, .chat-aura::after { animation: none !important; }
}

@media (min-width: 900px) {
  .chat {
    display: grid;
    place-items: center;
    padding: 28px;
    background: none;
    clip-path: none;
    opacity: 1;
    transition: visibility 0s .5s;
  }
  .chat.is-open { clip-path: none; transition: none; }

  .chat-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(6, 5, 10, .6);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    opacity: 0;
    transition: opacity .45s ease;
  }
  .chat.is-open .chat-backdrop { opacity: 1; }

  .chat-window {
    position: relative;
    flex: none;
    display: grid;
    grid-template-columns: 280px 1fr;
    width: min(1180px, 100%);
    height: min(860px, 100%);
    overflow: hidden;
    background: var(--c-bg);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 28px;
    box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
    opacity: 0;
    transform: translateY(28px) scale(.96);
    transition: opacity .35s ease, transform .55s cubic-bezier(.2, .9, .25, 1);
  }
  .chat.is-open .chat-window { opacity: 1; transform: none; }

  .chat-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 26px 16px 20px;
    overflow-y: auto;
    background: rgba(255, 255, 255, .025);
    border-right: 1px solid var(--c-line);
  }
  .chat-side-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 30px;
  }
  .chat-side-brand .chat-mark { --d: 8px; }
  .chat-side-brand b { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
  .chat-side-label {
    margin: 0 0 8px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(236, 235, 242, .4);
  }
  .chat-topics { display: grid; gap: 2px; }
  .chat-topics button,
  .chat-side-contact a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    font-size: 14px;
    text-align: left;
    color: rgba(236, 235, 242, .85);
    border-radius: 12px;
    transition: background .25s, color .25s;
  }
  .chat-topics button:hover,
  .chat-side-contact a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
  .chat-topics svg,
  .chat-side-contact svg {
    flex: none;
    width: 18px; height: 18px;
    fill: none; stroke: var(--c-acc-2); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .chat-side-contact {
    display: grid;
    gap: 2px;
    margin-top: auto;
    padding-top: 24px;
  }
  .chat-side-contact svg {
    box-sizing: content-box;
    padding: 9px;
    background: rgba(249, 115, 22, .1);
    border-radius: 11px;
  }
  .chat-side-contact span { display: grid; gap: 1px; }
  .chat-side-contact b { font-size: 13.5px; font-weight: 600; }
  .chat-side-contact small { font-size: 12px; color: var(--c-dim); }
  .chat-bar { padding: 16px 18px 8px; }
  .chat-bar .chat-title { visibility: hidden; }
  .chat.is-scrolled .chat-bar { background: rgba(9, 8, 14, .6); }
  .chat-inner { padding: 8px 40px 28px; }
  .chat-compose { padding: 8px 40px 18px; }
  .chat-hello .chat-mark { --d: 18px; }
  .chat-hello h2 { font-size: 32px; }
  .msg--bot .msg-body, .msg--user .msg-body { font-size: 15.5px; }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .chat-window { transform: none; transition: opacity .2s; }
}
.chat-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.chat.is-banned .chat-compose form { opacity: .45; pointer-events: none; }
.chat.is-banned .chat-suggest,
.chat.is-banned .chat-chips,
.chat.is-banned .chat-topics { display: none; }

.msg-body a { color: #fb923c; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.msg-body a:hover { color: #fdba74; }