/* Shared 0.8 curves. SVG nine-slice painting needs no wrappers or message measurements. */
.character-summary, .text-button, .segmented-control span {
  --squircle-paint: var(--runtime-squircle-sm-clear);
}
.icon-button {
  --squircle-paint: var(--runtime-squircle-md-clear);
}
.composer__suggestion, .text-button:hover {
  --squircle-paint: var(--runtime-squircle-sm-surface);
}
.character__scene, .composer__suggestion:hover, .settings__select, .segmented-control {
  --squircle-paint: var(--runtime-squircle-sm-canvas);
}
.user-profile__field :is(input, textarea, select), .character__picker select {
  --squircle-paint: var(--runtime-squircle-sm-canvas-outline);
}
.composer__error {
  --squircle-paint: var(--runtime-squircle-sm-surface-outline);
}
.conversation__latest {
  --squircle-paint: var(--runtime-squircle-md-surface-outline);
}
.message__bubble {
  --squircle-paint: var(--runtime-squircle-md-gray-2);
}
.message--user .message__bubble {
  --squircle-paint: var(--runtime-squircle-md-secondary-square-bottom-right);
}
.conversation__loading {
  --squircle-paint: var(--runtime-conversation-loading-paint);
}
.message--character:nth-child(1 of .message--character:not(.message--narration)) .message__bubble {
  --squircle-paint: var(--runtime-squircle-md-gray-2-square-top-left);
}
.icon-button:hover, .icon-button[aria-expanded="true"] {
  --squircle-paint: var(--runtime-squircle-md-surface);
}
.panel {
  --squircle-paint: var(--runtime-squircle-lg-surface-outline);
}
.user-profile__save, .segmented-control input:checked + span {
  --squircle-paint: var(--runtime-squircle-sm-accent);
}
.icon-button:disabled {
  --squircle-paint: var(--runtime-squircle-md-clear);
}
.text-button:disabled {
  --squircle-paint: var(--runtime-squircle-sm-clear);
}

.login__sign-in-prompt { --squircle-paint: var(--runtime-squircle-xs-primary); }
.login__button--google {
  --squircle-paint: var(--runtime-squircle-md-google);
}
.login__button--kakao {
  --squircle-paint: var(--runtime-squircle-md-kakao);
}

.pill, .pill:hover, .pill:disabled {
  --squircle-paint: var(--runtime-squircle-md-surface-divider);
}
.pill.diagram-node[data-active="true"] {
  --squircle-paint: var(--runtime-squircle-md-surface-outline);
}

:root[data-squircle-ready] .squircle {
  background: none !important;
  border-color: transparent !important;
  border-image: var(--squircle-paint);
}

/* Keep the select arrow above the painted border using its existing label/grid. */
[data-squircle-ready] :is(.character__picker, .user-profile__field:has(> select)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'label' 'select';
}
[data-squircle-ready] .select-control { grid-area: select; appearance: none; }
[data-squircle-ready] :is(.select-field, .character__picker, .user-profile__field:has(> select))::after {
  content: '';
  grid-area: select;
  align-self: center;
  justify-self: end;
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
  margin-inline-end: var(--space-lg);
  background: var(--color-muted);
  mask: url('../assets/icons/ui/arrowDown.svg') center / contain no-repeat;
  pointer-events: none;
}
@media (forced-colors: active) {
  [data-squircle-ready] .select-control { appearance: auto; }
  [data-squircle-ready] :is(.select-field, .character__picker, .user-profile__field:has(> select))::after { content: none; }
  [data-squircle-ready] .squircle { border-image: none !important; background: Canvas !important; border-color: CanvasText !important; }
}