:root {
  --chat-z: 58;
  --chat-surface: rgba(250, 246, 238, 0.98);
  --chat-surface-strong: rgba(255, 253, 248, 0.99);
  --chat-line: rgba(173, 160, 137, 0.46);
  --chat-line-soft: rgba(184, 171, 149, 0.34);
  --chat-ink: #1b1712;
  --chat-ink-soft: #5f5749;
  --chat-accent: #6a8e29;
  --chat-accent-strong: #567523;
  --chat-shadow-soft: 0 14px 28px rgba(34, 27, 17, 0.13);
  --chat-shadow-strong: 0 20px 44px rgba(23, 18, 10, 0.18);
  --chat-radius-xl: 20px;
  --chat-radius-lg: 14px;
  --chat-radius-md: 10px;
  --chat-motion-fast: 180ms;
  --chat-motion-base: 280ms;
  --chat-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.chat-widget,
.chat-widget * {
  box-sizing: border-box;
}

.chat-widget {
  position: fixed;
  right: clamp(0.76rem, 1.9vw, 1.22rem);
  bottom: clamp(0.76rem, 2.2vw, 1.26rem);
  z-index: var(--chat-z);
  display: grid;
  justify-items: end;
  gap: 0.6rem;
  pointer-events: none;
}

.chat-widget.is-ready {
  pointer-events: auto;
}

.chat-launcher {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(103, 137, 47, 0.52);
  background:
    radial-gradient(92% 94% at 20% 12%, rgba(164, 195, 121, 0.94), rgba(103, 141, 53, 0.93)),
    linear-gradient(160deg, #83af49, #628635);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 12px 24px rgba(48, 66, 25, 0.26);
  color: #1f3008;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(0.95);
  transition:
    opacity var(--chat-motion-base) var(--chat-ease),
    transform var(--chat-motion-base) var(--chat-ease),
    box-shadow var(--chat-motion-fast) var(--chat-ease),
    filter var(--chat-motion-fast) var(--chat-ease);
}

.chat-widget.is-ready .chat-launcher {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.chat-launcher:hover,
.chat-launcher:focus-visible {
  filter: saturate(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 16px 30px rgba(46, 62, 23, 0.3);
  outline: none;
}

.chat-launcher svg {
  width: 24px;
  height: 24px;
}

.chat-launcher-dot {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #f7f4ee;
  background: #2f83d1;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity var(--chat-motion-fast) var(--chat-ease),
    transform var(--chat-motion-fast) var(--chat-ease);
}

.chat-launcher-dot.is-visible {
  opacity: 1;
  transform: scale(1);
}

.chat-panel {
  width: min(388px, calc(100vw - 1.2rem));
  border-radius: var(--chat-radius-xl);
  border: 1px solid var(--chat-line);
  background:
    radial-gradient(124% 108% at 2% 1%, rgba(199, 224, 157, 0.13), transparent 56%),
    linear-gradient(162deg, var(--chat-surface-strong), var(--chat-surface));
  box-shadow: var(--chat-shadow-strong);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition:
    opacity var(--chat-motion-base) var(--chat-ease),
    transform var(--chat-motion-base) var(--chat-ease);
}

.chat-widget[data-chat-state="opening"] .chat-panel,
.chat-widget[data-chat-state="open"] .chat-panel,
.chat-widget[data-chat-state="processing"] .chat-panel,
.chat-widget[data-chat-state="error"] .chat-panel,
.chat-widget[data-chat-state="idle"] .chat-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.86rem;
  padding: 0.9rem 0.96rem 0.86rem;
  border-bottom: 1px solid var(--chat-line-soft);
}

.chat-header-title {
  display: grid;
  gap: 0.14rem;
}

.chat-header-title strong {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--chat-ink);
}

.chat-header-title span {
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--chat-ink-soft);
}

.chat-close {
  min-height: 36px;
  min-width: 52px;
  border-radius: 11px;
  border: 1px solid rgba(156, 145, 125, 0.6);
  background: rgba(255, 253, 249, 0.92);
  color: #3f382d;
  cursor: pointer;
  font: inherit;
  font-size: 0.79rem;
  font-weight: 700;
  padding: 0 0.6rem;
}

.chat-close:hover,
.chat-close:focus-visible {
  border-color: rgba(101, 140, 45, 0.62);
  background: rgba(252, 250, 245, 0.96);
  outline: none;
}

.chat-status {
  margin: 0.66rem 0.96rem 0;
  border-radius: 11px;
  border: 1px solid rgba(171, 159, 138, 0.42);
  background: rgba(255, 252, 246, 0.8);
  padding: 0.52rem 0.64rem;
  font-size: 0.76rem;
  line-height: 1.3;
  color: #5c5446;
}

.chat-log {
  margin: 0.72rem 0.96rem 0;
  max-height: min(50vh, 412px);
  overflow: auto;
  display: grid;
  gap: 0.56rem;
  padding-right: 0.28rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 143, 124, 0.62) transparent;
}

.chat-log::-webkit-scrollbar {
  width: 8px;
}

.chat-log::-webkit-scrollbar-track {
  background: transparent;
}

.chat-log::-webkit-scrollbar-thumb {
  background: rgba(156, 145, 126, 0.56);
  border-radius: 99px;
}

.chat-log::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 118, 102, 0.7);
}

.chat-row {
  display: grid;
  gap: 0.36rem;
  justify-items: start;
}

.chat-row-user {
  justify-items: end;
}

.chat-bubble {
  max-width: 92%;
  border-radius: 12px;
  border: 1px solid rgba(173, 161, 141, 0.56);
  background: rgba(255, 253, 249, 0.95);
  color: #2a241a;
  padding: 0.62rem 0.72rem;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  box-shadow: 0 6px 14px rgba(43, 34, 19, 0.07);
}

.chat-row-user .chat-bubble {
  border-color: rgba(24, 28, 38, 0.58);
  background: linear-gradient(156deg, #171c27, #242c3a);
  color: #f4f7fc;
}

.chat-row-meta {
  margin: -0.05rem 0 0;
  font-size: 0.66rem;
  color: #7a705f;
  letter-spacing: 0.01em;
}

.chat-blocks {
  display: grid;
  gap: 0.34rem;
  width: min(94%, 320px);
}

.chat-row-user .chat-blocks {
  justify-items: end;
}

.chat-block {
  width: 100%;
  border-radius: 9px;
  border: 1px solid rgba(170, 158, 138, 0.46);
  background: rgba(255, 253, 248, 0.9);
  padding: 0.44rem 0.54rem;
}

.chat-block-summary {
  border-color: rgba(130, 164, 84, 0.45);
}

.chat-block-next_step {
  border-color: rgba(120, 148, 189, 0.44);
}

.chat-block-title {
  margin: 0;
  font-size: 0.67rem;
  line-height: 1.25;
  color: #5a5245;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chat-block-text {
  margin: 0.18rem 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #2f291f;
}

.chat-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148, 140, 124, 0.66);
  background: rgba(255, 253, 248, 0.94);
  color: #3f382d;
  font-size: 0.74rem;
  font-weight: 650;
  padding: 0.28rem 0.64rem;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(34, 28, 20, 0.06);
}

.chat-cta:hover,
.chat-cta:focus-visible {
  border-color: rgba(105, 141, 48, 0.58);
  background: rgba(246, 251, 237, 0.94);
  outline: none;
}

.chat-handoff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(104, 137, 182, 0.58);
  background: rgba(236, 245, 255, 0.92);
  color: #274b74;
  font-size: 0.73rem;
  font-weight: 650;
  padding: 0.28rem 0.62rem;
  text-decoration: none;
}

.chat-handoff:hover,
.chat-handoff:focus-visible {
  background: rgba(229, 241, 255, 0.97);
  outline: none;
}

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  border-radius: 999px;
  border: 1px solid rgba(176, 160, 132, 0.52);
  background: rgba(255, 252, 247, 0.94);
  padding: 0.3rem 0.48rem;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #8e8168;
  animation: chatTyping 900ms infinite ease-in-out;
}

.chat-typing span:nth-child(2) {
  animation-delay: 120ms;
}

.chat-typing span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes chatTyping {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.56;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.chat-quick {
  margin: 0.68rem 0.96rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.chat-quick button {
  min-height: 31px;
  border-radius: 11px;
  border: 1px solid rgba(170, 157, 137, 0.52);
  background: rgba(254, 252, 247, 0.93);
  color: #4f4739;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 640;
  padding: 0.24rem 0.62rem;
  cursor: pointer;
}

.chat-quick button:hover,
.chat-quick button:focus-visible {
  border-color: rgba(100, 139, 46, 0.6);
  background: rgba(247, 251, 240, 0.98);
  outline: none;
}

.chat-composer {
  margin: 0.78rem 0.96rem 0.82rem;
  border-radius: 13px;
  border: 1px solid rgba(169, 156, 135, 0.56);
  background: rgba(255, 253, 249, 0.93);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.48rem;
  padding: 0.44rem;
}

.chat-input {
  border: 0;
  background: transparent;
  color: #231d13;
  font: inherit;
  font-size: 0.83rem;
  padding: 0.36rem 0.4rem;
  min-width: 0;
}

.chat-input::placeholder {
  color: #7b7262;
}

.chat-input:focus-visible {
  outline: none;
}

.chat-send {
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(28, 32, 44, 0.8);
  background: linear-gradient(154deg, #161b26, #202939);
  color: #f6f8fc;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.22rem 0.66rem;
  cursor: pointer;
}

.chat-send:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.chat-send:not(:disabled):hover,
.chat-send:not(:disabled):focus-visible {
  filter: brightness(1.04);
  outline: none;
}

.chat-footnote {
  margin: -0.3rem 0.96rem 0.8rem;
  color: #756b5d;
  font-size: 0.66rem;
  line-height: 1.4;
}

.chat-hidden {
  display: none !important;
}

.chat-launcher:focus-visible,
.chat-input:focus-visible,
.chat-send:focus-visible,
.chat-close:focus-visible,
.chat-quick button:focus-visible,
.chat-cta:focus-visible,
.chat-handoff:focus-visible {
  outline: 3px solid rgba(96, 140, 182, 0.35);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .chat-widget {
    right: 0.58rem;
    bottom: 0.58rem;
    gap: 0.48rem;
  }

  .chat-launcher {
    width: 54px;
    height: 54px;
  }

  .chat-panel {
    width: min(100vw - 0.84rem, 408px);
    max-height: 78vh;
  }

  .chat-log {
    max-height: min(43vh, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-widget *,
  .chat-widget *::before,
  .chat-widget *::after {
    animation: none !important;
    transition: none !important;
  }

  .chat-launcher {
    opacity: 1;
    transform: none;
  }
}
