:root {
  --ca-pill-source-radius: 58px;
  --ca-segment-source-radius: 40px;
}

.ca-button-v7 {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 90ms cubic-bezier(.2,.8,.2,1), filter 120ms ease;
}

.ca-button-v7:hover:not(:disabled) {
  filter: brightness(1.05) saturate(1.04);
  transform: translateY(-1px);
}

.ca-button-v7:active:not(:disabled),
.ca-button-v7.is-pressed {
  filter: brightness(.96) saturate(1.02);
  transform: translateY(3px) scale(.94);
  transition-duration: 45ms;
}

.ca-button-v7:focus-visible {
  outline: 3px solid #55d0ee;
  outline-offset: 3px;
}

.ca-button-v7:disabled,
.ca-button-v7[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(.72) brightness(.92);
  opacity: .62;
}

[data-ca-button="chat-toggle"] {
  width: 40px;
  height: 40px;
  background-image: url("../buttons/chat-toggle.png") !important;
}

[data-ca-button="escape"] {
  width: clamp(126px, 16vw, 168px);
  aspect-ratio: 1;
  color: #fff;
  background-image: url("../buttons/escape.png") !important;
  animation: ca-escape-pulse 1.05s ease-in-out infinite;
}

[data-ca-button="escape"] > span {
  position: absolute;
  inset: auto 0 22%;
  z-index: 1;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 #8e2630, 0 0 4px rgba(0,0,0,.25);
}

[data-ca-button="send"] {
  width: 42px;
  height: 42px;
  background-image: url("../buttons/send.png") !important;
}

[data-ca-button="swap"] {
  width: 48px;
  height: 48px;
  background-image: url("../buttons/swap.png") !important;
}

[data-ca-button="pill-primary"],
[data-ca-button="pill-secondary-blue"],
[data-ca-button="pill-neutral"] {
  min-width: 116px;
  height: 58px;
  padding: 0 26px;
  font-weight: 950;
  white-space: nowrap;
}

[data-ca-button="pill-primary"] {
  color: #fff;
  background-image: url("../buttons/pill-primary.png") !important;
}

[data-ca-button="pill-secondary-blue"] {
  color: #fff;
  background-image: url("../buttons/pill-secondary-blue.png") !important;
}

[data-ca-button="pill-neutral"] {
  color: #153a67;
  background-image: url("../buttons/pill-neutral.png") !important;
}

[data-ca-button="segment-off"],
[data-ca-button="segment-on"] {
  min-width: 74px;
  height: 40px;
  padding: 0 18px;
  color: #153a67;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

[data-ca-button="segment-off"] { background-image: url("../buttons/segment-off.png") !important; }
[data-ca-button="segment-on"] { background-image: url("../buttons/segment-on.png") !important; }

[data-ca-button="map-tile"],
[data-ca-button="map-tile-selected"] {
  width: clamp(72px, 6vw, 96px);
  aspect-ratio: 1;
  padding: 8px;
}

[data-ca-button="map-tile"] { background-image: url("../buttons/map-tile.png") !important; }
[data-ca-button="map-tile-selected"] { background-image: url("../buttons/map-tile-selected.png") !important; }

[data-ca-button="map-tile"] img,
[data-ca-button="map-tile-selected"] img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

@keyframes ca-escape-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(240,100,91,0)); }
  50% { filter: drop-shadow(0 0 12px rgba(240,100,91,.52)); }
}

@media (prefers-reduced-motion: reduce) {
  .ca-button-v7 { transition: none; }
  [data-ca-button="escape"] { animation: none; }
}